1 files changed, 29 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/select-add-optgroup.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/select-add-optgroup.html
new file mode 100644
index 0000000000..fab5332f26
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-select-element/select-add-optgroup.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1477785">
+<link rel=help href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#dom-htmloptionscollection-add">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<select>
+  <option id=opt1>opt1</option>
+  <optgroup label=group1>
+    <option id=opt2>opt2</option>
+  </optgroup>
+</select>
+
+<script>
+test(() => {
+  const select = document.querySelector('select');
+  const optgroup = document.querySelector('optgroup');
+  const newOption = document.createElement('option');
+  newOption.textContent = 'new option';
+
+  select.options.add(newOption, 1);
+  assert_equals(select.options.length, 3);
+  assert_equals(select.options[0], opt1, 'First item should be opt1.');
+  assert_equals(select.options[1], newOption, 'Second item should be newOption.');
+  assert_equals(select.options[2], opt2, 'Third item should be opt2.');
+  assert_equals(newOption.parentNode, optgroup, 'The new option should be inside the optgroup.');
+}, 'select.add() with an index should work when the target is inside an optgroup.');
+</script>