[GridNG] Baseline second pass
This change updates the GridNG alignment logic to allow for baseline
eligibility to change depending on the phase of grid layout algorithm.
This is accomplished with an optional fallback baseline on GridItemData,
along with some logic to handle baselines being indefinite, depending on
where the algorithm is.
There is a bit of a circular dependency with synthesized baselines - we
cannot determine whether baselines are synthesized without laying out the
item. So this change also separates the concept of baseline eligibility
and the ability to synthesize baselines via the 'CanLayoutGridItem'
helper.
Bug: 1045599
Change-Id: Ifd5f47599cf494faadb330705a638df8c012c95b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2873217
Commit-Queue: Kurt Catti-Schmidt <kschmi@microsoft.com>
Reviewed-by: Ethan Jimenez <ethavar@microsoft.com>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#885295}
diff --git a/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html b/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
index dae81ce..5ddf449 100644
--- a/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
+++ b/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
@@ -35,6 +35,7 @@
.max-flex-columns { grid-template-columns: minmax(0px, 1fr); }
.flex-rows { grid-template-rows: 1fr; }
.max-flex-rows { grid-template-rows: minmax(0px, 1fr); }
+.auto-rows { grid-template-rows: auto 100px; }
.height25 { height: 25px; }
.height50 { height: 50px; }
@@ -53,7 +54,6 @@
setup({ explicit_done: true });
</script>
<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })">
-
<div style="height: 125px">
<pre>auto-sized rows - items with relative height</pre>
<div class="inline-grid alignItemsBaseline columns">
@@ -154,12 +154,12 @@
</div>
<div style="height: 250px">
- <pre>flex max-function columns - items with relative width<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
+ <pre>flex max-function columns - items with relative width<br>baseline is not applied initially, but orthogonal items in an auto-sized row force repeating the track sizing and height is not indefinite in that phase.</pre>
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
- <div class="inline-grid justifyItemsBaseline rows max-flex-columns">
- <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
- <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="-50" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
- <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
+ <div class="inline-grid justifyItemsBaseline auto-rows max-flex-columns">
+ <div class="firstRowFirstColumn verticalLR width50 height50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+ <div class="secondRowFirstColumn verticalLR width200Percent height50" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+ <div class="firstRowSpanning2AutoColumn verticalLR width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
</div>
</div>
diff --git a/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html b/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
index 10c6d8a..d2cdbea 100644
--- a/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
+++ b/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
@@ -29,12 +29,14 @@
.fit-content-columns { grid-template-columns: fit-content; }
.flex-columns { grid-template-columns: 1fr; }
.max-flex-columns { grid-template-columns: minmax(0px, 1fr); }
+.auto-columns { grid-template-columns: auto 100px; }
.min-content-rows { grid-template-rows: min-content; }
.max-content-rows { grid-template-rows: max-content; }
.fit-content-rows { grid-template-rows: fit-content; }
.flex-rows { grid-template-rows: 1fr; }
.max-flex-rows { grid-template-rows: minmax(0px, 1fr); }
+.auto-rows { grid-template-rows: auto 100px; }
.height25 { height: 25px; }
.height50 { height: 50px; }
@@ -93,8 +95,8 @@
<pre>max-flex-sized rows - horizonal grid and verticalLR item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
-<div class="inline-grid alignItemsBaseline columns max-flex-rows">
- <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="376" data-expected-width="100" data-expected-height="75">É</div>
+<div class="inline-grid alignItemsBaseline columns auto-rows">
+ <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
</div>
@@ -136,10 +138,10 @@
<pre>max-flex-sized columns - horizontal grid item - row-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
-<div class="inline-grid justifyItemsBaseline rows max-flex-columns">
- <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
- <div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
- <div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
+<div class="inline-grid justifyItemsBaseline auto-rows max-flex-columns">
+ <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
+ <div class="secondRowFirstColumn verticalLR" data-offset-x="32" data-offset-y="50" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+ <div class="firstRowSpanning2AutoColumn width25" data-offset-x="112" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
</div>
<pre>auto-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
@@ -179,10 +181,10 @@
<pre>max-flex-sized rows - verticalLR grid and horizontal item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
-<div class="inline-grid verticalLR alignItemsBaseline columns max-flex-rows">
- <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
- <div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
- <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
+<div class="inline-grid verticalLR alignItemsBaseline auto-columns max-flex-rows">
+ <div class="firstRowFirstColumn bigFont" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">É</div>
+ <div class="firstRowSecondColumn horizontalBT" data-offset-x="7" data-offset-y="50" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+ <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="87" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
</div>
<pre>auto-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
@@ -207,25 +209,25 @@
</div>
<pre>fit-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
-<div class="inline-grid verticalRL alignItemsBaseline columns fit-content-rows">
- <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
- <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
- <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
+<div class="inline-grid verticalRL alignItemsBaseline auto-columns fit-content-rows">
+ <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
+ <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+ <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
</div>
<pre>flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
-<div class="inline-grid verticalRL alignItemsBaseline columns flex-rows">
- <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
- <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
- <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
+<div class="inline-grid verticalRL alignItemsBaseline auto-columns flex-rows">
+ <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
+ <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+ <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
</div>
<pre>max-flex-sized rows - verticalRL grid and horizontal item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
-<div class="inline-grid verticalRL alignItemsBaseline columns max-flex-rows">
- <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
- <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
- <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
+<div class="inline-grid verticalRL alignItemsBaseline auto-columns max-flex-rows">
+ <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div>
+ <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+ <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div>
</div>
</body>
diff --git a/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html b/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
index a62999c..96ae131 100644
--- a/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
+++ b/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
@@ -22,8 +22,8 @@
text-orientation: sideways;
font-family: Ahem;
}
-.row { grid: minmax(0px, 1fr) / 50px 50px 100px }
-.column { grid: 50px 50px 100px / minmax(0px, 1fr); }
+.row { grid: minmax(0px, 1fr) / auto 50px 100px }
+.column { grid: auto 50px 100px / minmax(0px, 1fr); }
.item1 {
font-size: 30px;
background: blue;
@@ -50,42 +50,42 @@
<pre>flex rows - column-axis baseline - the blue orthogonal item didn't participate in the first iteration</pre>
<div class="grid row alignItemsBaseline">
- <div class="item1 verticalLR" data-offset-x="0" data-offset-y="34" data-expected-width="50" data-expected-height="30">É</div>
- <div class="item2" data-offset-x="50" data-offset-y="48" data-expected-width="50" data-expected-height="20">É</div>
- <div class="item3" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
+ <div class="item1 verticalLR" data-offset-x="0" data-offset-y="34" data-expected-width="30" data-expected-height="30">É</div>
+ <div class="item2" data-offset-x="30" data-offset-y="48" data-expected-width="50" data-expected-height="20">É</div>
+ <div class="item3" data-offset-x="80" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
</div>
<pre>flex row - column-axis baseline - the blue relative sized item didn't participate in the first iterarion</pre>
<div class="grid row alignItemsBaseline ">
- <div class="item1 relativeHeight" data-offset-x="0" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
- <div class="item2" data-offset-x="50" data-offset-y="64" data-expected-width="50" data-expected-height="20">É</div>
- <div class="item3 verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
+ <div class="item1 relativeHeight" data-offset-x="0" data-offset-y="56" data-expected-width="30" data-expected-height="40">É</div>
+ <div class="item2" data-offset-x="30" data-offset-y="64" data-expected-width="50" data-expected-height="20">É</div>
+ <div class="item3 verticalLR" data-offset-x="80" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
</div>
<pre>flex row - both the blue relative sized and red orthogonal didn't participate in the first iteration</pre>
<div class="grid row alignItemsBaseline">
- <div class="item1 relativeHeight" data-offset-x="0" data-offset-y="24" data-expected-width="50" data-expected-height="40"></div>
- <div class="item2 verticalLR" data-offset-x="50" data-offset-y="44" data-expected-width="50" data-expected-height="20">É</div>
- <div class="item3" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
+ <div class="item1 relativeHeight" data-offset-x="0" data-offset-y="40" data-expected-width="30" data-expected-height="40">É</div>
+ <div class="item2 verticalLR" data-offset-x="30" data-offset-y="44" data-expected-width="50" data-expected-height="20">É</div>
+ <div class="item3" data-offset-x="80" data-offset-y="0" data-expected-width="100" data-expected-height="80">É</div>
</div>
<pre>flex column - row-axis baseline - the blue orthogonal item didn't participate in the first iteration</pre>
<div class="grid column justifyItemsBaseline">
- <div class="item1" data-offset-x="16" data-offset-y="0" data-expected-width="30" data-expected-height="50">É</div>
- <div class="item2 verticalLR" data-offset-x="12" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
- <div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
+ <div class="item1" data-offset-x="16" data-offset-y="0" data-expected-width="30" data-expected-height="30">É</div>
+ <div class="item2 verticalLR" data-offset-x="12" data-offset-y="30" data-expected-width="20" data-expected-height="50">É</div>
+ <div class="item3 verticalLR" data-offset-x="0" data-offset-y="80" data-expected-width="80" data-expected-height="100">É</div>
</div>
<pre>flex column - column-axis baseline - the blue relative sized item didn't participate in the first iterarion</pre>
<div class="grid column justifyItemsBaseline">
- <div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
+ <div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50">É</div>
<div class="item2 verticalLR" data-offset-x="12" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
<div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
</div>
<pre>flex columns - both the blue relative sized and red orthogonal didn't participate in the first iteration</pre>
<div class="grid column justifyItemsBaseline">
- <div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50"></div>
+ <div class="item1 relativeWidth height50" data-offset-x="16" data-offset-y="0" data-expected-width="40" data-expected-height="50">É</div>
<div class="item2" data-offset-x="16" data-offset-y="50" data-expected-width="20" data-expected-height="50">É</div>
<div class="item3 verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
</div>
