From 8d2723b2c9ff4a4a4fba42b713b9894678a290ee Mon Sep 17 00:00:00 2001
From: Jo Steven Novaryo <65610990+stevennovaryo@users.noreply.github.com>
Date: Tue, 9 Sep 2025 11:09:38 +0800
Subject: [PATCH] layout: Fix Textual `` Vertical Align Style (#39014)
Reincorporate the styles to help with the vertical alignment of textual
`` 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
---
components/layout/stylesheets/servo.css | 4 +-
tests/wpt/mozilla/meta/MANIFEST.json | 19 ++++++-
.../input-textual-vertical-align-ref.html | 51 +++++++++++++++++++
.../input-textual-vertical-align.html | 35 +++++++++++++
.../appearance/supports/input-textual-ref.css | 6 +++
5 files changed, 112 insertions(+), 3 deletions(-)
create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-vertical-align-ref.html
create mode 100644 tests/wpt/mozilla/tests/appearance/input-textual-vertical-align.html
diff --git a/components/layout/stylesheets/servo.css b/components/layout/stylesheets/servo.css
index 5c93b1496c2..15b7b0f4196 100644
--- a/components/layout/stylesheets/servo.css
+++ b/components/layout/stylesheets/servo.css
@@ -38,14 +38,14 @@ input:not(:placeholder-shown)::placeholder {
input::-servo-text-control-inner-editor, input::placeholder {
block-size: fit-content !important;
+ inset-block: 0 !important;
+ margin-block: auto !important;
min-width: stretch;
white-space: pre;
}
input::placeholder {
color: grey;
- inset-block: 0 !important;
- margin-block: auto !important;
overflow: hidden;
pointer-events: none !important;
position: absolute !important;
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index 09a4ab03d1b..9743fc8c0d4 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -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",
[]
]
}
diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-vertical-align-ref.html b/tests/wpt/mozilla/tests/appearance/input-textual-vertical-align-ref.html
new file mode 100644
index 00000000000..f03297e4cf5
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-textual-vertical-align-ref.html
@@ -0,0 +1,51 @@
+
+
+
+ Input Element's Text is Aligned Vertically
+
+
+
+
+Display of the textual inputs should match the display generated by the CSS reference.
+
+
+ Text
+
+
+
+
+ Text
+
+
+
+
+ ●●●●●●●●
+
+
+
+
+ Password
+
+
+
+
+ Url
+
+
+
+
+ Url
+
+
+
+
+ Email
+
+
+
+
+ Email
+
+
+
+
diff --git a/tests/wpt/mozilla/tests/appearance/input-textual-vertical-align.html b/tests/wpt/mozilla/tests/appearance/input-textual-vertical-align.html
new file mode 100644
index 00000000000..ff0be80938c
--- /dev/null
+++ b/tests/wpt/mozilla/tests/appearance/input-textual-vertical-align.html
@@ -0,0 +1,35 @@
+
+
+
+ Input Element's Text is Aligned Vertically
+
+
+
+
+Display of the textual inputs should match the display generated by the CSS reference.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/wpt/mozilla/tests/appearance/supports/input-textual-ref.css b/tests/wpt/mozilla/tests/appearance/supports/input-textual-ref.css
index 7cdabb05d5d..2aa42d2fc68 100644
--- a/tests/wpt/mozilla/tests/appearance/supports/input-textual-ref.css
+++ b/tests/wpt/mozilla/tests/appearance/supports/input-textual-ref.css
@@ -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;
}
\ No newline at end of file