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>