From 9356370c840aabd208b5460fb11efaab8b4f94e6 Mon Sep 17 00:00:00 2001 From: David Grogan Date: Thu, 17 Oct 2024 13:36:18 -0700 Subject: [PATCH] [layout] Accept 'stretch' keyword as a width/height 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 https://github.com/w3c/csswg-drafts/issues/4028#issuecomment-2373143159 * 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 https://github.com/w3c/csswg-drafts/issues/11044 Change-Id: I8c773eb3fe964e58877e0d7d8dbb6325580e0cda Bug: 41253915 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5884393 Reviewed-by: David Baron Commit-Queue: David Grogan Cr-Commit-Position: refs/heads/main@{#1370209} --- css/css-sizing/stretch/abspos-1.html | 21 +++ css/css-sizing/stretch/abspos-2.html | 22 +++ .../stretch/bfc-next-to-float-1.html | 23 ++++ css/css-sizing/stretch/block-height-1.html | 128 ++++++++++++++++++ css/css-sizing/stretch/block-height-2.html | 31 +++++ css/css-sizing/stretch/min-width-1.html | 7 + css/css-sizing/stretch/parsing.html | 28 ++++ .../stretch/positioned-non-replaced-1.html | 20 +++ .../stretch/positioned-replaced-1.html | 18 +++ .../calc-size-height-interpolation.html | 4 +- 10 files changed, 300 insertions(+), 2 deletions(-) create mode 100644 css/css-sizing/stretch/abspos-1.html create mode 100644 css/css-sizing/stretch/abspos-2.html create mode 100644 css/css-sizing/stretch/bfc-next-to-float-1.html create mode 100644 css/css-sizing/stretch/block-height-1.html create mode 100644 css/css-sizing/stretch/block-height-2.html create mode 100644 css/css-sizing/stretch/min-width-1.html create mode 100644 css/css-sizing/stretch/parsing.html create mode 100644 css/css-sizing/stretch/positioned-non-replaced-1.html create mode 100644 css/css-sizing/stretch/positioned-replaced-1.html diff --git a/css/css-sizing/stretch/abspos-1.html b/css/css-sizing/stretch/abspos-1.html new file mode 100644 index 00000000000000..a64f0d05fdf39c --- /dev/null +++ b/css/css-sizing/stretch/abspos-1.html @@ -0,0 +1,21 @@ + + + + + + +

Test passes if there is a filled green square and no red.

+
+ +
+
+
+
diff --git a/css/css-sizing/stretch/abspos-2.html b/css/css-sizing/stretch/abspos-2.html new file mode 100644 index 00000000000000..80d815113d18cb --- /dev/null +++ b/css/css-sizing/stretch/abspos-2.html @@ -0,0 +1,22 @@ + + + + + + +

Test passes if there is a filled green square and no red.

+
+ +
+
+
+
diff --git a/css/css-sizing/stretch/bfc-next-to-float-1.html b/css/css-sizing/stretch/bfc-next-to-float-1.html new file mode 100644 index 00000000000000..9c2a60e6c01917 --- /dev/null +++ b/css/css-sizing/stretch/bfc-next-to-float-1.html @@ -0,0 +1,23 @@ + + + + + + +

Test passes if there is a filled green square and no red.

+
+ +
+
+
+
+
diff --git a/css/css-sizing/stretch/block-height-1.html b/css/css-sizing/stretch/block-height-1.html new file mode 100644 index 00000000000000..94960f15b96f9f --- /dev/null +++ b/css/css-sizing/stretch/block-height-1.html @@ -0,0 +1,128 @@ + + + + + + + + + +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
diff --git a/css/css-sizing/stretch/block-height-2.html b/css/css-sizing/stretch/block-height-2.html new file mode 100644 index 00000000000000..7028adf90543f4 --- /dev/null +++ b/css/css-sizing/stretch/block-height-2.html @@ -0,0 +1,31 @@ + + + + + + + + + +
+
+
+ + +
+
+
diff --git a/css/css-sizing/stretch/min-width-1.html b/css/css-sizing/stretch/min-width-1.html new file mode 100644 index 00000000000000..a1a39073e88d46 --- /dev/null +++ b/css/css-sizing/stretch/min-width-1.html @@ -0,0 +1,7 @@ + + + +

Test passes if there is a filled green square.

+
+
+
diff --git a/css/css-sizing/stretch/parsing.html b/css/css-sizing/stretch/parsing.html new file mode 100644 index 00000000000000..1f5bd39059ebff --- /dev/null +++ b/css/css-sizing/stretch/parsing.html @@ -0,0 +1,28 @@ + + + + +CSS Intrinsic & Extrinsic Sizing Test: parsing stretch value + + + + + + + + + diff --git a/css/css-sizing/stretch/positioned-non-replaced-1.html b/css/css-sizing/stretch/positioned-non-replaced-1.html new file mode 100644 index 00000000000000..b66916b8ab4867 --- /dev/null +++ b/css/css-sizing/stretch/positioned-non-replaced-1.html @@ -0,0 +1,20 @@ + + + + +

Test passes if there is a filled green square.

+ +
+
+
+
+
diff --git a/css/css-sizing/stretch/positioned-replaced-1.html b/css/css-sizing/stretch/positioned-replaced-1.html new file mode 100644 index 00000000000000..60b817933d3330 --- /dev/null +++ b/css/css-sizing/stretch/positioned-replaced-1.html @@ -0,0 +1,18 @@ + + + + +

Test passes if there is a filled green square.

+ +
+
+ +
+
diff --git a/css/css-values/calc-size/animation/calc-size-height-interpolation.html b/css/css-values/calc-size/animation/calc-size-height-interpolation.html index 2126bd8faed1c2..20b7b8ba317489 100644 --- a/css/css-values/calc-size/animation/calc-size-height-interpolation.html +++ b/css/css-values/calc-size/animation/calc-size-height-interpolation.html @@ -131,7 +131,7 @@ { 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({ @@ -139,7 +139,7 @@ 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` },