diff --git a/html/semantics/forms/the-output-element/output-validity.html b/html/semantics/forms/the-output-element/output-validity.html
new file mode 100644
index 000000000000000..c59a055ecfff4b2
--- /dev/null
+++ b/html/semantics/forms/the-output-element/output-validity.html
@@ -0,0 +1,23 @@
+<!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>
