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