Auto merge of #13380 - splav:HTMLOptionsCollection#13129, r=KiChjang

Html options collection#13129

<!-- Please describe your changes on the following line: -->
Implement HTMLOptionsCollection and related HTMLSelectElement items

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #13129 (github issue number if applicable).

<!-- Either: -->
- [X] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/13380)
<!-- Reviewable:end -->

components/script/dom/bindings/codegen/CodegenRust.py

@@ -4866,7 +4866,6 @@ return true;"""
         return CGGeneric(self.getBody())
 
 
-# TODO(Issue 5876)
 class CGDOMJSProxyHandler_defineProperty(CGAbstractExternMethod):
     def __init__(self, descriptor):
         args = [Argument('*mut JSContext', 'cx'), Argument('HandleObject', 'proxy'),

components/script/dom/htmlcollection.rs

@@ -229,6 +229,9 @@ impl HTMLCollection {
         }
     }
 
+    pub fn root_node(&self) -> Root<Node> {
+        Root::from_ref(&self.root)
+    }
 }
 
 // TODO: Make this generic, and avoid code duplication

components/script/dom/htmloptionscollection.rs

@@ -0,0 +1,186 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+use dom::bindings::codegen::Bindings::ElementBinding::ElementMethods;
+use dom::bindings::codegen::Bindings::HTMLCollectionBinding::HTMLCollectionMethods;
+use dom::bindings::codegen::Bindings::HTMLOptionsCollectionBinding;
+use dom::bindings::codegen::Bindings::HTMLOptionsCollectionBinding::HTMLOptionsCollectionMethods;
+use dom::bindings::codegen::Bindings::NodeBinding::NodeBinding::NodeMethods;
+use dom::bindings::codegen::UnionTypes::{HTMLOptionElementOrHTMLOptGroupElement, HTMLElementOrLong};
+use dom::bindings::error::{Error, ErrorResult};
+use dom::bindings::global::GlobalRef;
+use dom::bindings::inheritance::Castable;
+use dom::bindings::js::{Root, RootedReference};
+use dom::bindings::reflector::reflect_dom_object;
+use dom::bindings::str::DOMString;
+use dom::element::Element;
+use dom::htmlcollection::{CollectionFilter, HTMLCollection};
+use dom::htmloptionelement::HTMLOptionElement;
+use dom::node::{document_from_node, Node};
+use dom::window::Window;
+
+#[dom_struct]
+pub struct HTMLOptionsCollection {
+    collection: HTMLCollection,
+}
+
+impl HTMLOptionsCollection {
+    fn new_inherited(root: &Node, filter: Box<CollectionFilter + 'static>) -> HTMLOptionsCollection {
+        HTMLOptionsCollection {
+            collection: HTMLCollection::new_inherited(root, filter),
+        }
+    }
+
+    pub fn new(window: &Window, root: &Node, filter: Box<CollectionFilter + 'static>)
+        -> Root<HTMLOptionsCollection>
+    {
+        reflect_dom_object(box HTMLOptionsCollection::new_inherited(root, filter),
+                           GlobalRef::Window(window),
+                           HTMLOptionsCollectionBinding::Wrap)
+    }
+
+    fn add_new_elements(&self, count: u32) -> ErrorResult {
+        let root = self.upcast().root_node();
+        let document = document_from_node(root.r());
+
+        for _ in 0..count {
+            let element = HTMLOptionElement::new(atom!("option"), None, document.r());
+            let node = element.upcast::<Node>();
+            try!(root.AppendChild(node));
+        };
+        Ok(())
+    }
+}
+
+impl HTMLOptionsCollectionMethods for HTMLOptionsCollection {
+    // FIXME: This shouldn't need to be implemented here since HTMLCollection (the parent of
+    // HTMLOptionsCollection) implements NamedGetter.
+    // https://github.com/servo/servo/issues/5875
+    //
+    // https://dom.spec.whatwg.org/#dom-htmlcollection-nameditem
+    fn NamedGetter(&self, name: DOMString) -> Option<Root<Element>> {
+        self.upcast().NamedItem(name)
+    }
+
+    // https://heycam.github.io/webidl/#dfn-supported-property-names
+    fn SupportedPropertyNames(&self) -> Vec<DOMString> {
+        self.upcast().SupportedPropertyNames()
+    }
+
+    // FIXME: This shouldn't need to be implemented here since HTMLCollection (the parent of
+    // HTMLOptionsCollection) implements IndexedGetter.
+    // https://github.com/servo/servo/issues/5875
+    //
+    // https://dom.spec.whatwg.org/#dom-htmlcollection-item
+    fn IndexedGetter(&self, index: u32) -> Option<Root<Element>> {
+        self.upcast().IndexedGetter(index)
+    }
+
+    // https://html.spec.whatwg.org/multipage/#dom-htmloptionscollection-setter
+    fn IndexedSetter(&self, index: u32, value: Option<&HTMLOptionElement>) -> ErrorResult {
+        if let Some(value) = value {
+            // Step 2
+            let length = self.upcast().Length();
+
+            // Step 3
+            let n = index as i32 - length as i32;
+
+            // Step 4
+            if n > 0 {
+                try!(self.add_new_elements(n as u32));
+            }
+
+            // Step 5
+            let node = value.upcast::<Node>();
+            let root = self.upcast().root_node();
+            if n >= 0 {
+                Node::pre_insert(node, root.r(), None).map(|_| ())
+            } else {
+                let child = self.upcast().IndexedGetter(index).unwrap();
+                let child_node = child.r().upcast::<Node>();
+
+                root.r().ReplaceChild(node, child_node).map(|_| ())
+            }
+        } else {
+            // Step 1
+            self.Remove(index as i32);
+            Ok(())
+        }
+    }
+
+    // https://html.spec.whatwg.org/multipage/#dom-htmloptionscollection-length
+    fn Length(&self) -> u32 {
+        self.upcast().Length()
+    }
+
+    // https://html.spec.whatwg.org/multipage/#dom-htmloptionscollection-length
+    fn SetLength(&self, length: u32) {
+        let current_length = self.upcast().Length();
+        let delta = length as i32 - current_length as i32;
+        if delta < 0 {
+            // new length is lower - deleting last option elements
+            for index in (length..current_length).rev() {
+                self.Remove(index as i32)
+            }
+        } else if delta > 0 {
+            // new length is higher - adding new option elements
+            self.add_new_elements(delta as u32).unwrap();
+        }
+    }
+
+    // https://html.spec.whatwg.org/multipage/#dom-htmloptionscollection-add
+    fn Add(&self, element: HTMLOptionElementOrHTMLOptGroupElement, before: Option<HTMLElementOrLong>) -> ErrorResult {
+        let root = self.upcast().root_node();
+
+        let node: &Node = match element {
+            HTMLOptionElementOrHTMLOptGroupElement::HTMLOptionElement(ref element) => element.upcast(),
+            HTMLOptionElementOrHTMLOptGroupElement::HTMLOptGroupElement(ref element) => element.upcast(),
+        };
+
+        // Step 1
+        if node.is_ancestor_of(root.r()) {
+            return Err(Error::HierarchyRequest);
+        }
+
+        if let Some(HTMLElementOrLong::HTMLElement(ref before_element)) = before {
+            // Step 2
+            let before_node = before_element.upcast::<Node>();
+            if !root.r().is_ancestor_of(before_node) {
+                return Err(Error::NotFound);
+            }
+
+            // Step 3
+            if node == before_node {
+                return Ok(());
+            }
+        }
+
+        // Step 4
+        let reference_node = before.and_then(|before| {
+            match before {
+                HTMLElementOrLong::HTMLElement(element) => Some(Root::upcast::<Node>(element)),
+                HTMLElementOrLong::Long(index) => {
+                    self.upcast().IndexedGetter(index as u32).map(Root::upcast::<Node>)
+                }
+            }
+        });
+
+        // Step 5
+        let parent = if let Some(reference_node) = reference_node.r() {
+            reference_node.GetParentNode().unwrap()
+        } else {
+            root
+        };
+
+        // Step 6
+        Node::pre_insert(node, parent.r(), reference_node.r()).map(|_| ())
+    }
+
+    // https://html.spec.whatwg.org/multipage/#dom-htmloptionscollection-remove
+    fn Remove(&self, index: i32) {
+        if let Some(element) = self.upcast().IndexedGetter(index as u32) {
+            element.r().Remove();
+        }
+    }
+}

components/script/dom/htmlselectelement.rs

@@ -3,22 +3,29 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 use dom::attr::Attr;
+use dom::bindings::codegen::Bindings::ElementBinding::ElementMethods;
+use dom::bindings::codegen::Bindings::HTMLCollectionBinding::HTMLCollectionMethods;
 use dom::bindings::codegen::Bindings::HTMLOptionElementBinding::HTMLOptionElementMethods;
+use dom::bindings::codegen::Bindings::HTMLOptionsCollectionBinding::HTMLOptionsCollectionMethods;
 use dom::bindings::codegen::Bindings::HTMLSelectElementBinding;
 use dom::bindings::codegen::Bindings::HTMLSelectElementBinding::HTMLSelectElementMethods;
 use dom::bindings::codegen::Bindings::NodeBinding::NodeMethods;
 use dom::bindings::codegen::UnionTypes::HTMLElementOrLong;
 use dom::bindings::codegen::UnionTypes::HTMLOptionElementOrHTMLOptGroupElement;
+//use dom::bindings::error::ErrorResult;
 use dom::bindings::inheritance::Castable;
-use dom::bindings::js::Root;
+use dom::bindings::js::{JS, MutNullableHeap, Root};
 use dom::bindings::str::DOMString;
 use dom::document::Document;
 use dom::element::{AttributeMutation, Element};
+use dom::htmlcollection::CollectionFilter;
 use dom::htmlelement::HTMLElement;
 use dom::htmlfieldsetelement::HTMLFieldSetElement;
 use dom::htmlformelement::{FormDatumValue, FormControl, FormDatum, HTMLFormElement};
+use dom::htmloptgroupelement::HTMLOptGroupElement;
 use dom::htmloptionelement::HTMLOptionElement;
-use dom::node::{document_from_node, Node, UnbindContext, window_from_node};
+use dom::htmloptionscollection::HTMLOptionsCollection;
+use dom::node::{Node, UnbindContext, window_from_node};
 use dom::nodelist::NodeList;
 use dom::validation::Validatable;
 use dom::validitystate::ValidityState;
@@ -27,9 +34,31 @@ use string_cache::Atom;
 use style::attr::AttrValue;
 use style::element_state::*;
 
+#[derive(JSTraceable, HeapSizeOf)]
+struct OptionsFilter;
+impl CollectionFilter for OptionsFilter {
+    fn filter<'a>(&self, elem: &'a Element, root: &'a Node) -> bool {
+        if !elem.is::<HTMLOptionElement>() {
+            return false;
+        }
+
+        let node = elem.upcast::<Node>();
+        if root.is_parent_of(node) {
+            return true;
+        }
+
+        match node.GetParentNode() {
+            Some(optgroup) =>
+                optgroup.is::<HTMLOptGroupElement>() && root.is_parent_of(optgroup.r()),
+            None => false,
+        }
+    }
+}
+
 #[dom_struct]
 pub struct HTMLSelectElement {
-    htmlelement: HTMLElement
+    htmlelement: HTMLElement,
+    options: MutNullableHeap<JS<HTMLOptionsCollection>>,
 }
 
 static DEFAULT_SELECT_SIZE: u32 = 0;
@@ -41,7 +70,8 @@ impl HTMLSelectElement {
         HTMLSelectElement {
             htmlelement:
                 HTMLElement::new_inherited_with_state(IN_ENABLED_STATE,
-                                                      local_name, prefix, document)
+                                                      local_name, prefix, document),
+                options: Default::default()
         }
     }
 
@@ -185,48 +215,48 @@ impl HTMLSelectElementMethods for HTMLSelectElement {
         self.upcast::<HTMLElement>().labels()
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-length
+    // https://html.spec.whatwg.org/multipage/#dom-select-options
-    fn SetLength(&self, value: u32) {
+    fn Options(&self) -> Root<HTMLOptionsCollection> {
-        let length  = self.Length();
+        self.options.or_init(|| {
-        let node = self.upcast::<Node>();
+            let window = window_from_node(self);
-        if value < length {     // truncate the number of option elements
+            HTMLOptionsCollection::new(window.r(),
-            let mut iter = node.rev_children().take((length - value) as usize);
+                        self.upcast(), box OptionsFilter)
-            while let Some(child) = iter.next() {
+        })
-                if let Err(e) = node.RemoveChild(&child) {
-                    warn!("Error removing child of HTMLSelectElement: {:?}", e);
-                }
-            }
-        } else if value > length {  // add new blank option elements
-            let document = document_from_node(self);
-            for _ in 0..(value - length) {
-                let element = HTMLOptionElement::new(atom!("option"), None, &document.upcast());
-                if let Err(e) = node.AppendChild(element.upcast()) {
-                    warn!("error appending child of HTMLSelectElement: {:?}", e);
-                }
-            }
-        }
     }
 
     // https://html.spec.whatwg.org/multipage/#dom-select-length
     fn Length(&self) -> u32 {
-        self.upcast::<Node>()
+        self.Options().Length()
-            .traverse_preorder()
+    }
-            .filter_map(Root::downcast::<HTMLOptionElement>)
+
-            .count() as u32
+    // https://html.spec.whatwg.org/multipage/#dom-select-length
+    fn SetLength(&self, length: u32) {
+        self.Options().SetLength(length)
     }
 
     // https://html.spec.whatwg.org/multipage/#dom-select-item
     fn Item(&self, index: u32) -> Option<Root<Element>> {
-        self.upcast::<Node>()
+        self.Options().upcast().Item(index)
-            .traverse_preorder()
-            .filter_map(Root::downcast::<HTMLOptionElement>)
-            .nth(index as usize)
-            .map(|item| Root::from_ref(item.upcast()))
     }
 
     // https://html.spec.whatwg.org/multipage/#dom-select-item
     fn IndexedGetter(&self, index: u32) -> Option<Root<Element>> {
-        self.Item(index)
+        self.Options().IndexedGetter(index)
+    }
+
+    // https://html.spec.whatwg.org/multipage/#dom-select-nameditem
+    fn NamedItem(&self, name: DOMString) -> Option<Root<HTMLOptionElement>> {
+        self.Options().NamedGetter(name).map_or(None, |e| Root::downcast::<HTMLOptionElement>(e))
+    }
+
+    // https://html.spec.whatwg.org/multipage/#dom-select-remove
+    fn Remove_(&self, index: i32) {
+        self.Options().Remove(index)
+    }
+
+    // https://html.spec.whatwg.org/multipage/#dom-select-remove
+    fn Remove(&self) {
+        self.upcast::<Element>().Remove()
     }
 }
 

components/script/dom/mod.rs

@@ -324,6 +324,7 @@ pub mod htmlobjectelement;
 pub mod htmlolistelement;
 pub mod htmloptgroupelement;
 pub mod htmloptionelement;
+pub mod htmloptionscollection;
 pub mod htmloutputelement;
 pub mod htmlparagraphelement;
 pub mod htmlparamelement;

components/script/dom/webidls/HTMLOptionsCollection.webidl

@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// https://html.spec.whatwg.org/multipage/#htmloptionscollection
+[Exposed=(Window,Worker)]
+interface HTMLOptionsCollection : HTMLCollection {
+  // inherits item(), namedItem()
+  attribute unsigned long length; // shadows inherited length
+  //[CEReactions]
+  [Throws]
+  setter void (unsigned long index, HTMLOptionElement? option);
+  //[CEReactions]
+  [Throws]
+  void add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
+  //[CEReactions]
+  void remove(long index);
+  //attribute long selectedIndex;
+};

components/script/dom/webidls/HTMLSelectElement.webidl

@@ -14,14 +14,14 @@ interface HTMLSelectElement : HTMLElement {
 
   readonly attribute DOMString type;
 
-  //readonly attribute HTMLOptionsCollection options;
+  readonly attribute HTMLOptionsCollection options;
            attribute unsigned long length;
   getter Element? item(unsigned long index);
-  //HTMLOptionElement? namedItem(DOMString name);
+  HTMLOptionElement? namedItem(DOMString name);
   // Note: this function currently only exists for union.html.
   void add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
-  //void remove(); // ChildNode overload
+  void remove(); // ChildNode overload
-  //void remove(long index);
+  void remove(long index);
   //setter void (unsigned long index, HTMLOptionElement? option);
 
   //readonly attribute HTMLCollection selectedOptions;

tests/wpt/metadata/MANIFEST.json

@@ -37713,7 +37713,16 @@
   "local_changes": {
     "deleted": [],
     "deleted_reftests": {},
-    "items": {},
+    "items": {
+      "testharness": {
+        "html/semantics/forms/the-select-element/common-HTMLOptionsCollection-add.html": [
+          {
+            "path": "html/semantics/forms/the-select-element/common-HTMLOptionsCollection-add.html",
+            "url": "/html/semantics/forms/the-select-element/common-HTMLOptionsCollection-add.html"
+          }
+        ]
+      }
+    },
     "reftest_nodes": {}
   },
   "reftest_nodes": {

tests/wpt/metadata/html/dom/interfaces.html.ini

@@ -1083,27 +1083,6 @@
   [HTMLCollection interface: calling namedItem(DOMString) on document.createElement("form").elements with too few arguments must throw TypeError]
     expected: FAIL
 
-  [HTMLOptionsCollection interface: existence and properties of interface object]
-    expected: FAIL
-
-  [HTMLOptionsCollection interface object length]
-    expected: FAIL
-
-  [HTMLOptionsCollection interface: existence and properties of interface prototype object]
-    expected: FAIL
-
-  [HTMLOptionsCollection interface: existence and properties of interface prototype object's "constructor" property]
-    expected: FAIL
-
-  [HTMLOptionsCollection interface: attribute length]
-    expected: FAIL
-
-  [HTMLOptionsCollection interface: operation add([object Object\],[object Object\],[object Object\],[object Object\])]
-    expected: FAIL
-
-  [HTMLOptionsCollection interface: operation remove(long)]
-    expected: FAIL
-
   [HTMLOptionsCollection interface: attribute selectedIndex]
     expected: FAIL
 
@@ -3747,18 +3726,6 @@
   [HTMLSelectElement interface: attribute required]
     expected: FAIL
 
-  [HTMLSelectElement interface: attribute options]
-    expected: FAIL
-
-  [HTMLSelectElement interface: operation namedItem(DOMString)]
-    expected: FAIL
-
-  [HTMLSelectElement interface: operation remove()]
-    expected: FAIL
-
-  [HTMLSelectElement interface: operation remove(long)]
-    expected: FAIL
-
   [HTMLSelectElement interface: attribute selectedOptions]
     expected: FAIL
 
@@ -3792,15 +3759,6 @@
   [HTMLSelectElement interface: document.createElement("select") must inherit property "required" with the proper type (6)]
     expected: FAIL
 
-  [HTMLSelectElement interface: document.createElement("select") must inherit property "options" with the proper type (9)]
-    expected: FAIL
-
-  [HTMLSelectElement interface: document.createElement("select") must inherit property "namedItem" with the proper type (12)]
-    expected: FAIL
-
-  [HTMLSelectElement interface: calling namedItem(DOMString) on document.createElement("select") with too few arguments must throw TypeError]
-    expected: FAIL
-
   [HTMLSelectElement interface: document.createElement("select") must inherit property "selectedOptions" with the proper type (17)]
     expected: FAIL
 
@@ -6456,9 +6414,6 @@
   [HTMLAllCollection interface object name]
     expected: FAIL
 
-  [HTMLOptionsCollection interface object name]
-    expected: FAIL
-
   [HTMLPropertiesCollection interface object name]
     expected: FAIL
 

tests/wpt/metadata/html/infrastructure/common-dom-interfaces/collections/htmloptionscollection.html.ini

@@ -1,14 +1,5 @@
 [htmloptionscollection.html]
   type: testharness
-  [Original length]
-    expected: FAIL
-
-  [Setting length to original value has no effect]
-    expected: FAIL
-
-  [Setting length to shorter value]
-    expected: FAIL
-
   [Setting length to longer value]
     expected: FAIL
 
@@ -24,48 +15,5 @@
   [Insert <optgroup><optgroup><option>6</option></optgroup></optgroup> into <select>]
     expected: FAIL
 
-  [namedItem id attribute]
-    expected: FAIL
-
-  [namedItem name attribute]
-    expected: FAIL
-
-  [namedItem doesn't match anything]
-    expected: FAIL
-
-  [namedItem multiple IDs]
-    expected: FAIL
-
-  [namedItem multiple names]
-    expected: FAIL
-
-  [namedItem multiple name and ID]
-    expected: FAIL
-
-  [namedItem multiple name and ID with multiple attributes]
-    expected: FAIL
-
-  [namedItem id attribute multiple attributes one element]
-    expected: FAIL
-
-  [namedItem name attribute multiple attributes one element]
-    expected: FAIL
-
-  [HTMLOptionsCollection [index\] method return the item with index]
-    expected: FAIL
-
-  [HTMLOptionsCollection [name\] method return the item with name]
-    expected: FAIL
-
-  [HTMLOptionsCollection.item(index) method return the item with index]
-    expected: FAIL
-
-  [HTMLOptionsCollection.item(name) method return the item with index 0]
-    expected: FAIL
-
   [HTMLOptionsCollection.add method insert HTMLOptionElement Option element]
     expected: FAIL
-
-  [HTMLOptionsCollection.remove method remove Option element by index]
-    expected: FAIL
-

tests/wpt/metadata/html/semantics/forms/the-select-element/common-HTMLOptionsCollection-namedItem.html.ini

@@ -1,29 +0,0 @@
-[common-HTMLOptionsCollection-namedItem.html]
-  type: testharness
-  [if only one item has a *name* or id value matching the parameter, return that object and stop]
-    expected: FAIL
-
-  [if only one item has a name or *id* value matching the parameter, return that object and stop]
-    expected: FAIL
-
-  [if no item has a name or id value matching the parameter, return null and stop]
-    expected: FAIL
-
-  [return an HTMLOptionsCollection in correct order for repeated 'id' value]
-    expected: FAIL
-
-  [return an HTMLOptionsCollection in correct order for repeated 'name' value]
-    expected: FAIL
-
-  [return an HTMLOptionsCollection in correct order for repeated mixed value]
-    expected: FAIL
-
-  [if multiple items have a name or *id* value matching the parameter, return the first object and stop]
-    expected: FAIL
-
-  [if multiple items have a *name* or id value matching the parameter, return the first object and stop]
-    expected: FAIL
-
-  [if multiple items have a *name* or *id* value matching the parameter, return the first object and stop]
-    expected: FAIL
-

tests/wpt/metadata/html/semantics/forms/the-select-element/select-named-getter.html.ini

@@ -1,14 +0,0 @@
-[select-named-getter.html]
-  type: testharness
-  [Option with id]
-    expected: FAIL
-
-  [Option with name]
-    expected: FAIL
-
-  [Option with name and id]
-    expected: FAIL
-
-  [Empty string name]
-    expected: FAIL
-

tests/wpt/metadata/html/semantics/forms/the-select-element/select-remove.html.ini

@@ -1,8 +0,0 @@
-[select-remove.html]
-  type: testharness
-  [select.remove(n) should work]
-    expected: FAIL
-
-  [select.options.remove(n) should work]
-    expected: FAIL
-

tests/wpt/mozilla/tests/mozilla/interfaces.html

@@ -96,6 +96,7 @@ test_interfaces([
   "HTMLOListElement",
   "HTMLOptGroupElement",
   "HTMLOptionElement",
+  "HTMLOptionsCollection",
   "HTMLOutputElement",
   "HTMLParagraphElement",
   "HTMLParamElement",

tests/wpt/mozilla/tests/mozilla/interfaces.worker.js

@@ -62,6 +62,7 @@ test_interfaces([
   "HTMLOListElement",
   "HTMLOptGroupElement",
   "HTMLOptionElement",
+  "HTMLOptionsCollection",
   "HTMLOutputElement",
   "HTMLScriptElement",
   "ImageData",

tests/wpt/web-platform-tests/html/semantics/forms/the-select-element/common-HTMLOptionsCollection-add.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title id='title'>HTMLOptionsCollection</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id="log"></div>
+<select id="selly">
+  <option id="id1" name="name1">1</option>
+  <option id="id2" name="name2">2</option>
+  <option id="id3" name="name3">3</option>
+  <option id="id4" name="name4">4</option>
+  <optgroup id="og1">
+    <option name="nameonly">n1</option>
+    <option id="id5">5</option>
+  </optgroup>
+  <optgroup id="og2">
+    <option name="nameonly">n2</option>
+    <option id="id6">6</option>
+  </optgroup>
+
+</select>
+
+<script>
+var selly;
+setup(function() {
+    selly = document.getElementById('selly');
+});
+
+test(function () {
+    var option = document.getElementById('id1');
+    var optgroup = document.getElementById('og1');
+    selly.options.add(option, option);
+    selly.options.add(optgroup, optgroup);
+    assert_equals(selly.children.length, 6);
+    assert_equals(selly.length, 8);
+}, "if before and node are the same element nothing should be done");
+
+test(function () {
+    var o1 = document.createElement("option");
+    o1.value = "a";
+    var o2 = document.createElement("option");
+    o2.value = "b";
+    var o3 = document.createElement("option");
+    o3.value = "c";
+    var optgroup = document.getElementById('og1');
+    selly.options.add(o1, null);
+    selly.options.add(o2, optgroup);
+    selly.options.add(o3, 0);
+
+    var elarray = [];
+    for (var i = 0; i < selly.length; i++) {
+        elarray.push(selly[i].value);
+    }
+    assert_array_equals(elarray, ["c", "1", "2", "3", "4", "b", "n1", "5", "n2", "6", "a"]);
+}, "add method should add option elements correctly");
+
+test(function () {
+    var og1 = document.createElement("optgroup");
+    var o1 = document.createElement("option");
+    o1.value = "a";
+    o1.appendChild(og1);
+    var og2 = document.createElement("optgroup");
+    var o2 = document.createElement("option");
+    o2.value = "b";
+    o2.appendChild(og2);
+    var og3 = document.createElement("optgroup");
+    var o3 = document.createElement("option");
+    o3.value = "c";
+    o3.appendChild(og3);
+
+    var optgroup = document.getElementById('og1');
+    selly.options.add(og1, null);
+    selly.options.add(og2, optgroup);
+    selly.options.add(og3, 0);
+
+    var elarray = [];
+    for (var i = 0; i < selly.length; i++) {
+        elarray.push(selly[i].value);
+    }
+    assert_array_equals(elarray, ["c", "1", "2", "3", "4", "b", "n1", "5", "n2", "6", "a"]);
+}, "add method should add option groups correctly");
+
+</script>
+</body>
+</html>

tests/wpt/web-platform-tests/html/semantics/forms/the-select-element/common-HTMLOptionsCollection.html

@@ -67,4 +67,33 @@ test(function () {
     assert_equals(selly.children.length, 4,
                   "Number of children should have changed");
 }, "Setting a length lower than the old length trims nodes from the end");
+
+test(function () {
+    var opts = selly.options;
+    opts[3] = null;
+    assert_equals(selly[3], undefined,
+                  "previously set node is now undefined");
+    assert_equals(selly.length, 3,
+                  "Number of nodes in collection is correctly changed");
+    assert_equals(selly.children.length, 3,
+                  "Number of children should have changed");
+}, "Setting element to null by index removed the element");
+
+test(function () {
+    var opts = selly.options;
+    var new_option = document.createElement("option");
+    var replace_option = new_option.cloneNode(true);
+    new_option.value = "-1";
+    replace_option.value = "a";
+    opts[5] = new_option;
+    opts[0] = replace_option;
+
+    var elarray = [];
+    for (var i = 0; i < selly.length; i++) {
+        elarray.push(selly[i].value);
+    }
+    assert_array_equals(elarray, ["a", "2", "3", "", "", "-1"]);
+
+}, "Setting element by index should correctly append and replace elements");
+
 </script>