[webkit-changes] [206253] trunk

svillar Thu, 22 Sep 2016 00:57:11 -0700

Title: [206253] trunk

Revision: 206253
Author: svil...@igalia.com
Date: 2016-09-22 00:57:32 -0700 (Thu, 22 Sep 2016)

Log Message

[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.

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.

Modified Paths

trunk/LayoutTests/ChangeLog
trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html
trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt
trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html
trunk/PerformanceTests/ChangeLog
trunk/Source/WebCore/ChangeLog
trunk/Source/WebCore/rendering/RenderGrid.cpp

Added Paths

trunk/LayoutTests/fast/css-grid-layout/nested-grid-expected.html
trunk/LayoutTests/fast/css-grid-layout/nested-grid.html
trunk/PerformanceTests/Layout/nested-grid.html

Diff

Modified: trunk/LayoutTests/ChangeLog (206252 => 206253)


--- trunk/LayoutTests/ChangeLog	2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/LayoutTests/ChangeLog	2016-09-22 07:57:32 UTC (rev 206253)
@@ -1,3 +1,23 @@
+2016-09-19  Sergio Villar Senin  <svil...@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_...@apple.com>
 
         Unreviewed, update ios-simulator-wk1 test expectations

Modified: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html (206252 => 206253)


--- trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html	2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html	2016-09-22 07:57:32 UTC (rev 206253)
@@ -54,15 +54,15 @@
 </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">
@@ -132,11 +132,11 @@
 </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">
@@ -150,11 +150,11 @@
 </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">
@@ -162,11 +162,11 @@
 </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>
@@ -209,7 +209,7 @@
 	<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>
@@ -230,7 +230,7 @@
 	<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>
@@ -239,22 +239,22 @@
 
 <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>

Added: trunk/LayoutTests/fast/css-grid-layout/nested-grid-expected.html (0 => 206253)


--- trunk/LayoutTests/fast/css-grid-layout/nested-grid-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/nested-grid-expected.html	2016-09-22 07:57:32 UTC (rev 206253)
@@ -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>
Property changes on: trunk/LayoutTests/fast/css-grid-layout/nested-grid-expected.html
___________________________________________________________________

Added: svn:eol-style

+LF \ No newline at end of property

Added: svn:mime-type

+text/html \ No newline at end of property

Added: trunk/LayoutTests/fast/css-grid-layout/nested-grid.html (0 => 206253)


--- trunk/LayoutTests/fast/css-grid-layout/nested-grid.html	                        (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/nested-grid.html	2016-09-22 07:57:32 UTC (rev 206253)
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<link href="" rel="stylesheet">
+<link href="" 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>
Property changes on: trunk/LayoutTests/fast/css-grid-layout/nested-grid.html
___________________________________________________________________

Added: svn:eol-style

+LF \ No newline at end of property

Added: svn:mime-type

+text/html \ No newline at end of property

Modified: trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt (206252 => 206253)


--- trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt	2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt	2016-09-22 07:57:32 UTC (rev 206253)
@@ -35,29 +35,11 @@
 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

Modified: trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html (206252 => 206253)


--- trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html	2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html	2016-09-22 07:57:32 UTC (rev 206253)
@@ -119,9 +119,6 @@
         </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>

Modified: trunk/PerformanceTests/ChangeLog (206252 => 206253)


--- trunk/PerformanceTests/ChangeLog	2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/PerformanceTests/ChangeLog	2016-09-22 07:57:32 UTC (rev 206253)
@@ -1,3 +1,15 @@
+2016-09-19  Sergio Villar Senin  <svil...@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.fra...@apple.com>
 
         Perf test Animation/css-accelerated-animation.html failing

Added: trunk/PerformanceTests/Layout/nested-grid.html (0 => 206253)


--- trunk/PerformanceTests/Layout/nested-grid.html	                        (rev 0)
+++ trunk/PerformanceTests/Layout/nested-grid.html	2016-09-22 07:57:32 UTC (rev 206253)
@@ -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=""
+<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>
Property changes on: trunk/PerformanceTests/Layout/nested-grid.html
___________________________________________________________________

Added: svn:eol-style

+LF \ No newline at end of property

Added: svn:mime-type

+text/html \ No newline at end of property

Modified: trunk/Source/WebCore/ChangeLog (206252 => 206253)


--- trunk/Source/WebCore/ChangeLog	2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/Source/WebCore/ChangeLog	2016-09-22 07:57:32 UTC (rev 206253)
@@ -1,3 +1,27 @@
+2016-09-19  Sergio Villar Senin  <svil...@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  <you...@apple.com>
 
         Improve DeferredWrapper code

Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (206252 => 206253)


--- trunk/Source/WebCore/rendering/RenderGrid.cpp	2016-09-22 07:35:46 UTC (rev 206252)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp	2016-09-22 07:57:32 UTC (rev 206253)
@@ -462,7 +462,6 @@
 
     setLogicalHeight(0);
     updateLogicalWidth();
-    bool logicalHeightWasIndefinite = !computeContentLogicalHeight(MainOrPreferredSize, style().logicalHeight(), Nullopt);
 
     placeItemsOnGrid(TrackSizing);
 
@@ -475,7 +474,10 @@
     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 @@
     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::computeIntrinsicLogicalHeight(GridSizingData& sizingData)
 {
+    ASSERT(sizingData.isValidTransition(ForRows));
     ASSERT(tracksAreWiderThanMinTrackBreadth(ForColumns, sizingData));
     sizingData.setAvailableSpace(Nullopt);
     sizingData.setFreeSpace(ForRows, Nullopt);
@@ -654,6 +651,8 @@
     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::layoutGridItems(GridSizingData& sizingData)
 {
+    ASSERT(sizingData.sizingOperation == TrackSizing);
     populateGridPositionsForDirection(sizingData, ForColumns);
     populateGridPositionsForDirection(sizingData, ForRows);

_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

[webkit-changes] [206253] trunk

Log Message

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (206252 => 206253)

Modified: trunk/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html (206252 => 206253)

Added: trunk/LayoutTests/fast/css-grid-layout/nested-grid-expected.html (0 => 206253)

Added: svn:eol-style

Added: svn:mime-type

Added: trunk/LayoutTests/fast/css-grid-layout/nested-grid.html (0 => 206253)

Added: svn:eol-style

Added: svn:mime-type

Modified: trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size-expected.txt (206252 => 206253)

Modified: trunk/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html (206252 => 206253)

Modified: trunk/PerformanceTests/ChangeLog (206252 => 206253)

Added: trunk/PerformanceTests/Layout/nested-grid.html (0 => 206253)

Added: svn:eol-style

Added: svn:mime-type

Modified: trunk/Source/WebCore/ChangeLog (206252 => 206253)

Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (206252 => 206253)

Reply via email to