diff --git a/components/layout/dom_traversal.rs b/components/layout/dom_traversal.rs
index 8bf6d919fa3..4da6aa48b55 100644
--- a/components/layout/dom_traversal.rs
+++ b/components/layout/dom_traversal.rs
@@ -59,8 +59,14 @@ impl<'dom> NodeAndStyleInfo<'dom> {
         }
     }
 
+    /// Whether this is a container for the editable text within a single-line text input.
+    /// This is used to solve the special case of line height for a text editor.
+    /// <https://html.spec.whatwg.org/multipage/#the-input-element-as-a-text-entry-widget>
+    // FIXME(stevennovaryo): Now, this would also refer to HTMLInputElement, to handle input
+    //                       elements without shadow DOM.
     pub(crate) fn is_single_line_text_input(&self) -> bool {
-        self.node.type_id() == LayoutNodeType::Element(LayoutElementType::HTMLInputElement)
+        self.node.type_id() == LayoutNodeType::Element(LayoutElementType::HTMLInputElement) ||
+            self.node.is_text_control_inner_editor()
     }
 
     pub(crate) fn pseudo(
diff --git a/components/script/dom/document.rs b/components/script/dom/document.rs
index fd4faf0ee43..68efa07537c 100644
--- a/components/script/dom/document.rs
+++ b/components/script/dom/document.rs
@@ -1556,11 +1556,14 @@ impl Document {
                 return;
             }
 
+            // For a node within a text input UA shadow DOM, delegate the focus target into its shadow host.
+            // TODO: This focus delegation should be done with shadow DOM delegateFocus attribute.
+            let target_el = el.find_focusable_shadow_host_if_necessary();
+
             self.begin_focus_transaction();
-            // Try to focus `el`. If it's not focusable, focus the document
-            // instead.
+            // Try to focus `el`. If it's not focusable, focus the document instead.
             self.request_focus(None, FocusInitiator::Local, can_gc);
-            self.request_focus(Some(&*el), FocusInitiator::Local, can_gc);
+            self.request_focus(target_el.as_deref(), FocusInitiator::Local, can_gc);
         }
 
         let dom_event = DomRoot::upcast::<Event>(MouseEvent::for_platform_mouse_event(
diff --git a/components/script/dom/element.rs b/components/script/dom/element.rs
index af8dbebd20e..311991804e9 100644
--- a/components/script/dom/element.rs
+++ b/components/script/dom/element.rs
@@ -1662,6 +1662,27 @@ impl Element {
         )
     }
 
+    /// Returns the focusable shadow host if this is a text control inner editor.
+    /// This is a workaround for the focus delegation of shadow DOM and should be
+    /// used only to delegate focusable inner editor of [HTMLInputElement] and
+    /// [HTMLTextAreaElement].
+    pub(crate) fn find_focusable_shadow_host_if_necessary(&self) -> Option<DomRoot<Element>> {
+        if self.is_focusable_area() {
+            Some(DomRoot::from_ref(self))
+        } else if self.upcast::<Node>().is_text_control_inner_editor() {
+            let containing_shadow_host = self.containing_shadow_root().map(|root| root.Host());
+            assert!(
+                containing_shadow_host
+                    .as_ref()
+                    .is_some_and(|e| e.is_focusable_area()),
+                "Containing shadow host is not focusable"
+            );
+            containing_shadow_host
+        } else {
+            None
+        }
+    }
+
     pub(crate) fn is_actually_disabled(&self) -> bool {
         let node = self.upcast::<Node>();
         match node.type_id() {
diff --git a/components/script/dom/htmlinputelement.rs b/components/script/dom/htmlinputelement.rs
index e914ad7f5d1..ee61421dfe8 100644
--- a/components/script/dom/htmlinputelement.rs
+++ b/components/script/dom/htmlinputelement.rs
@@ -101,6 +101,29 @@ 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 `<input type=text>`. 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.
+struct InputTypeTextShadowTree {
+    text_container: Dom<HTMLDivElement>,
+    placeholder_container: Dom<HTMLDivElement>,
+}
+
 #[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=range>`.
@@ -111,10 +134,49 @@ struct InputTypeColorShadowTree {
     color_value: Dom<HTMLDivElement>,
 }
 
+// FIXME: These styles should be inside UA stylesheet, but it is not possible without internal pseudo element support.
+const TEXT_TREE_STYLE: &str = "
+#input-editor::selection {
+    background: rgba(176, 214, 255, 1.0);
+    color: black;
+}
+
+:host:not(:placeholder-shown) #input-placeholder {
+    visibility: hidden !important
+}
+
+#input-editor {
+    overflow-wrap: normal;
+    pointer-events: auto;
+}
+
+#input-container {
+    position: relative;
+    height: 100%;
+    pointer-events: none;
+    display: flex;
+}
+
+#input-editor, #input-placeholder {
+    white-space: pre;
+    margin-block: auto !important;
+    inset-block: 0 !important;
+    block-size: fit-content !important;
+}
+
+#input-placeholder {
+    overflow: hidden !important;
+    position: absolute !important;
+    color: grey;
+    pointer-events: none !important;
+}
+";
+
 #[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
 }
@@ -1071,7 +1133,7 @@ impl HTMLInputElement {
                     ShadowRootMode::Closed,
                     false,
                     false,
-                    false,
+                    true,
                     SlotAssignmentMode::Manual,
                     can_gc,
                 )
@@ -1079,6 +1141,92 @@ impl HTMLInputElement {
         })
     }
 
+    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);
+        inner_container
+            .upcast::<Element>()
+            .SetId(DOMString::from("input-container"), can_gc);
+        shadow_root
+            .upcast::<Node>()
+            .AppendChild(inner_container.upcast::<Node>(), can_gc)
+            .unwrap();
+
+        let placeholder_container =
+            HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
+        placeholder_container
+            .upcast::<Element>()
+            .SetId(DOMString::from("input-placeholder"), can_gc);
+        inner_container
+            .upcast::<Node>()
+            .AppendChild(placeholder_container.upcast::<Node>(), can_gc)
+            .unwrap();
+
+        let text_container = HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
+        text_container
+            .upcast::<Element>()
+            .SetId(DOMString::from("input-editor"), can_gc);
+        text_container
+            .upcast::<Node>()
+            .set_text_control_inner_editor();
+        inner_container
+            .upcast::<Node>()
+            .AppendChild(text_container.upcast::<Node>(), can_gc)
+            .unwrap();
+
+        let style = HTMLStyleElement::new(
+            local_name!("style"),
+            None,
+            &document,
+            None,
+            ElementCreator::ScriptCreated,
+            can_gc,
+        );
+        // TODO(stevennovaryo): Either use UA stylesheet with internal pseudo element or preemptively parse
+        //                      the stylesheet to reduce the costly operation and avoid CSP related error.
+        style
+            .upcast::<Node>()
+            .SetTextContent(Some(DOMString::from(TEXT_TREE_STYLE)), can_gc);
+        shadow_root
+            .upcast::<Node>()
+            .AppendChild(style.upcast::<Node>(), can_gc)
+            .unwrap();
+
+        let _ = self
+            .shadow_tree
+            .borrow_mut()
+            .insert(ShadowTree::Text(InputTypeTextShadowTree {
+                text_container: text_container.as_traced(),
+                placeholder_container: placeholder_container.as_traced(),
+            }));
+    }
+
+    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);
@@ -1136,27 +1284,53 @@ impl HTMLInputElement {
         let shadow_tree = self.shadow_tree.borrow();
         Ref::filter_map(shadow_tree, |shadow_tree| {
             let shadow_tree = shadow_tree.as_ref()?;
-            let ShadowTree::Color(color_tree) = shadow_tree;
-            Some(color_tree)
+            match shadow_tree {
+                ShadowTree::Color(color_tree) => Some(color_tree),
+                _ => None,
+            }
         })
         .ok()
         .expect("UA shadow tree was not created")
     }
 
     fn update_shadow_tree_if_needed(&self, can_gc: CanGc) {
-        if 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);
+        match self.input_type() {
+            InputType::Text => {
+                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: Is there a less hacky way to do this?
+                let value_text = match value.is_empty() {
+                    false => value,
+                    true => "\u{200B}".into(),
+                };
+
+                text_shadow_tree
+                    .text_container
+                    .upcast::<Node>()
+                    .SetTextContent(Some(value_text), can_gc);
+            },
+            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);
+            },
+            _ => {},
         }
     }
 }
@@ -1465,22 +1639,29 @@ impl HTMLInputElementMethods<crate::DomTypeHolder> for HTMLInputElement {
     fn SetValue(&self, mut value: DOMString, can_gc: CanGc) -> ErrorResult {
         match self.value_mode() {
             ValueMode::Value => {
-                // Step 3.
-                self.value_dirty.set(true);
+                {
+                    // Step 3.
+                    self.value_dirty.set(true);
 
-                // Step 4.
-                self.sanitize_value(&mut value);
+                    // 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);
+                    let mut textinput = self.textinput.borrow_mut();
 
                     // Step 5.
-                    textinput.clear_selection_to_limit(Direction::Forward);
+                    if *textinput.single_line_content() != value {
+                        // Steps 1-2
+                        textinput.set_content(value);
+
+                        // Step 5.
+                        textinput.clear_selection_to_limit(Direction::Forward);
+                    }
                 }
+
+                // Additionaly, update the placeholder shown state. This is
+                // normally being done in the attributed mutated. And, being
+                // done in another scope to prevent borrow checker issues.
+                self.update_placeholder_shown_state();
             },
             ValueMode::Default | ValueMode::DefaultOn => {
                 self.upcast::<Element>()
@@ -2063,6 +2244,19 @@ impl HTMLInputElement {
         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.input_type() != InputType::Text {
+            return;
+        }
+
+        self.text_shadow_tree(can_gc)
+            .placeholder_container
+            .upcast::<Node>()
+            .SetTextContent(Some(self.placeholder.borrow().clone()), can_gc);
+    }
+
     // https://html.spec.whatwg.org/multipage/#file-upload-state-(type=file)
     // Select files by invoking UI or by passed in argument
     fn select_files(&self, opt_test_paths: Option<Vec<DOMString>>, can_gc: CanGc) {
@@ -2688,8 +2882,11 @@ impl VirtualMethods for HTMLInputElement {
                     },
                 }
 
+                self.update_text_shadow_tree_placeholder(can_gc);
                 self.update_placeholder_shown_state();
             },
+            // 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);
@@ -2738,6 +2935,7 @@ impl VirtualMethods for HTMLInputElement {
                             .extend(attr.value().chars().filter(|&c| c != '\n' && c != '\r'));
                     }
                 }
+                self.update_text_shadow_tree_placeholder(can_gc);
                 self.update_placeholder_shown_state();
             },
             local_name!("readonly") => {
diff --git a/components/script/dom/node.rs b/components/script/dom/node.rs
index 691b3a38f19..cd0a41ab9f6 100644
--- a/components/script/dom/node.rs
+++ b/components/script/dom/node.rs
@@ -230,6 +230,10 @@ bitflags! {
         /// Whether this node has a weird parser insertion mode. i.e whether setting innerHTML
         /// needs extra work or not
         const HAS_WEIRD_PARSER_INSERTION_MODE = 1 << 11;
+
+        /// Whether this node serves as the text container for editable content of
+        /// <input> or <textarea> element.
+        const IS_TEXT_CONTROL_INNER_EDITOR = 1 << 12;
     }
 }
 
@@ -697,6 +701,16 @@ impl Node {
         self.flags.get().contains(NodeFlags::IS_CONNECTED)
     }
 
+    pub(crate) fn set_text_control_inner_editor(&self) {
+        self.set_flag(NodeFlags::IS_TEXT_CONTROL_INNER_EDITOR, true)
+    }
+
+    pub(crate) fn is_text_control_inner_editor(&self) -> bool {
+        self.flags
+            .get()
+            .contains(NodeFlags::IS_TEXT_CONTROL_INNER_EDITOR)
+    }
+
     /// Returns the type ID of this node.
     pub(crate) fn type_id(&self) -> NodeTypeId {
         match *self.eventtarget.type_id() {
@@ -1579,6 +1593,7 @@ pub(crate) trait LayoutNodeHelpers<'dom> {
     fn assigned_slot_for_layout(self) -> Option<LayoutDom<'dom, HTMLSlotElement>>;
 
     fn is_element_for_layout(&self) -> bool;
+    fn is_text_node_for_layout(&self) -> bool;
     unsafe fn get_flag(self, flag: NodeFlags) -> bool;
     unsafe fn set_flag(self, flag: NodeFlags, value: bool);
 
@@ -1614,6 +1629,9 @@ pub(crate) trait LayoutNodeHelpers<'dom> {
 
     /// Whether this element is a `<input>` rendered as text or a `<textarea>`.
     fn is_text_input(&self) -> bool;
+
+    /// Whether this element serve as a container of editable text for a text input.
+    fn is_text_control_inner_editor(&self) -> bool;
     fn text_content(self) -> Cow<'dom, str>;
     fn selection(self) -> Option<Range<usize>>;
     fn image_url(self) -> Option<ServoUrl>;
@@ -1646,6 +1664,11 @@ impl<'dom> LayoutNodeHelpers<'dom> for LayoutDom<'dom, Node> {
         (*self).is::<Element>()
     }
 
+    fn is_text_node_for_layout(&self) -> bool {
+        self.type_id_for_layout() ==
+            NodeTypeId::CharacterData(CharacterDataTypeId::Text(TextTypeId::Text))
+    }
+
     #[inline]
     fn composed_parent_node_ref(self) -> Option<LayoutDom<'dom, Node>> {
         let parent = self.parent_node_ref();
@@ -1787,8 +1810,8 @@ impl<'dom> LayoutNodeHelpers<'dom> for LayoutDom<'dom, Node> {
         {
             let input = self.unsafe_get().downcast::<HTMLInputElement>().unwrap();
 
-            // FIXME: All the non-color input types currently render as text
-            input.input_type() != InputType::Color
+            // FIXME: All the non-color and non-text input types currently render as text
+            !matches!(input.input_type(), InputType::Color | InputType::Text)
         } else {
             type_id ==
                 NodeTypeId::Element(ElementTypeId::HTMLElement(
@@ -1797,6 +1820,10 @@ impl<'dom> LayoutNodeHelpers<'dom> for LayoutDom<'dom, Node> {
         }
     }
 
+    fn is_text_control_inner_editor(&self) -> bool {
+        self.unsafe_get().is_text_control_inner_editor()
+    }
+
     fn text_content(self) -> Cow<'dom, str> {
         if let Some(text) = self.downcast::<Text>() {
             return text.upcast().data_for_layout().into();
@@ -1814,6 +1841,25 @@ impl<'dom> LayoutNodeHelpers<'dom> for LayoutDom<'dom, Node> {
     }
 
     fn selection(self) -> Option<Range<usize>> {
+        // This node is a text node of a text control inner editor in a <input> or <textarea> element.
+        // So we should find those corresponding element, and get its selection.
+        if self.is_text_node_for_layout() &&
+            self.parent_node_ref()
+                .is_some_and(|parent| parent.is_text_control_inner_editor())
+        {
+            let shadow_root = self.containing_shadow_root_for_layout();
+            if let Some(containing_shadow_host) = shadow_root.map(|root| root.get_host_for_layout())
+            {
+                if let Some(area) = containing_shadow_host.downcast::<HTMLTextAreaElement>() {
+                    return area.selection_for_layout();
+                }
+
+                if let Some(input) = containing_shadow_host.downcast::<HTMLInputElement>() {
+                    return input.selection_for_layout();
+                }
+            }
+        }
+
         if let Some(area) = self.downcast::<HTMLTextAreaElement>() {
             return area.selection_for_layout();
         }
diff --git a/components/script/layout_dom/node.rs b/components/script/layout_dom/node.rs
index dfb921b1ded..685fd8b9333 100644
--- a/components/script/layout_dom/node.rs
+++ b/components/script/layout_dom/node.rs
@@ -28,7 +28,7 @@ use style::selector_parser::PseudoElement;
 use super::{
     ServoLayoutDocument, ServoLayoutElement, ServoShadowRoot, ServoThreadSafeLayoutElement,
 };
-use crate::dom::bindings::inheritance::{CharacterDataTypeId, NodeTypeId, TextTypeId};
+use crate::dom::bindings::inheritance::NodeTypeId;
 use crate::dom::bindings::root::LayoutDom;
 use crate::dom::element::{Element, LayoutElementHelpers};
 use crate::dom::node::{LayoutNodeHelpers, Node, NodeFlags, NodeTypeIdWrapper};
@@ -100,6 +100,10 @@ impl<'dom> ServoLayoutNode<'dom> {
     pub fn is_text_input(&self) -> bool {
         self.node.is_text_input()
     }
+
+    pub fn is_text_control_inner_editor(&self) -> bool {
+        self.node.is_text_control_inner_editor()
+    }
 }
 
 impl style::dom::NodeInfo for ServoLayoutNode<'_> {
@@ -108,8 +112,7 @@ impl style::dom::NodeInfo for ServoLayoutNode<'_> {
     }
 
     fn is_text_node(&self) -> bool {
-        self.script_type_id() ==
-            NodeTypeId::CharacterData(CharacterDataTypeId::Text(TextTypeId::Text))
+        self.node.is_text_node_for_layout()
     }
 }
 
diff --git a/tests/wpt/meta/content-security-policy/form-action/form-action-src-default-ignored.sub.html.ini b/tests/wpt/meta/content-security-policy/form-action/form-action-src-default-ignored.sub.html.ini
new file mode 100644
index 00000000000..cdeba1865a5
--- /dev/null
+++ b/tests/wpt/meta/content-security-policy/form-action/form-action-src-default-ignored.sub.html.ini
@@ -0,0 +1,3 @@
+[form-action-src-default-ignored.sub.html]
+  [Expecting logs: ["PASS","TEST COMPLETE"\]]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-009.html.ini b/tests/wpt/meta/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-009.html.ini
new file mode 100644
index 00000000000..28b76cfdb3b
--- /dev/null
+++ b/tests/wpt/meta/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-009.html.ini
@@ -0,0 +1,2 @@
+[spelling-markers-009.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-010.html.ini b/tests/wpt/meta/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-010.html.ini
new file mode 100644
index 00000000000..5670828676c
--- /dev/null
+++ b/tests/wpt/meta/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-010.html.ini
@@ -0,0 +1,2 @@
+[spelling-markers-010.html]
+  expected: FAIL
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index cce286bb674..1fda350b1ab 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -91,6 +91,86 @@
    }
   },
   "reftest": {
+   "appearance": {
+    "input-text-definite-width.html": [
+     "fda46f8af9c14cef3911ec809054624204848b9d",
+     [
+      "appearance/input-text-definite-width.html",
+      [
+       [
+        "/_mozilla/appearance/input-text-definite-width-ref.html",
+        "=="
+       ]
+      ],
+      {}
+     ]
+    ],
+    "input-text-empty.html": [
+     "bd5f5f5a21ec0ce028922a6764de41dc904a1eb1",
+     [
+      "appearance/input-text-empty.html",
+      [
+       [
+        "/_mozilla/appearance/input-text-empty-ref.html",
+        "=="
+       ]
+      ],
+      {}
+     ]
+    ],
+    "input-text-nonempty-placeholder.html": [
+     "e075663cb6ae708b313b3cd5cd69f78c51b4bc1f",
+     [
+      "appearance/input-text-nonempty-placeholder.html",
+      [
+       [
+        "/_mozilla/appearance/input-text-nonempty-placeholder-ref.html",
+        "=="
+       ]
+      ],
+      {}
+     ]
+    ],
+    "input-text-overflow.html": [
+     "52db07c0f0274d2b7b086d7017982145c25918da",
+     [
+      "appearance/input-text-overflow.html",
+      [
+       [
+        "/_mozilla/appearance/input-text-overflow-ref.html",
+        "=="
+       ]
+      ],
+      {}
+     ]
+    ],
+    "input-text-placeholder-overflow.html": [
+     "c4d77ae2a22a5b7972f2798b8ca78742b81bacc4",
+     [
+      "appearance/input-text-placeholder-overflow.html",
+      [
+       [
+        "/_mozilla/appearance/input-text-placeholder-overflow-ref.html",
+        "=="
+       ]
+      ],
+      {}
+     ]
+    ],
+    "input-text-placeholder.html": [
+     "d75acade78038b14529135b1d63c0ac5a168a87b",
+     [
+      "appearance/input-text-placeholder.html",
+      [
+       [
+        "/_mozilla/appearance/input-text-placeholder-ref.html",
+        "=="
+       ]
+      ],
+      {}
+     ]
+    ]
+   },
    "css": {
     "abs-overflow-stackingcontext.html": [
      "264df01aa64e0abe9ea3a75e57452c27d53a904f",
@@ -8075,6 +8155,38 @@
     "b485d435a63ada28eabe976b49a8a580725e7508",
     []
    ],
+   "appearance": {
+    "input-text-definite-width-ref.html": [
+     "86f7937755750261ed3b06dfe11e78a251b9d175",
+     []
+    ],
+    "input-text-empty-ref.html": [
+     "437c9988a13e094d870f67c8de0dd0becdeece76",
+     []
+    ],
+    "input-text-nonempty-placeholder-ref.html": [
+     "5415dfb2a4a88dc3bfed6ad04e23f288534351e4",
+     []
+    ],
+    "input-text-overflow-ref.html": [
+     "4cece657a2a09cfe3f1d91d49f0c9d76f5714516",
+     []
+    ],
+    "input-text-placeholder-overflow-ref.html": [
+     "0cccfff638c0d8687a3582310c73233b7d883b1a",
+     []
+    ],
+    "input-text-placeholder-ref.html": [
+     "fa5b60bdabdf2b9b818ebe66bfc7f2711173b88b",
+     []
+    ],
+    "supports": {
+     "input-text-ref.css": [
+      "8cf00d493138285e50aa510273abae98c099ae8b",
+      []
+     ]
+    }
+   },
    "bluetooth": {
     "bluetooth-helpers.js": [
      "16a280cca298bcaa5796b36b48d331bfd15baae8",
diff --git a/tests/wpt/mozilla/meta/css/input_placeholder.html.ini b/tests/wpt/mozilla/meta/css/input_placeholder.html.ini
new file mode 100644
index 00000000000..f08c3ba3666
--- /dev/null
+++ b/tests/wpt/mozilla/meta/css/input_placeholder.html.ini
@@ -0,0 +1,2 @@
+[input_placeholder.html]
+  expected: FAIL
diff --git a/tests/wpt/mozilla/tests/appearance/input-text-definite-width-ref.html b/tests/wpt/mozilla/tests/appearance/input-text-definite-width-ref.html
new file mode 100644
index 00000000000..86f79377557
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-text-definite-width-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Input type=text With a Definite Width</title>
+    <link rel="stylesheet" href="./supports/input-text-ref.css">
+</head>
+<body>
+Display of an input type=text should match the display generated by the CSS reference.
+<div>
+    <div id="input" class="definite-width">
+        Foo
+    </div>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/appearance/input-text-definite-width.html b/tests/wpt/mozilla/tests/appearance/input-text-definite-width.html
new file mode 100644
index 00000000000..fda46f8af9c
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-text-definite-width.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Input type=text With a Definite Width</title>
+    <link rel="match" href="input-text-definite-width-ref.html">
+    <link rel="help" href="https://github.com/servo/servo/pull/37065">
+</head>
+<body>
+Display of an input type=text should match the display generated by the CSS reference.
+<div>
+    <input type="text" value="Foo" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/appearance/input-text-empty-ref.html b/tests/wpt/mozilla/tests/appearance/input-text-empty-ref.html
new file mode 100644
index 00000000000..437c9988a13
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-text-empty-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Empty Input type=text With a Definite Width</title>
+    <link rel="stylesheet" href="./supports/input-text-ref.css">
+</head>
+<body>
+Display of an input type=text should match the display generated by the CSS reference.
+<div>
+    <div id="input" class="definite-width">
+        <br>
+    </div>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/appearance/input-text-empty.html b/tests/wpt/mozilla/tests/appearance/input-text-empty.html
new file mode 100644
index 00000000000..bd5f5f5a21e
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-text-empty.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Empty Input type=text With a Definite Width</title>
+    <link rel="match" href="input-text-empty-ref.html">
+    <link rel="help" href="https://github.com/servo/servo/pull/37065">
+</head>
+<body>
+Display of an input type=text should match the display generated by the CSS reference.
+<div>
+    <input type="text" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder-ref.html b/tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder-ref.html
new file mode 100644
index 00000000000..5415dfb2a4a
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of a Non-empty Input type=text With a Definite Width and a Placeholder</title>
+    <link rel="stylesheet" href="./supports/input-text-ref.css">
+</head>
+<body>
+Display of an input type=text should match the display generated by the CSS reference.
+<div>
+    <div id="input" class="definite-width">
+        Foo
+    </div>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder.html b/tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder.html
new file mode 100644
index 00000000000..e075663cb6a
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of a Non-empty Input type=text With a Definite Width and a Placeholder</title>
+    <link rel="match" href="input-text-nonempty-placeholder-ref.html">
+    <link rel="help" href="https://github.com/servo/servo/pull/37065">
+</head>
+<body>
+Display of an input type=text should match the display generated by the CSS reference.
+<div>
+    <input type="text" value="Foo" placeholder="Bar" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/appearance/input-text-overflow-ref.html b/tests/wpt/mozilla/tests/appearance/input-text-overflow-ref.html
new file mode 100644
index 00000000000..4cece657a2a
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-text-overflow-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Overflowing Input type=text With a Definite Width</title>
+    <link rel="stylesheet" href="./supports/input-text-ref.css">
+</head>
+<body>
+Display of an input type=text should match the display generated by the CSS reference.
+<div>
+    <div id="input" class="definite-width">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/appearance/input-text-overflow.html b/tests/wpt/mozilla/tests/appearance/input-text-overflow.html
new file mode 100644
index 00000000000..52db07c0f02
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-text-overflow.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Overflowing Input type=text With a Definite Width</title>
+    <link rel="match" href="input-text-overflow-ref.html">
+    <link rel="help" href="https://github.com/servo/servo/pull/37065">
+</head>
+<body>
+Display of an input type=text should match the display generated by the CSS reference.
+<div>
+    <input type="text" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." style="font-size: 1em !important; width: 100px;"></input>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow-ref.html b/tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow-ref.html
new file mode 100644
index 00000000000..0cccfff638c
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Input type=text With a Definite Width and an Overflowing Placeholder</title>
+    <link rel="stylesheet" href="./supports/input-text-ref.css">
+</head>
+<body>
+Display of an input type=text should match the display generated by the CSS reference.
+<div>
+    <div id="input" class="definite-width placeholder-color">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow.html b/tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow.html
new file mode 100644
index 00000000000..c4d77ae2a22
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Input type=text With a Definite Width and an Overflowing Placeholder</title>
+    <link rel="match" href="input-text-placeholder-overflow-ref.html">
+    <link rel="help" href="https://github.com/servo/servo/pull/37065">
+</head>
+<body>
+Display of an input type=text should match the display generated by the CSS reference.
+<div>
+    <input type="text" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." style="font-size: 1em !important; width: 100px;"></input>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/appearance/input-text-placeholder-ref.html b/tests/wpt/mozilla/tests/appearance/input-text-placeholder-ref.html
new file mode 100644
index 00000000000..fa5b60bdabd
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-text-placeholder-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Input type=text With a Definite Width and a Placeholder</title>
+    <link rel="stylesheet" href="./supports/input-text-ref.css">
+</head>
+<body>
+Display of an input type=text should match the display generated by the CSS reference.
+<div>
+    <div id="input" class="definite-width placeholder-color">
+        Bar
+    </div>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/appearance/input-text-placeholder.html b/tests/wpt/mozilla/tests/appearance/input-text-placeholder.html
new file mode 100644
index 00000000000..d75acade780
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-text-placeholder.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Input type=text With a Definite Width and a Placeholder</title>
+    <link rel="match" href="input-text-placeholder-ref.html">
+    <link rel="help" href="https://github.com/servo/servo/pull/37065">
+</head>
+<body>
+Display of an input type=text should match the display generated by the CSS reference.
+<div>
+    <input type="text" placeholder="Bar" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/appearance/supports/input-text-ref.css b/tests/wpt/mozilla/tests/appearance/supports/input-text-ref.css
new file mode 100644
index 00000000000..8cf00d49313
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/supports/input-text-ref.css
@@ -0,0 +1,27 @@
+/* Minimal stylesheet to mimic the appearence of an input type=text specific to Servo.
+ * This stylesheet is expected to be modified following the development of the
+ * Shadow DOM input type=text in Servo.
+ */
+
+#input {
+    display: inline-block;
+    background: white;
+    border: solid lightgrey 1px;
+    font-family: sans-serif;
+    font-size: 1em; /* We are using 1em here to reduce the effect of inconsistencies in layout */
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+/* We are using definite width for most of the test to reduce the effect if calculating inline
+ * size of the input element. Which, will depends on the average character width of a font.
+ *
+ * <https://html.spec.whatwg.org/#converting-a-character-width-to-pixels>
+ */
+.definite-width {
+    width: 100px;
+}
+
+.placeholder-color {
+    color: grey;
+}
\ No newline at end of file