343 lines
32 KiB
HTML
343 lines
32 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
html, body {
|
||
|
|
margin: 0;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid { display: grid; }
|
||
|
|
.gridItem { height: 10px; }
|
||
|
|
#gridContainer { grid-auto-columns: 1fr; }
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script src="../resources/runner.js"></script>
|
||
|
|
<script>
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
function startTest() {
|
||
|
|
document.body.offsetHeight;
|
||
|
|
|
||
|
|
var index = 0;
|
||
|
|
PerfTestRunner.measureRunsPerSecond({
|
||
|
|
description: "Measures performance of layout on a page using nested grids.",
|
||
|
|
run: function() {
|
||
|
|
var wrap = document.getElementById("wrap");
|
||
|
|
wrap.style.width = ++index % 2 ? "99%" : "90%";
|
||
|
|
document.body.offsetHeight;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body onload="startTest()">
|
||
|
|
<div id="wrap" class="grid">
|
||
|
|
<div class="grid">
|
||
|
|
<div class="grid" id="gridContainer">
|
||
|
|
<div class='gridItem' style='grid-area: 1 / 1; background-color: rgb(36, 100, 135)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 1 / 2; background-color: rgb(41, 156, 157)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 1 / 3; background-color: rgb(204, 225, 15)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 1 / 4; background-color: rgb(106, 245, 133)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 1 / 5; background-color: rgb(159, 213, 189)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 1 / 6; background-color: rgb(39, 38, 236)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 1 / 7; background-color: rgb(234, 102, 236)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 1 / 8; background-color: rgb(239, 166, 146)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 1 / 9; background-color: rgb(29, 202, 217)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 1 / 10; background-color: rgb(170, 182, 228)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 2 / 1; background-color: rgb(142, 26, 226)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 2 / 2; background-color: rgb(140, 195, 5)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 2 / 3; background-color: rgb(122, 86, 33)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 2 / 4; background-color: rgb(242, 247, 24)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 2 / 5; background-color: rgb(13, 102, 180)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 2 / 6; background-color: rgb(5, 234, 62)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 2 / 7; background-color: rgb(78, 29, 58)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 2 / 8; background-color: rgb(185, 50, 52)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 2 / 9; background-color: rgb(217, 213, 222)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 2 / 10; background-color: rgb(14, 236, 144)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 3 / 1; background-color: rgb(28, 15, 98)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 3 / 2; background-color: rgb(31, 124, 15)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 3 / 3; background-color: rgb(160, 116, 86)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 3 / 4; background-color: rgb(22, 14, 76)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 3 / 5; background-color: rgb(199, 51, 155)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 3 / 6; background-color: rgb(195, 254, 137)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 3 / 7; background-color: rgb(109, 253, 46)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 3 / 8; background-color: rgb(20, 27, 48)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 3 / 9; background-color: rgb(79, 234, 49)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 3 / 10; background-color: rgb(230, 193, 12)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 4 / 1; background-color: rgb(194, 85, 115)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 4 / 2; background-color: rgb(10, 219, 54)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 4 / 3; background-color: rgb(179, 20, 40)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 4 / 4; background-color: rgb(164, 105, 181)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 4 / 5; background-color: rgb(30, 82, 234)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 4 / 6; background-color: rgb(39, 120, 44)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 4 / 7; background-color: rgb(124, 235, 123)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 4 / 8; background-color: rgb(131, 27, 68)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 4 / 9; background-color: rgb(13, 80, 129)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 4 / 10; background-color: rgb(0, 215, 125)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 5 / 1; background-color: rgb(201, 139, 254)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 5 / 2; background-color: rgb(176, 66, 242)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 5 / 3; background-color: rgb(82, 19, 194)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 5 / 4; background-color: rgb(3, 244, 246)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 5 / 5; background-color: rgb(197, 243, 66)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 5 / 6; background-color: rgb(146, 136, 91)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 5 / 7; background-color: rgb(181, 119, 137)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 5 / 8; background-color: rgb(128, 156, 9)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 5 / 9; background-color: rgb(100, 148, 110)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 5 / 10; background-color: rgb(61, 150, 231)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 6 / 1; background-color: rgb(189, 231, 192)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 6 / 2; background-color: rgb(202, 127, 122)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 6 / 3; background-color: rgb(86, 152, 130)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 6 / 4; background-color: rgb(128, 111, 255)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 6 / 5; background-color: rgb(112, 214, 196)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 6 / 6; background-color: rgb(26, 185, 21)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 6 / 7; background-color: rgb(138, 121, 184)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 6 / 8; background-color: rgb(86, 25, 98)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 6 / 9; background-color: rgb(236, 218, 194)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 6 / 10; background-color: rgb(226, 69, 125)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 7 / 1; background-color: rgb(46, 129, 223)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 7 / 2; background-color: rgb(96, 33, 177)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 7 / 3; background-color: rgb(205, 196, 118)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 7 / 4; background-color: rgb(253, 197, 216)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 7 / 5; background-color: rgb(244, 123, 146)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 7 / 6; background-color: rgb(177, 188, 204)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 7 / 7; background-color: rgb(89, 224, 203)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 7 / 8; background-color: rgb(187, 211, 108)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 7 / 9; background-color: rgb(156, 222, 180)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 7 / 10; background-color: rgb(178, 87, 127)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 8 / 1; background-color: rgb(240, 103, 63)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 8 / 2; background-color: rgb(80, 100, 134)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 8 / 3; background-color: rgb(76, 192, 127)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 8 / 4; background-color: rgb(238, 31, 229)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 8 / 5; background-color: rgb(34, 49, 156)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 8 / 6; background-color: rgb(6, 31, 100)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 8 / 7; background-color: rgb(2, 3, 38)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 8 / 8; background-color: rgb(198, 165, 46)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 8 / 9; background-color: rgb(191, 147, 159)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 8 / 10; background-color: rgb(243, 96, 21)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 9 / 1; background-color: rgb(251, 125, 248)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 9 / 2; background-color: rgb(174, 162, 137)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 9 / 3; background-color: rgb(254, 178, 9)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 9 / 4; background-color: rgb(105, 11, 18)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 9 / 5; background-color: rgb(137, 159, 231)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 9 / 6; background-color: rgb(233, 167, 52)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 9 / 7; background-color: rgb(133, 16, 144)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 9 / 8; background-color: rgb(152, 154, 36)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 9 / 9; background-color: rgb(18, 174, 89)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 9 / 10; background-color: rgb(83, 40, 80)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 10 / 1; background-color: rgb(166, 225, 190)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 10 / 2; background-color: rgb(43, 251, 27)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 10 / 3; background-color: rgb(138, 82, 236)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 10 / 4; background-color: rgb(133, 27, 45)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 10 / 5; background-color: rgb(152, 52, 169)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 10 / 6; background-color: rgb(55, 36, 0)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 10 / 7; background-color: rgb(74, 125, 195)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 10 / 8; background-color: rgb(203, 84, 103)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 10 / 9; background-color: rgb(16, 104, 62)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 10 / 10; background-color: rgb(119, 219, 124)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 11 / 1; background-color: rgb(144, 204, 119)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 11 / 2; background-color: rgb(35, 147, 180)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 11 / 3; background-color: rgb(53, 83, 191)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 11 / 4; background-color: rgb(104, 182, 76)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 11 / 5; background-color: rgb(158, 11, 85)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 11 / 6; background-color: rgb(67, 101, 53)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 11 / 7; background-color: rgb(4, 123, 0)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 11 / 8; background-color: rgb(80, 177, 30)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 11 / 9; background-color: rgb(45, 111, 243)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 11 / 10; background-color: rgb(8, 164, 245)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 12 / 1; background-color: rgb(48, 126, 34)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 12 / 2; background-color: rgb(21, 35, 187)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 12 / 3; background-color: rgb(150, 220, 226)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 12 / 4; background-color: rgb(64, 107, 119)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 12 / 5; background-color: rgb(112, 109, 8)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 12 / 6; background-color: rgb(204, 16, 188)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 12 / 7; background-color: rgb(206, 119, 225)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 12 / 8; background-color: rgb(132, 200, 107)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 12 / 9; background-color: rgb(88, 124, 39)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 12 / 10; background-color: rgb(190, 221, 212)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 13 / 1; background-color: rgb(37, 110, 70)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 13 / 2; background-color: rgb(158, 184, 122)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 13 / 3; background-color: rgb(131, 50, 156)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 13 / 4; background-color: rgb(198, 184, 72)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 13 / 5; background-color: rgb(163, 59, 1)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 13 / 6; background-color: rgb(25, 239, 11)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 13 / 7; background-color: rgb(35, 157, 205)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 13 / 8; background-color: rgb(130, 236, 218)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 13 / 9; background-color: rgb(37, 66, 27)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 13 / 10; background-color: rgb(116, 156, 157)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 14 / 1; background-color: rgb(6, 113, 161)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 14 / 2; background-color: rgb(221, 125, 237)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 14 / 3; background-color: rgb(119, 153, 90)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 14 / 4; background-color: rgb(122, 227, 53)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 14 / 5; background-color: rgb(110, 4, 57)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 14 / 6; background-color: rgb(149, 160, 85)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 14 / 7; background-color: rgb(26, 3, 213)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 14 / 8; background-color: rgb(68, 56, 197)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 14 / 9; background-color: rgb(226, 80, 7)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 14 / 10; background-color: rgb(225, 107, 232)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 15 / 1; background-color: rgb(59, 215, 249)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 15 / 2; background-color: rgb(183, 116, 39)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 15 / 3; background-color: rgb(64, 71, 212)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 15 / 4; background-color: rgb(154, 198, 45)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 15 / 5; background-color: rgb(132, 57, 196)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 15 / 6; background-color: rgb(62, 211, 119)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 15 / 7; background-color: rgb(246, 246, 170)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 15 / 8; background-color: rgb(31, 220, 11)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 15 / 9; background-color: rgb(192, 219, 54)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 15 / 10; background-color: rgb(83, 247, 136)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 16 / 1; background-color: rgb(239, 205, 20)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 16 / 2; background-color: rgb(15, 218, 101)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 16 / 3; background-color: rgb(253, 121, 123)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 16 / 4; background-color: rgb(22, 85, 89)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 16 / 5; background-color: rgb(189, 232, 192)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 16 / 6; background-color: rgb(235, 232, 222)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 16 / 7; background-color: rgb(15, 163, 54)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 16 / 8; background-color: rgb(106, 104, 76)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 16 / 9; background-color: rgb(41, 248, 99)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 16 / 10; background-color: rgb(251, 48, 136)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 17 / 1; background-color: rgb(233, 21, 76)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 17 / 2; background-color: rgb(88, 8, 213)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 17 / 3; background-color: rgb(95, 192, 94)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 17 / 4; background-color: rgb(213, 70, 118)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 17 / 5; background-color: rgb(229, 132, 167)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 17 / 6; background-color: rgb(134, 45, 58)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 17 / 7; background-color: rgb(182, 184, 82)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 17 / 8; background-color: rgb(52, 41, 157)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 17 / 9; background-color: rgb(14, 7, 246)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 17 / 10; background-color: rgb(25, 234, 105)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 18 / 1; background-color: rgb(58, 91, 104)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 18 / 2; background-color: rgb(191, 150, 115)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 18 / 3; background-color: rgb(137, 235, 204)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 18 / 4; background-color: rgb(128, 160, 238)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 18 / 5; background-color: rgb(219, 229, 251)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 18 / 6; background-color: rgb(171, 136, 44)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 18 / 7; background-color: rgb(233, 86, 121)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 18 / 8; background-color: rgb(139, 99, 128)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 18 / 9; background-color: rgb(12, 214, 126)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 18 / 10; background-color: rgb(118, 27, 21)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 19 / 1; background-color: rgb(89, 50, 217)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 19 / 2; background-color: rgb(17, 112, 89)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 19 / 3; background-color: rgb(206, 62, 196)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 19 / 4; background-color: rgb(44, 195, 252)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 19 / 5; background-color: rgb(152, 18, 133)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 19 / 6; background-color: rgb(140, 176, 222)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 19 / 7; background-color: rgb(79, 252, 183)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 19 / 8; background-color: rgb(226, 117, 120)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 19 / 9; background-color: rgb(132, 187, 210)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 19 / 10; background-color: rgb(109, 82, 44)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 20 / 1; background-color: rgb(27, 61, 17)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 20 / 2; background-color: rgb(52, 128, 161)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 20 / 3; background-color: rgb(243, 50, 187)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 20 / 4; background-color: rgb(139, 108, 157)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 20 / 5; background-color: rgb(237, 111, 157)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 20 / 6; background-color: rgb(41, 220, 130)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 20 / 7; background-color: rgb(73, 253, 239)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 20 / 8; background-color: rgb(22, 136, 50)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 20 / 9; background-color: rgb(215, 136, 15)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 20 / 10; background-color: rgb(1, 161, 103)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 21 / 1; background-color: rgb(89, 218, 223)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 21 / 2; background-color: rgb(42, 37, 205)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 21 / 3; background-color: rgb(82, 186, 133)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 21 / 4; background-color: rgb(165, 86, 40)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 21 / 5; background-color: rgb(174, 126, 88)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 21 / 6; background-color: rgb(203, 238, 145)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 21 / 7; background-color: rgb(47, 213, 233)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 21 / 8; background-color: rgb(9, 117, 173)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 21 / 9; background-color: rgb(86, 84, 18)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 21 / 10; background-color: rgb(78, 34, 85)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 22 / 1; background-color: rgb(23, 21, 111)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 22 / 2; background-color: rgb(90, 100, 123)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 22 / 3; background-color: rgb(161, 7, 120)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 22 / 4; background-color: rgb(25, 144, 0)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 22 / 5; background-color: rgb(232, 184, 247)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 22 / 6; background-color: rgb(98, 156, 47)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 22 / 7; background-color: rgb(131, 123, 1)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 22 / 8; background-color: rgb(62, 166, 200)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 22 / 9; background-color: rgb(94, 49, 248)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 22 / 10; background-color: rgb(187, 84, 35)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 23 / 1; background-color: rgb(95, 87, 28)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 23 / 2; background-color: rgb(3, 222, 23)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 23 / 3; background-color: rgb(227, 108, 40)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 23 / 4; background-color: rgb(16, 96, 197)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 23 / 5; background-color: rgb(158, 189, 126)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 23 / 6; background-color: rgb(36, 97, 108)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 23 / 7; background-color: rgb(112, 144, 129)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 23 / 8; background-color: rgb(49, 47, 177)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 23 / 9; background-color: rgb(225, 182, 57)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 23 / 10; background-color: rgb(228, 154, 166)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 24 / 1; background-color: rgb(33, 123, 74)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 24 / 2; background-color: rgb(90, 195, 5)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 24 / 3; background-color: rgb(134, 243, 91)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 24 / 4; background-color: rgb(213, 137, 30)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 24 / 5; background-color: rgb(229, 122, 90)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 24 / 6; background-color: rgb(37, 146, 112)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 24 / 7; background-color: rgb(116, 228, 23)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 24 / 8; background-color: rgb(161, 205, 147)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 24 / 9; background-color: rgb(13, 122, 153)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 24 / 10; background-color: rgb(81, 21, 84)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 25 / 1; background-color: rgb(155, 70, 124)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 25 / 2; background-color: rgb(160, 194, 239)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 25 / 3; background-color: rgb(215, 51, 22)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 25 / 4; background-color: rgb(169, 215, 206)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 25 / 5; background-color: rgb(132, 145, 197)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 25 / 6; background-color: rgb(227, 219, 8)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 25 / 7; background-color: rgb(56, 92, 236)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 25 / 8; background-color: rgb(199, 158, 71)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 25 / 9; background-color: rgb(198, 56, 233)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 25 / 10; background-color: rgb(218, 37, 33)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 26 / 1; background-color: rgb(205, 49, 30)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 26 / 2; background-color: rgb(131, 42, 3)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 26 / 3; background-color: rgb(90, 94, 184)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 26 / 4; background-color: rgb(253, 125, 105)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 26 / 5; background-color: rgb(48, 80, 56)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 26 / 6; background-color: rgb(214, 44, 214)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 26 / 7; background-color: rgb(87, 210, 7)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 26 / 8; background-color: rgb(246, 134, 110)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 26 / 9; background-color: rgb(28, 235, 156)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 26 / 10; background-color: rgb(196, 196, 122)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 27 / 1; background-color: rgb(32, 101, 179)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 27 / 2; background-color: rgb(143, 215, 70)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 27 / 3; background-color: rgb(164, 20, 146)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 27 / 4; background-color: rgb(54, 170, 112)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 27 / 5; background-color: rgb(240, 231, 151)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 27 / 6; background-color: rgb(65, 146, 47)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 27 / 7; background-color: rgb(56, 233, 21)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 27 / 8; background-color: rgb(88, 15, 249)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 27 / 9; background-color: rgb(65, 178, 170)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 27 / 10; background-color: rgb(95, 29, 2)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 28 / 1; background-color: rgb(24, 241, 163)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 28 / 2; background-color: rgb(188, 14, 14)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 28 / 3; background-color: rgb(37, 13, 196)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 28 / 4; background-color: rgb(19, 4, 41)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 28 / 5; background-color: rgb(68, 83, 114)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 28 / 6; background-color: rgb(161, 172, 81)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 28 / 7; background-color: rgb(238, 31, 124)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 28 / 8; background-color: rgb(139, 3, 39)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 28 / 9; background-color: rgb(223, 187, 114)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 28 / 10; background-color: rgb(237, 138, 56)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 29 / 1; background-color: rgb(71, 239, 143)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 29 / 2; background-color: rgb(164, 187, 158)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 29 / 3; background-color: rgb(250, 145, 157)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 29 / 4; background-color: rgb(214, 172, 72)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 29 / 5; background-color: rgb(210, 17, 16)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 29 / 6; background-color: rgb(149, 53, 200)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 29 / 7; background-color: rgb(174, 119, 143)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 29 / 8; background-color: rgb(22, 243, 58)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 29 / 9; background-color: rgb(11, 243, 75)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 29 / 10; background-color: rgb(65, 165, 44)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 30 / 1; background-color: rgb(223, 94, 134)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 30 / 2; background-color: rgb(106, 182, 172)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 30 / 3; background-color: rgb(85, 121, 55)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 30 / 4; background-color: rgb(199, 150, 177)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 30 / 5; background-color: rgb(116, 134, 24)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 30 / 6; background-color: rgb(91, 7, 75)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 30 / 7; background-color: rgb(51, 217, 135)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 30 / 8; background-color: rgb(161, 160, 184)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 30 / 9; background-color: rgb(130, 159, 7)'></div>
|
||
|
|
<div class='gridItem' style='grid-area: 30 / 10; background-color: rgb(21, 26, 168)'></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<pre id="log"></pre>
|
||
|
|
</body>
|