DevTools: Show authored grid track sizes

This CL implements calculation of authored sizes per CSS grid track
by resolving repeat() functions in matching styles obtained from the
style resolver. This implementation supports the basic and more common
use case where grid templates are defined without
using CSS variables.

Frontend CL: https://crrev.com/c/2308543
Screenshot: https://i.imgur.com/EZky6gD.png

Bug: 1105808
Change-Id: I13beb4a5455f86c8e2334dc9da929acc8217406a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2308412
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Reviewed-by: Dominik Röttsches <drott@chromium.org>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Cr-Commit-Position: refs/heads/master@{#793061}

third_party/blink/renderer/core/BUILD.gn

@@ -1152,6 +1152,7 @@ jumbo_source_set("unit_tests") {
     "input/scroll_snap_test.cc",
     "input/touch_action_test.cc",
     "input/touch_event_manager_test.cc",
+    "inspector/inspector_css_cascade_test.cc",
     "inspector/inspector_session_state_test.cc",
     "inspector/main_thread_debugger_test.cc",
     "inspector/protocol_parser_test.cc",

third_party/blink/renderer/core/inspector/BUILD.gn

@@ -45,6 +45,8 @@ blink_core_sources("inspector") {
     "inspector_base_agent.h",
     "inspector_css_agent.cc",
     "inspector_css_agent.h",
+    "inspector_css_cascade.cc",
+    "inspector_css_cascade.h",
     "inspector_dom_agent.cc",
     "inspector_dom_agent.h",
     "inspector_dom_debugger_agent.cc",

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

@@ -74,6 +74,7 @@
 #include "third_party/blink/renderer/core/html/html_head_element.h"
 #include "third_party/blink/renderer/core/inspector/identifiers_factory.h"
 #include "third_party/blink/renderer/core/inspector/inspected_frames.h"
+#include "third_party/blink/renderer/core/inspector/inspector_css_cascade.h"
 #include "third_party/blink/renderer/core/inspector/inspector_history.h"
 #include "third_party/blink/renderer/core/inspector/inspector_network_agent.h"
 #include "third_party/blink/renderer/core/inspector/inspector_resource_container.h"
@@ -1002,7 +1003,6 @@ Response InspectorCSSAgent::getMatchedStylesForNode(
   if (!response.IsSuccess())
     return response;
 
-  Element* original_element = element;
   PseudoId element_pseudo_id = element->GetPseudoId();
   if (element_pseudo_id) {
     element = element->ParentOrShadowHostElement();
@@ -1022,21 +1022,11 @@ Response InspectorCSSAgent::getMatchedStylesForNode(
     stylesheet->SyncTextIfNeeded();
   }
 
-  // Update style and layout tree because AnimationsForNode below requires that.
-  // It is done this early because it also does UpdateActiveStyle() which is
-  // necessary for collecting an up-to-date set of rules.
-  document.UpdateStyleAndLayoutTreeForNode(element);
-
-  // FIXME: It's really gross for the inspector to reach in and access
-  // StyleResolver directly here. We need to provide the Inspector better APIs
-  // to get this information without grabbing at internal style classes!
-  StyleResolver& style_resolver = document.GetStyleResolver();
+  InspectorCSSCascade cascade(element, element_pseudo_id);
 
   // Matched rules.
-  RuleIndexList* matched_rules = style_resolver.PseudoCSSRulesForElement(
-      element, element_pseudo_id, StyleResolver::kAllCSSRules);
-  *matched_css_rules = BuildArrayForMatchedRuleList(
-      matched_rules, original_element, kPseudoIdNone);
+  *matched_css_rules =
+      BuildArrayForMatchedRuleList(cascade.MatchedRules(), kPseudoIdNone);
 
   // Pseudo elements.
   if (element_pseudo_id)
@@ -1051,51 +1041,34 @@ Response InspectorCSSAgent::getMatchedStylesForNode(
 
   *pseudo_id_matches =
       std::make_unique<protocol::Array<protocol::CSS::PseudoElementMatches>>();
-  for (PseudoId pseudo_id = kFirstPublicPseudoId;
-       pseudo_id < kAfterLastInternalPseudoId;
-       pseudo_id = static_cast<PseudoId>(pseudo_id + 1)) {
-    if (!PseudoElement::IsWebExposed(pseudo_id, element))
-      continue;
-    // If the pseudo-element doesn't exist, exclude UA rules to avoid cluttering
-    // all elements.
-    unsigned rules_to_include = element->GetPseudoElement(pseudo_id)
-                                    ? StyleResolver::kAllCSSRules
-                                    : StyleResolver::kAllButUACSSRules;
-    RuleIndexList* matched_rules = style_resolver.PseudoCSSRulesForElement(
-        element, pseudo_id, rules_to_include);
-    if (matched_rules && matched_rules->size()) {
-      pseudo_id_matches->fromJust()->emplace_back(
-          protocol::CSS::PseudoElementMatches::create()
-              .setPseudoType(
-                  InspectorDOMAgent::ProtocolPseudoElementType(pseudo_id))
-              .setMatches(BuildArrayForMatchedRuleList(matched_rules, element,
-                                                       pseudo_id))
-              .build());
-    }
+
+  for (InspectorCSSMatchedRules* match : cascade.PseudoElementRules()) {
+    pseudo_id_matches->fromJust()->emplace_back(
+        protocol::CSS::PseudoElementMatches::create()
+            .setPseudoType(
+                InspectorDOMAgent::ProtocolPseudoElementType(match->pseudo_id))
+            .setMatches(BuildArrayForMatchedRuleList(match->matched_rules,
+                                                     match->pseudo_id))
+            .build());
   }
 
   // Inherited styles.
   *inherited_entries =
       std::make_unique<protocol::Array<protocol::CSS::InheritedStyleEntry>>();
-  Element* parent_element = element->ParentOrShadowHostElement();
-  while (parent_element) {
-    RuleIndexList* parent_matched_rules = style_resolver.CssRulesForElement(
-        parent_element, StyleResolver::kAllCSSRules);
+  for (InspectorCSSMatchedRules* match : cascade.ParentRules()) {
     std::unique_ptr<protocol::CSS::InheritedStyleEntry> entry =
         protocol::CSS::InheritedStyleEntry::create()
             .setMatchedCSSRules(BuildArrayForMatchedRuleList(
-                parent_matched_rules, parent_element, kPseudoIdNone))
+                match->matched_rules, match->pseudo_id))
             .build();
-    if (parent_element->style() && parent_element->style()->length()) {
+    if (match->element->style() && match->element->style()->length()) {
       InspectorStyleSheetForInlineStyle* style_sheet =
-          AsInspectorStyleSheet(parent_element);
+          AsInspectorStyleSheet(match->element);
       if (style_sheet)
         entry->setInlineStyle(
             style_sheet->BuildObjectForStyle(style_sheet->InlineStyle()));
     }
-
     inherited_entries->fromJust()->emplace_back(std::move(entry));
-    parent_element = parent_element->ParentOrShadowHostElement();
   }
 
   *css_keyframes_rules = AnimationsForNode(element);
@@ -2153,7 +2126,6 @@ std::unique_ptr<protocol::CSS::CSSRule> InspectorCSSAgent::BuildObjectForRule(
 std::unique_ptr<protocol::Array<protocol::CSS::RuleMatch>>
 InspectorCSSAgent::BuildArrayForMatchedRuleList(
     RuleIndexList* rule_list,
-    Element* element,
     PseudoId matches_for_pseudo_id) {
   auto result = std::make_unique<protocol::Array<protocol::CSS::RuleMatch>>();
   if (!rule_list)

third_party/blink/renderer/core/inspector/inspector_css_agent.h

@@ -293,7 +293,7 @@ class CORE_EXPORT InspectorCSSAgent final
   std::unique_ptr<protocol::CSS::RuleUsage> BuildCoverageInfo(CSSStyleRule*,
                                                               bool);
   std::unique_ptr<protocol::Array<protocol::CSS::RuleMatch>>
-  BuildArrayForMatchedRuleList(RuleIndexList*, Element*, PseudoId);
+  BuildArrayForMatchedRuleList(RuleIndexList*, PseudoId);
   std::unique_ptr<protocol::CSS::CSSStyle> BuildObjectForAttributesStyle(
       Element*);
 

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

+// 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.
+
+#include "third_party/blink/renderer/core/inspector/inspector_css_cascade.h"
+
+#include "third_party/blink/renderer/core/css/css_rule_list.h"
+#include "third_party/blink/renderer/core/css/css_style_declaration.h"
+#include "third_party/blink/renderer/core/css/css_style_rule.h"
+#include "third_party/blink/renderer/core/css/css_value.h"
+#include "third_party/blink/renderer/core/css/resolver/style_resolver.h"
+#include "third_party/blink/renderer/core/dom/element.h"
+#include "third_party/blink/renderer/core/dom/pseudo_element.h"
+#include "third_party/blink/renderer/core/style/computed_style_constants.h"
+#include "third_party/blink/renderer/platform/heap/heap.h"
+
+namespace blink {
+
+InspectorCSSCascade::InspectorCSSCascade(Element* element,
+                                         PseudoId element_pseudo_id)
+    : element_(element) {
+  DCHECK(element_);
+
+  // Update style and layout tree for collecting an up-to-date set of rules
+  // and animations.
+  element_->GetDocument().UpdateStyleAndLayoutTreeForNode(element_);
+
+  // FIXME: It's really gross for the inspector to reach in and access
+  // StyleResolver directly here. We need to provide the Inspector better APIs
+  // to get this information without grabbing at internal style classes!
+  StyleResolver& style_resolver = element_->GetDocument().GetStyleResolver();
+
+  matched_rules_ = style_resolver.PseudoCSSRulesForElement(
+      element_, element_pseudo_id, StyleResolver::kAllCSSRules);
+
+  for (PseudoId pseudo_id = kFirstPublicPseudoId;
+       pseudo_id < kAfterLastInternalPseudoId;
+       pseudo_id = static_cast<PseudoId>(pseudo_id + 1)) {
+    if (!PseudoElement::IsWebExposed(pseudo_id, element_))
+      continue;
+    // If the pseudo-element doesn't exist, exclude UA rules to avoid cluttering
+    // all elements.
+    unsigned rules_to_include = element_->GetPseudoElement(pseudo_id)
+                                    ? StyleResolver::kAllCSSRules
+                                    : StyleResolver::kAllButUACSSRules;
+    RuleIndexList* matched_rules = style_resolver.PseudoCSSRulesForElement(
+        element_, pseudo_id, rules_to_include);
+    if (matched_rules && matched_rules->size()) {
+      InspectorCSSMatchedRules* match =
+          MakeGarbageCollected<InspectorCSSMatchedRules>();
+      match->element = element_;
+      match->matched_rules = matched_rules;
+      match->pseudo_id = pseudo_id;
+      pseudo_element_rules_.push_back(match);
+    }
+  }
+
+  // Parent rules.
+  // TODO (alexrudenko): Use the flat-tree parent (FlatTreeTraversal::Parent)
+  // (not ParentOrShadowHostElement).
+  Element* parent_element = element_->ParentOrShadowHostElement();
+  while (parent_element) {
+    RuleIndexList* parent_matched_rules = style_resolver.CssRulesForElement(
+        parent_element, StyleResolver::kAllCSSRules);
+    InspectorCSSMatchedRules* match =
+        MakeGarbageCollected<InspectorCSSMatchedRules>();
+    match->element = parent_element;
+    match->matched_rules = parent_matched_rules;
+    match->pseudo_id = kPseudoIdNone;
+    parent_rules_.push_back(match);
+    parent_element = parent_element->ParentOrShadowHostElement();
+  }
+}
+
+RuleIndexList* InspectorCSSCascade::MatchedRules() const {
+  return matched_rules_;
+}
+
+HeapVector<Member<InspectorCSSMatchedRules>>
+InspectorCSSCascade::PseudoElementRules() {
+  return pseudo_element_rules_;
+}
+
+HeapVector<Member<InspectorCSSMatchedRules>>
+InspectorCSSCascade::ParentRules() {
+  return parent_rules_;
+}
+
+// This method does not handle different style origins/CSS variables/rule
+// priorities.
+// TODO (alexrudenko): Use real cascaded value (blocked on a better StyleEngine
+// API).
+const CSSValue* InspectorCSSCascade::GetCascadedProperty(
+    CSSPropertyID property_id) const {
+  DCHECK_NE(property_id, CSSPropertyID::kVariable);
+  if (const CSSValue* result =
+          GetPropertyValueFromStyle(element_->style(), property_id)) {
+    return result;
+  }
+
+  if (const CSSValue* result =
+          GetPropertyValueFromRuleIndexList(MatchedRules(), property_id)) {
+    return result;
+  }
+
+  return nullptr;
+}
+
+const CSSValue* InspectorCSSCascade::GetPropertyValueFromStyle(
+    CSSStyleDeclaration* style,
+    CSSPropertyID property_id) const {
+  if (!style)
+    return nullptr;
+  return style->GetPropertyCSSValueInternal(property_id);
+}
+
+const CSSValue* InspectorCSSCascade::GetPropertyValueFromRuleIndexList(
+    RuleIndexList* list,
+    CSSPropertyID property_id) const {
+  for (auto it = list->rbegin(); it != list->rend(); ++it) {
+    CSSRule* rule = it->first;
+    CSSStyleRule* style_rule = DynamicTo<CSSStyleRule>(rule);
+    if (!style_rule)
+      continue;
+    if (const CSSValue* result =
+            GetPropertyValueFromStyle(style_rule->style(), property_id)) {
+      return result;
+    }
+  }
+  return nullptr;
+}
+
+}  // namespace blink

third_party/blink/renderer/core/inspector/inspector_css_cascade.h

+// 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.
+
+#ifndef THIRD_PARTY_BLINK_RENDERER_CORE_INSPECTOR_INSPECTOR_CSS_CASCADE_H_
+#define THIRD_PARTY_BLINK_RENDERER_CORE_INSPECTOR_INSPECTOR_CSS_CASCADE_H_
+
+#include "third_party/blink/renderer/core/core_export.h"
+#include "third_party/blink/renderer/core/css/css_rule_list.h"
+#include "third_party/blink/renderer/core/css/css_style_declaration.h"
+#include "third_party/blink/renderer/core/css/css_value.h"
+#include "third_party/blink/renderer/core/css/properties/css_property.h"
+#include "third_party/blink/renderer/core/style/computed_style_constants.h"
+#include "third_party/blink/renderer/platform/heap/handle.h"
+
+namespace blink {
+
+class Element;
+
+// Contains matched rules for an element.
+struct CORE_EXPORT InspectorCSSMatchedRules
+    : public GarbageCollected<InspectorCSSMatchedRules> {
+ public:
+  Member<Element> element;
+  Member<RuleIndexList> matched_rules;
+  PseudoId pseudo_id;
+
+  void Trace(Visitor* visitor) const {
+    visitor->Trace(element);
+    visitor->Trace(matched_rules);
+  }
+};
+
+// Resolves style rules for an element and helps compute cascaded values for
+// inspector use cases.
+class CORE_EXPORT InspectorCSSCascade {
+  STACK_ALLOCATED();
+
+ public:
+  explicit InspectorCSSCascade(Element*, PseudoId);
+  RuleIndexList* MatchedRules() const;
+  HeapVector<Member<InspectorCSSMatchedRules>> PseudoElementRules();
+  HeapVector<Member<InspectorCSSMatchedRules>> ParentRules();
+  const CSSValue* GetCascadedProperty(CSSPropertyID property_id) const;
+
+ private:
+  const CSSValue* GetPropertyValueFromStyle(CSSStyleDeclaration*,
+                                            CSSPropertyID) const;
+  const CSSValue* GetPropertyValueFromRuleIndexList(RuleIndexList*,
+                                                    CSSPropertyID) const;
+
+  Element* element_;
+  RuleIndexList* matched_rules_;
+  HeapVector<Member<InspectorCSSMatchedRules>> parent_rules_;
+  HeapVector<Member<InspectorCSSMatchedRules>> pseudo_element_rules_;
+};
+
+}  // namespace blink
+
+#endif  // THIRD_PARTY_BLINK_RENDERER_CORE_INSPECTOR_INSPECTOR_CSS_CASCADE_H_

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

+// 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.
+
+#include "third_party/blink/renderer/core/inspector/inspector_css_cascade.h"
+
+#include "testing/gtest/include/gtest/gtest.h"
+#include "third_party/blink/renderer/core/css/css_value.h"
+#include "third_party/blink/renderer/core/css/style_engine.h"
+#include "third_party/blink/renderer/core/html/html_element.h"
+#include "third_party/blink/renderer/core/style/computed_style_constants.h"
+#include "third_party/blink/renderer/core/testing/dummy_page_holder.h"
+
+namespace blink {
+
+class InspectorCSSCascadeTest : public testing::Test {
+ protected:
+  void SetUp() override;
+
+  Document& GetDocument() { return dummy_page_holder_->GetDocument(); }
+
+ private:
+  std::unique_ptr<DummyPageHolder> dummy_page_holder_;
+};
+
+void InspectorCSSCascadeTest::SetUp() {
+  dummy_page_holder_ = std::make_unique<DummyPageHolder>(IntSize(800, 600));
+}
+
+TEST_F(InspectorCSSCascadeTest, DirectlyMatchedRules) {
+  GetDocument().body()->setInnerHTML(R"HTML(
+    <style>
+      #grid {
+        display: grid;
+        grid-gap: 10px;
+        grid-template-columns: 100px 1fr 20%;
+      }
+    </style>
+    <div id="grid">
+    </div>
+  )HTML");
+  Element* grid = GetDocument().getElementById("grid");
+  InspectorCSSCascade cascade(grid, kPseudoIdNone);
+  const CSSValue* value =
+      cascade.GetCascadedProperty(CSSPropertyID::kGridTemplateColumns);
+  const CSSValueList* value_list = DynamicTo<CSSValueList>(value);
+  EXPECT_EQ((unsigned)3, value_list->length());
+  EXPECT_EQ("100px", value_list->Item(0).CssText());
+  EXPECT_EQ("1fr", value_list->Item(1).CssText());
+  EXPECT_EQ("20%", value_list->Item(2).CssText());
+}
+
+}  // namespace blink

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

@@ -7,13 +7,17 @@
 #include "base/macros.h"
 #include "third_party/blink/renderer/core/css/css_color_value.h"
 #include "third_party/blink/renderer/core/css/css_computed_style_declaration.h"
+#include "third_party/blink/renderer/core/css/css_grid_auto_repeat_value.h"
+#include "third_party/blink/renderer/core/css/css_grid_integer_repeat_value.h"
 #include "third_party/blink/renderer/core/css/css_property_names.h"
+#include "third_party/blink/renderer/core/css/css_value.h"
 #include "third_party/blink/renderer/core/display_lock/display_lock_utilities.h"
 #include "third_party/blink/renderer/core/dom/pseudo_element.h"
 #include "third_party/blink/renderer/core/frame/local_frame_view.h"
 #include "third_party/blink/renderer/core/frame/visual_viewport.h"
 #include "third_party/blink/renderer/core/geometry/dom_rect.h"
 #include "third_party/blink/renderer/core/inspector/dom_traversal_utils.h"
+#include "third_party/blink/renderer/core/inspector/inspector_css_cascade.h"
 #include "third_party/blink/renderer/core/inspector/inspector_dom_agent.h"
 #include "third_party/blink/renderer/core/layout/adjust_for_absolute_zoom.h"
 #include "third_party/blink/renderer/core/layout/geometry/physical_offset.h"
@@ -409,7 +413,8 @@ std::unique_ptr<protocol::ListValue> BuildGridTrackSizes(
     LayoutGrid* layout_grid,
     GridTrackSizingDirection direction,
     float scale,
-    LayoutUnit gap) {
+    LayoutUnit gap,
+    const Vector<String>* authored_values) {
   std::unique_ptr<protocol::ListValue> sizes = protocol::ListValue::create();
   const Vector<LayoutUnit>& positions = direction == kForRows
                                             ? layout_grid->RowPositions()
@@ -429,6 +434,9 @@ std::unique_ptr<protocol::ListValue> BuildGridTrackSizes(
     auto adjusted_size = AdjustForAbsoluteZoom::AdjustFloat(
         width * scale, layout_grid->StyleRef());
     size_info->setDouble("computedSize", adjusted_size);
+    if (i - 1 < authored_values->size()) {
+      size_info->setString("authoredSize", authored_values->at(i - 1));
+    }
     PhysicalOffset local_arrow_pos(
         direction == kForColumns ? label_pos : first_offset,
         direction == kForColumns ? first_offset : label_pos);
@@ -606,12 +614,69 @@ int GetRotationAngle(LayoutGrid* layout_grid) {
   return bearing - local_vector_bearing;
 }
 
+// Gets the list of authored track size values resolving repeat() functions
+// and skipping line names.
+Vector<String> GetAuthoredGridTrackSizes(const CSSValue* value,
+                                         size_t auto_repeat_count) {
+  Vector<String> result;
+
+  if (!value)
+    return result;
+
+  // TODO (alexrudenko): this would not handle track sizes defined using CSS
+  // variables.
+  const CSSValueList* value_list = DynamicTo<CSSValueList>(value);
+
+  if (!value_list)
+    return result;
+
+  for (auto list_value : *value_list) {
+    if (auto* grid_auto_repeat_value =
+            DynamicTo<cssvalue::CSSGridAutoRepeatValue>(list_value.Get())) {
+      Vector<String> repeated_track_sizes;
+      for (auto auto_repeat_value : To<CSSValueList>(*list_value)) {
+        if (!auto_repeat_value->IsGridLineNamesValue())
+          repeated_track_sizes.push_back(auto_repeat_value->CssText());
+      }
+      // There could be only one auto repeat value in a |value_list|, therefore,
+      // resetting auto_repeat_count to zero after inserting repeated values.
+      for (; auto_repeat_count; --auto_repeat_count)
+        result.AppendVector(repeated_track_sizes);
+      continue;
+    }
+
+    if (auto* repeated_values =
+            DynamicTo<cssvalue::CSSGridIntegerRepeatValue>(list_value.Get())) {
+      size_t repetitions = repeated_values->Repetitions();
+      for (size_t i = 0; i < repetitions; ++i) {
+        for (auto repeated_value : *repeated_values) {
+          if (repeated_value->IsGridLineNamesValue())
+            continue;
+          result.push_back(repeated_value->CssText());
+        }
+      }
+      continue;
+    }
+
+    if (list_value->IsGridLineNamesValue())
+      continue;
+
+    result.push_back(list_value->CssText());
+  }
+
+  return result;
+}
+
 std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
-    LocalFrameView* containing_view,
-    LayoutGrid* layout_grid,
+    Node* node,
     const InspectorGridHighlightConfig& grid_highlight_config,
     float scale,
     bool isPrimary) {
+  LocalFrameView* containing_view = node->GetDocument().View();
+  LayoutObject* layout_object = node->GetLayoutObject();
+  DCHECK(layout_object);
+  LayoutGrid* layout_grid = ToLayoutGrid(layout_object);
+
   std::unique_ptr<protocol::DictionaryValue> grid_info =
       protocol::DictionaryValue::create();
 
@@ -626,12 +691,25 @@ std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
                     layout_grid->GridItemOffset(kForColumns);
 
   if (grid_highlight_config.show_track_sizes) {
+    Element* element = DynamicTo<Element>(node);
+    DCHECK(element);
+    InspectorCSSCascade cascade(element, kPseudoIdNone);
+    // TODO (alexrudenko): caching might be required. Currently, the style
+    // resolver is used only for grid layouts when show_track_sizes is on.
+    Vector<String> column_authored_values = GetAuthoredGridTrackSizes(
+        cascade.GetCascadedProperty(CSSPropertyID::kGridTemplateColumns),
+        layout_grid->AutoRepeatCountForDirection(kForColumns));
+    Vector<String> row_authored_values = GetAuthoredGridTrackSizes(
+        cascade.GetCascadedProperty(CSSPropertyID::kGridTemplateRows),
+        layout_grid->AutoRepeatCountForDirection(kForRows));
+
     grid_info->setValue(
         "columnTrackSizes",
-        BuildGridTrackSizes(layout_grid, kForColumns, scale, column_gap));
-    grid_info->setValue(
-        "rowTrackSizes",
-        BuildGridTrackSizes(layout_grid, kForRows, scale, row_gap));
+        BuildGridTrackSizes(layout_grid, kForColumns, scale, column_gap,
+                            &column_authored_values));
+    grid_info->setValue("rowTrackSizes",
+                        BuildGridTrackSizes(layout_grid, kForRows, scale,
+                                            row_gap, &row_authored_values));
   }
 
   PathBuilder row_builder;
@@ -744,8 +822,7 @@ std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
 }
 
 std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
-    LocalFrameView* containing_view,
-    LayoutGrid* layout_grid,
+    Node* node,
     const InspectorHighlightConfig& highlight_config,
     float scale,
     bool isPrimary) {
@@ -755,12 +832,10 @@ std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
         std::make_unique<InspectorGridHighlightConfig>();
     grid_config->cell_color = highlight_config.css_grid;
     grid_config->cell_border_dash = true;
-    return BuildGridInfo(containing_view, layout_grid, *grid_config, scale,
-                         isPrimary);
+    return BuildGridInfo(node, *grid_config, scale, isPrimary);
   }
 
-  return BuildGridInfo(containing_view, layout_grid,
-                       *(highlight_config.grid_highlight_config), scale,
+  return BuildGridInfo(node, *(highlight_config.grid_highlight_config), scale,
                        isPrimary);
 }
 
@@ -1201,9 +1276,7 @@ void InspectorHighlight::AppendNodeHighlight(
   }
   grid_info_ = protocol::ListValue::create();
   if (layout_object->IsLayoutGrid()) {
-    grid_info_->pushValue(BuildGridInfo(node->GetDocument().View(),
-                                        ToLayoutGrid(layout_object),
-                                        highlight_config, scale_, true));
+    grid_info_->pushValue(BuildGridInfo(node, highlight_config, scale_, true));
   }
 }
 
@@ -1392,8 +1465,7 @@ std::unique_ptr<protocol::DictionaryValue> InspectorGridHighlight(
     return nullptr;
 
   std::unique_ptr<protocol::DictionaryValue> grid_info =
-      BuildGridInfo(node->GetDocument().View(), ToLayoutGrid(layout_object),
-                    config, scale, true);
+      BuildGridInfo(node, config, scale, true);
   return grid_info;
 }
 

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

@@ -101,11 +101,13 @@ grid-with-areas{
       "columnTrackSizes": [
         {
           "computedSize": 195.5,
+          "authoredSize": "1fr",
           "x": 97.75,
           "y": 0
         },
         {
           "computedSize": 195.5,
+          "authoredSize": "1fr",
           "x": 303.25,
           "y": 0
         }
@@ -113,11 +115,13 @@ grid-with-areas{
       "rowTrackSizes": [
         {
           "computedSize": 295.5,
+          "authoredSize": "1fr",
           "x": 0,
           "y": 147.75
         },
         {
           "computedSize": 295.5,
+          "authoredSize": "1fr",
           "x": 0,
           "y": 453.25
         }

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

@@ -102,11 +102,13 @@ paddedGrid{
       "columnTrackSizes": [
         {
           "computedSize": 50,
+          "authoredSize": "50px",
           "x": 173,
           "y": 383
         },
         {
           "computedSize": 200,
+          "authoredSize": "20%",
           "x": 173,
           "y": 233
         }
@@ -363,11 +365,13 @@ nestedGrid{
       "columnTrackSizes": [
         {
           "computedSize": 50,
+          "authoredSize": "50px",
           "x": 228,
           "y": 1083
         },
         {
           "computedSize": 200,
+          "authoredSize": "20%",
           "x": 228,
           "y": 958
         }

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

@@ -101,16 +101,19 @@ grid-with-line-names{
       "columnTrackSizes": [
         {
           "computedSize": 100,
+          "authoredSize": "100px",
           "x": 50,
           "y": 0
         },
         {
           "computedSize": 500,
+          "authoredSize": "500px",
           "x": 360,
           "y": 0
         },
         {
           "computedSize": 20,
+          "authoredSize": "20px",
           "x": 630,
           "y": 0
         }
@@ -118,21 +121,25 @@ grid-with-line-names{
       "rowTrackSizes": [
         {
           "computedSize": 200,
+          "authoredSize": "200px",
           "x": 0,
           "y": 100
         },
         {
           "computedSize": 200,
+          "authoredSize": "200px",
           "x": 0,
           "y": 310
         },
         {
           "computedSize": 200,
+          "authoredSize": "200px",
           "x": 0,
           "y": 520
         },
         {
           "computedSize": 200,
+          "authoredSize": "200px",
           "x": 0,
           "y": 730
         }

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

@@ -7,11 +7,13 @@ This test verifies the position and size of the highlight rectangles overlayed o
       "columnTrackSizes": [
         {
           "computedSize": 50,
+          "authoredSize": "50px",
           "x": 173,
           "y": 383
         },
         {
           "computedSize": 200,
+          "authoredSize": "20%",
           "x": 173,
           "y": 233
         }
@@ -169,11 +171,13 @@ This test verifies the position and size of the highlight rectangles overlayed o
       "columnTrackSizes": [
         {
           "computedSize": 50,
+          "authoredSize": "50px",
           "x": 108,
           "y": 1183
         },
         {
           "computedSize": 1200,
+          "authoredSize": "1200px",
           "x": 108,
           "y": 508
         }