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.

2 files changed, 40 insertions, 21 deletions

diff --git a/resources/servo.css b/resources/servo.css
index 4d32867e0ff..e3d21e69665 100644
--- a/resources/servo.css
+++ b/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;
 }
 
diff --git a/resources/user-agent.css b/resources/user-agent.css
index 34ddc161c47..923eeed7099 100644
--- a/resources/user-agent.css
+++ b/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,
-input:focus, textarea:focus, button:focus { outline: thin dotted; }
+a:focus, area:focus {
+  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, option, optgroup, button, textarea {
+input, select, 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[type="submit"], select, button {
-  box-sizing: border-box;
+input, select, textarea {
+  text-align: initial;
+}
+
+: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;