diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms')
30 files changed, 549 insertions, 18 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/attributes-common-to-form-controls/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/forms/attributes-common-to-form-controls/WEB_FEATURES.yml new file mode 100644 index 0000000000..457c904005 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/attributes-common-to-form-controls/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: dirname + files: + - dirname-* diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/forms/constraints/WEB_FEATURES.yml new file mode 100644 index 0000000000..93b4c5745f --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/constraints/WEB_FEATURES.yml @@ -0,0 +1,3 @@ +features: +- name: constraint-validation + files: "**" diff --git a/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-textarea-defaultValue.html b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-textarea-defaultValue.html new file mode 100644 index 0000000000..55276116ad --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-textarea-defaultValue.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>textarea validation behavior</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#suffering-from-being-too-short"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api"> +<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> + +<textarea id=t1 minlength=5 required></textarea> +<textarea id=t2 minlength=5 required>a</textarea> +<textarea id=t3 required>a</textarea> +<textarea id=t4>a</textarea> +<script> +test(() => { + const emptyMinlength = document.getElementById('t1'); + const nonEmptyMinlength = document.getElementById('t2'); + const nonEmptyRequired = document.getElementById('t3'); + const nonEmptyNonRequired = document.getElementById('t4'); + assert_false(emptyMinlength.validity.valid,'Empty textareas with constraints will validate'); + assert_true(nonEmptyMinlength.validity.valid,'Non-empty textareas with constraints will *not* validate'); + assert_true(nonEmptyRequired.validity.valid,'Textareas without constraints will validate'); + assert_true(nonEmptyNonRequired.validity.valid,'Textareas without constraints will validate'); + [t1,t2,t3,t4].forEach(t => t.remove()); +},'Default validity based on emptiness'); +</script> + +<textarea id=t5 minlength=5 required></textarea> +<script> +promise_test(async () => { + const textarea = document.getElementById('t5'); + document.querySelector('#t1'); + assert_false(textarea.validity.valid,'By default, this textarea will validate (and fail) because it started empty'); + textarea.defaultValue = 'abc'; + assert_true(textarea.validity.valid,'Programmatically setting defaultValue is not a user edit - automatically valid'); + textarea.replaceChildren('abcd'); + assert_true(textarea.validity.valid,'Programmatically replacing children is not a user edit - automatically valid'); + textarea.defaultValue = 'abcde'; + assert_true(textarea.validity.valid,'Still valid'); + textarea.remove(); +},'Setting textarea.defaultValue should not trigger validation'); +</script> + +<textarea id=t6 minlength=5 required></textarea> +<script> +promise_test(async () => { + const textarea = document.getElementById('t6'); + assert_false(textarea.validity.valid,'By default, this textarea will validate (and fail) because it started empty'); + await test_driver.send_keys(textarea, "abc"); + assert_false(textarea.validity.valid,'Keystrokes should trigger validation, which will fail (length 3)'); + await test_driver.send_keys(textarea, "de"); + assert_equals(textarea.value,"abcde"); + assert_true(textarea.validity.valid,'Now valid'); + textarea.remove(); +},'User keystrokes should trigger validation'); +</script> + +<textarea id=t7 minlength=5 required></textarea> +<script> +promise_test(async () => { + const textarea = document.getElementById('t7'); + textarea.addEventListener('input', (e) => { + e.target.defaultValue = e.target.value; + }); + assert_false(textarea.validity.valid,'By default, this textarea will validate (and fail) because it started empty'); + await test_driver.send_keys(textarea, "abc"); + assert_equals(textarea.value,"abc"); + assert_false(textarea.validity.valid,'Still invalid with 3 characters'); + await test_driver.send_keys(textarea, "de"); + assert_equals(textarea.value,"abcde"); + assert_true(textarea.validity.valid,'With 5 characters, now valid'); + textarea.remove(); +},'Setting textarea.defaultValue from the input event handler should trigger validation'); +</script> + +<textarea id=t8 minlength=5 required></textarea> +<script> +promise_test(async () => { + const textarea = document.getElementById('t8'); + textarea.addEventListener('input', (e) => { + e.target.replaceChildren(e.target.value); + }); + assert_false(textarea.validity.valid,'By default, this textarea will validate (and fail) because it started empty'); + await test_driver.send_keys(textarea, "abc"); + assert_equals(textarea.value,"abc"); + assert_false(textarea.validity.valid,'Still invalid with 3 characters'); + await test_driver.send_keys(textarea, "de"); + assert_equals(textarea.value,"abcde"); + assert_true(textarea.validity.valid,'With 5 characters, now valid'); + textarea.remove(); +},'Calling textarea.replaceChildren() from the input event handler should trigger validation'); +</script> + +<style> + :invalid { background-color: rgb(248, 203, 203); } +</style> diff --git a/testing/web-platform/tests/html/semantics/forms/the-button-element/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/forms/the-button-element/WEB_FEATURES.yml new file mode 100644 index 0000000000..f5a2aeaf4f --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-button-element/WEB_FEATURES.yml @@ -0,0 +1,10 @@ +features: +- name: constraint-validation + files: + - button-checkvalidity.html + - button-setcustomvalidity.html + - button-validation.html + - button-validationmessage.html + - button-validity.html + - button-willvalidate-readonly-attribute.html + - button-willvalidate.html diff --git a/testing/web-platform/tests/html/semantics/forms/the-fieldset-element/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/forms/the-fieldset-element/WEB_FEATURES.yml new file mode 100644 index 0000000000..912cb47c6d --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-fieldset-element/WEB_FEATURES.yml @@ -0,0 +1,8 @@ +features: +- name: constraint-validation + files: + - fieldset-checkvalidity.html + - fieldset-setcustomvalidity.html + - fieldset-validationmessage.html + - fieldset-validity.html + - fieldset-willvalidate.html diff --git a/testing/web-platform/tests/html/semantics/forms/the-form-element/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/forms/the-form-element/WEB_FEATURES.yml new file mode 100644 index 0000000000..04c20cb5ec --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-form-element/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: constraint-validation + files: + - form-checkvalidity.html diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/forms/the-input-element/WEB_FEATURES.yml new file mode 100644 index 0000000000..4957615f24 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/WEB_FEATURES.yml @@ -0,0 +1,11 @@ +features: +- name: constraint-validation + files: + - input-checkvalidity.html + - input-setcustomvalidity.html + - input-validationmessage.html + - input-validity.html + - input-willvalidate.html +- name: show-picker-input + files: + - show-picker-* diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/input-stepdown-02.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/input-stepdown-02.html new file mode 100644 index 0000000000..db71d11009 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/input-stepdown-02.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<title>Input Step Down</title> + +<link rel="help" href="https://html.spec.whatwg.org/multipage/input.html#dom-input-stepup"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<input type='number' id='input'> + +<script> + const input = document.getElementById("input"); + + function testStepDown(initialValue, minValue, expectedValue) { + input.value = initialValue; + input.min = minValue; + + input.stepDown(); + + assert_equals(input.value, expectedValue); + } + + const tests = [ + { initialValue: '', minValue: '', expectedValue: '-1', description: 'stepDown() on input with no initial or min values' }, + { initialValue: '', minValue: '7', expectedValue: '7', description: 'stepDown() on input with no initial value and positive min value' }, + { initialValue: '', minValue: '-7', expectedValue: '-1', description: 'stepDown() on input with no initial value and negative min value' }, + { initialValue: '7', minValue: '7', expectedValue: '7', description: 'stepDown() on input with initial value equal to min value' }, + { initialValue: '3', minValue: '7', expectedValue: '3', description: 'stepDown() on input with initial value less than min value' }, + { initialValue: '10', minValue: '7', expectedValue: '9', description: 'stepDown() on input with initial value greater than min value' }, + ]; + + for(const t of tests) { + test(()=>{ + testStepDown( + t.initialValue, + t.minValue, + t.expectedValue + ); + }, + t.description); + } +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-output-element/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/forms/the-output-element/WEB_FEATURES.yml new file mode 100644 index 0000000000..2f7f8e8cc2 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-output-element/WEB_FEATURES.yml @@ -0,0 +1,5 @@ +features: +- name: constraint-validation + files: + - output-setcustomvalidity.html + - output-validity.html 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-no-button-custom-datalist-ref.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html index 8e5eadaf57..10c966a107 100644 --- 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-custom-button-no-datalist-ref.html @@ -2,7 +2,7 @@ <link rel=stylesheet href="resources/stylable-select-styles.css"> <div id=container class=stylable-select-container> - <button popovertarget=popover id=button>one</button> + <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> 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.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', diff --git a/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html index 2d51002fb2..8c620bacca 100644 --- a/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html +++ b/testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html @@ -3,6 +3,8 @@ <title>HTMLSelectListElement Test: option arbitrary content displayed</title> <link rel="author" title="Ionel Popescu" href="mailto:iopopesc@microsoft.com"> <link rel=match href="selectlist-option-arbitrary-content-displayed-ref.tentative.html"> +<!-- Tolerate slight differences in the shadow gradient. --> +<meta name=fuzzy content="maxDifference=0-1;totalPixels=0-200"> <link rel="stylesheet" href="/fonts/ahem.css"> <script src="/resources/testdriver.js"></script> <script src="/resources/testdriver-actions.js"></script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-textarea-element/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/forms/the-textarea-element/WEB_FEATURES.yml new file mode 100644 index 0000000000..14479d4bb3 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-textarea-element/WEB_FEATURES.yml @@ -0,0 +1,6 @@ +features: +- name: constraint-validation + files: + - textarea-setcustomvalidity.html + - textarea-validity-clone.html + - textarea-validity-valueMissing-inside-datalist.html |