Bug 1483770 [wpt PR 12512] - [css-grid] Distribution offset doesn't account for non-spanning items, a=testonly
authorJavier Fernandez <jfernandez@igalia.com>
Mon, 20 Aug 2018 22:10:06 +0000
changeset 487800 e3ab676a310dc46b40d08a29166c02611085d3cf
parent 487799 74bdd33d51f170168cfd0e8be456ebb298cd0ebc
child 487801 c068c3396e147d00d16b5cb6430e54026fa59d1c
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1483770, 12512, 871230, 871242, 1176803, 583802
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1483770 [wpt PR 12512] - [css-grid] Distribution offset doesn't account for non-spanning items, a=testonly Automatic update from web-platform-tests[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} -- wpt-commits: 676265b89417b09c27d94a2a8538a88a34821e88 wpt-pr: 12512
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html
testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -331136,16 +331136,28 @@
     ]
    ],
    "css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-002.html": [
     [
      "/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-002.html",
      {}
     ]
    ],
+   "css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html": [
+    [
+     "/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html",
+     {}
+    ]
+   ],
+   "css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html": [
+    [
+     "/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html",
+     {}
+    ]
+   ],
    "css/css-grid/layout-algorithm/grid-find-fr-size-gutters-001.html": [
     [
      "/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-001.html",
      {}
     ]
    ],
    "css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html": [
     [
@@ -535719,16 +535731,24 @@
   "css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-001.html": [
    "c1ae11feee9b84fd7ea123dc396a7a95e70e4733",
    "testharness"
   ],
   "css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-002.html": [
    "14ad64d7a0875af3c2781edd68246d742deb067d",
    "testharness"
   ],
+  "css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html": [
+   "2ba9671f24dcd2d94d0cb48e734ee10182bf071a",
+   "testharness"
+  ],
+  "css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html": [
+   "e6de4730a6d2fbd92248ecdfeff5d2e1e1daf6a4",
+   "testharness"
+  ],
   "css/css-grid/layout-algorithm/grid-find-fr-size-gutters-001.html": [
    "25d236cebc65133a40538982ff040b97a71d8738",
    "testharness"
   ],
   "css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html": [
    "340fe82cfd28dcb80051f432c94e4eb215aff474",
    "testharness"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>