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