layout: Add very basic support for showing text in input boxes (#32365)

This only paints text in input fields. Selection and cursor are still
not painted.

In addition to adding this feature, the change also updates the
user-agent.css with the latest from the HTML specification. Extra
padding and extraneous settings (such as a bogus line-height and
min-height) are also removed from servo.css. This leads to some new
passes.

There are some new passes, this introduces failures as inserting text
reveals issues that were hidden before. Notably:

- failures in `/html/editing/editing-0/spelling-and-grammar-checking/`:
  We do not support spell-checking.
- Most of the rest of the new failures are missing features of input
  boxes that are also missing in legacy layout.

components/layout_2020/dom_traversal.rs

@@ -7,6 +7,7 @@ use std::borrow::Cow;
 use html5ever::{local_name, LocalName};
 use log::warn;
 use script_layout_interface::wrapper_traits::{ThreadSafeLayoutElement, ThreadSafeLayoutNode};
+use script_layout_interface::{LayoutElementType, LayoutNodeType};
 use servo_arc::Arc as ServoArc;
 use style::properties::ComputedValues;
 use style::selector_parser::PseudoElement;
@@ -33,7 +34,7 @@ pub(crate) struct NodeAndStyleInfo<Node> {
     pub style: ServoArc<ComputedValues>,
 }
 
-impl<Node> NodeAndStyleInfo<Node> {
+impl<'dom, Node: NodeExt<'dom>> NodeAndStyleInfo<Node> {
     fn new_with_pseudo(
         node: Node,
         pseudo_element_type: WhichPseudoElement,
@@ -53,6 +54,12 @@ impl<Node> NodeAndStyleInfo<Node> {
             style,
         }
     }
+
+    pub(crate) fn is_single_line_text_input(&self) -> bool {
+        self.node.map_or(false, |node| {
+            node.type_id() == LayoutNodeType::Element(LayoutElementType::HTMLInputElement)
+        })
+    }
 }
 
 impl<Node: Clone> NodeAndStyleInfo<Node> {
@@ -172,6 +179,23 @@ fn traverse_children_of<'dom, Node>(
         }
     }
 
+    if matches!(
+        parent_element.type_id(),
+        LayoutNodeType::Element(LayoutElementType::HTMLInputElement)
+    ) {
+        let info = NodeAndStyleInfo::new(parent_element, parent_element.style(context));
+
+        // 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>.
+        //
+        // TODO: Is there a less hacky way to do this?
+        handler.handle_text(&info, "\u{200B}".into());
+
+        handler.handle_text(&info, parent_element.to_threadsafe().node_text_content());
+    }
+
     traverse_pseudo_element(WhichPseudoElement::After, parent_element, context, handler);
 }
 

components/layout_2020/flexbox/construct.rs

@@ -159,7 +159,8 @@ where
                     let Some(inline_formatting_context) = inline_formatting_context_builder.finish(
                         self.context,
                         self.text_decoration_line,
-                        true, /* has_first_formatted_line */
+                        true,  /* has_first_formatted_line */
+                        false, /* is_single_line_text_box */
                     ) else {
                         return None;
                     };

components/layout_2020/flow/construct.rs

@@ -191,6 +191,7 @@ where
     ) -> Self {
         let text_decoration_line =
             propagated_text_decoration_line | info.style.clone_text_decoration_line();
+
         BlockContainerBuilder {
             context,
             info,
@@ -214,6 +215,7 @@ where
             self.context,
             self.text_decoration_line,
             !self.have_already_seen_first_line_for_text_indent,
+            self.info.is_single_line_text_input(),
         ) {
             // There are two options here. This block was composed of both one or more inline formatting contexts
             // and child blocks OR this block was a single inline formatting context. In the latter case, we
@@ -598,6 +600,7 @@ where
             self.context,
             self.text_decoration_line,
             !self.have_already_seen_first_line_for_text_indent,
+            self.info.is_single_line_text_input(),
         ) {
             self.push_block_level_job_for_inline_formatting_context(inline_formatting_context);
         }

components/layout_2020/flow/inline/construct.rs

@@ -283,6 +283,7 @@ impl InlineFormattingContextBuilder {
             layout_context,
             text_decoration_line,
             has_first_formatted_line,
+            /* is_single_line_text_input = */ false,
         )
     }
 
@@ -292,6 +293,7 @@ impl InlineFormattingContextBuilder {
         layout_context: &LayoutContext,
         text_decoration_line: TextDecorationLine,
         has_first_formatted_line: bool,
+        is_single_line_text_input: bool,
     ) -> Option<InlineFormattingContext> {
         if self.is_empty() {
             return None;
@@ -305,6 +307,7 @@ impl InlineFormattingContextBuilder {
             layout_context,
             text_decoration_line,
             has_first_formatted_line,
+            is_single_line_text_input,
         ))
     }
 }

components/layout_2020/flow/inline/mod.rs

@@ -155,6 +155,9 @@ pub(crate) struct InlineFormattingContext {
 
     /// Whether or not this [`InlineFormattingContext`] contains floats.
     pub(super) contains_floats: bool,
+
+    /// Whether or not this is an inline formatting context for a single line text input.
+    pub(super) is_single_line_text_input: bool,
 }
 
 /// A collection of data used to cache [`FontMetrics`] in the [`InlineFormattingContext`]
@@ -574,10 +577,20 @@ impl UnbreakableSegmentUnderConstruction {
     }
 }
 
+bitflags! {
+    pub struct InlineContainerStateFlags: u8 {
+        const CREATE_STRUT = 0b0001;
+        const IS_SINGLE_LINE_TEXT_INPUT = 0b0010;
+    }
+}
+
 struct InlineContainerState {
     /// The style of this inline container.
     style: Arc<ComputedValues>,
 
+    /// Flags which describe details of this [`InlineContainerState`].
+    flags: InlineContainerStateFlags,
+
     /// Whether or not we have processed any content (an atomic element or text) for
     /// this inline box on the current line OR any previous line.
     has_content: bool,
@@ -1583,6 +1596,7 @@ impl InlineFormattingContext {
         layout_context: &LayoutContext,
         text_decoration_line: TextDecorationLine,
         has_first_formatted_line: bool,
+        is_single_line_text_input: bool,
     ) -> Self {
         // This is to prevent a double borrow.
         let text_content: String = builder.text_segments.into_iter().collect();
@@ -1622,6 +1636,7 @@ impl InlineFormattingContext {
             text_decoration_line,
             has_first_formatted_line,
             contains_floats: builder.contains_floats,
+            is_single_line_text_input,
         }
     }
 
@@ -1665,6 +1680,15 @@ impl InlineFormattingContext {
                 .map(|font| font.metrics.clone());
 
         let style_text = containing_block.style.get_inherited_text();
+        let mut inline_container_state_flags = InlineContainerStateFlags::empty();
+        if inline_container_needs_strut(style, layout_context, None) {
+            inline_container_state_flags.insert(InlineContainerStateFlags::CREATE_STRUT);
+        }
+        if self.is_single_line_text_input {
+            inline_container_state_flags
+                .insert(InlineContainerStateFlags::IS_SINGLE_LINE_TEXT_INPUT);
+        }
+
         let mut ifc = InlineFormattingContextState {
             positioning_context,
             containing_block,
@@ -1678,10 +1702,10 @@ impl InlineFormattingContext {
             }),
             root_nesting_level: InlineContainerState::new(
                 style.to_arc(),
+                inline_container_state_flags,
                 None, /* parent_container */
                 self.text_decoration_line,
                 default_font_metrics.as_ref(),
-                inline_container_needs_strut(style, layout_context, None),
             ),
             inline_box_state_stack: Vec::new(),
             current_line_segment: UnbreakableSegmentUnderConstruction::new(),
@@ -1753,14 +1777,18 @@ impl InlineFormattingContext {
 impl InlineContainerState {
     fn new(
         style: Arc<ComputedValues>,
+        flags: InlineContainerStateFlags,
         parent_container: Option<&InlineContainerState>,
         parent_text_decoration_line: TextDecorationLine,
         font_metrics: Option<&FontMetrics>,
-        create_strut: bool,
     ) -> Self {
         let text_decoration_line = parent_text_decoration_line | style.clone_text_decoration_line();
         let font_metrics = font_metrics.cloned().unwrap_or_else(FontMetrics::empty);
-        let line_height = line_height(&style, &font_metrics);
+        let line_height = line_height(
+            &style,
+            &font_metrics,
+            flags.contains(InlineContainerStateFlags::IS_SINGLE_LINE_TEXT_INPUT),
+        );
 
         let mut baseline_offset = Au::zero();
         let mut strut_block_sizes = Self::get_block_sizes_with_style(
@@ -1783,12 +1811,13 @@ impl InlineContainerState {
         let mut nested_block_sizes = parent_container
             .map(|container| container.nested_strut_block_sizes.clone())
             .unwrap_or_else(LineBlockSizes::zero);
-        if create_strut {
+        if flags.contains(InlineContainerStateFlags::CREATE_STRUT) {
             nested_block_sizes.max_assign(&strut_block_sizes);
         }
 
         Self {
             style,
+            flags,
             has_content: false,
             text_decoration_line,
             nested_strut_block_sizes: nested_block_sizes,
@@ -1877,7 +1906,12 @@ impl InlineContainerState {
             &self.style,
             font_metrics,
             font_metrics_of_first_font,
-            line_height(&self.style, font_metrics),
+            line_height(
+                &self.style,
+                font_metrics,
+                self.flags
+                    .contains(InlineContainerStateFlags::IS_SINGLE_LINE_TEXT_INPUT),
+            ),
         )
     }
 
@@ -1945,14 +1979,19 @@ impl InlineBoxContainerState {
     ) -> Self {
         let style = inline_box.style.clone();
         let pbm = style.padding_border_margin(containing_block);
-        let create_strut = inline_container_needs_strut(&style, layout_context, Some(&pbm));
+
+        let mut flags = InlineContainerStateFlags::empty();
+        if inline_container_needs_strut(&style, layout_context, Some(&pbm)) {
+            flags.insert(InlineContainerStateFlags::CREATE_STRUT);
+        }
+
         Self {
             base: InlineContainerState::new(
                 style,
+                flags,
                 Some(parent_container),
                 parent_container.text_decoration_line,
                 font_metrics,
-                create_strut,
             ),
             base_fragment_info: inline_box.base_fragment_info,
             pbm,
@@ -2222,14 +2261,26 @@ fn place_pending_floats(ifc: &mut InlineFormattingContextState, line_items: &mut
     }
 }
 
-fn line_height(parent_style: &ComputedValues, font_metrics: &FontMetrics) -> Length {
+fn line_height(
+    parent_style: &ComputedValues,
+    font_metrics: &FontMetrics,
+    is_single_line_text_input: bool,
+) -> Length {
     let font = parent_style.get_font();
     let font_size = font.font_size.computed_size();
-    match font.line_height {
+    let mut line_height = match font.line_height {
         LineHeight::Normal => Length::from(font_metrics.line_gap),
         LineHeight::Number(number) => font_size * number.0,
         LineHeight::Length(length) => length.0,
+    };
+
+    // Single line text inputs line height is clamped to the size of `normal`. See
+    // <https://github.com/whatwg/html/pull/5462>.
+    if is_single_line_text_input {
+        line_height.max_assign(font_metrics.line_gap.into());
     }
+
+    line_height
 }
 
 fn effective_vertical_align(

resources/servo.css

@@ -5,29 +5,19 @@ button {
 button,
 input {
   background: white;
-  min-height: 1.0em;
-  padding: 0em;
-  padding-left: 0.25em;
-  padding-right: 0.25em;
   border: solid lightgrey 1px;
   color: black;
   font-family: sans-serif;
   font-size: 0.8333em;
   text-align: left;
-  line-height: 1.8;
 }
 
 textarea {
   background: white;
-  min-height: 1.0em;
-  padding: 0em;
-  padding-left: 0.25em;
-  padding-right: 0.25em;
   border: solid lightgrey 1px;
   color: black;
   font-family: sans-serif;
   font-size: 0.8333em;
-  white-space: pre-wrap;
 }
 
 input::selection,
@@ -45,7 +35,6 @@ input[type="reset"] {
   border-left: solid 1px #CCCCCC;
   border-right: solid 1px #999999;
   border-bottom: solid 1px #999999;
-  text-align: center;
   color: black;
 }
 

resources/user-agent.css

@@ -104,8 +104,13 @@ link:link[rel~=help], link:visited[rel~=help] { cursor: help; }
 /*
  * FIXME: use `outline: auto;`
  */
-a:focus, area:focus,
+a:focus, area:focus {
-input:focus, textarea:focus, button:focus { outline: thin dotted; }
+  outline: thin dotted;
+}
+
+input:focus, textarea:focus, button:focus {
+  outline: thin solid black;
+}
 
 mark { background: yellow; color: black; }
 
@@ -251,22 +256,47 @@ table:matches(
   display: none !important;
 }
 
-
+input, select, button, textarea {
-input, select, option, optgroup, button, textarea {
+  letter-spacing: initial;
+  word-spacing: initial;
+  line-height: initial;
+  text-transform: initial;
   text-indent: initial;
-  text-transform: none;
+  text-shadow: initial;
+  appearance: auto;
 }
 
-textarea { white-space: pre-wrap; }
+input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) {
+  overflow: clip !important;
+  overflow-clip-margin: 0 !important;
+}
 
-input[type="radio"], input[type="checkbox"], input[type="reset"], input[type="button"],
+input, select, textarea {
-input[type="submit"], select, button {
+  text-align: initial;
-  box-sizing: border-box;
+}
+
+:autofill {
+  field-sizing: fixed !important;
+}
+
+input:is([type=reset i], [type=button i], [type=submit i]), button {
+  text-align: center;
 }
 
 input, textarea, select, button { display: inline-block; }
 
-hr { 
+input[type=hidden i], input[type=file i], input[type=image i] {
+  appearance: none;
+}
+
+input[type=radio i], input[type=checkbox i], input[type=reset i], input[type=button i], input[type=submit i],
+input[type=color i], input[type=search i], select, button {
+  box-sizing: border-box;
+}
+
+textarea { white-space: pre-wrap; }
+
+hr {
   color: gray;
   border-style: inset;
   border-width: 1px;

tests/wpt/meta-legacy-layout/css/CSS2/text/text-transform-bicameral-018.xht.ini

@@ -0,0 +1,2 @@
+[text-transform-bicameral-018.xht]
+  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-inline/baseline-source/baseline-source-first-textarea-001.tentative.html.ini

@@ -7,12 +7,3 @@
 
   [.target > * 5]
     expected: FAIL
-
-  [.target > * 7]
-    expected: FAIL
-
-  [.target > * 9]
-    expected: FAIL
-
-  [.target > * 11]
-    expected: FAIL

tests/wpt/meta-legacy-layout/css/css-inline/baseline-source/baseline-source-last-textarea-001.tentative.html.ini

@@ -1,9 +0,0 @@
-[baseline-source-last-textarea-001.tentative.html]
-  [.target > * 7]
-    expected: FAIL
-
-  [.target > * 9]
-    expected: FAIL
-
-  [.target > * 11]
-    expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-001.html.ini

@@ -1,4 +0,0 @@
-[transform-input-001.html]
-  type: reftest
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-002.html.ini

@@ -1,4 +0,0 @@
-[transform-input-002.html]
-  type: reftest
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-003.html.ini

@@ -1,4 +0,0 @@
-[transform-input-003.html]
-  type: reftest
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-004.html.ini

@@ -1,4 +0,0 @@
-[transform-input-004.html]
-  type: reftest
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-005.html.ini

@@ -1,4 +0,0 @@
-[transform-input-005.html]
-  type: reftest
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-006.html.ini

@@ -1,4 +0,0 @@
-[transform-input-006.html]
-  type: reftest
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-007.html.ini

@@ -1,3 +0,0 @@
-[transform-input-007.html]
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-008.html.ini

@@ -1,4 +0,0 @@
-[transform-input-008.html]
-  type: reftest
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-010.html.ini

@@ -1,3 +0,0 @@
-[transform-input-010.html]
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-012.html.ini

@@ -1,3 +0,0 @@
-[transform-input-012.html]
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-013.html.ini

@@ -1,4 +0,0 @@
-[transform-input-013.html]
-  type: reftest
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-014.html.ini

@@ -1,4 +0,0 @@
-[transform-input-014.html]
-  type: reftest
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-015.html.ini

@@ -1,4 +0,0 @@
-[transform-input-015.html]
-  type: reftest
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-016.html.ini

@@ -1,4 +0,0 @@
-[transform-input-016.html]
-  type: reftest
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-018.html.ini

@@ -1,5 +1,4 @@
 [transform-input-018.html]
   type: reftest
   bug: https://github.com/servo/servo/issues/21092
-  expected:
+  expected: FAIL
-    if os == "mac": FAIL

tests/wpt/meta-legacy-layout/css/css-transforms/transform-input-019.html.ini

@@ -1,4 +0,0 @@
-[transform-input-019.html]
-  type: reftest
-  bug: https://github.com/servo/servo/issues/21092
-  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-ui/appearance-textfield-001.html.ini

@@ -0,0 +1,2 @@
+[appearance-textfield-001.html]
+  expected: FAIL

tests/wpt/meta-legacy-layout/css/css-ui/webkit-appearance-textfield-001.html.ini

@@ -0,0 +1,2 @@
+[webkit-appearance-textfield-001.html]
+  expected: FAIL

tests/wpt/meta-legacy-layout/html/rendering/non-replaced-elements/form-controls/text-transform.html.ini

@@ -1,2 +0,0 @@
-[text-transform.html]
-  expected: FAIL

tests/wpt/meta-legacy-layout/html/rendering/replaced-elements/the-textarea-element/textarea-padding-bend-overlaps-content-001.tentative.html.ini

@@ -1,2 +0,0 @@
-[textarea-padding-bend-overlaps-content-001.tentative.html]
-  expected: FAIL

tests/wpt/meta-legacy-layout/html/rendering/replaced-elements/the-textarea-element/textarea-padding-bstart-moves-content-001.tentative.html.ini

@@ -1,2 +0,0 @@
-[textarea-padding-bstart-moves-content-001.tentative.html]
-  expected: FAIL

tests/wpt/meta-legacy-layout/html/rendering/widgets/input-checkbox-switch-indeterminate.tentative.html.ini

@@ -0,0 +1,2 @@
+[input-checkbox-switch-indeterminate.tentative.html]
+  expected: FAIL

tests/wpt/meta-legacy-layout/html/semantics/forms/the-input-element/range-tick-marks-02.html.ini

@@ -1,2 +0,0 @@
-[range-tick-marks-02.html]
-  expected: FAIL

tests/wpt/meta-legacy-layout/html/semantics/forms/the-selectlist-element/selectlist-button-type-appearance.tentative.html.ini

@@ -0,0 +1,2 @@
+[selectlist-button-type-appearance.tentative.html]
+  expected: FAIL

tests/wpt/meta/css/css-flexbox/flex-item-compressible-001.html.ini

@@ -1,34 +1,6 @@
 [flex-item-compressible-001.html]
-  [.flexbox 14]
-    expected: FAIL
-
-  [.flexbox 15]
-    expected: FAIL
-
   [.flexbox 12]
     expected: FAIL
 
-  [.flexbox 13]
-    expected: FAIL
-
-  [.flexbox 10]
-    expected: FAIL
-
   [.flexbox 11]
     expected: FAIL
-
-  [.flexbox 4]
-    expected: FAIL
-
-  [.flexbox 5]
-    expected: FAIL
-
-  [.flexbox 3]
-    expected: FAIL
-
-  [.flexbox 8]
-    expected: FAIL
-
-  [.flexbox 9]
-    expected: FAIL
-

tests/wpt/meta/css/css-inline/baseline-source/baseline-source-first-textarea-001.tentative.html.ini

@@ -1,15 +1,9 @@
 [baseline-source-first-textarea-001.tentative.html]
+  [.target > * 9]
+    expected: FAIL
+
   [.target > * 1]
     expected: FAIL
 
   [.target > * 5]
     expected: FAIL
-
-  [.target > * 7]
-    expected: FAIL
-
-  [.target > * 9]
-    expected: FAIL
-
-  [.target > * 11]
-    expected: FAIL

tests/wpt/meta/css/css-inline/baseline-source/baseline-source-last-textarea-001.tentative.html.ini

@@ -1,9 +0,0 @@
-[baseline-source-last-textarea-001.tentative.html]
-  [.target > * 7]
-    expected: FAIL
-
-  [.target > * 9]
-    expected: FAIL
-
-  [.target > * 11]
-    expected: FAIL

tests/wpt/meta/css/css-overflow/input-scrollable-region-001.html.ini

@@ -0,0 +1,2 @@
+[input-scrollable-region-001.html]
+  expected: FAIL

tests/wpt/meta/css/css-overflow/scrollable-overflow-input-001.html.ini

@@ -0,0 +1,2 @@
+[scrollable-overflow-input-001.html]
+  expected: FAIL

tests/wpt/meta/css/css-overflow/scrollable-overflow-input-002.html.ini

@@ -0,0 +1,2 @@
+[scrollable-overflow-input-002.html]
+  expected: FAIL

tests/wpt/meta/css/css-tables/table-model-fixup-2.html.ini

@@ -19,3 +19,15 @@
 
   [Replaced elements outside a table cannot be table-row-group and are considered inline -- input=file elements]
     expected: FAIL
+
+  [Replaced elements outside a table cannot be table-row and are considered inline -- input=text elements]
+    expected: FAIL
+
+  [Replaced elements outside a table cannot be table-row and are considered inline -- input=button elements]
+    expected: FAIL
+
+  [Replaced elements outside a table cannot be table-row-group and are considered inline -- input=text elements]
+    expected: FAIL
+
+  [Replaced elements outside a table cannot be table-row-group and are considered inline -- input=button elements]
+    expected: FAIL

tests/wpt/meta/css/css-transforms/transform-input-002.html.ini

@@ -1,2 +0,0 @@
-[transform-input-002.html]
-  expected: FAIL

tests/wpt/meta/css/css-ui/appearance-textfield-001.html.ini

@@ -0,0 +1,2 @@
+[appearance-textfield-001.html]
+  expected: FAIL

tests/wpt/meta/css/css-ui/input-security-none-sensitive-text-input.html.ini

@@ -0,0 +1,2 @@
+[input-security-none-sensitive-text-input.html]
+  expected: FAIL

tests/wpt/meta/css/css-ui/webkit-appearance-textfield-001.html.ini

@@ -0,0 +1,2 @@
+[webkit-appearance-textfield-001.html]
+  expected: FAIL

tests/wpt/meta/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-009.html.ini

@@ -1,2 +0,0 @@
-[spelling-markers-009.html]
-  expected: FAIL

tests/wpt/meta/html/editing/editing-0/spelling-and-grammar-checking/spelling-markers-010.html.ini

@@ -1,2 +0,0 @@
-[spelling-markers-010.html]
-  expected: FAIL

tests/wpt/meta/html/rendering/non-replaced-elements/form-controls/text-transform.html.ini

@@ -1,2 +0,0 @@
-[text-transform.html]
-  expected: FAIL

tests/wpt/meta/html/rendering/replaced-elements/the-textarea-element/textarea-padding-bend-overlaps-content-001.tentative.html.ini

@@ -1,2 +0,0 @@
-[textarea-padding-bend-overlaps-content-001.tentative.html]
-  expected: FAIL

tests/wpt/meta/html/rendering/replaced-elements/the-textarea-element/textarea-padding-bstart-moves-content-001.tentative.html.ini

@@ -1,2 +0,0 @@
-[textarea-padding-bstart-moves-content-001.tentative.html]
-  expected: FAIL

tests/wpt/meta/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html.ini

@@ -316,3 +316,21 @@
 
   [<input type="button" value="x" style="overflow: scroll; appearance: none;">]
     expected: FAIL
+
+  [<input type="range" style="overflow: visible; appearance: auto;">]
+    expected: FAIL
+
+  [<input type="range" style="overflow: visible; appearance: none;">]
+    expected: FAIL
+
+  [<input type="color" value="#000000" style="overflow: visible; appearance: auto;">]
+    expected: FAIL
+
+  [<input type="color" value="#000000" style="overflow: visible; appearance: none;">]
+    expected: FAIL
+
+  [<input type="image" src="data:(png)" alt="x" style="overflow: visible; appearance: auto;">]
+    expected: FAIL
+
+  [<input type="image" src="data:(png)" alt="x" style="overflow: visible; appearance: none;">]
+    expected: FAIL

tests/wpt/meta/html/rendering/widgets/button-layout/flex.html.ini

@@ -7,6 +7,3 @@
 
   [align-items:stretch should work]
     expected: FAIL
-
-  [align-items:flex-start should work]
-    expected: FAIL

tests/wpt/meta/html/rendering/widgets/button-layout/input-type-button-newline-2.html.ini

@@ -1,2 +0,0 @@
-[input-type-button-newline-2.html]
-  expected: FAIL

tests/wpt/meta/html/rendering/widgets/button-layout/input-type-button-newline.html.ini

@@ -1,2 +0,0 @@
-[input-type-button-newline.html]
-  expected: FAIL

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

@@ -8,9 +8,6 @@
   [number: Explicit height and auto width]
     expected: FAIL
 
-  [number: Text caret is taller than the placeholder]
-    expected: FAIL
-
   [number: Text caret is shorter than the placeholder]
     expected: FAIL
 

tests/wpt/meta/html/rendering/widgets/input-checkbox-switch-rtl.tentative.html.ini

@@ -0,0 +1,2 @@
+[input-checkbox-switch-rtl.tentative.html]
+  expected: FAIL

tests/wpt/meta/html/semantics/forms/textfieldselection/selection.html.ini

@@ -1,3 +0,0 @@
-[selection.html]
-  [test scrollLeft preservation for input]
-    expected: FAIL

tests/wpt/meta/html/semantics/forms/the-input-element/input-type-button.html.ini

@@ -1,3 +0,0 @@
-[input-type-button.html]
-  [label value]
-    expected: FAIL

tests/wpt/mozilla/meta/MANIFEST.json

@@ -3473,7 +3473,7 @@
      ]
     ],
     "input_line_height.html": [
-     "1de07c88ae2092e2e9885d30e2001e9fe09ca8b3",
+     "f1c1d742000a6c4c11d40806e07aeba502141368",
      [
       null,
       [
@@ -6547,7 +6547,7 @@
      ]
     ],
     "textarea_space_calculation.html": [
-     "20945e971b543cbc11741863314ccf3595654e80",
+     "ee5ea7b1c01f5a11188bc50eca3a60ea2c15edf2",
      [
       null,
       [
@@ -9115,7 +9115,7 @@
      []
     ],
     "input_line_height_ref.html": [
-     "16d4fd99712bd1d21cc8320f2e273a867f3fb807",
+     "f29e061cc35625fa039473e702f78dbc5a7d9c14",
      []
     ],
     "input_placeholder_ref.html": [
@@ -10073,7 +10073,7 @@
      []
     ],
     "textarea_space_calculation-ref.html": [
-     "b777beb062b67a51c1efdfe4afa55568fd3724e6",
+     "56abdf23c8f88a9f236d54ef798734becc372027",
      []
     ],
     "transform_3d_from_outside_viewport_ref.html": [

tests/wpt/mozilla/meta/css/button_css_width.html.ini

@@ -1,2 +0,0 @@
-[button_css_width.html]
-  expected: FAIL

tests/wpt/mozilla/meta/css/submit_focus_a.html.ini

@@ -1,2 +0,0 @@
-[submit_focus_a.html]
-  expected: FAIL

tests/wpt/mozilla/tests/css/input_line_height.html

@@ -7,6 +7,7 @@
 <body>
 <div style="line-height: 100px">
     <input type="text"></input>
+    <input type="text"></input>
 </div>
 </body>
 </html>

tests/wpt/mozilla/tests/css/input_line_height_ref.html

@@ -5,7 +5,10 @@
 </head>
 <body>
 <div style="line-height: 100px">
-    <input type="text" style="line-height: 1.8"></input>
+    <!-- https://html.spec.whatwg.org/multipage/#form-controls defines `line-height` for form
+        controls to be `initial` ie `normal`. -->
+    <input type="text" style="line-height: initial;"></input>
+    <input type="text" style="line-height: normal;"></input>
 </div>
 </body>
 </html>

tests/wpt/mozilla/tests/css/textarea_space_calculation-ref.html

@@ -1,8 +1,18 @@
 <!doctype html>
 <title>REFERENCE: textarea does not take up more space than it takes up</title>
 <style>
-textarea{height:2em;width:2em}
+textarea {
-div{width:2em;font-size:12px;line-height:3px}
+    height:2em;
+    width:2em;
+    /* `em` units are based on font size, so this size
+       has to be the same as the font size in the div. */
+    font-size:12px;
+}
+div {
+    width: 2em;
+    font-size: 12px;
+    line-height: 3px
+}
 </style>
 <h1>To pass, no red should be visible</h1>
 <div>

tests/wpt/mozilla/tests/css/textarea_space_calculation.html

@@ -3,8 +3,19 @@
 <title>textarea does not take up more space than it takes up</title>
 <link rel="match" href="textarea_space_calculation-ref.html">
 <style>
-textarea{height:2em;width:2em}
+textarea {
-div{background:red;width:2em;font-size:12px;line-height:3px}
+    height:2em;
+    width:2em;
+    /* `em` units are based on font size, so this size
+       has to be the same as the font size in the div. */
+    font-size:12px;
+}
+div {
+    background: red;
+    width: 2em;
+    font-size: 12px;
+    line-height: 3px
+}
 </style>
 <h1>To pass, no red should be visible</h1>
 <div>