[css-grid] Improve intrinsic size computation with orthogonal flows

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html

Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html
index 9cc11ddd671331a515e1b56c11a64e9abbd6adfb..eacf0a223c075825c5cb1c6db60ed3fd7eb9ee96 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html
@@ -27,7 +27,7 @@ body {
 
 <p>HORIZONTAL-TB container with VERTICAL-LR items.</p>
 <div class="container">
-    <div class="grid itemsStart contentStart fit-content" data-expected-width="110" data-expected-height="260">
+    <div class="grid itemsStart contentStart fit-content" data-expected-width="120" 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>
@@ -37,7 +37,7 @@ body {
 
 <p>HORIZONTAL-TB container with VERTICAL-RL items.</p>
 <div class="container">
-    <div class="grid itemsStart contentStart fit-content" data-expected-width="110" data-expected-height="260">
+    <div class="grid itemsStart contentStart fit-content" data-expected-width="120" 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>
@@ -47,7 +47,7 @@ body {
 
 <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="110">
+    <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>
@@ -57,11 +57,21 @@ body {
 
 <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="110">
+    <div class="grid itemsStart contentStart verticalRL fit-content" data-expected-width="260" data-expected-height="120">
         <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>
+
+<p>HORIZONTAL-TB container with VERTICAL-LR item with percentage.</p>
+<div class="container">

[jfernandez, 2017/02/15 22:49:58]

Should we define a more complex case, which requires the extra cycles of the
tracks sizing algorithm ?

[svillar, 2017/02/16 09:16:35]

Don't know. I'm adding this because it was the test case reported in the bug.

[jfernandez, 2017/02/16 11:00:17]

Acknowledged.

+    <div class="grid fit-content" style="grid: auto / auto;" data-expected-width="30" data-expected-height="30">
+        <div style="width: 100%;" class="firstRowFirstColumn verticalLR" data-expected-width="30" data-expected-height="30">
+            XXX<br>XX<br>X
+        </div>
+    </div>
+</div>
+
 </body>