[grid] Fix alignment of baseline sharing groups.

Previously we'd make baseline sharing groups both start aligned. This was incorrect (however correct via. the spec if you read it a certain way). Instead the "major" group should be start aligned, and the "minor" group should be end aligned. See: w3c/csswg-drafts#7645 Change-Id: Iaa04f89e84116acfb9242a1c9cad0e9219f210f1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3858306 Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1041724}
web-platform-tests · Aug 31, 2022 · 72d7bd0 · 72d7bd0
1 parent 249c453
commit 72d7bd0
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 31 deletions.
diff --git a/css/css-grid/alignment/grid-alignment-style-changes-003.html b/css/css-grid/alignment/grid-alignment-style-changes-003.html
@@ -37,15 +37,15 @@
 <script>
 function runTest() {
     let before = {
-        item1: {"data-offset-x": 10 },
-        item2: {"data-offset-x": 10 },
-        item3: {"data-offset-x": 10 }
+        item1: {"data-offset-x": 40 },
+        item2: {"data-offset-x": 40 },
+        item3: {"data-offset-x": 40 }
     };
 
     let after = {
-        item1: {"data-offset-x": 0 },
+        item1: {"data-offset-x": 70 },
         item2: {"data-offset-x": 40 },
-        item3: {"data-offset-x": 0  }
+        item3: {"data-offset-x": 70 }
     };
 
     evaluateStyleChangeMultiple("before", before);

diff --git a/css/css-grid/alignment/grid-alignment-style-changes-004.html b/css/css-grid/alignment/grid-alignment-style-changes-004.html
@@ -38,15 +38,15 @@
 <script>
 function runTest() {
     let before = {
-        item1: {"data-offset-x": 0 },
+        item1: {"data-offset-x": 70 },
         item2: {"data-offset-x": 25 },
-        item3: {"data-offset-x": 0 }
+        item3: {"data-offset-x": 70 }
     };
 
     let after = {
-        item1: {"data-offset-x": 10 },
-        item2: {"data-offset-x": 10 },
-        item3: {"data-offset-x": 10 }
+        item1: {"data-offset-x": 40 },
+        item2: {"data-offset-x": 40 },
+        item3: {"data-offset-x": 40 }
     };
 
     evaluateStyleChangeMultiple("before", before);

diff --git a/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html b/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
@@ -41,7 +41,7 @@
 
 <div class="grid width300 justifyItemsBaseline">
   <div class="firstRowFirstColumn"                                   data-offset-x="0" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
-  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="0"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="75"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
   <div class="autoRowSpanning2AutoColumn width25"></div>
 </div>
 

diff --git a/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html b/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
@@ -52,7 +52,7 @@
 
 <div class="grid width300 justifyItemsBaseline">
   <div class="firstRowFirstColumn fixedWidth"                        data-offset-x="0" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
-  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="80"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
   <div class="autoRowSpanning2AutoColumn width25"></div>
 </div>
 

diff --git a/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html b/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
@@ -52,7 +52,7 @@
 
 <div class="grid width300 justifyItemsBaseline">
   <div class="firstRowFirstColumn relativeWidth"                    data-offset-x="00" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
-  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="80"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
   <div class="autoRowSpanning2AutoColumn width25"></div>
 </div>
 

diff --git a/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html b/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html
@@ -37,5 +37,19 @@
 </style>
 
 <p>4x1 with orthogonal items, but opposite block-flow direction.</p>
-<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
-<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 23px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 23px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
diff --git a/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html b/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html
@@ -36,7 +36,35 @@
 </style>
 
 <p>1x4 with parallel items, but opposite block-flow direction.</p>
-<div class="block verticalLR"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
-<div class="block verticalLR"><div class="block1"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
-<div class="block verticalRL"><div class="block1"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
-<div class="block verticalRL"><div class="block1"><div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div></div><div class="block2 verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div></div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
diff --git a/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html b/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html
@@ -31,5 +31,19 @@
 </style>
 
 <p>4x1 with orthogonal items, but opposite block-flow direction.</p>
-<div class="block verticalLR"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div></div>
-<div class="block verticalLR"><div class="block1"><div class="item extraRightPadding">É</div><div class="item extraLeftPadding">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalRL">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item extraRightPadding">É</div><div class="item extraLeftPadding">É</div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 10px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html b/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html
@@ -30,5 +30,19 @@
 </style>
 
 <p>1x4 with parallel items, but opposite block-flow direction.</p>
-<div class="block verticalLR"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div>
-<div class="block verticalLR"><div class="block1"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div></div><div class="block2 verticalRL"><div class="item">É</div><div class="item">É</div></div></div></div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalRL">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left:15.5px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html b/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html
@@ -30,5 +30,19 @@
 </style>
 
 <p>1x4 with parallel items, but opposite block-flow direction.</p>
-<div class="block verticalRL"><div class="block1"><div class="item">É</div><div class="item">É</div></div><div class="block2 verticalLR"><div class="item">É</div><div class="item">É</div></div></div>
-<div class="block verticalRL"><div class="block1"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div></div><div class="block2 verticalLR"><div class="item">É</div><div class="item">É</div></div></div></div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalLR">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 16px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html b/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html
@@ -56,20 +56,20 @@
 <div id="log"></div>
 
 <div class="grid" style="grid-template-columns: minmax(auto, 0px);">
-  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
-  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="item1" data-offset-x="-25" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="25" data-offset-y="50"></div>
   <div class="area" data-expected-width="75" data-expected-height="100"></div>
 </div>
 
 <div class="grid" style="grid-template-columns: minmax(auto, 75px);">
-  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
-  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="item1" data-offset-x="-25" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="25" data-offset-y="50"></div>
   <div class="area" data-expected-width="75" data-expected-height="100"></div>
 </div>
 
 <div class="grid" style="grid-template-columns: minmax(auto, 88px);">
-  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
-  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="item1" data-offset-x="-12" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="38" data-offset-y="50"></div>
   <div class="area" data-expected-width="88" data-expected-height="100"></div>
 </div>