Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-19 03:18:20 +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

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": {
@ -8178,9 +8191,13 @@
"c2c99bc0751afd0aea3479a54df5f1d107fff38d",
[]
],
"input-textual-vertical-align-ref.html": [
"f03297e4cf5daf04ed10ddcae3db9a694d47f12f",
[]
],
"supports": {
"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;
}
/* 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 {
color: grey;
}