Support single-value `<select>` elements (#35684)

https://github.com/user-attachments/assets/9aba75ff-4190-4a85-89ed-d3f3aa53d3b0 Among other things this adds a new `EmbedderMsg::ShowSelectElementMenu` to tell the embedder to display a select popup at the given location. This is a draft because some small style adjustments need to be made: * the select element should always have the width of the largest option * the border should be part of the shadow tree Apart from that, it's mostly ready for review. <details><summary>HTML for demo video</summary> ```html <html> <body> <select id="c" name="choice"> <option value="first">First Value</option> <option value="second">Second Value</option> <option value="third">Third Value</option> </select> </body> </html> ``` </details> ---  - [X] `./mach build -d` does not report any errors - [X] `./mach test-tidy` does not report any errors - [X] Part of https://github.com/servo/servo/issues/3551 - [ ] There are tests for these changes OR - [ ] These changes do not require tests because ___   --------- Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
author: Simon Wülker <simon.wuelker@arcor.de> 2025-04-03 14:11:55 +0200
committer: GitHub <noreply@github.com> 2025-04-03 12:11:55 +0000
commit: 0e99539dab4c059ba3c3750cfda42e246ce8b4f0 (patch)
tree: a5703fc0ca14d1bc66345b3168d183bab037427a
parent: 6e9d01b908b51d3f44f858476acf3af8c1d44289 (diff)
download: servo-0e99539dab4c059ba3c3750cfda42e246ce8b4f0.tar.gz
servo-0e99539dab4c059ba3c3750cfda42e246ce8b4f0.zip
32 files changed, 633 insertions, 151 deletions
diff --git a/components/constellation/tracing.rs b/components/constellation/tracing.rs
index 08e6fecc099..fd00d62067b 100644
--- a/components/constellation/tracing.rs
+++ b/components/constellation/tracing.rs
@@ -236,6 +236,7 @@ mod from_script {
                 Self::StopGamepadHapticEffect(..) => target_variant!("StopGamepadHapticEffect"),
                 Self::ShutdownComplete => target_variant!("ShutdownComplete"),
                 Self::ShowNotification(..) => target_variant!("ShowNotification"),
+                Self::ShowSelectElementMenu(..) => target_variant!("ShowSelectElementMenu"),
             }
         }
     }
diff --git a/components/script/dom/document.rs b/components/script/dom/document.rs
index 78580bb20f6..6528a8e641d 100644
--- a/components/script/dom/document.rs
+++ b/components/script/dom/document.rs
@@ -75,10 +75,6 @@ use uuid::Uuid;
 use webgpu::swapchain::WebGPUContextId;
 use webrender_api::units::DeviceIntRect;
 
-use super::bindings::codegen::Bindings::XPathEvaluatorBinding::XPathEvaluatorMethods;
-use super::canvasrenderingcontext2d::CanvasRenderingContext2D;
-use super::clipboardevent::ClipboardEventType;
-use super::performancepainttiming::PerformancePaintTiming;
 use crate::animation_timeline::AnimationTimeline;
 use crate::animations::Animations;
 use crate::canvas_context::CanvasContext as _;
@@ -105,6 +101,7 @@ use crate::dom::bindings::codegen::Bindings::TouchBinding::TouchMethods;
 use crate::dom::bindings::codegen::Bindings::WindowBinding::{
     FrameRequestCallback, ScrollBehavior, WindowMethods,
 };
+use crate::dom::bindings::codegen::Bindings::XPathEvaluatorBinding::XPathEvaluatorMethods;
 use crate::dom::bindings::codegen::Bindings::XPathNSResolverBinding::XPathNSResolver;
 use crate::dom::bindings::codegen::UnionTypes::{NodeOrString, StringOrElementCreationOptions};
 use crate::dom::bindings::error::{Error, ErrorInfo, ErrorResult, Fallible};
@@ -120,8 +117,9 @@ use crate::dom::bindings::weakref::WeakRef;
 use crate::dom::bindings::xmlname::{
     matches_name_production, namespace_from_domstring, validate_and_extract,
 };
+use crate::dom::canvasrenderingcontext2d::CanvasRenderingContext2D;
 use crate::dom::cdatasection::CDATASection;
-use crate::dom::clipboardevent::ClipboardEvent;
+use crate::dom::clipboardevent::{ClipboardEvent, ClipboardEventType};
 use crate::dom::comment::Comment;
 use crate::dom::compositionevent::CompositionEvent;
 use crate::dom::cssstylesheet::CSSStyleSheet;
@@ -171,6 +169,7 @@ use crate::dom::nodeiterator::NodeIterator;
 use crate::dom::nodelist::NodeList;
 use crate::dom::pagetransitionevent::PageTransitionEvent;
 use crate::dom::performanceentry::PerformanceEntry;
+use crate::dom::performancepainttiming::PerformancePaintTiming;
 use crate::dom::pointerevent::{PointerEvent, PointerId};
 use crate::dom::processinginstruction::ProcessingInstruction;
 use crate::dom::promise::Promise;
@@ -1274,7 +1273,7 @@ impl Document {
         }
     }
 
-    fn send_to_embedder(&self, msg: EmbedderMsg) {
+    pub(crate) fn send_to_embedder(&self, msg: EmbedderMsg) {
         let window = self.window();
         window.send_to_embedder(msg);
     }
@@ -1312,7 +1311,7 @@ impl Document {
 
         let node = unsafe { node::from_untrusted_compositor_node_address(hit_test_result.node) };
         let Some(el) = node
-            .inclusive_ancestors(ShadowIncluding::No)
+            .inclusive_ancestors(ShadowIncluding::Yes)
             .filter_map(DomRoot::downcast::<Element>)
             .next()
         else {
diff --git a/components/script/dom/element.rs b/components/script/dom/element.rs
index 5ce2473585e..db0b4c63c5f 100644
--- a/components/script/dom/element.rs
+++ b/components/script/dom/element.rs
@@ -514,7 +514,6 @@ impl Element {
     #[allow(clippy::too_many_arguments)]
     pub(crate) fn attach_shadow(
         &self,
-        // TODO: remove is_ua_widget argument
         is_ua_widget: IsUserAgentWidget,
         mode: ShadowRootMode,
         clonable: bool,
@@ -4379,6 +4378,12 @@ impl Element {
                 let element = self.downcast::<HTMLLabelElement>().unwrap();
                 Some(element as &dyn Activatable)
             },
+            NodeTypeId::Element(ElementTypeId::HTMLElement(
+                HTMLElementTypeId::HTMLSelectElement,
+            )) => {
+                let element = self.downcast::<HTMLSelectElement>().unwrap();
+                Some(element as &dyn Activatable)
+            },
             NodeTypeId::Element(ElementTypeId::HTMLElement(HTMLElementTypeId::HTMLElement)) => {
                 let element = self.downcast::<HTMLElement>().unwrap();
                 Some(element as &dyn Activatable)
diff --git a/components/script/dom/htmloptionelement.rs b/components/script/dom/htmloptionelement.rs
index e8471f408d2..d6e8be04b64 100644
--- a/components/script/dom/htmloptionelement.rs
+++ b/components/script/dom/htmloptionelement.rs
@@ -93,12 +93,7 @@ impl HTMLOptionElement {
     }
 
     fn pick_if_selected_and_reset(&self) {
-        if let Some(select) = self
-            .upcast::<Node>()
-            .ancestors()
-            .filter_map(DomRoot::downcast::<HTMLSelectElement>)
-            .next()
-        {
+        if let Some(select) = self.owner_select_element() {
             if self.Selected() {
                 select.pick_option(self);
             }
@@ -108,51 +103,53 @@ impl HTMLOptionElement {
 
     // https://html.spec.whatwg.org/multipage/#concept-option-index
     fn index(&self) -> i32 {
-        if let Some(parent) = self.upcast::<Node>().GetParentNode() {
-            if let Some(select_parent) = parent.downcast::<HTMLSelectElement>() {
-                // return index in parent select's list of options
-                return self.index_in_select(select_parent);
-            } else if parent.is::<HTMLOptGroupElement>() {
-                if let Some(grandparent) = parent.GetParentNode() {
-                    if let Some(select_grandparent) = grandparent.downcast::<HTMLSelectElement>() {
-                        // return index in grandparent select's list of options
-                        return self.index_in_select(select_grandparent);
-                    }
-                }
-            }
-        }
-        // "If the option element is not in a list of options,
-        // then the option element's index is zero."
-        // self is neither a child of a select, nor a grandchild of a select
-        // via an optgroup, so it is not in a list of options
-        0
+        let Some(owner_select) = self.owner_select_element() else {
+            return 0;
+        };
+
+        let Some(position) = owner_select.list_of_options().position(|n| &*n == self) else {
+            // An option should always be in it's owner's list of options, but it's not worth a browser panic
+            warn!("HTMLOptionElement called index_in_select at a select that did not contain it");
+            return 0;
+        };
+
+        position.try_into().unwrap_or(0)
     }
 
-    fn index_in_select(&self, select: &HTMLSelectElement) -> i32 {
-        match select.list_of_options().position(|n| &*n == self) {
-            Some(index) => index.try_into().unwrap_or(0),
-            None => {
-                // shouldn't happen but not worth a browser panic
-                warn!(
-                    "HTMLOptionElement called index_in_select at a select that did not contain it"
-                );
-                0
-            },
+    fn owner_select_element(&self) -> Option<DomRoot<HTMLSelectElement>> {
+        let parent = self.upcast::<Node>().GetParentNode()?;
+
+        if parent.is::<HTMLOptGroupElement>() {
+            DomRoot::downcast::<HTMLSelectElement>(parent.GetParentNode()?)
+        } else {
+            DomRoot::downcast::<HTMLSelectElement>(parent)
         }
     }
 
     fn update_select_validity(&self, can_gc: CanGc) {
-        if let Some(select) = self
-            .upcast::<Node>()
-            .ancestors()
-            .filter_map(DomRoot::downcast::<HTMLSelectElement>)
-            .next()
-        {
+        if let Some(select) = self.owner_select_element() {
             select
                 .validity_state()
                 .perform_validation_and_update(ValidationFlags::all(), can_gc);
         }
     }
+
+    /// <https://html.spec.whatwg.org/multipage/#concept-option-label>
+    ///
+    /// Note that this is not equivalent to <https://html.spec.whatwg.org/multipage/#dom-option-label>.
+    pub(crate) fn displayed_label(&self) -> DOMString {
+        // > The label of an option element is the value of the label content attribute, if there is one
+        // > and its value is not the empty string, or, otherwise, the value of the element's text IDL attribute.
+        let label = self
+            .upcast::<Element>()
+            .get_string_attribute(&local_name!("label"));
+
+        if label.is_empty() {
+            return self.Text();
+        }
+
+        label
+    }
 }
 
 // FIXME(ajeffrey): Provide a way of buffering DOMStrings other than using Strings
@@ -175,7 +172,7 @@ fn collect_text(element: &Element, value: &mut String) {
 }
 
 impl HTMLOptionElementMethods<crate::DomTypeHolder> for HTMLOptionElement {
-    // https://html.spec.whatwg.org/multipage/#dom-option
+    /// <https://html.spec.whatwg.org/multipage/#dom-option>
     fn Option(
         window: &Window,
         proto: Option<HandleObject>,
@@ -217,19 +214,19 @@ impl HTMLOptionElementMethods<crate::DomTypeHolder> for HTMLOptionElement {
     // https://html.spec.whatwg.org/multipage/#dom-option-disabled
     make_bool_setter!(SetDisabled, "disabled");
 
-    // https://html.spec.whatwg.org/multipage/#dom-option-text
+    /// <https://html.spec.whatwg.org/multipage/#dom-option-text>
     fn Text(&self) -> DOMString {
         let mut content = String::new();
         collect_text(self.upcast(), &mut content);
         DOMString::from(str_join(split_html_space_chars(&content), " "))
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-option-text
+    /// <https://html.spec.whatwg.org/multipage/#dom-option-text>
     fn SetText(&self, value: DOMString, can_gc: CanGc) {
         self.upcast::<Node>().SetTextContent(Some(value), can_gc)
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-option-form
+    /// <https://html.spec.whatwg.org/multipage/#dom-option-form>
     fn GetForm(&self) -> Option<DomRoot<HTMLFormElement>> {
         let parent = self.upcast::<Node>().GetParentNode().and_then(|p| {
             if p.is::<HTMLOptGroupElement>() {
@@ -242,7 +239,7 @@ impl HTMLOptionElementMethods<crate::DomTypeHolder> for HTMLOptionElement {
         parent.and_then(|p| p.downcast::<HTMLSelectElement>().and_then(|s| s.GetForm()))
     }
 
-    // https://html.spec.whatwg.org/multipage/#attr-option-value
+    /// <https://html.spec.whatwg.org/multipage/#attr-option-value>
     fn Value(&self) -> DOMString {
         let element = self.upcast::<Element>();
         let attr = &local_name!("value");
@@ -256,7 +253,7 @@ impl HTMLOptionElementMethods<crate::DomTypeHolder> for HTMLOptionElement {
     // https://html.spec.whatwg.org/multipage/#attr-option-value
     make_setter!(SetValue, "value");
 
-    // https://html.spec.whatwg.org/multipage/#attr-option-label
+    /// <https://html.spec.whatwg.org/multipage/#attr-option-label>
     fn Label(&self) -> DOMString {
         let element = self.upcast::<Element>();
         let attr = &local_name!("label");
@@ -276,12 +273,12 @@ impl HTMLOptionElementMethods<crate::DomTypeHolder> for HTMLOptionElement {
     // https://html.spec.whatwg.org/multipage/#dom-option-defaultselected
     make_bool_setter!(SetDefaultSelected, "selected");
 
-    // https://html.spec.whatwg.org/multipage/#dom-option-selected
+    /// <https://html.spec.whatwg.org/multipage/#dom-option-selected>
     fn Selected(&self) -> bool {
         self.selectedness.get()
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-option-selected
+    /// <https://html.spec.whatwg.org/multipage/#dom-option-selected>
     fn SetSelected(&self, selected: bool) {
         self.dirtiness.set(true);
         self.selectedness.set(selected);
@@ -289,7 +286,7 @@ impl HTMLOptionElementMethods<crate::DomTypeHolder> for HTMLOptionElement {
         self.update_select_validity(CanGc::note());
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-option-index
+    /// <https://html.spec.whatwg.org/multipage/#dom-option-index>
     fn Index(&self) -> i32 {
         self.index()
     }
@@ -337,6 +334,13 @@ impl VirtualMethods for HTMLOptionElement {
                 }
                 self.update_select_validity(can_gc);
             },
+            local_name!("label") => {
+                // The label of the selected option is displayed inside the select element, so we need to repaint
+                // when it changes
+                if let Some(select_element) = self.owner_select_element() {
+                    select_element.update_shadow_tree(CanGc::note());
+                }
+            },
             _ => {},
         }
     }
diff --git a/components/script/dom/htmloptionscollection.rs b/components/script/dom/htmloptionscollection.rs
index 1b31ea4bfcc..e38749b3aa5 100644
--- a/components/script/dom/htmloptionscollection.rs
+++ b/components/script/dom/htmloptionscollection.rs
@@ -240,11 +240,11 @@ impl HTMLOptionsCollectionMethods<crate::DomTypeHolder> for HTMLOptionsCollectio
     }
 
     /// <https://html.spec.whatwg.org/multipage/#dom-htmloptionscollection-selectedindex>
-    fn SetSelectedIndex(&self, index: i32) {
+    fn SetSelectedIndex(&self, index: i32, can_gc: CanGc) {
         self.upcast()
             .root_node()
             .downcast::<HTMLSelectElement>()
             .expect("HTMLOptionsCollection not rooted on a HTMLSelectElement")
-            .SetSelectedIndex(index)
+            .SetSelectedIndex(index, can_gc)
     }
 }
diff --git a/components/script/dom/htmlselectelement.rs b/components/script/dom/htmlselectelement.rs
index 3804f5a3bfe..e349b58f9bb 100644
--- a/components/script/dom/htmlselectelement.rs
+++ b/components/script/dom/htmlselectelement.rs
@@ -5,42 +5,75 @@
 use std::default::Default;
 use std::iter;
 
+use webrender_api::units::DeviceIntRect;
+use ipc_channel::ipc;
 use dom_struct::dom_struct;
 use html5ever::{LocalName, Prefix, local_name};
 use js::rust::HandleObject;
 use style::attr::AttrValue;
 use stylo_dom::ElementState;
+use embedder_traits::{SelectElementOptionOrOptgroup, SelectElementOption};
+use euclid::{Size2D, Point2D, Rect};
+use embedder_traits::EmbedderMsg;
 
+use crate::dom::bindings::codegen::GenericBindings::HTMLOptGroupElementBinding::HTMLOptGroupElement_Binding::HTMLOptGroupElementMethods;
+use crate::dom::activation::Activatable;
 use crate::dom::attr::Attr;
+use crate::dom::bindings::cell::{DomRefCell, Ref};
 use crate::dom::bindings::codegen::Bindings::ElementBinding::ElementMethods;
 use crate::dom::bindings::codegen::Bindings::HTMLCollectionBinding::HTMLCollectionMethods;
 use crate::dom::bindings::codegen::Bindings::HTMLOptionElementBinding::HTMLOptionElementMethods;
 use crate::dom::bindings::codegen::Bindings::HTMLOptionsCollectionBinding::HTMLOptionsCollectionMethods;
 use crate::dom::bindings::codegen::Bindings::HTMLSelectElementBinding::HTMLSelectElementMethods;
 use crate::dom::bindings::codegen::Bindings::NodeBinding::NodeMethods;
+use crate::dom::bindings::codegen::Bindings::ShadowRootBinding::{
+    ShadowRootMode, SlotAssignmentMode,
+};
+use crate::dom::bindings::codegen::GenericBindings::CharacterDataBinding::CharacterData_Binding::CharacterDataMethods;
 use crate::dom::bindings::codegen::UnionTypes::{
     HTMLElementOrLong, HTMLOptionElementOrHTMLOptGroupElement,
 };
 use crate::dom::bindings::error::ErrorResult;
 use crate::dom::bindings::inheritance::Castable;
-use crate::dom::bindings::root::{DomRoot, MutNullableDom};
+use crate::dom::bindings::root::{Dom, DomRoot, MutNullableDom};
 use crate::dom::bindings::str::DOMString;
+use crate::dom::characterdata::CharacterData;
 use crate::dom::document::Document;
 use crate::dom::element::{AttributeMutation, Element};
+use crate::dom::event::Event;
+use crate::dom::eventtarget::EventTarget;
 use crate::dom::htmlcollection::CollectionFilter;
+use crate::dom::htmldivelement::HTMLDivElement;
 use crate::dom::htmlelement::HTMLElement;
 use crate::dom::htmlfieldsetelement::HTMLFieldSetElement;
 use crate::dom::htmlformelement::{FormControl, FormDatum, FormDatumValue, HTMLFormElement};
 use crate::dom::htmloptgroupelement::HTMLOptGroupElement;
 use crate::dom::htmloptionelement::HTMLOptionElement;
 use crate::dom::htmloptionscollection::HTMLOptionsCollection;
-use crate::dom::node::{BindContext, Node, NodeTraits, UnbindContext};
+use crate::dom::node::{BindContext, ChildrenMutation, Node, NodeTraits, UnbindContext};
 use crate::dom::nodelist::NodeList;
+use crate::dom::shadowroot::IsUserAgentWidget;
+use crate::dom::text::Text;
 use crate::dom::validation::{Validatable, is_barred_by_datalist_ancestor};
 use crate::dom::validitystate::{ValidationFlags, ValidityState};
 use crate::dom::virtualmethods::VirtualMethods;
 use crate::script_runtime::CanGc;
 
+const DEFAULT_SELECT_SIZE: u32 = 0;
+
+const SELECT_BOX_STYLE: &str = "
+    display: flex;
+    align-items: center;
+    height: 100%;
+";
+
+const TEXT_CONTAINER_STYLE: &str = "flex: 1;";
+
+const CHEVRON_CONTAINER_STYLE: &str = "
+    font-size: 16px;
+    margin: 4px;
+";
+
 #[derive(JSTraceable, MallocSizeOf)]
 struct OptionsFilter;
 impl CollectionFilter for OptionsFilter {
@@ -68,9 +101,15 @@ pub(crate) struct HTMLSelectElement {
     form_owner: MutNullableDom<HTMLFormElement>,
     labels_node_list: MutNullableDom<NodeList>,
     validity_state: MutNullableDom<ValidityState>,
+    shadow_tree: DomRefCell<Option<ShadowTree>>,
 }
 
-static DEFAULT_SELECT_SIZE: u32 = 0;
+/// Holds handles to all elements in the UA shadow tree
+#[derive(Clone, JSTraceable, MallocSizeOf)]
+#[cfg_attr(crown, crown::unrooted_must_root_lint::must_root)]
+struct ShadowTree {
+    selected_option: Dom<Text>,
+}
 
 impl HTMLSelectElement {
     fn new_inherited(
@@ -89,6 +128,7 @@ impl HTMLSelectElement {
             form_owner: Default::default(),
             labels_node_list: Default::default(),
             validity_state: Default::default(),
+            shadow_tree: Default::default(),
         }
     }
 
@@ -215,10 +255,178 @@ impl HTMLSelectElement {
             self.Size()
         }
     }
+
+    fn create_shadow_tree(&self, can_gc: CanGc) {
+        let document = self.owner_document();
+        let root = self
+            .upcast::<Element>()
+            .attach_shadow(
+                IsUserAgentWidget::Yes,
+                ShadowRootMode::Closed,
+                false,
+                false,
+                false,
+                SlotAssignmentMode::Manual,
+                can_gc,
+            )
+            .expect("Attaching UA shadow root failed");
+
+        let select_box = HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
+        select_box.upcast::<Element>().set_string_attribute(
+            &local_name!("style"),
+            SELECT_BOX_STYLE.into(),
+            can_gc,
+        );
+
+        let text_container = HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
+        text_container.upcast::<Element>().set_string_attribute(
+            &local_name!("style"),
+            TEXT_CONTAINER_STYLE.into(),
+            can_gc,
+        );
+        select_box
+            .upcast::<Node>()
+            .AppendChild(text_container.upcast::<Node>())
+            .unwrap();
+
+        let text = Text::new(DOMString::new(), &document, can_gc);
+        let _ = self.shadow_tree.borrow_mut().insert(ShadowTree {
+            selected_option: text.as_traced(),
+        });
+        text_container
+            .upcast::<Node>()
+            .AppendChild(text.upcast::<Node>())
+            .unwrap();
+
+        let chevron_container =
+            HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
+        chevron_container.upcast::<Element>().set_string_attribute(
+            &local_name!("style"),
+            CHEVRON_CONTAINER_STYLE.into(),
+            can_gc,
+        );
+        chevron_container
+            .upcast::<Node>()
+            .SetTextContent(Some("▾".into()), can_gc);
+        select_box
+            .upcast::<Node>()
+            .AppendChild(chevron_container.upcast::<Node>())
+            .unwrap();
+
+        root.upcast::<Node>()
+            .AppendChild(select_box.upcast::<Node>())
+            .unwrap();
+    }
+
+    fn shadow_tree(&self, can_gc: CanGc) -> Ref<'_, ShadowTree> {
+        if !self.upcast::<Element>().is_shadow_host() {
+            self.create_shadow_tree(can_gc);
+        }
+
+        Ref::filter_map(self.shadow_tree.borrow(), Option::as_ref)
+            .ok()
+            .expect("UA shadow tree was not created")
+    }
+
+    pub(crate) fn update_shadow_tree(&self, can_gc: CanGc) {
+        let shadow_tree = self.shadow_tree(can_gc);
+
+        let selected_option_text = self
+            .selected_option()
+            .or_else(|| self.list_of_options().next())
+            .map(|option| option.displayed_label())
+            .unwrap_or_default();
+
+        // Replace newlines with whitespace, then collapse and trim whitespace
+        let displayed_text = itertools::join(selected_option_text.split_whitespace(), " ");
+
+        shadow_tree
+            .selected_option
+            .upcast::<CharacterData>()
+            .SetData(displayed_text.trim().into());
+    }
+
+    pub(crate) fn selection_changed(&self, can_gc: CanGc) {
+        self.update_shadow_tree(can_gc);
+
+        self.upcast::<EventTarget>()
+            .fire_bubbling_event(atom!("change"), can_gc);
+    }
+
+    fn selected_option(&self) -> Option<DomRoot<HTMLOptionElement>> {
+        self.list_of_options().find(|opt_elem| opt_elem.Selected())
+    }
+
+    pub(crate) fn show_menu(&self, can_gc: CanGc) -> Option<usize> {
+        let (ipc_sender, ipc_receiver) = ipc::channel().expect("Failed to create IPC channel!");
+
+        // Collect list of optgroups and options
+        let mut index = 0;
+        let mut embedder_option_from_option = |option: &HTMLOptionElement| {
+            let embedder_option = SelectElementOption {
+                id: index,
+                label: option.displayed_label().into(),
+                is_disabled: option.Disabled(),
+            };
+            index += 1;
+            embedder_option
+        };
+        let options = self
+            .upcast::<Node>()
+            .children()
+            .flat_map(|child| {
+                if let Some(option) = child.downcast::<HTMLOptionElement>() {
+                    return Some(embedder_option_from_option(option).into());
+                }
+
+                if let Some(optgroup) = child.downcast::<HTMLOptGroupElement>() {
+                    let options = optgroup
+                        .upcast::<Node>()
+                        .children()
+                        .flat_map(DomRoot::downcast::<HTMLOptionElement>)
+                        .map(|option| embedder_option_from_option(&option))
+                        .collect();
+                    let label = optgroup.Label().into();
+
+                    return Some(SelectElementOptionOrOptgroup::Optgroup { label, options });
+                }
+
+                None
+            })
+            .collect();
+
+        let rect = self.upcast::<Node>().bounding_content_box_or_zero(can_gc);
+        let rect = Rect::new(
+            Point2D::new(rect.origin.x.to_px(), rect.origin.y.to_px()),
+            Size2D::new(rect.size.width.to_px(), rect.size.height.to_px()),
+        );
+
+        let selected_index = self.list_of_options().position(|option| option.Selected());
+
+        let document = self.owner_document();
+        document.send_to_embedder(EmbedderMsg::ShowSelectElementMenu(
+            document.webview_id(),
+            options,
+            selected_index,
+            DeviceIntRect::from_untyped(&rect.to_box2d()),
+            ipc_sender,
+        ));
+
+        let Ok(response) = ipc_receiver.recv() else {
+            log::error!("Failed to receive response");
+            return None;
+        };
+
+        if response.is_some() && response != selected_index {
+            self.selection_changed(can_gc);
+        }
+
+        response
+    }
 }
 
 impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
-    // https://html.spec.whatwg.org/multipage/#dom-select-add
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-add>
     fn Add(
         &self,
         element: HTMLOptionElementOrHTMLOptGroupElement,
@@ -233,7 +441,7 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
     // https://html.spec.whatwg.org/multipage/#dom-fe-disabled
     make_bool_setter!(SetDisabled, "disabled");
 
-    // https://html.spec.whatwg.org/multipage/#dom-fae-form
+    /// <https://html.spec.whatwg.org/multipage/#dom-fae-form>
     fn GetForm(&self) -> Option<DomRoot<HTMLFormElement>> {
         self.form_owner()
     }
@@ -262,7 +470,7 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
     // https://html.spec.whatwg.org/multipage/#dom-select-size
     make_uint_setter!(SetSize, "size", DEFAULT_SELECT_SIZE);
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-type
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-type>
     fn Type(&self) -> DOMString {
         DOMString::from(if self.Multiple() {
             "select-multiple"
@@ -274,7 +482,7 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
     // https://html.spec.whatwg.org/multipage/#dom-lfe-labels
     make_labels_getter!(Labels, labels_node_list);
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-options
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-options>
     fn Options(&self) -> DomRoot<HTMLOptionsCollection> {
         self.options.or_init(|| {
             let window = self.owner_window();
@@ -282,27 +490,27 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
         })
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-length
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-length>
     fn Length(&self) -> u32 {
         self.Options().Length()
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-length
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-length>
     fn SetLength(&self, length: u32, can_gc: CanGc) {
         self.Options().SetLength(length, can_gc)
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-item
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-item>
     fn Item(&self, index: u32) -> Option<DomRoot<Element>> {
         self.Options().upcast().Item(index)
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-item
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-item>
     fn IndexedGetter(&self, index: u32) -> Option<DomRoot<Element>> {
         self.Options().IndexedGetter(index)
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-setter
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-setter>
     fn IndexedSetter(
         &self,
         index: u32,
@@ -312,33 +520,31 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
         self.Options().IndexedSetter(index, value, can_gc)
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-nameditem
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-nameditem>
     fn NamedItem(&self, name: DOMString) -> Option<DomRoot<HTMLOptionElement>> {
         self.Options()
             .NamedGetter(name)
             .and_then(DomRoot::downcast::<HTMLOptionElement>)
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-remove
+    /// <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
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-remove>
     fn Remove(&self) {
         self.upcast::<Element>().Remove()
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-value
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-value>
     fn Value(&self) -> DOMString {
-        self.list_of_options()
-            .filter(|opt_elem| opt_elem.Selected())
+        self.selected_option()
             .map(|opt_elem| opt_elem.Value())
-            .next()
             .unwrap_or_default()
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-value
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-value>
     fn SetValue(&self, value: DOMString) {
         let mut opt_iter = self.list_of_options();
         // Reset until we find an <option> with a matching value
@@ -359,7 +565,7 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
             .perform_validation_and_update(ValidationFlags::VALUE_MISSING, CanGc::note());
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-selectedindex
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-selectedindex>
     fn SelectedIndex(&self) -> i32 {
         self.list_of_options()
             .enumerate()
@@ -369,8 +575,8 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
             .unwrap_or(-1)
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-select-selectedindex
-    fn SetSelectedIndex(&self, index: i32) {
+    /// <https://html.spec.whatwg.org/multipage/#dom-select-selectedindex>
+    fn SetSelectedIndex(&self, index: i32, can_gc: CanGc) {
         let mut opt_iter = self.list_of_options();
         for opt in opt_iter.by_ref().take(index as usize) {
             opt.set_selectedness(false);
@@ -383,34 +589,37 @@ impl HTMLSelectElementMethods<crate::DomTypeHolder> for HTMLSelectElement {
                 opt.set_selectedness(false);
             }
         }
+
+        // TODO: Track whether the selected element actually changed
+        self.update_shadow_tree(can_gc);
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-cva-willvalidate
+    /// <https://html.spec.whatwg.org/multipage/#dom-cva-willvalidate>
     fn WillValidate(&self) -> bool {
         self.is_instance_validatable()
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-cva-validity
+    /// <https://html.spec.whatwg.org/multipage/#dom-cva-validity>
     fn Validity(&self) -> DomRoot<ValidityState> {
         self.validity_state()
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-cva-checkvalidity
+    /// <https://html.spec.whatwg.org/multipage/#dom-cva-checkvalidity>
     fn CheckValidity(&self, can_gc: CanGc) -> bool {
         self.check_validity(can_gc)
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-cva-reportvalidity
+    /// <https://html.spec.whatwg.org/multipage/#dom-cva-reportvalidity>
     fn ReportValidity(&self, can_gc: CanGc) -> bool {
         self.report_validity(can_gc)
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-cva-validationmessage
+    /// <https://html.spec.whatwg.org/multipage/#dom-cva-validationmessage>
     fn ValidationMessage(&self) -> DOMString {
         self.validation_message()
     }
 
-    // https://html.spec.whatwg.org/multipage/#dom-cva-setcustomvalidity
+    /// <https://html.spec.whatwg.org/multipage/#dom-cva-setcustomvalidity>
     fn SetCustomValidity(&self, error: DOMString) {
         self.validity_state().set_custom_error_message(error);
     }
@@ -478,6 +687,14 @@ impl VirtualMethods for HTMLSelectElement {
         }
     }
 
+    fn children_changed(&self, mutation: &ChildrenMutation) {
+        if let Some(s) = self.super_type() {
+            s.children_changed(mutation);
+        }
+
+        self.update_shadow_tree(CanGc::note());
+    }
+
     fn parse_plain_attribute(&self, local_name: &LocalName, value: DOMString) -> AttrValue {
         match *local_name {
             local_name!("size") => AttrValue::from_u32(value.into(), DEFAULT_SELECT_SIZE),
@@ -540,6 +757,26 @@ impl Validatable for HTMLSelectElement {
     }
 }
 
+impl Activatable for HTMLSelectElement {
+    fn as_element(&self) -> &Element {
+        self.upcast()
+    }
+
+    fn is_instance_activatable(&self) -> bool {
+        true
+    }
+
+    /// <https://html.spec.whatwg.org/multipage/#input-activation-behavior>
+    fn activation_behavior(&self, _event: &Event, _target: &EventTarget, can_gc: CanGc) {
+        let Some(selected_value) = self.show_menu(can_gc) else {
+            // The user did not select a value
+            return;
+        };
+
+        self.SetSelectedIndex(selected_value as i32, can_gc);
+    }
+}
+
 enum Choice3<I, J, K> {
     First(I),
     Second(J),
diff --git a/components/script/dom/validitystate.rs b/components/script/dom/validitystate.rs
index dd258b80e5f..6ce9825947e 100755
--- a/components/script/dom/validitystate.rs
+++ b/components/script/dom/validitystate.rs
@@ -24,7 +24,7 @@ use crate::dom::node::Node;
 use crate::dom::window::Window;
 use crate::script_runtime::CanGc;
 
-// https://html.spec.whatwg.org/multipage/#validity-states
+/// <https://html.spec.whatwg.org/multipage/#validity-states>
 #[derive(Clone, Copy, JSTraceable, MallocSizeOf)]
 pub(crate) struct ValidationFlags(u32);
 
diff --git a/components/script_bindings/codegen/Bindings.conf b/components/script_bindings/codegen/Bindings.conf
index 256097310bb..1c888b27292 100644
--- a/components/script_bindings/codegen/Bindings.conf
+++ b/components/script_bindings/codegen/Bindings.conf
@@ -360,7 +360,7 @@ DOMInterfaces = {
 },
 
 'HTMLOptionsCollection': {
-    'canGc': ['IndexedSetter', 'SetLength']
+    'canGc': ['IndexedSetter', 'SetLength', 'SetSelectedIndex']
 },
 
 'HTMLOutputElement': {
@@ -376,7 +376,7 @@ DOMInterfaces = {
 },
 
 'HTMLSelectElement': {
-    'canGc': ['ReportValidity', 'SetLength', 'IndexedSetter', 'CheckValidity'],
+    'canGc': ['ReportValidity', 'SetLength', 'IndexedSetter', 'CheckValidity', 'SetSelectedIndex'],
 },
 
 'HTMLTableElement': {
diff --git a/components/servo/lib.rs b/components/servo/lib.rs
index ecfcddf85ca..624110cc0ad 100644
--- a/components/servo/lib.rs
+++ b/components/servo/lib.rs
@@ -124,8 +124,8 @@ use crate::responders::ServoErrorChannel;
 pub use crate::servo_delegate::{ServoDelegate, ServoError};
 pub use crate::webview::WebView;
 pub use crate::webview_delegate::{
-    AllowOrDenyRequest, AuthenticationRequest, NavigationRequest, PermissionRequest,
-    WebResourceLoad, WebViewDelegate,
+    AllowOrDenyRequest, AuthenticationRequest, FormControl, NavigationRequest, PermissionRequest,
+    SelectElement, WebResourceLoad, WebViewDelegate,
 };
 
 #[cfg(feature = "webdriver")]
@@ -971,6 +971,20 @@ impl Servo {
                     None => self.delegate().show_notification(notification),
                 }
             },
+            EmbedderMsg::ShowSelectElementMenu(
+                webview_id,
+                options,
+                selected_option,
+                position,
+                ipc_sender,
+            ) => {
+                if let Some(webview) = self.get_webview_handle(webview_id) {
+                    let prompt = SelectElement::new(options, selected_option, position, ipc_sender);
+                    webview
+                        .delegate()
+                        .show_form_control(webview, FormControl::SelectElement(prompt));
+                }
+            },
         }
     }
 }
diff --git a/components/servo/webview_delegate.rs b/components/servo/webview_delegate.rs
index 0af15d7e417..f88c442a26c 100644
--- a/components/servo/webview_delegate.rs
+++ b/components/servo/webview_delegate.rs
@@ -9,8 +9,8 @@ use constellation_traits::ConstellationMsg;
 use embedder_traits::{
     AllowOrDeny, AuthenticationResponse, ContextMenuResult, Cursor, FilterPattern,
     GamepadHapticEffectType, InputMethodType, LoadStatus, MediaSessionEvent, Notification,
-    PermissionFeature, ScreenGeometry, SimpleDialog, WebResourceRequest, WebResourceResponse,
-    WebResourceResponseMsg,
+    PermissionFeature, ScreenGeometry, SelectElementOptionOrOptgroup, SimpleDialog,
+    WebResourceRequest, WebResourceResponse, WebResourceResponseMsg,
 };
 use ipc_channel::ipc::IpcSender;
 use keyboard_types::KeyboardEvent;
@@ -296,6 +296,66 @@ impl Drop for InterceptedWebResourceLoad {
     }
 }
 
+/// The controls of an interactive form element.
+pub enum FormControl {
+    /// The picker of a `<select>` element.
+    SelectElement(SelectElement),
+}
+
+/// Represents a dialog triggered by clicking a `<select>` element.
+pub struct SelectElement {
+    pub(crate) options: Vec<SelectElementOptionOrOptgroup>,
+    pub(crate) selected_option: Option<usize>,
+    pub(crate) position: DeviceIntRect,
+    pub(crate) responder: IpcResponder<Option<usize>>,
+}
+
+impl SelectElement {
+    pub(crate) fn new(
+        options: Vec<SelectElementOptionOrOptgroup>,
+        selected_option: Option<usize>,
+        position: DeviceIntRect,
+        ipc_sender: IpcSender<Option<usize>>,
+    ) -> Self {
+        Self {
+            options,
+            selected_option,
+            position,
+            responder: IpcResponder::new(ipc_sender, None),
+        }
+    }
+
+    /// Return the area occupied by the `<select>` element that triggered the prompt.
+    ///
+    /// The embedder should use this value to position the prompt that is shown to the user.
+    pub fn position(&self) -> DeviceIntRect {
+        self.position
+    }
+
+    /// Consecutive `<option>` elements outside of an `<optgroup>` will be combined
+    /// into a single anonymous group, whose [`label`](SelectElementGroup::label) is `None`.
+    pub fn options(&self) -> &[SelectElementOptionOrOptgroup] {
+        &self.options
+    }
+
+    /// Mark a single option as selected.
+    ///
+    /// If there is already a selected option and the `<select>` element does not
+    /// support selecting multiple options, then the previous option will be unselected.
+    pub fn select(&mut self, id: Option<usize>) {
+        self.selected_option = id;
+    }
+
+    pub fn selected_option(&self) -> Option<usize> {
+        self.selected_option
+    }
+
+    /// Resolve the prompt with the options that have been selected by calling [select] previously.
+    pub fn submit(mut self) {
+        let _ = self.responder.send(self.selected_option);
+    }
+}
+
 pub trait WebViewDelegate {
     /// Get the [`ScreenGeometry`] for this [`WebView`]. If this is unimplemented or returns `None`
     /// the screen will have the size of the [`WebView`]'s `RenderingContext` and `WebView` will be
@@ -449,6 +509,10 @@ pub trait WebViewDelegate {
     /// Request to hide the IME when the editable element is blurred.
     fn hide_ime(&self, _webview: WebView) {}
 
+    /// Request that the embedder show UI elements for form controls that are not integrated
+    /// into page content, such as dropdowns for `<select>` elements.
+    fn show_form_control(&self, _webview: WebView, _form_control: FormControl) {}
+
     /// Request to play a haptic effect on a connected gamepad.
     fn play_gamepad_haptic_effect(
         &self,
diff --git a/components/shared/embedder/lib.rs b/components/shared/embedder/lib.rs
index eb3fcde9a6f..f617b37d705 100644
--- a/components/shared/embedder/lib.rs
+++ b/components/shared/embedder/lib.rs
@@ -223,6 +223,27 @@ pub enum AllowOrDeny {
     Deny,
 }
 
+#[derive(Clone, Debug, Deserialize, Serialize)]
+
+pub struct SelectElementOption {
+    /// A unique identifier for the option that can be used to select it.
+    pub id: usize,
+    /// The label that should be used to display the option to the user.
+    pub label: String,
+    /// Whether or not the option is selectable
+    pub is_disabled: bool,
+}
+
+/// Represents the contents of either an `<option>` or an `<optgroup>` element
+#[derive(Clone, Debug, Deserialize, Serialize)]
+pub enum SelectElementOptionOrOptgroup {
+    Option(SelectElementOption),
+    Optgroup {
+        label: String,
+        options: Vec<SelectElementOption>,
+    },
+}
+
 #[derive(Deserialize, IntoStaticStr, Serialize)]
 pub enum EmbedderMsg {
     /// A status message to be displayed by the browser chrome.
@@ -331,6 +352,16 @@ pub enum EmbedderMsg {
     ShutdownComplete,
     /// Request to display a notification.
     ShowNotification(Option<WebViewId>, Notification),
+    /// Indicates that the user has activated a `<select>` element.
+    ///
+    /// The embedder should respond with the new state of the `<select>` element.
+    ShowSelectElementMenu(
+        WebViewId,
+        Vec<SelectElementOptionOrOptgroup>,
+        Option<usize>,
+        DeviceIntRect,
+        IpcSender<Option<usize>>,
+    ),
 }
 
 impl Debug for EmbedderMsg {
@@ -655,3 +686,9 @@ pub struct ScreenGeometry {
     /// of the `WebView`.
     pub offset: DeviceIntPoint,
 }
+
+impl From<SelectElementOption> for SelectElementOptionOrOptgroup {
+    fn from(value: SelectElementOption) -> Self {
+        Self::Option(value)
+    }
+}
diff --git a/ports/servoshell/desktop/app_state.rs b/ports/servoshell/desktop/app_state.rs
index b9ebf2e7534..3bb381bb1a0 100644
--- a/ports/servoshell/desktop/app_state.rs
+++ b/ports/servoshell/desktop/app_state.rs
@@ -17,9 +17,9 @@ use servo::ipc_channel::ipc::IpcSender;
 use servo::webrender_api::ScrollLocation;
 use servo::webrender_api::units::{DeviceIntPoint, DeviceIntRect, DeviceIntSize};
 use servo::{
-    AllowOrDenyRequest, AuthenticationRequest, FilterPattern, GamepadHapticEffectType, LoadStatus,
-    PermissionRequest, Servo, ServoDelegate, ServoError, SimpleDialog, TouchEventType, WebView,
-    WebViewDelegate,
+    AllowOrDenyRequest, AuthenticationRequest, FilterPattern, FormControl, GamepadHapticEffectType,
+    LoadStatus, PermissionRequest, Servo, ServoDelegate, ServoError, SimpleDialog, TouchEventType,
+    WebView, WebViewDelegate,
 };
 use url::Url;
 
@@ -583,4 +583,19 @@ impl WebViewDelegate for RunningAppState {
     fn hide_ime(&self, _webview: WebView) {
         self.inner().window.hide_ime();
     }
+
+    fn show_form_control(&self, webview: WebView, form_control: FormControl) {
+        if self.servoshell_preferences.headless {
+            return;
+        }
+
+        match form_control {
+            FormControl::SelectElement(prompt) => {
+                // FIXME: Reading the toolbar height is needed here to properly position the select dialog.
+                // But if the toolbar height changes while the dialog is open then the position won't be updated
+                let offset = self.inner().window.toolbar_height();
+                self.add_dialog(webview, Dialog::new_select_element_dialog(prompt, offset));
+            },
+        }
+    }
 }
diff --git a/ports/servoshell/desktop/dialog.rs b/ports/servoshell/desktop/dialog.rs
index 0ff8d4cd900..2bfccb523de 100644
--- a/ports/servoshell/desktop/dialog.rs
+++ b/ports/servoshell/desktop/dialog.rs
@@ -7,11 +7,14 @@ use std::sync::Arc;
 
 use egui::Modal;
 use egui_file_dialog::{DialogState, FileDialog as EguiFileDialog};
+use euclid::Length;
 use log::warn;
 use servo::ipc_channel::ipc::IpcSender;
+use servo::servo_geometry::DeviceIndependentPixel;
 use servo::{
     AlertResponse, AuthenticationRequest, ConfirmResponse, FilterPattern, PermissionRequest,
-    PromptResponse, SimpleDialog,
+    PromptResponse, SelectElement, SelectElementOption, SelectElementOptionOrOptgroup,
+    SimpleDialog,
 };
 
 pub enum Dialog {
@@ -36,6 +39,10 @@ pub enum Dialog {
         selected_device_index: usize,
         response_sender: IpcSender<Option<String>>,
     },
+    SelectElement {
+        maybe_prompt: Option<SelectElement>,
+        toolbar_offset: Length<f32, DeviceIndependentPixel>,
+    },
 }
 
 impl Dialog {
@@ -102,6 +109,16 @@ impl Dialog {
         }
     }
 
+    pub fn new_select_element_dialog(
+        prompt: SelectElement,
+        toolbar_offset: Length<f32, DeviceIndependentPixel>,
+    ) -> Self {
+        Dialog::SelectElement {
+            maybe_prompt: Some(prompt),
+            toolbar_offset,
+        }
+    }
+
     pub fn update(&mut self, ctx: &egui::Context) -> bool {
         match self {
             Dialog::File {
@@ -373,6 +390,101 @@ impl Dialog {
                 });
                 is_open
             },
+            Dialog::SelectElement {
+                maybe_prompt,
+                toolbar_offset,
+            } => {
+                let Some(prompt) = maybe_prompt else {
+                    // Prompt was dismissed, so the dialog should be closed too.
+                    return false;
+                };
+                let mut is_open = true;
+
+                let mut position = prompt.position();
+                position.min.y += toolbar_offset.0 as i32;
+                position.max.y += toolbar_offset.0 as i32;
+                let area = egui::Area::new(egui::Id::new("select-window"))
+                    .fixed_pos(egui::pos2(position.min.x as f32, position.max.y as f32));
+
+                let mut selected_option = prompt.selected_option();
+
+                fn display_option(
+                    ui: &mut egui::Ui,
+                    option: &SelectElementOption,
+                    selected_option: &mut Option<usize>,
+                    is_open: &mut bool,
+                    in_group: bool,
+                ) {
+                    let is_checked =
+                        selected_option.is_some_and(|selected_index| selected_index == option.id);
+
+                    // TODO: Surely there's a better way to align text in a selectable label in egui.
+                    let label_text = if in_group {
+                        format!("   {}", option.label)
+                    } else {
+                        option.label.to_owned()
+                    };
+                    let label = if option.is_disabled {
+                        egui::RichText::new(&label_text).strikethrough()
+                    } else {
+                        egui::RichText::new(&label_text)
+                    };
+                    let clickable_area = ui
+                        .allocate_ui_with_layout(
+                            [ui.available_width(), 0.0].into(),
+                            egui::Layout::top_down_justified(egui::Align::LEFT),
+                            |ui| ui.selectable_label(is_checked, label),
+                        )
+                        .inner;
+
+                    if clickable_area.clicked() && !option.is_disabled {
+                        *selected_option = Some(option.id);
+                        *is_open = false;
+                    }
+
+                    if clickable_area.hovered() && option.is_disabled {
+                        ui.ctx().set_cursor_icon(egui::CursorIcon::NotAllowed);
+                    }
+                }
+
+                let modal = Modal::new("select_element_picker".into()).area(area);
+                modal.show(ctx, |ui| {
+                    for option_or_optgroup in prompt.options() {
+                        match &option_or_optgroup {
+                            SelectElementOptionOrOptgroup::Option(option) => {
+                                display_option(
+                                    ui,
+                                    option,
+                                    &mut selected_option,
+                                    &mut is_open,
+                                    false,
+                                );
+                            },
+                            SelectElementOptionOrOptgroup::Optgroup { label, options } => {
+                                ui.label(egui::RichText::new(label).strong());
+
+                                for option in options {
+                                    display_option(
+                                        ui,
+                                        option,
+                                        &mut selected_option,
+                                        &mut is_open,
+                                        true,
+                                    );
+                                }
+                            },
+                        }
+                    }
+                });
+
+                prompt.select(selected_option);
+
+                if !is_open {
+                    maybe_prompt.take().unwrap().submit();
+                }
+
+                is_open
+            },
         }
     }
 }
diff --git a/resources/servo.css b/resources/servo.css
index fdabeb30d0c..579b5eed5c8 100644
--- a/resources/servo.css
+++ b/resources/servo.css
@@ -87,30 +87,6 @@ input[type="file"] {
   border-style: none;
 }
 
-select {
-  border-style: solid;
-  border-width: 1px;
-  background: white;
-}
-
-select[multiple]              { padding: 0em 0.25em; }
-select:not([multiple])        { padding: 0.25em 0.5em; border-radius: 6px; }
-
-select:not([multiple])::after {
-  content: "";
-  display: inline-block;
-  border-width: 5.2px 3px 0 3px;
-  border-style: solid;
-  border-color: currentcolor transparent transparent transparent;
-  margin-left: 0.5em;
-}
-
-select:not([multiple]) option           { display: none !important; }
-select:not([multiple]) option[selected] { display: inline !important; }
-select[multiple] option                 { display: block !important; }
-select[multiple] option[selected]       { background-color: grey; color: white; }
-select[multiple]:focus option[selected] { background-color: darkblue; }
-
 td[align="left"]    { text-align: left; }
 td[align="center"]  { text-align: center; }
 td[align="right"]   { text-align: right; }
@@ -358,3 +334,12 @@ progress #-servo-progress-bar {
   height: 100%;
   background-color: #7a3;
 }
+
+select {
+  background-color: lightgrey;
+  border-radius: 5px;
+  border: 1px solid gray;
+  padding: 0 0.25em;
+  /* Don't show a text cursor when hovering selected option */
+  cursor: default;
+}
+\ No newline at end of file
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index 437f621c427..5798aa29c28 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -349238,7 +349238,7 @@
       ],
       "the-select-element": {
        "option-add-label-quirks.html": [
-        "2c3c8093e253250f11a7e84a7ba89f3535d2eb20",
+        "f91609afc506b7530c6106bd047eab93b8645aa7",
         [
          null,
          [
diff --git a/tests/wpt/meta/css/css-content/content-none-option.html.ini b/tests/wpt/meta/css/css-content/content-none-option.html.ini
new file mode 100644
index 00000000000..01e09de35f9
--- /dev/null
+++ b/tests/wpt/meta/css/css-content/content-none-option.html.ini
@@ -0,0 +1,2 @@
+[content-none-option.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/css/css-content/content-none-select-1.html.ini b/tests/wpt/meta/css/css-content/content-none-select-1.html.ini
new file mode 100644
index 00000000000..544eeccfe6a
--- /dev/null
+++ b/tests/wpt/meta/css/css-content/content-none-select-1.html.ini
@@ -0,0 +1,2 @@
+[content-none-select-1.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/css/css-content/content-none-select-2.html.ini b/tests/wpt/meta/css/css-content/content-none-select-2.html.ini
new file mode 100644
index 00000000000..c649634ad2a
--- /dev/null
+++ b/tests/wpt/meta/css/css-content/content-none-select-2.html.ini
@@ -0,0 +1,2 @@
+[content-none-select-2.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/html/dom/elements/the-innertext-and-outertext-properties/getter.html.ini b/tests/wpt/meta/html/dom/elements/the-innertext-and-outertext-properties/getter.html.ini
index 37d45a806a3..59e6db4025e 100644
--- a/tests/wpt/meta/html/dom/elements/the-innertext-and-outertext-properties/getter.html.ini
+++ b/tests/wpt/meta/html/dom/elements/the-innertext-and-outertext-properties/getter.html.ini
@@ -28,3 +28,24 @@
 
   [opened <details> content shown ("<div><details open><summary>abc</summary>123")]
     expected: FAIL
+
+  [<select size='1'> contents of options preserved ("<select size='1'><option>abc</option><option>def")]
+    expected: FAIL
+
+  [<select size='2'> contents of options preserved ("<select size='2'><option>abc</option><option>def")]
+    expected: FAIL
+
+  [empty <optgroup> in <select> ("<div>a<select><optgroup></select>bc")]
+    expected: FAIL
+
+  [empty <option> in <select> ("<div>a<select><option></select>bc")]
+    expected: FAIL
+
+  [<optgroup> containing <option> ("<select><optgroup><option>abc</select>")]
+    expected: FAIL
+
+  [<select size='1'> contents of options preserved ("<div><select size='1'><option>abc</option><option>def")]
+    expected: FAIL
+
+  [<select size='2'> contents of options preserved ("<div><select size='2'><option>abc</option><option>def")]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/rendering/replaced-elements/the-option-element/option-label-whitespace.html.ini b/tests/wpt/meta/html/rendering/replaced-elements/the-option-element/option-label-whitespace.html.ini
deleted file mode 100644
index e2463ff1b33..00000000000
--- a/tests/wpt/meta/html/rendering/replaced-elements/the-option-element/option-label-whitespace.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[option-label-whitespace.html]
-  expected: FAIL
diff --git a/tests/wpt/meta/html/rendering/replaced-elements/the-option-element/option-with-br.html.ini b/tests/wpt/meta/html/rendering/replaced-elements/the-option-element/option-with-br.html.ini
deleted file mode 100644
index c511e0c45c5..00000000000
--- a/tests/wpt/meta/html/rendering/replaced-elements/the-option-element/option-with-br.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[option-with-br.html]
-  expected: FAIL
diff --git a/tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-1-block-size-001.html.ini b/tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-1-block-size-001.html.ini
new file mode 100644
index 00000000000..bb0fb8e3daf
--- /dev/null
+++ b/tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-1-block-size-001.html.ini
@@ -0,0 +1,2 @@
+[select-1-block-size-001.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-button-min-height-001.html.ini b/tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-button-min-height-001.html.ini
new file mode 100644
index 00000000000..f6264167495
--- /dev/null
+++ b/tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-button-min-height-001.html.ini
@@ -0,0 +1,2 @@
+[select-button-min-height-001.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-empty.html.ini b/tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-empty.html.ini
new file mode 100644
index 00000000000..06108e541fd
--- /dev/null
+++ b/tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-empty.html.ini
@@ -0,0 +1,2 @@
+[select-empty.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-multiple-re-add-option-via-document-fragment.html.ini b/tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-multiple-re-add-option-via-document-fragment.html.ini
new file mode 100644
index 00000000000..bacaac5e98d
--- /dev/null
+++ b/tests/wpt/meta/html/rendering/replaced-elements/the-select-element/select-multiple-re-add-option-via-document-fragment.html.ini
@@ -0,0 +1,2 @@
+[select-multiple-re-add-option-via-document-fragment.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/html/rendering/widgets/select-wrap-no-spill.optional.html.ini b/tests/wpt/meta/html/rendering/widgets/select-wrap-no-spill.optional.html.ini
deleted file mode 100644
index eb6a7c01377..00000000000
--- a/tests/wpt/meta/html/rendering/widgets/select-wrap-no-spill.optional.html.ini
+++ /dev/null
@@ -1,4 +0,0 @@
-[select-wrap-no-spill.optional.html]
-  [Selected OPTION label with white-space:pre-wrap should not spill out.]
-    expected: FAIL
-
diff --git a/tests/wpt/meta/html/rendering/widgets/the-select-element/option-add-label-quirks.html.ini b/tests/wpt/meta/html/rendering/widgets/the-select-element/option-add-label-quirks.html.ini
deleted file mode 100644
index 0d921218cae..00000000000
--- a/tests/wpt/meta/html/rendering/widgets/the-select-element/option-add-label-quirks.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[option-add-label-quirks.html]
-  expected: FAIL
diff --git a/tests/wpt/meta/html/rendering/widgets/the-select-element/option-checked-styling.html.ini b/tests/wpt/meta/html/rendering/widgets/the-select-element/option-checked-styling.html.ini
deleted file mode 100644
index 0b235897f88..00000000000
--- a/tests/wpt/meta/html/rendering/widgets/the-select-element/option-checked-styling.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[option-checked-styling.html]
-  expected: FAIL
diff --git a/tests/wpt/meta/html/semantics/forms/the-label-element/clicking-interactive-content.html.ini b/tests/wpt/meta/html/semantics/forms/the-label-element/clicking-interactive-content.html.ini
index 58d16f8fd0d..ce397450f85 100644
--- a/tests/wpt/meta/html/semantics/forms/the-label-element/clicking-interactive-content.html.ini
+++ b/tests/wpt/meta/html/semantics/forms/the-label-element/clicking-interactive-content.html.ini
@@ -5,15 +5,9 @@
   [interactive content <input> as first child of <label>]
     expected: FAIL
 
-  [interactive content <select></select> as second child under <label>]
-    expected: FAIL
-
   [interactive content <iframe></iframe> as second child under <label>]
     expected: FAIL
 
-  [interactive content <select></select> as first child of <label>]
-    expected: FAIL
-
   [interactive content <video tabindex=""></video> as second child under <label>]
     expected: FAIL
 
@@ -32,9 +26,6 @@
   [interactive content <object usemap=""></object> as second child under <label>]
     expected: FAIL
 
-  [interactive content <select></select> deeply nested under <label>]
-    expected: FAIL
-
   [interactive content <textarea></textarea> as first child of <label>]
     expected: FAIL
 
@@ -67,4 +58,3 @@
 
   [interactive content <textarea></textarea> as second child under <label>]
     expected: FAIL
-
diff --git a/tests/wpt/meta/html/semantics/forms/the-select-element/customizable-select/closed-listbox-rendering.tentative.html.ini b/tests/wpt/meta/html/semantics/forms/the-select-element/customizable-select/closed-listbox-rendering.tentative.html.ini
deleted file mode 100644
index 39ab3cacbc3..00000000000
--- a/tests/wpt/meta/html/semantics/forms/the-select-element/customizable-select/closed-listbox-rendering.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[closed-listbox-rendering.tentative.html]
-  expected: FAIL
diff --git a/tests/wpt/meta/html/semantics/forms/the-select-element/select-marker-end-aligned.tentative.html.ini b/tests/wpt/meta/html/semantics/forms/the-select-element/select-marker-end-aligned.tentative.html.ini
deleted file mode 100644
index 8e0b14a73e7..00000000000
--- a/tests/wpt/meta/html/semantics/forms/the-select-element/select-marker-end-aligned.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[select-marker-end-aligned.tentative.html]
-  expected: FAIL
diff --git a/tests/wpt/tests/html/rendering/widgets/the-select-element/option-add-label-quirks.html b/tests/wpt/tests/html/rendering/widgets/the-select-element/option-add-label-quirks.html
index 2c3c8093e25..f91609afc50 100644
--- a/tests/wpt/tests/html/rendering/widgets/the-select-element/option-add-label-quirks.html
+++ b/tests/wpt/tests/html/rendering/widgets/the-select-element/option-add-label-quirks.html
@@ -2,7 +2,7 @@
 <title>OPTION's label attribute in SELECT -- Adding a label (quirks)</title>
 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2">
 <link rel="match" href="option-label-ref.html">
-<meta name="assert" content="An option element is expected to be rendered by displaying the element's label.">
+<meta name="assert" content="An option element is expected to be rendered by displaying the element's label when the document is in quirks mode">
 
 <select>
   <option>Element Text</option>
author	Simon Wülker <simon.wuelker@arcor.de>	2025-04-03 14:11:55 +0200
committer	GitHub <noreply@github.com>	2025-04-03 12:11:55 +0000
commit	0e99539dab4c059ba3c3750cfda42e246ce8b4f0 (patch)
tree	a5703fc0ca14d1bc66345b3168d183bab037427a
parent	6e9d01b908b51d3f44f858476acf3af8c1d44289 (diff)
download	servo-0e99539dab4c059ba3c3750cfda42e246ce8b4f0.tar.gz servo-0e99539dab4c059ba3c3750cfda42e246ce8b4f0.zip