Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-25 07:08:21 +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

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

@ -24,38 +24,40 @@ input::-servo-text-control-inner-editor {
pointer-events: auto;
}
/* FIXME(#36982): Use `display: block; align-content: center` instead of flex. */
input::-servo-text-control-inner-container {
position: relative;
height: 100%;
pointer-events: none;
display: flex;
height: stretch;
pointer-events: none;
position: relative;
}
input:not(:placeholder-shown)::placeholder {
visibility: hidden !important
visibility: hidden !important;
}
input::-servo-text-control-inner-editor, input::placeholder {
white-space: pre;
margin-block: auto !important;
inset-block: 0 !important;
block-size: fit-content !important;
min-width: stretch;
white-space: pre;
}
input::placeholder {
overflow: hidden !important;
position: absolute !important;
color: grey !important;
color: grey;
inset-block: 0 !important;
margin-block: auto !important;
overflow: hidden;
pointer-events: none !important;
position: absolute !important;
}
input::color-swatch {
width: 100%;
height: 100%;
display: inline-block;
box-sizing: border-box;
border: 1px solid gray;
border-radius: 2px;
display: inline-block;
height: 100%;
width: 100%;
}
input::selection,

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>