[css-grid] Distribution offset doesn't account for non-spanning items
We recenttly changed the track sizing algorithm so that it considers the
offsets added by the Content Alignment properties. The change in r566412
introduce intermediate steps in the track sizing algorithm so that
inline-axis Content Distribution accounts for the row tracks sizes
computed in the next step.
However, we were adding the Content Distribution offsets for any column
track, but we should do it only for the tracks with spanning items. This
error led to the mentioned bugs and this change fixes them.
Bug: 871230, 871242
Change-Id: I8ac789ccacc2e5a51bfafd7820ed08e96a31e58b
Reviewed-on: https://chromium-review.googlesource.com/1176803
Reviewed-by: Sergio Villar <svillar@igalia.com>
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Cr-Commit-Position: refs/heads/master@{#583802}
diff --git a/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html b/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html
new file mode 100644
index 0000000..2ba9671
--- /dev/null
+++ b/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution and the track sizing algorithm</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-space-around">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Content Distribution offset doesn't account for tracks with non-spanning items.">
+<style>
+.grid {
+ display: inline-grid;
+ background: grey;
+ grid-template-columns: 100px;
+ font: 20px/1 Ahem;
+ width: 200px;
+}
+.item1 {
+ background: green;
+ grid-column: 1;
+ grid-row: 1;
+}
+.item2 {
+ background: blue;
+ grid-column: 1;
+ grid-row: 2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+ <div class="grid justifyContentSpaceAround" data-expected-width="200" data-expected-height="60">
+ <div class="item1" data-expected-width="100" data-expected-height="40">XXXX XXX</div>
+ <div class="item2" data-expected-width="100" data-expected-height="20">XXX</div>
+ </div>
+</body>
diff --git a/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html b/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html
new file mode 100644
index 0000000..e6de473
--- /dev/null
+++ b/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution and the track sizing algorithm</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-space-between">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Content Distribution offset doesn't account for relative sized tracks with non-spanning items.">
+<style>
+.grid {
+ display: inline-grid;
+ background: grey;
+ grid-template-columns: 50%;
+ font: 20px/1 Ahem;
+}
+
+.item1 {
+ background: green;
+ grid-column: 1;
+ grid-row: 1;
+}
+.item2 {
+ background: blue;
+ grid-column: 2;
+ grid-row: 1;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+ <div class="grid justifyContentSpaceBetween" data-expected-width="220" data-expected-height="40">
+ <div class="item1" data-expected-width="110" data-expected-height="40">XXXX XXX</div>
+ <div class="item2" data-expected-width="60" data-expected-height="40">XXX</div>
+ </div>
+</body>
