mirror of
https://github.com/servo/servo.git
synced 2025-09-27 23:30:08 +01:00
layout: Set color and text decoration on <select>
elements by default (#38570)
This makes the default style for `<select>` elements match that of gecko (https://searchfox.org/mozilla-central/rev/a1f4cb9fc03d81be41ca2ba81294592df784364d/layout/style/res/forms.css#217-243), with some small modifications because servo does not have fancy things like `color: -moz-ComboboxText;`. Testing: Includes a new web platform test Fixes: https://github.com/servo/servo/issues/37895 --------- Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
This commit is contained in:
parent
99ce81cf64
commit
6e7226961b
4 changed files with 92 additions and 3 deletions
|
@ -297,15 +297,54 @@ progress #-servo-progress-bar {
|
|||
background-color: #7a3;
|
||||
}
|
||||
|
||||
/* Mostly matches https://searchfox.org/mozilla-central/rev/a1f4cb9fc03d81be41ca2ba81294592df784364d/layout/style/res/forms.css#217-243 */
|
||||
select {
|
||||
background-color: lightgrey;
|
||||
border-radius: 5px;
|
||||
border: 1px solid gray;
|
||||
padding: 0 0.25em;
|
||||
/* Don't show a text cursor when hovering selected option */
|
||||
cursor: default;
|
||||
cursor: default; /* Don't change cursor when hovering */
|
||||
margin: 0;
|
||||
white-space: nowrap !important;
|
||||
word-wrap: normal !important;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
overflow: clip;
|
||||
/* No text-decoration reaching inside, by default */
|
||||
display: inline-block;
|
||||
page-break-inside: avoid;
|
||||
overflow-clip-box: padding-box !important;
|
||||
padding-block: 1px;
|
||||
font-family: sans-serif;
|
||||
|
||||
/* These styles are specific to single-select elements */
|
||||
padding-inline: 4px;
|
||||
color: black;
|
||||
vertical-align: baseline;
|
||||
appearance: auto;
|
||||
}
|
||||
|
||||
/* Matches https://searchfox.org/mozilla-central/rev/a1f4cb9fc03d81be41ca2ba81294592df784364d/layout/style/res/forms.css#120-132 */
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
text-align: initial;
|
||||
text-indent: initial;
|
||||
text-shadow: initial;
|
||||
text-transform: initial;
|
||||
word-spacing: initial;
|
||||
letter-spacing: initial;
|
||||
/* Note that line-height is also reset for all these, via the font shorthand */
|
||||
}
|
||||
|
||||
input[type="reset" i],
|
||||
input[type="button" i],
|
||||
input[type="submit" i],
|
||||
button {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
slot {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
|
|
17
tests/wpt/meta/MANIFEST.json
vendored
17
tests/wpt/meta/MANIFEST.json
vendored
|
@ -357174,6 +357174,19 @@
|
|||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"select-text-decoration.html": [
|
||||
"a697e0f7b0c3d3455b6595ee3064dbbe7baff22c",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/html/rendering/replaced-elements/the-select-element/select-text-decoration-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
]
|
||||
},
|
||||
"the-textarea-element": {
|
||||
|
@ -486570,6 +486583,10 @@
|
|||
"select-multiple-re-add-option-via-document-fragment-ref.html": [
|
||||
"cb66ddaaaf369479e59f6092d04633a2dc2baf6c",
|
||||
[]
|
||||
],
|
||||
"select-text-decoration-ref.html": [
|
||||
"41a039e988f17a0e8af5ad474f82828c4b8534ea",
|
||||
[]
|
||||
]
|
||||
},
|
||||
"the-textarea-element": {
|
||||
|
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<select>
|
||||
<option>Foobar</option>
|
||||
</select>
|
||||
</body>
|
||||
</html>
|
22
tests/wpt/tests/html/rendering/replaced-elements/the-select-element/select-text-decoration.html
vendored
Normal file
22
tests/wpt/tests/html/rendering/replaced-elements/the-select-element/select-text-decoration.html
vendored
Normal file
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Text decoration should not propagate into select elements by default</title>
|
||||
<link rel="author" title="Simon Wülker" href="mailto:simon.wuelker@arcor.de">
|
||||
<link rel="match" href="select-text-decoration-ref.html">
|
||||
<link rel="help" href="https://github.com/servo/servo/issues/37895">
|
||||
|
||||
<style>
|
||||
body {
|
||||
color: red;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<select>
|
||||
<option>Foobar</option>
|
||||
</select>
|
||||
</body>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue