dom: Textual Input UA Shadow Dom (#37527)

Depend on: 
- https://github.com/servo/servo/pull/37427
- https://github.com/servo/servo/pull/37483

Utilize input `type=text` for the display of all textual input. In
which, consist of
https://html.spec.whatwg.org/#the-input-element-as-a-text-entry-widget
and
https://html.spec.whatwg.org/#the-input-element-as-domain-specific-widgets
inputs.

For `password`, `url`, `tel`, and, `email` input, the appearance of
input container is exactly the same as the `text` input. Other types of
textual input simply extends `text` input by adding extra components
inside the container.

Testing: Servo textual input appearance WPT.

---------

Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
Signed-off-by: Jo Steven Novaryo <jo.steven.novaryo@huawei.com>

components/script/dom/element.rs

@@ -1119,25 +1119,16 @@ impl<'dom> LayoutElementHelpers<'dom> for LayoutDom<'dom, Element> {
             ));
         }
 
+        // 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>
         let size = if let Some(this) = self.downcast::<HTMLInputElement>() {
             // FIXME(pcwalton): More use of atoms, please!
             match self.get_attr_val_for_layout(&ns!(), &local_name!("type")) {
-                // Not text entry widget
-                Some("hidden") |
-                Some("date") |
-                Some("month") |
-                Some("week") |
-                Some("time") |
-                Some("datetime-local") |
-                Some("number") |
-                Some("range") |
-                Some("color") |
-                Some("checkbox") |
-                Some("radio") |
-                Some("file") |
-                Some("submit") |
-                Some("image") |
-                Some("reset") |
+                Some("hidden") | Some("range") | Some("color") | Some("checkbox") |
+                Some("radio") | Some("file") | Some("submit") | Some("image") | Some("reset") |
                 Some("button") => None,
                 // Others
                 _ => match this.size_for_layout() {

components/script/dom/htmlinputelement.rs

@@ -104,7 +104,8 @@ 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.
+/// shadow tree for `text`, `password`, `url`, `tel`, and `email` input. The following is the
+/// structure of the shadow tree.
 ///
 /// ```
 /// <input type="text">
@@ -115,6 +116,7 @@ const DEFAULT_FILE_INPUT_VALUE: &str = "No file chosen";
 ///         </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
@@ -128,7 +130,7 @@ struct InputTypeTextShadowTree {
 
 #[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>`.
+/// 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.
@@ -219,10 +221,11 @@ pub(crate) enum InputType {
 }
 
 impl InputType {
-    // Note that Password is not included here since it is handled
-    // slightly differently, with placeholder characters shown rather
-    // than the underlying value.
-    fn is_textual(&self) -> bool {
+    /// 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 |
@@ -1238,9 +1241,35 @@ impl HTMLInputElement {
         .expect("UA shadow tree was not created")
     }
 
-    fn update_text_shadow_tree_if_needed(&self, can_gc: CanGc) {
-        // Should only do this for `type=text` input.
-        debug_assert_eq!(self.input_type(), InputType::Text);
+    /// 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();
@@ -1253,9 +1282,15 @@ impl HTMLInputElement {
         // 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() {
-            false => value,
-            true => "\u{200B}".into(),
+        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(),
         };
 
         // FIXME(stevennovaryo): Refactor this inside a TextControl wrapper
@@ -1269,7 +1304,7 @@ impl HTMLInputElement {
             .SetData(value_text);
     }
 
-    fn update_color_shadow_tree_if_needed(&self, can_gc: CanGc) {
+    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);
 
@@ -1287,10 +1322,10 @@ impl HTMLInputElement {
             .set_string_attribute(&local_name!("style"), style.into(), can_gc);
     }
 
-    fn update_shadow_tree_if_needed(&self, can_gc: CanGc) {
+    fn update_shadow_tree(&self, can_gc: CanGc) {
         match self.input_type() {
-            InputType::Text => self.update_text_shadow_tree_if_needed(can_gc),
-            InputType::Color => self.update_color_shadow_tree_if_needed(can_gc),
+            _ if self.is_textual_widget() => self.update_textual_shadow_tree(can_gc),
+            InputType::Color => self.update_color_shadow_tree(can_gc),
             _ => {},
         }
     }
@@ -1317,10 +1352,6 @@ impl<'dom> LayoutDom<'dom, HTMLInputElement> {
         unsafe { self.unsafe_get().filelist.get_inner_as_layout() }
     }
 
-    fn placeholder(self) -> &'dom str {
-        unsafe { self.unsafe_get().placeholder.borrow_for_layout() }
-    }
-
     fn input_type(self) -> InputType {
         self.unsafe_get().input_type.get()
     }
@@ -1336,6 +1367,9 @@ impl<'dom> LayoutDom<'dom, HTMLInputElement> {
 }
 
 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>,
@@ -1349,7 +1383,9 @@ impl<'dom> LayoutHTMLInputElementHelpers<'dom> for LayoutDom<'dom, HTMLInputElem
         }
 
         match self.input_type() {
-            InputType::Checkbox | InputType::Radio | InputType::Image => "".into(),
+            InputType::Checkbox | InputType::Radio | InputType::Image | InputType::Hidden => {
+                "".into()
+            },
             InputType::File => {
                 let filelist = self.get_filelist();
                 match filelist {
@@ -1372,31 +1408,23 @@ impl<'dom> LayoutHTMLInputElementHelpers<'dom> for LayoutDom<'dom, HTMLInputElem
             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),
-            InputType::Password => {
-                let text = self.get_raw_textinput_value();
-                if !text.is_empty() {
-                    text.chars()
-                        .map(|_| PASSWORD_REPLACEMENT_CHAR)
-                        .collect::<String>()
-                        .into()
-                } else {
-                    self.placeholder().into()
-                }
-            },
-            InputType::Color => {
-                unreachable!("Input type color is explicitly not rendered as text");
-            },
+            // FIXME(#22728): input `type=range` has yet to be implemented.
+            InputType::Range => "".into(),
             _ => {
-                let text = self.get_raw_textinput_value();
-                if !text.is_empty() {
-                    text.into()
-                } else {
-                    self.placeholder().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()
     }
@@ -2228,7 +2256,7 @@ impl HTMLInputElement {
     // 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 {
+        if !self.is_textual_widget() {
             return;
         }
 
@@ -2690,7 +2718,7 @@ impl HTMLInputElement {
 
     fn value_changed(&self, can_gc: CanGc) {
         self.update_related_validity_states(can_gc);
-        self.update_shadow_tree_if_needed(can_gc);
+        self.update_shadow_tree(can_gc);
     }
 
     /// <https://html.spec.whatwg.org/multipage/#show-the-picker,-if-applicable>
@@ -3034,7 +3062,7 @@ impl VirtualMethods for HTMLInputElement {
             // WHATWG-specified activation behaviors are handled elsewhere;
             // this is for all the other things a UI click might do
 
-            //TODO: set the editing position for text inputs
+            //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.

components/script/dom/node.rs

@@ -1852,6 +1852,9 @@ impl<'dom> LayoutNodeHelpers<'dom> for LayoutDom<'dom, Node> {
         }
     }
 
+    /// Whether this element should layout as a special case input element.
+    // TODO(#38251): With the implementation of Shadow DOM, we could implement the construction properly
+    //               in the DOM, instead of delegating it to layout.
     fn is_text_input(&self) -> bool {
         let type_id = self.type_id_for_layout();
         if type_id ==
@@ -1861,8 +1864,7 @@ impl<'dom> LayoutNodeHelpers<'dom> for LayoutDom<'dom, Node> {
         {
             let input = self.unsafe_get().downcast::<HTMLInputElement>().unwrap();
 
-            // FIXME: All the non-color and non-text input types currently render as text
-            !matches!(input.input_type(), InputType::Color | InputType::Text)
+            !input.is_textual_widget() && input.input_type() != InputType::Color
         } else {
             type_id ==
                 NodeTypeId::Element(ElementTypeId::HTMLElement(

components/script/textinput.rs

@@ -902,7 +902,6 @@ impl<T: ClipboardProvider> TextInput<T> {
                 KeyReaction::RedrawSelection
             })
             .shortcut(CMD_OR_CONTROL, 'X', || {
-                // FIXME: this is unreachable because ClipboardEvent is fired instead of keydown
                 if let Some(text) = self.get_selection_text() {
                     self.clipboard_provider.set_text(text);
                     self.delete_char(Direction::Backward);
@@ -910,6 +909,7 @@ impl<T: ClipboardProvider> TextInput<T> {
                 KeyReaction::DispatchInput
             })
             .shortcut(CMD_OR_CONTROL, 'C', || {
+                // TODO(stevennovaryo): we should not provide text to clipboard for type=password
                 if let Some(text) = self.get_selection_text() {
                     self.clipboard_provider.set_text(text);
                 }

tests/wpt/meta/MANIFEST.json

@@ -357056,7 +357056,7 @@
       "input-date-content-size.html": [
        "d026771f3c89c736b397db6a10c15fde5d73a3a8",
        [
-        null,
+        "html/rendering/widgets/input-date-content-size.html",
         [
          [
           "/html/rendering/widgets/input-date-content-size-ref.html",
@@ -357147,7 +357147,7 @@
       "input-time-content-size.html": [
        "4a378f6923a8910b96f8afa84125a8fbac4a5d05",
        [
-        null,
+        "html/rendering/widgets/input-time-content-size.html",
         [
          [
           "/html/rendering/widgets/input-time-content-size-ref.html",

tests/wpt/meta/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/number-placeholder-right-aligned.html.ini

@@ -0,0 +1,2 @@
+[number-placeholder-right-aligned.html]
+  expected: FAIL

tests/wpt/meta/html/rendering/widgets/field-sizing-input-number.html.ini

@@ -13,3 +13,6 @@
 
   [number: Update field-sizing property dynamically]
     expected: FAIL
+
+  [number: Text caret is taller than the placeholder]
+    expected: FAIL

tests/wpt/meta/html/rendering/widgets/input-date-content-size.html.ini

@@ -0,0 +1,2 @@
+[input-date-content-size.html]
+  expected: FAIL

tests/wpt/meta/html/rendering/widgets/input-number-text-size.tentative.html.ini

@@ -0,0 +1,2 @@
+[input-number-text-size.tentative.html]
+  expected: FAIL

tests/wpt/meta/html/rendering/widgets/input-time-content-size.html.ini

@@ -0,0 +1,2 @@
+[input-time-content-size.html]
+  expected: FAIL

tests/wpt/mozilla/meta/MANIFEST.json

@@ -92,78 +92,78 @@
   },
   "reftest": {
    "appearance": {
-    "input-text-definite-width.html": [
-     "fda46f8af9c14cef3911ec809054624204848b9d",
+    "input-textual-definite-width.html": [
+     "59f1797fab3d1889bbcb7863178c6c5ef9e54f19",
      [
-      "appearance/input-text-definite-width.html",
+      "appearance/input-textual-definite-width.html",
       [
        [
-        "/_mozilla/appearance/input-text-definite-width-ref.html",
+        "/_mozilla/appearance/input-textual-definite-width-ref.html",
         "=="
        ]
       ],
       {}
      ]
     ],
-    "input-text-empty.html": [
-     "bd5f5f5a21ec0ce028922a6764de41dc904a1eb1",
+    "input-textual-empty.html": [
+     "c85214b6c681b657a30a06b44670c796cdaeda11",
      [
-      "appearance/input-text-empty.html",
+      "appearance/input-textual-empty.html",
       [
        [
-        "/_mozilla/appearance/input-text-empty-ref.html",
+        "/_mozilla/appearance/input-textual-empty-ref.html",
         "=="
        ]
       ],
       {}
      ]
     ],
-    "input-text-nonempty-placeholder.html": [
-     "e075663cb6ae708b313b3cd5cd69f78c51b4bc1f",
+    "input-textual-nonempty-placeholder.html": [
+     "83670d37e310954e6d3a69114577ff92b4126a98",
      [
-      "appearance/input-text-nonempty-placeholder.html",
+      "appearance/input-textual-nonempty-placeholder.html",
       [
        [
-        "/_mozilla/appearance/input-text-nonempty-placeholder-ref.html",
+        "/_mozilla/appearance/input-textual-nonempty-placeholder-ref.html",
         "=="
        ]
       ],
       {}
      ]
     ],
-    "input-text-overflow.html": [
-     "52db07c0f0274d2b7b086d7017982145c25918da",
+    "input-textual-overflow.html": [
+     "ad1f0aa70285e227153f7d05983b2ef9caa798f9",
      [
-      "appearance/input-text-overflow.html",
+      "appearance/input-textual-overflow.html",
       [
        [
-        "/_mozilla/appearance/input-text-overflow-ref.html",
+        "/_mozilla/appearance/input-textual-overflow-ref.html",
         "=="
        ]
       ],
       {}
      ]
     ],
-    "input-text-placeholder-overflow.html": [
-     "c4d77ae2a22a5b7972f2798b8ca78742b81bacc4",
+    "input-textual-placeholder-overflow.html": [
+     "9bc84f26b8c1ae0718085ddb069889cca2e0322a",
      [
-      "appearance/input-text-placeholder-overflow.html",
+      "appearance/input-textual-placeholder-overflow.html",
       [
        [
-        "/_mozilla/appearance/input-text-placeholder-overflow-ref.html",
+        "/_mozilla/appearance/input-textual-placeholder-overflow-ref.html",
         "=="
        ]
       ],
       {}
      ]
     ],
-    "input-text-placeholder.html": [
-     "d75acade78038b14529135b1d63c0ac5a168a87b",
+    "input-textual-placeholder.html": [
+     "68287721ce67ecece6e746b44fd3fd1d92763085",
      [
-      "appearance/input-text-placeholder.html",
+      "appearance/input-textual-placeholder.html",
       [
        [
-        "/_mozilla/appearance/input-text-placeholder-ref.html",
+        "/_mozilla/appearance/input-textual-placeholder-ref.html",
         "=="
        ]
       ],
@@ -8130,33 +8130,33 @@
     []
    ],
    "appearance": {
-    "input-text-definite-width-ref.html": [
-     "86f7937755750261ed3b06dfe11e78a251b9d175",
+    "input-textual-definite-width-ref.html": [
+     "7a256be23b3c084bb8477d7380a8b1801ec07f05",
      []
     ],
-    "input-text-empty-ref.html": [
-     "437c9988a13e094d870f67c8de0dd0becdeece76",
+    "input-textual-empty-ref.html": [
+     "6cbaa3e40e5a7fa6ea96710f126d6e6d4d4d633e",
      []
     ],
-    "input-text-nonempty-placeholder-ref.html": [
-     "5415dfb2a4a88dc3bfed6ad04e23f288534351e4",
+    "input-textual-nonempty-placeholder-ref.html": [
+     "7a256be23b3c084bb8477d7380a8b1801ec07f05",
      []
     ],
-    "input-text-overflow-ref.html": [
-     "4cece657a2a09cfe3f1d91d49f0c9d76f5714516",
+    "input-textual-overflow-ref.html": [
+     "f8e22c9d11dc68dd244a3fc5b8f5946a707a2660",
      []
     ],
-    "input-text-placeholder-overflow-ref.html": [
-     "0cccfff638c0d8687a3582310c73233b7d883b1a",
+    "input-textual-placeholder-overflow-ref.html": [
+     "ee297a94cacb3838375b94c3a546f288adb464f1",
      []
     ],
-    "input-text-placeholder-ref.html": [
-     "fa5b60bdabdf2b9b818ebe66bfc7f2711173b88b",
+    "input-textual-placeholder-ref.html": [
+     "d30f13a2a1bab16989ec585a57ba7b7bd0b1c329",
      []
     ],
     "supports": {
-     "input-text-ref.css": [
-      "8cf00d493138285e50aa510273abae98c099ae8b",
+     "input-textual-ref.css": [
+      "7cdabb05d5dd7eb39df521fcb5ce24e39fea840f",
       []
      ]
     }

tests/wpt/mozilla/tests/appearance/input-text-definite-width-ref.html

@@ -1,15 +0,0 @@
-<!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>

tests/wpt/mozilla/tests/appearance/input-text-definite-width.html

@@ -1,14 +0,0 @@
-<!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>

tests/wpt/mozilla/tests/appearance/input-text-empty-ref.html

@@ -1,15 +0,0 @@
-<!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>

tests/wpt/mozilla/tests/appearance/input-text-empty.html

@@ -1,14 +0,0 @@
-<!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>

tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder-ref.html

@@ -1,15 +0,0 @@
-<!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>

tests/wpt/mozilla/tests/appearance/input-text-nonempty-placeholder.html

@@ -1,14 +0,0 @@
-<!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>

tests/wpt/mozilla/tests/appearance/input-text-overflow-ref.html

@@ -1,15 +0,0 @@
-<!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>

tests/wpt/mozilla/tests/appearance/input-text-overflow.html

@@ -1,14 +0,0 @@
-<!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>

tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow-ref.html

@@ -1,15 +0,0 @@
-<!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>

tests/wpt/mozilla/tests/appearance/input-text-placeholder-overflow.html

@@ -1,14 +0,0 @@
-<!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>

tests/wpt/mozilla/tests/appearance/input-text-placeholder-ref.html

@@ -1,15 +0,0 @@
-<!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>

tests/wpt/mozilla/tests/appearance/input-text-placeholder.html

@@ -1,14 +0,0 @@
-<!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>

tests/wpt/mozilla/tests/appearance/input-textual-definite-width-ref.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Textual Input With a Definite Width</title>
+    <link rel="stylesheet" href="./supports/input-textual-ref.css">
+</head>
+<body>
+Display of the textual inputs should match the display generated by the CSS reference.
+<div>
+    <div id="input" class="definite-width">
+        Text
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        ●●●●●●●●
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        Tel
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        Url
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        Email
+    </div>
+</div>
+
+</body>
+</html>

tests/wpt/mozilla/tests/appearance/input-textual-definite-width.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Textual Input With a Definite Width</title>
+    <link rel="match" href="input-textual-definite-width-ref.html">
+    <link rel="help" href="https://github.com/servo/servo/pull/37065">
+</head>
+<body>
+Display of the textual inputs should match the display generated by the CSS reference.
+<div>
+    <input type="text" value="Text" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="password" value="Password" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="tel" value="Tel" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="url" value="Url" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="email" value="Email" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+</body>
+</html>

tests/wpt/mozilla/tests/appearance/input-textual-empty-ref.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Textual Input With a Definite Width</title>
+    <link rel="stylesheet" href="./supports/input-textual-ref.css">
+</head>
+<body>
+Display of the textual inputs should match the display generated by the CSS reference.
+<div>
+    <div id="input" class="definite-width">
+        &nbsp;
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        &nbsp;
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        &nbsp;
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        &nbsp;
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        &nbsp;
+    </div>
+</div>
+
+</body>
+</html>

tests/wpt/mozilla/tests/appearance/input-textual-empty.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Textual Input With a Definite Width</title>
+    <link rel="match" href="input-textual-empty-ref.html">
+    <link rel="help" href="https://github.com/servo/servo/pull/37065">
+</head>
+<body>
+Display of the textual inputs should match the display generated by the CSS reference.
+<div>
+    <input type="text" value="" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="password" value="" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="tel" value="" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="url" value="" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="email" value="" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+</body>
+</html>

tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder-ref.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Textual Input With a Definite Width</title>
+    <link rel="stylesheet" href="./supports/input-textual-ref.css">
+</head>
+<body>
+Display of the textual inputs should match the display generated by the CSS reference.
+<div>
+    <div id="input" class="definite-width">
+        Text
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        ●●●●●●●●
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        Tel
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        Url
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        Email
+    </div>
+</div>
+
+</body>
+</html>

tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of a Non-empty Textual Input With a Definite Width and a Placeholder</title>
+    <link rel="match" href="input-textual-nonempty-placeholder-ref.html">
+    <link rel="help" href="https://github.com/servo/servo/pull/37065">
+</head>
+<body>
+Display of the textual inputs should match the display generated by the CSS reference.
+<div>
+    <input type="text" value="Text" placeholder="Placeholder" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="password" value="Password" placeholder="Placeholder" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="tel" value="Tel" placeholder="Placeholder" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="url" value="Url" placeholder="Placeholder" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="email" value="Email" placeholder="Placeholder" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+</body>
+</html>

tests/wpt/mozilla/tests/appearance/input-textual-overflow-ref.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Textual Input With a Definite Width and an Overflowing Placeholder</title>
+    <link rel="stylesheet" href="./supports/input-textual-ref.css">
+</head>
+<body>
+Display of the textual inputs should match the display generated by the CSS reference.
+<div>
+    <div id="input" class="definite-width">
+        Text Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        Tel Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        Url Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width">
+        Email Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+</div>
+</body>
+</html>

tests/wpt/mozilla/tests/appearance/input-textual-overflow.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Textual Input With a Definite Width and an Overflowing Placeholder</title>
+    <link rel="match" href="input-textual-overflow-ref.html">
+    <link rel="help" href="https://github.com/servo/servo/pull/37065">
+</head>
+<body>
+Display of the textual inputs should match the display generated by the CSS reference.
+<div>
+    <input
+        type="text"
+        value="Text Input: 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>
+<div>
+    <input
+        type="password"
+        value="Password Input: 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>
+<div>
+    <input
+        type="tel"
+        value="Tel Input: 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>
+<div>
+    <input
+        type="url"
+        value="Url Input: 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>
+<div>
+    <input
+        type="email"
+        value="Email Input: 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>

tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow-ref.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Textual Input With a Definite Width and an Overflowing Placeholder</title>
+    <link rel="stylesheet" href="./supports/input-textual-ref.css">
+</head>
+<body>
+Display of the textual inputs should match the display generated by the CSS reference.
+<div>
+    <div id="input" class="definite-width placeholder-color">
+        Text Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width placeholder-color">
+        Password Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width placeholder-color">
+        Tel Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width placeholder-color">
+        Url Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width placeholder-color">
+        Email Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+    </div>
+</div>
+</body>
+</html>

tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Textual Input With a Definite Width and an Overflowing Placeholder</title>
+    <link rel="match" href="input-textual-placeholder-overflow-ref.html">
+    <link rel="help" href="https://github.com/servo/servo/pull/37065">
+</head>
+<body>
+Display of the textual inputs should match the display generated by the CSS reference.
+<div>
+    <input
+        type="text"
+        placeholder="Text Input: 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>
+<div>
+    <input
+        type="password"
+        placeholder="Password Input: 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>
+<div>
+    <input
+        type="tel"
+        placeholder="Tel Input: 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>
+<div>
+    <input
+        type="url"
+        placeholder="Url Input: 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>
+<div>
+    <input
+        type="email"
+        placeholder="Email Input: 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>

tests/wpt/mozilla/tests/appearance/input-textual-placeholder-ref.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Textual Input With a Definite Width and a Placeholder</title>
+    <link rel="stylesheet" href="./supports/input-textual-ref.css">
+</head>
+<body>
+Display of the textual inputs should match the display generated by the CSS reference.
+<div>
+    <div id="input" class="definite-width placeholder-color">
+        Text
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width placeholder-color">
+        Password
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width placeholder-color">
+        Tel
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width placeholder-color">
+        Url
+    </div>
+</div>
+<div>
+    <div id="input" class="definite-width placeholder-color">
+        Email
+    </div>
+</div>
+</body>
+</html>

tests/wpt/mozilla/tests/appearance/input-textual-placeholder.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Appearance of an Textual Input With a Definite Width and a Placeholder</title>
+    <link rel="match" href="input-textual-placeholder-ref.html">
+    <link rel="help" href="https://github.com/servo/servo/pull/37065">
+</head>
+<body>
+Display of the textual inputs should match the display generated by the CSS reference.
+<div>
+    <input type="text" placeholder="Text" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="password" placeholder="Password" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="tel" placeholder="Tel" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="url" placeholder="Url" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+<div>
+    <input type="email" placeholder="Email" style="font-size: 1em !important; width: 100px;"></input>
+</div>
+</body>
+</html>

tests/wpt/mozilla/tests/appearance/supports/input-textual-ref.css

@@ -1,6 +1,6 @@
-/* Minimal stylesheet to mimic the appearence of an input type=text specific to Servo.
+/* Minimal stylesheet to mimic the appearence of the textual inputs specific to Servo.
  * This stylesheet is expected to be modified following the development of the
- * Shadow DOM input type=text in Servo.
+ * Shadow DOM textual inputs in Servo.
  */
 
 #input {