commit 96c16d2da201763f6c16e3eecc4025dbabbe6ed7
parent b323d3e7fa59eeb02593bae76625f1ce5bfc7c34
Author: Oriol Brufau <obrufau@igalia.com>
Date: Fri, 14 Nov 2025 10:22:18 +0000
Bug 1999597 [wpt PR 55990] - layout: Do not stretch block-level widgets by default, a=testonly
Automatic update from web-platform-tests
layout: Do not stretch block-level widgets by default
If a widget like `<textarea>` had `display: block`, we were stretching
it like a `<div>`. However, similar to replaced elements, widgets should
not stretch by default.
It will still be possible to opt into stretching with an explicit
`justify-self: stretch` or `width: stretch`.
Signed-off-by: Oriol Brufau <obrufau@igalia.com>
--
wpt-commits: 20997066f7c047c162f2e7599cc95af1bddc2e23
wpt-pr: 55990
Diffstat:
2 files changed, 65 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-align/blocks/justify-self-widgets-ref.html b/testing/web-platform/tests/css/css-align/blocks/justify-self-widgets-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: justify-self on block-level widgets</title>
+<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
+
+<style>
+.widget {
+ float: left;
+ clear: both;
+ width: auto;
+ box-sizing: border-box;
+}
+</style>
+
+<input class="widget">
+<input class="widget">
+<input class="widget" style="float: right">
+<input class="widget" style="width: 100%">
+
+<select class="widget"></select>
+<select class="widget"></select>
+<select class="widget" style="float: right"></select>
+<select class="widget" style="width: 100%"></select>
+
+<textarea class="widget"></textarea>
+<textarea class="widget"></textarea>
+<textarea class="widget" style="float: right"></textarea>
+<textarea class="widget" style="width: 100%"></textarea>
diff --git a/testing/web-platform/tests/css/css-align/blocks/justify-self-widgets.html b/testing/web-platform/tests/css/css-align/blocks/justify-self-widgets.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment: justify-self on block-level widgets</title>
+<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align/#justify-block">
+<link rel="help" href="https://drafts.csswg.org/css-ui/#widget">
+<link rel="match" href="justify-self-widgets-ref.html">
+<meta name="assert" content="
+On block-level widgets:
+ - `justify-self: normal` behaves as `start` (not as `stretch`!).
+ - `justify-self: start` aligns to the start.
+ - `justify-self: end` aligns to the end.
+ - `justify-self: stretch` stretches the size to fill the containing block.
+">
+
+<style>
+.widget {
+ display: block;
+ width: auto;
+ box-sizing: border-box;
+}
+</style>
+
+<input class="widget" style="justify-self: normal">
+<input class="widget" style="justify-self: start">
+<input class="widget" style="justify-self: end">
+<input class="widget" style="justify-self: stretch">
+
+<select class="widget" style="justify-self: normal"></select>
+<select class="widget" style="justify-self: start"></select>
+<select class="widget" style="justify-self: end"></select>
+<select class="widget" style="justify-self: stretch"></select>
+
+<textarea class="widget" style="justify-self: normal"></textarea>
+<textarea class="widget" style="justify-self: start"></textarea>
+<textarea class="widget" style="justify-self: end"></textarea>
+<textarea class="widget" style="justify-self: stretch"></textarea>
