Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-19 11:20:09 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Fix Textual <input> Vertical Align Style (#39014)

Browse source 
Reincorporate the styles to help with the vertical alignment of textual
`<input>` element that was removed by #38775. Followed by adding Servo
specific WPTs to help with these kinds of problem.

Testing: New WPT

Signed-off-by: Jo Steven Novaryo <jo.steven.novaryo@huawei.com>
This commit is contained in:
Jo Steven Novaryo 2025-09-09 11:09:38 +08:00 • committed by GitHub
parent 2895ff233a
commit 8d2723b2c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 112 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/layout/stylesheets/servo.css
View file

@ -38,14 +38,14 @@ input:not(:placeholder-shown)::placeholder {
input::-servo-text-control-inner-editor, input::placeholder { input::-servo-text-control-inner-editor, input::placeholder {
block-size: fit-content !important; block-size: fit-content !important;
inset-block: 0 !important;
margin-block: auto !important;
min-width: stretch; min-width: stretch;
white-space: pre; white-space: pre;
} }
input::placeholder { input::placeholder {
color: grey; color: grey;
inset-block: 0 !important;
margin-block: auto !important;
overflow: hidden; overflow: hidden;
pointer-events: none !important; pointer-events: none !important;
position: absolute !important; position: absolute !important;

19
tests/wpt/mozilla/meta/MANIFEST.json vendored
View file

@ -189,6 +189,19 @@
], ],
{} {}
] ]
],
"input-textual-vertical-align.html": [
"ff0be80938ca5dd59e8eb58db81aba5390b6c771",
[
"appearance/input-textual-vertical-align.html",
[
[
"/_mozilla/appearance/input-textual-vertical-align-ref.html",
"=="
]
],
{}
]
] ]
}, },
"css": { "css": {
@ -8178,9 +8191,13 @@
"c2c99bc0751afd0aea3479a54df5f1d107fff38d", "c2c99bc0751afd0aea3479a54df5f1d107fff38d",
[] []
], ],
"input-textual-vertical-align-ref.html": [
"f03297e4cf5daf04ed10ddcae3db9a694d47f12f",
[]
],
"supports": { "supports": {
"input-textual-ref.css": [ "input-textual-ref.css": [
"7cdabb05d5dd7eb39df521fcb5ce24e39fea840f", "2aa42d2fc6877665357bc2f46a5fbb309230b507",
[] []
] ]
} }

51
tests/wpt/mozilla/tests/appearance/input-textual-vertical-align-ref.html vendored Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Input Element's Text is Aligned Vertically</title>
<link rel="stylesheet" href="./supports/input-textual-ref.css">
<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>
<div id="input" class="definite-height-vertically-center definite-width">
Text
</div>
</div>
<div>
<div id="input" class="definite-height-vertically-center definite-width placeholder-color">
Text
</div>
</div>
<div>
<div id="input" class="definite-height-vertically-center definite-width">
●●●●●●●●
</div>
</div>
<div>
<div id="input" class="definite-height-vertically-center definite-width placeholder-color">
Password
</div>
</div>
<div>
<div id="input" class="definite-height-vertically-center definite-width">
Url
</div>
</div>
<div>
<div id="input" class="definite-height-vertically-center definite-width placeholder-color">
Url
</div>
</div>
<div>
<div id="input" class="definite-height-vertically-center definite-width">
Email
</div>
</div>
<div>
<div id="input" class="definite-height-vertically-center definite-width placeholder-color">
Email
</div>
</div>
</body>
</html>

35
tests/wpt/mozilla/tests/appearance/input-textual-vertical-align.html vendored Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>Input Element's Text is Aligned Vertically</title>
<link rel="match" href="input-textual-vertical-align-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="width: 100px; height: 50px; font-size: 1rem;"></input>
</div>
<div>
<input type="text" placeholder="Text" style="width: 100px; height: 50px; font-size: 1rem;"></input>
</div>
<div>
<input type="password" value="Password" style="width: 100px; height: 50px; font-size: 1rem;"></input>
</div>
<div>
<input type="password" placeholder="Password" style="width: 100px; height: 50px; font-size: 1rem;"></input>
</div>
<div>
<input type="url" value="Url" style="width: 100px; height: 50px; font-size: 1rem;"></input>
</div>
<div>
<input type="url" placeholder="Url" style="width: 100px; height: 50px; font-size: 1rem;"></input>
</div>
<div>
<input type="email" value="Email" style="width: 100px; height: 50px; font-size: 1rem;"></input>
</div>
<div>
<input type="email" placeholder="Email" style="width: 100px; height: 50px; font-size: 1rem;"></input>
</div>
</body>
</html>

6
tests/wpt/mozilla/tests/appearance/supports/input-textual-ref.css vendored
View file

@ -22,6 +22,12 @@
width: 100px; width: 100px;
} }
/* Setting the line-height to be it's container height would align the text vertically. */
.definite-height-vertically-center {
height: 50px;
line-height: 50px;
}
.placeholder-color { .placeholder-color {
color: grey; color: grey;
} }