[css-grid] Change how percentage row tracks and gaps are resolved

The CSSWG decided to change how percentage row tracks and gutters in a grid container with indefinite height are resolved. The CSSWG issues are: * w3c/csswg-drafts#1921 * w3c/csswg-drafts#509 So far they were resolved as "auto", like it happens with percentage heights in regular blocks. But now they're going to behave similar to what happens in the columns axis, they would be ignored to compute the intrinsic height. This causes that we need to repeat the track sizing algorithm when we have a grid container with indefinite height that has some percentage rows using the intrinsic height calculated on the first pass. Then the percentages will be resolved against the intrinsic height. We are adding two new tests for this new behavior on top of updating several tests that were using percentages. We also add a test for content alignment and the second pass when the row size changes, the last case fails due to crbug.com/871230. JFTR, intent to implement and ship thread: https://groups.google.com/a/chromium.org/d/msg/blink-dev/CJgcT4hR7Rk/58WfZNbWBQAJ BUG=846187 TEST=css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html TEST=css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html TEST=css/css-grid/alignment/grid-content-alignment-second-pass-002.html Change-Id: I2a1959af6c95e0c47d294580599fdbf9bc432348
web-platform-tests · Aug 6, 2018 · f158a34 · f158a34
1 parent 41c5a5e
commit f158a34
Show file tree

Hide file tree

Showing 3 changed files with 686 additions and 0 deletions.
diff --git a/css/css-grid/alignment/grid-content-alignment-second-pass-002.html b/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content alignment second pass</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that content alignment is properly applied when the size of the tracks changes in the second pass of the track sizing algorithm.">
+<link rel="stylesheet" href="../../support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+
+<style>
+.grid {
+  position: relative;
+  font: 20px/1 Ahem;
+  margin: 10px;
+  display: inline-grid;
+  grid: 50% / 70%;
+}
+</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 id="log"></div>
+
+<div class="grid" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentStretch" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentStart" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentCenter" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="10" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentEnd" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentSpaceBetween" data-expected-width="100" data-expected-height="60">
+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="30">XXX X</div>
+  <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="70" data-expected-height="20">X</div>
+</div>
+
+<div class="grid contentSpaceEvenly" style="grid-template-rows: 30%;" data-expected-width="100" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="70" data-expected-height="24">XXX X</div>
+  <div class="secondRowFirstColumn" data-offset-x="15" data-offset-y="35" data-expected-width="70" data-expected-height="40">X<br>X</div>
+</div>
+
+<div class="grid contentSpaceAround" style="grid-template-rows: 25%;" data-expected-width="100" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="70" data-expected-height="20">XXX X</div>
+  <div class="secondRowFirstColumn" data-offset-x="15" data-offset-y="35" data-expected-width="70" data-expected-height="40">X<br>X</div>
+</div>
+
+</body>