script/dom/html/

htmlinputelement.rs

/* 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 https://mozilla.org/MPL/2.0/. */

use std::borrow::Cow;
use std::cell::Cell;
use std::cmp::Ordering;
use std::ops::Range;
use std::path::PathBuf;
use std::ptr::NonNull;
use std::str::FromStr;
use std::{f64, ptr};

use base::generic_channel;
use dom_struct::dom_struct;
use embedder_traits::{
    EmbedderMsg, FilterPattern, FormControl as EmbedderFormControl, InputMethodType, RgbColor,
};
use encoding_rs::Encoding;
use euclid::{Point2D, Rect, Size2D};
use html5ever::{LocalName, Prefix, local_name, ns};
use js::jsapi::{
    ClippedTime, DateGetMsecSinceEpoch, Handle, JS_ClearPendingException, JSObject, NewDateObject,
    NewUCRegExpObject, ObjectIsDate, RegExpFlag_UnicodeSets, RegExpFlags,
};
use js::jsval::UndefinedValue;
use js::rust::wrappers::{CheckRegExpSyntax, ExecuteRegExpNoStatics, ObjectIsRegExp};
use js::rust::{HandleObject, MutableHandleObject};
use net_traits::blob_url_store::get_blob_origin;
use net_traits::filemanager_thread::{FileManagerResult, FileManagerThreadMsg};
use net_traits::{CoreResourceMsg, IpcSend};
use script_bindings::codegen::GenericBindings::CharacterDataBinding::CharacterDataMethods;
use script_bindings::codegen::GenericBindings::DocumentBinding::DocumentMethods;
use servo_config::pref;
use style::attr::AttrValue;
use style::selector_parser::PseudoElement;
use style::str::{split_commas, str_join};
use stylo_atoms::Atom;
use stylo_dom::ElementState;
use time::{Month, OffsetDateTime, Time};
use unicode_bidi::{BidiClass, bidi_class};
use url::Url;
use webrender_api::units::DeviceIntRect;

use crate::clipboard_provider::EmbedderClipboardProvider;
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::EventBinding::EventMethods;
use crate::dom::bindings::codegen::Bindings::FileListBinding::FileListMethods;
use crate::dom::bindings::codegen::Bindings::HTMLFormElementBinding::SelectionMode;
use crate::dom::bindings::codegen::Bindings::HTMLInputElementBinding::HTMLInputElementMethods;
use crate::dom::bindings::codegen::Bindings::NodeBinding::{GetRootNodeOptions, NodeMethods};
use crate::dom::bindings::error::{Error, ErrorResult};
use crate::dom::bindings::inheritance::Castable;
use crate::dom::bindings::reflector::DomGlobal;
use crate::dom::bindings::root::{Dom, DomRoot, LayoutDom, MutNullableDom};
use crate::dom::bindings::str::{DOMString, FromInputValueString, ToInputValueString, USVString};
use crate::dom::clipboardevent::ClipboardEvent;
use crate::dom::compositionevent::CompositionEvent;
use crate::dom::document::Document;
use crate::dom::element::{AttributeMutation, Element, LayoutElementHelpers};
use crate::dom::event::{Event, EventBubbles, EventCancelable};
use crate::dom::eventtarget::EventTarget;
use crate::dom::file::File;
use crate::dom::filelist::{FileList, LayoutFileListHelpers};
use crate::dom::globalscope::GlobalScope;
use crate::dom::html::htmldatalistelement::HTMLDataListElement;
use crate::dom::html::htmldivelement::HTMLDivElement;
use crate::dom::html::htmlelement::HTMLElement;
use crate::dom::html::htmlfieldsetelement::HTMLFieldSetElement;
use crate::dom::html::htmlformelement::{
    FormControl, FormDatum, FormDatumValue, FormSubmitterElement, HTMLFormElement, ResetFrom,
    SubmittedFrom,
};
use crate::dom::keyboardevent::KeyboardEvent;
use crate::dom::mouseevent::MouseEvent;
use crate::dom::node::{
    BindContext, CloneChildrenFlag, Node, NodeDamage, NodeTraits, ShadowIncluding, UnbindContext,
};
use crate::dom::nodelist::NodeList;
use crate::dom::shadowroot::ShadowRoot;
use crate::dom::textcontrol::{TextControlElement, TextControlSelection};
use crate::dom::types::CharacterData;
use crate::dom::validation::{Validatable, is_barred_by_datalist_ancestor};
use crate::dom::validitystate::{ValidationFlags, ValidityState};
use crate::dom::virtualmethods::VirtualMethods;
use crate::realms::enter_realm;
use crate::script_runtime::{CanGc, JSContext as SafeJSContext};
use crate::textinput::KeyReaction::{
    DispatchInput, Nothing, RedrawSelection, TriggerDefaultAction,
};
use crate::textinput::Lines::Single;
use crate::textinput::{
    ClipboardEventReaction, Direction, SelectionDirection, TextInput, UTF8Bytes, UTF16CodeUnits,
};

const DEFAULT_SUBMIT_VALUE: &str = "Submit";
const DEFAULT_RESET_VALUE: &str = "Reset";
const PASSWORD_REPLACEMENT_CHAR: char = '●';
const DEFAULT_FILE_INPUT_VALUE: &str = "No file chosen";

#[derive(Clone, JSTraceable, MallocSizeOf)]
#[cfg_attr(crown, crown::unrooted_must_root_lint::must_root)]
/// Contains reference to text control inner editor and placeholder container element in the UA
/// shadow tree for `text`, `password`, `url`, `tel`, and `email` input. The following is the
/// structure of the shadow tree.
///
/// ```
/// <input type="text">
///     #shadow-root
///         <div id="inner-container">
///             <div id="input-editor"></div>
///             <div id="input-placeholder"></div>
///         </div>
/// </input>
/// ```
///
// TODO(stevennovaryo): We are trying to use CSS to mimic Chrome and Firefox's layout for the <input> element.
//                      But, this could be slower in performance and does have some discrepancies. For example,
//                      they would try to vertically align <input> text baseline with the baseline of other
//                      TextNode within an inline flow. Another example is the horizontal scroll.
// FIXME(#38263): Refactor these logics into a TextControl wrapper that would decouple all textual input.
struct InputTypeTextShadowTree {
    inner_container: Dom<HTMLDivElement>,
    text_container: Dom<HTMLDivElement>,
    placeholder_container: DomRefCell<Option<Dom<HTMLDivElement>>>,
}

impl InputTypeTextShadowTree {
    /// Initialize the placeholder container only when it is necessary. This would help the performance of input
    /// element with shadow dom that is quite bulky.
    fn init_placeholder_container_if_necessary(&self, host: &HTMLInputElement, can_gc: CanGc) {
        // If the container is already initialized or there is no placeholder then it is not necessary to
        // initialize a new placeholder container.
        if self.placeholder_container.borrow().is_some() || host.placeholder.borrow().is_empty() {
            return;
        }

        *self.placeholder_container.borrow_mut() = Some(
            create_ua_widget_div_with_text_node(
                &host.owner_document(),
                self.inner_container.upcast::<Node>(),
                PseudoElement::Placeholder,
                true,
                can_gc,
            )
            .as_traced(),
        );
    }
}

#[derive(Clone, JSTraceable, MallocSizeOf)]
#[cfg_attr(crown, crown::unrooted_must_root_lint::must_root)]
/// Contains references to the elements in the shadow tree for `<input type=color>`.
///
/// The shadow tree consists of a single div with the currently selected color as
/// the background.
struct InputTypeColorShadowTree {
    color_value: Dom<HTMLDivElement>,
}

#[derive(Clone, JSTraceable, MallocSizeOf)]
#[cfg_attr(crown, crown::unrooted_must_root_lint::must_root)]
#[non_exhaustive]
enum ShadowTree {
    Text(InputTypeTextShadowTree),
    Color(InputTypeColorShadowTree),
    // TODO: Add shadow trees for other input types (range etc) here
}

/// Create a div element with a text node within an UA Widget and either append or prepend it to
/// the designated parent. This is used to create the text container for input elements.
fn create_ua_widget_div_with_text_node(
    document: &Document,
    parent: &Node,
    implemented_pseudo: PseudoElement,
    as_first_child: bool,
    can_gc: CanGc,
) -> DomRoot<HTMLDivElement> {
    let el = HTMLDivElement::new(local_name!("div"), None, document, None, can_gc);
    parent
        .upcast::<Node>()
        .AppendChild(el.upcast::<Node>(), can_gc)
        .unwrap();
    el.upcast::<Node>()
        .set_implemented_pseudo_element(implemented_pseudo);
    let text_node = document.CreateTextNode("".into(), can_gc);

    if !as_first_child {
        el.upcast::<Node>()
            .AppendChild(text_node.upcast::<Node>(), can_gc)
            .unwrap();
    } else {
        el.upcast::<Node>()
            .InsertBefore(
                text_node.upcast::<Node>(),
                el.upcast::<Node>().GetFirstChild().as_deref(),
                can_gc,
            )
            .unwrap();
    }
    el
}

/// <https://html.spec.whatwg.org/multipage/#attr-input-type>
#[derive(Clone, Copy, Debug, Default, JSTraceable, PartialEq)]
#[allow(dead_code)]
#[derive(MallocSizeOf)]
pub(crate) enum InputType {
    /// <https://html.spec.whatwg.org/multipage/#button-state-(type=button)>
    Button,

    /// <https://html.spec.whatwg.org/multipage/#checkbox-state-(type=checkbox)>
    Checkbox,

    /// <https://html.spec.whatwg.org/multipage/#color-state-(type=color)>
    Color,

    /// <https://html.spec.whatwg.org/multipage/#date-state-(type=date)>
    Date,

    /// <https://html.spec.whatwg.org/multipage/#local-date-and-time-state-(type=datetime-local)>
    DatetimeLocal,

    /// <https://html.spec.whatwg.org/multipage/#email-state-(type=email)>
    Email,

    /// <https://html.spec.whatwg.org/multipage/#file-upload-state-(type=file)>
    File,

    /// <https://html.spec.whatwg.org/multipage/#hidden-state-(type=hidden)>
    Hidden,

    /// <https://html.spec.whatwg.org/multipage/#image-button-state-(type=image)>
    Image,

    /// <https://html.spec.whatwg.org/multipage/#month-state-(type=month)>
    Month,

    /// <https://html.spec.whatwg.org/multipage/#number-state-(type=number)>
    Number,

    /// <https://html.spec.whatwg.org/multipage/#password-state-(type=password)>
    Password,

    /// <https://html.spec.whatwg.org/multipage/#radio-button-state-(type=radio)>
    Radio,

    /// <https://html.spec.whatwg.org/multipage/#range-state-(type=range)>
    Range,

    /// <https://html.spec.whatwg.org/multipage/#reset-button-state-(type=reset)>
    Reset,

    /// <https://html.spec.whatwg.org/multipage/#text-(type=text)-state-and-search-state-(type=search)>
    Search,

    /// <https://html.spec.whatwg.org/multipage/#submit-button-state-(type=submit)>
    Submit,

    /// <https://html.spec.whatwg.org/multipage/#telephone-state-(type=tel)>
    Tel,

    /// <https://html.spec.whatwg.org/multipage/#text-(type=text)-state-and-search-state-(type=search)>
    #[default]
    Text,

    /// <https://html.spec.whatwg.org/multipage/#time-state-(type=time)>
    Time,

    /// <https://html.spec.whatwg.org/multipage/#url-state-(type=url)>
    Url,

    /// <https://html.spec.whatwg.org/multipage/#week-state-(type=week)>
    Week,
}

impl InputType {
    /// Defines which input type that should perform like a text input,
    /// specifically when it is interacting with JS. Note that Password
    /// is not included here since it is handled slightly differently,
    /// with placeholder characters shown rather than the underlying value.
    pub(crate) fn is_textual(&self) -> bool {
        matches!(
            *self,
            InputType::Date |
                InputType::DatetimeLocal |
                InputType::Email |
                InputType::Hidden |
                InputType::Month |
                InputType::Number |
                InputType::Range |
                InputType::Search |
                InputType::Tel |
                InputType::Text |
                InputType::Time |
                InputType::Url |
                InputType::Week
        )
    }

    fn is_textual_or_password(&self) -> bool {
        self.is_textual() || *self == InputType::Password
    }

    // https://html.spec.whatwg.org/multipage/#has-a-periodic-domain
    fn has_periodic_domain(&self) -> bool {
        *self == InputType::Time
    }

    fn as_str(&self) -> &str {
        match *self {
            InputType::Button => "button",
            InputType::Checkbox => "checkbox",
            InputType::Color => "color",
            InputType::Date => "date",
            InputType::DatetimeLocal => "datetime-local",
            InputType::Email => "email",
            InputType::File => "file",
            InputType::Hidden => "hidden",
            InputType::Image => "image",
            InputType::Month => "month",
            InputType::Number => "number",
            InputType::Password => "password",
            InputType::Radio => "radio",
            InputType::Range => "range",
            InputType::Reset => "reset",
            InputType::Search => "search",
            InputType::Submit => "submit",
            InputType::Tel => "tel",
            InputType::Text => "text",
            InputType::Time => "time",
            InputType::Url => "url",
            InputType::Week => "week",
        }
    }

    pub(crate) fn as_ime_type(&self) -> Option<InputMethodType> {
        match *self {
            InputType::Color => Some(InputMethodType::Color),
            InputType::Date => Some(InputMethodType::Date),
            InputType::DatetimeLocal => Some(InputMethodType::DatetimeLocal),
            InputType::Email => Some(InputMethodType::Email),
            InputType::Month => Some(InputMethodType::Month),
            InputType::Number => Some(InputMethodType::Number),
            InputType::Password => Some(InputMethodType::Password),
            InputType::Search => Some(InputMethodType::Search),
            InputType::Tel => Some(InputMethodType::Tel),
            InputType::Text => Some(InputMethodType::Text),
            InputType::Time => Some(InputMethodType::Time),
            InputType::Url => Some(InputMethodType::Url),
            InputType::Week => Some(InputMethodType::Week),
            _ => None,
        }
    }
}

impl From<&Atom> for InputType {
    fn from(value: &Atom) -> InputType {
        match value.to_ascii_lowercase() {
            atom!("button") => InputType::Button,
            atom!("checkbox") => InputType::Checkbox,
            atom!("color") => InputType::Color,
            atom!("date") => InputType::Date,
            atom!("datetime-local") => InputType::DatetimeLocal,
            atom!("email") => InputType::Email,
            atom!("file") => InputType::File,
            atom!("hidden") => InputType::Hidden,
            atom!("image") => InputType::Image,
            atom!("month") => InputType::Month,
            atom!("number") => InputType::Number,
            atom!("password") => InputType::Password,
            atom!("radio") => InputType::Radio,
            atom!("range") => InputType::Range,
            atom!("reset") => InputType::Reset,
            atom!("search") => InputType::Search,
            atom!("submit") => InputType::Submit,
            atom!("tel") => InputType::Tel,
            atom!("text") => InputType::Text,
            atom!("time") => InputType::Time,
            atom!("url") => InputType::Url,
            atom!("week") => InputType::Week,
            _ => Self::default(),
        }
    }
}

#[derive(Debug, PartialEq)]
enum ValueMode {
    /// <https://html.spec.whatwg.org/multipage/#dom-input-value-value>
    Value,

    /// <https://html.spec.whatwg.org/multipage/#dom-input-value-default>
    Default,

    /// <https://html.spec.whatwg.org/multipage/#dom-input-value-default-on>
    DefaultOn,

    /// <https://html.spec.whatwg.org/multipage/#dom-input-value-filename>
    Filename,
}

#[derive(Debug, PartialEq)]
enum StepDirection {
    Up,
    Down,
}

#[dom_struct]
pub(crate) struct HTMLInputElement {
    htmlelement: HTMLElement,
    input_type: Cell<InputType>,

    /// <https://html.spec.whatwg.org/multipage/#concept-input-checked-dirty-flag>
    checked_changed: Cell<bool>,
    placeholder: DomRefCell<DOMString>,
    size: Cell<u32>,
    maxlength: Cell<i32>,
    minlength: Cell<i32>,
    #[no_trace]
    textinput: DomRefCell<TextInput<EmbedderClipboardProvider>>,
    // https://html.spec.whatwg.org/multipage/#concept-input-value-dirty-flag
    value_dirty: Cell<bool>,
    // not specified explicitly, but implied by the fact that sanitization can't
    // happen until after all of step/min/max/value content attributes have
    // been added
    sanitization_flag: Cell<bool>,

    filelist: MutNullableDom<FileList>,
    form_owner: MutNullableDom<HTMLFormElement>,
    labels_node_list: MutNullableDom<NodeList>,
    validity_state: MutNullableDom<ValidityState>,
    shadow_tree: DomRefCell<Option<ShadowTree>>,
}

#[derive(JSTraceable)]
pub(crate) struct InputActivationState {
    indeterminate: bool,
    checked: bool,
    checked_radio: Option<DomRoot<HTMLInputElement>>,
    // In case the type changed
    old_type: InputType,
    // was_mutable is implied: pre-activation would return None if it wasn't
}

static DEFAULT_INPUT_SIZE: u32 = 20;
static DEFAULT_MAX_LENGTH: i32 = -1;
static DEFAULT_MIN_LENGTH: i32 = -1;

#[allow(non_snake_case)]
impl HTMLInputElement {
    fn new_inherited(
        local_name: LocalName,
        prefix: Option<Prefix>,
        document: &Document,
    ) -> HTMLInputElement {
        let constellation_sender = document
            .window()
            .as_global_scope()
            .script_to_constellation_chan()
            .clone();
        HTMLInputElement {
            htmlelement: HTMLElement::new_inherited_with_state(
                ElementState::ENABLED | ElementState::READWRITE,
                local_name,
                prefix,
                document,
            ),
            input_type: Cell::new(Default::default()),
            placeholder: DomRefCell::new(DOMString::new()),
            checked_changed: Cell::new(false),
            maxlength: Cell::new(DEFAULT_MAX_LENGTH),
            minlength: Cell::new(DEFAULT_MIN_LENGTH),
            size: Cell::new(DEFAULT_INPUT_SIZE),
            textinput: DomRefCell::new(TextInput::new(
                Single,
                DOMString::new(),
                EmbedderClipboardProvider {
                    constellation_sender,
                    webview_id: document.webview_id(),
                },
                None,
                None,
                SelectionDirection::None,
            )),
            value_dirty: Cell::new(false),
            sanitization_flag: Cell::new(true),
            filelist: MutNullableDom::new(None),
            form_owner: Default::default(),
            labels_node_list: MutNullableDom::new(None),
            validity_state: Default::default(),
            shadow_tree: Default::default(),
        }
    }

    #[cfg_attr(crown, allow(crown::unrooted_must_root))]
    pub(crate) fn new(
        local_name: LocalName,
        prefix: Option<Prefix>,
        document: &Document,
        proto: Option<HandleObject>,
        can_gc: CanGc,
    ) -> DomRoot<HTMLInputElement> {
        Node::reflect_node_with_proto(
            Box::new(HTMLInputElement::new_inherited(
                local_name, prefix, document,
            )),
            document,
            proto,
            can_gc,
        )
    }

    pub(crate) fn auto_directionality(&self) -> Option<String> {
        match self.input_type() {
            InputType::Text | InputType::Search | InputType::Url | InputType::Email => {
                let value: String = self.Value().to_string();
                Some(HTMLInputElement::directionality_from_value(&value))
            },
            _ => None,
        }
    }

    pub(crate) fn directionality_from_value(value: &str) -> String {
        if HTMLInputElement::is_first_strong_character_rtl(value) {
            "rtl".to_owned()
        } else {
            "ltr".to_owned()
        }
    }

    fn is_first_strong_character_rtl(value: &str) -> bool {
        for ch in value.chars() {
            return match bidi_class(ch) {
                BidiClass::L => false,
                BidiClass::AL => true,
                BidiClass::R => true,
                _ => continue,
            };
        }
        false
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-value
    // https://html.spec.whatwg.org/multipage/#concept-input-apply
    fn value_mode(&self) -> ValueMode {
        match self.input_type() {
            InputType::Submit |
            InputType::Reset |
            InputType::Button |
            InputType::Image |
            InputType::Hidden => ValueMode::Default,

            InputType::Checkbox | InputType::Radio => ValueMode::DefaultOn,

            InputType::Color |
            InputType::Date |
            InputType::DatetimeLocal |
            InputType::Email |
            InputType::Month |
            InputType::Number |
            InputType::Password |
            InputType::Range |
            InputType::Search |
            InputType::Tel |
            InputType::Text |
            InputType::Time |
            InputType::Url |
            InputType::Week => ValueMode::Value,

            InputType::File => ValueMode::Filename,
        }
    }

    #[inline]
    pub(crate) fn input_type(&self) -> InputType {
        self.input_type.get()
    }

    /// <https://w3c.github.io/webdriver/#dfn-non-typeable-form-control>
    pub(crate) fn is_nontypeable(&self) -> bool {
        matches!(
            self.input_type(),
            InputType::Button |
                InputType::Checkbox |
                InputType::Color |
                InputType::File |
                InputType::Hidden |
                InputType::Image |
                InputType::Radio |
                InputType::Range |
                InputType::Reset |
                InputType::Submit
        )
    }

    #[inline]
    pub(crate) fn is_submit_button(&self) -> bool {
        let input_type = self.input_type.get();
        input_type == InputType::Submit || input_type == InputType::Image
    }

    pub(crate) fn disable_sanitization(&self) {
        self.sanitization_flag.set(false);
    }

    pub(crate) fn enable_sanitization(&self) {
        self.sanitization_flag.set(true);
        let mut textinput = self.textinput.borrow_mut();
        let mut value = textinput.single_line_content().clone();
        self.sanitize_value(&mut value);
        textinput.set_content(value);
        self.upcast::<Node>().dirty(NodeDamage::Other);
    }

    fn does_minmaxlength_apply(&self) -> bool {
        matches!(
            self.input_type(),
            InputType::Text |
                InputType::Search |
                InputType::Url |
                InputType::Tel |
                InputType::Email |
                InputType::Password
        )
    }

    fn does_pattern_apply(&self) -> bool {
        matches!(
            self.input_type(),
            InputType::Text |
                InputType::Search |
                InputType::Url |
                InputType::Tel |
                InputType::Email |
                InputType::Password
        )
    }

    fn does_multiple_apply(&self) -> bool {
        self.input_type() == InputType::Email
    }

    // valueAsNumber, step, min, and max all share the same set of
    // input types they apply to
    fn does_value_as_number_apply(&self) -> bool {
        matches!(
            self.input_type(),
            InputType::Date |
                InputType::Month |
                InputType::Week |
                InputType::Time |
                InputType::DatetimeLocal |
                InputType::Number |
                InputType::Range
        )
    }

    fn does_value_as_date_apply(&self) -> bool {
        matches!(
            self.input_type(),
            InputType::Date | InputType::Month | InputType::Week | InputType::Time
        )
    }

    // https://html.spec.whatwg.org/multipage#concept-input-step
    fn allowed_value_step(&self) -> Option<f64> {
        if let Some(attr) = self
            .upcast::<Element>()
            .get_attribute(&ns!(), &local_name!("step"))
        {
            if let Some(step) =
                DOMString::from(attr.summarize().value).parse_floating_point_number()
            {
                if step > 0.0 {
                    return Some(step * self.step_scale_factor());
                }
            }
        }
        self.default_step()
            .map(|step| step * self.step_scale_factor())
    }

    // https://html.spec.whatwg.org/multipage#concept-input-min
    fn minimum(&self) -> Option<f64> {
        if let Some(attr) = self
            .upcast::<Element>()
            .get_attribute(&ns!(), &local_name!("min"))
        {
            if let Some(min) =
                self.convert_string_to_number(&DOMString::from(attr.summarize().value))
            {
                return Some(min);
            }
        }
        self.default_minimum()
    }

    // https://html.spec.whatwg.org/multipage#concept-input-max
    fn maximum(&self) -> Option<f64> {
        if let Some(attr) = self
            .upcast::<Element>()
            .get_attribute(&ns!(), &local_name!("max"))
        {
            if let Some(max) =
                self.convert_string_to_number(&DOMString::from(attr.summarize().value))
            {
                return Some(max);
            }
        }
        self.default_maximum()
    }

    // when allowed_value_step and minimum both exist, this is the smallest
    // value >= minimum that lies on an integer step
    fn stepped_minimum(&self) -> Option<f64> {
        match (self.minimum(), self.allowed_value_step()) {
            (Some(min), Some(allowed_step)) => {
                let step_base = self.step_base();
                // how many steps is min from step_base?
                let nsteps = (min - step_base) / allowed_step;
                // count that many integer steps, rounded +, from step_base
                Some(step_base + (allowed_step * nsteps.ceil()))
            },
            (_, _) => None,
        }
    }

    // when allowed_value_step and maximum both exist, this is the smallest
    // value <= maximum that lies on an integer step
    fn stepped_maximum(&self) -> Option<f64> {
        match (self.maximum(), self.allowed_value_step()) {
            (Some(max), Some(allowed_step)) => {
                let step_base = self.step_base();
                // how many steps is max from step_base?
                let nsteps = (max - step_base) / allowed_step;
                // count that many integer steps, rounded -, from step_base
                Some(step_base + (allowed_step * nsteps.floor()))
            },
            (_, _) => None,
        }
    }

    // https://html.spec.whatwg.org/multipage#concept-input-min-default
    fn default_minimum(&self) -> Option<f64> {
        match self.input_type() {
            InputType::Range => Some(0.0),
            _ => None,
        }
    }

    // https://html.spec.whatwg.org/multipage#concept-input-max-default
    fn default_maximum(&self) -> Option<f64> {
        match self.input_type() {
            InputType::Range => Some(100.0),
            _ => None,
        }
    }

    // https://html.spec.whatwg.org/multipage#concept-input-value-default-range
    fn default_range_value(&self) -> f64 {
        let min = self.minimum().unwrap_or(0.0);
        let max = self.maximum().unwrap_or(100.0);
        if max < min {
            min
        } else {
            min + (max - min) * 0.5
        }
    }

    // https://html.spec.whatwg.org/multipage#concept-input-step-default
    fn default_step(&self) -> Option<f64> {
        match self.input_type() {
            InputType::Date => Some(1.0),
            InputType::Month => Some(1.0),
            InputType::Week => Some(1.0),
            InputType::Time => Some(60.0),
            InputType::DatetimeLocal => Some(60.0),
            InputType::Number => Some(1.0),
            InputType::Range => Some(1.0),
            _ => None,
        }
    }

    // https://html.spec.whatwg.org/multipage#concept-input-step-scale
    fn step_scale_factor(&self) -> f64 {
        match self.input_type() {
            InputType::Date => 86400000.0,
            InputType::Month => 1.0,
            InputType::Week => 604800000.0,
            InputType::Time => 1000.0,
            InputType::DatetimeLocal => 1000.0,
            InputType::Number => 1.0,
            InputType::Range => 1.0,
            _ => unreachable!(),
        }
    }

    // https://html.spec.whatwg.org/multipage#concept-input-min-zero
    fn step_base(&self) -> f64 {
        if let Some(attr) = self
            .upcast::<Element>()
            .get_attribute(&ns!(), &local_name!("min"))
        {
            let minstr = &DOMString::from(attr.summarize().value);
            if let Some(min) = self.convert_string_to_number(minstr) {
                return min;
            }
        }
        if let Some(attr) = self
            .upcast::<Element>()
            .get_attribute(&ns!(), &local_name!("value"))
        {
            if let Some(value) =
                self.convert_string_to_number(&DOMString::from(attr.summarize().value))
            {
                return value;
            }
        }
        self.default_step_base().unwrap_or(0.0)
    }

    // https://html.spec.whatwg.org/multipage#concept-input-step-default-base
    fn default_step_base(&self) -> Option<f64> {
        match self.input_type() {
            InputType::Week => Some(-259200000.0),
            _ => None,
        }
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-stepdown
    // https://html.spec.whatwg.org/multipage/#dom-input-stepup
    fn step_up_or_down(&self, n: i32, dir: StepDirection, can_gc: CanGc) -> ErrorResult {
        // Step 1
        if !self.does_value_as_number_apply() {
            return Err(Error::InvalidState);
        }
        let step_base = self.step_base();
        // Step 2
        let allowed_value_step = match self.allowed_value_step() {
            Some(avs) => avs,
            None => return Err(Error::InvalidState),
        };
        let minimum = self.minimum();
        let maximum = self.maximum();
        if let (Some(min), Some(max)) = (minimum, maximum) {
            // Step 3
            if min > max {
                return Ok(());
            }
            // Step 4
            if let Some(smin) = self.stepped_minimum() {
                if smin > max {
                    return Ok(());
                }
            }
        }
        // Step 5
        let mut value: f64 = self.convert_string_to_number(&self.Value()).unwrap_or(0.0);

        // Step 6
        let valueBeforeStepping = value;

        // Step 7
        if (value - step_base) % allowed_value_step != 0.0 {
            value = match dir {
                StepDirection::Down =>
                // step down a fractional step to be on a step multiple
                {
                    let intervals_from_base = ((value - step_base) / allowed_value_step).floor();
                    intervals_from_base * allowed_value_step + step_base
                },
                StepDirection::Up =>
                // step up a fractional step to be on a step multiple
                {
                    let intervals_from_base = ((value - step_base) / allowed_value_step).ceil();
                    intervals_from_base * allowed_value_step + step_base
                },
            };
        } else {
            value += match dir {
                StepDirection::Down => -f64::from(n) * allowed_value_step,
                StepDirection::Up => f64::from(n) * allowed_value_step,
            };
        }

        // Step 8
        if let Some(min) = minimum {
            if value < min {
                value = self.stepped_minimum().unwrap_or(value);
            }
        }

        // Step 9
        if let Some(max) = maximum {
            if value > max {
                value = self.stepped_maximum().unwrap_or(value);
            }
        }

        // Step 10
        match dir {
            StepDirection::Down => {
                if value > valueBeforeStepping {
                    return Ok(());
                }
            },
            StepDirection::Up => {
                if value < valueBeforeStepping {
                    return Ok(());
                }
            },
        }

        // Step 11
        self.SetValueAsNumber(value, can_gc)
    }

    // https://html.spec.whatwg.org/multipage/#concept-input-list
    fn suggestions_source_element(&self) -> Option<DomRoot<HTMLDataListElement>> {
        let list_string = self
            .upcast::<Element>()
            .get_string_attribute(&local_name!("list"));
        if list_string.is_empty() {
            return None;
        }
        let ancestor = self
            .upcast::<Node>()
            .GetRootNode(&GetRootNodeOptions::empty());
        let first_with_id = &ancestor
            .traverse_preorder(ShadowIncluding::No)
            .find(|node| {
                node.downcast::<Element>()
                    .is_some_and(|e| e.Id() == list_string)
            });
        first_with_id
            .as_ref()
            .and_then(|el| el.downcast::<HTMLDataListElement>())
            .map(DomRoot::from_ref)
    }

    /// <https://html.spec.whatwg.org/multipage/#suffering-from-being-missing>
    fn suffers_from_being_missing(&self, value: &DOMString) -> bool {
        match self.input_type() {
            // https://html.spec.whatwg.org/multipage/#checkbox-state-(type%3Dcheckbox)%3Asuffering-from-being-missing
            InputType::Checkbox => self.Required() && !self.Checked(),
            // https://html.spec.whatwg.org/multipage/#radio-button-state-(type%3Dradio)%3Asuffering-from-being-missing
            InputType::Radio => {
                if self.radio_group_name().is_none() {
                    return false;
                }
                let mut is_required = self.Required();
                let mut is_checked = self.Checked();
                let root = self
                    .upcast::<Node>()
                    .GetRootNode(&GetRootNodeOptions::empty());
                let form = self.form_owner();
                for other in radio_group_iter(
                    self,
                    self.radio_group_name().as_ref(),
                    form.as_deref(),
                    &root,
                ) {
                    is_required = is_required || other.Required();
                    is_checked = is_checked || other.Checked();
                }
                is_required && !is_checked
            },
            // https://html.spec.whatwg.org/multipage/#file-upload-state-(type%3Dfile)%3Asuffering-from-being-missing
            InputType::File => {
                self.Required() && self.filelist.get().is_none_or(|files| files.Length() == 0)
            },
            // https://html.spec.whatwg.org/multipage/#the-required-attribute%3Asuffering-from-being-missing
            _ => {
                self.Required() &&
                    self.value_mode() == ValueMode::Value &&
                    self.is_mutable() &&
                    value.is_empty()
            },
        }
    }

    // https://html.spec.whatwg.org/multipage/#suffering-from-a-type-mismatch
    fn suffers_from_type_mismatch(&self, value: &DOMString) -> bool {
        if value.is_empty() {
            return false;
        }

        match self.input_type() {
            // https://html.spec.whatwg.org/multipage/#url-state-(type%3Durl)%3Asuffering-from-a-type-mismatch
            InputType::Url => Url::parse(value).is_err(),
            // https://html.spec.whatwg.org/multipage/#e-mail-state-(type%3Demail)%3Asuffering-from-a-type-mismatch
            // https://html.spec.whatwg.org/multipage/#e-mail-state-(type%3Demail)%3Asuffering-from-a-type-mismatch-2
            InputType::Email => {
                if self.Multiple() {
                    !split_commas(value).all(|string| string.is_valid_email_address_string())
                } else {
                    !value.str().is_valid_email_address_string()
                }
            },
            // Other input types don't suffer from type mismatch
            _ => false,
        }
    }

    // https://html.spec.whatwg.org/multipage/#suffering-from-a-pattern-mismatch
    fn suffers_from_pattern_mismatch(&self, value: &DOMString) -> bool {
        // https://html.spec.whatwg.org/multipage/#the-pattern-attribute%3Asuffering-from-a-pattern-mismatch
        // https://html.spec.whatwg.org/multipage/#the-pattern-attribute%3Asuffering-from-a-pattern-mismatch-2
        let pattern_str = self.Pattern();
        if value.is_empty() || pattern_str.is_empty() || !self.does_pattern_apply() {
            return false;
        }

        // Rust's regex is not compatible, we need to use mozjs RegExp.
        let cx = GlobalScope::get_cx();
        let _ac = enter_realm(self);
        rooted!(in(*cx) let mut pattern = ptr::null_mut::<JSObject>());

        if compile_pattern(cx, &pattern_str, pattern.handle_mut()) {
            if self.Multiple() && self.does_multiple_apply() {
                !split_commas(value)
                    .all(|s| matches_js_regex(cx, pattern.handle(), s).unwrap_or(true))
            } else {
                !matches_js_regex(cx, pattern.handle(), value).unwrap_or(true)
            }
        } else {
            // Element doesn't suffer from pattern mismatch if pattern is invalid.
            false
        }
    }

    // https://html.spec.whatwg.org/multipage/#suffering-from-bad-input
    fn suffers_from_bad_input(&self, value: &DOMString) -> bool {
        if value.is_empty() {
            return false;
        }

        match self.input_type() {
            // https://html.spec.whatwg.org/multipage/#e-mail-state-(type%3Demail)%3Asuffering-from-bad-input
            // https://html.spec.whatwg.org/multipage/#e-mail-state-(type%3Demail)%3Asuffering-from-bad-input-2
            InputType::Email => {
                // TODO: Check for input that cannot be converted to punycode.
                // Currently we don't support conversion of email values to punycode
                // so always return false.
                false
            },
            // https://html.spec.whatwg.org/multipage/#date-state-(type%3Ddate)%3Asuffering-from-bad-input
            InputType::Date => !value.str().is_valid_date_string(),
            // https://html.spec.whatwg.org/multipage/#month-state-(type%3Dmonth)%3Asuffering-from-bad-input
            InputType::Month => !value.str().is_valid_month_string(),
            // https://html.spec.whatwg.org/multipage/#week-state-(type%3Dweek)%3Asuffering-from-bad-input
            InputType::Week => !value.str().is_valid_week_string(),
            // https://html.spec.whatwg.org/multipage/#time-state-(type%3Dtime)%3Asuffering-from-bad-input
            InputType::Time => !value.str().is_valid_time_string(),
            // https://html.spec.whatwg.org/multipage/#local-date-and-time-state-(type%3Ddatetime-local)%3Asuffering-from-bad-input
            InputType::DatetimeLocal => !value.str().is_valid_local_date_time_string(),
            // https://html.spec.whatwg.org/multipage/#number-state-(type%3Dnumber)%3Asuffering-from-bad-input
            // https://html.spec.whatwg.org/multipage/#range-state-(type%3Drange)%3Asuffering-from-bad-input
            InputType::Number | InputType::Range => !value.is_valid_floating_point_number_string(),
            // https://html.spec.whatwg.org/multipage/#color-state-(type%3Dcolor)%3Asuffering-from-bad-input
            InputType::Color => !value.str().is_valid_simple_color_string(),
            // Other input types don't suffer from bad input
            _ => false,
        }
    }

    // https://html.spec.whatwg.org/multipage/#suffering-from-being-too-long
    // https://html.spec.whatwg.org/multipage/#suffering-from-being-too-short
    fn suffers_from_length_issues(&self, value: &DOMString) -> ValidationFlags {
        // https://html.spec.whatwg.org/multipage/#limiting-user-input-length%3A-the-maxlength-attribute%3Asuffering-from-being-too-long
        // https://html.spec.whatwg.org/multipage/#setting-minimum-input-length-requirements%3A-the-minlength-attribute%3Asuffering-from-being-too-short
        let value_dirty = self.value_dirty.get();
        let textinput = self.textinput.borrow();
        let edit_by_user = !textinput.was_last_change_by_set_content();

        if value.is_empty() || !value_dirty || !edit_by_user || !self.does_minmaxlength_apply() {
            return ValidationFlags::empty();
        }

        let mut failed_flags = ValidationFlags::empty();
        let UTF16CodeUnits(value_len) = textinput.utf16_len();
        let min_length = self.MinLength();
        let max_length = self.MaxLength();

        if min_length != DEFAULT_MIN_LENGTH && value_len < (min_length as usize) {
            failed_flags.insert(ValidationFlags::TOO_SHORT);
        }

        if max_length != DEFAULT_MAX_LENGTH && value_len > (max_length as usize) {
            failed_flags.insert(ValidationFlags::TOO_LONG);
        }

        failed_flags
    }

    /// * <https://html.spec.whatwg.org/multipage/#suffering-from-an-underflow>
    /// * <https://html.spec.whatwg.org/multipage/#suffering-from-an-overflow>
    /// * <https://html.spec.whatwg.org/multipage/#suffering-from-a-step-mismatch>
    fn suffers_from_range_issues(&self, value: &DOMString) -> ValidationFlags {
        if value.is_empty() || !self.does_value_as_number_apply() {
            return ValidationFlags::empty();
        }

        let Some(value_as_number) = self.convert_string_to_number(value) else {
            return ValidationFlags::empty();
        };

        let mut failed_flags = ValidationFlags::empty();
        let min_value = self.minimum();
        let max_value = self.maximum();

        // https://html.spec.whatwg.org/multipage/#has-a-reversed-range
        let has_reversed_range = match (min_value, max_value) {
            (Some(min), Some(max)) => self.input_type().has_periodic_domain() && min > max,
            _ => false,
        };

        if has_reversed_range {
            // https://html.spec.whatwg.org/multipage/#the-min-and-max-attributes:has-a-reversed-range-3
            if value_as_number > max_value.unwrap() && value_as_number < min_value.unwrap() {
                failed_flags.insert(ValidationFlags::RANGE_UNDERFLOW);
                failed_flags.insert(ValidationFlags::RANGE_OVERFLOW);
            }
        } else {
            // https://html.spec.whatwg.org/multipage/#the-min-and-max-attributes%3Asuffering-from-an-underflow-2
            if let Some(min_value) = min_value {
                if value_as_number < min_value {
                    failed_flags.insert(ValidationFlags::RANGE_UNDERFLOW);
                }
            }
            // https://html.spec.whatwg.org/multipage/#the-min-and-max-attributes%3Asuffering-from-an-overflow-2
            if let Some(max_value) = max_value {
                if value_as_number > max_value {
                    failed_flags.insert(ValidationFlags::RANGE_OVERFLOW);
                }
            }
        }

        // https://html.spec.whatwg.org/multipage/#the-step-attribute%3Asuffering-from-a-step-mismatch
        if let Some(step) = self.allowed_value_step() {
            // TODO: Spec has some issues here, see https://github.com/whatwg/html/issues/5207.
            // Chrome and Firefox parse values as decimals to get exact results,
            // we probably should too.
            let diff = (self.step_base() - value_as_number) % step / value_as_number;
            if diff.abs() > 1e-12 {
                failed_flags.insert(ValidationFlags::STEP_MISMATCH);
            }
        }

        failed_flags
    }

    /// Return a reference to the ShadowRoot that this element is a host of,
    /// or create one if none exists.
    // FIXME(stevennovaryo): We should encapsulate the logics for the initiation and maintainance of
    //                       form UA widget inside another struct.
    fn shadow_root(&self, can_gc: CanGc) -> DomRoot<ShadowRoot> {
        self.upcast::<Element>()
            .shadow_root()
            .unwrap_or_else(|| self.upcast::<Element>().attach_ua_shadow_root(true, can_gc))
    }

    fn create_text_shadow_tree(&self, can_gc: CanGc) {
        let document = self.owner_document();
        let shadow_root = self.shadow_root(can_gc);
        Node::replace_all(None, shadow_root.upcast::<Node>(), can_gc);

        let inner_container =
            HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
        shadow_root
            .upcast::<Node>()
            .AppendChild(inner_container.upcast::<Node>(), can_gc)
            .unwrap();
        inner_container
            .upcast::<Node>()
            .set_implemented_pseudo_element(PseudoElement::ServoTextControlInnerContainer);

        let text_container = create_ua_widget_div_with_text_node(
            &document,
            inner_container.upcast::<Node>(),
            PseudoElement::ServoTextControlInnerEditor,
            false,
            can_gc,
        );

        let _ = self
            .shadow_tree
            .borrow_mut()
            .insert(ShadowTree::Text(InputTypeTextShadowTree {
                inner_container: inner_container.as_traced(),
                text_container: text_container.as_traced(),
                placeholder_container: DomRefCell::new(None),
            }));
    }

    fn text_shadow_tree(&self, can_gc: CanGc) -> Ref<'_, InputTypeTextShadowTree> {
        let has_text_shadow_tree = self
            .shadow_tree
            .borrow()
            .as_ref()
            .is_some_and(|shadow_tree| matches!(shadow_tree, ShadowTree::Text(_)));
        if !has_text_shadow_tree {
            self.create_text_shadow_tree(can_gc);
        }

        let shadow_tree = self.shadow_tree.borrow();
        Ref::filter_map(shadow_tree, |shadow_tree| {
            let shadow_tree = shadow_tree.as_ref()?;
            match shadow_tree {
                ShadowTree::Text(text_tree) => Some(text_tree),
                _ => None,
            }
        })
        .ok()
        .expect("UA shadow tree was not created")
    }

    fn create_color_shadow_tree(&self, can_gc: CanGc) {
        let document = self.owner_document();
        let shadow_root = self.shadow_root(can_gc);
        Node::replace_all(None, shadow_root.upcast::<Node>(), can_gc);

        let color_value = HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
        shadow_root
            .upcast::<Node>()
            .AppendChild(color_value.upcast::<Node>(), can_gc)
            .unwrap();
        color_value
            .upcast::<Node>()
            .set_implemented_pseudo_element(PseudoElement::ColorSwatch);

        let _ = self
            .shadow_tree
            .borrow_mut()
            .insert(ShadowTree::Color(InputTypeColorShadowTree {
                color_value: color_value.as_traced(),
            }));
    }

    /// Get a handle to the shadow tree for this input, assuming it's [InputType] is `Color`.
    ///
    /// If the input is not currently a shadow host, a new shadow tree will be created.
    ///
    /// If the input is a shadow host for a different kind of shadow tree then the old
    /// tree will be removed and a new one will be created.
    fn color_shadow_tree(&self, can_gc: CanGc) -> Ref<'_, InputTypeColorShadowTree> {
        let has_color_shadow_tree = self
            .shadow_tree
            .borrow()
            .as_ref()
            .is_some_and(|shadow_tree| matches!(shadow_tree, ShadowTree::Color(_)));
        if !has_color_shadow_tree {
            self.create_color_shadow_tree(can_gc);
        }

        let shadow_tree = self.shadow_tree.borrow();
        Ref::filter_map(shadow_tree, |shadow_tree| {
            let shadow_tree = shadow_tree.as_ref()?;
            match shadow_tree {
                ShadowTree::Color(color_tree) => Some(color_tree),
                _ => None,
            }
        })
        .ok()
        .expect("UA shadow tree was not created")
    }

    /// Should this input type render as a basic text UA widget.
    // TODO(#38251): Ideally, the most basic shadow dom should cover only `text`, `password`, `url`, `tel`,
    //               and `email`. But we are leaving the others textual inputs here while tackling them one
    //               by one.
    pub(crate) fn is_textual_widget(&self) -> bool {
        matches!(
            self.input_type(),
            InputType::Date |
                InputType::DatetimeLocal |
                InputType::Email |
                InputType::Month |
                InputType::Number |
                InputType::Password |
                InputType::Range |
                InputType::Search |
                InputType::Tel |
                InputType::Text |
                InputType::Time |
                InputType::Url |
                InputType::Week
        )
    }

    /// Construct the most basic shadow tree structure for textual input.
    /// TODO(stevennovaryo): The rest of textual input shadow dom structure should act like an
    ///                       exstension to this one.
    fn update_textual_shadow_tree(&self, can_gc: CanGc) {
        // Should only do this for textual input widget.
        debug_assert!(self.is_textual_widget());

        let text_shadow_tree = self.text_shadow_tree(can_gc);
        let value = self.Value();

        // The addition of zero-width space here forces the text input to have an inline formatting
        // context that might otherwise be trimmed if there's no text. This is important to ensure
        // that the input element is at least as tall as the line gap of the caret:
        // <https://drafts.csswg.org/css-ui/#element-with-default-preferred-size>.
        //
        // This is also used to ensure that the caret will still be rendered when the input is empty.
        // TODO: Could append `<br>` element to prevent collapses and avoid this hack, but we would
        //       need to fix the rendering of caret beforehand.
        let value_text = match (value.is_empty(), self.input_type()) {
            // For a password input, we replace all of the character with its replacement char.
            (false, InputType::Password) => value
                .chars()
                .map(|_| PASSWORD_REPLACEMENT_CHAR)
                .collect::<String>()
                .into(),
            (false, _) => value,
            (true, _) => "\u{200B}".into(),
        };

        // We are finding and updating the CharacterData child directly to optimize the update.
        text_shadow_tree
            .text_container
            .upcast::<Node>()
            .GetFirstChild()
            .expect("UA widget text container without child")
            .downcast::<CharacterData>()
            .expect("First child is not a CharacterData node")
            .SetData(value_text);
    }

    fn update_color_shadow_tree(&self, can_gc: CanGc) {
        // Should only do this for `type=color` input.
        debug_assert_eq!(self.input_type(), InputType::Color);

        let color_shadow_tree = self.color_shadow_tree(can_gc);
        let mut value = self.Value();
        if value.str().is_valid_simple_color_string() {
            value.make_ascii_lowercase();
        } else {
            value = DOMString::from("#000000");
        }
        let style = format!("background-color: {value}");
        color_shadow_tree
            .color_value
            .upcast::<Element>()
            .set_string_attribute(&local_name!("style"), style.into(), can_gc);
    }

    fn update_shadow_tree(&self, can_gc: CanGc) {
        match self.input_type() {
            _ if self.is_textual_widget() => self.update_textual_shadow_tree(can_gc),
            InputType::Color => self.update_color_shadow_tree(can_gc),
            _ => {},
        }
    }
}

pub(crate) trait LayoutHTMLInputElementHelpers<'dom> {
    /// Return a string that represents the contents of the element for layout.
    fn value_for_layout(self) -> Cow<'dom, str>;
    fn size_for_layout(self) -> u32;
    fn selection_for_layout(self) -> Option<Range<usize>>;
}

#[allow(unsafe_code)]
impl<'dom> LayoutDom<'dom, HTMLInputElement> {
    fn get_raw_textinput_value(self) -> DOMString {
        unsafe {
            self.unsafe_get()
                .textinput
                .borrow_for_layout()
                .get_content()
        }
    }
    fn get_filelist(self) -> Option<LayoutDom<'dom, FileList>> {
        unsafe { self.unsafe_get().filelist.get_inner_as_layout() }
    }

    fn input_type(self) -> InputType {
        self.unsafe_get().input_type.get()
    }

    fn textinput_sorted_selection_offsets_range(self) -> Range<UTF8Bytes> {
        unsafe {
            self.unsafe_get()
                .textinput
                .borrow_for_layout()
                .sorted_selection_offsets_range()
        }
    }
}

impl<'dom> LayoutHTMLInputElementHelpers<'dom> for LayoutDom<'dom, HTMLInputElement> {
    /// In the past, we are handling the display of <input> element inside the dom tree traversal.
    /// With the introduction of shadow DOM, these implementations will be replaced one by one
    /// and these will be obselete,
    fn value_for_layout(self) -> Cow<'dom, str> {
        fn get_raw_attr_value<'dom>(
            input: LayoutDom<'dom, HTMLInputElement>,
            default: &'static str,
        ) -> Cow<'dom, str> {
            input
                .upcast::<Element>()
                .get_attr_val_for_layout(&ns!(), &local_name!("value"))
                .unwrap_or(default)
                .into()
        }

        match self.input_type() {
            InputType::Checkbox | InputType::Radio | InputType::Image | InputType::Hidden => {
                "".into()
            },
            InputType::File => {
                let filelist = self.get_filelist();
                match filelist {
                    Some(filelist) => {
                        let length = filelist.len();
                        if length == 0 {
                            DEFAULT_FILE_INPUT_VALUE.into()
                        } else if length == 1 {
                            match filelist.file_for_layout(0) {
                                Some(file) => file.name().to_string().into(),
                                None => DEFAULT_FILE_INPUT_VALUE.into(),
                            }
                        } else {
                            format!("{} files", length).into()
                        }
                    },
                    None => DEFAULT_FILE_INPUT_VALUE.into(),
                }
            },
            InputType::Button => get_raw_attr_value(self, ""),
            InputType::Submit => get_raw_attr_value(self, DEFAULT_SUBMIT_VALUE),
            InputType::Reset => get_raw_attr_value(self, DEFAULT_RESET_VALUE),
            // FIXME(#22728): input `type=range` has yet to be implemented.
            InputType::Range => "".into(),
            _ => {
                unreachable!("Input with shadow tree should use internal shadow tree for layout");
            },
        }
    }

    /// Textual input, specifically text entry and domain specific input has
    /// a default preferred size.
    ///
    /// <https://html.spec.whatwg.org/multipage/#the-input-element-as-a-text-entry-widget>
    /// <https://html.spec.whatwg.org/multipage/#the-input-element-as-domain-specific-widgets>
    // FIXME(stevennovaryo): Implement the calculation of default preferred size
    //                       for domain specific input widgets correctly.
    // FIXME(#4378): Implement the calculation of average character width for
    //               textual input correctly.
    fn size_for_layout(self) -> u32 {
        self.unsafe_get().size.get()
    }

    fn selection_for_layout(self) -> Option<Range<usize>> {
        if !self.upcast::<Element>().focus_state() {
            return None;
        }

        let sorted_selection_offsets_range = self.textinput_sorted_selection_offsets_range();

        match self.input_type() {
            InputType::Password => {
                let text = self.get_raw_textinput_value();
                let sel = UTF8Bytes::unwrap_range(sorted_selection_offsets_range);

                // Translate indices from the raw value to indices in the replacement value.
                let char_start = text[..sel.start].chars().count();
                let char_end = char_start + text[sel].chars().count();

                let bytes_per_char = PASSWORD_REPLACEMENT_CHAR.len_utf8();
                Some(char_start * bytes_per_char..char_end * bytes_per_char)
            },
            input_type if input_type.is_textual() => {
                Some(UTF8Bytes::unwrap_range(sorted_selection_offsets_range))
            },
            _ => None,
        }
    }
}

impl TextControlElement for HTMLInputElement {
    // https://html.spec.whatwg.org/multipage/#concept-input-apply
    fn selection_api_applies(&self) -> bool {
        matches!(
            self.input_type(),
            InputType::Text |
                InputType::Search |
                InputType::Url |
                InputType::Tel |
                InputType::Password
        )
    }

    // https://html.spec.whatwg.org/multipage/#concept-input-apply
    //
    // Defines input types to which the select() IDL method applies. These are a superset of the
    // types for which selection_api_applies() returns true.
    //
    // Types omitted which could theoretically be included if they were
    // rendered as a text control: file
    fn has_selectable_text(&self) -> bool {
        match self.input_type() {
            InputType::Text |
            InputType::Search |
            InputType::Url |
            InputType::Tel |
            InputType::Password |
            InputType::Email |
            InputType::Date |
            InputType::Month |
            InputType::Week |
            InputType::Time |
            InputType::DatetimeLocal |
            InputType::Number => true,

            InputType::Button |
            InputType::Checkbox |
            InputType::Color |
            InputType::File |
            InputType::Hidden |
            InputType::Image |
            InputType::Radio |
            InputType::Range |
            InputType::Reset |
            InputType::Submit => false,
        }
    }

    fn set_dirty_value_flag(&self, value: bool) {
        self.value_dirty.set(value)
    }
}

#[allow(non_snake_case)]
impl HTMLInputElementMethods<crate::DomTypeHolder> for HTMLInputElement {
    // https://html.spec.whatwg.org/multipage/#dom-input-accept
    make_getter!(Accept, "accept");

    // https://html.spec.whatwg.org/multipage/#dom-input-accept
    make_setter!(SetAccept, "accept");

    // https://html.spec.whatwg.org/multipage/#dom-input-alt
    make_getter!(Alt, "alt");

    // https://html.spec.whatwg.org/multipage/#dom-input-alt
    make_setter!(SetAlt, "alt");

    // https://html.spec.whatwg.org/multipage/#dom-input-dirName
    make_getter!(DirName, "dirname");

    // https://html.spec.whatwg.org/multipage/#dom-input-dirName
    make_setter!(SetDirName, "dirname");

    // https://html.spec.whatwg.org/multipage/#dom-fe-disabled
    make_bool_getter!(Disabled, "disabled");

    // https://html.spec.whatwg.org/multipage/#dom-fe-disabled
    make_bool_setter!(SetDisabled, "disabled");

    // https://html.spec.whatwg.org/multipage/#dom-fae-form
    fn GetForm(&self) -> Option<DomRoot<HTMLFormElement>> {
        self.form_owner()
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-files
    fn GetFiles(&self) -> Option<DomRoot<FileList>> {
        self.filelist.get().as_ref().cloned()
    }

    /// <https://html.spec.whatwg.org/multipage/#dom-input-files>
    fn SetFiles(&self, files: Option<&FileList>) {
        if self.input_type() == InputType::File && files.is_some() {
            self.filelist.set(files);
        }
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-defaultchecked
    make_bool_getter!(DefaultChecked, "checked");

    // https://html.spec.whatwg.org/multipage/#dom-input-defaultchecked
    make_bool_setter!(SetDefaultChecked, "checked");

    // https://html.spec.whatwg.org/multipage/#dom-input-checked
    fn Checked(&self) -> bool {
        self.upcast::<Element>()
            .state()
            .contains(ElementState::CHECKED)
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-checked
    fn SetChecked(&self, checked: bool) {
        self.update_checked_state(checked, true);
        self.value_changed(CanGc::note());
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-readonly
    make_bool_getter!(ReadOnly, "readonly");

    // https://html.spec.whatwg.org/multipage/#dom-input-readonly
    make_bool_setter!(SetReadOnly, "readonly");

    // https://html.spec.whatwg.org/multipage/#dom-input-size
    make_uint_getter!(Size, "size", DEFAULT_INPUT_SIZE);

    // https://html.spec.whatwg.org/multipage/#dom-input-size
    make_limited_uint_setter!(SetSize, "size", DEFAULT_INPUT_SIZE);

    // https://html.spec.whatwg.org/multipage/#dom-input-type
    fn Type(&self) -> DOMString {
        DOMString::from(self.input_type().as_str())
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-type
    make_atomic_setter!(SetType, "type");

    // https://html.spec.whatwg.org/multipage/#dom-input-value
    fn Value(&self) -> DOMString {
        match self.value_mode() {
            ValueMode::Value => self.textinput.borrow().get_content(),
            ValueMode::Default => self
                .upcast::<Element>()
                .get_attribute(&ns!(), &local_name!("value"))
                .map_or(DOMString::from(""), |a| {
                    DOMString::from(a.summarize().value)
                }),
            ValueMode::DefaultOn => self
                .upcast::<Element>()
                .get_attribute(&ns!(), &local_name!("value"))
                .map_or(DOMString::from("on"), |a| {
                    DOMString::from(a.summarize().value)
                }),
            ValueMode::Filename => {
                let mut path = DOMString::from("");
                match self.filelist.get() {
                    Some(ref fl) => match fl.Item(0) {
                        Some(ref f) => {
                            path.push_str("C:\\fakepath\\");
                            path.push_str(f.name());
                            path
                        },
                        None => path,
                    },
                    None => path,
                }
            },
        }
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-value
    fn SetValue(&self, mut value: DOMString, can_gc: CanGc) -> ErrorResult {
        match self.value_mode() {
            ValueMode::Value => {
                {
                    // Step 3.
                    self.value_dirty.set(true);

                    // Step 4.
                    self.sanitize_value(&mut value);

                    let mut textinput = self.textinput.borrow_mut();

                    // Step 5.
                    if *textinput.single_line_content() != value {
                        // Steps 1-2
                        textinput.set_content(value);

                        // Step 5.
                        textinput.clear_selection_to_limit(Direction::Forward);
                    }
                }

                // Additionally, update the placeholder shown state in another
                // scope to prevent the borrow checker issue. This is normally
                // being done in the attributed mutated.
                self.update_placeholder_shown_state();
            },
            ValueMode::Default | ValueMode::DefaultOn => {
                self.upcast::<Element>()
                    .set_string_attribute(&local_name!("value"), value, can_gc);
            },
            ValueMode::Filename => {
                if value.is_empty() {
                    let window = self.owner_window();
                    let fl = FileList::new(&window, vec![], can_gc);
                    self.filelist.set(Some(&fl));
                } else {
                    return Err(Error::InvalidState);
                }
            },
        }

        self.value_changed(can_gc);
        self.upcast::<Node>().dirty(NodeDamage::Other);
        Ok(())
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-defaultvalue
    make_getter!(DefaultValue, "value");

    // https://html.spec.whatwg.org/multipage/#dom-input-defaultvalue
    make_setter!(SetDefaultValue, "value");

    // https://html.spec.whatwg.org/multipage/#dom-input-min
    make_getter!(Min, "min");

    // https://html.spec.whatwg.org/multipage/#dom-input-min
    make_setter!(SetMin, "min");

    // https://html.spec.whatwg.org/multipage/#dom-input-list
    fn GetList(&self) -> Option<DomRoot<HTMLDataListElement>> {
        self.suggestions_source_element()
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-valueasdate
    #[allow(unsafe_code)]
    fn GetValueAsDate(&self, cx: SafeJSContext) -> Option<NonNull<JSObject>> {
        self.convert_string_to_naive_datetime(self.Value())
            .map(|date_time| unsafe {
                let time = ClippedTime {
                    t: (date_time - OffsetDateTime::UNIX_EPOCH).whole_milliseconds() as f64,
                };
                NonNull::new_unchecked(NewDateObject(*cx, time))
            })
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-valueasdate
    #[allow(unsafe_code, non_snake_case)]
    fn SetValueAsDate(
        &self,
        cx: SafeJSContext,
        value: *mut JSObject,
        can_gc: CanGc,
    ) -> ErrorResult {
        rooted!(in(*cx) let value = value);
        if !self.does_value_as_date_apply() {
            return Err(Error::InvalidState);
        }
        if value.is_null() {
            return self.SetValue(DOMString::from(""), can_gc);
        }
        let mut msecs: f64 = 0.0;
        // We need to go through unsafe code to interrogate jsapi about a Date.
        // To minimize the amount of unsafe code to maintain, this just gets the milliseconds,
        // which we then reinflate into a NaiveDate for use in safe code.
        unsafe {
            let mut isDate = false;
            if !ObjectIsDate(*cx, Handle::from(value.handle()), &mut isDate) {
                return Err(Error::JSFailed);
            }
            if !isDate {
                return Err(Error::Type("Value was not a date".to_string()));
            }
            if !DateGetMsecSinceEpoch(*cx, Handle::from(value.handle()), &mut msecs) {
                return Err(Error::JSFailed);
            }
            if !msecs.is_finite() {
                return self.SetValue(DOMString::from(""), can_gc);
            }
        }

        let Ok(date_time) = OffsetDateTime::from_unix_timestamp_nanos((msecs * 1e6) as i128) else {
            return self.SetValue(DOMString::from(""), can_gc);
        };
        self.SetValue(self.convert_datetime_to_dom_string(date_time), can_gc)
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-valueasnumber
    fn ValueAsNumber(&self) -> f64 {
        self.convert_string_to_number(&self.Value())
            .unwrap_or(f64::NAN)
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-valueasnumber
    fn SetValueAsNumber(&self, value: f64, can_gc: CanGc) -> ErrorResult {
        if value.is_infinite() {
            Err(Error::Type("value is not finite".to_string()))
        } else if !self.does_value_as_number_apply() {
            Err(Error::InvalidState)
        } else if value.is_nan() {
            self.SetValue(DOMString::from(""), can_gc)
        } else if let Some(converted) = self.convert_number_to_string(value) {
            self.SetValue(converted, can_gc)
        } else {
            // The most literal spec-compliant implementation would use bignum types so
            // overflow is impossible, but just setting an overflow to the empty string
            // matches Firefox's behavior. For example, try input.valueAsNumber=1e30 on
            // a type="date" input.
            self.SetValue(DOMString::from(""), can_gc)
        }
    }

    // https://html.spec.whatwg.org/multipage/#attr-fe-name
    make_getter!(Name, "name");

    // https://html.spec.whatwg.org/multipage/#attr-fe-name
    make_atomic_setter!(SetName, "name");

    // https://html.spec.whatwg.org/multipage/#dom-input-placeholder
    make_getter!(Placeholder, "placeholder");

    // https://html.spec.whatwg.org/multipage/#dom-input-placeholder
    make_setter!(SetPlaceholder, "placeholder");

    // https://html.spec.whatwg.org/multipage/#dom-input-formaction
    make_form_action_getter!(FormAction, "formaction");

    // https://html.spec.whatwg.org/multipage/#dom-input-formaction
    make_setter!(SetFormAction, "formaction");

    // https://html.spec.whatwg.org/multipage/#dom-fs-formenctype
    make_enumerated_getter!(
        FormEnctype,
        "formenctype",
        "application/x-www-form-urlencoded" | "text/plain" | "multipart/form-data",
        missing => "",
        invalid => "application/x-www-form-urlencoded"
    );

    // https://html.spec.whatwg.org/multipage/#dom-input-formenctype
    make_setter!(SetFormEnctype, "formenctype");

    // https://html.spec.whatwg.org/multipage/#dom-fs-formmethod
    make_enumerated_getter!(
        FormMethod,
        "formmethod",
        "get" | "post" | "dialog",
        missing => "get",
        invalid => "get"
    );

    // https://html.spec.whatwg.org/multipage/#dom-fs-formmethod
    make_setter!(SetFormMethod, "formmethod");

    // https://html.spec.whatwg.org/multipage/#dom-input-formtarget
    make_getter!(FormTarget, "formtarget");

    // https://html.spec.whatwg.org/multipage/#dom-input-formtarget
    make_setter!(SetFormTarget, "formtarget");

    // https://html.spec.whatwg.org/multipage/#attr-fs-formnovalidate
    make_bool_getter!(FormNoValidate, "formnovalidate");

    // https://html.spec.whatwg.org/multipage/#attr-fs-formnovalidate
    make_bool_setter!(SetFormNoValidate, "formnovalidate");

    // https://html.spec.whatwg.org/multipage/#dom-input-max
    make_getter!(Max, "max");

    // https://html.spec.whatwg.org/multipage/#dom-input-max
    make_setter!(SetMax, "max");

    // https://html.spec.whatwg.org/multipage/#dom-input-maxlength
    make_int_getter!(MaxLength, "maxlength", DEFAULT_MAX_LENGTH);

    // https://html.spec.whatwg.org/multipage/#dom-input-maxlength
    make_limited_int_setter!(SetMaxLength, "maxlength", DEFAULT_MAX_LENGTH);

    // https://html.spec.whatwg.org/multipage/#dom-input-minlength
    make_int_getter!(MinLength, "minlength", DEFAULT_MIN_LENGTH);

    // https://html.spec.whatwg.org/multipage/#dom-input-minlength
    make_limited_int_setter!(SetMinLength, "minlength", DEFAULT_MIN_LENGTH);

    // https://html.spec.whatwg.org/multipage/#dom-input-multiple
    make_bool_getter!(Multiple, "multiple");

    // https://html.spec.whatwg.org/multipage/#dom-input-multiple
    make_bool_setter!(SetMultiple, "multiple");

    // https://html.spec.whatwg.org/multipage/#dom-input-pattern
    make_getter!(Pattern, "pattern");

    // https://html.spec.whatwg.org/multipage/#dom-input-pattern
    make_setter!(SetPattern, "pattern");

    // https://html.spec.whatwg.org/multipage/#dom-input-required
    make_bool_getter!(Required, "required");

    // https://html.spec.whatwg.org/multipage/#dom-input-required
    make_bool_setter!(SetRequired, "required");

    // https://html.spec.whatwg.org/multipage/#dom-input-src
    make_url_getter!(Src, "src");

    // https://html.spec.whatwg.org/multipage/#dom-input-src
    make_url_setter!(SetSrc, "src");

    // https://html.spec.whatwg.org/multipage/#dom-input-step
    make_getter!(Step, "step");

    // https://html.spec.whatwg.org/multipage/#dom-input-step
    make_setter!(SetStep, "step");

    // https://html.spec.whatwg.org/multipage/#dom-input-indeterminate
    fn Indeterminate(&self) -> bool {
        self.upcast::<Element>()
            .state()
            .contains(ElementState::INDETERMINATE)
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-indeterminate
    fn SetIndeterminate(&self, val: bool) {
        self.upcast::<Element>()
            .set_state(ElementState::INDETERMINATE, val)
    }

    // https://html.spec.whatwg.org/multipage/#dom-lfe-labels
    // Different from make_labels_getter because this one
    // conditionally returns null.
    fn GetLabels(&self, can_gc: CanGc) -> Option<DomRoot<NodeList>> {
        if self.input_type() == InputType::Hidden {
            None
        } else {
            Some(self.labels_node_list.or_init(|| {
                NodeList::new_labels_list(
                    self.upcast::<Node>().owner_doc().window(),
                    self.upcast::<HTMLElement>(),
                    can_gc,
                )
            }))
        }
    }

    // https://html.spec.whatwg.org/multipage/#dom-textarea/input-select
    fn Select(&self) {
        self.selection().dom_select();
    }

    // https://html.spec.whatwg.org/multipage/#dom-textarea/input-selectionstart
    fn GetSelectionStart(&self) -> Option<u32> {
        self.selection().dom_start()
    }

    // https://html.spec.whatwg.org/multipage/#dom-textarea/input-selectionstart
    fn SetSelectionStart(&self, start: Option<u32>) -> ErrorResult {
        self.selection().set_dom_start(start)
    }

    // https://html.spec.whatwg.org/multipage/#dom-textarea/input-selectionend
    fn GetSelectionEnd(&self) -> Option<u32> {
        self.selection().dom_end()
    }

    // https://html.spec.whatwg.org/multipage/#dom-textarea/input-selectionend
    fn SetSelectionEnd(&self, end: Option<u32>) -> ErrorResult {
        self.selection().set_dom_end(end)
    }

    // https://html.spec.whatwg.org/multipage/#dom-textarea/input-selectiondirection
    fn GetSelectionDirection(&self) -> Option<DOMString> {
        self.selection().dom_direction()
    }

    // https://html.spec.whatwg.org/multipage/#dom-textarea/input-selectiondirection
    fn SetSelectionDirection(&self, direction: Option<DOMString>) -> ErrorResult {
        self.selection().set_dom_direction(direction)
    }

    // https://html.spec.whatwg.org/multipage/#dom-textarea/input-setselectionrange
    fn SetSelectionRange(&self, start: u32, end: u32, direction: Option<DOMString>) -> ErrorResult {
        self.selection().set_dom_range(start, end, direction)
    }

    // https://html.spec.whatwg.org/multipage/#dom-textarea/input-setrangetext
    fn SetRangeText(&self, replacement: DOMString) -> ErrorResult {
        self.selection()
            .set_dom_range_text(replacement, None, None, Default::default())
    }

    // https://html.spec.whatwg.org/multipage/#dom-textarea/input-setrangetext
    fn SetRangeText_(
        &self,
        replacement: DOMString,
        start: u32,
        end: u32,
        selection_mode: SelectionMode,
    ) -> ErrorResult {
        self.selection()
            .set_dom_range_text(replacement, Some(start), Some(end), selection_mode)
    }

    // Select the files based on filepaths passed in,
    // enabled by dom.htmlinputelement.select_files.enabled,
    // used for test purpose.
    // check-tidy: no specs after this line
    fn SelectFiles(&self, paths: Vec<DOMString>, can_gc: CanGc) {
        if self.input_type() == InputType::File {
            let _ = self.select_files(Some(paths), can_gc);
        }
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-stepup
    fn StepUp(&self, n: i32, can_gc: CanGc) -> ErrorResult {
        self.step_up_or_down(n, StepDirection::Up, can_gc)
    }

    // https://html.spec.whatwg.org/multipage/#dom-input-stepdown
    fn StepDown(&self, n: i32, can_gc: CanGc) -> ErrorResult {
        self.step_up_or_down(n, StepDirection::Down, can_gc)
    }

    // 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
    fn Validity(&self) -> DomRoot<ValidityState> {
        self.validity_state()
    }

    // 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
    fn ReportValidity(&self, can_gc: CanGc) -> bool {
        self.report_validity(can_gc)
    }

    // 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
    fn SetCustomValidity(&self, error: DOMString) {
        self.validity_state().set_custom_error_message(error);
    }
}

fn radio_group_iter<'a>(
    elem: &'a HTMLInputElement,
    group: Option<&'a Atom>,
    form: Option<&'a HTMLFormElement>,
    root: &'a Node,
) -> impl Iterator<Item = DomRoot<HTMLInputElement>> + 'a {
    root.traverse_preorder(ShadowIncluding::No)
        .filter_map(DomRoot::downcast::<HTMLInputElement>)
        .filter(move |r| &**r == elem || in_same_group(r, form, group, Some(root)))
}

fn broadcast_radio_checked(broadcaster: &HTMLInputElement, group: Option<&Atom>) {
    let root = broadcaster
        .upcast::<Node>()
        .GetRootNode(&GetRootNodeOptions::empty());
    let form = broadcaster.form_owner();
    for r in radio_group_iter(broadcaster, group, form.as_deref(), &root) {
        if broadcaster != &*r && r.Checked() {
            r.SetChecked(false);
        }
    }
}

fn perform_radio_group_validation(elem: &HTMLInputElement, group: Option<&Atom>, can_gc: CanGc) {
    let root = elem
        .upcast::<Node>()
        .GetRootNode(&GetRootNodeOptions::empty());
    let form = elem.form_owner();
    for r in radio_group_iter(elem, group, form.as_deref(), &root) {
        r.validity_state()
            .perform_validation_and_update(ValidationFlags::all(), can_gc);
    }
}

// https://html.spec.whatwg.org/multipage/#radio-button-group
fn in_same_group(
    other: &HTMLInputElement,
    owner: Option<&HTMLFormElement>,
    group: Option<&Atom>,
    tree_root: Option<&Node>,
) -> bool {
    if group.is_none() {
        // Radio input elements with a missing or empty name are alone in their own group.
        return false;
    }

    if other.input_type() != InputType::Radio ||
        other.form_owner().as_deref() != owner ||
        other.radio_group_name().as_ref() != group
    {
        return false;
    }

    match tree_root {
        Some(tree_root) => {
            let other_root = other
                .upcast::<Node>()
                .GetRootNode(&GetRootNodeOptions::empty());
            tree_root == &*other_root
        },
        None => {
            // Skip check if the tree root isn't provided.
            true
        },
    }
}

impl HTMLInputElement {
    fn radio_group_updated(&self, group: Option<&Atom>) {
        if self.Checked() {
            broadcast_radio_checked(self, group);
        }
    }

    /// <https://html.spec.whatwg.org/multipage/#constructing-the-form-data-set>
    /// Steps range from 5.1 to 5.10 (specific to HTMLInputElement)
    pub(crate) fn form_datums(
        &self,
        submitter: Option<FormSubmitterElement>,
        encoding: Option<&'static Encoding>,
    ) -> Vec<FormDatum> {
        // 3.1: disabled state check is in get_unclean_dataset

        // Step 5.2
        let ty = self.Type();

        // Step 5.4
        let name = self.Name();
        let is_submitter = match submitter {
            Some(FormSubmitterElement::Input(s)) => self == s,
            _ => false,
        };

        match self.input_type() {
            // Step 5.1: it's a button but it is not submitter.
            InputType::Submit | InputType::Button | InputType::Reset if !is_submitter => {
                return vec![];
            },

            // Step 5.1: it's the "Checkbox" or "Radio Button" and whose checkedness is false.
            InputType::Radio | InputType::Checkbox => {
                if !self.Checked() || name.is_empty() {
                    return vec![];
                }
            },

            InputType::File => {
                let mut datums = vec![];

                // Step 5.2-5.7
                let name = self.Name();

                match self.GetFiles() {
                    Some(fl) => {
                        for f in fl.iter_files() {
                            datums.push(FormDatum {
                                ty: ty.clone(),
                                name: name.clone(),
                                value: FormDatumValue::File(DomRoot::from_ref(f)),
                            });
                        }
                    },
                    None => {
                        datums.push(FormDatum {
                            // XXX(izgzhen): Spec says 'application/octet-stream' as the type,
                            // but this is _type_ of element rather than content right?
                            ty: ty.clone(),
                            name: name.clone(),
                            value: FormDatumValue::String(DOMString::from("")),
                        })
                    },
                }

                return datums;
            },

            InputType::Image => return vec![], // Unimplemented

            // Step 5.10: it's a hidden field named _charset_
            InputType::Hidden => {
                if name.to_ascii_lowercase() == "_charset_" {
                    return vec![FormDatum {
                        ty: ty.clone(),
                        name,
                        value: FormDatumValue::String(match encoding {
                            None => DOMString::from("UTF-8"),
                            Some(enc) => DOMString::from(enc.name()),
                        }),
                    }];
                }
            },

            // Step 5.1: it's not the "Image Button" and doesn't have a name attribute.
            _ => {
                if name.is_empty() {
                    return vec![];
                }
            },
        }

        // Step 5.12
        vec![FormDatum {
            ty: ty.clone(),
            name,
            value: FormDatumValue::String(self.Value()),
        }]
    }

    // https://html.spec.whatwg.org/multipage/#radio-button-group
    fn radio_group_name(&self) -> Option<Atom> {
        self.upcast::<Element>()
            .get_name()
            .and_then(|name| if name == atom!("") { None } else { Some(name) })
    }

    fn update_checked_state(&self, checked: bool, dirty: bool) {
        self.upcast::<Element>()
            .set_state(ElementState::CHECKED, checked);

        if dirty {
            self.checked_changed.set(true);
        }

        if self.input_type() == InputType::Radio && checked {
            broadcast_radio_checked(self, self.radio_group_name().as_ref());
        }

        self.upcast::<Node>().dirty(NodeDamage::Other);
    }

    // https://html.spec.whatwg.org/multipage/#concept-fe-mutable
    pub(crate) fn is_mutable(&self) -> bool {
        // https://html.spec.whatwg.org/multipage/#the-input-element:concept-fe-mutable
        // https://html.spec.whatwg.org/multipage/#the-readonly-attribute:concept-fe-mutable
        !(self.upcast::<Element>().disabled_state() || self.ReadOnly())
    }

    // https://html.spec.whatwg.org/multipage/#the-input-element:concept-form-reset-control
    pub(crate) fn reset(&self, can_gc: CanGc) {
        match self.input_type() {
            InputType::Radio | InputType::Checkbox => {
                self.update_checked_state(self.DefaultChecked(), false);
                self.checked_changed.set(false);
                self.value_changed(can_gc);
            },
            InputType::Image => (),
            _ => (),
        }
        self.textinput.borrow_mut().set_content(self.DefaultValue());
        self.value_dirty.set(false);
        self.upcast::<Node>().dirty(NodeDamage::Other);
    }

    /// <https://w3c.github.io/webdriver/#ref-for-dfn-clear-algorithm-3>
    /// Used by WebDriver to clear the input element.
    pub(crate) fn clear(&self, can_gc: CanGc) {
        // Step 1. Reset dirty value and dirty checkedness flags.
        self.value_dirty.set(false);
        self.checked_changed.set(false);
        // Step 2. Set value to empty string.
        self.textinput.borrow_mut().set_content(DOMString::from(""));
        // Step 3. Set checkedness based on presence of content attribute.
        self.update_checked_state(self.DefaultChecked(), false);
        self.value_changed(can_gc);
        // Step 4. Empty selected files
        if self.filelist.get().is_some() {
            let window = self.owner_window();
            let filelist = FileList::new(&window, vec![], can_gc);
            self.filelist.set(Some(&filelist));
        }
        // Step 5. invoke the value sanitization algorithm iff
        // the type attribute's current state defines one.
        // This is covered in `fn sanitize_value` called below.
        self.enable_sanitization();
        self.upcast::<Node>().dirty(NodeDamage::Other);
    }

    fn update_placeholder_shown_state(&self) {
        if !self.input_type().is_textual_or_password() {
            return;
        }

        let has_placeholder = !self.placeholder.borrow().is_empty();
        let has_value = !self.textinput.borrow().is_empty();
        let el = self.upcast::<Element>();

        el.set_placeholder_shown_state(has_placeholder && !has_value);
    }

    // Update the placeholder text in the text shadow tree.
    // To increase the performance, we would only do this when it is necessary.
    fn update_text_shadow_tree_placeholder(&self, can_gc: CanGc) {
        if !self.is_textual_widget() {
            return;
        }

        let text_shadow_tree = self.text_shadow_tree(can_gc);
        text_shadow_tree.init_placeholder_container_if_necessary(self, can_gc);

        let Some(ref placeholder_container) = *text_shadow_tree.placeholder_container.borrow()
        else {
            // No update is necesssary.
            return;
        };
        let placeholder_text = self.placeholder.borrow().clone();

        // We are finding and updating the CharacterData child directly to optimize the update.
        placeholder_container
            .upcast::<Node>()
            .GetFirstChild()
            .expect("UA widget text container without child")
            .downcast::<CharacterData>()
            .expect("First child is not a CharacterData node")
            .SetData(placeholder_text);
    }

    // https://html.spec.whatwg.org/multipage/#file-upload-state-(type=file)
    // Select files by invoking UI or by passed in argument
    pub(crate) fn select_files(
        &self,
        opt_test_paths: Option<Vec<DOMString>>,
        can_gc: CanGc,
    ) -> FileManagerResult<()> {
        let window = self.owner_window();
        let origin = get_blob_origin(&window.get_url());
        let resource_threads = window.as_global_scope().resource_threads();

        let mut files: Vec<DomRoot<File>> = vec![];

        let webview_id = window.webview_id();
        let filter = filter_from_accept(&self.Accept());
        let target = self.upcast::<EventTarget>();

        if self.Multiple() {
            // When using WebDriver command element send keys,
            // we are expected to append the files to the existing filelist.
            if pref!(dom_testing_html_input_element_select_files_enabled) {
                let filelist = self.filelist.get();
                if let Some(filelist) = filelist {
                    for i in 0..filelist.Length() {
                        files.push(
                            filelist
                                .Item(i)
                                .expect("We should have iterate within filelist length"),
                        );
                    }
                }
            }

            let opt_test_paths = opt_test_paths.map(|paths| {
                paths
                    .iter()
                    .filter_map(|p| PathBuf::from_str(p).ok())
                    .collect()
            });

            let (chan, recv) =
                profile_traits::ipc::channel(self.global().time_profiler_chan().clone())
                    .expect("Error initializing channel");
            let msg =
                FileManagerThreadMsg::SelectFiles(webview_id, filter, chan, origin, opt_test_paths);
            resource_threads
                .send(CoreResourceMsg::ToFileManager(msg))
                .unwrap();

            match recv.recv().expect("IpcSender side error") {
                Ok(selected_files) => {
                    for selected in selected_files {
                        files.push(File::new_from_selected(&window, selected, can_gc));
                    }
                },
                Err(err) => {
                    debug!("Input multiple file select error: {:?}", err);
                    return Err(err);
                },
            };
        } else {
            let opt_test_path = match opt_test_paths {
                Some(paths) => {
                    if paths.is_empty() {
                        return Ok(());
                    } else {
                        Some(PathBuf::from(paths[0].to_string())) // neglect other paths
                    }
                },
                None => None,
            };

            let (chan, recv) =
                profile_traits::ipc::channel(self.global().time_profiler_chan().clone())
                    .expect("Error initializing channel");
            let msg =
                FileManagerThreadMsg::SelectFile(webview_id, filter, chan, origin, opt_test_path);
            resource_threads
                .send(CoreResourceMsg::ToFileManager(msg))
                .unwrap();

            match recv.recv().expect("IpcSender side error") {
                Ok(selected) => {
                    files.push(File::new_from_selected(&window, selected, can_gc));
                },
                Err(err) => {
                    debug!("Input file select error: {:?}", err);
                    return Err(err);
                },
            };
        }

        let filelist = FileList::new(&window, files, can_gc);
        self.filelist.set(Some(&filelist));

        target.fire_bubbling_event(atom!("input"), can_gc);
        target.fire_bubbling_event(atom!("change"), can_gc);

        Ok(())
    }

    // https://html.spec.whatwg.org/multipage/#value-sanitization-algorithm
    fn sanitize_value(&self, value: &mut DOMString) {
        // if sanitization_flag is false, we are setting content attributes
        // on an element we haven't really finished creating; we will
        // enable the flag and really sanitize before this element becomes
        // observable.
        if !self.sanitization_flag.get() {
            return;
        }
        match self.input_type() {
            InputType::Text | InputType::Search | InputType::Tel | InputType::Password => {
                value.strip_newlines();
            },
            InputType::Url => {
                value.strip_newlines();
                value.strip_leading_and_trailing_ascii_whitespace();
            },
            InputType::Date => {
                if !value.str().is_valid_date_string() {
                    value.clear();
                }
            },
            InputType::Month => {
                if !value.str().is_valid_month_string() {
                    value.clear();
                }
            },
            InputType::Week => {
                if !value.str().is_valid_week_string() {
                    value.clear();
                }
            },
            InputType::Color => {
                if value.str().is_valid_simple_color_string() {
                    value.make_ascii_lowercase();
                } else {
                    *value = "#000000".into();
                }
            },
            InputType::Time => {
                if !value.str().is_valid_time_string() {
                    value.clear();
                }
            },
            InputType::DatetimeLocal => {
                match value
                    .str()
                    .parse_local_date_time_string()
                    .map(|date_time| date_time.to_local_date_time_string())
                {
                    Some(normalized_string) => *value = DOMString::from_string(normalized_string),
                    None => value.clear(),
                }
            },
            InputType::Number => {
                if !value.is_valid_floating_point_number_string() {
                    value.clear();
                }
                // Spec says that user agent "may" round the value
                // when it's suffering a step mismatch, but WPT tests
                // want it unrounded, and this matches other browser
                // behavior (typing an unrounded number into an
                // integer field box and pressing enter generally keeps
                // the number intact but makes the input box :invalid)
            },
            // https://html.spec.whatwg.org/multipage/#range-state-(type=range):value-sanitization-algorithm
            InputType::Range => {
                if !value.is_valid_floating_point_number_string() {
                    *value = DOMString::from(self.default_range_value().to_string());
                }
                if let Ok(fval) = &value.parse::<f64>() {
                    let mut fval = *fval;
                    // comparing max first, because if they contradict
                    // the spec wants min to be the one that applies
                    if let Some(max) = self.maximum() {
                        if fval > max {
                            fval = max;
                        }
                    }
                    if let Some(min) = self.minimum() {
                        if fval < min {
                            fval = min;
                        }
                    }
                    // https://html.spec.whatwg.org/multipage/#range-state-(type=range):suffering-from-a-step-mismatch
                    // Spec does not describe this in a way that lends itself to
                    // reproducible handling of floating-point rounding;
                    // Servo may fail a WPT test because .1 * 6 == 6.000000000000001
                    if let Some(allowed_value_step) = self.allowed_value_step() {
                        let step_base = self.step_base();
                        let steps_from_base = (fval - step_base) / allowed_value_step;
                        if steps_from_base.fract() != 0.0 {
                            // not an integer number of steps, there's a mismatch
                            // round the number of steps...
                            let int_steps = round_halves_positive(steps_from_base);
                            // and snap the value to that rounded value...
                            fval = int_steps * allowed_value_step + step_base;

                            // but if after snapping we're now outside min..max
                            // we have to adjust! (adjusting to min last because
                            // that "wins" over max in the spec)
                            if let Some(stepped_maximum) = self.stepped_maximum() {
                                if fval > stepped_maximum {
                                    fval = stepped_maximum;
                                }
                            }
                            if let Some(stepped_minimum) = self.stepped_minimum() {
                                if fval < stepped_minimum {
                                    fval = stepped_minimum;
                                }
                            }
                        }
                    }
                    *value = DOMString::from(fval.to_string());
                };
            },
            InputType::Email => {
                if !self.Multiple() {
                    value.strip_newlines();
                    value.strip_leading_and_trailing_ascii_whitespace();
                } else {
                    let sanitized = str_join(
                        split_commas(value).map(|token| {
                            let mut token = DOMString::from_string(token.to_string());
                            token.strip_newlines();
                            token.strip_leading_and_trailing_ascii_whitespace();
                            token
                        }),
                        ",",
                    );
                    value.clear();
                    value.push_str(sanitized.as_str());
                }
            },
            // The following inputs don't have a value sanitization algorithm.
            // See https://html.spec.whatwg.org/multipage/#value-sanitization-algorithm
            InputType::Button |
            InputType::Checkbox |
            InputType::File |
            InputType::Hidden |
            InputType::Image |
            InputType::Radio |
            InputType::Reset |
            InputType::Submit => (),
        }
    }

    #[cfg_attr(crown, allow(crown::unrooted_must_root))]
    fn selection(&self) -> TextControlSelection<'_, Self> {
        TextControlSelection::new(self, &self.textinput)
    }

    // https://html.spec.whatwg.org/multipage/#implicit-submission
    #[allow(unsafe_code)]
    fn implicit_submission(&self, can_gc: CanGc) {
        let doc = self.owner_document();
        let node = doc.upcast::<Node>();
        let owner = self.form_owner();
        let form = match owner {
            None => return,
            Some(ref f) => f,
        };

        if self.upcast::<Element>().click_in_progress() {
            return;
        }
        let submit_button = node
            .query_selector_iter(DOMString::from("input[type=submit]"))
            .unwrap()
            .filter_map(DomRoot::downcast::<HTMLInputElement>)
            .find(|r| r.form_owner() == owner);
        match submit_button {
            Some(ref button) => {
                if button.is_instance_activatable() {
                    // spec does not actually say to set the not trusted flag,
                    // but we can get here from synthetic keydown events
                    button
                        .upcast::<Node>()
                        .fire_synthetic_pointer_event_not_trusted(DOMString::from("click"), can_gc);
                }
            },
            None => {
                let mut inputs = node
                    .query_selector_iter(DOMString::from("input"))
                    .unwrap()
                    .filter_map(DomRoot::downcast::<HTMLInputElement>)
                    .filter(|input| {
                        input.form_owner() == owner &&
                            matches!(
                                input.input_type(),
                                InputType::Text |
                                    InputType::Search |
                                    InputType::Url |
                                    InputType::Tel |
                                    InputType::Email |
                                    InputType::Password |
                                    InputType::Date |
                                    InputType::Month |
                                    InputType::Week |
                                    InputType::Time |
                                    InputType::DatetimeLocal |
                                    InputType::Number
                            )
                    });

                if inputs.nth(1).is_some() {
                    // lazily test for > 1 submission-blocking inputs
                    return;
                }
                form.submit(
                    SubmittedFrom::NotFromForm,
                    FormSubmitterElement::Form(form),
                    can_gc,
                );
            },
        }
    }

    /// <https://html.spec.whatwg.org/multipage/#concept-input-value-string-number>
    fn convert_string_to_number(&self, value: &DOMString) -> Option<f64> {
        match self.input_type() {
            // > The algorithm to convert a string to a number, given a string input, is as
            // > follows: If parsing a date from input results in an error, then return an
            // > error; otherwise, return the number of milliseconds elapsed from midnight
            // > UTC on the morning of 1970-01-01 (the time represented by the value
            // > "1970-01-01T00:00:00.0Z") to midnight UTC on the morning of the parsed
            // > date, ignoring leap seconds.
            InputType::Date => value.str().parse_date_string().map(|date_time| {
                (date_time - OffsetDateTime::UNIX_EPOCH).whole_milliseconds() as f64
            }),
            // > The algorithm to convert a string to a number, given a string input, is as
            // > follows: If parsing a month from input results in an error, then return an
            // > error; otherwise, return the number of months between January 1970 and the
            // > parsed month.
            //
            // This one returns number of months, not milliseconds (specification requires
            // this, presumably because number of milliseconds is not consistent across
            // months) the - 1.0 is because january is 1, not 0
            InputType::Month => value.str().parse_month_string().map(|date_time| {
                ((date_time.year() - 1970) * 12) as f64 + (date_time.month() as u8 - 1) as f64
            }),
            // > The algorithm to convert a string to a number, given a string input, is as
            // > follows: If parsing a week string from input results in an error, then
            // > return an error; otherwise, return the number of milliseconds elapsed from
            // > midnight UTC on the morning of 1970-01-01 (the time represented by the
            // > value "1970-01-01T00:00:00.0Z") to midnight UTC on the morning of the
            // > Monday of the parsed week, ignoring leap seconds.
            InputType::Week => value.str().parse_week_string().map(|date_time| {
                (date_time - OffsetDateTime::UNIX_EPOCH).whole_milliseconds() as f64
            }),
            // > The algorithm to convert a string to a number, given a string input, is as
            // > follows: If parsing a time from input results in an error, then return an
            // > error; otherwise, return the number of milliseconds elapsed from midnight to
            // > the parsed time on a day with no time changes.
            InputType::Time => value
                .str()
                .parse_time_string()
                .map(|date_time| (date_time.time() - Time::MIDNIGHT).whole_milliseconds() as f64),
            // > The algorithm to convert a string to a number, given a string input, is as
            // > follows: If parsing a date and time from input results in an error, then
            // > return an error; otherwise, return the number of milliseconds elapsed from
            // > midnight on the morning of 1970-01-01 (the time represented by the value
            // > "1970-01-01T00:00:00.0") to the parsed local date and time, ignoring leap
            // > seconds.
            InputType::DatetimeLocal => {
                value.str().parse_local_date_time_string().map(|date_time| {
                    (date_time - OffsetDateTime::UNIX_EPOCH).whole_milliseconds() as f64
                })
            },
            InputType::Number | InputType::Range => value.parse_floating_point_number(),
            // min/max/valueAsNumber/stepDown/stepUp do not apply to
            // the remaining types
            _ => None,
        }
    }

    /// <https://html.spec.whatwg.org/multipage/#concept-input-value-string-number>
    fn convert_number_to_string(&self, value: f64) -> Option<DOMString> {
        match self.input_type() {
            InputType::Date | InputType::Week | InputType::Time | InputType::DatetimeLocal => {
                OffsetDateTime::from_unix_timestamp_nanos((value * 1e6) as i128)
                    .ok()
                    .map(|value| self.convert_datetime_to_dom_string(value))
            },
            InputType::Month => {
                // > The algorithm to convert a number to a string, given a number input,
                // > is as follows: Return a valid month string that represents the month
                // > that has input months between it and January 1970.
                let date = OffsetDateTime::UNIX_EPOCH;
                let years = (value / 12.) as i32;
                let year = date.year() + years;

                let months = value as i32 - (years * 12);
                let months = match months.cmp(&0) {
                    Ordering::Less => (12 - months) as u8,
                    Ordering::Equal | Ordering::Greater => months as u8,
                } + 1;

                let date = date
                    .replace_year(year)
                    .ok()?
                    .replace_month(Month::try_from(months).ok()?)
                    .ok()?;
                Some(self.convert_datetime_to_dom_string(date))
            },
            InputType::Number | InputType::Range => {
                let mut value = DOMString::from(value.to_string());
                value.set_best_representation_of_the_floating_point_number();
                Some(value)
            },
            _ => unreachable!("Should not have called convert_number_to_string for non-Date types"),
        }
    }

    // <https://html.spec.whatwg.org/multipage/#concept-input-value-string-date>
    // This does the safe Rust part of conversion; the unsafe JS Date part
    // is in GetValueAsDate
    fn convert_string_to_naive_datetime(&self, value: DOMString) -> Option<OffsetDateTime> {
        match self.input_type() {
            InputType::Date => value.str().parse_date_string(),
            InputType::Time => value.str().parse_time_string(),
            InputType::Week => value.str().parse_week_string(),
            InputType::Month => value.str().parse_month_string(),
            InputType::DatetimeLocal => value.str().parse_local_date_time_string(),
            // does not apply to other types
            _ => None,
        }
    }

    /// <https://html.spec.whatwg.org/multipage/#concept-input-value-date-string>
    /// This does the safe Rust part of conversion; the unsafe JS Date part
    /// is in SetValueAsDate
    fn convert_datetime_to_dom_string(&self, value: OffsetDateTime) -> DOMString {
        DOMString::from_string(match self.input_type() {
            InputType::Date => value.to_date_string(),
            InputType::Month => value.to_month_string(),
            InputType::Week => value.to_week_string(),
            InputType::Time => value.to_time_string(),
            InputType::DatetimeLocal => value.to_local_date_time_string(),
            _ => {
                unreachable!("Should not have called convert_datetime_to_string for non-Date types")
            },
        })
    }

    fn update_related_validity_states(&self, can_gc: CanGc) {
        match self.input_type() {
            InputType::Radio => {
                perform_radio_group_validation(self, self.radio_group_name().as_ref(), can_gc)
            },
            _ => {
                self.validity_state()
                    .perform_validation_and_update(ValidationFlags::all(), can_gc);
            },
        }
    }

    fn value_changed(&self, can_gc: CanGc) {
        self.update_related_validity_states(can_gc);
        self.update_shadow_tree(can_gc);
    }

    /// <https://html.spec.whatwg.org/multipage/#show-the-picker,-if-applicable>
    fn show_the_picker_if_applicable(&self, can_gc: CanGc) {
        // FIXME: Implement most of this algorithm

        // Step 2. If element is not mutable, then return.
        if !self.is_mutable() {
            return;
        }

        // Step 6. Otherwise, the user agent should show the relevant user interface for selecting a value for element,
        // in the way it normally would when the user interacts with the control.
        if self.input_type() == InputType::Color {
            let (ipc_sender, ipc_receiver) = generic_channel::channel::<Option<RgbColor>>()
                .expect("Failed to create IPC channel!");
            let document = self.owner_document();
            let rect = self.upcast::<Node>().border_box().unwrap_or_default();
            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 current_value = self.Value();
            let current_color = RgbColor {
                red: u8::from_str_radix(&current_value[1..3], 16).unwrap(),
                green: u8::from_str_radix(&current_value[3..5], 16).unwrap(),
                blue: u8::from_str_radix(&current_value[5..7], 16).unwrap(),
            };
            document.send_to_embedder(EmbedderMsg::ShowFormControl(
                document.webview_id(),
                DeviceIntRect::from_untyped(&rect.to_box2d()),
                EmbedderFormControl::ColorPicker(current_color, ipc_sender),
            ));

            let Ok(response) = ipc_receiver.recv() else {
                log::error!("Failed to receive response");
                return;
            };

            if let Some(selected_color) = response {
                let formatted_color = format!(
                    "#{:0>2x}{:0>2x}{:0>2x}",
                    selected_color.red, selected_color.green, selected_color.blue
                );
                let _ = self.SetValue(formatted_color.into(), can_gc);
            }
        }
    }
}

impl VirtualMethods for HTMLInputElement {
    fn super_type(&self) -> Option<&dyn VirtualMethods> {
        Some(self.upcast::<HTMLElement>() as &dyn VirtualMethods)
    }

    fn attribute_mutated(&self, attr: &Attr, mutation: AttributeMutation, can_gc: CanGc) {
        self.super_type()
            .unwrap()
            .attribute_mutated(attr, mutation, can_gc);

        match *attr.local_name() {
            local_name!("disabled") => {
                let disabled_state = match mutation {
                    AttributeMutation::Set(None) => true,
                    AttributeMutation::Set(Some(_)) => {
                        // Input was already disabled before.
                        return;
                    },
                    AttributeMutation::Removed => false,
                };
                let el = self.upcast::<Element>();
                el.set_disabled_state(disabled_state);
                el.set_enabled_state(!disabled_state);
                el.check_ancestors_disabled_state_for_form_control();

                if self.input_type().is_textual() {
                    let read_write = !(self.ReadOnly() || el.disabled_state());
                    el.set_read_write_state(read_write);
                }

                el.update_sequentially_focusable_status(can_gc);
            },
            local_name!("checked") if !self.checked_changed.get() => {
                let checked_state = match mutation {
                    AttributeMutation::Set(None) => true,
                    AttributeMutation::Set(Some(_)) => {
                        // Input was already checked before.
                        return;
                    },
                    AttributeMutation::Removed => false,
                };
                self.update_checked_state(checked_state, false);
            },
            local_name!("size") => {
                let size = mutation.new_value(attr).map(|value| value.as_uint());
                self.size.set(size.unwrap_or(DEFAULT_INPUT_SIZE));
            },
            local_name!("type") => {
                let el = self.upcast::<Element>();
                match mutation {
                    AttributeMutation::Set(_) => {
                        let new_type = InputType::from(attr.value().as_atom());

                        // https://html.spec.whatwg.org/multipage/#input-type-change
                        let (old_value_mode, old_idl_value) = (self.value_mode(), self.Value());
                        let previously_selectable = self.selection_api_applies();

                        self.input_type.set(new_type);

                        if new_type.is_textual() {
                            let read_write = !(self.ReadOnly() || el.disabled_state());
                            el.set_read_write_state(read_write);
                        } else {
                            el.set_read_write_state(false);
                        }

                        if new_type == InputType::File {
                            let window = self.owner_window();
                            let filelist = FileList::new(&window, vec![], can_gc);
                            self.filelist.set(Some(&filelist));
                        }

                        let new_value_mode = self.value_mode();
                        match (&old_value_mode, old_idl_value.is_empty(), new_value_mode) {
                            // Step 1
                            (&ValueMode::Value, false, ValueMode::Default) |
                            (&ValueMode::Value, false, ValueMode::DefaultOn) => {
                                self.SetValue(old_idl_value, can_gc)
                                    .expect("Failed to set input value on type change to a default ValueMode.");
                            },

                            // Step 2
                            (_, _, ValueMode::Value) if old_value_mode != ValueMode::Value => {
                                self.SetValue(
                                    self.upcast::<Element>()
                                        .get_attribute(&ns!(), &local_name!("value"))
                                        .map_or(DOMString::from(""), |a| {
                                            DOMString::from(a.summarize().value)
                                        }),
                                    can_gc,
                                )
                                .expect(
                                    "Failed to set input value on type change to ValueMode::Value.",
                                );
                                self.value_dirty.set(false);
                            },

                            // Step 3
                            (_, _, ValueMode::Filename)
                                if old_value_mode != ValueMode::Filename =>
                            {
                                self.SetValue(DOMString::from(""), can_gc)
                                    .expect("Failed to set input value on type change to ValueMode::Filename.");
                            },
                            _ => {},
                        }

                        // Step 5
                        if new_type == InputType::Radio {
                            self.radio_group_updated(self.radio_group_name().as_ref());
                        }

                        // Step 6
                        let mut textinput = self.textinput.borrow_mut();
                        let mut value = textinput.single_line_content().clone();
                        self.sanitize_value(&mut value);
                        textinput.set_content(value);
                        self.upcast::<Node>().dirty(NodeDamage::Other);

                        // Steps 7-9
                        if !previously_selectable && self.selection_api_applies() {
                            textinput.clear_selection_to_limit(Direction::Backward);
                        }
                    },
                    AttributeMutation::Removed => {
                        if self.input_type() == InputType::Radio {
                            broadcast_radio_checked(self, self.radio_group_name().as_ref());
                        }
                        self.input_type.set(InputType::default());
                        let el = self.upcast::<Element>();

                        let read_write = !(self.ReadOnly() || el.disabled_state());
                        el.set_read_write_state(read_write);
                    },
                }

                self.update_placeholder_shown_state();
                self.update_text_shadow_tree_placeholder(can_gc);
            },
            // FIXME(stevennovaryo): This is only reachable by Default and DefaultOn value mode. While others
            //                       are being handled in [Self::SetValue]. Should we merge this two together?
            local_name!("value") if !self.value_dirty.get() => {
                let value = mutation.new_value(attr).map(|value| (**value).to_owned());
                let mut value = value.map_or(DOMString::new(), DOMString::from);

                self.sanitize_value(&mut value);
                self.textinput.borrow_mut().set_content(value);
                self.update_placeholder_shown_state();

                self.upcast::<Node>().dirty(NodeDamage::Other);
            },
            local_name!("name") if self.input_type() == InputType::Radio => {
                self.radio_group_updated(
                    mutation.new_value(attr).as_ref().map(|name| name.as_atom()),
                );
            },
            local_name!("maxlength") => match *attr.value() {
                AttrValue::Int(_, value) => {
                    let mut textinput = self.textinput.borrow_mut();

                    if value < 0 {
                        textinput.set_max_length(None);
                    } else {
                        textinput.set_max_length(Some(UTF16CodeUnits(value as usize)))
                    }
                },
                _ => panic!("Expected an AttrValue::Int"),
            },
            local_name!("minlength") => match *attr.value() {
                AttrValue::Int(_, value) => {
                    let mut textinput = self.textinput.borrow_mut();

                    if value < 0 {
                        textinput.set_min_length(None);
                    } else {
                        textinput.set_min_length(Some(UTF16CodeUnits(value as usize)))
                    }
                },
                _ => panic!("Expected an AttrValue::Int"),
            },
            local_name!("placeholder") => {
                {
                    let mut placeholder = self.placeholder.borrow_mut();
                    placeholder.clear();
                    if let AttributeMutation::Set(_) = mutation {
                        placeholder
                            .extend(attr.value().chars().filter(|&c| c != '\n' && c != '\r'));
                    }
                }
                self.update_placeholder_shown_state();
                self.update_text_shadow_tree_placeholder(can_gc);
            },
            local_name!("readonly") => {
                if self.input_type().is_textual() {
                    let el = self.upcast::<Element>();
                    match mutation {
                        AttributeMutation::Set(_) => {
                            el.set_read_write_state(false);
                        },
                        AttributeMutation::Removed => {
                            el.set_read_write_state(!el.disabled_state());
                        },
                    }
                }
            },
            local_name!("form") => {
                self.form_attribute_mutated(mutation, can_gc);
            },
            _ => {},
        }

        self.value_changed(can_gc);
    }

    fn parse_plain_attribute(&self, name: &LocalName, value: DOMString) -> AttrValue {
        match *name {
            local_name!("accept") => AttrValue::from_comma_separated_tokenlist(value.into()),
            local_name!("size") => AttrValue::from_limited_u32(value.into(), DEFAULT_INPUT_SIZE),
            local_name!("type") => AttrValue::from_atomic(value.into()),
            local_name!("maxlength") => {
                AttrValue::from_limited_i32(value.into(), DEFAULT_MAX_LENGTH)
            },
            local_name!("minlength") => {
                AttrValue::from_limited_i32(value.into(), DEFAULT_MIN_LENGTH)
            },
            _ => self
                .super_type()
                .unwrap()
                .parse_plain_attribute(name, value),
        }
    }

    fn bind_to_tree(&self, context: &BindContext, can_gc: CanGc) {
        if let Some(s) = self.super_type() {
            s.bind_to_tree(context, can_gc);
        }
        self.upcast::<Element>()
            .check_ancestors_disabled_state_for_form_control();

        if self.input_type() == InputType::Radio {
            self.radio_group_updated(self.radio_group_name().as_ref());
        }

        self.value_changed(can_gc);
    }

    fn unbind_from_tree(&self, context: &UnbindContext, can_gc: CanGc) {
        let form_owner = self.form_owner();

        self.super_type().unwrap().unbind_from_tree(context, can_gc);

        let node = self.upcast::<Node>();
        let el = self.upcast::<Element>();
        if node
            .ancestors()
            .any(|ancestor| ancestor.is::<HTMLFieldSetElement>())
        {
            el.check_ancestors_disabled_state_for_form_control();
        } else {
            el.check_disabled_attribute();
        }

        if self.input_type() == InputType::Radio {
            let root = context.parent.GetRootNode(&GetRootNodeOptions::empty());
            for r in radio_group_iter(
                self,
                self.radio_group_name().as_ref(),
                form_owner.as_deref(),
                &root,
            ) {
                r.validity_state()
                    .perform_validation_and_update(ValidationFlags::all(), can_gc);
            }
        }

        self.validity_state()
            .perform_validation_and_update(ValidationFlags::all(), can_gc);
    }

    // This represents behavior for which the UIEvents spec and the
    // DOM/HTML specs are out of sync.
    // Compare:
    // https://w3c.github.io/uievents/#default-action
    // https://dom.spec.whatwg.org/#action-versus-occurance
    fn handle_event(&self, event: &Event, can_gc: CanGc) {
        if let Some(s) = self.super_type() {
            s.handle_event(event, can_gc);
        }

        if event.type_() == atom!("click") && !event.DefaultPrevented() {
            // WHATWG-specified activation behaviors are handled elsewhere;
            // this is for all the other things a UI click might do

            // TODO(#10083): set the editing position for text inputs

            if self.input_type().is_textual_or_password() &&
                // Check if we display a placeholder. Layout doesn't know about this.
                !self.textinput.borrow().is_empty()
            {
                if let Some(mouse_event) = event.downcast::<MouseEvent>() {
                    // dispatch_key_event (document.rs) triggers a click event when releasing
                    // the space key. There's no nice way to catch this so let's use this for
                    // now.
                    if let Some(point_in_target) = mouse_event.point_in_target() {
                        let window = self.owner_window();
                        let index = window
                            .text_index_query(self.upcast::<Node>(), point_in_target.to_untyped());
                        // Position the caret at the click position or at the end of the current
                        // value.
                        let edit_point_index = match index {
                            Some(i) => i,
                            None => self.textinput.borrow().char_count(),
                        };
                        self.textinput
                            .borrow_mut()
                            .set_edit_point_index(edit_point_index);
                        // trigger redraw
                        self.upcast::<Node>().dirty(NodeDamage::Other);
                        event.PreventDefault();
                    }
                }
            }
        } else if event.type_() == atom!("keydown") &&
            !event.DefaultPrevented() &&
            self.input_type().is_textual_or_password()
        {
            if let Some(keyevent) = event.downcast::<KeyboardEvent>() {
                // This can't be inlined, as holding on to textinput.borrow_mut()
                // during self.implicit_submission will cause a panic.
                let action = self.textinput.borrow_mut().handle_keydown(keyevent);
                match action {
                    TriggerDefaultAction => {
                        self.implicit_submission(can_gc);
                    },
                    DispatchInput => {
                        if event.IsTrusted() {
                            self.owner_global()
                                .task_manager()
                                .user_interaction_task_source()
                                .queue_event(
                                    self.upcast(),
                                    atom!("input"),
                                    EventBubbles::Bubbles,
                                    EventCancelable::NotCancelable,
                                );
                        }
                        self.value_dirty.set(true);
                        self.update_placeholder_shown_state();
                        self.upcast::<Node>().dirty(NodeDamage::Other);
                        event.mark_as_handled();
                    },
                    RedrawSelection => {
                        self.upcast::<Node>().dirty(NodeDamage::Other);
                        event.mark_as_handled();
                    },
                    Nothing => (),
                }
            }
        } else if event.type_() == atom!("keypress") &&
            !event.DefaultPrevented() &&
            self.input_type().is_textual_or_password()
        {
            // keypress should be deprecated and replaced by beforeinput.
            // keypress was supposed to fire "blur" and "focus" events
            // but already done in `document.rs`
        } else if (event.type_() == atom!("compositionstart") ||
            event.type_() == atom!("compositionupdate") ||
            event.type_() == atom!("compositionend")) &&
            self.input_type().is_textual_or_password()
        {
            if let Some(compositionevent) = event.downcast::<CompositionEvent>() {
                if event.type_() == atom!("compositionend") {
                    let _ = self
                        .textinput
                        .borrow_mut()
                        .handle_compositionend(compositionevent);
                    self.upcast::<Node>().dirty(NodeDamage::Other);
                } else if event.type_() == atom!("compositionupdate") {
                    let _ = self
                        .textinput
                        .borrow_mut()
                        .handle_compositionupdate(compositionevent);
                    self.upcast::<Node>().dirty(NodeDamage::Other);
                }
                event.mark_as_handled();
            }
        } else if let Some(clipboard_event) = event.downcast::<ClipboardEvent>() {
            let reaction = self
                .textinput
                .borrow_mut()
                .handle_clipboard_event(clipboard_event);
            if reaction.contains(ClipboardEventReaction::FireClipboardChangedEvent) {
                self.owner_document()
                    .event_handler()
                    .fire_clipboardchange_event(can_gc);
            }
            if reaction.contains(ClipboardEventReaction::QueueInputEvent) {
                self.owner_global()
                    .task_manager()
                    .user_interaction_task_source()
                    .queue_event(
                        self.upcast(),
                        atom!("input"),
                        EventBubbles::Bubbles,
                        EventCancelable::NotCancelable,
                    );
            }
            if !reaction.is_empty() {
                self.upcast::<Node>().dirty(NodeDamage::ContentOrHeritage);
            }
        }

        self.value_changed(can_gc);
    }

    // https://html.spec.whatwg.org/multipage/#the-input-element%3Aconcept-node-clone-ext
    fn cloning_steps(
        &self,
        copy: &Node,
        maybe_doc: Option<&Document>,
        clone_children: CloneChildrenFlag,
        can_gc: CanGc,
    ) {
        if let Some(s) = self.super_type() {
            s.cloning_steps(copy, maybe_doc, clone_children, can_gc);
        }
        let elem = copy.downcast::<HTMLInputElement>().unwrap();
        elem.value_dirty.set(self.value_dirty.get());
        elem.checked_changed.set(self.checked_changed.get());
        elem.upcast::<Element>()
            .set_state(ElementState::CHECKED, self.Checked());
        elem.textinput
            .borrow_mut()
            .set_content(self.textinput.borrow().get_content());
        self.value_changed(can_gc);
    }
}

impl FormControl for HTMLInputElement {
    fn form_owner(&self) -> Option<DomRoot<HTMLFormElement>> {
        self.form_owner.get()
    }

    fn set_form_owner(&self, form: Option<&HTMLFormElement>) {
        self.form_owner.set(form);
    }

    fn to_element(&self) -> &Element {
        self.upcast::<Element>()
    }
}

impl Validatable for HTMLInputElement {
    fn as_element(&self) -> &Element {
        self.upcast()
    }

    fn validity_state(&self) -> DomRoot<ValidityState> {
        self.validity_state
            .or_init(|| ValidityState::new(&self.owner_window(), self.upcast(), CanGc::note()))
    }

    fn is_instance_validatable(&self) -> bool {
        // https://html.spec.whatwg.org/multipage/#hidden-state-(type%3Dhidden)%3Abarred-from-constraint-validation
        // https://html.spec.whatwg.org/multipage/#button-state-(type%3Dbutton)%3Abarred-from-constraint-validation
        // https://html.spec.whatwg.org/multipage/#reset-button-state-(type%3Dreset)%3Abarred-from-constraint-validation
        // https://html.spec.whatwg.org/multipage/#enabling-and-disabling-form-controls%3A-the-disabled-attribute%3Abarred-from-constraint-validation
        // https://html.spec.whatwg.org/multipage/#the-readonly-attribute%3Abarred-from-constraint-validation
        // https://html.spec.whatwg.org/multipage/#the-datalist-element%3Abarred-from-constraint-validation
        match self.input_type() {
            InputType::Hidden | InputType::Button | InputType::Reset => false,
            _ => {
                !(self.upcast::<Element>().disabled_state() ||
                    self.ReadOnly() ||
                    is_barred_by_datalist_ancestor(self.upcast()))
            },
        }
    }

    fn perform_validation(
        &self,
        validate_flags: ValidationFlags,
        _can_gc: CanGc,
    ) -> ValidationFlags {
        let mut failed_flags = ValidationFlags::empty();
        let value = self.Value();

        if validate_flags.contains(ValidationFlags::VALUE_MISSING) &&
            self.suffers_from_being_missing(&value)
        {
            failed_flags.insert(ValidationFlags::VALUE_MISSING);
        }

        if validate_flags.contains(ValidationFlags::TYPE_MISMATCH) &&
            self.suffers_from_type_mismatch(&value)
        {
            failed_flags.insert(ValidationFlags::TYPE_MISMATCH);
        }

        if validate_flags.contains(ValidationFlags::PATTERN_MISMATCH) &&
            self.suffers_from_pattern_mismatch(&value)
        {
            failed_flags.insert(ValidationFlags::PATTERN_MISMATCH);
        }

        if validate_flags.contains(ValidationFlags::BAD_INPUT) &&
            self.suffers_from_bad_input(&value)
        {
            failed_flags.insert(ValidationFlags::BAD_INPUT);
        }

        if validate_flags.intersects(ValidationFlags::TOO_LONG | ValidationFlags::TOO_SHORT) {
            failed_flags |= self.suffers_from_length_issues(&value);
        }

        if validate_flags.intersects(
            ValidationFlags::RANGE_UNDERFLOW |
                ValidationFlags::RANGE_OVERFLOW |
                ValidationFlags::STEP_MISMATCH,
        ) {
            failed_flags |= self.suffers_from_range_issues(&value);
        }

        failed_flags & validate_flags
    }
}

impl Activatable for HTMLInputElement {
    fn as_element(&self) -> &Element {
        self.upcast()
    }

    fn is_instance_activatable(&self) -> bool {
        match self.input_type() {
            // https://html.spec.whatwg.org/multipage/#submit-button-state-(type=submit):input-activation-behavior
            // https://html.spec.whatwg.org/multipage/#reset-button-state-(type=reset):input-activation-behavior
            // https://html.spec.whatwg.org/multipage/#file-upload-state-(type=file):input-activation-behavior
            // https://html.spec.whatwg.org/multipage/#image-button-state-(type=image):input-activation-behavior
            InputType::Submit | InputType::Reset | InputType::File | InputType::Image => {
                self.is_mutable()
            },
            // https://html.spec.whatwg.org/multipage/#checkbox-state-(type=checkbox):input-activation-behavior
            // https://html.spec.whatwg.org/multipage/#radio-button-state-(type=radio):input-activation-behavior
            // https://html.spec.whatwg.org/multipage/#color-state-(type=color):input-activation-behavior
            InputType::Checkbox | InputType::Radio | InputType::Color => true,
            _ => false,
        }
    }

    // https://dom.spec.whatwg.org/#eventtarget-legacy-pre-activation-behavior
    fn legacy_pre_activation_behavior(&self, can_gc: CanGc) -> Option<InputActivationState> {
        let ty = self.input_type();
        let activation_state = match ty {
            InputType::Checkbox => {
                let was_checked = self.Checked();
                let was_indeterminate = self.Indeterminate();
                self.SetIndeterminate(false);
                self.SetChecked(!was_checked);
                Some(InputActivationState {
                    checked: was_checked,
                    indeterminate: was_indeterminate,
                    checked_radio: None,
                    old_type: InputType::Checkbox,
                })
            },
            InputType::Radio => {
                let root = self
                    .upcast::<Node>()
                    .GetRootNode(&GetRootNodeOptions::empty());
                let form_owner = self.form_owner();
                let checked_member = radio_group_iter(
                    self,
                    self.radio_group_name().as_ref(),
                    form_owner.as_deref(),
                    &root,
                )
                .find(|r| r.Checked());
                let was_checked = self.Checked();
                self.SetChecked(true);
                Some(InputActivationState {
                    checked: was_checked,
                    indeterminate: false,
                    checked_radio: checked_member.as_deref().map(DomRoot::from_ref),
                    old_type: InputType::Radio,
                })
            },
            _ => None,
        };

        if activation_state.is_some() {
            self.value_changed(can_gc);
        }

        activation_state
    }

    // https://dom.spec.whatwg.org/#eventtarget-legacy-canceled-activation-behavior
    fn legacy_canceled_activation_behavior(
        &self,
        cache: Option<InputActivationState>,
        can_gc: CanGc,
    ) {
        // Step 1
        let ty = self.input_type();
        let cache = match cache {
            Some(cache) => {
                if cache.old_type != ty {
                    // Type changed, abandon ship
                    // https://www.w3.org/Bugs/Public/show_bug.cgi?id=27414
                    return;
                }
                cache
            },
            None => {
                return;
            },
        };

        match ty {
            // Step 2
            InputType::Checkbox => {
                self.SetIndeterminate(cache.indeterminate);
                self.SetChecked(cache.checked);
            },
            // Step 3
            InputType::Radio => {
                if let Some(ref o) = cache.checked_radio {
                    let tree_root = self
                        .upcast::<Node>()
                        .GetRootNode(&GetRootNodeOptions::empty());
                    // Avoiding iterating through the whole tree here, instead
                    // we can check if the conditions for radio group siblings apply
                    if in_same_group(
                        o,
                        self.form_owner().as_deref(),
                        self.radio_group_name().as_ref(),
                        Some(&*tree_root),
                    ) {
                        o.SetChecked(true);
                    } else {
                        self.SetChecked(false);
                    }
                } else {
                    self.SetChecked(false);
                }
            },
            _ => (),
        }

        self.value_changed(can_gc);
    }

    /// <https://html.spec.whatwg.org/multipage/#input-activation-behavior>
    fn activation_behavior(&self, _event: &Event, _target: &EventTarget, can_gc: CanGc) {
        match self.input_type() {
            // https://html.spec.whatwg.org/multipage/#submit-button-state-(type=submit):activation-behavior
            // https://html.spec.whatwg.org/multipage/#submit-button-state-(type=image):activation-behavior
            InputType::Submit | InputType::Image => {
                // Step 1: If the element does not have a form owner, then return.
                if let Some(form_owner) = self.form_owner() {
                    // Step 2: If the element's node document is not fully active, then return.
                    let document = self.owner_document();

                    if !document.is_fully_active() {
                        return;
                    }

                    // Step 3: Submit the element's form owner from the element with userInvolvement
                    // set to event's user navigation involvement.
                    form_owner.submit(
                        SubmittedFrom::NotFromForm,
                        FormSubmitterElement::Input(self),
                        can_gc,
                    )
                }
            },
            InputType::Reset => {
                // https://html.spec.whatwg.org/multipage/#reset-button-state-(type=reset):activation-behavior
                // Step 1: If the element does not have a form owner, then return.
                if let Some(form_owner) = self.form_owner() {
                    let document = self.owner_document();

                    // Step 2: If the element's node document is not fully active, then return.
                    if !document.is_fully_active() {
                        return;
                    }

                    // Step 3: Reset the form owner from the element.
                    form_owner.reset(ResetFrom::NotFromForm, can_gc);
                }
            },
            // https://html.spec.whatwg.org/multipage/#checkbox-state-(type=checkbox):activation-behavior
            // https://html.spec.whatwg.org/multipage/#radio-button-state-(type=radio):activation-behavior
            InputType::Checkbox | InputType::Radio => {
                // Step 1: If the element is not connected, then return.
                if !self.upcast::<Node>().is_connected() {
                    return;
                }

                let target = self.upcast::<EventTarget>();

                // Step 2: Fire an event named input at the element with the bubbles and composed
                // attributes initialized to true.
                target.fire_bubbling_event(atom!("input"), can_gc);

                // Step 3: Fire an event named change at the element with the bubbles attribute
                // initialized to true.
                target.fire_bubbling_event(atom!("change"), can_gc);
            },
            // https://html.spec.whatwg.org/multipage/#file-upload-state-(type=file):input-activation-behavior
            InputType::File => {
                let _ = self.select_files(None, can_gc);
            },
            // https://html.spec.whatwg.org/multipage/#color-state-(type=color):input-activation-behavior
            InputType::Color => {
                self.show_the_picker_if_applicable(can_gc);
            },
            _ => (),
        }
    }
}

// https://html.spec.whatwg.org/multipage/#attr-input-accept
fn filter_from_accept(s: &DOMString) -> Vec<FilterPattern> {
    let mut filter = vec![];
    for p in split_commas(s) {
        let p = p.trim();
        if let Some('.') = p.chars().next() {
            filter.push(FilterPattern(p[1..].to_string()));
        } else if let Some(exts) = mime_guess::get_mime_extensions_str(p) {
            for ext in exts {
                filter.push(FilterPattern(ext.to_string()));
            }
        }
    }

    filter
}

fn round_halves_positive(n: f64) -> f64 {
    // WHATWG specs about input steps say to round to the nearest step,
    // rounding halves always to positive infinity.
    // This differs from Rust's .round() in the case of -X.5.
    if n.fract() == -0.5 {
        n.ceil()
    } else {
        n.round()
    }
}

// This is used to compile JS-compatible regex provided in pattern attribute
// that matches only the entirety of string.
// https://html.spec.whatwg.org/multipage/#compiled-pattern-regular-expression
fn compile_pattern(cx: SafeJSContext, pattern_str: &str, out_regex: MutableHandleObject) -> bool {
    // First check if pattern compiles...
    if check_js_regex_syntax(cx, pattern_str) {
        // ...and if it does make pattern that matches only the entirety of string
        let pattern_str = format!("^(?:{})$", pattern_str);
        let flags = RegExpFlags {
            flags_: RegExpFlag_UnicodeSets,
        };
        new_js_regex(cx, &pattern_str, flags, out_regex)
    } else {
        false
    }
}

#[allow(unsafe_code)]
/// Check if the pattern by itself is valid first, and not that it only becomes
/// valid once we add ^(?: and )$.
fn check_js_regex_syntax(cx: SafeJSContext, pattern: &str) -> bool {
    let pattern: Vec<u16> = pattern.encode_utf16().collect();
    unsafe {
        rooted!(in(*cx) let mut exception = UndefinedValue());

        let valid = CheckRegExpSyntax(
            *cx,
            pattern.as_ptr(),
            pattern.len(),
            RegExpFlags {
                flags_: RegExpFlag_UnicodeSets,
            },
            exception.handle_mut(),
        );

        if !valid {
            JS_ClearPendingException(*cx);
            return false;
        }

        // TODO(cybai): report `exception` to devtools
        // exception will be `undefined` if the regex is valid
        exception.is_undefined()
    }
}

// TODO: This is also used in the URLPattern implementation. Consider moving it into mozjs or some other
// shared module
#[allow(unsafe_code)]
pub(crate) fn new_js_regex(
    cx: SafeJSContext,
    pattern: &str,
    flags: RegExpFlags,
    mut out_regex: MutableHandleObject,
) -> bool {
    let pattern: Vec<u16> = pattern.encode_utf16().collect();
    unsafe {
        out_regex.set(NewUCRegExpObject(
            *cx,
            pattern.as_ptr(),
            pattern.len(),
            flags,
        ));
        if out_regex.is_null() {
            JS_ClearPendingException(*cx);
            return false;
        }
    }
    true
}

#[allow(unsafe_code)]
fn matches_js_regex(cx: SafeJSContext, regex_obj: HandleObject, value: &str) -> Result<bool, ()> {
    let mut value: Vec<u16> = value.encode_utf16().collect();

    unsafe {
        let mut is_regex = false;
        assert!(ObjectIsRegExp(*cx, regex_obj, &mut is_regex));
        assert!(is_regex);

        rooted!(in(*cx) let mut rval = UndefinedValue());
        let mut index = 0;

        let ok = ExecuteRegExpNoStatics(
            *cx,
            regex_obj,
            value.as_mut_ptr(),
            value.len(),
            &mut index,
            true,
            rval.handle_mut(),
        );

        if ok {
            Ok(!rval.is_null())
        } else {
            JS_ClearPendingException(*cx);
            Err(())
        }
    }
}