LibWeb: Add datalist element options property

Author: https://github.com/bplaat
Commit: https://github.com/SerenityOS/serenity/commit/3e507102ea
Pull-request: https://github.com/SerenityOS/serenity/pull/23902

Tests/LibWeb/Text/expected/HTML/datalist-element.txt

@@ -0,0 +1,2 @@
+1. 10
+2. 11

Tests/LibWeb/Text/input/HTML/datalist-element.html

@@ -0,0 +1,35 @@
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        let testCounter = 1;
+        function testPart(part) {
+            println(`${testCounter++}. ${JSON.stringify(part())}`);
+        }
+
+        // 1. Get options from datalist
+        testPart(() => {
+            const datalist = document.createElement('datalist');
+            for (let i = 0; i < 10; i++) {
+                datalist.appendChild(document.createElement('div'));
+            }
+            for (let i = 0; i < 10; i++) {
+                datalist.appendChild(document.createElement('option'));
+            }
+            return datalist.options.length;
+        });
+
+        // 2. Check if options is same object and live
+        testPart(() => {
+            const datalist = document.createElement('datalist');
+            for (let i = 0; i < 10; i++) {
+                datalist.appendChild(document.createElement('option'));
+            }
+            for (let i = 0; i < 10; i++) {
+                datalist.appendChild(document.createElement('div'));
+            }
+            const options = datalist.options;
+            datalist.appendChild(document.createElement('option'));
+            return options.length;
+        });
+    });
+</script>

Userland/Libraries/LibWeb/HTML/HTMLDataListElement.cpp

@@ -6,6 +6,7 @@
 
 #include <LibWeb/Bindings/Intrinsics.h>
 #include <LibWeb/HTML/HTMLDataListElement.h>
+#include <LibWeb/HTML/HTMLOptionElement.h>
 
 namespace Web::HTML {
 
@@ -24,4 +25,22 @@ void HTMLDataListElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLDataListElement);
 }
 
+void HTMLDataListElement::visit_edges(Cell::Visitor& visitor)
+{
+    Base::visit_edges(visitor);
+    visitor.visit(m_options);
+}
+
+// https://html.spec.whatwg.org/multipage/form-elements.html#dom-datalist-options
+JS::NonnullGCPtr<DOM::HTMLCollection> HTMLDataListElement::options()
+{
+    // The options IDL attribute must return an HTMLCollection rooted at the datalist node, whose filter matches option elements.
+    if (!m_options) {
+        m_options = DOM::HTMLCollection::create(*this, DOM::HTMLCollection::Scope::Descendants, [](Element const& element) {
+            return is<HTML::HTMLOptionElement>(element);
+        });
+    }
+    return *m_options;
+}
+
 }

Userland/Libraries/LibWeb/HTML/HTMLDataListElement.h

@@ -7,6 +7,7 @@
 #pragma once
 
 #include <LibWeb/ARIA/Roles.h>
+#include <LibWeb/DOM/HTMLCollection.h>
 #include <LibWeb/HTML/HTMLElement.h>
 
 namespace Web::HTML {
@@ -20,10 +21,15 @@ public:
 
     virtual Optional<ARIA::Role> default_role() const override { return ARIA::Role::listbox; }
 
+    JS::NonnullGCPtr<DOM::HTMLCollection> options();
+
 private:
     HTMLDataListElement(DOM::Document&, DOM::QualifiedName);
 
     virtual void initialize(JS::Realm&) override;
+    virtual void visit_edges(Cell::Visitor&) override;
+
+    JS::GCPtr<DOM::HTMLCollection> m_options;
 };
 
 }

Userland/Libraries/LibWeb/HTML/HTMLDataListElement.idl

@@ -5,5 +5,5 @@
 interface HTMLDataListElement : HTMLElement {
     [HTMLConstructor] constructor();
 
-    // FIXME: [SameObject] readonly attribute HTMLCollection options;
+    [SameObject] readonly attribute HTMLCollection options;
 };