diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-pseudo-open-closed.tentative.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-pseudo-open-closed.tentative.html | 61 |
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> |