output-validity.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-output-element/output-validity.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<title>:valid and :invalid pseudo-class on output element</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<output id='output_test'></output>

<script>

test(() => {

  let output = document.getElementById("output_test");

  assert_false(output.matches(":valid"), "should not match :valid pseudo-class");

  assert_false(output.matches(":invalid"), "should not match :invalid pseudo-class");

  output.setCustomValidity("custom error");

  assert_equals(output.validationMessage, "", "should not have a validation message");

  assert_true(output.validity.customError, "should have a custom error");

  assert_false(output.validity.valid, "should not be valid with a custom error");

  assert_false(output.matches(":valid"), "should still not match :valid pseudo-class");

  assert_false(output.matches(":invalid"), "should still not match :invalid pseudo-class");

}, ":valid and :invalid pseudo-class on output element")

</script>