DevTools: Provide gap information to the devtools overlay frontend

With this extra piece of information, the overlay frontend can now show
how tall or wide gaps in a flex container are, from DevTools.

Corresponding devtools CL:
https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2579039/

Bug: 1150832
Change-Id: Ia001a4950658624219bef05f169f2ec11566ec56
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2582260
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Cr-Commit-Position: refs/heads/master@{#835616}

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

@@ -9,6 +9,7 @@
 #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_numeric_literal_value.h"
 #include "third_party/blink/renderer/core/css/css_property_name.h"
 #include "third_party/blink/renderer/core/css/css_property_names.h"
 #include "third_party/blink/renderer/core/css/css_value.h"
@@ -992,9 +993,29 @@ std::unique_ptr<protocol::DictionaryValue> BuildFlexInfo(
   flex_info->setValue("containerBorder", container_builder.Release());
   flex_info->setArray("lines", std::move(lines_info));
   flex_info->setBoolean("isHorizontalFlow", is_horizontal);
+  flex_info->setBoolean("isReverse", is_reverse);
   flex_info->setString(
       "alignItemsStyle",
       style->GetPropertyCSSValue(CSSPropertyID::kAlignItems)->CssText());
+
+  double row_gap_value = 0;
+  const CSSValue* row_gap = style->GetPropertyCSSValue(CSSPropertyID::kRowGap);
+  if (row_gap->IsNumericLiteralValue()) {
+    row_gap_value = To<CSSNumericLiteralValue>(row_gap)->DoubleValue();
+  }
+
+  double column_gap_value = 0;
+  const CSSValue* column_gap =
+      style->GetPropertyCSSValue(CSSPropertyID::kColumnGap);
+  if (column_gap->IsNumericLiteralValue()) {
+    column_gap_value = To<CSSNumericLiteralValue>(column_gap)->DoubleValue();
+  }
+
+  flex_info->setDouble("mainGap",
+                       is_horizontal ? column_gap_value : row_gap_value);
+  flex_info->setDouble("crossGap",
+                       is_horizontal ? row_gap_value : column_gap_value);
+
   flex_info->setValue(
       "flexContainerHighlightConfig",
       BuildFlexContainerHighlightConfigInfo(flex_container_highlight_config));

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

@@ -136,7 +136,10 @@ flex-start{
         ]
       ],
       "isHorizontalFlow": true,
+      "isReverse": false,
       "alignItemsStyle": "flex-start",
+      "mainGap": 0,
+      "crossGap": 0,
       "flexContainerHighlightConfig": {
         "containerBorder": {
           "color": "rgba(255, 0, 0, 0)",
@@ -310,7 +313,10 @@ flex-end{
         ]
       ],
       "isHorizontalFlow": true,
+      "isReverse": false,
       "alignItemsStyle": "flex-end",
+      "mainGap": 0,
+      "crossGap": 0,
       "flexContainerHighlightConfig": {
         "containerBorder": {
           "color": "rgba(255, 0, 0, 0)",
@@ -484,7 +490,10 @@ center{
         ]
       ],
       "isHorizontalFlow": true,
+      "isReverse": false,
       "alignItemsStyle": "center",
+      "mainGap": 0,
+      "crossGap": 0,
       "flexContainerHighlightConfig": {
         "containerBorder": {
           "color": "rgba(255, 0, 0, 0)",
@@ -658,7 +667,10 @@ stretch{
         ]
       ],
       "isHorizontalFlow": true,
+      "isReverse": false,
       "alignItemsStyle": "stretch",
+      "mainGap": 0,
+      "crossGap": 0,
       "flexContainerHighlightConfig": {
         "containerBorder": {
           "color": "rgba(255, 0, 0, 0)",
@@ -832,7 +844,10 @@ normal{
         ]
       ],
       "isHorizontalFlow": true,
+      "isReverse": false,
       "alignItemsStyle": "normal",
+      "mainGap": 0,
+      "crossGap": 0,
       "flexContainerHighlightConfig": {
         "containerBorder": {
           "color": "rgba(255, 0, 0, 0)",

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

@@ -171,7 +171,10 @@ flex-container{
         ]
       ],
       "isHorizontalFlow": true,
+      "isReverse": false,
       "alignItemsStyle": "normal",
+      "mainGap": 0,
+      "crossGap": 0,
       "flexContainerHighlightConfig": {
         "containerBorder": {
           "color": "rgba(255, 0, 0, 0)",

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

+This test verifies the gap information sent to the overlay frontend for flex contains with gaps.
+
+test-1{
+  "paths": [
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "showAccessibilityInfo": true,
+  "colorFormat": "hex",
+  "elementInfo": {
+    "tagName": "div",
+    "idValue": "test-1",
+    "className": ".container",
+    "nodeWidth": "400",
+    "nodeHeight": "400",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic",
+    "layoutObjectName": "LayoutNGFlexibleBox",
+    "showAccessibilityInfo": true
+  },
+  "flexInfo": [
+    {
+      "containerBorder": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "lines": [
+        [
+          {
+            "itemBorder": [
+              "M",
+              100,
+              100,
+              "L",
+              200,
+              100,
+              "L",
+              200,
+              200,
+              "L",
+              100,
+              200,
+              "Z"
+            ],
+            "baseline": 100
+          },
+          {
+            "itemBorder": [
+              "M",
+              210,
+              100,
+              "L",
+              310,
+              100,
+              "L",
+              310,
+              200,
+              "L",
+              210,
+              200,
+              "Z"
+            ],
+            "baseline": 100
+          },
+          {
+            "itemBorder": [
+              "M",
+              320,
+              100,
+              "L",
+              420,
+              100,
+              "L",
+              420,
+              200,
+              "L",
+              320,
+              200,
+              "Z"
+            ],
+            "baseline": 100
+          }
+        ],
+        [
+          {
+            "itemBorder": [
+              "M",
+              100,
+              220,
+              "L",
+              200,
+              220,
+              "L",
+              200,
+              320,
+              "L",
+              100,
+              320,
+              "Z"
+            ],
+            "baseline": 100
+          },
+          {
+            "itemBorder": [
+              "M",
+              210,
+              220,
+              "L",
+              310,
+              220,
+              "L",
+              310,
+              320,
+              "L",
+              210,
+              320,
+              "Z"
+            ],
+            "baseline": 100
+          }
+        ]
+      ],
+      "isHorizontalFlow": true,
+      "isReverse": false,
+      "alignItemsStyle": "normal",
+      "mainGap": 10,
+      "crossGap": 20,
+      "flexContainerHighlightConfig": {
+        "containerBorder": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        },
+        "lineSeparator": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        },
+        "itemSeparator": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        },
+        "mainDistributedSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "crossDistributedSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "rowGapSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "columnGapSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "crossAlignment": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        }
+      }
+    }
+  ]
+}
+test-2{
+  "paths": [
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "showAccessibilityInfo": true,
+  "colorFormat": "hex",
+  "elementInfo": {
+    "tagName": "div",
+    "idValue": "test-2",
+    "className": ".container",
+    "nodeWidth": "400",
+    "nodeHeight": "400",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic",
+    "layoutObjectName": "LayoutNGFlexibleBox",
+    "showAccessibilityInfo": true
+  },
+  "flexInfo": [
+    {
+      "containerBorder": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "lines": [
+        [
+          {
+            "itemBorder": [
+              "M",
+              400,
+              100,
+              "L",
+              500,
+              100,
+              "L",
+              500,
+              200,
+              "L",
+              400,
+              200,
+              "Z"
+            ],
+            "baseline": 100
+          },
+          {
+            "itemBorder": [
+              "M",
+              290,
+              100,
+              "L",
+              390,
+              100,
+              "L",
+              390,
+              200,
+              "L",
+              290,
+              200,
+              "Z"
+            ],
+            "baseline": 100
+          },
+          {
+            "itemBorder": [
+              "M",
+              180,
+              100,
+              "L",
+              280,
+              100,
+              "L",
+              280,
+              200,
+              "L",
+              180,
+              200,
+              "Z"
+            ],
+            "baseline": 100
+          }
+        ],
+        [
+          {
+            "itemBorder": [
+              "M",
+              400,
+              220,
+              "L",
+              500,
+              220,
+              "L",
+              500,
+              320,
+              "L",
+              400,
+              320,
+              "Z"
+            ],
+            "baseline": 100
+          },
+          {
+            "itemBorder": [
+              "M",
+              290,
+              220,
+              "L",
+              390,
+              220,
+              "L",
+              390,
+              320,
+              "L",
+              290,
+              320,
+              "Z"
+            ],
+            "baseline": 100
+          }
+        ]
+      ],
+      "isHorizontalFlow": true,
+      "isReverse": true,
+      "alignItemsStyle": "normal",
+      "mainGap": 10,
+      "crossGap": 20,
+      "flexContainerHighlightConfig": {
+        "containerBorder": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        },
+        "lineSeparator": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        },
+        "itemSeparator": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        },
+        "mainDistributedSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "crossDistributedSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "rowGapSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "columnGapSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "crossAlignment": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        }
+      }
+    }
+  ]
+}
+test-3{
+  "paths": [
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "showAccessibilityInfo": true,
+  "colorFormat": "hex",
+  "elementInfo": {
+    "tagName": "div",
+    "idValue": "test-3",
+    "className": ".container",
+    "nodeWidth": "400",
+    "nodeHeight": "400",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic",
+    "layoutObjectName": "LayoutNGFlexibleBox",
+    "showAccessibilityInfo": true
+  },
+  "flexInfo": [
+    {
+      "containerBorder": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "lines": [
+        [
+          {
+            "itemBorder": [
+              "M",
+              100,
+              100,
+              "L",
+              200,
+              100,
+              "L",
+              200,
+              200,
+              "L",
+              100,
+              200,
+              "Z"
+            ],
+            "baseline": 100
+          },
+          {
+            "itemBorder": [
+              "M",
+              100,
+              220,
+              "L",
+              200,
+              220,
+              "L",
+              200,
+              320,
+              "L",
+              100,
+              320,
+              "Z"
+            ],
+            "baseline": 100
+          },
+          {
+            "itemBorder": [
+              "M",
+              100,
+              340,
+              "L",
+              200,
+              340,
+              "L",
+              200,
+              440,
+              "L",
+              100,
+              440,
+              "Z"
+            ],
+            "baseline": 100
+          }
+        ],
+        [
+          {
+            "itemBorder": [
+              "M",
+              210,
+              100,
+              "L",
+              310,
+              100,
+              "L",
+              310,
+              200,
+              "L",
+              210,
+              200,
+              "Z"
+            ],
+            "baseline": 100
+          },
+          {
+            "itemBorder": [
+              "M",
+              210,
+              220,
+              "L",
+              310,
+              220,
+              "L",
+              310,
+              320,
+              "L",
+              210,
+              320,
+              "Z"
+            ],
+            "baseline": 100
+          }
+        ]
+      ],
+      "isHorizontalFlow": false,
+      "isReverse": false,
+      "alignItemsStyle": "normal",
+      "mainGap": 20,
+      "crossGap": 10,
+      "flexContainerHighlightConfig": {
+        "containerBorder": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        },
+        "lineSeparator": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        },
+        "itemSeparator": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        },
+        "mainDistributedSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "crossDistributedSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "rowGapSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "columnGapSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "crossAlignment": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        }
+      }
+    }
+  ]
+}
+test-4{
+  "paths": [
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 0, 0, 0)",
+      "outlineColor": "rgba(128, 0, 0, 0)",
+      "name": "content"
+    },
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 255, 0, 0)",
+      "name": "padding"
+    },
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(0, 0, 255, 0)",
+      "name": "border"
+    },
+    {
+      "path": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "fillColor": "rgba(255, 255, 255, 0)",
+      "name": "margin"
+    }
+  ],
+  "showRulers": true,
+  "showExtensionLines": true,
+  "showAccessibilityInfo": true,
+  "colorFormat": "hex",
+  "elementInfo": {
+    "tagName": "div",
+    "idValue": "test-4",
+    "className": ".container",
+    "nodeWidth": "400",
+    "nodeHeight": "400",
+    "isKeyboardFocusable": false,
+    "accessibleName": "",
+    "accessibleRole": "generic",
+    "layoutObjectName": "LayoutNGFlexibleBox",
+    "showAccessibilityInfo": true
+  },
+  "flexInfo": [
+    {
+      "containerBorder": [
+        "M",
+        100,
+        100,
+        "L",
+        500,
+        100,
+        "L",
+        500,
+        500,
+        "L",
+        100,
+        500,
+        "Z"
+      ],
+      "lines": [
+        [
+          {
+            "itemBorder": [
+              "M",
+              100,
+              400,
+              "L",
+              200,
+              400,
+              "L",
+              200,
+              500,
+              "L",
+              100,
+              500,
+              "Z"
+            ],
+            "baseline": 100
+          },
+          {
+            "itemBorder": [
+              "M",
+              100,
+              280,
+              "L",
+              200,
+              280,
+              "L",
+              200,
+              380,
+              "L",
+              100,
+              380,
+              "Z"
+            ],
+            "baseline": 100
+          },
+          {
+            "itemBorder": [
+              "M",
+              100,
+              160,
+              "L",
+              200,
+              160,
+              "L",
+              200,
+              260,
+              "L",
+              100,
+              260,
+              "Z"
+            ],
+            "baseline": 100
+          }
+        ],
+        [
+          {
+            "itemBorder": [
+              "M",
+              210,
+              400,
+              "L",
+              310,
+              400,
+              "L",
+              310,
+              500,
+              "L",
+              210,
+              500,
+              "Z"
+            ],
+            "baseline": 100
+          },
+          {
+            "itemBorder": [
+              "M",
+              210,
+              280,
+              "L",
+              310,
+              280,
+              "L",
+              310,
+              380,
+              "L",
+              210,
+              380,
+              "Z"
+            ],
+            "baseline": 100
+          }
+        ]
+      ],
+      "isHorizontalFlow": false,
+      "isReverse": true,
+      "alignItemsStyle": "normal",
+      "mainGap": 20,
+      "crossGap": 10,
+      "flexContainerHighlightConfig": {
+        "containerBorder": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        },
+        "lineSeparator": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        },
+        "itemSeparator": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        },
+        "mainDistributedSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "crossDistributedSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "rowGapSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "columnGapSpace": {
+          "fillColor": "rgba(255, 0, 0, 0)",
+          "hatchColor": "rgba(255, 0, 0, 0)"
+        },
+        "crossAlignment": {
+          "color": "rgba(255, 0, 0, 0)",
+          "pattern": "solid"
+        }
+      }
+    }
+  ]
+}
+

third_party/blink/web_tests/http/tests/devtools/elements/highlight/highlight-css-flex-gap.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 gap information sent to the overlay frontend for flex contains with gaps.\n`);
+  await TestRunner.loadModule('elements_test_runner');
+  await TestRunner.showPanel('elements');
+  await TestRunner.loadHTML(`
+    <style>
+      .container {
+        position: absolute;
+        top: 100px;
+        left: 100px;
+        width: 400px;
+        height: 400px;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        place-content: start;
+        column-gap: 10px;
+        row-gap: 20px;
+      }
+      .item {
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+    <div class="container" id="test-1" style="flex-direction:row;">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="container" id="test-2" style="flex-direction:row-reverse;">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="container" id="test-3" style="flex-direction:column;">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    <div class="container" id="test-4" style="flex-direction:column-reverse;">
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+      <div class="item"></div>
+    </div>
+    `);
+
+  function dumFlexHighlight(id) {
+    return new Promise(resolve => ElementsTestRunner.dumpInspectorHighlightJSON(id, resolve));
+  }
+
+  await dumFlexHighlight('test-1');
+  await dumFlexHighlight('test-2');
+  await dumFlexHighlight('test-3');
+  await dumFlexHighlight('test-4');
+
+  TestRunner.completeTest();
+})();

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

@@ -227,7 +227,10 @@ flex-container{
         ]
       ],
       "isHorizontalFlow": true,
+      "isReverse": false,
       "alignItemsStyle": "normal",
+      "mainGap": 10,
+      "crossGap": 10,
       "flexContainerHighlightConfig": {
         "containerBorder": {
           "color": "rgba(255, 0, 0, 0)",

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

@@ -172,7 +172,10 @@ test-1{
         ]
       ],
       "isHorizontalFlow": true,
+      "isReverse": true,
       "alignItemsStyle": "flex-start",
+      "mainGap": 10,
+      "crossGap": 10,
       "flexContainerHighlightConfig": {
         "containerBorder": {
           "color": "rgba(255, 0, 0, 0)",
@@ -382,7 +385,10 @@ test-2{
         ]
       ],
       "isHorizontalFlow": false,
+      "isReverse": true,
       "alignItemsStyle": "flex-start",
+      "mainGap": 10,
+      "crossGap": 10,
       "flexContainerHighlightConfig": {
         "containerBorder": {
           "color": "rgba(255, 0, 0, 0)",