content-visibility: Don't generate devtools grid/flex info when locked.

This patch ensures devtools doesn't try to generate grid information
on locked containers, since the contents are not necessarily laid out
or generated.

R=chrishtr@chromium.org

Fixed: 1139642
Change-Id: I5b279196cf147407abefa7ffa2264484fc698b14
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2527941Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Commit-Queue: vmpstr <vmpstr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#825814}

third_party/blink/renderer/core/inspector/inspector_highlight.cc

@@ -320,20 +320,6 @@ std::unique_ptr<protocol::DictionaryValue> BuildElementInfo(Element* element) {
   if (!layout_object || !containing_view)
     return element_info;
 
-  // if (auto* context = element->GetDisplayLockContext()) {
-  //  if (context->IsLocked()) {
-  //    // If it's a locked element, use the values from the locked frame rect.
-  //    // TODO(vmpstr): Verify that these values are correct here.
-  //    element_info->setString(
-  //        "nodeWidth",
-  //        String::Number(context->GetLockedContentLogicalWidth().ToDouble()));
-  //    element_info->setString(
-  //        "nodeHeight",
-  //        String::Number(context->GetLockedContentLogicalHeight().ToDouble()));
-  //  }
-  //  return element_info;
-  //}
-
   // layoutObject the getBoundingClientRect() data in the tooltip
   // to be consistent with the rulers (see http://crbug.com/262338).
   DOMRect* bounding_box = element->getBoundingClientRect();
@@ -1477,6 +1463,13 @@ void InspectorHighlight::AppendNodeHighlight(
   AppendQuad(border, highlight_config.border, Color::kTransparent, "border");
   AppendQuad(margin, highlight_config.margin, Color::kTransparent, "margin");
 
+  // Don't append node's grid / flex info if it's locked since those values may
+  // not be generated yet.
+  if (auto* context = layout_object->GetDisplayLockContext()) {
+    if (context->IsLocked())
+      return;
+  }
+
   if (highlight_config.css_grid != Color::kTransparent ||
       highlight_config.grid_highlight_config) {
     grid_info_ = protocol::ListValue::create();

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-display-locked-grid-expected.txt

+Tests highlights for display locking.
+
+container{
+  "paths": [
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        792,
+        8,
+        "L",
+        792,
+        18,
+        "L",
+        8,
+        18,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        792,
+        8,
+        "L",
+        792,
+        18,
+        "L",
+        8,
+        18,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        792,
+        8,
+        "L",
+        792,
+        18,
+        "L",
+        8,
+        18,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        792,
+        8,
+        "L",
+        792,
+        18,
+        "L",
+        8,
+        18,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "showAccessibilityInfo": true,
+  "colorFormat": "hex",
+  "elementInfo": {
+    "tagName": "div",
+    "idValue": "container",
+    "nodeWidth": "784",
+    "nodeHeight": "10",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic",
+    "layoutObjectName": "LayoutGrid",
+    "showAccessibilityInfo": true
+  }
+}
+child{
+  "paths": [
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        792,
+        8,
+        "L",
+        792,
+        18,
+        "L",
+        8,
+        18,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        792,
+        8,
+        "L",
+        792,
+        18,
+        "L",
+        8,
+        18,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        792,
+        8,
+        "L",
+        792,
+        18,
+        "L",
+        8,
+        18,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        8,
+        8,
+        "L",
+        792,
+        8,
+        "L",
+        792,
+        18,
+        "L",
+        8,
+        18,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "showAccessibilityInfo": true,
+  "colorFormat": "hex",
+  "elementInfo": {
+    "tagName": "div",
+    "idValue": "container",
+    "nodeWidth": "784",
+    "nodeHeight": "10",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic",
+    "layoutObjectName": "LayoutGrid",
+    "isLockedAncestor": "true",
+    "showAccessibilityInfo": true
+  }
+}
+

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-display-locked-grid.js

+// Copyright 2019 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(`Tests highlights for display locking.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.loadModule('console_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+        #container {
+          display: grid;
+          grid-template-rows: 1fr 1fr;
+          grid-template-columns: 1fr 1fr;
+        }
+      </style>
+      <div id="container" style="content-visibility: hidden; contain-intrinsic-size: 10px;">
+        <div id="child" style="width: 50px; height: 50px; background: blue">Text</div>
+      </div>
+    `);
+
+  function dumpChild() {
+    ElementsTestRunner.dumpInspectorHighlightJSON('child', TestRunner.completeTest.bind(TestRunner));
+  }
+
+  function dumpContainerAndChild() {
+    ElementsTestRunner.dumpInspectorHighlightJSON('container', dumpChild);
+  }
+
+  dumpContainerAndChild();
+})();