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

layout: Stretch <input> inner container to its containing block (#38775)

Browse source 
The `<input>` element inner container should be stretch to its
containing block. This would allow the alignment of the text. This is
done by adding `min-width: 100%`. It is required because we are not
using a custom layout contrary to Firefox and Chrome.

Testing: New Servo specific WPT.

---------

Signed-off-by: Jo Steven Novaryo <jo.steven.novaryo@huawei.com>
This commit is contained in:
Jo Steven Novaryo 2025-08-21 15:26:32 +08:00 • committed by GitHub
parent 9cd019403f
commit 5cb1f37843
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 101 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -169,6 +169,19 @@
],
{}
]
],
"input-textual-text-align.html": [
"600a41cba133e9933132165e7cc4a2ea0ca28884",
[
"appearance/input-textual-text-align.html",
[
[
"/_mozilla/appearance/input-textual-text-align-ref.html",
"=="
]
],
{}
]
]
},
"css": {
@ -8154,6 +8167,10 @@
"d30f13a2a1bab16989ec585a57ba7b7bd0b1c329",
[]
],
"input-textual-text-align-ref.html": [
"c2c99bc0751afd0aea3479a54df5f1d107fff38d",
[]
],
"supports": {
"input-textual-ref.css": [
"7cdabb05d5dd7eb39df521fcb5ce24e39fea840f",

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

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<head>
<title>Input Element's Text Could be Aligned Properly</title>
<link rel="stylesheet" href="./supports/input-textual-ref.css">
</head>
<body>
Display of the textual inputs should match the display generated by the CSS reference.
<div>
<div id="input" class="definite-width" style="text-align: left;">
Foo
</div>
</div>
<div>
<div id="input" class="definite-width" style="text-align: center;">
Foo
</div>
</div>
<div>
<div id="input" class="definite-width" style="text-align: right;">
Foo
</div>
</div>
<div>
<div id="input" class="definite-width placeholder-color" style="text-align: left;">
Foo
</div>
</div>
<div>
<div id="input" class="definite-width placeholder-color" style="text-align: center;">
Foo
</div>
</div>
<div>
<div id="input" class="definite-width placeholder-color" style="text-align: right;">
Foo
</div>
</div>
</body>
</html>

29
tests/wpt/mozilla/tests/appearance/input-textual-text-align.html vendored Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>Input Element's Text Could be Aligned Properly</title>
<link rel="match" href="input-textual-text-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="Foo" style="text-align: left; width: 100px; font-size: 1em !important;"></input>
</div>
<div>
<input type="text" value="Foo" style="text-align: center; width: 100px; font-size: 1em !important;"></input>
</div>
<div>
<input type="text" value="Foo" style="text-align: right; width: 100px; font-size: 1em !important;"></input>
</div>
<div>
<input type="text" placeholder="Foo" style="text-align: left; width: 100px; font-size: 1em !important;"></input>
</div>
<div>
<input type="text" placeholder="Foo" style="text-align: center; width: 100px; font-size: 1em !important;"></input>
</div>
<div>
<input type="text" placeholder="Foo" style="text-align: right; width: 100px; font-size: 1em !important;"></input>
</div>
</body>
</html>