Bug 1477230 [wpt PR 12089] - [css-grid] Change how percentage row tracks and gaps are resolved, a=testonly
authorManuel Rego Casasnovas <rego@igalia.com>
Fri, 10 Aug 2018 16:05:04 +0000
changeset 486240 b695a1526020329c5dbe56bea9a367db5178a5cb
parent 486239 14f33f70fa0c3bc615a19f0b104b63a7421e6fab
child 486241 a56d67a01d2daa9b7f9d3468e64d50f107d78ffc
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
bugs1477230, 12089, 871230, 846187, 1142409, 581185
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 1477230 [wpt PR 12089] - [css-grid] Change how percentage row tracks and gaps are resolved, a=testonly Automatic update from web-platform-tests[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: * https://github.com/w3c/csswg-drafts/issues/1921 * https://github.com/w3c/csswg-drafts/issues/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 Reviewed-on: https://chromium-review.googlesource.com/1142409 Commit-Queue: Manuel Rego <rego@igalia.com> Reviewed-by: Sergio Villar <svillar@igalia.com> Cr-Commit-Position: refs/heads/master@{#581185} -- wpt-commits: 244c6baf38953eac29840e2fbcb8a42dd8bafe88 wpt-pr: 12089
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html
testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -329066,16 +329066,22 @@
     ]
    ],
    "css/css-grid/alignment/grid-content-alignment-second-pass-001.html": [
     [
      "/css/css-grid/alignment/grid-content-alignment-second-pass-001.html",
      {}
     ]
    ],
+   "css/css-grid/alignment/grid-content-alignment-second-pass-002.html": [
+    [
+     "/css/css-grid/alignment/grid-content-alignment-second-pass-002.html",
+     {}
+    ]
+   ],
    "css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html": [
     [
      "/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html",
      {}
     ]
    ],
    "css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html": [
     [
@@ -329726,16 +329732,28 @@
     ]
    ],
    "css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.html": [
     [
      "/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.html",
      {}
     ]
    ],
+   "css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html": [
+    [
+     "/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html",
+     {}
+    ]
+   ],
+   "css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html": [
+    [
+     "/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html",
+     {}
+    ]
+   ],
    "css/css-grid/grid-definition/grid-shorthand-001.html": [
     [
      "/css/css-grid/grid-definition/grid-shorthand-001.html",
      {}
     ]
    ],
    "css/css-grid/grid-definition/grid-support-flexible-lengths-001.html": [
     [
@@ -513844,17 +513862,17 @@
    "b9cd919bc4f8e6dbb04cf25153bcad700b00869d",
    "support"
   ],
   "css/css-backgrounds/background-attachment-local/attachment-scroll-positioning-1.html": [
    "67bccc350e00f815b8bcd46f3a85a0d8916d378f",
    "reftest"
   ],
   "css/css-backgrounds/background-attachment-local/reftest.list": [
-   "6984fafc5d9a883b1f2e284e589ff525f643e6b7",
+   "b1d23371e3e5ef66de8d2bf3ef78fa4d3ce83803",
    "support"
   ],
   "css/css-backgrounds/background-clip-001.html": [
    "9c677e547ff0311519e5ab29f1cccee93c33a9e4",
    "testharness"
   ],
   "css/css-backgrounds/background-clip-002.html": [
    "f9947df0282f17182111c09bfe538806364fd1ac",
@@ -532543,16 +532561,20 @@
   "css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html": [
    "3630eee37558bfa33c84b9c5ec467224b747edef",
    "testharness"
   ],
   "css/css-grid/alignment/grid-content-alignment-second-pass-001.html": [
    "5b4bbabbb160079796aa4eb6786ea15383f6dd75",
    "testharness"
   ],
+  "css/css-grid/alignment/grid-content-alignment-second-pass-002.html": [
+   "a6837e3debba198fc6c9fb8fff1a649e3408314a",
+   "testharness"
+  ],
   "css/css-grid/alignment/grid-content-distribution-001.html": [
    "7b53a2897b83d20ff7cd12db85f576830953b56e",
    "reftest"
   ],
   "css/css-grid/alignment/grid-content-distribution-002.html": [
    "194934bb93e5fdfdc57f573a6ef6235c19a99ed9",
    "reftest"
   ],
@@ -533303,16 +533325,24 @@
   "css/css-grid/grid-definition/grid-layout-basic.html": [
    "578f70173b015497db2e13a3c06d6ed14d23d659",
    "reftest"
   ],
   "css/css-grid/grid-definition/grid-layout-repeat-notation.html": [
    "ac0273f83aae54e0a565fee073c6943747b9b40f",
    "reftest"
   ],
+  "css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html": [
+   "cdae02a8debf3d0f87508675774cc7e48a5566e3",
+   "testharness"
+  ],
+  "css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html": [
+   "8285a91d8ba57f9a6167afc28b95e9dee0aef2b7",
+   "testharness"
+  ],
   "css/css-grid/grid-definition/grid-shorthand-001.html": [
    "476415e8dfe679340b53b8a3400191d8c8210916",
    "testharness"
   ],
   "css/css-grid/grid-definition/grid-support-flexible-lengths-001.html": [
    "7c4e1c6c41e8a4cab75f6bb5bad7d0b1346a7af1",
    "testharness"
   ],
@@ -565480,17 +565510,17 @@
    "649f9485f44f800b7685d604ac31c88ce43e4d81",
    "testharness"
   ],
   "css/cssom/medialist-interfaces-004.html": [
    "cf9befb8ffb628f59508d5d74ec6ed4db9e4e09e",
    "testharness"
   ],
   "css/cssom/overflow-serialization.html": [
-   "136b8aba117eb64403700d8c4348db085cede9c8",
+   "2911c8da3e3ae47af4fd764170fd7439cda56685",
    "testharness"
   ],
   "css/cssom/preferred-stylesheet-order.html": [
    "dc990131ab39cd451b5cfced3464690c5ef1a802",
    "testharness"
   ],
   "css/cssom/preferred-stylesheet-reversed-order.html": [
    "ff3a8b09010cdb220fe5bf6661ae380a7fe2c267",
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/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>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html
@@ -0,0 +1,572 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Percentage rows indefinite height</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
+<meta name="assert" content="This test checks that percentage rows on grid containers with indefinite height are treated as 'auto' to compute the intrinsic height, but are later resolved against the intrinsic height during layout.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="support/grid.css">
+<style>
+.grid {
+  position: relative;
+  font: 25px/1 Ahem;
+  margin: 50px 0;
+}
+
+.border {
+  border: 10px solid;
+}
+
+.padding {
+  padding: 5px;
+}
+</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>
+
+<p>grid-template-rows: 60%;</p>
+
+<div class="grid" style="grid-template-rows: 60%;" data-expected-height="0">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 60%;" data-expected-height="25">
+  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 60%;" data-expected-height="50">
+  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="20">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="45">
+  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="70">
+  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="10">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="35">
+  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="60">
+  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="30">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="55">
+  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<p>grid-template-rows: 140%;</p>
+
+<div class="grid" style="grid-template-rows: 140%;" data-expected-height="0">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 140%;" data-expected-height="25">
+  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 140%;" data-expected-height="50">
+  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="20">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="45">
+  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="70">
+  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="10">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="35">
+  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="60">
+  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="30">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="55">
+  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<p>grid-template-rows: 100px 60%;</p>
+
+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="100">
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="125">
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="150">
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="100">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="125">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="150">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="120">
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="145">
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="170">
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="120">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="145">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="170">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="110">
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="135">
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="160">
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="110">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="135">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="160">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="130">
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="155">
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="180">
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="130">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="155">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="180">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<p>grid-template-rows: 100px 140%;</p>
+
+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="100">
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="125">
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="150">
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="100">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="125">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="150">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="120">
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="145">
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="170">
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="120">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="145">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="170">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="110">
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="135">
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="160">
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="110">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="135">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="160">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="130">
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="155">
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="180">
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="130">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="155">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="180">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<p>grid-template-rows: auto 60%;</p>
+
+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="0">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="25">
+  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="50">
+  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="25">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="15"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="50">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="75">
+  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="20">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="45">
+  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="70">
+  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="45">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="15"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="70">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="95">
+  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="10">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="35">
+  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="60">
+  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="35">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="15"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="60">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="85">
+  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="30">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="55">
+  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="80">
+  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="55">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="15"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="105">
+  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
+</div>
+
+<p>grid-template-rows: auto 140%;</p>
+
+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="0">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="25">
+  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="50">
+  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="25">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="35"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="50">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="75">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="20">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="45">
+  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="70">
+  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="45">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="35"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="70">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="95">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="10">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="35">
+  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="60">
+  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="35">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="35"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="60">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="85">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="30">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="55">
+  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="80">
+  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="55">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="35"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="105">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
+</div>
+
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Percentage rows indefinite height 2nd 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/#track-sizing">
+<meta name="assert" content="This test checkds that when we have percentage rows in indefinite height grid containers, we need to do a second pass of the track sizing algorithm to get the expected results.">
+<meta name="flags" content="ahem">
+<style>
+.grid {
+  display: grid;
+  border: solid 5px;
+  position: relative;
+  font: 25px/1 Ahem;
+  margin: 50px 0;
+}
+</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" style="grid-template-rows: auto 60% auto;" data-expected-height="35">
+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="5" data-offset-top="0"></div>
+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="25" data-offset-top="0">X</div>
+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="5" data-offset-top="20"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 20% auto;" data-expected-height="60">
+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="25" data-offset-top="0">X</div>
+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="60" data-offset-top="0">X</div>
+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="25" data-offset-top="35">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 10% auto; grid-template-columns: repeat(3, 50px);" data-expected-height="110">
+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="45"></div>
+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="100">X X X X</div>
+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="45"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 10% auto; grid-template-columns: repeat(3, 50px);" data-expected-height="110">
+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="45">X</div>
+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="100">X X X X</div>
+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="45">X</div>
+</div>
+
+</body>