Match grid direction when highlighting a grid with Inspector Tool

In the current master state the grid highlighted by Inspector Tool
is always being calculated and rendered with direction:ltr, regardless
of its CSS direction property.

This CL adds getColumnPosition function, that checks if grid's
direction is ltr or rtl. If direction is rtl, it translates
the coordinates to rtl.
getColumnPosition is then called by BuildGridInfo to evaluate
PhysicalOffset and PhysicalSize when painting the grid.

BUG=1086923

Change-Id: Ic43463b9aa643358d2ad06e2a6f4f7755c6c48f8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2213530
Commit-Queue: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Cr-Commit-Position: refs/heads/master@{#797646}

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

@@ -718,6 +718,13 @@ Vector<String> GetAuthoredGridTrackSizes(const CSSValue* value,
   return result;
 }
 
+LayoutUnit GetColumnPosition(const LayoutGrid* layout_grid, size_t index) {
+  LayoutUnit position = layout_grid->ColumnPositions().at(index);
+  return layout_grid->StyleRef().IsLeftToRightDirection()
+             ? position
+             : layout_grid->TranslateRTLCoordinate(position);
+}
+
 std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
     Node* node,
     const InspectorGridHighlightConfig& grid_highlight_config,
@@ -796,21 +803,27 @@ std::unique_ptr<protocol::DictionaryValue> BuildGridInfo(
   PathBuilder column_gap_builder;
   LayoutUnit column_top = rows.front();
   LayoutUnit column_height = rows.back() - rows.front();
+  bool is_ltr = layout_grid->StyleRef().IsLeftToRightDirection();
   for (size_t i = 1; i < columns.size(); ++i) {
-    PhysicalOffset position(columns.at(i - 1), column_top);
     PhysicalSize size(columns.at(i) - columns.at(i - 1), column_height);
     if (i != columns.size() - 1)
       size.width -= column_gap;
+    LayoutUnit line_left =
+        is_ltr ? GetColumnPosition(layout_grid, i - 1)
+               : GetColumnPosition(layout_grid, i - 1) - size.width;
+    PhysicalOffset position(line_left, column_top);
     PhysicalRect column(position, size);
     FloatQuad column_quad = layout_grid->LocalRectToAbsoluteQuad(column);
     FrameQuadToViewport(containing_view, column_quad);
+    bool draw_end_line = is_ltr ? i == columns.size() - 1 : i == 1;
     column_builder.AppendPath(
-        ColumnQuadToPath(column_quad,
-                         i == columns.size() - 1 || column_gap > 0),
-        scale);
+        ColumnQuadToPath(column_quad, draw_end_line || column_gap > 0), scale);
     // Column Gaps
     if (i != columns.size() - 1) {
-      PhysicalOffset gap_position(columns.at(i) - column_gap, column_top);
+      LayoutUnit gap_left = is_ltr
+                                ? GetColumnPosition(layout_grid, i) - column_gap
+                                : GetColumnPosition(layout_grid, i);
+      PhysicalOffset gap_position(gap_left, column_top);
       PhysicalSize gap_size(column_gap, column_height);
       PhysicalRect gap(gap_position, gap_size);
       FloatQuad gap_quad = layout_grid->LocalRectToAbsoluteQuad(gap);

third_party/blink/renderer/core/layout/layout_grid.h

@@ -92,6 +92,8 @@ class LayoutGrid final : public LayoutBlock {
     return grid_->ExplicitGridStart(direction);
   }
 
+  LayoutUnit TranslateRTLCoordinate(LayoutUnit) const;
+
   LayoutUnit TranslateOutOfFlowRTLCoordinate(const LayoutBox&,
                                              LayoutUnit) const;
 
@@ -297,8 +299,6 @@ class LayoutGrid final : public LayoutBlock {
   size_t NonCollapsedTracks(GridTrackSizingDirection) const;
   size_t NumTracks(GridTrackSizingDirection, const Grid&) const;
 
-  LayoutUnit TranslateRTLCoordinate(LayoutUnit) const;
-
   static LayoutUnit OverrideContainingBlockContentSizeForChild(
       const LayoutBox& child,
       GridTrackSizingDirection);

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-grid-direction.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 grids with direction rtl and ltr are correctly highlighted.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+      <style>
+      .grid {
+        position: absolute;
+	top: 44px;
+	left: 8px;
+        grid-template-columns: 20px 50px;
+        grid-template-rows: 100px;
+        width: 100px;
+        display: grid;
+      }
+      .ltr-dir {
+        direction: ltr;
+      }
+      .rtl-dir {
+        direction: rtl;
+      }
+      .with-gap {
+        grid-gap: 1em;
+      }
+      </style>
+
+      <p id="description">This test verifies that grids with direction rtl and ltr are correctly highlighted.</p>
+      <div>
+          <div class="grid ltr-dir" id="ltrGrid">
+              <div style="background: burlywood"></div>
+              <div style="background: cadetblue"></div>
+          </div>
+          <div class="grid rtl-dir" id="rtlGrid">
+              <div style="background: burlywood"></div>
+              <div style="background: cadetblue"></div>
+          </div>
+          <div class="grid ltr-dir with-gap" id="ltrGridGap">
+              <div style="background: burlywood"></div>
+              <div style="background: cadetblue"></div>
+          </div>
+          <div class="grid rtl-dir with-gap" id="rtlGridGap">
+              <div style="background: burlywood"></div>
+              <div style="background: cadetblue"></div>
+          </div>
+      </div>
+`);
+  function dumpGridHighlight(id) {
+    return new Promise(resolve => ElementsTestRunner.dumpInspectorHighlightJSON(id, resolve));
+  }
+
+  await dumpGridHighlight('ltrGrid');
+  await dumpGridHighlight('rtlGrid');
+  await dumpGridHighlight('ltrGridGap');
+  await dumpGridHighlight('rtlGridGap');
+
+  TestRunner.completeTest();
+})();