[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:
https://github.com/w3c/csswg-drafts/issues/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}
diff --git a/css/css-grid/alignment/grid-alignment-style-changes-003.html b/css/css-grid/alignment/grid-alignment-style-changes-003.html
index 5c63fd8..dc7f350 100644
--- 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
index c7d0046..84475fd 100644
--- 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
index 3939c5b..c9e630c 100644
--- 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
index f2f23cb..e96f8da 100644
--- 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
index 1160895..19a4f51 100644
--- 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
index 460a453..1b563f1 100644
--- 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
index 9c2f6e4..8593ea1 100644
--- 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
index e92a90e..cba725f 100644
--- 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
index fe00a5f..6f56414 100644
--- 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
index ffa3e05..30658b8 100644
--- 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
index e56de9f..cd80fd3 100644
--- 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>
