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.
This commit is contained in:
Martin Robinson 2024-06-20 12:13:50 +02:00 committed by GitHub
parent 3d6accbbe3
commit 44064b1439
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
65 changed files with 225 additions and 204 deletions

View file

@ -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;
}

View file

@ -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;