diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms')
4 files changed, 123 insertions, 1 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/select-attribute-crash.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/select-attribute-crash.html new file mode 100644 index 0000000000..5330411a5d --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/select-attribute-crash.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html class=test-wait> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://issues.chromium.org/324325525"> + +<!-- Attempting to slot a child of <select> after initial slot assignment should not crash. --> + +<select size=1> + <optgroup></optgroup> +</select> +<script> +requestAnimationFrame(() => { + document.querySelector('optgroup').setAttribute('slot', 'slot1'); + requestAnimationFrame(() => { + document.documentElement.classList.remove('test-wait'); + }); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/select-child-button-and-datalist-invalidation.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/select-child-button-and-datalist-invalidation.tentative.html new file mode 100644 index 0000000000..f71c1e52fc --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/select-child-button-and-datalist-invalidation.tentative.html @@ -0,0 +1,23 @@ +<!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-child-button-and-datalist-ref.html"> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-vendor.js"></script> + +<select> + <button type=popover>button</button> + <datalist> + <option>one</option> + <option>two</option> + </datalist> +</select> + +<script> +requestAnimationFrame(() => { + document.querySelector('select').style = 'appearance:bikeshed'; + document.querySelector('button').click(); + document.documentElement.classList.remove('reftest-wait'); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/select-child-button-and-datalist.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/select-child-button-and-datalist.tentative.html index b74957feed..54785ace95 100644 --- a/testing/web-platform/tests/html/semantics/forms/the-select-element/select-child-button-and-datalist.tentative.html +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/select-child-button-and-datalist.tentative.html @@ -5,7 +5,7 @@ <script src="/resources/testdriver.js"></script> <script src="/resources/testdriver-vendor.js"></script> -<select> +<select style="appearance:bikeshed"> <button type=popover>button</button> <datalist> <option>one</option> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/select-datalist-options-idl.tentative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/select-datalist-options-idl.tentative.html new file mode 100644 index 0000000000..993f6e126c --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/select-datalist-options-idl.tentative.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/whatwg/html/issues/9799"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<select> + <datalist> + <option class=one>one</option> + <div> + <option class=two>two</option> + </div> + <option class=three>three</option> + </datalist> +</select> + +<script> +const select = document.querySelector('select'); + +function runTest() { + const datalist = select.querySelector('datalist'); + const firstOption = select.querySelector('option.one'); + const secondOption = select.querySelector('option.two'); + const thirdOption = select.querySelector('option.three'); + const datalistChildDiv = datalist.querySelector('div'); + + let selectChildDiv = document.querySelector('select > div'); + if (!selectChildDiv) { + selectChildDiv = document.createElement('div'); + select.appendChild(selectChildDiv); + } + + assert_equals(select.length, 3, 'select.length'); + assert_equals(select.options.length, 3, 'select.options.length'); + assert_equals(select.options[0], firstOption, 'select.options[0]'); + assert_equals(select.options[1], secondOption, 'select.options[1]'); + assert_equals(select.options[2], thirdOption, 'select.options[2]'); + + assert_equals(select.value, 'one', 'initial select.value'); + select.value = 'two'; + assert_equals(select.value, 'two', 'select.value after modifying'); + + secondOption.remove(); + assert_equals(select.length, 2, 'select.length after removing an option'); + assert_equals(select.options.length, 2, 'select.options.length after removing an option'); + assert_equals(select.options[0], firstOption, 'select.options[0] after removing an option'); + assert_equals(select.options[1], thirdOption, 'select.options[1] after removing an option'); + + datalist.appendChild(secondOption); + assert_equals(select.length, 3, 'select.length after re-adding an option'); + assert_equals(select.options.length, 3, 'select.options.length after re-adding an option'); + assert_equals(select.options[0], firstOption, 'select.options[0] after re-adding an option'); + assert_equals(select.options[1], thirdOption, 'select.options[1] after re-adding an option'); + assert_equals(select.options[2], secondOption, 'select.options[2] after re-adding an option'); + + selectChildDiv.appendChild(secondOption); + assert_equals(select.length, 2, 'select.length after moving option to child div'); + assert_equals(select.options.length, 2, 'select.options.length after moving option to child div'); + assert_equals(select.options[0], firstOption, 'select.options[0] after moving option to child div'); + assert_equals(select.options[1], thirdOption, 'select.options[1] after moving option to child div'); + + // reset back to normal for the next test + datalistChildDiv.appendChild(secondOption); + select.value = 'one'; +} + +test(() => { + runTest(); +}, 'Option elements should work if they are a descendant of a selects datalist.'); + +test(() => { + select.setAttribute('multiple', ''); + runTest(); +}, 'Options in datalist should still work when the multiple attribute is added.'); + +test(() => { + select.innerHTML = select.innerHTML; + select.value = 'one'; + runTest(); +}, 'Options in datalist in multiple should work after re-parsing and re-attaching.'); +</script> |