[css-grid] Remove the x2 computation of row sizes with indefinite heights
authorsvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 22 Sep 2016 07:57:32 +0000 (07:57 +0000)
committersvillar@igalia.com <svillar@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 22 Sep 2016 07:57:32 +0000 (07:57 +0000)
https://bugs.webkit.org/show_bug.cgi?id=162150

Reviewed by Darin Adler.

PerformanceTests:

Added a new test case which checks the layout performance of grids inside other grids, i.e,
grids acting both as grid container and grid item.

* Layout/nested-grid.html: Added.

Source/WebCore:

On r192154, among other things, we added a second pass of the track sizing algorithm for
rows in order to properly compute row sizes when the height was indefinite. We did that in
order to have a symmetrical implementation for columns and rows, but unfortunatelly that was
not correct.

Apart from issuing incorrect results in some cases it created a huge performance issue in
the case of having nested grids because we were exponentially increasing the amount of
executions of the track sizing algorithm. The attached performance test shows a 200%
improvement with the patch (26 vs 80 runs/s).

Test: fast/css-grid-layout/nested-grid.html

* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::layoutBlock):
(WebCore::RenderGrid::computeIntrinsicLogicalHeight):
(WebCore::RenderGrid::layoutGridItems):

LayoutTests:

Added a new reftest to check the behavior of grids acting also as grid items and how the
track sizing of rows depend on that. It includes tests for grids which stretch their
children and grids which do not.

Apart from that some expected results were updated so that they no longer fail.

* fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html: Updated expectations.
* fast/css-grid-layout/nested-grid-expected.html: Added.
* fast/css-grid-layout/nested-grid.html: Added.
* fast/css-grid-layout/percent-track-breadths-regarding-container-size.html: Removed FIXME.
* fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt: Fixed 2
failing tests.

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

LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html
LayoutTests/fast/css-grid-layout/nested-grid-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/nested-grid.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt
LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html
PerformanceTests/ChangeLog
PerformanceTests/Layout/nested-grid.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderGrid.cpp

index 8e839c9..9c96e7c 100644 (file)
@@ -1,3 +1,23 @@
+2016-09-19  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-grid] Remove the x2 computation of row sizes with indefinite heights
+        https://bugs.webkit.org/show_bug.cgi?id=162150
+
+        Reviewed by Darin Adler.
+
+        Added a new reftest to check the behavior of grids acting also as grid items and how the
+        track sizing of rows depend on that. It includes tests for grids which stretch their
+        children and grids which do not.
+
+        Apart from that some expected results were updated so that they no longer fail.
+
+        * fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html: Updated expectations.
+        * fast/css-grid-layout/nested-grid-expected.html: Added.
+        * fast/css-grid-layout/nested-grid.html: Added.
+        * fast/css-grid-layout/percent-track-breadths-regarding-container-size.html: Removed FIXME.
+        * fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt: Fixed 2
+        failing tests.
+
 2016-09-21  Jiewen Tan  <jiewen_tan@apple.com>
 
         Unreviewed, update ios-simulator-wk1 test expectations
index 528d913..fff9608 100644 (file)
 </div>
 
 <div class="grid max-content max-height-35" data-expected-width="40" data-expected-height="35">
-    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="35">XX XXX XX XXX</div>
+    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XX XXX</div>
 </div>
 
 <div class="grid max-content max-height-min-content" data-expected-width="40" data-expected-height="0">
-    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XXX X</div>
+    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX X</div>
 </div>
 
 <div class="grid max-height-min-content" data-expected-width="40" data-expected-height="0">
-    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XXX</div>
+    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
 </div>
 
 <div class="grid max-content max-height-fill-available" data-expected-width="40" data-expected-height="100">
 </div>
 
 <div class="grid min-content" data-expected-width="40" data-expected-height="0">
-    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XX XX</div>
+    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX XX</div>
 </div>
 
 <div class="grid min-content min-height-50" data-expected-width="40" data-expected-height="50">
-    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="50">XX X</div>
+    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
 </div>
 
 <div class="grid min-content min-height-fit-content" data-expected-width="40" data-expected-height="100">
 </div>
 
 <div class="grid min-content min-height-min-content" data-expected-width="40" data-expected-height="0">
-    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XXX</div>
+    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX</div>
 </div>
 
 <div class="grid min-content min-height-35" data-expected-width="40" data-expected-height="35">
-    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="35">XX XX</div>
+    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX</div>
 </div>
 
 <div class="grid min-content min-height-max-content" data-expected-width="40" data-expected-height="100">
 </div>
 
 <div class="grid min-content min-height-50" data-expected-width="40" data-expected-height="50">
-    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="50">XXXX XXXX XXXX XXXX</div>
+    <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXXX XXXX XXXX XXXX</div>
 </div>
 
 <div class="grid min-content max-height-50" data-expected-width="40" data-expected-height="0">
-    <div class="sizedToGridArea min-height-fill-available" data-expected-width="40" data-expected-height="50">XXXX X X XXXX</div>
+    <div class="sizedToGridArea min-height-fill-available" data-expected-width="40" data-expected-height="100">XXXX X X XXXX</div>
 </div>
 
 <br>
        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XXXX X</div>
     </div>
     <div class="grid max-height-min-content" data-expected-width="40" data-expected-height="0">
-       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX XX XX</div>
+       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XX XX</div>
     </div>
     <div class="grid fit-content" data-expected-width="40" data-expected-height="100">
        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XX X</div>
        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XXXX X X</div>
     </div>
     <div class="grid max-height-min-content" data-expected-width="40" data-expected-height="0">
-       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">X XXX XX</div>
+       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">X XXX XX</div>
     </div>
     <div class="grid fit-content" data-expected-width="40" data-expected-height="100">
        <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX XXX XX X</div>
 
 <div class="fit-content min-height-50" style="height: 75px;">
     <div class="grid fill-available" data-expected-width="40" data-expected-height="75">
-       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="75">XX X</div>
+       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
     </div>
 </div>
 
 <div style="height: 25px;">
     <div class="grid fit-content" data-expected-width="40" data-expected-height="25">
-       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="25">XX X</div>
+       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
     </div>
     <div class="grid fill-available" data-expected-width="40" data-expected-height="25">
-       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="25">XX X</div>
+       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
     </div>
     <div class="grid fit-content min-height-35" data-expected-width="40" data-expected-height="35">
-       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="35">XX X</div>
+       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
     </div>
     <div class="grid fit-content max-height-min-content" data-expected-width="40" data-expected-height="0">
-       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="0">XX X</div>
+       <div class="sizedToGridArea" data-expected-width="40" data-expected-height="100">XX X</div>
     </div>
 </div>
 
diff --git a/LayoutTests/fast/css-grid-layout/nested-grid-expected.html b/LayoutTests/fast/css-grid-layout/nested-grid-expected.html
new file mode 100644 (file)
index 0000000..969c6cb
--- /dev/null
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+
+<style>
+.outerGrid {
+    width: 200px;
+    height: 50px;
+    border: 5px solid;
+    background: magenta;
+    margin-bottom: 10px;
+}
+
+.innerGrid {
+    background: gray;
+}
+
+.gridItem {
+    background: cyan;
+    font: 10px/1 Ahem;
+}
+
+ .floatLeft {
+     float: left;
+     width: 250px;
+ }
+</style>
+
+<p>This test checks that percentage rows are properly resolved for a grid container that is a grid item.</p>
+
+<div class="floatLeft">
+
+<div class="outerGrid">
+    <div class="innerGrid" style="height: 100%">
+        <div class="gridItem" style="height: 50%"></div>
+    </div>
+</div>
+
+<div class="outerGrid">
+    <div class="innerGrid">
+        <div class="gridItem">X X<br>XX</div>
+    </div>
+</div>
+
+<div class="outerGrid">
+    <div class="innerGrid" style="height: calc(100% * (2/3))">
+        <div class="gridItem" style="height: 50%"></div>
+    </div>
+</div>
+
+<div class="outerGrid">
+    <div class="innerGrid">
+        <div class="gridItem">X X<br>XX</div>
+    </div>
+</div>
+
+</div>
+
+<div class="floatLeft">
+
+<div class="outerGrid">
+    <div class="innerGrid" style="height: 75%">
+        <div class="gridItem" style="height: 75%"></div>
+    </div>
+</div>
+
+<div class="outerGrid">
+    <div class="innerGrid" style="height: calc(20px * (4/3))">
+        <div class="gridItem" style="height: 20px">X X<br>XX</div>
+    </div>
+</div>
+
+<div class="outerGrid">
+    <div class="innerGrid" style="height: 100%;">
+        <div class="gridItem" style="height: 25%"></div>
+    </div>
+</div>
+
+<div class="outerGrid">
+    <div class="innerGrid" style="height: 20px;">
+        <div class="gridItem" style="height: 75%">X X<br>XX</div>
+    </div>
+</div>
+
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/nested-grid.html b/LayoutTests/fast/css-grid-layout/nested-grid.html
new file mode 100644 (file)
index 0000000..c0c846a
--- /dev/null
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+
+<style>
+.outerGrid {
+    width: 200px;
+    border: 5px solid;
+    background: magenta;
+    margin-bottom: 10px;
+}
+
+.innerGrid {
+    display: grid;
+}
+
+.gridItem {
+    background: cyan;
+    font: 10px/1 Ahem;
+}
+
+.floatLeft {
+    float: left;
+    width: 250px;
+}
+</style>
+
+<p>This test checks that percentage rows are properly resolved for a grid container that is a grid item.</p>
+
+<div class="floatLeft">
+
+<div class="grid outerGrid" style="grid: 50px / 1fr;">
+    <div class="grid" style="grid: 50% / 1fr;">
+        <div class="gridItem"></div>
+    </div>
+</div>
+
+<div class="grid outerGrid alignItemsStart" style="grid: 50px / 1fr;">
+    <div class="grid alignItemsStart" style="grid: 50% / 1fr;">
+        <div class="gridItem">X X<br>XX</div>
+    </div>
+</div>
+
+<div class="grid outerGrid" style="height: 50px; grid: 2fr 1fr / 1fr;">
+    <div class="grid" style="grid: 50% / 1fr;">
+        <div class="gridItem"></div>
+    </div>
+</div>
+
+<div class="grid outerGrid alignItemsStart" style="height: 50px; grid: 2fr 1fr / 1fr;">
+    <div class="grid alignItemsStart" style="grid: 50% / 1fr;">
+        <div class="gridItem">X X<br>XX</div>
+    </div>
+</div>
+
+</div>
+
+<div class="floatLeft">
+
+<div class="grid outerGrid" style="height: 50px; grid: 3fr 1fr / 1fr;">
+    <div class="grid" style="grid: 3fr 1fr / 1fr;">
+        <div class="gridItem"></div>
+    </div>
+</div>
+
+<div class="grid outerGrid alignItemsStart" style="height: 50px; grid: 3fr 1fr / 1fr;">
+    <div class="grid alignItemsStart" style="grid: 3fr 1fr / 1fr;">
+        <div class="gridItem">X X<br>XX</div>
+    </div>
+</div>
+
+<div class="grid outerGrid" style="height: 50px; grid: 100% / 1fr;">
+    <div class="grid" style="grid: 50% / 1fr;">
+        <div class="gridItem" style="height: 50%"></div>
+    </div>
+</div>
+
+<div class="grid outerGrid alignItemsStart" style="height: 50px; grid: 100% / 1fr;">
+    <div class="grid alignItemsStart" style="grid: 50% / 1fr;">
+        <div class="gridItem" style="height: 75%">X X<br>XX</div>
+    </div>
+</div>
+
+</div>
index 26ab483..29459eb 100644 (file)
@@ -35,29 +35,11 @@ PASS
 XX
 XXXXX
 XXX
-FAIL:
-Expected 10 for height, but got 4. 
-Expected 10 for height, but got 4. 
-Expected 10 for height, but got 4. 
-
-<div class="grid absolutelyPositioned">
-            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
-            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
-            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
-        </div>
+PASS
 XX
 XXXXX
 XXX
-FAIL:
-Expected 10 for height, but got 4. 
-Expected 10 for height, but got 4. 
-Expected 10 for height, but got 4. 
-
-<div class="grid absolutelyPositioned">
-            <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
-            <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
-            <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
-        </div>
+PASS
 XX
 XXXXX
 XXX
index 5c5caf6..a49a860 100644 (file)
         </div>
     </div>
 
-    <!-- FIXME: The height of the row is wrong calculated in the following 2 examples because of a bug in
-         RenderBox::hasDefiniteLogicalHeight() that considers that any positioned element has a definite height.
-         See: https://bugs.webkit.org/show_bug.cgi?id=159251 -->
     <div class="fit-content indefiniteHeight">
         <div class="grid absolutelyPositioned">
             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
index 2126d6c..3ef0bf3 100644 (file)
@@ -1,3 +1,15 @@
+2016-09-19  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-grid] Remove the x2 computation of row sizes with indefinite heights
+        https://bugs.webkit.org/show_bug.cgi?id=162150
+
+        Reviewed by Darin Adler.
+
+        Added a new test case which checks the layout performance of grids inside other grids, i.e,
+        grids acting both as grid container and grid item.
+
+        * Layout/nested-grid.html: Added.
+
 2016-09-09  Simon Fraser  <simon.fraser@apple.com>
 
         Perf test Animation/css-accelerated-animation.html failing
diff --git a/PerformanceTests/Layout/nested-grid.html b/PerformanceTests/Layout/nested-grid.html
new file mode 100644 (file)
index 0000000..afcc7e9
--- /dev/null
@@ -0,0 +1,342 @@
+<!DOCTYPE html>
+<head>
+<style>
+html, body {
+    margin: 0;
+    height: 100%;
+}
+
+.grid { display: grid; }
+.gridItem { height: 10px; }
+#gridContainer { grid-auto-columns: 1fr; }
+</style>
+
+<script src="../resources/runner.js"></script>
+<script>
+'use strict';
+
+function startTest() {
+     document.body.offsetHeight;
+
+     var index = 0;
+     PerfTestRunner.measureRunsPerSecond({
+         description: "Measures performance of layout on a page using nested grids.",
+         run: function() {
+             var wrap = document.getElementById("wrap");
+             wrap.style.width = ++index % 2 ? "99%" : "90%";
+             document.body.offsetHeight;
+         }
+     });
+}
+</script>
+</head>
+
+<body onload="startTest()">
+    <div id="wrap" class="grid">
+        <div class="grid">
+            <div class="grid" id="gridContainer">
+                <div class='gridItem' style='grid-area: 1 / 1; background-color: rgb(36, 100, 135)'></div>
+                <div class='gridItem' style='grid-area: 1 / 2; background-color: rgb(41, 156, 157)'></div>
+                <div class='gridItem' style='grid-area: 1 / 3; background-color: rgb(204, 225, 15)'></div>
+                <div class='gridItem' style='grid-area: 1 / 4; background-color: rgb(106, 245, 133)'></div>
+                <div class='gridItem' style='grid-area: 1 / 5; background-color: rgb(159, 213, 189)'></div>
+                <div class='gridItem' style='grid-area: 1 / 6; background-color: rgb(39, 38, 236)'></div>
+                <div class='gridItem' style='grid-area: 1 / 7; background-color: rgb(234, 102, 236)'></div>
+                <div class='gridItem' style='grid-area: 1 / 8; background-color: rgb(239, 166, 146)'></div>
+                <div class='gridItem' style='grid-area: 1 / 9; background-color: rgb(29, 202, 217)'></div>
+                <div class='gridItem' style='grid-area: 1 / 10; background-color: rgb(170, 182, 228)'></div>
+                <div class='gridItem' style='grid-area: 2 / 1; background-color: rgb(142, 26, 226)'></div>
+                <div class='gridItem' style='grid-area: 2 / 2; background-color: rgb(140, 195, 5)'></div>
+                <div class='gridItem' style='grid-area: 2 / 3; background-color: rgb(122, 86, 33)'></div>
+                <div class='gridItem' style='grid-area: 2 / 4; background-color: rgb(242, 247, 24)'></div>
+                <div class='gridItem' style='grid-area: 2 / 5; background-color: rgb(13, 102, 180)'></div>
+                <div class='gridItem' style='grid-area: 2 / 6; background-color: rgb(5, 234, 62)'></div>
+                <div class='gridItem' style='grid-area: 2 / 7; background-color: rgb(78, 29, 58)'></div>
+                <div class='gridItem' style='grid-area: 2 / 8; background-color: rgb(185, 50, 52)'></div>
+                <div class='gridItem' style='grid-area: 2 / 9; background-color: rgb(217, 213, 222)'></div>
+                <div class='gridItem' style='grid-area: 2 / 10; background-color: rgb(14, 236, 144)'></div>
+                <div class='gridItem' style='grid-area: 3 / 1; background-color: rgb(28, 15, 98)'></div>
+                <div class='gridItem' style='grid-area: 3 / 2; background-color: rgb(31, 124, 15)'></div>
+                <div class='gridItem' style='grid-area: 3 / 3; background-color: rgb(160, 116, 86)'></div>
+                <div class='gridItem' style='grid-area: 3 / 4; background-color: rgb(22, 14, 76)'></div>
+                <div class='gridItem' style='grid-area: 3 / 5; background-color: rgb(199, 51, 155)'></div>
+                <div class='gridItem' style='grid-area: 3 / 6; background-color: rgb(195, 254, 137)'></div>
+                <div class='gridItem' style='grid-area: 3 / 7; background-color: rgb(109, 253, 46)'></div>
+                <div class='gridItem' style='grid-area: 3 / 8; background-color: rgb(20, 27, 48)'></div>
+                <div class='gridItem' style='grid-area: 3 / 9; background-color: rgb(79, 234, 49)'></div>
+                <div class='gridItem' style='grid-area: 3 / 10; background-color: rgb(230, 193, 12)'></div>
+                <div class='gridItem' style='grid-area: 4 / 1; background-color: rgb(194, 85, 115)'></div>
+                <div class='gridItem' style='grid-area: 4 / 2; background-color: rgb(10, 219, 54)'></div>
+                <div class='gridItem' style='grid-area: 4 / 3; background-color: rgb(179, 20, 40)'></div>
+                <div class='gridItem' style='grid-area: 4 / 4; background-color: rgb(164, 105, 181)'></div>
+                <div class='gridItem' style='grid-area: 4 / 5; background-color: rgb(30, 82, 234)'></div>
+                <div class='gridItem' style='grid-area: 4 / 6; background-color: rgb(39, 120, 44)'></div>
+                <div class='gridItem' style='grid-area: 4 / 7; background-color: rgb(124, 235, 123)'></div>
+                <div class='gridItem' style='grid-area: 4 / 8; background-color: rgb(131, 27, 68)'></div>
+                <div class='gridItem' style='grid-area: 4 / 9; background-color: rgb(13, 80, 129)'></div>
+                <div class='gridItem' style='grid-area: 4 / 10; background-color: rgb(0, 215, 125)'></div>
+                <div class='gridItem' style='grid-area: 5 / 1; background-color: rgb(201, 139, 254)'></div>
+                <div class='gridItem' style='grid-area: 5 / 2; background-color: rgb(176, 66, 242)'></div>
+                <div class='gridItem' style='grid-area: 5 / 3; background-color: rgb(82, 19, 194)'></div>
+                <div class='gridItem' style='grid-area: 5 / 4; background-color: rgb(3, 244, 246)'></div>
+                <div class='gridItem' style='grid-area: 5 / 5; background-color: rgb(197, 243, 66)'></div>
+                <div class='gridItem' style='grid-area: 5 / 6; background-color: rgb(146, 136, 91)'></div>
+                <div class='gridItem' style='grid-area: 5 / 7; background-color: rgb(181, 119, 137)'></div>
+                <div class='gridItem' style='grid-area: 5 / 8; background-color: rgb(128, 156, 9)'></div>
+                <div class='gridItem' style='grid-area: 5 / 9; background-color: rgb(100, 148, 110)'></div>
+                <div class='gridItem' style='grid-area: 5 / 10; background-color: rgb(61, 150, 231)'></div>
+                <div class='gridItem' style='grid-area: 6 / 1; background-color: rgb(189, 231, 192)'></div>
+                <div class='gridItem' style='grid-area: 6 / 2; background-color: rgb(202, 127, 122)'></div>
+                <div class='gridItem' style='grid-area: 6 / 3; background-color: rgb(86, 152, 130)'></div>
+                <div class='gridItem' style='grid-area: 6 / 4; background-color: rgb(128, 111, 255)'></div>
+                <div class='gridItem' style='grid-area: 6 / 5; background-color: rgb(112, 214, 196)'></div>
+                <div class='gridItem' style='grid-area: 6 / 6; background-color: rgb(26, 185, 21)'></div>
+                <div class='gridItem' style='grid-area: 6 / 7; background-color: rgb(138, 121, 184)'></div>
+                <div class='gridItem' style='grid-area: 6 / 8; background-color: rgb(86, 25, 98)'></div>
+                <div class='gridItem' style='grid-area: 6 / 9; background-color: rgb(236, 218, 194)'></div>
+                <div class='gridItem' style='grid-area: 6 / 10; background-color: rgb(226, 69, 125)'></div>
+                <div class='gridItem' style='grid-area: 7 / 1; background-color: rgb(46, 129, 223)'></div>
+                <div class='gridItem' style='grid-area: 7 / 2; background-color: rgb(96, 33, 177)'></div>
+                <div class='gridItem' style='grid-area: 7 / 3; background-color: rgb(205, 196, 118)'></div>
+                <div class='gridItem' style='grid-area: 7 / 4; background-color: rgb(253, 197, 216)'></div>
+                <div class='gridItem' style='grid-area: 7 / 5; background-color: rgb(244, 123, 146)'></div>
+                <div class='gridItem' style='grid-area: 7 / 6; background-color: rgb(177, 188, 204)'></div>
+                <div class='gridItem' style='grid-area: 7 / 7; background-color: rgb(89, 224, 203)'></div>
+                <div class='gridItem' style='grid-area: 7 / 8; background-color: rgb(187, 211, 108)'></div>
+                <div class='gridItem' style='grid-area: 7 / 9; background-color: rgb(156, 222, 180)'></div>
+                <div class='gridItem' style='grid-area: 7 / 10; background-color: rgb(178, 87, 127)'></div>
+                <div class='gridItem' style='grid-area: 8 / 1; background-color: rgb(240, 103, 63)'></div>
+                <div class='gridItem' style='grid-area: 8 / 2; background-color: rgb(80, 100, 134)'></div>
+                <div class='gridItem' style='grid-area: 8 / 3; background-color: rgb(76, 192, 127)'></div>
+                <div class='gridItem' style='grid-area: 8 / 4; background-color: rgb(238, 31, 229)'></div>
+                <div class='gridItem' style='grid-area: 8 / 5; background-color: rgb(34, 49, 156)'></div>
+                <div class='gridItem' style='grid-area: 8 / 6; background-color: rgb(6, 31, 100)'></div>
+                <div class='gridItem' style='grid-area: 8 / 7; background-color: rgb(2, 3, 38)'></div>
+                <div class='gridItem' style='grid-area: 8 / 8; background-color: rgb(198, 165, 46)'></div>
+                <div class='gridItem' style='grid-area: 8 / 9; background-color: rgb(191, 147, 159)'></div>
+                <div class='gridItem' style='grid-area: 8 / 10; background-color: rgb(243, 96, 21)'></div>
+                <div class='gridItem' style='grid-area: 9 / 1; background-color: rgb(251, 125, 248)'></div>
+                <div class='gridItem' style='grid-area: 9 / 2; background-color: rgb(174, 162, 137)'></div>
+                <div class='gridItem' style='grid-area: 9 / 3; background-color: rgb(254, 178, 9)'></div>
+                <div class='gridItem' style='grid-area: 9 / 4; background-color: rgb(105, 11, 18)'></div>
+                <div class='gridItem' style='grid-area: 9 / 5; background-color: rgb(137, 159, 231)'></div>
+                <div class='gridItem' style='grid-area: 9 / 6; background-color: rgb(233, 167, 52)'></div>
+                <div class='gridItem' style='grid-area: 9 / 7; background-color: rgb(133, 16, 144)'></div>
+                <div class='gridItem' style='grid-area: 9 / 8; background-color: rgb(152, 154, 36)'></div>
+                <div class='gridItem' style='grid-area: 9 / 9; background-color: rgb(18, 174, 89)'></div>
+                <div class='gridItem' style='grid-area: 9 / 10; background-color: rgb(83, 40, 80)'></div>
+                <div class='gridItem' style='grid-area: 10 / 1; background-color: rgb(166, 225, 190)'></div>
+                <div class='gridItem' style='grid-area: 10 / 2; background-color: rgb(43, 251, 27)'></div>
+                <div class='gridItem' style='grid-area: 10 / 3; background-color: rgb(138, 82, 236)'></div>
+                <div class='gridItem' style='grid-area: 10 / 4; background-color: rgb(133, 27, 45)'></div>
+                <div class='gridItem' style='grid-area: 10 / 5; background-color: rgb(152, 52, 169)'></div>
+                <div class='gridItem' style='grid-area: 10 / 6; background-color: rgb(55, 36, 0)'></div>
+                <div class='gridItem' style='grid-area: 10 / 7; background-color: rgb(74, 125, 195)'></div>
+                <div class='gridItem' style='grid-area: 10 / 8; background-color: rgb(203, 84, 103)'></div>
+                <div class='gridItem' style='grid-area: 10 / 9; background-color: rgb(16, 104, 62)'></div>
+                <div class='gridItem' style='grid-area: 10 / 10; background-color: rgb(119, 219, 124)'></div>
+                <div class='gridItem' style='grid-area: 11 / 1; background-color: rgb(144, 204, 119)'></div>
+                <div class='gridItem' style='grid-area: 11 / 2; background-color: rgb(35, 147, 180)'></div>
+                <div class='gridItem' style='grid-area: 11 / 3; background-color: rgb(53, 83, 191)'></div>
+                <div class='gridItem' style='grid-area: 11 / 4; background-color: rgb(104, 182, 76)'></div>
+                <div class='gridItem' style='grid-area: 11 / 5; background-color: rgb(158, 11, 85)'></div>
+                <div class='gridItem' style='grid-area: 11 / 6; background-color: rgb(67, 101, 53)'></div>
+                <div class='gridItem' style='grid-area: 11 / 7; background-color: rgb(4, 123, 0)'></div>
+                <div class='gridItem' style='grid-area: 11 / 8; background-color: rgb(80, 177, 30)'></div>
+                <div class='gridItem' style='grid-area: 11 / 9; background-color: rgb(45, 111, 243)'></div>
+                <div class='gridItem' style='grid-area: 11 / 10; background-color: rgb(8, 164, 245)'></div>
+                <div class='gridItem' style='grid-area: 12 / 1; background-color: rgb(48, 126, 34)'></div>
+                <div class='gridItem' style='grid-area: 12 / 2; background-color: rgb(21, 35, 187)'></div>
+                <div class='gridItem' style='grid-area: 12 / 3; background-color: rgb(150, 220, 226)'></div>
+                <div class='gridItem' style='grid-area: 12 / 4; background-color: rgb(64, 107, 119)'></div>
+                <div class='gridItem' style='grid-area: 12 / 5; background-color: rgb(112, 109, 8)'></div>
+                <div class='gridItem' style='grid-area: 12 / 6; background-color: rgb(204, 16, 188)'></div>
+                <div class='gridItem' style='grid-area: 12 / 7; background-color: rgb(206, 119, 225)'></div>
+                <div class='gridItem' style='grid-area: 12 / 8; background-color: rgb(132, 200, 107)'></div>
+                <div class='gridItem' style='grid-area: 12 / 9; background-color: rgb(88, 124, 39)'></div>
+                <div class='gridItem' style='grid-area: 12 / 10; background-color: rgb(190, 221, 212)'></div>
+                <div class='gridItem' style='grid-area: 13 / 1; background-color: rgb(37, 110, 70)'></div>
+                <div class='gridItem' style='grid-area: 13 / 2; background-color: rgb(158, 184, 122)'></div>
+                <div class='gridItem' style='grid-area: 13 / 3; background-color: rgb(131, 50, 156)'></div>
+                <div class='gridItem' style='grid-area: 13 / 4; background-color: rgb(198, 184, 72)'></div>
+                <div class='gridItem' style='grid-area: 13 / 5; background-color: rgb(163, 59, 1)'></div>
+                <div class='gridItem' style='grid-area: 13 / 6; background-color: rgb(25, 239, 11)'></div>
+                <div class='gridItem' style='grid-area: 13 / 7; background-color: rgb(35, 157, 205)'></div>
+                <div class='gridItem' style='grid-area: 13 / 8; background-color: rgb(130, 236, 218)'></div>
+                <div class='gridItem' style='grid-area: 13 / 9; background-color: rgb(37, 66, 27)'></div>
+                <div class='gridItem' style='grid-area: 13 / 10; background-color: rgb(116, 156, 157)'></div>
+                <div class='gridItem' style='grid-area: 14 / 1; background-color: rgb(6, 113, 161)'></div>
+                <div class='gridItem' style='grid-area: 14 / 2; background-color: rgb(221, 125, 237)'></div>
+                <div class='gridItem' style='grid-area: 14 / 3; background-color: rgb(119, 153, 90)'></div>
+                <div class='gridItem' style='grid-area: 14 / 4; background-color: rgb(122, 227, 53)'></div>
+                <div class='gridItem' style='grid-area: 14 / 5; background-color: rgb(110, 4, 57)'></div>
+                <div class='gridItem' style='grid-area: 14 / 6; background-color: rgb(149, 160, 85)'></div>
+                <div class='gridItem' style='grid-area: 14 / 7; background-color: rgb(26, 3, 213)'></div>
+                <div class='gridItem' style='grid-area: 14 / 8; background-color: rgb(68, 56, 197)'></div>
+                <div class='gridItem' style='grid-area: 14 / 9; background-color: rgb(226, 80, 7)'></div>
+                <div class='gridItem' style='grid-area: 14 / 10; background-color: rgb(225, 107, 232)'></div>
+                <div class='gridItem' style='grid-area: 15 / 1; background-color: rgb(59, 215, 249)'></div>
+                <div class='gridItem' style='grid-area: 15 / 2; background-color: rgb(183, 116, 39)'></div>
+                <div class='gridItem' style='grid-area: 15 / 3; background-color: rgb(64, 71, 212)'></div>
+                <div class='gridItem' style='grid-area: 15 / 4; background-color: rgb(154, 198, 45)'></div>
+                <div class='gridItem' style='grid-area: 15 / 5; background-color: rgb(132, 57, 196)'></div>
+                <div class='gridItem' style='grid-area: 15 / 6; background-color: rgb(62, 211, 119)'></div>
+                <div class='gridItem' style='grid-area: 15 / 7; background-color: rgb(246, 246, 170)'></div>
+                <div class='gridItem' style='grid-area: 15 / 8; background-color: rgb(31, 220, 11)'></div>
+                <div class='gridItem' style='grid-area: 15 / 9; background-color: rgb(192, 219, 54)'></div>
+                <div class='gridItem' style='grid-area: 15 / 10; background-color: rgb(83, 247, 136)'></div>
+                <div class='gridItem' style='grid-area: 16 / 1; background-color: rgb(239, 205, 20)'></div>
+                <div class='gridItem' style='grid-area: 16 / 2; background-color: rgb(15, 218, 101)'></div>
+                <div class='gridItem' style='grid-area: 16 / 3; background-color: rgb(253, 121, 123)'></div>
+                <div class='gridItem' style='grid-area: 16 / 4; background-color: rgb(22, 85, 89)'></div>
+                <div class='gridItem' style='grid-area: 16 / 5; background-color: rgb(189, 232, 192)'></div>
+                <div class='gridItem' style='grid-area: 16 / 6; background-color: rgb(235, 232, 222)'></div>
+                <div class='gridItem' style='grid-area: 16 / 7; background-color: rgb(15, 163, 54)'></div>
+                <div class='gridItem' style='grid-area: 16 / 8; background-color: rgb(106, 104, 76)'></div>
+                <div class='gridItem' style='grid-area: 16 / 9; background-color: rgb(41, 248, 99)'></div>
+                <div class='gridItem' style='grid-area: 16 / 10; background-color: rgb(251, 48, 136)'></div>
+                <div class='gridItem' style='grid-area: 17 / 1; background-color: rgb(233, 21, 76)'></div>
+                <div class='gridItem' style='grid-area: 17 / 2; background-color: rgb(88, 8, 213)'></div>
+                <div class='gridItem' style='grid-area: 17 / 3; background-color: rgb(95, 192, 94)'></div>
+                <div class='gridItem' style='grid-area: 17 / 4; background-color: rgb(213, 70, 118)'></div>
+                <div class='gridItem' style='grid-area: 17 / 5; background-color: rgb(229, 132, 167)'></div>
+                <div class='gridItem' style='grid-area: 17 / 6; background-color: rgb(134, 45, 58)'></div>
+                <div class='gridItem' style='grid-area: 17 / 7; background-color: rgb(182, 184, 82)'></div>
+                <div class='gridItem' style='grid-area: 17 / 8; background-color: rgb(52, 41, 157)'></div>
+                <div class='gridItem' style='grid-area: 17 / 9; background-color: rgb(14, 7, 246)'></div>
+                <div class='gridItem' style='grid-area: 17 / 10; background-color: rgb(25, 234, 105)'></div>
+                <div class='gridItem' style='grid-area: 18 / 1; background-color: rgb(58, 91, 104)'></div>
+                <div class='gridItem' style='grid-area: 18 / 2; background-color: rgb(191, 150, 115)'></div>
+                <div class='gridItem' style='grid-area: 18 / 3; background-color: rgb(137, 235, 204)'></div>
+                <div class='gridItem' style='grid-area: 18 / 4; background-color: rgb(128, 160, 238)'></div>
+                <div class='gridItem' style='grid-area: 18 / 5; background-color: rgb(219, 229, 251)'></div>
+                <div class='gridItem' style='grid-area: 18 / 6; background-color: rgb(171, 136, 44)'></div>
+                <div class='gridItem' style='grid-area: 18 / 7; background-color: rgb(233, 86, 121)'></div>
+                <div class='gridItem' style='grid-area: 18 / 8; background-color: rgb(139, 99, 128)'></div>
+                <div class='gridItem' style='grid-area: 18 / 9; background-color: rgb(12, 214, 126)'></div>
+                <div class='gridItem' style='grid-area: 18 / 10; background-color: rgb(118, 27, 21)'></div>
+                <div class='gridItem' style='grid-area: 19 / 1; background-color: rgb(89, 50, 217)'></div>
+                <div class='gridItem' style='grid-area: 19 / 2; background-color: rgb(17, 112, 89)'></div>
+                <div class='gridItem' style='grid-area: 19 / 3; background-color: rgb(206, 62, 196)'></div>
+                <div class='gridItem' style='grid-area: 19 / 4; background-color: rgb(44, 195, 252)'></div>
+                <div class='gridItem' style='grid-area: 19 / 5; background-color: rgb(152, 18, 133)'></div>
+                <div class='gridItem' style='grid-area: 19 / 6; background-color: rgb(140, 176, 222)'></div>
+                <div class='gridItem' style='grid-area: 19 / 7; background-color: rgb(79, 252, 183)'></div>
+                <div class='gridItem' style='grid-area: 19 / 8; background-color: rgb(226, 117, 120)'></div>
+                <div class='gridItem' style='grid-area: 19 / 9; background-color: rgb(132, 187, 210)'></div>
+                <div class='gridItem' style='grid-area: 19 / 10; background-color: rgb(109, 82, 44)'></div>
+                <div class='gridItem' style='grid-area: 20 / 1; background-color: rgb(27, 61, 17)'></div>
+                <div class='gridItem' style='grid-area: 20 / 2; background-color: rgb(52, 128, 161)'></div>
+                <div class='gridItem' style='grid-area: 20 / 3; background-color: rgb(243, 50, 187)'></div>
+                <div class='gridItem' style='grid-area: 20 / 4; background-color: rgb(139, 108, 157)'></div>
+                <div class='gridItem' style='grid-area: 20 / 5; background-color: rgb(237, 111, 157)'></div>
+                <div class='gridItem' style='grid-area: 20 / 6; background-color: rgb(41, 220, 130)'></div>
+                <div class='gridItem' style='grid-area: 20 / 7; background-color: rgb(73, 253, 239)'></div>
+                <div class='gridItem' style='grid-area: 20 / 8; background-color: rgb(22, 136, 50)'></div>
+                <div class='gridItem' style='grid-area: 20 / 9; background-color: rgb(215, 136, 15)'></div>
+                <div class='gridItem' style='grid-area: 20 / 10; background-color: rgb(1, 161, 103)'></div>
+                <div class='gridItem' style='grid-area: 21 / 1; background-color: rgb(89, 218, 223)'></div>
+                <div class='gridItem' style='grid-area: 21 / 2; background-color: rgb(42, 37, 205)'></div>
+                <div class='gridItem' style='grid-area: 21 / 3; background-color: rgb(82, 186, 133)'></div>
+                <div class='gridItem' style='grid-area: 21 / 4; background-color: rgb(165, 86, 40)'></div>
+                <div class='gridItem' style='grid-area: 21 / 5; background-color: rgb(174, 126, 88)'></div>
+                <div class='gridItem' style='grid-area: 21 / 6; background-color: rgb(203, 238, 145)'></div>
+                <div class='gridItem' style='grid-area: 21 / 7; background-color: rgb(47, 213, 233)'></div>
+                <div class='gridItem' style='grid-area: 21 / 8; background-color: rgb(9, 117, 173)'></div>
+                <div class='gridItem' style='grid-area: 21 / 9; background-color: rgb(86, 84, 18)'></div>
+                <div class='gridItem' style='grid-area: 21 / 10; background-color: rgb(78, 34, 85)'></div>
+                <div class='gridItem' style='grid-area: 22 / 1; background-color: rgb(23, 21, 111)'></div>
+                <div class='gridItem' style='grid-area: 22 / 2; background-color: rgb(90, 100, 123)'></div>
+                <div class='gridItem' style='grid-area: 22 / 3; background-color: rgb(161, 7, 120)'></div>
+                <div class='gridItem' style='grid-area: 22 / 4; background-color: rgb(25, 144, 0)'></div>
+                <div class='gridItem' style='grid-area: 22 / 5; background-color: rgb(232, 184, 247)'></div>
+                <div class='gridItem' style='grid-area: 22 / 6; background-color: rgb(98, 156, 47)'></div>
+                <div class='gridItem' style='grid-area: 22 / 7; background-color: rgb(131, 123, 1)'></div>
+                <div class='gridItem' style='grid-area: 22 / 8; background-color: rgb(62, 166, 200)'></div>
+                <div class='gridItem' style='grid-area: 22 / 9; background-color: rgb(94, 49, 248)'></div>
+                <div class='gridItem' style='grid-area: 22 / 10; background-color: rgb(187, 84, 35)'></div>
+                <div class='gridItem' style='grid-area: 23 / 1; background-color: rgb(95, 87, 28)'></div>
+                <div class='gridItem' style='grid-area: 23 / 2; background-color: rgb(3, 222, 23)'></div>
+                <div class='gridItem' style='grid-area: 23 / 3; background-color: rgb(227, 108, 40)'></div>
+                <div class='gridItem' style='grid-area: 23 / 4; background-color: rgb(16, 96, 197)'></div>
+                <div class='gridItem' style='grid-area: 23 / 5; background-color: rgb(158, 189, 126)'></div>
+                <div class='gridItem' style='grid-area: 23 / 6; background-color: rgb(36, 97, 108)'></div>
+                <div class='gridItem' style='grid-area: 23 / 7; background-color: rgb(112, 144, 129)'></div>
+                <div class='gridItem' style='grid-area: 23 / 8; background-color: rgb(49, 47, 177)'></div>
+                <div class='gridItem' style='grid-area: 23 / 9; background-color: rgb(225, 182, 57)'></div>
+                <div class='gridItem' style='grid-area: 23 / 10; background-color: rgb(228, 154, 166)'></div>
+                <div class='gridItem' style='grid-area: 24 / 1; background-color: rgb(33, 123, 74)'></div>
+                <div class='gridItem' style='grid-area: 24 / 2; background-color: rgb(90, 195, 5)'></div>
+                <div class='gridItem' style='grid-area: 24 / 3; background-color: rgb(134, 243, 91)'></div>
+                <div class='gridItem' style='grid-area: 24 / 4; background-color: rgb(213, 137, 30)'></div>
+                <div class='gridItem' style='grid-area: 24 / 5; background-color: rgb(229, 122, 90)'></div>
+                <div class='gridItem' style='grid-area: 24 / 6; background-color: rgb(37, 146, 112)'></div>
+                <div class='gridItem' style='grid-area: 24 / 7; background-color: rgb(116, 228, 23)'></div>
+                <div class='gridItem' style='grid-area: 24 / 8; background-color: rgb(161, 205, 147)'></div>
+                <div class='gridItem' style='grid-area: 24 / 9; background-color: rgb(13, 122, 153)'></div>
+                <div class='gridItem' style='grid-area: 24 / 10; background-color: rgb(81, 21, 84)'></div>
+                <div class='gridItem' style='grid-area: 25 / 1; background-color: rgb(155, 70, 124)'></div>
+                <div class='gridItem' style='grid-area: 25 / 2; background-color: rgb(160, 194, 239)'></div>
+                <div class='gridItem' style='grid-area: 25 / 3; background-color: rgb(215, 51, 22)'></div>
+                <div class='gridItem' style='grid-area: 25 / 4; background-color: rgb(169, 215, 206)'></div>
+                <div class='gridItem' style='grid-area: 25 / 5; background-color: rgb(132, 145, 197)'></div>
+                <div class='gridItem' style='grid-area: 25 / 6; background-color: rgb(227, 219, 8)'></div>
+                <div class='gridItem' style='grid-area: 25 / 7; background-color: rgb(56, 92, 236)'></div>
+                <div class='gridItem' style='grid-area: 25 / 8; background-color: rgb(199, 158, 71)'></div>
+                <div class='gridItem' style='grid-area: 25 / 9; background-color: rgb(198, 56, 233)'></div>
+                <div class='gridItem' style='grid-area: 25 / 10; background-color: rgb(218, 37, 33)'></div>
+                <div class='gridItem' style='grid-area: 26 / 1; background-color: rgb(205, 49, 30)'></div>
+                <div class='gridItem' style='grid-area: 26 / 2; background-color: rgb(131, 42, 3)'></div>
+                <div class='gridItem' style='grid-area: 26 / 3; background-color: rgb(90, 94, 184)'></div>
+                <div class='gridItem' style='grid-area: 26 / 4; background-color: rgb(253, 125, 105)'></div>
+                <div class='gridItem' style='grid-area: 26 / 5; background-color: rgb(48, 80, 56)'></div>
+                <div class='gridItem' style='grid-area: 26 / 6; background-color: rgb(214, 44, 214)'></div>
+                <div class='gridItem' style='grid-area: 26 / 7; background-color: rgb(87, 210, 7)'></div>
+                <div class='gridItem' style='grid-area: 26 / 8; background-color: rgb(246, 134, 110)'></div>
+                <div class='gridItem' style='grid-area: 26 / 9; background-color: rgb(28, 235, 156)'></div>
+                <div class='gridItem' style='grid-area: 26 / 10; background-color: rgb(196, 196, 122)'></div>
+                <div class='gridItem' style='grid-area: 27 / 1; background-color: rgb(32, 101, 179)'></div>
+                <div class='gridItem' style='grid-area: 27 / 2; background-color: rgb(143, 215, 70)'></div>
+                <div class='gridItem' style='grid-area: 27 / 3; background-color: rgb(164, 20, 146)'></div>
+                <div class='gridItem' style='grid-area: 27 / 4; background-color: rgb(54, 170, 112)'></div>
+                <div class='gridItem' style='grid-area: 27 / 5; background-color: rgb(240, 231, 151)'></div>
+                <div class='gridItem' style='grid-area: 27 / 6; background-color: rgb(65, 146, 47)'></div>
+                <div class='gridItem' style='grid-area: 27 / 7; background-color: rgb(56, 233, 21)'></div>
+                <div class='gridItem' style='grid-area: 27 / 8; background-color: rgb(88, 15, 249)'></div>
+                <div class='gridItem' style='grid-area: 27 / 9; background-color: rgb(65, 178, 170)'></div>
+                <div class='gridItem' style='grid-area: 27 / 10; background-color: rgb(95, 29, 2)'></div>
+                <div class='gridItem' style='grid-area: 28 / 1; background-color: rgb(24, 241, 163)'></div>
+                <div class='gridItem' style='grid-area: 28 / 2; background-color: rgb(188, 14, 14)'></div>
+                <div class='gridItem' style='grid-area: 28 / 3; background-color: rgb(37, 13, 196)'></div>
+                <div class='gridItem' style='grid-area: 28 / 4; background-color: rgb(19, 4, 41)'></div>
+                <div class='gridItem' style='grid-area: 28 / 5; background-color: rgb(68, 83, 114)'></div>
+                <div class='gridItem' style='grid-area: 28 / 6; background-color: rgb(161, 172, 81)'></div>
+                <div class='gridItem' style='grid-area: 28 / 7; background-color: rgb(238, 31, 124)'></div>
+                <div class='gridItem' style='grid-area: 28 / 8; background-color: rgb(139, 3, 39)'></div>
+                <div class='gridItem' style='grid-area: 28 / 9; background-color: rgb(223, 187, 114)'></div>
+                <div class='gridItem' style='grid-area: 28 / 10; background-color: rgb(237, 138, 56)'></div>
+                <div class='gridItem' style='grid-area: 29 / 1; background-color: rgb(71, 239, 143)'></div>
+                <div class='gridItem' style='grid-area: 29 / 2; background-color: rgb(164, 187, 158)'></div>
+                <div class='gridItem' style='grid-area: 29 / 3; background-color: rgb(250, 145, 157)'></div>
+                <div class='gridItem' style='grid-area: 29 / 4; background-color: rgb(214, 172, 72)'></div>
+                <div class='gridItem' style='grid-area: 29 / 5; background-color: rgb(210, 17, 16)'></div>
+                <div class='gridItem' style='grid-area: 29 / 6; background-color: rgb(149, 53, 200)'></div>
+                <div class='gridItem' style='grid-area: 29 / 7; background-color: rgb(174, 119, 143)'></div>
+                <div class='gridItem' style='grid-area: 29 / 8; background-color: rgb(22, 243, 58)'></div>
+                <div class='gridItem' style='grid-area: 29 / 9; background-color: rgb(11, 243, 75)'></div>
+                <div class='gridItem' style='grid-area: 29 / 10; background-color: rgb(65, 165, 44)'></div>
+                <div class='gridItem' style='grid-area: 30 / 1; background-color: rgb(223, 94, 134)'></div>
+                <div class='gridItem' style='grid-area: 30 / 2; background-color: rgb(106, 182, 172)'></div>
+                <div class='gridItem' style='grid-area: 30 / 3; background-color: rgb(85, 121, 55)'></div>
+                <div class='gridItem' style='grid-area: 30 / 4; background-color: rgb(199, 150, 177)'></div>
+                <div class='gridItem' style='grid-area: 30 / 5; background-color: rgb(116, 134, 24)'></div>
+                <div class='gridItem' style='grid-area: 30 / 6; background-color: rgb(91, 7, 75)'></div>
+                <div class='gridItem' style='grid-area: 30 / 7; background-color: rgb(51, 217, 135)'></div>
+                <div class='gridItem' style='grid-area: 30 / 8; background-color: rgb(161, 160, 184)'></div>
+                <div class='gridItem' style='grid-area: 30 / 9; background-color: rgb(130, 159, 7)'></div>
+                <div class='gridItem' style='grid-area: 30 / 10; background-color: rgb(21, 26, 168)'></div>
+            </div>
+        </div>
+    </div>
+    <pre id="log"></pre>
+</body>
index c0cd450..c099522 100644 (file)
@@ -1,3 +1,27 @@
+2016-09-19  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-grid] Remove the x2 computation of row sizes with indefinite heights
+        https://bugs.webkit.org/show_bug.cgi?id=162150
+
+        Reviewed by Darin Adler.
+
+        On r192154, among other things, we added a second pass of the track sizing algorithm for
+        rows in order to properly compute row sizes when the height was indefinite. We did that in
+        order to have a symmetrical implementation for columns and rows, but unfortunatelly that was
+        not correct.
+
+        Apart from issuing incorrect results in some cases it created a huge performance issue in
+        the case of having nested grids because we were exponentially increasing the amount of
+        executions of the track sizing algorithm. The attached performance test shows a 200%
+        improvement with the patch (26 vs 80 runs/s).
+
+        Test: fast/css-grid-layout/nested-grid.html
+
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::layoutBlock):
+        (WebCore::RenderGrid::computeIntrinsicLogicalHeight):
+        (WebCore::RenderGrid::layoutGridItems):
+
 2016-09-22  Youenn Fablet  <youenn@apple.com>
 
         Improve DeferredWrapper code
index 057e4b5..9a22b0e 100644 (file)
@@ -462,7 +462,6 @@ void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
 
     setLogicalHeight(0);
     updateLogicalWidth();
-    bool logicalHeightWasIndefinite = !computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt);
 
     placeItemsOnGrid(TrackSizing);
 
@@ -475,7 +474,10 @@ void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
     LayoutUnit availableSpaceForColumns = availableLogicalWidth();
     computeTrackSizesForDirection(ForColumns, sizingData, availableSpaceForColumns);
 
-    if (logicalHeightWasIndefinite)
+    // FIXME: We should use RenderBlock::hasDefiniteLogicalHeight() but it does not work for positioned stuff.
+    // FIXME: Consider caching the hasDefiniteLogicalHeight value throughout the layout.
+    bool hasDefiniteLogicalHeight = hasOverrideLogicalContentHeight() || computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt);
+    if (!hasDefiniteLogicalHeight)
         computeIntrinsicLogicalHeight(sizingData);
     else
         computeTrackSizesForDirection(ForRows, sizingData, availableLogicalHeight(ExcludeMarginBorderPadding));
@@ -484,16 +486,10 @@ void RenderGrid::layoutBlock(bool relayoutChildren, LayoutUnit)
     LayoutUnit oldClientAfterEdge = clientLogicalBottom();
     updateLogicalHeight();
 
-    // The above call might have changed the grid's logical height depending on min|max height restrictions.
-    // Update the sizes of the rows whose size depends on the logical height (also on definite|indefinite sizes).
-    LayoutUnit availableSpaceForRows = contentLogicalHeight();
-    if (logicalHeightWasIndefinite)
-        computeTrackSizesForDirection(ForRows, sizingData, availableSpaceForRows);
-
     // 3- If the min-content contribution of any grid items have changed based on the row
     // sizes calculated in step 2, steps 1 and 2 are repeated with the new min-content
     // contribution (once only).
-    repeatTracksSizingIfNeeded(sizingData, availableSpaceForColumns, availableSpaceForRows);
+    repeatTracksSizingIfNeeded(sizingData, availableSpaceForColumns, contentLogicalHeight());
 
     // Grid container should have the minimum height of a line if it's editable. That does not affect track sizing though.
     if (hasLineIfEmpty()) {
@@ -633,6 +629,7 @@ void RenderGrid::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, Layo
 
 void RenderGrid::computeIntrinsicLogicalHeight(GridSizingData& sizingData)
 {
+    ASSERT(sizingData.isValidTransition(ForRows));
     ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData));
     sizingData.setAvailableSpace(Nullopt);
     sizingData.setFreeSpace(ForRows, Nullopt);
@@ -654,6 +651,8 @@ void RenderGrid::computeIntrinsicLogicalHeight(GridSizingData& sizingData)
     m_maxContentHeight = maxHeight;
 
     ASSERT(tracksAreWiderThanMinTrackBreadth(ForRows, sizingData));
+    sizingData.advanceNextState();
+    sizingData.sizingOperation = TrackSizing;
 }
 
 Optional<LayoutUnit> RenderGrid::computeIntrinsicLogicalContentHeightUsing(Length logicalHeightLength, Optional<LayoutUnit> intrinsicLogicalHeight, LayoutUnit borderAndPadding) const
@@ -1888,6 +1887,7 @@ void RenderGrid::applyStretchAlignmentToTracksIfNeeded(GridTrackSizingDirection
 
 void RenderGrid::layoutGridItems(GridSizingData& sizingData)
 {
+    ASSERT(sizingData.sizingOperation == TrackSizing);
     populateGridPositionsForDirection(sizingData, ForColumns);
     populateGridPositionsForDirection(sizingData, ForRows);