Refactoring: Pull all fullscreen code out of Document and into its own helper class
[WebKit-https.git] / PerformanceTests / Layout / nested-grid.html
1 <!DOCTYPE html>
2 <head>
3 <style>
4 html, body {
5     margin: 0;
6     height: 100%;
7 }
8
9 .grid { display: grid; }
10 .gridItem { height: 10px; }
11 #gridContainer { grid-auto-columns: 1fr; }
12 </style>
13
14 <script src="../resources/runner.js"></script>
15 <script>
16 'use strict';
17
18 function startTest() {
19      document.body.offsetHeight;
20
21      var index = 0;
22      PerfTestRunner.measureRunsPerSecond({
23          description: "Measures performance of layout on a page using nested grids.",
24          run: function() {
25              var wrap = document.getElementById("wrap");
26              wrap.style.width = ++index % 2 ? "99%" : "90%";
27              document.body.offsetHeight;
28          }
29      });
30 }
31 </script>
32 </head>
33
34 <body onload="startTest()">
35     <div id="wrap" class="grid">
36         <div class="grid">
37             <div class="grid" id="gridContainer">
38                 <div class='gridItem' style='grid-area: 1 / 1; background-color: rgb(36, 100, 135)'></div>
39                 <div class='gridItem' style='grid-area: 1 / 2; background-color: rgb(41, 156, 157)'></div>
40                 <div class='gridItem' style='grid-area: 1 / 3; background-color: rgb(204, 225, 15)'></div>
41                 <div class='gridItem' style='grid-area: 1 / 4; background-color: rgb(106, 245, 133)'></div>
42                 <div class='gridItem' style='grid-area: 1 / 5; background-color: rgb(159, 213, 189)'></div>
43                 <div class='gridItem' style='grid-area: 1 / 6; background-color: rgb(39, 38, 236)'></div>
44                 <div class='gridItem' style='grid-area: 1 / 7; background-color: rgb(234, 102, 236)'></div>
45                 <div class='gridItem' style='grid-area: 1 / 8; background-color: rgb(239, 166, 146)'></div>
46                 <div class='gridItem' style='grid-area: 1 / 9; background-color: rgb(29, 202, 217)'></div>
47                 <div class='gridItem' style='grid-area: 1 / 10; background-color: rgb(170, 182, 228)'></div>
48                 <div class='gridItem' style='grid-area: 2 / 1; background-color: rgb(142, 26, 226)'></div>
49                 <div class='gridItem' style='grid-area: 2 / 2; background-color: rgb(140, 195, 5)'></div>
50                 <div class='gridItem' style='grid-area: 2 / 3; background-color: rgb(122, 86, 33)'></div>
51                 <div class='gridItem' style='grid-area: 2 / 4; background-color: rgb(242, 247, 24)'></div>
52                 <div class='gridItem' style='grid-area: 2 / 5; background-color: rgb(13, 102, 180)'></div>
53                 <div class='gridItem' style='grid-area: 2 / 6; background-color: rgb(5, 234, 62)'></div>
54                 <div class='gridItem' style='grid-area: 2 / 7; background-color: rgb(78, 29, 58)'></div>
55                 <div class='gridItem' style='grid-area: 2 / 8; background-color: rgb(185, 50, 52)'></div>
56                 <div class='gridItem' style='grid-area: 2 / 9; background-color: rgb(217, 213, 222)'></div>
57                 <div class='gridItem' style='grid-area: 2 / 10; background-color: rgb(14, 236, 144)'></div>
58                 <div class='gridItem' style='grid-area: 3 / 1; background-color: rgb(28, 15, 98)'></div>
59                 <div class='gridItem' style='grid-area: 3 / 2; background-color: rgb(31, 124, 15)'></div>
60                 <div class='gridItem' style='grid-area: 3 / 3; background-color: rgb(160, 116, 86)'></div>
61                 <div class='gridItem' style='grid-area: 3 / 4; background-color: rgb(22, 14, 76)'></div>
62                 <div class='gridItem' style='grid-area: 3 / 5; background-color: rgb(199, 51, 155)'></div>
63                 <div class='gridItem' style='grid-area: 3 / 6; background-color: rgb(195, 254, 137)'></div>
64                 <div class='gridItem' style='grid-area: 3 / 7; background-color: rgb(109, 253, 46)'></div>
65                 <div class='gridItem' style='grid-area: 3 / 8; background-color: rgb(20, 27, 48)'></div>
66                 <div class='gridItem' style='grid-area: 3 / 9; background-color: rgb(79, 234, 49)'></div>
67                 <div class='gridItem' style='grid-area: 3 / 10; background-color: rgb(230, 193, 12)'></div>
68                 <div class='gridItem' style='grid-area: 4 / 1; background-color: rgb(194, 85, 115)'></div>
69                 <div class='gridItem' style='grid-area: 4 / 2; background-color: rgb(10, 219, 54)'></div>
70                 <div class='gridItem' style='grid-area: 4 / 3; background-color: rgb(179, 20, 40)'></div>
71                 <div class='gridItem' style='grid-area: 4 / 4; background-color: rgb(164, 105, 181)'></div>
72                 <div class='gridItem' style='grid-area: 4 / 5; background-color: rgb(30, 82, 234)'></div>
73                 <div class='gridItem' style='grid-area: 4 / 6; background-color: rgb(39, 120, 44)'></div>
74                 <div class='gridItem' style='grid-area: 4 / 7; background-color: rgb(124, 235, 123)'></div>
75                 <div class='gridItem' style='grid-area: 4 / 8; background-color: rgb(131, 27, 68)'></div>
76                 <div class='gridItem' style='grid-area: 4 / 9; background-color: rgb(13, 80, 129)'></div>
77                 <div class='gridItem' style='grid-area: 4 / 10; background-color: rgb(0, 215, 125)'></div>
78                 <div class='gridItem' style='grid-area: 5 / 1; background-color: rgb(201, 139, 254)'></div>
79                 <div class='gridItem' style='grid-area: 5 / 2; background-color: rgb(176, 66, 242)'></div>
80                 <div class='gridItem' style='grid-area: 5 / 3; background-color: rgb(82, 19, 194)'></div>
81                 <div class='gridItem' style='grid-area: 5 / 4; background-color: rgb(3, 244, 246)'></div>
82                 <div class='gridItem' style='grid-area: 5 / 5; background-color: rgb(197, 243, 66)'></div>
83                 <div class='gridItem' style='grid-area: 5 / 6; background-color: rgb(146, 136, 91)'></div>
84                 <div class='gridItem' style='grid-area: 5 / 7; background-color: rgb(181, 119, 137)'></div>
85                 <div class='gridItem' style='grid-area: 5 / 8; background-color: rgb(128, 156, 9)'></div>
86                 <div class='gridItem' style='grid-area: 5 / 9; background-color: rgb(100, 148, 110)'></div>
87                 <div class='gridItem' style='grid-area: 5 / 10; background-color: rgb(61, 150, 231)'></div>
88                 <div class='gridItem' style='grid-area: 6 / 1; background-color: rgb(189, 231, 192)'></div>
89                 <div class='gridItem' style='grid-area: 6 / 2; background-color: rgb(202, 127, 122)'></div>
90                 <div class='gridItem' style='grid-area: 6 / 3; background-color: rgb(86, 152, 130)'></div>
91                 <div class='gridItem' style='grid-area: 6 / 4; background-color: rgb(128, 111, 255)'></div>
92                 <div class='gridItem' style='grid-area: 6 / 5; background-color: rgb(112, 214, 196)'></div>
93                 <div class='gridItem' style='grid-area: 6 / 6; background-color: rgb(26, 185, 21)'></div>
94                 <div class='gridItem' style='grid-area: 6 / 7; background-color: rgb(138, 121, 184)'></div>
95                 <div class='gridItem' style='grid-area: 6 / 8; background-color: rgb(86, 25, 98)'></div>
96                 <div class='gridItem' style='grid-area: 6 / 9; background-color: rgb(236, 218, 194)'></div>
97                 <div class='gridItem' style='grid-area: 6 / 10; background-color: rgb(226, 69, 125)'></div>
98                 <div class='gridItem' style='grid-area: 7 / 1; background-color: rgb(46, 129, 223)'></div>
99                 <div class='gridItem' style='grid-area: 7 / 2; background-color: rgb(96, 33, 177)'></div>
100                 <div class='gridItem' style='grid-area: 7 / 3; background-color: rgb(205, 196, 118)'></div>
101                 <div class='gridItem' style='grid-area: 7 / 4; background-color: rgb(253, 197, 216)'></div>
102                 <div class='gridItem' style='grid-area: 7 / 5; background-color: rgb(244, 123, 146)'></div>
103                 <div class='gridItem' style='grid-area: 7 / 6; background-color: rgb(177, 188, 204)'></div>
104                 <div class='gridItem' style='grid-area: 7 / 7; background-color: rgb(89, 224, 203)'></div>
105                 <div class='gridItem' style='grid-area: 7 / 8; background-color: rgb(187, 211, 108)'></div>
106                 <div class='gridItem' style='grid-area: 7 / 9; background-color: rgb(156, 222, 180)'></div>
107                 <div class='gridItem' style='grid-area: 7 / 10; background-color: rgb(178, 87, 127)'></div>
108                 <div class='gridItem' style='grid-area: 8 / 1; background-color: rgb(240, 103, 63)'></div>
109                 <div class='gridItem' style='grid-area: 8 / 2; background-color: rgb(80, 100, 134)'></div>
110                 <div class='gridItem' style='grid-area: 8 / 3; background-color: rgb(76, 192, 127)'></div>
111                 <div class='gridItem' style='grid-area: 8 / 4; background-color: rgb(238, 31, 229)'></div>
112                 <div class='gridItem' style='grid-area: 8 / 5; background-color: rgb(34, 49, 156)'></div>
113                 <div class='gridItem' style='grid-area: 8 / 6; background-color: rgb(6, 31, 100)'></div>
114                 <div class='gridItem' style='grid-area: 8 / 7; background-color: rgb(2, 3, 38)'></div>
115                 <div class='gridItem' style='grid-area: 8 / 8; background-color: rgb(198, 165, 46)'></div>
116                 <div class='gridItem' style='grid-area: 8 / 9; background-color: rgb(191, 147, 159)'></div>
117                 <div class='gridItem' style='grid-area: 8 / 10; background-color: rgb(243, 96, 21)'></div>
118                 <div class='gridItem' style='grid-area: 9 / 1; background-color: rgb(251, 125, 248)'></div>
119                 <div class='gridItem' style='grid-area: 9 / 2; background-color: rgb(174, 162, 137)'></div>
120                 <div class='gridItem' style='grid-area: 9 / 3; background-color: rgb(254, 178, 9)'></div>
121                 <div class='gridItem' style='grid-area: 9 / 4; background-color: rgb(105, 11, 18)'></div>
122                 <div class='gridItem' style='grid-area: 9 / 5; background-color: rgb(137, 159, 231)'></div>
123                 <div class='gridItem' style='grid-area: 9 / 6; background-color: rgb(233, 167, 52)'></div>
124                 <div class='gridItem' style='grid-area: 9 / 7; background-color: rgb(133, 16, 144)'></div>
125                 <div class='gridItem' style='grid-area: 9 / 8; background-color: rgb(152, 154, 36)'></div>
126                 <div class='gridItem' style='grid-area: 9 / 9; background-color: rgb(18, 174, 89)'></div>
127                 <div class='gridItem' style='grid-area: 9 / 10; background-color: rgb(83, 40, 80)'></div>
128                 <div class='gridItem' style='grid-area: 10 / 1; background-color: rgb(166, 225, 190)'></div>
129                 <div class='gridItem' style='grid-area: 10 / 2; background-color: rgb(43, 251, 27)'></div>
130                 <div class='gridItem' style='grid-area: 10 / 3; background-color: rgb(138, 82, 236)'></div>
131                 <div class='gridItem' style='grid-area: 10 / 4; background-color: rgb(133, 27, 45)'></div>
132                 <div class='gridItem' style='grid-area: 10 / 5; background-color: rgb(152, 52, 169)'></div>
133                 <div class='gridItem' style='grid-area: 10 / 6; background-color: rgb(55, 36, 0)'></div>
134                 <div class='gridItem' style='grid-area: 10 / 7; background-color: rgb(74, 125, 195)'></div>
135                 <div class='gridItem' style='grid-area: 10 / 8; background-color: rgb(203, 84, 103)'></div>
136                 <div class='gridItem' style='grid-area: 10 / 9; background-color: rgb(16, 104, 62)'></div>
137                 <div class='gridItem' style='grid-area: 10 / 10; background-color: rgb(119, 219, 124)'></div>
138                 <div class='gridItem' style='grid-area: 11 / 1; background-color: rgb(144, 204, 119)'></div>
139                 <div class='gridItem' style='grid-area: 11 / 2; background-color: rgb(35, 147, 180)'></div>
140                 <div class='gridItem' style='grid-area: 11 / 3; background-color: rgb(53, 83, 191)'></div>
141                 <div class='gridItem' style='grid-area: 11 / 4; background-color: rgb(104, 182, 76)'></div>
142                 <div class='gridItem' style='grid-area: 11 / 5; background-color: rgb(158, 11, 85)'></div>
143                 <div class='gridItem' style='grid-area: 11 / 6; background-color: rgb(67, 101, 53)'></div>
144                 <div class='gridItem' style='grid-area: 11 / 7; background-color: rgb(4, 123, 0)'></div>
145                 <div class='gridItem' style='grid-area: 11 / 8; background-color: rgb(80, 177, 30)'></div>
146                 <div class='gridItem' style='grid-area: 11 / 9; background-color: rgb(45, 111, 243)'></div>
147                 <div class='gridItem' style='grid-area: 11 / 10; background-color: rgb(8, 164, 245)'></div>
148                 <div class='gridItem' style='grid-area: 12 / 1; background-color: rgb(48, 126, 34)'></div>
149                 <div class='gridItem' style='grid-area: 12 / 2; background-color: rgb(21, 35, 187)'></div>
150                 <div class='gridItem' style='grid-area: 12 / 3; background-color: rgb(150, 220, 226)'></div>
151                 <div class='gridItem' style='grid-area: 12 / 4; background-color: rgb(64, 107, 119)'></div>
152                 <div class='gridItem' style='grid-area: 12 / 5; background-color: rgb(112, 109, 8)'></div>
153                 <div class='gridItem' style='grid-area: 12 / 6; background-color: rgb(204, 16, 188)'></div>
154                 <div class='gridItem' style='grid-area: 12 / 7; background-color: rgb(206, 119, 225)'></div>
155                 <div class='gridItem' style='grid-area: 12 / 8; background-color: rgb(132, 200, 107)'></div>
156                 <div class='gridItem' style='grid-area: 12 / 9; background-color: rgb(88, 124, 39)'></div>
157                 <div class='gridItem' style='grid-area: 12 / 10; background-color: rgb(190, 221, 212)'></div>
158                 <div class='gridItem' style='grid-area: 13 / 1; background-color: rgb(37, 110, 70)'></div>
159                 <div class='gridItem' style='grid-area: 13 / 2; background-color: rgb(158, 184, 122)'></div>
160                 <div class='gridItem' style='grid-area: 13 / 3; background-color: rgb(131, 50, 156)'></div>
161                 <div class='gridItem' style='grid-area: 13 / 4; background-color: rgb(198, 184, 72)'></div>
162                 <div class='gridItem' style='grid-area: 13 / 5; background-color: rgb(163, 59, 1)'></div>
163                 <div class='gridItem' style='grid-area: 13 / 6; background-color: rgb(25, 239, 11)'></div>
164                 <div class='gridItem' style='grid-area: 13 / 7; background-color: rgb(35, 157, 205)'></div>
165                 <div class='gridItem' style='grid-area: 13 / 8; background-color: rgb(130, 236, 218)'></div>
166                 <div class='gridItem' style='grid-area: 13 / 9; background-color: rgb(37, 66, 27)'></div>
167                 <div class='gridItem' style='grid-area: 13 / 10; background-color: rgb(116, 156, 157)'></div>
168                 <div class='gridItem' style='grid-area: 14 / 1; background-color: rgb(6, 113, 161)'></div>
169                 <div class='gridItem' style='grid-area: 14 / 2; background-color: rgb(221, 125, 237)'></div>
170                 <div class='gridItem' style='grid-area: 14 / 3; background-color: rgb(119, 153, 90)'></div>
171                 <div class='gridItem' style='grid-area: 14 / 4; background-color: rgb(122, 227, 53)'></div>
172                 <div class='gridItem' style='grid-area: 14 / 5; background-color: rgb(110, 4, 57)'></div>
173                 <div class='gridItem' style='grid-area: 14 / 6; background-color: rgb(149, 160, 85)'></div>
174                 <div class='gridItem' style='grid-area: 14 / 7; background-color: rgb(26, 3, 213)'></div>
175                 <div class='gridItem' style='grid-area: 14 / 8; background-color: rgb(68, 56, 197)'></div>
176                 <div class='gridItem' style='grid-area: 14 / 9; background-color: rgb(226, 80, 7)'></div>
177                 <div class='gridItem' style='grid-area: 14 / 10; background-color: rgb(225, 107, 232)'></div>
178                 <div class='gridItem' style='grid-area: 15 / 1; background-color: rgb(59, 215, 249)'></div>
179                 <div class='gridItem' style='grid-area: 15 / 2; background-color: rgb(183, 116, 39)'></div>
180                 <div class='gridItem' style='grid-area: 15 / 3; background-color: rgb(64, 71, 212)'></div>
181                 <div class='gridItem' style='grid-area: 15 / 4; background-color: rgb(154, 198, 45)'></div>
182                 <div class='gridItem' style='grid-area: 15 / 5; background-color: rgb(132, 57, 196)'></div>
183                 <div class='gridItem' style='grid-area: 15 / 6; background-color: rgb(62, 211, 119)'></div>
184                 <div class='gridItem' style='grid-area: 15 / 7; background-color: rgb(246, 246, 170)'></div>
185                 <div class='gridItem' style='grid-area: 15 / 8; background-color: rgb(31, 220, 11)'></div>
186                 <div class='gridItem' style='grid-area: 15 / 9; background-color: rgb(192, 219, 54)'></div>
187                 <div class='gridItem' style='grid-area: 15 / 10; background-color: rgb(83, 247, 136)'></div>
188                 <div class='gridItem' style='grid-area: 16 / 1; background-color: rgb(239, 205, 20)'></div>
189                 <div class='gridItem' style='grid-area: 16 / 2; background-color: rgb(15, 218, 101)'></div>
190                 <div class='gridItem' style='grid-area: 16 / 3; background-color: rgb(253, 121, 123)'></div>
191                 <div class='gridItem' style='grid-area: 16 / 4; background-color: rgb(22, 85, 89)'></div>
192                 <div class='gridItem' style='grid-area: 16 / 5; background-color: rgb(189, 232, 192)'></div>
193                 <div class='gridItem' style='grid-area: 16 / 6; background-color: rgb(235, 232, 222)'></div>
194                 <div class='gridItem' style='grid-area: 16 / 7; background-color: rgb(15, 163, 54)'></div>
195                 <div class='gridItem' style='grid-area: 16 / 8; background-color: rgb(106, 104, 76)'></div>
196                 <div class='gridItem' style='grid-area: 16 / 9; background-color: rgb(41, 248, 99)'></div>
197                 <div class='gridItem' style='grid-area: 16 / 10; background-color: rgb(251, 48, 136)'></div>
198                 <div class='gridItem' style='grid-area: 17 / 1; background-color: rgb(233, 21, 76)'></div>
199                 <div class='gridItem' style='grid-area: 17 / 2; background-color: rgb(88, 8, 213)'></div>
200                 <div class='gridItem' style='grid-area: 17 / 3; background-color: rgb(95, 192, 94)'></div>
201                 <div class='gridItem' style='grid-area: 17 / 4; background-color: rgb(213, 70, 118)'></div>
202                 <div class='gridItem' style='grid-area: 17 / 5; background-color: rgb(229, 132, 167)'></div>
203                 <div class='gridItem' style='grid-area: 17 / 6; background-color: rgb(134, 45, 58)'></div>
204                 <div class='gridItem' style='grid-area: 17 / 7; background-color: rgb(182, 184, 82)'></div>
205                 <div class='gridItem' style='grid-area: 17 / 8; background-color: rgb(52, 41, 157)'></div>
206                 <div class='gridItem' style='grid-area: 17 / 9; background-color: rgb(14, 7, 246)'></div>
207                 <div class='gridItem' style='grid-area: 17 / 10; background-color: rgb(25, 234, 105)'></div>
208                 <div class='gridItem' style='grid-area: 18 / 1; background-color: rgb(58, 91, 104)'></div>
209                 <div class='gridItem' style='grid-area: 18 / 2; background-color: rgb(191, 150, 115)'></div>
210                 <div class='gridItem' style='grid-area: 18 / 3; background-color: rgb(137, 235, 204)'></div>
211                 <div class='gridItem' style='grid-area: 18 / 4; background-color: rgb(128, 160, 238)'></div>
212                 <div class='gridItem' style='grid-area: 18 / 5; background-color: rgb(219, 229, 251)'></div>
213                 <div class='gridItem' style='grid-area: 18 / 6; background-color: rgb(171, 136, 44)'></div>
214                 <div class='gridItem' style='grid-area: 18 / 7; background-color: rgb(233, 86, 121)'></div>
215                 <div class='gridItem' style='grid-area: 18 / 8; background-color: rgb(139, 99, 128)'></div>
216                 <div class='gridItem' style='grid-area: 18 / 9; background-color: rgb(12, 214, 126)'></div>
217                 <div class='gridItem' style='grid-area: 18 / 10; background-color: rgb(118, 27, 21)'></div>
218                 <div class='gridItem' style='grid-area: 19 / 1; background-color: rgb(89, 50, 217)'></div>
219                 <div class='gridItem' style='grid-area: 19 / 2; background-color: rgb(17, 112, 89)'></div>
220                 <div class='gridItem' style='grid-area: 19 / 3; background-color: rgb(206, 62, 196)'></div>
221                 <div class='gridItem' style='grid-area: 19 / 4; background-color: rgb(44, 195, 252)'></div>
222                 <div class='gridItem' style='grid-area: 19 / 5; background-color: rgb(152, 18, 133)'></div>
223                 <div class='gridItem' style='grid-area: 19 / 6; background-color: rgb(140, 176, 222)'></div>
224                 <div class='gridItem' style='grid-area: 19 / 7; background-color: rgb(79, 252, 183)'></div>
225                 <div class='gridItem' style='grid-area: 19 / 8; background-color: rgb(226, 117, 120)'></div>
226                 <div class='gridItem' style='grid-area: 19 / 9; background-color: rgb(132, 187, 210)'></div>
227                 <div class='gridItem' style='grid-area: 19 / 10; background-color: rgb(109, 82, 44)'></div>
228                 <div class='gridItem' style='grid-area: 20 / 1; background-color: rgb(27, 61, 17)'></div>
229                 <div class='gridItem' style='grid-area: 20 / 2; background-color: rgb(52, 128, 161)'></div>
230                 <div class='gridItem' style='grid-area: 20 / 3; background-color: rgb(243, 50, 187)'></div>
231                 <div class='gridItem' style='grid-area: 20 / 4; background-color: rgb(139, 108, 157)'></div>
232                 <div class='gridItem' style='grid-area: 20 / 5; background-color: rgb(237, 111, 157)'></div>
233                 <div class='gridItem' style='grid-area: 20 / 6; background-color: rgb(41, 220, 130)'></div>
234                 <div class='gridItem' style='grid-area: 20 / 7; background-color: rgb(73, 253, 239)'></div>
235                 <div class='gridItem' style='grid-area: 20 / 8; background-color: rgb(22, 136, 50)'></div>
236                 <div class='gridItem' style='grid-area: 20 / 9; background-color: rgb(215, 136, 15)'></div>
237                 <div class='gridItem' style='grid-area: 20 / 10; background-color: rgb(1, 161, 103)'></div>
238                 <div class='gridItem' style='grid-area: 21 / 1; background-color: rgb(89, 218, 223)'></div>
239                 <div class='gridItem' style='grid-area: 21 / 2; background-color: rgb(42, 37, 205)'></div>
240                 <div class='gridItem' style='grid-area: 21 / 3; background-color: rgb(82, 186, 133)'></div>
241                 <div class='gridItem' style='grid-area: 21 / 4; background-color: rgb(165, 86, 40)'></div>
242                 <div class='gridItem' style='grid-area: 21 / 5; background-color: rgb(174, 126, 88)'></div>
243                 <div class='gridItem' style='grid-area: 21 / 6; background-color: rgb(203, 238, 145)'></div>
244                 <div class='gridItem' style='grid-area: 21 / 7; background-color: rgb(47, 213, 233)'></div>
245                 <div class='gridItem' style='grid-area: 21 / 8; background-color: rgb(9, 117, 173)'></div>
246                 <div class='gridItem' style='grid-area: 21 / 9; background-color: rgb(86, 84, 18)'></div>
247                 <div class='gridItem' style='grid-area: 21 / 10; background-color: rgb(78, 34, 85)'></div>
248                 <div class='gridItem' style='grid-area: 22 / 1; background-color: rgb(23, 21, 111)'></div>
249                 <div class='gridItem' style='grid-area: 22 / 2; background-color: rgb(90, 100, 123)'></div>
250                 <div class='gridItem' style='grid-area: 22 / 3; background-color: rgb(161, 7, 120)'></div>
251                 <div class='gridItem' style='grid-area: 22 / 4; background-color: rgb(25, 144, 0)'></div>
252                 <div class='gridItem' style='grid-area: 22 / 5; background-color: rgb(232, 184, 247)'></div>
253                 <div class='gridItem' style='grid-area: 22 / 6; background-color: rgb(98, 156, 47)'></div>
254                 <div class='gridItem' style='grid-area: 22 / 7; background-color: rgb(131, 123, 1)'></div>
255                 <div class='gridItem' style='grid-area: 22 / 8; background-color: rgb(62, 166, 200)'></div>
256                 <div class='gridItem' style='grid-area: 22 / 9; background-color: rgb(94, 49, 248)'></div>
257                 <div class='gridItem' style='grid-area: 22 / 10; background-color: rgb(187, 84, 35)'></div>
258                 <div class='gridItem' style='grid-area: 23 / 1; background-color: rgb(95, 87, 28)'></div>
259                 <div class='gridItem' style='grid-area: 23 / 2; background-color: rgb(3, 222, 23)'></div>
260                 <div class='gridItem' style='grid-area: 23 / 3; background-color: rgb(227, 108, 40)'></div>
261                 <div class='gridItem' style='grid-area: 23 / 4; background-color: rgb(16, 96, 197)'></div>
262                 <div class='gridItem' style='grid-area: 23 / 5; background-color: rgb(158, 189, 126)'></div>
263                 <div class='gridItem' style='grid-area: 23 / 6; background-color: rgb(36, 97, 108)'></div>
264                 <div class='gridItem' style='grid-area: 23 / 7; background-color: rgb(112, 144, 129)'></div>
265                 <div class='gridItem' style='grid-area: 23 / 8; background-color: rgb(49, 47, 177)'></div>
266                 <div class='gridItem' style='grid-area: 23 / 9; background-color: rgb(225, 182, 57)'></div>
267                 <div class='gridItem' style='grid-area: 23 / 10; background-color: rgb(228, 154, 166)'></div>
268                 <div class='gridItem' style='grid-area: 24 / 1; background-color: rgb(33, 123, 74)'></div>
269                 <div class='gridItem' style='grid-area: 24 / 2; background-color: rgb(90, 195, 5)'></div>
270                 <div class='gridItem' style='grid-area: 24 / 3; background-color: rgb(134, 243, 91)'></div>
271                 <div class='gridItem' style='grid-area: 24 / 4; background-color: rgb(213, 137, 30)'></div>
272                 <div class='gridItem' style='grid-area: 24 / 5; background-color: rgb(229, 122, 90)'></div>
273                 <div class='gridItem' style='grid-area: 24 / 6; background-color: rgb(37, 146, 112)'></div>
274                 <div class='gridItem' style='grid-area: 24 / 7; background-color: rgb(116, 228, 23)'></div>
275                 <div class='gridItem' style='grid-area: 24 / 8; background-color: rgb(161, 205, 147)'></div>
276                 <div class='gridItem' style='grid-area: 24 / 9; background-color: rgb(13, 122, 153)'></div>
277                 <div class='gridItem' style='grid-area: 24 / 10; background-color: rgb(81, 21, 84)'></div>
278                 <div class='gridItem' style='grid-area: 25 / 1; background-color: rgb(155, 70, 124)'></div>
279                 <div class='gridItem' style='grid-area: 25 / 2; background-color: rgb(160, 194, 239)'></div>
280                 <div class='gridItem' style='grid-area: 25 / 3; background-color: rgb(215, 51, 22)'></div>
281                 <div class='gridItem' style='grid-area: 25 / 4; background-color: rgb(169, 215, 206)'></div>
282                 <div class='gridItem' style='grid-area: 25 / 5; background-color: rgb(132, 145, 197)'></div>
283                 <div class='gridItem' style='grid-area: 25 / 6; background-color: rgb(227, 219, 8)'></div>
284                 <div class='gridItem' style='grid-area: 25 / 7; background-color: rgb(56, 92, 236)'></div>
285                 <div class='gridItem' style='grid-area: 25 / 8; background-color: rgb(199, 158, 71)'></div>
286                 <div class='gridItem' style='grid-area: 25 / 9; background-color: rgb(198, 56, 233)'></div>
287                 <div class='gridItem' style='grid-area: 25 / 10; background-color: rgb(218, 37, 33)'></div>
288                 <div class='gridItem' style='grid-area: 26 / 1; background-color: rgb(205, 49, 30)'></div>
289                 <div class='gridItem' style='grid-area: 26 / 2; background-color: rgb(131, 42, 3)'></div>
290                 <div class='gridItem' style='grid-area: 26 / 3; background-color: rgb(90, 94, 184)'></div>
291                 <div class='gridItem' style='grid-area: 26 / 4; background-color: rgb(253, 125, 105)'></div>
292                 <div class='gridItem' style='grid-area: 26 / 5; background-color: rgb(48, 80, 56)'></div>
293                 <div class='gridItem' style='grid-area: 26 / 6; background-color: rgb(214, 44, 214)'></div>
294                 <div class='gridItem' style='grid-area: 26 / 7; background-color: rgb(87, 210, 7)'></div>
295                 <div class='gridItem' style='grid-area: 26 / 8; background-color: rgb(246, 134, 110)'></div>
296                 <div class='gridItem' style='grid-area: 26 / 9; background-color: rgb(28, 235, 156)'></div>
297                 <div class='gridItem' style='grid-area: 26 / 10; background-color: rgb(196, 196, 122)'></div>
298                 <div class='gridItem' style='grid-area: 27 / 1; background-color: rgb(32, 101, 179)'></div>
299                 <div class='gridItem' style='grid-area: 27 / 2; background-color: rgb(143, 215, 70)'></div>
300                 <div class='gridItem' style='grid-area: 27 / 3; background-color: rgb(164, 20, 146)'></div>
301                 <div class='gridItem' style='grid-area: 27 / 4; background-color: rgb(54, 170, 112)'></div>
302                 <div class='gridItem' style='grid-area: 27 / 5; background-color: rgb(240, 231, 151)'></div>
303                 <div class='gridItem' style='grid-area: 27 / 6; background-color: rgb(65, 146, 47)'></div>
304                 <div class='gridItem' style='grid-area: 27 / 7; background-color: rgb(56, 233, 21)'></div>
305                 <div class='gridItem' style='grid-area: 27 / 8; background-color: rgb(88, 15, 249)'></div>
306                 <div class='gridItem' style='grid-area: 27 / 9; background-color: rgb(65, 178, 170)'></div>
307                 <div class='gridItem' style='grid-area: 27 / 10; background-color: rgb(95, 29, 2)'></div>
308                 <div class='gridItem' style='grid-area: 28 / 1; background-color: rgb(24, 241, 163)'></div>
309                 <div class='gridItem' style='grid-area: 28 / 2; background-color: rgb(188, 14, 14)'></div>
310                 <div class='gridItem' style='grid-area: 28 / 3; background-color: rgb(37, 13, 196)'></div>
311                 <div class='gridItem' style='grid-area: 28 / 4; background-color: rgb(19, 4, 41)'></div>
312                 <div class='gridItem' style='grid-area: 28 / 5; background-color: rgb(68, 83, 114)'></div>
313                 <div class='gridItem' style='grid-area: 28 / 6; background-color: rgb(161, 172, 81)'></div>
314                 <div class='gridItem' style='grid-area: 28 / 7; background-color: rgb(238, 31, 124)'></div>
315                 <div class='gridItem' style='grid-area: 28 / 8; background-color: rgb(139, 3, 39)'></div>
316                 <div class='gridItem' style='grid-area: 28 / 9; background-color: rgb(223, 187, 114)'></div>
317                 <div class='gridItem' style='grid-area: 28 / 10; background-color: rgb(237, 138, 56)'></div>
318                 <div class='gridItem' style='grid-area: 29 / 1; background-color: rgb(71, 239, 143)'></div>
319                 <div class='gridItem' style='grid-area: 29 / 2; background-color: rgb(164, 187, 158)'></div>
320                 <div class='gridItem' style='grid-area: 29 / 3; background-color: rgb(250, 145, 157)'></div>
321                 <div class='gridItem' style='grid-area: 29 / 4; background-color: rgb(214, 172, 72)'></div>
322                 <div class='gridItem' style='grid-area: 29 / 5; background-color: rgb(210, 17, 16)'></div>
323                 <div class='gridItem' style='grid-area: 29 / 6; background-color: rgb(149, 53, 200)'></div>
324                 <div class='gridItem' style='grid-area: 29 / 7; background-color: rgb(174, 119, 143)'></div>
325                 <div class='gridItem' style='grid-area: 29 / 8; background-color: rgb(22, 243, 58)'></div>
326                 <div class='gridItem' style='grid-area: 29 / 9; background-color: rgb(11, 243, 75)'></div>
327                 <div class='gridItem' style='grid-area: 29 / 10; background-color: rgb(65, 165, 44)'></div>
328                 <div class='gridItem' style='grid-area: 30 / 1; background-color: rgb(223, 94, 134)'></div>
329                 <div class='gridItem' style='grid-area: 30 / 2; background-color: rgb(106, 182, 172)'></div>
330                 <div class='gridItem' style='grid-area: 30 / 3; background-color: rgb(85, 121, 55)'></div>
331                 <div class='gridItem' style='grid-area: 30 / 4; background-color: rgb(199, 150, 177)'></div>
332                 <div class='gridItem' style='grid-area: 30 / 5; background-color: rgb(116, 134, 24)'></div>
333                 <div class='gridItem' style='grid-area: 30 / 6; background-color: rgb(91, 7, 75)'></div>
334                 <div class='gridItem' style='grid-area: 30 / 7; background-color: rgb(51, 217, 135)'></div>
335                 <div class='gridItem' style='grid-area: 30 / 8; background-color: rgb(161, 160, 184)'></div>
336                 <div class='gridItem' style='grid-area: 30 / 9; background-color: rgb(130, 159, 7)'></div>
337                 <div class='gridItem' style='grid-area: 30 / 10; background-color: rgb(21, 26, 168)'></div>
338             </div>
339         </div>
340     </div>
341     <pre id="log"></pre>
342 </body>