Devtools: add webtests for new Multi Grid highlight tool

This CL is a follow up to it's parent: https://crrev/c/2278408


This adds webtests to validate the highlightJSON generation for the new
grid tool. However, it is dependent on a change to the elements_test_runner
in the devtools-frontend, and cannot be added until it's parent
lands, the devtools-frontend updates dependencies and the
testrunner file, and those changes are merged back into src.

Bug: 1047356

Change-Id: I483e5f81635b0d0ff3cf8019c2fe98155b5cf960
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2288337
Commit-Queue: Brandon Goddard <brgoddar@microsoft.com>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Cr-Commit-Position: refs/heads/master@{#789113}

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-persistent-grid-huge.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(`This test verifies that huge CSS grids can be highlighted with the grid Highlight Tool.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+      #big-grid {
+          display: grid;
+          grid-template-columns: repeat(100, 5px);
+          grid-template-rows: repeat(100, 5px);
+          grid-gap: 5px;
+      }
+      #huge-grid {
+          display: grid;
+          grid-template-columns: repeat(10000, 5px);
+          grid-template-rows: repeat(10000, 5px);
+          grid-gap: 5px;
+      }
+      </style>
+      <div id="big-grid"></div>
+      <div id="huge-grid"></div>
+
+      <p id="description">This test verifies that huge CSS grids can be highlighted.</p>
+    `);
+
+  // Dump the highlight of a 100x100 grid to check that it's not absurdly huge.
+  await new Promise(resolve => {
+    ElementsTestRunner.dumpInspectorGridHighlightsJSON(['big-grid'], resolve);
+  });
+
+
+  // Now check that the highlight data for a 10000x10000 grid can be generated.
+  // But don't dump it since that would make the test time out.
+  const node = await ElementsTestRunner.nodeWithIdPromise('huge-grid');
+  await TestRunner.OverlayAgent.getGridHighlightObjectsForTest([node.id]);
+
+  TestRunner.completeTest();
+})();

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-multiple-css-grid-expected.txt

+This test verifies the position and size of the highlight rectangles overlayed on an inspected CSS grid div.
+
+{
+  "gridHighlights": [
+    {
+      "rows": [
+        "M",
+        173,
+        408,
+        "L",
+        173,
+        133,
+        "M",
+        198,
+        133,
+        "L",
+        198,
+        408,
+        "M",
+        213,
+        408,
+        "L",
+        213,
+        133,
+        "M",
+        238,
+        133,
+        "L",
+        238,
+        408
+      ],
+      "rowGaps": [
+        "M",
+        198,
+        408,
+        "L",
+        198,
+        133,
+        "L",
+        213,
+        133,
+        "L",
+        213,
+        408,
+        "Z"
+      ],
+      "columns": [
+        "M",
+        173,
+        408,
+        "L",
+        238,
+        408,
+        "M",
+        238,
+        358,
+        "L",
+        173,
+        358,
+        "M",
+        173,
+        333,
+        "L",
+        238,
+        333,
+        "M",
+        238,
+        133,
+        "L",
+        173,
+        133
+      ],
+      "columnGaps": [
+        "M",
+        173,
+        358,
+        "L",
+        173,
+        333,
+        "L",
+        238,
+        333,
+        "L",
+        238,
+        358,
+        "Z"
+      ],
+      "positiveRowLineNumberOffsets": [
+        0,
+        32.5,
+        65
+      ],
+      "positiveColumnLineNumberOffsets": [
+        0,
+        62.5,
+        275
+      ],
+      "negativeRowLineNumberOffsets": [
+        0
+      ],
+      "negativeColumnLineNumberOffsets": [
+        0,
+        62.5,
+        275
+      ],
+      "areaNames": {},
+      "gridBorder": [
+        "M",
+        173,
+        408,
+        "L",
+        173,
+        133,
+        "L",
+        238,
+        133,
+        "L",
+        238,
+        408,
+        "Z"
+      ],
+      "gridHighlightConfig": {
+        "gridBorderDash": false,
+        "cellBorderDash": true,
+        "showGridExtensionLines": true,
+        "showPositiveLineNumbers": true,
+        "showNegativeLineNumbers": true,
+        "showAreaNames": true,
+        "gridBorderColor": "rgba(255, 0, 0, 0)",
+        "cellBorderColor": "rgba(128, 0, 0, 0)",
+        "rowGapColor": "rgba(0, 255, 0, 0)",
+        "columnGapColor": "rgba(0, 0, 255, 0)",
+        "rowHatchColor": "rgba(255, 255, 255, 0)",
+        "columnHatchColor": "rgba(128, 128, 128, 0)",
+        "areaBorderColor": "rgba(255, 0, 0, 0)"
+      },
+      "isPrimaryGrid": true
+    },
+    {
+      "rows": [
+        "M",
+        108,
+        1208,
+        "L",
+        108,
+        -92,
+        "M",
+        208,
+        -92,
+        "L",
+        208,
+        1208,
+        "M",
+        228,
+        1208,
+        "L",
+        228,
+        -92,
+        "M",
+        328,
+        -92,
+        "L",
+        328,
+        1208
+      ],
+      "rowGaps": [
+        "M",
+        208,
+        1208,
+        "L",
+        208,
+        -92,
+        "L",
+        228,
+        -92,
+        "L",
+        228,
+        1208,
+        "Z"
+      ],
+      "columns": [
+        "M",
+        108,
+        1208,
+        "L",
+        328,
+        1208,
+        "M",
+        328,
+        1158,
+        "L",
+        108,
+        1158,
+        "M",
+        108,
+        1108,
+        "L",
+        328,
+        1108,
+        "M",
+        328,
+        -92,
+        "L",
+        108,
+        -92
+      ],
+      "columnGaps": [
+        "M",
+        108,
+        1158,
+        "L",
+        108,
+        1108,
+        "L",
+        328,
+        1108,
+        "L",
+        328,
+        1158,
+        "Z"
+      ],
+      "positiveRowLineNumberOffsets": [
+        0,
+        110,
+        220
+      ],
+      "positiveColumnLineNumberOffsets": [
+        0,
+        75,
+        1300
+      ],
+      "negativeRowLineNumberOffsets": [
+        0
+      ],
+      "negativeColumnLineNumberOffsets": [
+        0,
+        75,
+        1300
+      ],
+      "areaNames": {},
+      "gridBorder": [
+        "M",
+        108,
+        1208,
+        "L",
+        108,
+        -92,
+        "L",
+        328,
+        -92,
+        "L",
+        328,
+        1208,
+        "Z"
+      ],
+      "gridHighlightConfig": {
+        "gridBorderDash": false,
+        "cellBorderDash": true,
+        "showGridExtensionLines": true,
+        "showPositiveLineNumbers": true,
+        "showNegativeLineNumbers": true,
+        "showAreaNames": true,
+        "gridBorderColor": "rgba(255, 0, 0, 0)",
+        "cellBorderColor": "rgba(128, 0, 0, 0)",
+        "rowGapColor": "rgba(0, 255, 0, 0)",
+        "columnGapColor": "rgba(0, 0, 255, 0)",
+        "rowHatchColor": "rgba(255, 255, 255, 0)",
+        "columnHatchColor": "rgba(128, 128, 128, 0)",
+        "areaBorderColor": "rgba(255, 0, 0, 0)"
+      },
+      "isPrimaryGrid": true
+    }
+  ]
+}
+

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-multiple-css-grid.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(`This test verifies the position and size of the highlight rectangles overlayed on an inspected CSS grid div.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+
+      body {
+          width: 2000px;
+          height: 2000px;
+          background-color: grey;
+      }
+      .outer {
+          transform: rotate(-90deg) translate(-200px, -900px);
+      }
+      .grid {
+          width: 1000px;
+          display: grid;
+          grid-template-columns: 50px 20%;
+          grid-auto-rows: 25px;
+      }
+      .padded {
+          padding: 50px 60px;
+          align-content: space-around;
+          justify-content: end;
+          grid-gap: 15px 25px;
+          border: 5px solid;
+          margin: 10px;
+      }
+      .standard {
+          width: 1300px;
+          display: grid;
+          grid-template-columns: 50px 1200px;
+          grid-auto-rows: 100px;
+          grid-gap: 20px 50px;
+      }
+      .fixed {
+          position: absolute;
+          top: 0;
+          left: 0;
+      }
+      </style>
+      <div class="outer">
+        <div id="grid1" class="grid padded fixed">
+            <div>c1</div>
+            <div>c2</div>
+            <div>c3</div>
+        </div>
+        <div id="grid2" class="standard fixed">
+            <div>Cell 1</div>
+            <div>Cell 2</div>
+            <div>Cell 3</div>
+        </div>
+      </div>
+
+      <p id="description">This test verifies the position and size of the highlight rectangles overlayed on an multiple CSS grid divs.</p>
+    `);
+
+  function dumpGridHighlight(ids) {
+    return new Promise(resolve => ElementsTestRunner.dumpInspectorGridHighlightsJSON(ids, resolve));
+  }
+
+  await dumpGridHighlight(['grid1', 'grid2']);
+
+  TestRunner.completeTest();
+})();