diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:43:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:43:14 +0000 |
commit | 8dd16259287f58f9273002717ec4d27e97127719 (patch) | |
tree | 3863e62a53829a84037444beab3abd4ed9dfc7d0 /testing/web-platform/tests/html/semantics/forms/the-select-element | |
parent | Releasing progress-linux version 126.0.1-1~progress7.99u1. (diff) | |
download | firefox-8dd16259287f58f9273002717ec4d27e97127719.tar.xz firefox-8dd16259287f58f9273002717ec4d27e97127719.zip |
Merging upstream version 127.0.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
20 files changed, 369 insertions, 31 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/forms/the-select-element/WEB_FEATURES.yml new file mode 100644 index 0000000000..9695c95294 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/WEB_FEATURES.yml @@ -0,0 +1,9 @@ +features: +- name: constraint-validation + files: + - select-setcustomvalidity.html + - select-validity.html + - select-willvalidate-readonly-attribute.html +- name: show-picker-select + files: + - show-picker-* diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist-ref.html new file mode 100644 index 0000000000..87918b6a92 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<select> + <option>one</option> + <hr> + <option>two</option> +</select> + +<script> +(async () => { + await test_driver.click(document.querySelector('select')); + document.documentElement.classList.remove('reftest-wait'); +})(); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html new file mode 100644 index 0000000000..a968c6a164 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/whatwg/html/issues/9799"> +<link rel=match href="native-popup-with-datalist-ref.html"> +<link rel=assert title="The native popup of a select should show options descending from datalists"> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<select> + <datalist> + <div> + <option>one</option> + <hr> + <option>two</option> + </div> + </datalist> +</select> + +<script> +(async () => { + await test_driver.click(document.querySelector('select')); + document.documentElement.classList.remove('reftest-wait'); +})(); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/nested-options.tenative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/nested-options.tenative.html new file mode 100644 index 0000000000..7e89a5ad42 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/nested-options.tenative.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1422275"> +<link rel=help href="https://chromium-review.googlesource.com/c/chromium/src/+/5441435/1#message-cd8841d92a672a0276ab536dfaf3a20e93d5e6e3"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<select> + <datalist> + <option id=o1> + parent + <option id=o2>child</option> +</option> + </datalist> +</select> + +<script> +const select = document.querySelector('select'); + +test(() => { + assert_equals(select.innerHTML, ` + <datalist> + <option id="o1"> + parent + </option><option id="o2">child</option> + + </datalist> +`); +}, 'The HTML parser should disallow nested options in select datalist.'); + +// Manually nest the <options> anyway for the following tests. +o1.appendChild(o2); + +test(() => { + assert_equals(select.options.length, 2, 'select.options.length'); + assert_equals(select.options[0], o1, 'select.options[0]'); + assert_equals(select.options[1], o2, 'select.options[1]'); +}, 'Nested <options> should be listed in <select> IDLs.'); + +promise_test(async () => { + await test_driver.bless(); + select.showPicker(); +}, 'Showing the popup with nested <option>s should not crash.'); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/select-reset-non-interoperable-styles.css b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/select-reset-non-interoperable-styles.css deleted file mode 100644 index d2b9d9df26..0000000000 --- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/select-reset-non-interoperable-styles.css +++ /dev/null @@ -1,5 +0,0 @@ -/* TODO(crbug.com/1511354): linux.css sets background-color on select, consider - * removing it. */ -select { - background-color: Field; -} diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css index 042de838d1..5ee317d61a 100644 --- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css @@ -1,9 +1,6 @@ /* These are UA styles for select and stylable select. */ .stylable-select-container { - background-color: Field; - border: 1px solid rgba(0, 0, 0, 0); - border-radius: 0; box-sizing: border-box; display: inline-block; } @@ -14,7 +11,8 @@ overflow: auto; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25em; - padding: 0.25em 0; + padding-block: 0.25em; + padding-inline: 0; background-color: Field; margin: 0; inset: auto; @@ -35,3 +33,46 @@ padding: 0px 2px 1px; white-space: nowrap; } + +.stylable-select-button { + color: FieldText; + background-color: Field; + appearance: none; + padding: 0.25em; + border: 1px solid ButtonBorder; + cursor: default; + text-align: inherit; + display: inline-flex; + flex-grow: 1; + flex-shrink: 1; + align-items: center; + overflow-x: hidden; + overflow-y: hidden; +} + +.stylable-select-button-icon { + background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4%206%20L10%2012%20L%2016%206%22%20stroke%3D%22WindowText%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E); + background-origin: content-box; + background-repeat: no-repeat; + background-size: contain; + opacity: 1; + outline: none; + margin-inline-start: 0.25em; + padding-block: 2px; + padding-inline: 3px; + block-size: 1.0em; + inline-size: 1.2em; + min-inline-size: 1.2em; + max-inline-size: 1.2em; + display: block; +} + +.stylable-select-selectedoption { + color: inherit; + min-inline-size: 0px; + max-block-size: 100%; + flex-grow: 1; + flex-shrink: 1; + overflow: hidden; + display: inline; +} diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html new file mode 100644 index 0000000000..10c966a107 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel=stylesheet href="resources/stylable-select-styles.css"> + +<div id=container class=stylable-select-container> + <button>one</button> + <div id=popover popover=auto anchor=container class=stylable-select-datalist> + <div class=stylable-select-option>one</div> + <div class=stylable-select-option>two</div> + </div> +</div> + +<script> +document.getElementById('popover').showPopover(); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html index 94d7fd53b3..aaceabcf05 100644 --- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html @@ -2,8 +2,7 @@ <html class=reftest-wait> <link rel=author href="mailto:jarhar@chromium.org"> <link rel=help href="https://github.com/whatwg/html/issues/9799"> -<link rel=match href="select-appearance-no-button-custom-datalist-ref.html"> -<link rel=stylesheet href="resources/select-reset-non-interoperable-styles.css"> +<link rel=match href="select-appearance-custom-button-no-datalist-ref.html"> <script src="/resources/testdriver.js"></script> <script src="/resources/testdriver-vendor.js"></script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html deleted file mode 100644 index 8e5eadaf57..0000000000 --- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html +++ /dev/null @@ -1,14 +0,0 @@ -<!DOCTYPE html> -<link rel=stylesheet href="resources/stylable-select-styles.css"> - -<div id=container class=stylable-select-container> - <button popovertarget=popover id=button>one</button> - <div id=popover popover=auto anchor=container class=stylable-select-datalist> - <div class=stylable-select-option>one</div> - <div class=stylable-select-option>two</div> - </div> -</div> - -<script> -document.getElementById('popover').showPopover(); -</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html index 87425cf7a3..cc8a4c60bd 100644 --- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html @@ -2,8 +2,7 @@ <html class=reftest-wait> <link rel=author href="mailto:jarhar@chromium.org"> <link rel=help href="https://github.com/whatwg/html/issues/9799"> -<link rel=match href="select-appearance-no-button-custom-datalist-ref.html"> -<link rel=stylesheet href="resources/select-reset-non-interoperable-styles.css"> +<link rel=match href="select-appearance-no-button-no-datalist-ref.html"> <script src="/resources/testdriver.js"></script> <script src="/resources/testdriver-vendor.js"></script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html new file mode 100644 index 0000000000..3c6e9416b0 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel=stylesheet href="resources/stylable-select-styles.css"> + +<div id=container class=stylable-select-container> + <button class=stylable-select-button popovertarget=popover id=button> + <span class=stylable-select-selectedoption>one</span> + <div class=stylable-select-button-icon></div> + </button> + <div id=popover popover=auto anchor=container class=stylable-select-datalist> + <div class=stylable-select-option>one</div> + <div class=stylable-select-option>two</div> + </div> +</div> + +<script> +document.getElementById('popover').showPopover(); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html index b2a6b5a6d3..29261b7f25 100644 --- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html @@ -2,8 +2,7 @@ <html class=reftest-wait> <link rel=author href="mailto:jarhar@chromium.org"> <link rel=help href="https://github.com/whatwg/html/issues/9799"> -<link rel=match href="select-appearance-no-button-custom-datalist-ref.html"> -<link rel=stylesheet href="resources/select-reset-non-interoperable-styles.css"> +<link rel=match href="select-appearance-no-button-no-datalist-ref.html"> <script src="/resources/testdriver.js"></script> <script src="/resources/testdriver-vendor.js"></script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html new file mode 100644 index 0000000000..8b7e6402fb --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel=stylesheet href="resources/stylable-select-styles.css"> + +<style> +html { + writing-mode: vertical-lr; +} +</style> + +<div id=container class=stylable-select-container> + <button class=stylable-select-button popovertarget=popover id=button> + <span class=stylable-select-selectedoption>one</span> + <div class=stylable-select-button-icon></div> + </button> + <div id=popover popover=auto anchor=container class=stylable-select-datalist> + <div class=stylable-select-option>one</div> + <div class=stylable-select-option>two</div> + </div> +</div> + +<script> +document.getElementById('popover').showPopover(); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html new file mode 100644 index 0000000000..2f8a6aa886 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/whatwg/html/issues/9799"> +<link rel=match href="select-appearance-writing-mode-vertical-lr-ref.html"> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<style> +html { + writing-mode: vertical-lr; +} +select { + appearance: base-select; +} +</style> + +<select> + <option>one</option> + <option>two</option> +</select> + +<script> +(async () => { + await test_driver.bless(); + document.querySelector('select').showPicker(); + document.documentElement.classList.remove('reftest-wait'); +})(); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html new file mode 100644 index 0000000000..158807ba58 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel=stylesheet href="resources/stylable-select-styles.css"> + +<style> +html { + writing-mode: vertical-rl; +} +</style> + +<div id=container class=stylable-select-container> + <button class=stylable-select-button popovertarget=popover id=button> + <span class=stylable-select-selectedoption>one</span> + <div class=stylable-select-button-icon></div> + </button> + <div id=popover popover=auto anchor=container class=stylable-select-datalist> + <div class=stylable-select-option>one</div> + <div class=stylable-select-option>two</div> + </div> +</div> + +<script> +document.getElementById('popover').showPopover(); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html new file mode 100644 index 0000000000..c2ea647be9 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/whatwg/html/issues/9799"> +<link rel=match href="select-appearance-writing-mode-vertical-rl-ref.html"> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<style> +html { + writing-mode: vertical-rl; +} +select { + appearance: base-select; +} +</style> + +<select> + <option>one</option> + <option>two</option> +</select> + +<script> +(async () => { + await test_driver.bless(); + document.querySelector('select').showPicker(); + document.documentElement.classList.remove('reftest-wait'); +})(); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-child-button-and-datalist-invalidation.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-child-button-and-datalist-invalidation.tentative.html index b6d85ac90a..822a63e104 100644 --- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-child-button-and-datalist-invalidation.tentative.html +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-child-button-and-datalist-invalidation.tentative.html @@ -3,7 +3,6 @@ <link rel=author href="mailto:jarhar@chromium.org"> <link rel=help href="https://github.com/whatwg/html/issues/9799"> <link rel=match href="select-child-button-and-datalist-ref.html"> -<link rel=stylesheet href="resources/select-reset-non-interoperable-styles.css"> <style> .blue { diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-child-button-and-datalist.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-child-button-and-datalist.tentative.html index 610861aad8..9b2f53df28 100644 --- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-child-button-and-datalist.tentative.html +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-child-button-and-datalist.tentative.html @@ -2,7 +2,6 @@ <link rel=author href="mailto:jarhar@chromium.org"> <link rel=help href="https://github.com/whatwg/html/issues/9799"> <link rel=match href="select-child-button-and-datalist-ref.html"> -<link rel=stylesheet href="resources/select-reset-non-interoperable-styles.css"> <style> .blue { diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-datalist-popover-behavior.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-datalist-popover-behavior.tentative.html new file mode 100644 index 0000000000..caea2a2f8d --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-datalist-popover-behavior.tentative.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1422275"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="/resources/testdriver-actions.js"></script> + +<select style="appearance:base-select"> + <button type=popover>button</button> + <datalist> + <option class=one>one</option> + <option class=two>two</option> + </datalist> +</select> + +<script> +const select = document.querySelector('select'); +const datalist = document.querySelector('datalist'); +const firstOption = document.querySelector('option.one'); +const secondOption = document.querySelector('option.two'); + +promise_test(async () => { + datalist.showPopover(); + assert_true(datalist.matches(':popover-open')); + datalist.hidePopover(); + assert_false(datalist.matches(':popover-open')); +}, 'showPopover and hidePopover should work on the select datalist.'); + +promise_test(async () => { + await test_driver.bless(); + select.showPicker(); + assert_true(datalist.matches(':popover-open')); + datalist.hidePopover(); +}, 'showPicker should show the select datalist.'); + +promise_test(async () => { + datalist.addEventListener('beforetoggle', event => { + event.preventDefault(); + }, {once: true}); + await test_driver.bless(); + select.showPicker(); + assert_false(datalist.matches(':popover-open')); +}, 'preventDefault on beforetoggle should prevent the datalist from showing.'); + +promise_test(async () => { + select.remove(); + assert_throws_dom('InvalidStateError', () => datalist.showPopover()); + assert_false(datalist.matches(':popover-open')); + document.body.appendChild(select); +}, 'showPopover on a disconnected datalist should throw an exception.'); + +promise_test(async () => { + datalist.addEventListener('beforetoggle', event => { + select.remove(); + }, {once: true}); + await test_driver.bless(); + select.showPicker(); + assert_false(!!select.parentNode); + assert_false(datalist.matches(':popover-open')); + document.body.appendChild(select); +}, 'Disconnecting while internally showing the datalist should not crash or show the popover.'); + +promise_test(async () => { + datalist.showPopover(); + datalist.addEventListener('beforetoggle', event => { + select.remove(); + }, {once: true}); + await test_driver.click(secondOption); + assert_false(!!select.parentNode); + assert_false(datalist.matches(':popover-open')); + document.body.appendChild(select); +}, 'Disconnecting while internally hiding the datalist should not crash.'); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-keyboard-behavior.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-keyboard-behavior.tentative.html index 2fb11ba68b..8b06212169 100644 --- a/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-keyboard-behavior.tentative.html +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-keyboard-behavior.tentative.html @@ -1,4 +1,5 @@ <!DOCTYPE html> +<meta name=timeout content=long> <link rel=author href="mailto:jarhar@chromium.org"> <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1422275"> <link rel=help href="https://github.com/openui/open-ui/issues/433#issuecomment-1452461404"> @@ -68,6 +69,7 @@ for (const id of ['defaultbutton-defaultdatalist', async function closeListbox() { await test_driver.click(select); + await new Promise(requestAnimationFrame); } function addCloseCleanup(t) { @@ -96,6 +98,7 @@ for (const id of ['defaultbutton-defaultdatalist', assert_false(select.matches(':open'), 'The select should initially be closed.'); await test_driver.send_keys(document.activeElement, Space); + await new Promise(requestAnimationFrame); assert_true(select.matches(':open'), 'The select should be open after pressing space.'); }, `${id}: When the listbox is closed, spacebar should open the listbox.`); @@ -108,6 +111,7 @@ for (const id of ['defaultbutton-defaultdatalist', 'The select should initially be closed.'); await test_driver.send_keys(document.activeElement, ArrowLeft); + await new Promise(requestAnimationFrame); assert_true(select.matches(':open'), 'Arrow left should open the listbox.'); assert_equals(select.value, 'two', @@ -115,6 +119,7 @@ for (const id of ['defaultbutton-defaultdatalist', await closeListbox(); await test_driver.send_keys(document.activeElement, ArrowUp); + await new Promise(requestAnimationFrame); assert_true(select.matches(':open'), 'Arrow up should open the listbox.'); assert_equals(select.value, 'two', @@ -122,6 +127,7 @@ for (const id of ['defaultbutton-defaultdatalist', await closeListbox(); await test_driver.send_keys(document.activeElement, ArrowRight); + await new Promise(requestAnimationFrame); assert_true(select.matches(':open'), 'Arrow right should open the listbox.'); assert_equals(select.value, 'two', @@ -129,6 +135,7 @@ for (const id of ['defaultbutton-defaultdatalist', await closeListbox(); await test_driver.send_keys(document.activeElement, ArrowDown); + await new Promise(requestAnimationFrame); assert_true(select.matches(':open'), 'Arrow down should open the listbox.'); assert_equals(select.value, 'two', @@ -147,6 +154,7 @@ for (const id of ['defaultbutton-defaultdatalist', } else { await test_driver.send_keys(select, Enter); } + await new Promise(requestAnimationFrame); assert_false(select.matches(':open'), 'Enter should not open the listbox when outside a form.'); @@ -161,6 +169,7 @@ for (const id of ['defaultbutton-defaultdatalist', } else { await test_driver.send_keys(select, Enter); } + await new Promise(requestAnimationFrame); assert_true(formWasSubmitted, 'Enter should submit the form when the listbox is closed.'); assert_false(select.matches(':open'), @@ -175,30 +184,35 @@ for (const id of ['defaultbutton-defaultdatalist', select.value = 'two'; await test_driver.click(select); + await new Promise(requestAnimationFrame); assert_true(select.matches(':open'), 'The select should open when clicked.'); assert_equals(document.activeElement, optionTwo, 'The selected option should receive initial focus.'); await test_driver.send_keys(document.activeElement, ArrowDown); + await new Promise(requestAnimationFrame); assert_equals(document.activeElement, optionThree, 'The next option should receive focus when the down arrow key is pressed.'); assert_equals(select.value, 'two', 'The selects value should not change when focusing another option.'); await test_driver.send_keys(document.activeElement, ArrowUp); + await new Promise(requestAnimationFrame); assert_equals(document.activeElement, optionTwo, 'The previous option should receive focus when the up arrow key is pressed.'); assert_equals(select.value, 'two', 'The selects value should not change when focusing another option.'); await test_driver.send_keys(document.activeElement, ArrowUp); + await new Promise(requestAnimationFrame); assert_equals(document.activeElement, optionOne, 'The first option should be selected.'); assert_equals(select.value, 'two', 'The selects value should not change when focusing another option.'); await test_driver.send_keys(document.activeElement, Enter); + await new Promise(requestAnimationFrame); assert_false(select.matches(':open'), 'The listbox should be closed after pressing enter.'); assert_equals(select.value, 'one', |