diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics')
58 files changed, 1183 insertions, 93 deletions
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/media-elements/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/embedded-content/media-elements/WEB_FEATURES.yml new file mode 100644 index 0000000000..5730fe4715 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/embedded-content/media-elements/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: preserves-pitch + files: + - preserves-pitch.html diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-object-element/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/embedded-content/the-object-element/WEB_FEATURES.yml new file mode 100644 index 0000000000..d3411c2d8d --- /dev/null +++ b/testing/web-platform/tests/html/semantics/embedded-content/the-object-element/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: constraint-validation + files: + - object-setcustomvalidity.html 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 diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/WEB_FEATURES.yml new file mode 100644 index 0000000000..be3924a26a --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/WEB_FEATURES.yml @@ -0,0 +1,4 @@ +features: +- name: details-name + files: + - name-attribute.html diff --git a/testing/web-platform/tests/html/semantics/invokers/interesttarget-anchor-event-dispatch.tentative.html b/testing/web-platform/tests/html/semantics/invokers/interesttarget-anchor-event-dispatch.tentative.html new file mode 100644 index 0000000000..b5a481ae08 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/invokers/interesttarget-anchor-event-dispatch.tentative.html @@ -0,0 +1,47 @@ +<!doctype html> +<meta charset="utf-8" /> +<meta name="author" title="Keith Cirkel" href="mailto:keithamus@github.com" /> +<meta name="author" title="Luke Warlow" href="mailto:lwarlow@igalia.com" /> +<link rel="help" href="https://open-ui.org/components/invokers.explainer/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="resources/invoker-utils.js"></script> + +<div id="interestee"></div> +<a href="/" id="interestanchor" interesttarget="interestee">Anchor</a> +<button id="otherbutton">Other Button</button> + +<script> + promise_test(async function (t) { + t.add_cleanup(() => otherbutton.focus()); + let event = null; + interestee.addEventListener("interest", (e) => (event = e), { once: true }); + interestanchor.focus(); + assert_true(event instanceof InterestEvent, "event is InterestEvent"); + assert_equals(event.type, "interest", "type"); + assert_equals(event.bubbles, false, "bubbles"); + assert_equals(event.composed, true, "composed"); + assert_equals(event.isTrusted, true, "isTrusted"); + assert_equals(event.action, "", "action"); + assert_equals(event.target, interestee, "target"); + assert_equals(event.invoker, interestanchor, "invoker"); + }, "InterestEvent dispatches on anchor focus"); + + promise_test(async function (t) { + t.add_cleanup(() => otherbutton.focus()); + let event = null; + interestee.addEventListener("interest", (e) => (event = e), { once: true }); + await hoverOver(interestanchor); + assert_true(event instanceof InterestEvent, "event is InterestEvent"); + assert_equals(event.type, "interest", "type"); + assert_equals(event.bubbles, false, "bubbles"); + assert_equals(event.composed, true, "composed"); + assert_equals(event.isTrusted, true, "isTrusted"); + assert_equals(event.action, "", "action"); + assert_equals(event.target, interestee, "target"); + assert_equals(event.invoker, interestanchor, "invoker"); + }, "InterestEvent dispatches on anchor hover"); +</script> diff --git a/testing/web-platform/tests/html/semantics/invokers/interesttarget-area-event-dispatch.tentative.html b/testing/web-platform/tests/html/semantics/invokers/interesttarget-area-event-dispatch.tentative.html new file mode 100644 index 0000000000..358acbb73a --- /dev/null +++ b/testing/web-platform/tests/html/semantics/invokers/interesttarget-area-event-dispatch.tentative.html @@ -0,0 +1,50 @@ +<!doctype html> +<meta charset="utf-8" /> +<meta name="author" title="Keith Cirkel" href="mailto:keithamus@github.com" /> +<meta name="author" title="Luke Warlow" href="mailto:lwarlow@igalia.com" /> +<link rel="help" href="https://open-ui.org/components/invokers.explainer/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="resources/invoker-utils.js"></script> + +<div id="interestee"></div> +<map id="map"> + <area href="/" shape="default" id="interestarea" interesttarget="interestee"> +</map> +<img src="/images/blue.png" usemap="#map"> +<button id="otherbutton">Other Button</button> + +<script> + promise_test(async function (t) { + t.add_cleanup(() => otherbutton.focus()); + let event = null; + interestee.addEventListener("interest", (e) => (event = e), { once: true }); + interestarea.focus(); + assert_true(event instanceof InterestEvent, "event is InterestEvent"); + assert_equals(event.type, "interest", "type"); + assert_equals(event.bubbles, false, "bubbles"); + assert_equals(event.composed, true, "composed"); + assert_equals(event.isTrusted, true, "isTrusted"); + assert_equals(event.action, "", "action"); + assert_equals(event.target, interestee, "target"); + assert_equals(event.invoker, interestarea, "invoker"); + }, "InterestEvent dispatches on area focus"); + + promise_test(async function (t) { + t.add_cleanup(() => otherbutton.focus()); + let event = null; + interestee.addEventListener("interest", (e) => (event = e), { once: true }); + await hoverOver(interestarea); + assert_true(event instanceof InterestEvent, "event is InterestEvent"); + assert_equals(event.type, "interest", "type"); + assert_equals(event.bubbles, false, "bubbles"); + assert_equals(event.composed, true, "composed"); + assert_equals(event.isTrusted, true, "isTrusted"); + assert_equals(event.action, "", "action"); + assert_equals(event.target, interestee, "target"); + assert_equals(event.invoker, interestarea, "invoker"); + }, "InterestEvent dispatches on area hover"); +</script> diff --git a/testing/web-platform/tests/html/semantics/invokers/interesttarget-button-event-dispatch.tentative.html b/testing/web-platform/tests/html/semantics/invokers/interesttarget-button-event-dispatch.tentative.html index 7fdfdfaa70..69126dbe14 100644 --- a/testing/web-platform/tests/html/semantics/invokers/interesttarget-button-event-dispatch.tentative.html +++ b/testing/web-platform/tests/html/semantics/invokers/interesttarget-button-event-dispatch.tentative.html @@ -12,7 +12,6 @@ <div id="interestee"></div> <button id="interestbutton" interesttarget="interestee">Button</button> -<a href="/" id="interestanchor" interesttarget="interestee">Anchor</a> <button id="otherbutton">Other Button</button> <script> @@ -50,36 +49,6 @@ t.add_cleanup(() => otherbutton.focus()); let event = null; interestee.addEventListener("interest", (e) => (event = e), { once: true }); - interestanchor.focus(); - assert_true(event instanceof InterestEvent, "event is InterestEvent"); - assert_equals(event.type, "interest", "type"); - assert_equals(event.bubbles, false, "bubbles"); - assert_equals(event.composed, true, "composed"); - assert_equals(event.isTrusted, true, "isTrusted"); - assert_equals(event.action, "", "action"); - assert_equals(event.target, interestee, "target"); - assert_equals(event.invoker, interestanchor, "invoker"); - }, "InterestEvent dispatches on anchor focus"); - - promise_test(async function (t) { - t.add_cleanup(() => otherbutton.focus()); - let event = null; - interestee.addEventListener("interest", (e) => (event = e), { once: true }); - await hoverOver(interestanchor); - assert_true(event instanceof InterestEvent, "event is InterestEvent"); - assert_equals(event.type, "interest", "type"); - assert_equals(event.bubbles, false, "bubbles"); - assert_equals(event.composed, true, "composed"); - assert_equals(event.isTrusted, true, "isTrusted"); - assert_equals(event.action, "", "action"); - assert_equals(event.target, interestee, "target"); - assert_equals(event.invoker, interestanchor, "invoker"); - }, "InterestEvent dispatches on anchor hover"); - - promise_test(async function (t) { - t.add_cleanup(() => otherbutton.focus()); - let event = null; - interestee.addEventListener("interest", (e) => (event = e), { once: true }); interestbutton.interestAction = "fooBar"; interestbutton.focus(); assert_true(event instanceof InterestEvent, "event is InterestEvent"); diff --git a/testing/web-platform/tests/html/semantics/invokers/interesttarget-svg-a-event-dispatch.tentative.html b/testing/web-platform/tests/html/semantics/invokers/interesttarget-svg-a-event-dispatch.tentative.html new file mode 100644 index 0000000000..7fb4b1c19d --- /dev/null +++ b/testing/web-platform/tests/html/semantics/invokers/interesttarget-svg-a-event-dispatch.tentative.html @@ -0,0 +1,51 @@ +<!doctype html> +<meta charset="utf-8" /> +<meta name="author" title="Keith Cirkel" href="mailto:keithamus@github.com" /> +<meta name="author" title="Luke Warlow" href="mailto:lwarlow@igalia.com" /> +<link rel="help" href="https://open-ui.org/components/invokers.explainer/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="resources/invoker-utils.js"></script> + +<div id="interestee"></div> +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <a href="/" id="interestsvga" interesttarget="interestee"> + <text x="50" y="90">SVG A</text> + </a> +</svg> +<button id="otherbutton">Other Button</button> + +<script> + promise_test(async function (t) { + t.add_cleanup(() => otherbutton.focus()); + let event = null; + interestee.addEventListener("interest", (e) => (event = e), { once: true }); + interestsvga.focus(); + assert_true(event instanceof InterestEvent, "event is InterestEvent"); + assert_equals(event.type, "interest", "type"); + assert_equals(event.bubbles, false, "bubbles"); + assert_equals(event.composed, true, "composed"); + assert_equals(event.isTrusted, true, "isTrusted"); + assert_equals(event.action, "", "action"); + assert_equals(event.target, interestee, "target"); + assert_equals(event.invoker, interestsvga, "invoker"); + }, "InterestEvent dispatches on svg a focus"); + + promise_test(async function (t) { + t.add_cleanup(() => otherbutton.focus()); + let event = null; + interestee.addEventListener("interest", (e) => (event = e), { once: true }); + await hoverOver(interestsvga); + assert_true(event instanceof InterestEvent, "event is InterestEvent"); + assert_equals(event.type, "interest", "type"); + assert_equals(event.bubbles, false, "bubbles"); + assert_equals(event.composed, true, "composed"); + assert_equals(event.isTrusted, true, "isTrusted"); + assert_equals(event.action, "", "action"); + assert_equals(event.target, interestee, "target"); + assert_equals(event.invoker, interestsvga, "invoker"); + }, "InterestEvent dispatches on svg a hover"); +</script> diff --git a/testing/web-platform/tests/html/semantics/invokers/invoketarget-on-input-number.tentative.html b/testing/web-platform/tests/html/semantics/invokers/invoketarget-on-input-number.tentative.html new file mode 100644 index 0000000000..b06053b9f1 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/invokers/invoketarget-on-input-number.tentative.html @@ -0,0 +1,78 @@ +<!doctype html> +<meta charset="utf-8" /> +<meta name="author" title="Luke Warlow" href="mailto:lwarlow@igalia.com" /> +<link rel="help" href="https://open-ui.org/components/invokers.explainer/" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="resources/invoker-utils.js"></script> + +<input type="number" id="invokee" value="0"> +<button id="invokerbutton" invoketarget="invokee"></button> + +<script> + function reset() { + invokee.value = 0; + invokerbutton.removeAttribute('invokeaction'); + } + + // stepUp + + promise_test(async function (t) { + t.add_cleanup(reset); + assert_equals(invokee.valueAsNumber, 0); + invokerbutton.setAttribute("invokeaction", "stepup"); + await clickOn(invokerbutton); + assert_equals(invokee.valueAsNumber, 1); + }, "invoking number input with stepup action increments value"); + + promise_test(async function (t) { + t.add_cleanup(reset); + assert_equals(invokee.valueAsNumber, 0); + invokerbutton.setAttribute("invokeaction", "sTePuP"); + await clickOn(invokerbutton); + assert_equals(invokee.valueAsNumber, 1); + }, "invoking number input with stepup action (case-insensitive) increments value"); + + promise_test(async function (t) { + t.add_cleanup(reset); + assert_equals(invokee.valueAsNumber, 0); + invokerbutton.setAttribute("invokeaction", "stepup"); + invokee.addEventListener("invoke", (e) => e.preventDefault(), { + once: true, + }); + await clickOn(invokerbutton); + assert_equals(invokee.valueAsNumber, 0); + }, "invoking number input with stepup action and preventDefault does not increment value"); + + // stepDown + + promise_test(async function (t) { + t.add_cleanup(reset); + assert_equals(invokee.valueAsNumber, 0); + invokerbutton.setAttribute("invokeaction", "stepdown"); + await clickOn(invokerbutton); + assert_equals(invokee.valueAsNumber, -1); + }, "invoking number input with stepdown action decrements value"); + + promise_test(async function (t) { + t.add_cleanup(reset); + assert_equals(invokee.valueAsNumber, 0); + invokerbutton.setAttribute("invokeaction", "sTePdOwN"); + await clickOn(invokerbutton); + assert_equals(invokee.valueAsNumber, -1); + }, "invoking number input with stepdown action (case-insensitive) decrements value"); + + promise_test(async function (t) { + t.add_cleanup(reset); + assert_equals(invokee.valueAsNumber, 0); + invokerbutton.setAttribute("invokeaction", "stepdown"); + invokee.addEventListener("invoke", (e) => e.preventDefault(), { + once: true, + }); + await clickOn(invokerbutton); + assert_equals(invokee.valueAsNumber, 0); + }, "invoking number input with stepdown action and preventDefault does not decrement value"); +</script> diff --git a/testing/web-platform/tests/html/semantics/permission-element/bounded-css-properties-reference-expected.html b/testing/web-platform/tests/html/semantics/permission-element/bounded-css-properties-reftest-ref.html index c62ff5b24d..c62ff5b24d 100644 --- a/testing/web-platform/tests/html/semantics/permission-element/bounded-css-properties-reference-expected.html +++ b/testing/web-platform/tests/html/semantics/permission-element/bounded-css-properties-reftest-ref.html diff --git a/testing/web-platform/tests/html/semantics/permission-element/bounded-css-properties-reference.tentative.html b/testing/web-platform/tests/html/semantics/permission-element/bounded-css-properties-reftest.tentative.html index b8337ab87d..ad6986f52b 100644 --- a/testing/web-platform/tests/html/semantics/permission-element/bounded-css-properties-reference.tentative.html +++ b/testing/web-platform/tests/html/semantics/permission-element/bounded-css-properties-reftest.tentative.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <meta charset=utf-8> -<link rel="match" href="bounded-css-properties-reference-expected.html"> +<link rel="match" href="bounded-css-properties-reftest-ref.html"> <link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style"> <body> <div> diff --git a/testing/web-platform/tests/html/semantics/permission-element/bounded-sizes-reftest-ref.html b/testing/web-platform/tests/html/semantics/permission-element/bounded-sizes-reftest-ref.html new file mode 100644 index 0000000000..b186dd6445 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/permission-element/bounded-sizes-reftest-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<meta charset=utf-8> +<body> + <div> + The permission element should have some limits for the min/max-width/height: + <ul> + <li>min-width should be sufficient to fit the element text (depends on user agent implementation)</li> + <li>max-width should be at most 3x min-width</li> + <li>min-height should be sufficient to fit the element text (1em)</li> + <li>max-height should be at most 3x min-height</li> + <li>padding-left/top only work with width/height: auto and are at most 5em/1em</li> + <li>padding-right/bottom are copied over from padding-left/top in this case</li> + </ul> + </div> + + <style> + #id1 { + font-size: 10px; + height: 10px; + /* width set via JS */ + } + #id2 { + font-size: 10px; + height: 30px; + /* width set via JS */ + } + #id3 { + font-size: 10px; + height: 30px; + color:black; + background-color: black; + + /* Used to compute width which will then have the padding + artificially added in JS */ + width: fit-content; + } + </style> + + <div><permission id="id1" type="geolocation"></div> + <div><permission id="id2" type="camera"></div> + <div><permission id="id3" type="microphone"></div> + +<script> + let el = document.getElementById("id1"); + el.style.width = getComputedStyle(el).minWidth; + + el = document.getElementById("id2"); + el.style.width = getComputedStyle(el).maxWidth; + + el = document.getElementById("id3"); + let w = getComputedStyle(el).width; + el.style.width = `calc(${w} + 100px)`; // 100px is 2 * 5em; +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/semantics/permission-element/bounded-sizes-reftest.tentative.html b/testing/web-platform/tests/html/semantics/permission-element/bounded-sizes-reftest.tentative.html new file mode 100644 index 0000000000..45ffb633c3 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/permission-element/bounded-sizes-reftest.tentative.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<link rel="match" href="bounded-sizes-reftest-ref.html"> +<link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style"> +<body> + <div> + The permission element should have some limits for the min/max-width/height: + <ul> + <li>min-width should be sufficient to fit the element text (depends on user agent implementation)</li> + <li>max-width should be at most 3x min-width</li> + <li>min-height should be sufficient to fit the element text (1em)</li> + <li>max-height should be at most 3x min-height</li> + <li>padding-left/top only work with width/height: auto and are at most 5em/1em</li> + <li>padding-right/bottom are copied over from padding-left/top in this case</li> + </ul> + </div> + +<style> + #id1 { + font-size: 10px; + min-height: 1px; + max-height: 100px; + + /* These values are extreme enough that they should be out of bounds for any implementation */ + min-width: 10px; + max-width: 1000px; + + /* This element will be as tiny as possible */ + width: 1px; + height: 1px; + } + #id2 { + font-size: 10px; + min-height: 1px; + max-height: 100px; + + /* These values are extreme enough that they should be out of bounds for any implementation */ + min-width: 10px; + max-width: 1000px; + + /* This element will be as large as possible */ + width: 1000px; + height: 1000px; + } + #id3 { + font-size: 10px; + width: auto; + height: auto; + + /* There is a slight misalignment of the text (by 1px) when using + padding vs using width/height. Since this test's purpose is to + check that the bounds are identical, the color and background-color + are set to the same value to cover the slight text misalignment */ + color:black; + background-color: black; + + /* Only padding-top and padding-left are taken into account */ + padding-top: 1000px; + padding-left: 1000px; + padding-bottom: 1px; + padding-right: 1px; + } +</style> + +<div><permission id="id1" type="geolocation"></div> +<div><permission id="id2" type="camera"></div> +<div><permission id="id3" type="microphone"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/semantics/permission-element/bounded-sizes.tentative.html b/testing/web-platform/tests/html/semantics/permission-element/bounded-sizes.tentative.html new file mode 100644 index 0000000000..2010cd0a54 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/permission-element/bounded-sizes.tentative.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<!--The permission element should have some limits for the min/max-width/height: + * min-width should be sufficient to fit the element text (depends on user agent implementation) + * max-width should be at most 3x min-width + * min-height should be sufficient to fit the element text (1em) + * max-height should be at most 3x min-height +--> +<style> + #id1 { + font-size: 10px; + width: auto; + height: auto; + + min-height: 1px; + max-height: 100px; + + padding-top: 12px; + padding-left: 60px; + padding-bottom: 1000px; + padding-right: 1000px; + + /* These values are extreme enough that they should be out of bounds for any implementation */ + min-width: 10px; + max-width: 1000px; + } + #id2 { + font-size: 10px; + width: auto; + height: auto; + + min-height: 11px; + max-height: 29px; + + padding-top: 5px; + padding-left: 45px; + padding-bottom: 6px; + padding-right: 46px; + } +</style> + + +<permission id="id1" type="geolocation"> +<permission id="id2" type="camera"> + +<script> + test(function(){ + let el_outside_bounds = document.getElementById("id1"); + let min_height = getComputedStyle(el_outside_bounds).minHeight; + let max_height = getComputedStyle(el_outside_bounds).maxHeight; + assert_true(min_height === "calc(10px)" || min_height === "10px", "min-height"); + assert_true(max_height === "calc(30px)" || max_height === "30px", "max-height"); + assert_not_equals(getComputedStyle(el_outside_bounds).minWidth, "10px", "min-width"); + assert_not_equals(getComputedStyle(el_outside_bounds).maxWidth, "1000px", "max-width"); + assert_equals(getComputedStyle(el_outside_bounds).paddingLeft, "50px", "padding-left"); + assert_equals(getComputedStyle(el_outside_bounds).paddingRight, "50px", "padding-right"); + assert_equals(getComputedStyle(el_outside_bounds).paddingTop, "10px", "padding-top"); + assert_equals(getComputedStyle(el_outside_bounds).paddingBottom, "10px", "padding-bottom"); + }, "Properties with out-of-bounds values should be corrected"); + + test(function(){ + let el_inside_bounds = document.getElementById("id2"); + assert_equals(getComputedStyle(el_inside_bounds).minHeight, "calc(11px)", "min-height"); + assert_equals(getComputedStyle(el_inside_bounds).maxHeight, "calc(29px)", "max-height"); + assert_equals(getComputedStyle(el_inside_bounds).paddingLeft, "45px", "padding-left"); + assert_equals(getComputedStyle(el_inside_bounds).paddingRight, "45px", "padding-right"); + assert_equals(getComputedStyle(el_inside_bounds).paddingTop, "5px", "padding-top"); + assert_equals(getComputedStyle(el_inside_bounds).paddingBottom, "5px", "padding-bottom"); + }, "Properties with values in bounds should not be modified"); +</script> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/semantics/permission-element/display-css-property-reference-expected.html b/testing/web-platform/tests/html/semantics/permission-element/display-css-property-reftest-ref.html index 6a04c94c03..6a04c94c03 100644 --- a/testing/web-platform/tests/html/semantics/permission-element/display-css-property-reference-expected.html +++ b/testing/web-platform/tests/html/semantics/permission-element/display-css-property-reftest-ref.html diff --git a/testing/web-platform/tests/html/semantics/permission-element/display-css-property-reference.tentative.html b/testing/web-platform/tests/html/semantics/permission-element/display-css-property-reftest.tentative.html index 973a76d723..e83786373d 100644 --- a/testing/web-platform/tests/html/semantics/permission-element/display-css-property-reference.tentative.html +++ b/testing/web-platform/tests/html/semantics/permission-element/display-css-property-reftest.tentative.html @@ -1,6 +1,6 @@ <!DOCTYPE html> <meta charset=utf-8> -<link rel="match" href="display-css-property-reference-expected.html"> +<link rel="match" href="display-css-property-reftest-ref.html"> <link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style"> <body> <div> diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-anchor-change-display.tentative.html b/testing/web-platform/tests/html/semantics/popovers/popover-anchor-change-display.tentative.html index 435929a6c1..4312a156ce 100644 --- a/testing/web-platform/tests/html/semantics/popovers/popover-anchor-change-display.tentative.html +++ b/testing/web-platform/tests/html/semantics/popovers/popover-anchor-change-display.tentative.html @@ -42,6 +42,7 @@ window.addEventListener('load', runTest); background: orange; } [popover] { + inset: auto; background: lime; padding:0; border:0; diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-anchor-display-none.tentative.html b/testing/web-platform/tests/html/semantics/popovers/popover-anchor-display-none.tentative.html index 55a11fafdb..8db022b126 100644 --- a/testing/web-platform/tests/html/semantics/popovers/popover-anchor-display-none.tentative.html +++ b/testing/web-platform/tests/html/semantics/popovers/popover-anchor-display-none.tentative.html @@ -15,6 +15,7 @@ display: none; } [popover] { + inset: auto; background: lime; padding: 0; border: 0; diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-anchor-display.tentative.html b/testing/web-platform/tests/html/semantics/popovers/popover-anchor-display.tentative.html index bddc44006d..a713540094 100644 --- a/testing/web-platform/tests/html/semantics/popovers/popover-anchor-display.tentative.html +++ b/testing/web-platform/tests/html/semantics/popovers/popover-anchor-display.tentative.html @@ -61,6 +61,7 @@ showDefaultopenPopoversOnLoad(); background: orange; } [popover] { + inset: auto; background: lime; padding:0; border:0; diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-anchor-scroll-display.tentative.html b/testing/web-platform/tests/html/semantics/popovers/popover-anchor-scroll-display.tentative.html index 2c6b0bafb9..a301032a5b 100644 --- a/testing/web-platform/tests/html/semantics/popovers/popover-anchor-scroll-display.tentative.html +++ b/testing/web-platform/tests/html/semantics/popovers/popover-anchor-scroll-display.tentative.html @@ -40,6 +40,7 @@ background: orange; } [popover] { + inset: auto; background: lime; padding:0; border:0; diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-anchor-transition.tentative.tentative.html b/testing/web-platform/tests/html/semantics/popovers/popover-anchor-transition.tentative.tentative.html index ae2a3a8e41..f6220f3c76 100644 --- a/testing/web-platform/tests/html/semantics/popovers/popover-anchor-transition.tentative.tentative.html +++ b/testing/web-platform/tests/html/semantics/popovers/popover-anchor-transition.tentative.tentative.html @@ -13,6 +13,7 @@ body { } #target { + inset: auto; transition: display 2s; } </style> diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-focus-2.html b/testing/web-platform/tests/html/semantics/popovers/popover-focus-2.html index 892e5fd68f..8f24ace919 100644 --- a/testing/web-platform/tests/html/semantics/popovers/popover-focus-2.html +++ b/testing/web-platform/tests/html/semantics/popovers/popover-focus-2.html @@ -80,7 +80,7 @@ promise_test(async t => { assert_equals(document.activeElement,invoker2,'Focus should move within popover'); await sendShiftTab(); await sendShiftTab(); - assert_equals(document.activeElement, button1 ,'Focus should not move back to invoker as it is non-focusable'); + assert_equals(document.activeElement,invoker0,'Focus should not move back to invoker as it is non-focusable'); // Reset invoker1 to focusable. invoker1.disabled = false; await verifyFocusOrder([button1, button2, invoker0, invoker1, inside_popover1, invoker2, inside_popover2, button3, button4],'set 1'); diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-hover-crash-hang.tentative.html b/testing/web-platform/tests/html/semantics/popovers/popover-hover-crash-hang.tentative.html new file mode 100644 index 0000000000..60309398db --- /dev/null +++ b/testing/web-platform/tests/html/semantics/popovers/popover-hover-crash-hang.tentative.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>Crash/hang test for popover hover behavior</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel=help href="https://open-ui.org/components/popover-hint.research.explainer/"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="resources/popover-utils.js"></script> + +<div id=menu popover=manual> + Popover + <button popovertarget="submenu"><span id=button>Button</span> + <div id=submenu popover=manual>Button-contained popover</div> + </button> +</div> +<button id=unrelated>Unrelated</button> + +<script> + promise_test(async (t) => { + menu.showPopover(); + assert_true(menu.matches(':popover-open')); + await mouseHover(button,100); + button.click(); + assert_true(menu.matches(':popover-open')); + assert_true(submenu.matches(':popover-open')); + await mouseHover(submenu,100); + await mouseHover(unrelated,100); + assert_true(submenu.matches(':popover-open')); + // This test passes if nothing crashes/hangs. + },'crash test'); +</script> diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss-scroll-within.html b/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss-scroll-within.html new file mode 100644 index 0000000000..2329aea201 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss-scroll-within.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>Popover light dismiss behavior when scrolled within</title> +<meta name="timeout" content="long"> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel=help href="https://open-ui.org/components/popover.research.explainer"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script src="resources/popover-utils.js"></script> + +<style> + [popover] { + /* Position most popovers at the bottom-right, out of the way */ + inset:auto; + bottom:0; + right:0; + } + [popover]::backdrop { + /* This should *not* affect anything: */ + pointer-events: auto; + } +</style> + +<div popover id=p>Inside popover + <div style="height:2000px;background:lightgreen"></div> + Bottom of popover6 +</div> +<button popovertarget=p>Popover</button> +<style> + #p6 { + width: 300px; + height: 300px; + overflow-y: scroll; + } +</style> +<script> + const popover = document.querySelector('#p'); + promise_test(async () => { + popover.showPopover(); + assert_equals(popover.scrollTop,0,'popover should start non-scrolled'); + await new test_driver.Actions() + .scroll(0, 0, 0, 50, {origin: popover}) + .send(); + await waitForRender(); + assert_true(popover.matches(':popover-open'),'popover should stay open'); + assert_equals(popover.scrollTop,50,'popover should be scrolled'); + popover.hidePopover(); + },'Scrolling within a popover should not close the popover'); +</script> diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss.html b/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss.html index 45db242e91..78b8674513 100644 --- a/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss.html +++ b/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss.html @@ -303,33 +303,6 @@ },'An invoking element that was not used to invoke the popover is not part of the ancestor chain'); </script> -<div popover id=p6>Inside popover 6 - <div style="height:2000px;background:lightgreen"></div> - Bottom of popover6 -</div> -<button popovertarget=p6>Popover 6</button> -<style> - #p6 { - width: 300px; - height: 300px; - overflow-y: scroll; - } -</style> -<script> - const popover6 = document.querySelector('#p6'); - promise_test(async () => { - popover6.showPopover(); - assert_equals(popover6.scrollTop,0,'popover6 should start non-scrolled'); - await new test_driver.Actions() - .scroll(0, 0, 0, 50, {origin: popover6}) - .send(); - await waitForRender(); - assert_true(popover6.matches(':popover-open'),'popover6 should stay open'); - assert_equals(popover6.scrollTop,50,'popover6 should be scrolled'); - popover6.hidePopover(); - },'Scrolling within a popover should not close the popover'); -</script> - <my-element id="myElement"> <template shadowrootmode="open"> <button id=b7 popovertarget=p7 popovertargetaction=show tabindex="0">Popover7</button> @@ -602,18 +575,26 @@ promise_test(async () => { p29.showPopover(); assert_true(p29.matches(':popover-open'),'showing'); let actions = new test_driver.Actions(); - await actions.pointerMove(0,0,{origin: b29}) + // Using the iframe's contentDocument as the origin would throw an error, so + // we are using iframe29 as the origin instead. + const iframe_box = iframe29.getBoundingClientRect(); + + await actions + .pointerMove(1,1,{origin: b29}) .pointerDown({button: actions.ButtonType.LEFT}) + .pointerMove(iframe_box.width / 2, iframe_box.height / 2, {origin: iframe29}) + .pointerUp({button: actions.ButtonType.LEFT}) .send(); - await waitForRender(); - assert_true(p29.matches(':popover-open'),'showing after pointerdown'); + assert_true(p29.matches(':popover-open'), 'popover should be open after pointerUp in iframe.'); actions = new test_driver.Actions(); - await actions.pointerMove(0,0,{origin: iframe29.contentDocument.body}) + await actions + .pointerMove(iframe_box.width / 2, iframe_box.height / 2, {origin: iframe29}) + .pointerDown({button: actions.ButtonType.LEFT}) + .pointerMove(1,1,{origin: b29}) .pointerUp({button: actions.ButtonType.LEFT}) .send(); - await waitForRender(); - assert_true(p29.matches(':popover-open'),'showing after pointerup'); + assert_true(p29.matches(':popover-open'), 'popover should be open after pointerUp on main frame button.'); },`Pointer down in one document and pointer up in another document shouldn't dismiss popover`); </script> @@ -626,13 +607,10 @@ promise_test(async () => { p30.showPopover(); assert_true(p30.matches(':popover-open'),'showing'); let actions = new test_driver.Actions(); - await actions.pointerMove(0,0,{origin: b30}) + await actions + .pointerMove(2,2,{origin: b30}) .pointerDown({button: actions.ButtonType.LEFT}) - .send(); - await waitForRender(); - assert_true(p30.matches(':popover-open'),'showing after pointerdown'); - actions = new test_driver.Actions(); - await actions.pointerMove(0,0,{origin: b30b}) + .pointerMove(2,2,{origin: b30b}) .pointerUp({button: actions.ButtonType.LEFT}) .send(); await waitForRender(); diff --git a/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/module/dynamic-import/microtasks/basic.any.js b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/module/dynamic-import/microtasks/basic.any.js index 82cb3b215d..4876e82b0d 100644 --- a/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/module/dynamic-import/microtasks/basic.any.js +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/module/dynamic-import/microtasks/basic.any.js @@ -25,8 +25,8 @@ promise_test(async t => { // Use Date.now() to ensure that the module is not in the module map const specifier = "./empty-module.js?" + Date.now(); - const getCount = ticker(1e7); + const getCount = ticker(1e6); await import(specifier); - assert_equals(getCount(), 1e7); + assert_equals(getCount(), 1e6); }, "import() should drain the microtask queue when fetching a new module"); diff --git a/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/module/inline-async-inserted-execorder.html b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/module/inline-async-inserted-execorder.html new file mode 100644 index 0000000000..0f51fd318b --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-script-element/module/inline-async-inserted-execorder.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Inline async="" module scripts execute or throw parse errors asynchronously</title> +<link rel="help" href="https://github.com/whatwg/html/issues/9864"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<body> +<script> +"use strict"; +setup({ allow_uncaught_exception: true }); + +promise_test(async t => { + window.log = ["before any script execution"]; + + window.addEventListener("error", ev => { + window.log.push("error event on Window"); + }); + + const noErrorScript = document.createElement("script"); + noErrorScript.type = "module"; + noErrorScript.async = true; + noErrorScript.textContent = "window.log.push('no error script executed');"; + + // This should queue a task to run the script, but not run it immediately. + document.head.append(noErrorScript); + + log.push("after inserting noErrorScript"); + assert_array_equals(window.log, [ + "before any script execution", + "after inserting noErrorScript" + ]); + + const parseErrorScript = document.createElement("script"); + parseErrorScript.type = "module"; + parseErrorScript.async = true; + parseErrorScript.textContent = "+++++"; + + // This should queue a task to fire the error event, but not fire it immediately. + document.head.append(parseErrorScript); + + log.push("after inserting parseErrorScript"); + assert_array_equals(window.log, [ + "before any script execution", + "after inserting noErrorScript", + "after inserting parseErrorScript" + ]); + + // After a microtask, the script run / error event must not happen. + queueMicrotask(t.step_func(() => { + assert_array_equals(window.log, [ + "before any script execution", + "after inserting noErrorScript", + "after inserting parseErrorScript" + ]); + })); + + // But it must eventually happen, after a full task. + await t.step_wait(() => window.log.length == 5, "5 items must eventually be logged"); + + // And when it does the order must be correct. + assert_array_equals(window.log, [ + "before any script execution", + "after inserting noErrorScript", + "after inserting parseErrorScript", + "no error script executed", + "error event on Window" + ]); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/scripting-1/the-template-element/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/scripting-1/the-template-element/WEB_FEATURES.yml new file mode 100644 index 0000000000..bd821885c7 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/scripting-1/the-template-element/WEB_FEATURES.yml @@ -0,0 +1,3 @@ +features: +- name: template + files: "**" diff --git a/testing/web-platform/tests/html/semantics/selectors/pseudo-classes/WEB_FEATURES.yml b/testing/web-platform/tests/html/semantics/selectors/pseudo-classes/WEB_FEATURES.yml new file mode 100644 index 0000000000..055a5fb4a3 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/selectors/pseudo-classes/WEB_FEATURES.yml @@ -0,0 +1,11 @@ +features: +- name: autofill + files: + - autofill.html +- name: default + files: + - default.html +- name: read-write-pseudos + files: + - readwrite-readonly-type-change.html + - readwrite-readonly.html |