1 files changed, 61 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-pseudo-open-closed.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-pseudo-open-closed.tentative.html
new file mode 100644
index 0000000000..1d5a082c03
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-pseudo-open-closed.tentative.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/openui/open-ui/issues/547">
+<link rel=help href="https://drafts.csswg.org/selectors/#open-state">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<selectlist id=myselectlist>
+  <button type=selectlist id=custombutton>button</button>
+  <option>one</option>
+  <option>two</option>
+</selectlist>
+
+<script>
+test(() => {
+  assert_false(myselectlist.matches(':open'),
+    'Selectlist should not match :open while it is closed.');
+  assert_true(myselectlist.matches(':closed'),
+    'Selectlist should match :closed while it is closed.');
+
+  custombutton.click();
+
+  assert_true(myselectlist.matches(':open'),
+    'Selectlist should match :open while it is open.');
+  assert_false(myselectlist.matches(':closed'),
+    'Selectlist should not match :closed while it is open.');
+}, 'Selectlist should support :open and :closed pseudo selectors.');
+</script>
+
+<selectlist id=selectlistinvalidation>
+  <button type=selectlist>button</button>
+  <option>one</option>
+  <option>two</option>
+</selectlist>
+<style>
+selectlist:closed {
+  background-color: red;
+}
+selectlist:open {
+  background-color: green;
+}
+</style>
+
+<script>
+test(() => {
+  const selectlist = document.getElementById('selectlistinvalidation');
+  const button = selectlist.querySelector('button');
+  const option = selectlist.querySelector('option');
+
+  assert_equals(getComputedStyle(selectlist).backgroundColor, 'rgb(255, 0, 0)',
+    'The style rules from :closed should apply when the selectlist is closed.');
+
+  button.click();
+  assert_equals(getComputedStyle(selectlist).backgroundColor, 'rgb(0, 128, 0)',
+    'The style rules from :open should apply when the selectlist is open.');
+
+  option.click();
+  assert_equals(getComputedStyle(selectlist).backgroundColor, 'rgb(255, 0, 0)',
+    'The style rules from :closed should apply when the selectlist is opened and closed again.');
+}, 'Selectlist :open and :closed should invalidate correctly.');
+</script>