diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms/the-select-element/inserted-or-removed.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/forms/the-select-element/inserted-or-removed.html | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/inserted-or-removed.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/inserted-or-removed.html new file mode 100644 index 0000000000..0db2bf0e77 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/inserted-or-removed.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<link rel="help" href="https://html.spec.whatwg.org/C/#the-select-element:nodes-are-inserted"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> + +<select id="by-parser"> +<option selected>First</option> +<option selected>Second</option> +</select> + +<select id="by-parser-optgroup"> +<optgroup> +<option selected>First</option> +<option selected>Second</option> +</optgroup> +</select> + +<select id="by-dom"></select> + +<select id="by-innerHTML"></select> + +<script> +test(() => { + const target = document.querySelector("#by-parser"); + assert_equals(target.selectedOptions[0].textContent, 'Second'); + + const target2 = document.querySelector("#by-parser-optgroup"); + assert_equals(target2.selectedOptions[0].textContent, 'Second'); +}, 'The last selected OPTION should win; Inserted by parser'); + +test(() => { + const target = document.querySelector("#by-dom"); + const option1 = document.createElement('option'); + option1.defaultSelected = true; + option1.textContent = 'First'; + const option2 = document.createElement('option'); + option2.defaultSelected = true; + option2.textContent = 'Second'; + target.appendChild(option1); + target.appendChild(option2); + assert_equals(target.selectedOptions[0].textContent, 'Second'); + + target.innerHTML = ''; + const optgroup = document.createElement('optgroup'); + const option3 = document.createElement('option'); + option3.defaultSelected = true; + option3.textContent = 'First'; + const option4 = document.createElement('option'); + option4.defaultSelected = true; + option4.textContent = 'Second'; + optgroup.appendChild(option3); + optgroup.appendChild(option4); + target.appendChild(optgroup); + assert_equals(target.selectedOptions[0].textContent, 'Second'); +}, 'The last selected OPTION should win; Inserted by DOM API'); + +test(() => { + const target = document.querySelector("#by-dom"); + target.innerHTML = ''; + const inner = `<option value="one" selected>First</option> + <option value="two" selected>Second</option>`; + + // Emulate what jQuery 1.x/2.x does in append(inner). + const fragment = document.createDocumentFragment(); + const div = document.createElement('div'); + div.innerHTML = '<select multiple>' + inner + '</select>'; + while (div.firstChild.firstChild) + fragment.appendChild(div.firstChild.firstChild); + target.appendChild(fragment); + assert_equals(target.selectedOptions[0].textContent, 'Second'); +}, 'The last selected OPTION should win; Inserted by jQuery append()'); + +test(() => { + const target = document.querySelector("#by-innerHTML"); + target.innerHTML = '<option selected>First</option>' + + '<option selected>Second</option>'; + assert_equals(target.selectedOptions[0].textContent, 'Second'); + + target.innerHTML = '<option selected>First</option>' + + '<optgroup><option selected>Second</option>' + + '<option selected>Third</option></optgroup>' + + '<option selected>Fourth</option>'; + assert_equals(target.selectedOptions[0].textContent, 'Fourth'); +}, 'The last selected OPTION should win; Inserted by innerHTML'); + +test (() => { + for (let insert_location = 0; insert_location < 3; ++insert_location) { + const target = document.querySelector('#by-innerHTML'); + target.innerHTML = '<option>A</option>' + + '<option selected>C</option>' + + '<option>D</option>'; + const refNode = target.querySelectorAll('option')[insert_location]; + + const opt = document.createElement('option'); + opt.selected = true; + opt.textContent = 'B'; + target.insertBefore(opt, refNode); + assert_equals(target.selectedOptions[0].textContent, 'B'); + } +}, 'If an OPTION says it is selected, it should be selected after it is inserted.'); +</script> +</body> |