Skip to content

Commit

Permalink
[layout] Accept 'stretch' keyword as a width/height
Browse files Browse the repository at this point in the history 
One of our goals is for `-webkit-fill-available` and `stretch`
to have identical layout behavior.

Feature is not yet ready to ship.

Remaining work:
 * support stretch in flex-basis
 * add abspos tests with one inset specified
 * add aspect ratio test and fix if necessary
 * ditto with fixed table layout as mentioned in
   w3c/csswg-drafts#4028 (comment)
 * serialization?
 * Test that auto margins are treated as 0
 * fix block-height-2.html behavior and/or decide to change the spec
 * Add margin tests and fix our behavior for the cases discussed in
   w3c/csswg-drafts#11044

Change-Id: I8c773eb3fe964e58877e0d7d8dbb6325580e0cda
Bug: 41253915
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5884393
Reviewed-by: David Baron <dbaron@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1370209}
  • Loading branch information
@davidsgrogan @chromium-wpt-export-bot
davidsgrogan authored and chromium-wpt-export-bot committed Oct 17, 2024
1 parent bd4f74f commit 9356370
Show file tree
Hide file tree
Showing 10 changed files with 300 additions and 2 deletions.
21 changes: 21 additions & 0 deletions css/css-sizing/stretch/abspos-1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4028">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>

<div style="width: 100px; height: 100px; position: relative;">
<div style="position: absolute; width: stretch; height: 100px; background: green;">
</div>
</div>
22 changes: 22 additions & 0 deletions css/css-sizing/stretch/abspos-2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4028">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>

<div style="width: 100px; height: 200px; position: relative;">
<div
style="width: 100%; height: stretch; position: absolute; bottom: 100px; background: green;">
</div>
</div>
23 changes: 23 additions & 0 deletions css/css-sizing/stretch/bfc-next-to-float-1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4028">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<style>
#reference-overlapped-red {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
z-index: -1;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id="reference-overlapped-red"></div>

<div style="width:200px; margin-left: -100px;">
<div style="float: left; width: 100px; height: 100px;"></div>
<div
style="display: flow-root; width: stretch; height: 100px; background: green;">
</div>
</div>
128 changes: 128 additions & 0 deletions css/css-sizing/stretch/block-height-1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-width">
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src="/resources/check-layout-th.js"></script>
<meta name="assert" content="Checks the behaviour of stretch in various configurations.">
<style>
.content {
width: 20px;
height: 20px;
background: lime;
}
.tall-content {
width: 20px;
height: 120px;
background: lime;
}
</style>
<body onload="checkLayout('[data-expected-height]')">

<div style="height: 100px;">
<div data-expected-height=100 style="display: block; height: stretch;">
<div class=content></div>
</div>
</div>

<div style="height: 100px;">
<div data-expected-height=100 style="display: flex; height: stretch;">
<div class=content></div>
</div>
</div>

<div style="height: 100px;">
<div data-expected-height=100 style="display: grid; height: stretch;">
<div class=content></div>
</div>
</div>

<!-- As the height of the container is indefinite, stretch is treated as auto. -->
<div style="height: 100%;">
<div data-expected-height=20 style="display: block; height: stretch;">
<div class=content></div>
</div>
</div>

<div style="height: 100%;">
<div data-expected-height=20 style="display: flex; height: stretch;">
<div class=content></div>
</div>
</div>

<div style="height: 100%;">
<div data-expected-height=20 style="display: grid; height: stretch;">
<div class=content></div>
</div>
</div>

<div style="height: 100px;">
<div data-expected-height=100 style="display: block; min-height: stretch;">
<div class=content></div>
</div>
</div>

<div style="height: 100px;">
<div data-expected-height=100 style="display: flex; min-height: stretch;">
<div class=content></div>
</div>
</div>

<div style="height: 100px;">
<div data-expected-height=100 style="display: grid; min-height: stretch;">
<div class=content></div>
</div>
</div>

<div style="height: 100%;">
<div data-expected-height=20 style="display: block; min-height: stretch;">
<div class=content></div>
</div>
</div>

<div style="height: 100%;">
<div data-expected-height=20 style="display: flex; min-height: stretch;">
<div class=content></div>
</div>
</div>

<div style="height: 100%;">
<div data-expected-height=20 style="display: grid; min-height: stretch;">
<div class=content></div>
</div>
</div>

<div style="height: 100px;">
<div data-expected-height=100 style="display: block; max-height: stretch;">
<div class=tall-content></div>
</div>
</div>

<div style="height: 100px;">
<div data-expected-height=100 style="display: flex; max-height: stretch;">
<div class=tall-content></div>
</div>
</div>

<div style="height: 100px;">
<div data-expected-height=100 style="display: grid; max-height: stretch;">
<div class=tall-content></div>
</div>
</div>

<div style="height: 100%;">
<div data-expected-height=120 style="display: block; max-height: stretch;">
<div class=tall-content></div>
</div>
</div>

<div style="height: 100%;">
<div data-expected-height=120 style="display: flex; max-height: stretch;">
<div class=tall-content></div>
</div>
</div>

<div style="height: 100%;">
<div data-expected-height=120 style="display: grid; max-height: stretch;">
<div class=tall-content></div>
</div>
</div>
31 changes: 31 additions & 0 deletions css/css-sizing/stretch/block-height-2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src="/resources/check-layout-th.js"></script>
<meta name="assert" content="Checks the behaviour of stretch in various configurations.">

<body onload="checkLayout('[data-expected-height]')">

<div style="height: 200px; border: solid;">
<div style="height: stretch; margin: 10px;" data-expected-height="180"></div>
</div>

<!--
Chrome fails the following test, which is a variation of example 9 in the spec. Safari passes.
From https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing, height:stretch for blocks behaves as
"""
100% but applying the resulting size to its margin box instead of the box indicated by box-sizing. For this purpose, auto margins are treated as zero, and furthermore, for block-level boxes in particular, if its block-start/block-end margin would be adjoining to its parent’s block-start/block-end margin if its parent’s sizing properties all had their initial values, then ***its block-start/block-end margin is treated as zero.***
"""
So the spec demands that the child has 0px margins and as a corollary, has 300px inner and outer height.
But Blink gives it an inner height of 200px and margins as specified (25px/75px).
-->
<div style="height: 300px; outline: 1px solid; margin: 10px 0px 10px 0px;">
<div
style="height: stretch; margin: 25px 0px 75px 0px; outline: 2px dashed blue;"
data-expected-height="300"></div>
</div>
7 changes: 7 additions & 0 deletions css/css-sizing/stretch/min-width-1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-width">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<p>Test passes if there is a filled green square.</p>
<div style="width: 100px;">
<div style="width: 50px; min-width: stretch; height: 100px; background: green;"></div>
</div>
28 changes: 28 additions & 0 deletions css/css-sizing/stretch/parsing.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Intrinsic & Extrinsic Sizing Test: parsing stretch value</title>
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#sizing-values">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("width", "stretch");
test_valid_value("height", "stretch");
test_valid_value("max-width", "stretch");
test_valid_value("min-width", "stretch");
test_valid_value("max-height", "stretch");
test_valid_value("min-height", "stretch");
test_valid_value("inline-size", "stretch");
test_valid_value("block-size", "stretch");
test_valid_value("max-inline-size", "stretch");
test_valid_value("min-inline-size", "stretch");
test_valid_value("max-block-size", "stretch");
test_valid_value("min-block-size", "stretch");
test_valid_value("flex-basis", "stretch");
</script>
</body>
</html>
20 changes: 20 additions & 0 deletions css/css-sizing/stretch/positioned-non-replaced-1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<link rel="help" href="https://github.com/webcompat/web-bugs/issues/103641#issuecomment-1122414992">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1324259">
<p>Test passes if there is a filled green square.</p>
<style>
#target {
position: absolute;
background: green;
min-width: 50px;
min-height: 25px;
width: stretch;
height: stretch;
}
</style>
<div style="display: flow-root; position: relative; width: 150px; height: 150px; margin-top: -50px; margin-left: -50px;">
<div style="margin-left: 50px; margin-top: 50px;">
<div id="target"></div>
</div>
</div>
18 changes: 18 additions & 0 deletions css/css-sizing/stretch/positioned-replaced-1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<link rel="help" href="https://github.com/webcompat/web-bugs/issues/103641#issuecomment-1122414992">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1324259">
<p>Test passes if there is a filled green square.</p>
<style>
canvas {
position: absolute;
background: green;
width: stretch;
height: stretch;
}
</style>
<div style="display: flow-root; position: relative; width: 150px; height: 150px; margin-top: -50px; margin-left: -50px;">
<div style="margin-left: 50px; margin-top: 50px;">
<canvas width="50" height="25"></canvas>
</div>
</div>
4 changes: 2 additions & 2 deletions css/css-values/calc-size/animation/calc-size-height-interpolation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,15 +131,15 @@
{ at: 0, expect: `${expected}px` },
{ at: 0.75, expect: `${expected * 0.25 + 50 * 0.75}px` },
{ at: 1, expect: `50px` },
{ at: 1.25, expect: `${50 * 1.25 - expected * 0.25}px` },
{ at: 1.1, expect: `${50 * 1.1 - expected * 0.1}px` },
]);

test_interpolation({
property: 'height',
from: 'calc-size(any, 50px)',
to: `calc-size(${keyword}, size * 2)`,
}, [
{ at: -0.1, expect: `${50 * 1.1 - expected * 0.2}px` },
{ at: -0.05, expect: `${50 * 1.05 - expected * 0.1}px` },
{ at: 0, expect: "50px" },
{ at: 0.75, expect: `${50 * 0.25 + expected * 1.5}px` },
{ at: 1, expect: `${expected * 2}px` },
Expand Down

0 comments on commit 9356370

Please sign in to comment.