DevTools: Avoid including gap breadth when generating grid area paths

DevTools wants to highlight named grid areas in the page, but these
highlights should not include the space reserved for gaps between
tracks.

This change just subtract the gap breadth when building the paths for
the overlay.

Bug: 1100384
Change-Id: I32fe57d80d660941a4eb58112686706d1390c4c7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2278851
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#786222}

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

@@ -476,6 +476,8 @@ std::unique_ptr<protocol::DictionaryValue> BuildAreaNamePaths(
 
   const Vector<LayoutUnit>& rows = layout_grid->RowPositions();
   const Vector<LayoutUnit>& columns = layout_grid->ColumnPositions();
+  LayoutUnit row_gap = layout_grid->GridGap(kForRows);
+  LayoutUnit column_gap = layout_grid->GridGap(kForColumns);
 
   NamedGridAreaMap grid_area_map = layout_grid->StyleRef().NamedGridArea();
   for (const auto& item : grid_area_map) {
@@ -487,8 +489,17 @@ std::unique_ptr<protocol::DictionaryValue> BuildAreaNamePaths(
     LayoutUnit start_row = rows.at(area.rows.StartLine());
     LayoutUnit end_row = rows.at(area.rows.EndLine());
 
+    // Only subtract the gap size if the end line isn't the last line in the
+    // container.
+    LayoutUnit row_gap_offset =
+        area.rows.EndLine() == rows.size() - 1 ? LayoutUnit() : row_gap;
+    LayoutUnit column_gap_offset = area.columns.EndLine() == columns.size() - 1
+                                       ? LayoutUnit()
+                                       : column_gap;
+
     PhysicalOffset position(start_column, start_row);
-    PhysicalSize size(end_column - start_column, end_row - start_row);
+    PhysicalSize size(end_column - start_column - column_gap_offset,
+                      end_row - start_row - row_gap_offset);
     PhysicalRect area_rect(position, size);
     FloatQuad area_quad = layout_grid->LocalRectToAbsoluteQuad(area_rect);
 

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

@@ -105,11 +105,17 @@ grid-with-areas{
         401,
         0,
         "M",
+        401,
+        295.5,
+        "L",
         0,
-        300.5,
+        295.5,
+        "M",
+        0,
+        305.5,
         "L",
         401,
-        300.5,
+        305.5,
         "M",
         401,
         601,
@@ -120,16 +126,16 @@ grid-with-areas{
       "rowGaps": [
         "M",
         0,
-        300.5,
+        295.5,
         "L",
         401,
-        300.5,
+        295.5,
         "L",
         401,
-        300.5,
+        305.5,
         "L",
         0,
-        300.5,
+        305.5,
         "Z"
       ],
       "columns": [
@@ -140,10 +146,16 @@ grid-with-areas{
         0,
         601,
         "M",
-        200.5,
+        195.5,
+        601,
+        "L",
+        195.5,
+        0,
+        "M",
+        205.5,
         0,
         "L",
-        200.5,
+        205.5,
         601,
         "M",
         401,
@@ -154,16 +166,16 @@ grid-with-areas{
       ],
       "columnGaps": [
         "M",
-        200.5,
+        195.5,
         0,
         "L",
-        200.5,
+        205.5,
         0,
         "L",
-        200.5,
+        205.5,
         601,
         "L",
-        200.5,
+        195.5,
         601,
         "Z"
       ],
@@ -197,21 +209,21 @@ grid-with-areas{
           0,
           "L",
           401,
-          300.5,
+          295.5,
           "L",
           0,
-          300.5,
+          295.5,
           "Z"
         ],
         "sidebar": [
           "M",
           0,
-          300.5,
+          305.5,
           "L",
-          200.5,
-          300.5,
+          195.5,
+          305.5,
           "L",
-          200.5,
+          195.5,
           601,
           "L",
           0,
@@ -220,16 +232,16 @@ grid-with-areas{
         ],
         "main": [
           "M",
-          200.5,
-          300.5,
+          205.5,
+          305.5,
           "L",
           401,
-          300.5,
+          305.5,
           "L",
           401,
           601,
           "L",
-          200.5,
+          205.5,
           601,
           "Z"
         ]

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

@@ -20,6 +20,7 @@
             width: 401px;
             height: 601px;
             display: grid;
+            grid-gap: 10px;
             grid-template-columns: 1fr 1fr;
             grid-template-rows: 1fr 1fr;
             grid-template-areas: