From 5cb1f378431071cdc8f96e884b639366759f0a39 Mon Sep 17 00:00:00 2001
From: Jo Steven Novaryo <65610990+stevennovaryo@users.noreply.github.com>
Date: Thu, 21 Aug 2025 15:26:32 +0800
Subject: [PATCH] layout: Stretch `` inner container to its containing
block (#38775)
The `` 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
---
components/layout/stylesheets/servo.css | 28 +++++++------
tests/wpt/mozilla/meta/MANIFEST.json | 17 ++++++++
.../input-textual-text-align-ref.html | 40 +++++++++++++++++++
.../appearance/input-textual-text-align.html | 29 ++++++++++++++
4 files changed, 101 insertions(+), 13 deletions(-)
create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-text-align-ref.html
create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-text-align.html
diff --git a/components/layout/stylesheets/servo.css b/components/layout/stylesheets/servo.css
index ec368cd773b..5c93b1496c2 100644
--- a/components/layout/stylesheets/servo.css
+++ b/components/layout/stylesheets/servo.css
@@ -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,
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index 17d953609db..de12c35ad2c 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -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",
diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-text-align-ref.html b/tests/wpt/mozilla/tests/appearance/input-textual-text-align-ref.html
new file mode 100644
index 00000000000..c2c99bc0751
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-textual-text-align-ref.html
@@ -0,0 +1,40 @@
+
+
+
+ Input Element's Text Could be Aligned Properly
+
+
+
+Display of the textual inputs should match the display generated by the CSS reference.
+
+
+ Foo
+
+
+
+
+ Foo
+
+
+
+
+ Foo
+
+
+
+
+ Foo
+
+
+
+
+ Foo
+
+
+
+
+ Foo
+
+
+
+
diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-text-align.html b/tests/wpt/mozilla/tests/appearance/input-textual-text-align.html
new file mode 100644
index 00000000000..600a41cba13
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-textual-text-align.html
@@ -0,0 +1,29 @@
+
+
+
+ Input Element's Text Could be Aligned Properly
+
+
+
+
+Display of the textual inputs should match the display generated by the CSS reference.
+