Oriol Brufau
96c16d2da2
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
38 lines
1.4 KiB
HTML
38 lines
1.4 KiB
HTML
<!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>
|