summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/semantics
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/html/semantics')
-rw-r--r--testing/web-platform/tests/html/semantics/embedded-content/media-elements/WEB_FEATURES.yml4
-rw-r--r--testing/web-platform/tests/html/semantics/embedded-content/the-object-element/WEB_FEATURES.yml4
-rw-r--r--testing/web-platform/tests/html/semantics/forms/attributes-common-to-form-controls/WEB_FEATURES.yml4
-rw-r--r--testing/web-platform/tests/html/semantics/forms/constraints/WEB_FEATURES.yml3
-rw-r--r--testing/web-platform/tests/html/semantics/forms/constraints/form-validation-validity-textarea-defaultValue.html98
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-button-element/WEB_FEATURES.yml10
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-fieldset-element/WEB_FEATURES.yml8
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-form-element/WEB_FEATURES.yml4
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-input-element/WEB_FEATURES.yml11
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-input-element/input-stepdown-02.html42
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-output-element/WEB_FEATURES.yml5
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/WEB_FEATURES.yml9
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist-ref.html17
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/native-popup-with-datalist.tentative.html25
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/nested-options.tenative.html46
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/select-reset-non-interoperable-styles.css5
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/resources/stylable-select-styles.css49
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist-ref.html (renamed from testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist-ref.html)2
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-custom-button-no-datalist.tentative.html3
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-custom-datalist.tentative.html3
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist-ref.html17
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-no-button-no-datalist.tentative.html3
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr-ref.html23
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-lr.tentative.html29
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl-ref.html23
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-appearance-writing-mode-vertical-rl.tentative.html29
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-child-button-and-datalist-invalidation.tentative.html1
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-child-button-and-datalist.tentative.html1
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-datalist-popover-behavior.tentative.html75
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-select-element/stylable-select/select-keyboard-behavior.tentative.html14
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-selectlist-element/selectlist-option-arbitrary-content-displayed.tentative.html2
-rw-r--r--testing/web-platform/tests/html/semantics/forms/the-textarea-element/WEB_FEATURES.yml6
-rw-r--r--testing/web-platform/tests/html/semantics/interactive-elements/the-details-element/WEB_FEATURES.yml4
-rw-r--r--testing/web-platform/tests/html/semantics/invokers/interesttarget-anchor-event-dispatch.tentative.html47
-rw-r--r--testing/web-platform/tests/html/semantics/invokers/interesttarget-area-event-dispatch.tentative.html50
-rw-r--r--testing/web-platform/tests/html/semantics/invokers/interesttarget-button-event-dispatch.tentative.html31
-rw-r--r--testing/web-platform/tests/html/semantics/invokers/interesttarget-svg-a-event-dispatch.tentative.html51
-rw-r--r--testing/web-platform/tests/html/semantics/invokers/invoketarget-on-input-number.tentative.html78
-rw-r--r--testing/web-platform/tests/html/semantics/permission-element/bounded-css-properties-reftest-ref.html (renamed from testing/web-platform/tests/html/semantics/permission-element/bounded-css-properties-reference-expected.html)0
-rw-r--r--testing/web-platform/tests/html/semantics/permission-element/bounded-css-properties-reftest.tentative.html (renamed from testing/web-platform/tests/html/semantics/permission-element/bounded-css-properties-reference.tentative.html)2
-rw-r--r--testing/web-platform/tests/html/semantics/permission-element/bounded-sizes-reftest-ref.html56
-rw-r--r--testing/web-platform/tests/html/semantics/permission-element/bounded-sizes-reftest.tentative.html68
-rw-r--r--testing/web-platform/tests/html/semantics/permission-element/bounded-sizes.tentative.html75
-rw-r--r--testing/web-platform/tests/html/semantics/permission-element/display-css-property-reftest-ref.html (renamed from testing/web-platform/tests/html/semantics/permission-element/display-css-property-reference-expected.html)0
-rw-r--r--testing/web-platform/tests/html/semantics/permission-element/display-css-property-reftest.tentative.html (renamed from testing/web-platform/tests/html/semantics/permission-element/display-css-property-reference.tentative.html)2
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/popover-anchor-change-display.tentative.html1
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/popover-anchor-display-none.tentative.html1
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/popover-anchor-display.tentative.html1
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/popover-anchor-scroll-display.tentative.html1
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/popover-anchor-transition.tentative.tentative.html1
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/popover-focus-2.html2
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/popover-hover-crash-hang.tentative.html34
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss-scroll-within.html52
-rw-r--r--testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss.html56
-rw-r--r--testing/web-platform/tests/html/semantics/scripting-1/the-script-element/module/dynamic-import/microtasks/basic.any.js4
-rw-r--r--testing/web-platform/tests/html/semantics/scripting-1/the-script-element/module/inline-async-inserted-execorder.html70
-rw-r--r--testing/web-platform/tests/html/semantics/scripting-1/the-template-element/WEB_FEATURES.yml3
-rw-r--r--testing/web-platform/tests/html/semantics/selectors/pseudo-classes/WEB_FEATURES.yml11
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