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": "LayoutFlexibleBox",
"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": "LayoutFlexibleBox",
"showAccessibilityInfo": true
},
"flexInfo": [
{
"containerBorder": [
"M",
100,
100,
"L",
500,
100,
"L",
500,
500,
"L",
100,
500,
"Z"
],
"lines": [
[
{
"itemBorder": [
"M",
180,
100,
"L",
280,
100,
"L",
280,
200,
"L",
180,
200,
"Z"
],
"baseline": 100
},
{
"itemBorder": [
"M",
290,
100,
"L",
390,
100,
"L",
390,
200,
"L",
290,
200,
"Z"
],
"baseline": 100
},
{
"itemBorder": [
"M",
400,
100,
"L",
500,
100,
"L",
500,
200,
"L",
400,
200,
"Z"
],
"baseline": 100
}
],
[
{
"itemBorder": [
"M",
290,
220,
"L",
390,
220,
"L",
390,
320,
"L",
290,
320,
"Z"
],
"baseline": 100
},
{
"itemBorder": [
"M",
400,
220,
"L",
500,
220,
"L",
500,
320,
"L",
400,
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": "LayoutFlexibleBox",
"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": 0
},
{
"itemBorder": [
"M",
100,
220,
"L",
200,
220,
"L",
200,
320,
"L",
100,
320,
"Z"
],
"baseline": 0
},
{
"itemBorder": [
"M",
100,
340,
"L",
200,
340,
"L",
200,
440,
"L",
100,
440,
"Z"
],
"baseline": 0
}
],
[
{
"itemBorder": [
"M",
210,
100,
"L",
310,
100,
"L",
310,
200,
"L",
210,
200,
"Z"
],
"baseline": 0
},
{
"itemBorder": [
"M",
210,
220,
"L",
310,
220,
"L",
310,
320,
"L",
210,
320,
"Z"
],
"baseline": 0
}
]
],
"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": "LayoutFlexibleBox",
"showAccessibilityInfo": true
},
"flexInfo": [
{
"containerBorder": [
"M",
100,
100,
"L",
500,
100,
"L",
500,
500,
"L",
100,
500,
"Z"
],
"lines": [
[
{
"itemBorder": [
"M",
100,
160,
"L",
200,
160,
"L",
200,
260,
"L",
100,
260,
"Z"
],
"baseline": 0
},
{
"itemBorder": [
"M",
100,
280,
"L",
200,
280,
"L",
200,
380,
"L",
100,
380,
"Z"
],
"baseline": 0
},
{
"itemBorder": [
"M",
100,
400,
"L",
200,
400,
"L",
200,
500,
"L",
100,
500,
"Z"
],
"baseline": 0
}
],
[
{
"itemBorder": [
"M",
210,
280,
"L",
310,
280,
"L",
310,
380,
"L",
210,
380,
"Z"
],
"baseline": 0
},
{
"itemBorder": [
"M",
210,
400,
"L",
310,
400,
"L",
310,
500,
"L",
210,
500,
"Z"
],
"baseline": 0
}
]
],
"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"
}
}
}
]
}
Codebase Browser
chromium