[css-grid] Handle min-content/max-content with orthogonal flows
authorjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 21 Jul 2016 11:36:08 +0000 (11:36 +0000)
committerjfernandez@igalia.com <jfernandez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 21 Jul 2016 11:36:08 +0000 (11:36 +0000)
https://bugs.webkit.org/show_bug.cgi?id=159294

Reviewed by Darin Adler.

New layout tests to evaluate basic positioning and sizing using orthogonal flows.

* fast/css-grid-layout/grid-item-positioning-with-orthogonal-flows-expected.txt: Added.
* fast/css-grid-layout/grid-item-positioning-with-orthogonal-flows.html: Added.
* fast/css-grid-layout/grid-item-sizing-with-orthogonal-flows-expected.txt: Added.
* fast/css-grid-layout/grid-item-sizing-with-orthogonal-flows.html: Added.
* fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows-expected.txt: Added.
* fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows.html: Added.
* fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows-expected.txt: Added.
* fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html: Added.
* fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows-expected.txt: Added.
* fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@203501 268f45cc-cd09-0410-ab3c-d52691b4dbfc

13 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-item-positioning-with-orthogonal-flows-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-positioning-with-orthogonal-flows.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-sizing-with-orthogonal-flows-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-sizing-with-orthogonal-flows.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-with-zero-content-size-should-not-crash-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-with-zero-content-size-should-not-crash.html [new file with mode: 0644]

index fa624e3..543e236 100644 (file)
@@ -1,3 +1,23 @@
+2016-07-21  Javier Fernandez  <jfernandez@igalia.com>
+
+        [css-grid] Handle min-content/max-content with orthogonal flows
+        https://bugs.webkit.org/show_bug.cgi?id=159294
+
+        Reviewed by Darin Adler.
+
+        New layout tests to evaluate basic positioning and sizing using orthogonal flows.
+
+        * fast/css-grid-layout/grid-item-positioning-with-orthogonal-flows-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-positioning-with-orthogonal-flows.html: Added.
+        * fast/css-grid-layout/grid-item-sizing-with-orthogonal-flows-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-sizing-with-orthogonal-flows.html: Added.
+        * fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows-expected.txt: Added.
+        * fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows.html: Added.
+        * fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows-expected.txt: Added.
+        * fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html: Added.
+        * fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows-expected.txt: Added.
+        * fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html: Added.
+
 2016-07-20  Youenn Fablet  <youenn@apple.com>
 
         [XHR] Cache response JS object in case of arraybuffer and blob response types
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-positioning-with-orthogonal-flows-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-positioning-with-orthogonal-flows-expected.txt
new file mode 100644 (file)
index 0000000..dcf8617
--- /dev/null
@@ -0,0 +1,30 @@
+This test checks that grid items positioning works as expected with orthogonal flows.
+
+HORIZONTAL-TB container with VERTICAL-LR items.
+
+X X X X X X
+X X X X X X
+X X X X X X
+X X X X X X
+PASS
+HORIZONTAL-TB container with VERTICAL-RL items.
+
+X X X X X X
+X X X X X X
+X X X X X X
+X X X X X X
+PASS
+VERTICAL-LR container with HORIZONTAL-TB items.
+
+X X X X X X
+X X X X X X
+X X X X X X
+X X X X X X
+PASS
+VERTICAL-RL container with HORIZONTAL-TB items.
+
+X X X X X X
+X X X X X X
+X X X X X X
+X X X X X X
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-positioning-with-orthogonal-flows.html b/LayoutTests/fast/css-grid-layout/grid-item-positioning-with-orthogonal-flows.html
new file mode 100644 (file)
index 0000000..4963cd3
--- /dev/null
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body {
+    margin: 0;
+}
+
+.container {
+    position: relative;
+}
+
+.grid {
+    font: 10px/1 Ahem;
+    width: 300px;
+    height: 160px;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+<p>This test checks that grid items positioning works as expected with orthogonal flows.</p>
+
+<p>HORIZONTAL-TB container with VERTICAL-LR items.</p>
+<div class="container">
+    <div class="grid itemsStart contentStart fixedWidth" data-expected-width="300" data-expected-height="160">
+        <div class="firstRowFirstColumn   verticalLR" data-offset-x="0"  data-offset-y="0"  data-expected-width="20" data-expected-height="80">X X X X X X</div>
+        <div class="firstRowSecondColumn  verticalLR" data-offset-x="20" data-offset-y="0"  data-expected-width="20" data-expected-height="80">X X X X X X</div>
+        <div class="secondRowFirstColumn  verticalLR" data-offset-x="0"  data-offset-y="80" data-expected-width="20" data-expected-height="80">X X X X X X</div>
+        <div class="secondRowSecondColumn verticalLR" data-offset-x="20" data-offset-y="80" data-expected-width="20" data-expected-height="80">X X X X X X</div>
+    </div>
+</div>
+
+<p>HORIZONTAL-TB container with VERTICAL-RL items.</p>
+<div class="container">
+    <div class="grid itemsStart contentStart" data-expected-width="300" data-expected-height="160">
+        <div class="firstRowFirstColumn   verticalRL" data-offset-x="0"  data-offset-y="0"  data-expected-width="20" data-expected-height="80">X X X X X X</div>
+        <div class="firstRowSecondColumn  verticalRL" data-offset-x="20" data-offset-y="0"  data-expected-width="20" data-expected-height="80">X X X X X X</div>
+        <div class="secondRowFirstColumn  verticalRL" data-offset-x="0"  data-offset-y="80" data-expected-width="20" data-expected-height="80">X X X X X X</div>
+        <div class="secondRowSecondColumn verticalRL" data-offset-x="20" data-offset-y="80" data-expected-width="20" data-expected-height="80">X X X X X X</div>
+    </div>
+</div>
+
+<p>VERTICAL-LR container with HORIZONTAL-TB items.</p>
+<div class="container">
+    <div class="grid itemsStart contentStart fixedHeight verticalLR" data-expected-width="300" data-expected-height="160">
+        <div class="firstRowFirstColumn   horizontalTB" data-offset-x="0"   data-offset-y="0"  data-expected-width="110" data-expected-height="10">X X X X X X</div>
+        <div class="firstRowSecondColumn  horizontalTB" data-offset-x="0" data-offset-y="10" data-expected-width="110" data-expected-height="10">X X X X X X</div>
+        <div class="secondRowFirstColumn  horizontalTB" data-offset-x="110"   data-offset-y="0"  data-expected-width="110" data-expected-height="10">X X X X X X</div>
+        <div class="secondRowSecondColumn horizontalTB" data-offset-x="110" data-offset-y="10" data-expected-width="110" data-expected-height="10">X X X X X X</div>
+    </div>
+</div>
+
+<p>VERTICAL-RL container with HORIZONTAL-TB items.</p>
+<div class="container">
+    <div class="grid itemsStart contentStart fixedHeight verticalRL" data-expected-width="300" data-expected-height="160">
+        <div class="firstRowFirstColumn   horizontalTB" data-offset-x="190" data-offset-y="0"  data-expected-width="110" data-expected-height="10">X X X X X X</div>
+        <div class="firstRowSecondColumn  horizontalTB" data-offset-x="190"   data-offset-y="10" data-expected-width="110" data-expected-height="10">X X X X X X</div>
+        <div class="secondRowFirstColumn  horizontalTB" data-offset-x="80" data-offset-y="0"  data-expected-width="110" data-expected-height="10">X X X X X X</div>
+        <div class="secondRowSecondColumn horizontalTB" data-offset-x="80"   data-offset-y="10" data-expected-width="110" data-expected-height="10">X X X X X X</div>
+    </div>
+</div>
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-sizing-with-orthogonal-flows-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-sizing-with-orthogonal-flows-expected.txt
new file mode 100644 (file)
index 0000000..ec761a4
--- /dev/null
@@ -0,0 +1,18 @@
+This test checks that grid items sizing works as regular block sizing with orthogonal flows.
+
+HORIZONTAL-TB container with VERTICAL-LR items.
+
+X X X X X X
+PASS
+HORIZONTAL-TB container with VERTICAL-RL items.
+
+X X X X X X
+PASS
+VERTICAL-LR container with HORIZONTAL-TB items.
+
+X X X X X X
+PASS
+VERTICAL-RL container with HORIZONTAL-TB items.
+
+X X X X X X
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-sizing-with-orthogonal-flows.html b/LayoutTests/fast/css-grid-layout/grid-item-sizing-with-orthogonal-flows.html
new file mode 100644 (file)
index 0000000..594a48f
--- /dev/null
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body {
+    margin: 0;
+}
+.grid {
+    font: 10px/1 Ahem;
+    width: 300px;
+    height: 80px;
+    position: relative;
+    grid-template-columns: minmax(-webkit-min-content, -webkit-max-content);
+    grid-template-rows: minmax(-webkit-min-content, -webkit-max-content);
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+<p>This test checks that grid items sizing works as regular block sizing with orthogonal flows.</p>
+
+<div>
+    <p>HORIZONTAL-TB container with VERTICAL-LR items.</p>
+    <div class="grid">
+        <div class="verticalLR firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="80">X X X X X X</div>
+    </div>
+</div>
+
+<div>
+    <p>HORIZONTAL-TB container with VERTICAL-RL items.</p>
+    <div class="grid itemsStart">
+        <div class="verticalRL firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="80">X X X X X X</div>
+    </div>
+</div>
+
+<div>
+    <p>VERTICAL-LR container with HORIZONTAL-TB items.</p>
+    <div class="grid itemsStart verticalLR">
+        <div class="firstRowFirstColumn horizontalTB" data-offset-x="0" data-offset-y="0" data-expected-width="110" data-expected-height="10">X X X X X X</div>
+    </div>
+</div>
+
+<div>
+    <p>VERTICAL-RL container with HORIZONTAL-TB items.</p>
+    <div class="grid itemsStart verticalRL">
+        <div class="firstRowFirstColumn horizontalTB" data-offset-x="190" data-offset-y="0" data-expected-width="110" data-expected-height="10">X X X X X X</div>
+    </div>
+</div>
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows-expected.txt b/LayoutTests/fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows-expected.txt
new file mode 100644 (file)
index 0000000..1d2900b
--- /dev/null
@@ -0,0 +1,37 @@
+This test checks that grid sizing works as expected with orthogonal flows and items spanning more than 1 columns or rows. These cases require an extra track-sizing algorithm cycle on the rows to determine final dimensions of the grid.
+
+Grid: auto | align: start | fixed-sized: 300 x 200 | font: 10px | Blue(LR) - row: 1 col: 1 | Magenta - row: 1 col: 3 | Orange(LR) - row: 2 col: 2
+
+XX XXX X XXX XX
+XXXX XX X XX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX X XXX XX XX
+XXX X XXX XXX XXX XX X XXXXX XXX XX X XXXXX XX X XX XX X XXX XXX XXX XX X XXXX XXX XXX XXX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX XXX XXX XX X XXX XX X XXX XX XX
+PASS
+Grid: auto | align: start | fixed-sized: 300 x 200 | font: 10px | Blue(LR) - row: 1 / 3 col: 1 | Magenta - row: 1 col: 3 | Orange(LR) - row: 2 col: 2 / 4
+
+XX XXX X XXX XX
+XXXX XX X XX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX X XXX XX XX
+XXX X XXX XXX XXX XX X XXXXX XXX XX X XXXXX XX X XX XX X XXX XXX XXX XX X XXXX XXX XXX XXX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX XXX XXX XX X XXX XX X XXX XX XX
+PASS
+Grid: auto | align: start | fixed-sized: 300 x 200 | font: 10px | Blue(LR) - row: 1 / 3 col: 1 | Magenta - row: 1 / 3 col: 3 | Orange(LR) - row: 3 col: 2 / 3
+
+XX XXX X XXX XX
+XXXX XX X XX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX X XXX XX XX
+XXX X XXX XXX XXX XX X XXXXX XXX XX X XXXXX XX X XX XX X XXX XXX XXX XX X XXXX XXX XXX XXX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX XXX XXX XX X XXX XX X XXX XX XX
+PASS
+Grid: auto | align: start | fixed-sized: 300 x 200 | font: 10px | Blue(LR) - row: 1 / 3 col: 1 | Magenta - row: 1 col: 3 | Orange(LR) - row: 2 col: 2 / 3
+
+XX XXX X XXX XX
+XXXX XX X XX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX X XXX XX XX
+XXX X XXX XXX XXX XX X XXXXX XXX XX X XXXXX XX X XX XX X XXX XXX XXX XX X XXXX XXX XXX XXX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX XXX XXX XX X XXX XX X XXX XX XX
+PASS
+Grid: auto | align: start | fixed-sized: 300 x 200 | font: 10px | Blue(LR) - row: 1 / 3 col: 1 | Magenta - row: 1 col: 3 | Orange(LR) - row: 2 / 4 col: 2 / 3
+
+XX XXX X XXX XX
+XXXX XX X XX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX X XXX XX XX
+XXX X XXX XXX XXX XX X XXXXX XXX XX X XXXXX XX X XX XX X XXX XXX XXX XX X XXXX XXX XXX XXX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX XXX XXX XX X XXX XX X XXX XX XX
+PASS
+Grid: min-content / min-content min-content | align: stretch | content-sized: fit-content x auto | font: 50px | Blue(LR) - row: 1 / 3 col: 1 - XX X X | Magenta - row: 1 col: 1 - X X
+
+XX X X
+X X
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows.html b/LayoutTests/fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows.html
new file mode 100644 (file)
index 0000000..d4dc95d
--- /dev/null
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet>
+<style>
+body {
+    margin: 0;
+}
+
+.container {
+    position: relative;
+}
+
+.grid {
+    font: 10px/1 Ahem;
+    position: relative;
+}
+
+.oneMinContentColTwoMinContentRows {
+    font: 50px/1 Ahem;
+    grid: -webkit-min-content -webkit-min-content / -webkit-min-content;
+}
+
+.fixedSize {
+    width: 300px;
+    height: 200px;
+}
+
+.grid > :nth-child(1) { background-color: blue; }
+.grid > :nth-child(2) { background-color: magenta; }
+.grid > :nth-child(3) { background-color: orange; }
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+<p>This test checks that grid sizing works as expected with orthogonal flows and items spanning more than 1 columns or rows. These cases require an extra track-sizing algorithm cycle on the rows to determine final dimensions of the grid.</p>
+
+<div class="container">
+    <p>Grid: <b>auto</b> | align: <b>start</b> | fixed-sized: <b>300 x 200</b> | font: <b>10px</b> | Blue(LR) - row: 1 col: 1 | Magenta - row: 1 col: 3 | Orange(LR) - row: 2 col: 2</p>
+    <div class="grid fixedSize itemsStart">
+        <div class="verticalLR" style="grid-row: 1; grid-column: 1"          data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="105">XX XXX X XXX XX</div>
+        <div class=""           style="grid-row: 1; grid-column: 3"          data-offset-x="180" data-offset-y="0"   data-expected-width="120" data-expected-height="60">XXXX XX X XX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX X XXX XX XX</div>
+        <div class="verticalLR" style="grid-row: 2; grid-column: 2"          data-offset-x="20"  data-offset-y="105"  data-expected-width="200" data-expected-height="95">XXX X XXX XXX XXX XX X XXXXX XXX XX X XXXXX XX X XX XX X XXX XXX XXX XX X XXXX XXX XXX XXX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX  XXX XXX XX X XXX XX X XXX XX XX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid: <b>auto</b> | align: <b>start</b> | fixed-sized: <b>300 x 200</b> | font: <b>10px</b> | Blue(LR) - <b>row: 1 / 3</b> col: 1 | Magenta - row: 1 col: 3 | Orange(LR) - row: 2 <b>col: 2 / 4</b></p>
+    <div class="grid fixedSize itemsStart">
+        <div class="verticalLR" style="grid-row: 1 / 3; grid-column: 1"      data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="150">XX XXX X XXX XX</div>
+        <div class=""           style="grid-row: 1;     grid-column: 3"      data-offset-x="35"  data-offset-y="0"   data-expected-width="265" data-expected-height="30">XXXX XX X XX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX X XXX XX XX</div>
+        <div class="verticalLR" style="grid-row: 2;     grid-column: 2 / 4;" data-offset-x="10"  data-offset-y="30"  data-expected-width="100" data-expected-height="170">XXX X XXX XXX XXX XX X XXXXX XXX XX X XXXXX XX X XX XX X XXX XXX XXX XX X XXXX XXX XXX XXX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX  XXX XXX XX X XXX XX X XXX XX XX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid: <b>auto</b> | align: <b>start</b> | fixed-sized: <b>300 x 200</b> | font: <b>10px</b> | Blue(LR) - <b>row: 1 / 3</b> col: 1 | Magenta - <b>row: 1 / 3</b> col: 3 | Orange(LR) - <b>row: 3 col: 2 / 3</b></p>
+    <div class="grid fixedSize itemsStart" data-expected-width="300" data-expected-height="200">
+        <div class="verticalLR" style="grid-row: 1 / 3; grid-column: 1"      data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="130">XX XXX X XXX XX</div>
+        <div class=""           style="grid-row: 1 / 3; grid-column: 3"      data-offset-x="220" data-offset-y="0"   data-expected-width="80"  data-expected-height="90">XXXX XX X XX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX X XXX XX XX</div>
+        <div class="verticalLR" style="grid-row: 3;     grid-column: 2 / 3;" data-offset-x="20"  data-offset-y="130" data-expected-width="250" data-expected-height="70">XXX X XXX XXX XXX XX X XXXXX XXX XX X XXXXX XX X XX XX X XXX XXX XXX XX X XXXX XXX XXX XXX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX  XXX XXX XX X XXX XX X XXX XX XX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid: <b>auto</b> | align: <b>start</b> | fixed-sized: <b>300 x 200</b> | font: <b>10px</b> | Blue(LR) - <b>row: 1 / 3</b> col: 1 | Magenta - row: 1 col: 3 | Orange(LR) - row: 2 <b>col: 2 / 3</b></p>
+    <div class="grid fixedSize itemsStart">
+        <div class="verticalLR" style="grid-row: 1 / 3; grid-column: 1"      data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="150">XX XXX X XXX XX</div>
+        <div class=""           style="grid-row: 1;     grid-column: 3"      data-offset-x="110" data-offset-y="0"   data-expected-width="190" data-expected-height="40">XXXX XX X XX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX X XXX XX XX</div>
+        <div class="verticalLR" style="grid-row: 2;     grid-column: 2 / 3;" data-offset-x="10"  data-offset-y="40"  data-expected-width="110" data-expected-height="160">XXX X XXX XXX XXX XX X XXXXX XXX XX X XXXXX XX X XX XX X XXX XXX XXX XX X XXXX XXX XXX XXX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX  XXX XXX XX X XXX XX X XXX XX XX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid: <b>auto</b> | align: <b>start</b> | fixed-sized: <b>300 x 200</b> | font: <b>10px</b> | Blue(LR) - <b>row: 1 / 3</b> col: 1 | Magenta - row: 1 col: 3 | Orange(LR) - <b>row: 2 / 4 col: 2 / 3</b></p>
+    <div class="grid fixedSize itemsStart">
+        <div class="verticalLR" style="grid-row: 1 / 3; grid-column: 1"      data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="115">XX XXX X XXX XX</div>
+        <div class=""           style="grid-row: 1;     grid-column: 2"      data-offset-x="20"  data-offset-y="0"   data-expected-width="280" data-expected-height="30">XXXX XX X XX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX X XXX XX XX</div>
+        <div class="verticalLR" style="grid-row: 2 / 4; grid-column: 2 / 3;" data-offset-x="20"  data-offset-y="30"  data-expected-width="100" data-expected-height="170">XXX X XXX XXX XXX XX X XXXXX XXX XX X XXXXX XX X XX XX X XXX XXX XXX XX X XXXX XXX XXX XXX XX X XXX XX XXXXX XXX XXX XX X XXX XX XXX  XXX XXX XX X XXX XX X XXX XX XX</div>
+    </div>
+</div>
+
+<p>Grid: <b>min-content</b> / <b>min-content min-content</b> | align: <b>stretch</b> | content-sized: <b>fit-content x auto</b> | font: <b>50px</b> | Blue(LR) - <b>row: 1 / 3</b> col: 1 - <b>XX X X</b> | Magenta - row: 1 col: 1 - <b>X X</b></p>
+<div class="grid itemsStart oneMinContentColTwoMinContentRows fit-content" data-expected-width="50" data-expected-height="100">
+    <div class="verticalLR"     style="grid-row: 1 / 3; grid-column: 1" data-expected-width="150"  data-expected-height="100">XX X X</div>
+    <div class=""               style="grid-row: 1;     grid-column: 1" data-expected-width="150"  data-expected-height="50">X X</div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows-expected.txt b/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows-expected.txt
new file mode 100644 (file)
index 0000000..2a91dba
--- /dev/null
@@ -0,0 +1,138 @@
+This test checks that grid tracks are sizing correctly with orthogonal flows, so grid container's intrinsic size is computed accordingly.
+
+Grid using fixed width and height.
+All grid items sized with min-{width, height} auto.
+Enough available space in the inline axis, so parallel tracks grow until their limits; orthogonal tracks, however, are limited to the bloc-axis available space, which will determine their column tracks size.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid width under min-content constrain and fixed height.
+All grid items sized with min-{width, height} auto.
+Orthogonal green row track assumed as infinity, hence 10px for the column track. Actual row tracks size is different, hence overflowing.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid width under max-content constrain and fixed height.
+All grid items sized with min-{width, height} auto.
+Parallel blue column track sized as its max of 150x, while Orthogonal green row, assumed as infinity, sized as 10px. Since actual row tracks size is different, green column track will occupy some space initally assigned to the blue one.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid width under fit-content constrain and fixed height.
+All grid items sized with min-{width, height} auto.
+Since we use assumed row tracks sizes, minimum and maximum will be the same, hence fit-content will produce the same result than max-content.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid with fixed width and height under min-content constrain.
+All grid items sized with min-{width, height} auto.
+Since there is enough space in the inline-axis, the orthogonal green row sets the min-content size, which is 50px because of the 5 chars line.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid with fixed width and height under min-content constrain.
+All grid items sized with min-{width, height} auto.
+Both paralell and orthogonal tracks reach their maximum sizes.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid with fixed width and height under min-content constrain.
+All grid items sized with min-{width, height} auto.
+Same result as sizing under max-content constrain.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid using fixed width and height.
+All grid items sized with min-width: 0px, min-height: auto.
+Since grid container has definite size in both axis, all grid tracks grow until reach their maximum breadth, hence min-width has no effect.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid width under min-content constrain and fixed height.
+All grid items sized with min-width: 0px, min-height: auto.
+Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid width under max-content constrain and fixed height.
+All grid items sized with min-width: 0px, min-height: auto.
+Since container is sized under max-content, tracks will use its maximum size.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid with fixed width and height under min-content constrain.
+All grid items sized with min-width: auto, min-height: 0px.
+Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid with fixed width and height under max-content constrain.
+All grid items sized with min-width: auto, min-height: 0px.
+Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid using fixed width and height.
+All grid items sized with min-width: 50px, min-height: auto.
+Since grid container has definite size in both axis, all grid tracks grow until reach their maximum breadth, hence min-width has no effect.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid width under min-content constrain and fixed height.
+All grid items sized with min-width: 50px, min-height: auto.
+Column tracks size is set by min-width, while rows grow until exhaust the available height.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid width under max-content constrain and fixed height.
+All grid items sized with min-width: 50px, min-height: auto.
+.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid with fixed width and height under min-content constrain.
+All grid items sized with min-width: auto, min-height: 50px.
+Parallel blue row track must grow to fulfill min-height restriction, while orthogonal shrink to satisfy container's min-content constrain.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
+Grid with fixed width and height under max-content constrain.
+All grid items sized with min-width: auto, min-height: 50px.
+Orthogonal rows can grow now to reach their maximum, exceeding min-height as well, while parallel row tracks are still sized according to min-height.
+
+XX XXX X XXX XX
+X XXX XX XXXXX XX XXX X XXXX X XX
+XXXX XX X XX XXX
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html b/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html
new file mode 100644 (file)
index 0000000..90c6da1
--- /dev/null
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
+<style>
+body {
+    margin: 0;
+}
+
+.container {
+    position: relative;
+}
+
+.grid {
+    position: relative;
+    font: 10px/1 Ahem;
+}
+
+.width300 { width: 300px; }
+.height200 { height: 200px; }
+
+.minWidthZero { min-width: 0; }
+.minWidthFixed { min-width: 50px;}
+.minHeightZero { min-height: 0; }
+.minHeightFixed { min-height: 50px;}
+
+.firstAndSecondRowSecondColumn {
+    background-color: lime;
+    grid-column: 2;
+    grid-row: 1 / 3;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+<p>This test checks that grid tracks are sizing correctly with orthogonal flows, so grid container's intrinsic size is computed accordingly.</p>
+
+<div class="container">
+    <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with <b>min-{width, height} auto</b>.<br> Enough available space in the inline axis, so parallel tracks grow until their limits; orthogonal tracks, however, are limited to the bloc-axis available space, which will determine their column tracks size.</p>
+    <div class="grid itemsStart contentStart width300 height200" data-expected-width="300" data-expected-height="200">
+        <div class="firstRowFirstColumn"             data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
+        <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0"   data-expected-width="40"  data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="verticalLR secondRowFirstColumn" data-offset-x="0"   data-offset-y="105" data-expected-width="20"  data-expected-height="95">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-{width, height} auto</b>.<br> Orthogonal green row track assumed as infinity, hence 10px for the column track. Actual row tracks size is different, hence overflowing. </p>
+    <div class="grid itemsStart contentStart min-content height200" data-expected-width="30" data-expected-height="200">
+        <div class="firstRowFirstColumn"             data-offset-x="0"  data-offset-y="0"   data-expected-width="30" data-expected-height="50">XX XXX X XXX XX</div>
+        <div class="verticalLR firstRowSecondColumn" data-offset-x="30" data-offset-y="0"   data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="verticalLR secondRowFirstColumn" data-offset-x="0"  data-offset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-{width, height} auto</b>.<br> Parallel blue column track sized as its max of 150x, while Orthogonal green row, assumed as infinity, sized as 10px. Since actual row tracks size is different, green column track will occupy some space initally assigned to the blue one.</p>
+    <div class="grid itemsStart contentStart max-content height200" data-expected-width="150" data-expected-height="200">
+        <div class="firstRowFirstColumn"             data-offset-x="0"   data-offset-y="0"   data-expected-width="110" data-expected-height="20">XX XXX X XXX XX</div>
+        <div class="verticalLR firstRowSecondColumn" data-offset-x="110" data-offset-y="0"   data-expected-width="40"  data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="verticalLR secondRowFirstColumn" data-offset-x="0"   data-offset-y="105" data-expected-width="20"  data-expected-height="95">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid width under <b>fit-content</b> constrain and <b>fixed</b> height.<br >All grid items sized with <b>min-{width, height} auto</b>.<br> Since we use assumed row tracks sizes, minimum and maximum will be the same, hence fit-content will produce the same result than max-content.</p>
+    <div class="grid itemsStart contentStart fit-content height200" data-expected-width="150" data-expected-height="200">
+        <div class="firstRowFirstColumn"             data-offset-x="0"   data-offset-y="0"   data-expected-width="110" data-expected-height="20">XX XXX X XXX XX</div>
+        <div class="verticalLR firstRowSecondColumn" data-offset-x="110" data-offset-y="0"   data-expected-width="40"  data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="verticalLR secondRowFirstColumn" data-offset-x="0"   data-offset-y="105" data-expected-width="20"  data-expected-height="95">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br >All grid items sized with <b>min-{width, height} auto</b>.<br> Since there is enough space in the inline-axis, the orthogonal green row sets the min-content size, which is 50px because of the 5 chars line.</p>
+    <div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="90">
+        <div class="firstRowFirstColumn"             data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
+        <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0"   data-expected-width="70"  data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="verticalLR secondRowFirstColumn" data-offset-x="0"   data-offset-y="50"  data-expected-width="40"  data-expected-height="40">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-{width, height} auto</b>.<br> Both paralell and orthogonal tracks reach their maximum sizes.</p>
+    <div class="grid itemsStart contentStart max-content width300" data-expected-width="300" data-expected-height="490">
+        <div class="firstRowFirstColumn"             data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
+        <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="verticalLR secondRowFirstColumn" data-offset-x="0"   data-offset-y="330" data-expected-width="10"  data-expected-height="160">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-{width, height} auto</b>.<br> Same result as sizing under max-content constrain.</p>
+    <div class="grid itemsStart contentStart fit-content width300" data-expected-width="300" data-expected-height="490">
+        <div class="firstRowFirstColumn"             data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
+        <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="verticalLR secondRowFirstColumn" data-offset-x="0"   data-offset-y="330" data-expected-width="10"  data-expected-height="160">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<!-- Playing with min-{width,height} constrains. -->
+
+<div class="container">
+    <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with <b>min-width: 0px, min-height: auto</b>.<br> Since grid container has definite size in both axis, all grid tracks grow until reach their maximum breadth, hence min-width has no effect.</p>
+    <div class="grid itemsStart contentStart width300 height200" data-expected-width="300" data-expected-height="200">
+        <div class="minWidthZero firstRowFirstColumn"               data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
+        <div class="minWidthZero verticalLR firstRowSecondColumn"   data-offset-x="150" data-offset-y="0"   data-expected-width="40"  data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="minWidthZero verticalLR secondRowFirstColumn"   data-offset-x="0"   data-offset-y="105" data-expected-width="20"  data-expected-height="95">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-width: 0px, min-height: auto</b>.<br> Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.</p>
+    <div class="grid itemsStart contentStart min-content height200" data-expected-width="0" data-expected-height="200">
+        <div class="minWidthZero firstRowFirstColumn"               data-offset-x="0"   data-offset-y="0"   data-expected-width="30"  data-expected-height="50">XX XXX X XXX XX</div>
+        <div class="minWidthZero verticalLR firstRowSecondColumn"   data-offset-x="0"   data-offset-y="0"   data-expected-width="40"  data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="minWidthZero verticalLR secondRowFirstColumn"   data-offset-x="0"   data-offset-y="105" data-expected-width="20"  data-expected-height="95">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-width: 0px, min-height: auto</b>.<br> Since container is sized under max-content, tracks will use its maximum size.</p>
+    <div class="grid itemsStart contentStart max-content height200" data-expected-width="160" data-expected-height="200">
+        <div class="minWidthZero firstRowFirstColumn"               data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="20">XX XXX X XXX XX</div>
+        <div class="minWidthZero verticalLR firstRowSecondColumn"   data-offset-x="120" data-offset-y="0"   data-expected-width="40"  data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="minWidthZero verticalLR secondRowFirstColumn"   data-offset-x="0"   data-offset-y="105" data-expected-width="20"  data-expected-height="95">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.<br> Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.</p>
+    <div class="grid itemsStart contentStart min-content width300 " data-expected-width="300" data-expected-height="0">
+        <div class="minHeightZero firstRowFirstColumn"              data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
+        <div class="minHeightZero verticalLR firstRowSecondColumn"  data-offset-x="150" data-offset-y="0"   data-expected-width="70"  data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="minHeightZero verticalLR secondRowFirstColumn"  data-offset-x="0"   data-offset-y="0"   data-expected-width="40"  data-expected-height="40">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid with <b>fixed</b> width and height under <b>max-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.<br> Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.</p>
+    <div class="grid itemsStart contentStart max-content width300" data-expected-width="300" data-expected-height="490">
+        <div class="minHeightZero firstRowFirstColumn"              data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
+        <div class="minHeightZero verticalLR firstRowSecondColumn"  data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="minHeightZero verticalLR secondRowFirstColumn"  data-offset-x="0"   data-offset-y="330" data-expected-width="10"  data-expected-height="160">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with <b>min-width: 50px, min-height: auto</b>.<br> Since grid container has definite size in both axis, all grid tracks grow until reach their maximum breadth, hence min-width has no effect.</p>
+    <div class="grid itemsStart contentStart width300 height200" data-expected-width="300" data-expected-height="200">
+        <div class="minWidthFixed firstRowFirstColumn"              data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
+        <div class="minWidthFixed verticalLR firstRowSecondColumn"  data-offset-x="150" data-offset-y="0"   data-expected-width="50"  data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="minWidthFixed verticalLR secondRowFirstColumn"  data-offset-x="0"   data-offset-y="105" data-expected-width="50"  data-expected-height="95">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-width: 50px, min-height: auto</b>.<br> Column tracks size is set by min-width, while rows grow until exhaust the available height.</p>
+    <div class="grid itemsStart contentStart min-content height200" data-expected-width="100" data-expected-height="200">
+        <div class="minWidthFixed firstRowFirstColumn"              data-offset-x="0"   data-offset-y="0"   data-expected-width="50"  data-expected-height="40">XX XXX X XXX XX</div>
+        <div class="minWidthFixed verticalLR firstRowSecondColumn"  data-offset-x="50"  data-offset-y="0"   data-expected-width="50"  data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="minWidthFixed verticalLR secondRowFirstColumn"  data-offset-x="0"   data-offset-y="105" data-expected-width="50"  data-expected-height="95">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid width under <b>max-content</b> constrain and fixed height.<br> All grid items sized with <b>min-width: 50px, min-height: auto</b>.<br> .</p>
+    <div class="grid itemsStart contentStart max-content height200" data-expected-width="200" data-expected-height="200">
+        <div class="minWidthFixed firstRowFirstColumn"              data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
+        <div class="minWidthFixed verticalLR firstRowSecondColumn"  data-offset-x="150" data-offset-y="0"   data-expected-width="50"  data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="minWidthFixed verticalLR secondRowFirstColumn"  data-offset-x="0"   data-offset-y="105" data-expected-width="50"  data-expected-height="95">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.<br> Parallel blue row track must grow to fulfill min-height restriction, while orthogonal shrink to satisfy container's min-content constrain.</p>
+    <div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="100">
+        <div class="minHeightFixed firstRowFirstColumn"             data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="50">XX XXX X XXX XX</div>
+        <div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0"   data-expected-width="70"  data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset-x="0"   data-offset-y="50"  data-expected-width="40"  data-expected-height="50">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Grid with <b>fixed</b> width and height under <b>max-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.<br> Orthogonal rows can grow now to reach their maximum, exceeding min-height as well, while parallel row tracks are still sized according to min-height.</p>
+    <div class="grid itemsStart contentStart max-content width300" data-expected-width="300" data-expected-height="490">
+        <div class="minHeightFixed firstRowFirstColumn"             data-offset-x="0"   data-offset-y="0"   data-expected-width="150" data-expected-height="50">XX XXX X XXX XX</div>
+        <div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+        <div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset-x="0"   data-offset-y="330" data-expected-width="10"  data-expected-height="160">XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows-expected.txt b/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows-expected.txt
new file mode 100644 (file)
index 0000000..42697b1
--- /dev/null
@@ -0,0 +1,30 @@
+This test checks that grid tracks are correctly sized when using percentage lengths and orthogonal flows.
+
+HORIZONTAL-TB container with VERTICAL-LR items.
+
+X X X
+X X X X X X
+X X X X X X
+X X X X X X X X X X X X
+PASS
+HORIZONTAL-TB container with VERTICAL-RL items.
+
+X X X
+X X X X X X
+X X X X X X
+X X X X X X X X X X X X
+PASS
+VERTICAL-LR container with HORIZONTAL-TB items.
+
+X X X
+X X X X X X
+X X X X X X
+X X X X X X X X X X X X
+PASS
+VERTICAL-RL container with HORIZONTAL-TB items.
+
+X X X
+X X X X X X
+X X X X X X
+X X X X X X X X X X X X
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html b/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html
new file mode 100644 (file)
index 0000000..ebd0f4e
--- /dev/null
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet">
+<style>
+body {
+    margin: 0;
+}
+
+.container {
+    position: relative;
+}
+
+.grid {
+    font: 10px/1 Ahem;
+    grid-template-columns: 100px 25%;
+    grid-template-rows: 50% 150px;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+<p>This test checks that grid tracks are correctly sized when using percentage lengths and orthogonal flows.</p>
+
+<p>HORIZONTAL-TB container with VERTICAL-LR items.</p>
+<div class="container">
+    <div class="grid itemsStart contentStart fit-content" data-expected-width="100" data-expected-height="260">
+        <div class="firstRowFirstColumn   verticalLR" data-offset-x="0"  data-offset-y="0"  data-expected-width="10" data-expected-height="50">X X X</div>
+        <div class="firstRowSecondColumn  verticalLR" data-offset-x="100" data-offset-y="0"  data-expected-width="10" data-expected-height="110">X X X X X X</div>
+        <div class="secondRowFirstColumn  verticalLR" data-offset-x="0"  data-offset-y="110" data-expected-width="10" data-expected-height="110">X X X X X X</div>
+        <div class="secondRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="110" data-expected-width="20" data-expected-height="150">X X X X X X X X X X X X</div>
+    </div>
+</div>
+
+<p>HORIZONTAL-TB container with VERTICAL-RL items.</p>
+<div class="container">
+    <div class="grid itemsStart contentStart fit-content" data-expected-width="100" data-expected-height="260">
+        <div class="firstRowFirstColumn   verticalRL" data-offset-x="0"  data-offset-y="0"  data-expected-width="10" data-expected-height="50">X X X</div>
+        <div class="firstRowSecondColumn  verticalRL" data-offset-x="100" data-offset-y="0"  data-expected-width="10" data-expected-height="110">X X X X X X</div>
+        <div class="secondRowFirstColumn  verticalRL" data-offset-x="0"  data-offset-y="110" data-expected-width="10" data-expected-height="110">X X X X X X</div>
+        <div class="secondRowSecondColumn verticalRL" data-offset-x="100" data-offset-y="110" data-expected-width="20" data-expected-height="150">X X X X X X X X X X X X</div>
+    </div>
+</div>
+
+<p>VERTICAL-LR container with HORIZONTAL-TB items.</p>
+<div class="container">
+    <div class="grid itemsStart contentStart verticalLR fit-content" data-expected-width="260" data-expected-height="120">
+        <div class="firstRowFirstColumn   horizontalTB" data-offset-x="0"   data-offset-y="0"  data-expected-width="50" data-expected-height="10">X X X</div>
+        <div class="firstRowSecondColumn  horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="110" data-expected-height="10">X X X X X X</div>
+        <div class="secondRowFirstColumn  horizontalTB" data-offset-x="110"   data-offset-y="0"  data-expected-width="110" data-expected-height="10">X X X X X X</div>
+        <div class="secondRowSecondColumn horizontalTB" data-offset-x="110" data-offset-y="100" data-expected-width="150" data-expected-height="20">X X X X X X X X X X X X</div>
+    </div>
+</div>
+
+<p>VERTICAL-RL container with HORIZONTAL-TB items.</p>
+<div class="container">
+    <div class="grid itemsStart contentStart verticalRL fit-content" data-expected-width="260" data-expected-height="100">
+        <div class="firstRowFirstColumn   horizontalTB" data-offset-x="210"   data-offset-y="0"  data-expected-width="50" data-expected-height="10">X X X</div>
+        <div class="firstRowSecondColumn  horizontalTB" data-offset-x="150" data-offset-y="100" data-expected-width="110" data-expected-height="10">X X X X X X</div>
+        <div class="secondRowFirstColumn  horizontalTB" data-offset-x="40"   data-offset-y="0"  data-expected-width="110" data-expected-height="10">X X X X X X</div>
+        <div class="secondRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="150" data-expected-height="20">X X X X X X X X X X X X</div>
+    </div>
+</div>
+</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-with-zero-content-size-should-not-crash-expected.txt b/LayoutTests/fast/css-grid-layout/grid-with-zero-content-size-should-not-crash-expected.txt
new file mode 100644 (file)
index 0000000..0bd5ee9
--- /dev/null
@@ -0,0 +1,6 @@
+PASS successfullyParsed is true
+
+TEST COMPLETE
+The test has passed if it does not CRASH in Debug builds.
+
+
diff --git a/LayoutTests/fast/css-grid-layout/grid-with-zero-content-size-should-not-crash.html b/LayoutTests/fast/css-grid-layout/grid-with-zero-content-size-should-not-crash.html
new file mode 100644 (file)
index 0000000..84d9c11
--- /dev/null
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<style>
+html {
+    overflow-x: scroll;
+}
+.grid {
+    display: grid;
+    overflow-y: scroll;
+    overflow-x: scroll;
+}
+</style>
+<script src="../../resources/js-test.js"></script>
+<p>The test has passed if it does not CRASH in Debug builds.</p>
+<div class="grid"></div>