inspector_overlay/debug/tool_highlight_grid_sizes.html - devtools/devtools-frontend - Git at Google

 <!--
 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.
 -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Debug</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="/out/Default/resources/inspector_overlay/common.css">
   <script type="module" src="/out/Default/resources/inspector_overlay/tool_highlight.js"></script>
 </head>
 <body>
   <script type="module">
     const viewportWidth = document.documentElement.clientWidth;
     const viewportHeight = document.documentElement.clientHeight;

     dispatch(["setPlatform", "mac"]);
     dispatch(["reset", {
       viewportSize: {
         width: viewportWidth,
         height: viewportHeight,
       },
       deviceScaleFactor: 1,
       pageScaleFactor: 1,
       pageZoomFactor: 1,
       emulationScaleFactor: 1,
       scrollX: 0,
       scrollY: 0,
     }]);

     const info = [
       // rotated
       {"paths":[{"path":["M",207.48318481445312,62.502525329589844,"L",770.3402099609375,625.3594970703125,"L",668.5167846679688,727.1829223632812,"L",105.6598129272461,164.32589721679688,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",207.48318481445312,62.502525329589844,"L",770.3402099609375,625.3594970703125,"L",668.5167846679688,727.1829223632812,"L",105.6598129272461,164.32589721679688,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",207.48318481445312,62.502525329589844,"L",770.3402099609375,625.3594970703125,"L",668.5167846679688,727.1829223632812,"L",105.6598129272461,164.32589721679688,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",207.48318481445312,62.502525329589844,"L",770.3402099609375,625.3594970703125,"L",668.5167846679688,727.1829223632812,"L",105.6598129272461,164.32589721679688,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"showAccessibilityInfo":true,"colorFormat":"hex","elementInfo":{"tagName":"div","idValue":"","className":".wrapper","nodeWidth":"664.68","nodeHeight":"664.68","isKeyboardFocusable":false,"accessibleName":"","accessibleRole":"generic","layoutObjectName":"LayoutGrid","style":{"color":"#444444FF","font-family":"\"Times New Roman\"","font-size":"16px","line-height":"normal","padding":"0px","margin":"0px","background-color":"#FFFFFFFF"},"showAccessibilityInfo":true},"gridInfo":[{"rotationAngle":45,"columnTrackSizes":[{"computedSize":100,"x":242.83853149414062,"y":97.85786437988281},{"computedSize":100,"x":320.6202697753906,"y":175.63961791992188},{"computedSize":100,"x":398.4020080566406,"y":253.42135620117188}],"rowTrackSizes":[{"computedSize":67,"x":183.79510498046875,"y":86.19060516357422},{"computedSize":67,"x":129.34788513183594,"y":140.6378173828125}],"rows":["M",207.48318481445312,62.502525329589844,"L",433.7573547363281,288.7767028808594,"M",386.3811950683594,336.1528625488281,"L",160.10704040527344,109.87867736816406,"M",153.0359649658203,116.94974517822266,"L",379.3101501464844,343.2239074707031,"M",331.9339904785156,390.6000671386719,"L",105.6598129272461,164.32589721679688],"rowGaps":["M",160.10704040527344,109.87867736816406,"L",386.3811950683594,336.1528625488281,"L",379.3101501464844,343.2239074707031,"L",153.0359649658203,116.94974517822266,"Z"],"columns":["M",207.48318481445312,62.502525329589844,"L",105.6598129272461,164.32589721679688,"M",176.3704833984375,235.0365753173828,"L",278.1938781738281,133.2132110595703,"M",285.2649230957031,140.28427124023438,"L",183.44155883789062,242.10765075683594,"M",254.15223693847656,312.8183288574219,"L",355.9756164550781,210.9949493408203,"M",363.04669189453125,218.06602478027344,"L",261.2232971191406,319.889404296875,"M",331.9339904785156,390.6000671386719,"L",433.7573547363281,288.7767028808594],"columnGaps":["M",278.1938781738281,133.2132110595703,"L",285.2649230957031,140.28427124023438,"L",183.44155883789062,242.10765075683594,"L",176.3704833984375,235.0365753173828,"Z","M",355.9756164550781,210.9949493408203,"L",363.04669189453125,218.06602478027344,"L",261.2232971191406,319.889404296875,"L",254.15223693847656,312.8183288574219,"Z"],"positiveRowLineNumberOffsets":[0,72,144],"positiveColumnLineNumberOffsets":[0,105,215,320],"negativeRowLineNumberOffsets":[0],"negativeColumnLineNumberOffsets":[0,105,215,320],"gridBorder":["M",207.48318481445312,62.502525329589844,"L",433.7573547363281,288.7767028808594,"L",331.9339904785156,390.6000671386719,"L",105.6598129272461,164.32589721679688,"Z"],"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"showAreaNames":false,"showTrackSizes":true,"rowLineColor":"#9334e6","columnLineColor":"#9334e6","rowHatchColor":"rgba(127, 32, 210, 0.8)","columnHatchColor":"rgba(127, 32, 210, 0.8)","areaBorderColor":"#1a73e8"},"isPrimaryGrid":true}]},
       // with authored sizes
       {"paths":[{"path":["M",140,40,"L",739.390625,40,"L",739.390625,184,"L",140,184,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",140,40,"L",739.390625,40,"L",739.390625,184,"L",140,184,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",140,40,"L",739.390625,40,"L",739.390625,184,"L",140,184,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",140,40,"L",739.390625,40,"L",739.390625,184,"L",140,184,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"showAccessibilityInfo":true,"colorFormat":"hex","elementInfo":{"tagName":"div","idValue":"","className":".wrapper","nodeWidth":"599.391","nodeHeight":"144","isKeyboardFocusable":false,"accessibleName":"","accessibleRole":"generic","layoutObjectName":"LayoutGrid","style":{"color":"#444444FF","font-family":"\"Times New Roman\"","font-size":"16px","line-height":"normal","padding":"0px","margin":"0px","background-color":"#FFFFFFFF"},"showAccessibilityInfo":true},"gridInfo":[{"rotationAngle":0,"columnTrackSizes":[{"computedSize":193.125,"authoredSize":"1fr","x":236.5625,"y":40},{"computedSize":193.125,"authoredSize":"1fr","x":439.6875,"y":40},{"computedSize":193.125,"authoredSize":"1fr","x":642.8125,"y":40}],"rowTrackSizes":[{"computedSize":67,"x":140,"y":73.5},{"computedSize":67,"x":140,"y":150.5}],"rows":["M",140,40,"L",739.375,40,"M",739.375,107,"L",140,107,"M",140,117,"L",739.375,117,"M",739.375,184,"L",140,184],"rowGaps":["M",140,107,"L",739.375,107,"L",739.375,117,"L",140,117,"Z"],"columns":["M",140,40,"L",140,184,"M",333.125,184,"L",333.125,40,"M",343.125,40,"L",343.125,184,"M",536.25,184,"L",536.25,40,"M",546.25,40,"L",546.25,184,"M",739.375,184,"L",739.375,40],"columnGaps":["M",333.125,40,"L",343.125,40,"L",343.125,184,"L",333.125,184,"Z","M",536.25,40,"L",546.25,40,"L",546.25,184,"L",536.25,184,"Z"],"gridBorder":["M",140,40,"L",739.375,40,"L",739.375,184,"L",140,184,"Z"],"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":false,"showNegativeLineNumbers":false,"showAreaNames":false,"showLineNames":false,"gridBorderColor":"#9334e6","rowLineColor":"#9334e6","columnLineColor":"#9334e6","rowHatchColor":"rgba(127, 32, 210, 0.8)","columnHatchColor":"rgba(127, 32, 210, 0.8)","areaBorderColor":"#1a73e8"},"isPrimaryGrid":true}]},
       // with flipped arrows
       {"paths":[{"path":["M",40,40,"L",959,40,"L",959,261,"L",40,261,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",40,40,"L",959,40,"L",959,261,"L",40,261,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",40,40,"L",959,40,"L",959,261,"L",40,261,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",40,40,"L",959,40,"L",959,261,"L",40,261,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"showAccessibilityInfo":true,"colorFormat":"hex","elementInfo":{"tagName":"div","idValue":"","className":".wrapper","nodeWidth":"919","nodeHeight":"221","isKeyboardFocusable":false,"accessibleName":"","accessibleRole":"generic","layoutObjectName":"LayoutGrid","style":{"color":"#444444FF","font-family":"\"Times New Roman\"","font-size":"16px","line-height":"normal","padding":"0px","margin":"0px","background-color":"#FFFFFFFF"},"showAccessibilityInfo":true},"gridInfo":[{"rotationAngle":0,"columnTrackSizes":[{"computedSize":90,"authoredSize":"90px","x":85,"y":40},{"computedSize":90,"authoredSize":"90px","x":185,"y":40},{"computedSize":90,"authoredSize":"90px","x":285,"y":40},{"computedSize":90,"authoredSize":"90px","x":385,"y":40}],"rowTrackSizes":[{"computedSize":67,"authoredSize":"auto","x":40,"y":73.5},{"computedSize":67,"authoredSize":"auto","x":40,"y":150.5},{"computedSize":67,"authoredSize":"auto","x":40,"y":227.5}],"rows":["M",40,40,"L",430,40,"M",430,107,"L",40,107,"M",40,117,"L",430,117,"M",430,184,"L",40,184,"M",40,194,"L",430,194,"M",430,261,"L",40,261],"rowGaps":["M",40,107,"L",430,107,"L",430,117,"L",40,117,"Z","M",40,184,"L",430,184,"L",430,194,"L",40,194,"Z"],"columns":["M",40,40,"L",40,261,"M",130,261,"L",130,40,"M",140,40,"L",140,261,"M",230,261,"L",230,40,"M",240,40,"L",240,261,"M",330,261,"L",330,40,"M",340,40,"L",340,261,"M",430,261,"L",430,40],"columnGaps":["M",130,40,"L",140,40,"L",140,261,"L",130,261,"Z","M",230,40,"L",240,40,"L",240,261,"L",230,261,"Z","M",330,40,"L",340,40,"L",340,261,"L",330,261,"Z"],"positiveRowLineNumberOffsets":[0,72,149,221],"positiveColumnLineNumberOffsets":[0,95,195,295,390],"negativeRowLineNumberOffsets":[0,72,149,221],"negativeColumnLineNumberOffsets":[0,95,195,295,390],"gridBorder":["M",40,40,"L",430,40,"L",430,261,"L",40,261,"Z"],"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"showAreaNames":false,"showLineNames":false,"gridBorderColor":"#9334e6","rowLineColor":"#9334e6","columnLineColor":"#9334e6","rowHatchColor":"rgba(127, 32, 210, 0.8)","columnHatchColor":"rgba(127, 32, 210, 0.8)","areaBorderColor":"#1a73e8"},"isPrimaryGrid":true}]},
       // with line number positions
       {"paths":[{"path":["M",416.12353515625,158.8001708984375,"L",1020.6998291015625,763.37646484375,"L",918.87646484375,865.1998291015625,"L",314.3001708984375,260.62353515625,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",416.12353515625,158.8001708984375,"L",1020.6998291015625,763.37646484375,"L",918.87646484375,865.1998291015625,"L",314.3001708984375,260.62353515625,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",416.12353515625,158.8001708984375,"L",1020.6998291015625,763.37646484375,"L",918.87646484375,865.1998291015625,"L",314.3001708984375,260.62353515625,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",416.12353515625,158.8001708984375,"L",1020.6998291015625,763.37646484375,"L",918.87646484375,865.1998291015625,"L",314.3001708984375,260.62353515625,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"showAccessibilityInfo":true,"colorFormat":"hex","elementInfo":{"tagName":"div","idValue":"","className":".wrapper","nodeWidth":"706.4","nodeHeight":"706.4","isKeyboardFocusable":false,"accessibleName":"","accessibleRole":"generic","layoutObjectName":"LayoutGrid","style":{"color":"#444444FF","font-family":"\"Times New Roman\"","font-size":"16px","line-height":"normal","padding":"0px","margin":"0px","background-color":"#FFFFFFFF"},"showAccessibilityInfo":true},"gridInfo":[{"rotationAngle":45,"columnTrackSizes":[{"x":451.484375,"y":194.15625},{"x":529.265625,"y":271.9375},{"x":607.046875,"y":349.71875}],"rowTrackSizes":[{"x":392.4375,"y":182.484375},{"x":337.984375,"y":236.9375}],"rows":["M",416.12353515625,158.8001708984375,"L",642.397705078125,385.0743408203125,"M",595.0215454101562,432.45050048828125,"L",368.74737548828125,206.1763153076172,"M",361.67633056640625,213.2473907470703,"L",587.9505004882812,439.52154541015625,"M",540.5743408203125,486.897705078125,"L",314.3001708984375,260.62353515625],"rowGaps":["M",368.74737548828125,206.1763153076172,"L",595.0215454101562,432.45050048828125,"L",587.9505004882812,439.52154541015625,"L",361.67633056640625,213.2473907470703,"Z"],"columns":["M",416.12353515625,158.8001708984375,"L",314.3001708984375,260.62353515625,"M",385.0108337402344,331.334228515625,"L",486.834228515625,229.51083374023438,"M",493.9052734375,236.5819091796875,"L",392.0819091796875,338.4052734375,"M",462.7925720214844,409.115966796875,"L",564.615966796875,307.2925720214844,"M",571.68701171875,314.3636474609375,"L",469.8636474609375,416.1870422363281,"M",540.5743408203125,486.897705078125,"L",642.397705078125,385.0743408203125],"columnGaps":["M",486.834228515625,229.51083374023438,"L",493.9052734375,236.5819091796875,"L",392.0819091796875,338.4052734375,"L",385.0108337402344,331.334228515625,"Z","M",564.615966796875,307.2925720214844,"L",571.68701171875,314.3636474609375,"L",469.8636474609375,416.1870422363281,"L",462.7925720214844,409.115966796875,"Z"],"positiveRowLineNumberOffsets":[0,72,144],"positiveColumnLineNumberOffsets":[0,105,215,320],"positiveRowLineNumberPositions":[{"x":416.125,"y":158.796875},{"x":365.21875,"y":209.71875},{"x":314.296875,"y":260.625}],"positiveColumnLineNumberPositions":[{"x":416.125,"y":158.796875},{"x":490.375,"y":233.046875},{"x":568.15625,"y":310.828125},{"x":642.390625,"y":385.078125}],"negativeRowLineNumberOffsets":[0],"negativeColumnLineNumberOffsets":[0,105,215,320],"negativeRowLineNumberPositions":[{"x":642.390625,"y":385.078125}],"negativeColumnLineNumberPositions":[{"x":314.296875,"y":260.625},{"x":388.546875,"y":334.875},{"x":466.328125,"y":412.65625},{"x":540.578125,"y":486.890625}],"areaNames":{},"gridBorder":["M",416.12353515625,158.8001708984375,"L",642.397705078125,385.0743408203125,"L",540.5743408203125,486.897705078125,"L",314.3001708984375,260.62353515625,"Z"],"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"showAreaNames":true,"showLineNames":false,"gridBorderColor":"#9334e6","rowLineColor":"#9334e6","columnLineColor":"#9334e6","rowHatchColor":"rgba(127, 32, 210, 0.8)","columnHatchColor":"rgba(127, 32, 210, 0.8)","areaBorderColor":"#1a73e8"},"isPrimaryGrid":true}]}
     ];

     dispatch(["drawHighlight", info[0]]);
   </script>
 </body>
 </html>
	<!--
	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.
	-->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Debug</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" href="/out/Default/resources/inspector_overlay/common.css">
	<script type="module" src="/out/Default/resources/inspector_overlay/tool_highlight.js"></script>
	</head>
	<body>
	<script type="module">
	const viewportWidth = document.documentElement.clientWidth;
	const viewportHeight = document.documentElement.clientHeight;

	dispatch(["setPlatform", "mac"]);
	dispatch(["reset", {
	viewportSize: {
	width: viewportWidth,
	height: viewportHeight,
	},
	deviceScaleFactor: 1,
	pageScaleFactor: 1,
	pageZoomFactor: 1,
	emulationScaleFactor: 1,
	scrollX: 0,
	scrollY: 0,
	}]);

	const info = [
	// rotated
	{"paths":[{"path":["M",207.48318481445312,62.502525329589844,"L",770.3402099609375,625.3594970703125,"L",668.5167846679688,727.1829223632812,"L",105.6598129272461,164.32589721679688,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",207.48318481445312,62.502525329589844,"L",770.3402099609375,625.3594970703125,"L",668.5167846679688,727.1829223632812,"L",105.6598129272461,164.32589721679688,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",207.48318481445312,62.502525329589844,"L",770.3402099609375,625.3594970703125,"L",668.5167846679688,727.1829223632812,"L",105.6598129272461,164.32589721679688,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",207.48318481445312,62.502525329589844,"L",770.3402099609375,625.3594970703125,"L",668.5167846679688,727.1829223632812,"L",105.6598129272461,164.32589721679688,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"showAccessibilityInfo":true,"colorFormat":"hex","elementInfo":{"tagName":"div","idValue":"","className":".wrapper","nodeWidth":"664.68","nodeHeight":"664.68","isKeyboardFocusable":false,"accessibleName":"","accessibleRole":"generic","layoutObjectName":"LayoutGrid","style":{"color":"#444444FF","font-family":"\"Times New Roman\"","font-size":"16px","line-height":"normal","padding":"0px","margin":"0px","background-color":"#FFFFFFFF"},"showAccessibilityInfo":true},"gridInfo":[{"rotationAngle":45,"columnTrackSizes":[{"computedSize":100,"x":242.83853149414062,"y":97.85786437988281},{"computedSize":100,"x":320.6202697753906,"y":175.63961791992188},{"computedSize":100,"x":398.4020080566406,"y":253.42135620117188}],"rowTrackSizes":[{"computedSize":67,"x":183.79510498046875,"y":86.19060516357422},{"computedSize":67,"x":129.34788513183594,"y":140.6378173828125}],"rows":["M",207.48318481445312,62.502525329589844,"L",433.7573547363281,288.7767028808594,"M",386.3811950683594,336.1528625488281,"L",160.10704040527344,109.87867736816406,"M",153.0359649658203,116.94974517822266,"L",379.3101501464844,343.2239074707031,"M",331.9339904785156,390.6000671386719,"L",105.6598129272461,164.32589721679688],"rowGaps":["M",160.10704040527344,109.87867736816406,"L",386.3811950683594,336.1528625488281,"L",379.3101501464844,343.2239074707031,"L",153.0359649658203,116.94974517822266,"Z"],"columns":["M",207.48318481445312,62.502525329589844,"L",105.6598129272461,164.32589721679688,"M",176.3704833984375,235.0365753173828,"L",278.1938781738281,133.2132110595703,"M",285.2649230957031,140.28427124023438,"L",183.44155883789062,242.10765075683594,"M",254.15223693847656,312.8183288574219,"L",355.9756164550781,210.9949493408203,"M",363.04669189453125,218.06602478027344,"L",261.2232971191406,319.889404296875,"M",331.9339904785156,390.6000671386719,"L",433.7573547363281,288.7767028808594],"columnGaps":["M",278.1938781738281,133.2132110595703,"L",285.2649230957031,140.28427124023438,"L",183.44155883789062,242.10765075683594,"L",176.3704833984375,235.0365753173828,"Z","M",355.9756164550781,210.9949493408203,"L",363.04669189453125,218.06602478027344,"L",261.2232971191406,319.889404296875,"L",254.15223693847656,312.8183288574219,"Z"],"positiveRowLineNumberOffsets":[0,72,144],"positiveColumnLineNumberOffsets":[0,105,215,320],"negativeRowLineNumberOffsets":[0],"negativeColumnLineNumberOffsets":[0,105,215,320],"gridBorder":["M",207.48318481445312,62.502525329589844,"L",433.7573547363281,288.7767028808594,"L",331.9339904785156,390.6000671386719,"L",105.6598129272461,164.32589721679688,"Z"],"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"showAreaNames":false,"showTrackSizes":true,"rowLineColor":"#9334e6","columnLineColor":"#9334e6","rowHatchColor":"rgba(127, 32, 210, 0.8)","columnHatchColor":"rgba(127, 32, 210, 0.8)","areaBorderColor":"#1a73e8"},"isPrimaryGrid":true}]},
	// with authored sizes
	{"paths":[{"path":["M",140,40,"L",739.390625,40,"L",739.390625,184,"L",140,184,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",140,40,"L",739.390625,40,"L",739.390625,184,"L",140,184,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",140,40,"L",739.390625,40,"L",739.390625,184,"L",140,184,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",140,40,"L",739.390625,40,"L",739.390625,184,"L",140,184,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"showAccessibilityInfo":true,"colorFormat":"hex","elementInfo":{"tagName":"div","idValue":"","className":".wrapper","nodeWidth":"599.391","nodeHeight":"144","isKeyboardFocusable":false,"accessibleName":"","accessibleRole":"generic","layoutObjectName":"LayoutGrid","style":{"color":"#444444FF","font-family":"\"Times New Roman\"","font-size":"16px","line-height":"normal","padding":"0px","margin":"0px","background-color":"#FFFFFFFF"},"showAccessibilityInfo":true},"gridInfo":[{"rotationAngle":0,"columnTrackSizes":[{"computedSize":193.125,"authoredSize":"1fr","x":236.5625,"y":40},{"computedSize":193.125,"authoredSize":"1fr","x":439.6875,"y":40},{"computedSize":193.125,"authoredSize":"1fr","x":642.8125,"y":40}],"rowTrackSizes":[{"computedSize":67,"x":140,"y":73.5},{"computedSize":67,"x":140,"y":150.5}],"rows":["M",140,40,"L",739.375,40,"M",739.375,107,"L",140,107,"M",140,117,"L",739.375,117,"M",739.375,184,"L",140,184],"rowGaps":["M",140,107,"L",739.375,107,"L",739.375,117,"L",140,117,"Z"],"columns":["M",140,40,"L",140,184,"M",333.125,184,"L",333.125,40,"M",343.125,40,"L",343.125,184,"M",536.25,184,"L",536.25,40,"M",546.25,40,"L",546.25,184,"M",739.375,184,"L",739.375,40],"columnGaps":["M",333.125,40,"L",343.125,40,"L",343.125,184,"L",333.125,184,"Z","M",536.25,40,"L",546.25,40,"L",546.25,184,"L",536.25,184,"Z"],"gridBorder":["M",140,40,"L",739.375,40,"L",739.375,184,"L",140,184,"Z"],"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":false,"showNegativeLineNumbers":false,"showAreaNames":false,"showLineNames":false,"gridBorderColor":"#9334e6","rowLineColor":"#9334e6","columnLineColor":"#9334e6","rowHatchColor":"rgba(127, 32, 210, 0.8)","columnHatchColor":"rgba(127, 32, 210, 0.8)","areaBorderColor":"#1a73e8"},"isPrimaryGrid":true}]},
	// with flipped arrows
	{"paths":[{"path":["M",40,40,"L",959,40,"L",959,261,"L",40,261,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",40,40,"L",959,40,"L",959,261,"L",40,261,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",40,40,"L",959,40,"L",959,261,"L",40,261,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",40,40,"L",959,40,"L",959,261,"L",40,261,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"showAccessibilityInfo":true,"colorFormat":"hex","elementInfo":{"tagName":"div","idValue":"","className":".wrapper","nodeWidth":"919","nodeHeight":"221","isKeyboardFocusable":false,"accessibleName":"","accessibleRole":"generic","layoutObjectName":"LayoutGrid","style":{"color":"#444444FF","font-family":"\"Times New Roman\"","font-size":"16px","line-height":"normal","padding":"0px","margin":"0px","background-color":"#FFFFFFFF"},"showAccessibilityInfo":true},"gridInfo":[{"rotationAngle":0,"columnTrackSizes":[{"computedSize":90,"authoredSize":"90px","x":85,"y":40},{"computedSize":90,"authoredSize":"90px","x":185,"y":40},{"computedSize":90,"authoredSize":"90px","x":285,"y":40},{"computedSize":90,"authoredSize":"90px","x":385,"y":40}],"rowTrackSizes":[{"computedSize":67,"authoredSize":"auto","x":40,"y":73.5},{"computedSize":67,"authoredSize":"auto","x":40,"y":150.5},{"computedSize":67,"authoredSize":"auto","x":40,"y":227.5}],"rows":["M",40,40,"L",430,40,"M",430,107,"L",40,107,"M",40,117,"L",430,117,"M",430,184,"L",40,184,"M",40,194,"L",430,194,"M",430,261,"L",40,261],"rowGaps":["M",40,107,"L",430,107,"L",430,117,"L",40,117,"Z","M",40,184,"L",430,184,"L",430,194,"L",40,194,"Z"],"columns":["M",40,40,"L",40,261,"M",130,261,"L",130,40,"M",140,40,"L",140,261,"M",230,261,"L",230,40,"M",240,40,"L",240,261,"M",330,261,"L",330,40,"M",340,40,"L",340,261,"M",430,261,"L",430,40],"columnGaps":["M",130,40,"L",140,40,"L",140,261,"L",130,261,"Z","M",230,40,"L",240,40,"L",240,261,"L",230,261,"Z","M",330,40,"L",340,40,"L",340,261,"L",330,261,"Z"],"positiveRowLineNumberOffsets":[0,72,149,221],"positiveColumnLineNumberOffsets":[0,95,195,295,390],"negativeRowLineNumberOffsets":[0,72,149,221],"negativeColumnLineNumberOffsets":[0,95,195,295,390],"gridBorder":["M",40,40,"L",430,40,"L",430,261,"L",40,261,"Z"],"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"showAreaNames":false,"showLineNames":false,"gridBorderColor":"#9334e6","rowLineColor":"#9334e6","columnLineColor":"#9334e6","rowHatchColor":"rgba(127, 32, 210, 0.8)","columnHatchColor":"rgba(127, 32, 210, 0.8)","areaBorderColor":"#1a73e8"},"isPrimaryGrid":true}]},
	// with line number positions
	{"paths":[{"path":["M",416.12353515625,158.8001708984375,"L",1020.6998291015625,763.37646484375,"L",918.87646484375,865.1998291015625,"L",314.3001708984375,260.62353515625,"Z"],"fillColor":"rgba(111, 168, 220, 0.658823529411765)","name":"content"},{"path":["M",416.12353515625,158.8001708984375,"L",1020.6998291015625,763.37646484375,"L",918.87646484375,865.1998291015625,"L",314.3001708984375,260.62353515625,"Z"],"fillColor":"rgba(147, 196, 125, 0.549019607843137)","name":"padding"},{"path":["M",416.12353515625,158.8001708984375,"L",1020.6998291015625,763.37646484375,"L",918.87646484375,865.1998291015625,"L",314.3001708984375,260.62353515625,"Z"],"fillColor":"rgba(255, 229, 153, 0.658823529411765)","name":"border"},{"path":["M",416.12353515625,158.8001708984375,"L",1020.6998291015625,763.37646484375,"L",918.87646484375,865.1998291015625,"L",314.3001708984375,260.62353515625,"Z"],"fillColor":"rgba(246, 178, 107, 0.658823529411765)","name":"margin"}],"showRulers":false,"showExtensionLines":false,"showAccessibilityInfo":true,"colorFormat":"hex","elementInfo":{"tagName":"div","idValue":"","className":".wrapper","nodeWidth":"706.4","nodeHeight":"706.4","isKeyboardFocusable":false,"accessibleName":"","accessibleRole":"generic","layoutObjectName":"LayoutGrid","style":{"color":"#444444FF","font-family":"\"Times New Roman\"","font-size":"16px","line-height":"normal","padding":"0px","margin":"0px","background-color":"#FFFFFFFF"},"showAccessibilityInfo":true},"gridInfo":[{"rotationAngle":45,"columnTrackSizes":[{"x":451.484375,"y":194.15625},{"x":529.265625,"y":271.9375},{"x":607.046875,"y":349.71875}],"rowTrackSizes":[{"x":392.4375,"y":182.484375},{"x":337.984375,"y":236.9375}],"rows":["M",416.12353515625,158.8001708984375,"L",642.397705078125,385.0743408203125,"M",595.0215454101562,432.45050048828125,"L",368.74737548828125,206.1763153076172,"M",361.67633056640625,213.2473907470703,"L",587.9505004882812,439.52154541015625,"M",540.5743408203125,486.897705078125,"L",314.3001708984375,260.62353515625],"rowGaps":["M",368.74737548828125,206.1763153076172,"L",595.0215454101562,432.45050048828125,"L",587.9505004882812,439.52154541015625,"L",361.67633056640625,213.2473907470703,"Z"],"columns":["M",416.12353515625,158.8001708984375,"L",314.3001708984375,260.62353515625,"M",385.0108337402344,331.334228515625,"L",486.834228515625,229.51083374023438,"M",493.9052734375,236.5819091796875,"L",392.0819091796875,338.4052734375,"M",462.7925720214844,409.115966796875,"L",564.615966796875,307.2925720214844,"M",571.68701171875,314.3636474609375,"L",469.8636474609375,416.1870422363281,"M",540.5743408203125,486.897705078125,"L",642.397705078125,385.0743408203125],"columnGaps":["M",486.834228515625,229.51083374023438,"L",493.9052734375,236.5819091796875,"L",392.0819091796875,338.4052734375,"L",385.0108337402344,331.334228515625,"Z","M",564.615966796875,307.2925720214844,"L",571.68701171875,314.3636474609375,"L",469.8636474609375,416.1870422363281,"L",462.7925720214844,409.115966796875,"Z"],"positiveRowLineNumberOffsets":[0,72,144],"positiveColumnLineNumberOffsets":[0,105,215,320],"positiveRowLineNumberPositions":[{"x":416.125,"y":158.796875},{"x":365.21875,"y":209.71875},{"x":314.296875,"y":260.625}],"positiveColumnLineNumberPositions":[{"x":416.125,"y":158.796875},{"x":490.375,"y":233.046875},{"x":568.15625,"y":310.828125},{"x":642.390625,"y":385.078125}],"negativeRowLineNumberOffsets":[0],"negativeColumnLineNumberOffsets":[0,105,215,320],"negativeRowLineNumberPositions":[{"x":642.390625,"y":385.078125}],"negativeColumnLineNumberPositions":[{"x":314.296875,"y":260.625},{"x":388.546875,"y":334.875},{"x":466.328125,"y":412.65625},{"x":540.578125,"y":486.890625}],"areaNames":{},"gridBorder":["M",416.12353515625,158.8001708984375,"L",642.397705078125,385.0743408203125,"L",540.5743408203125,486.897705078125,"L",314.3001708984375,260.62353515625,"Z"],"gridHighlightConfig":{"gridBorderDash":false,"rowLineDash":true,"columnLineDash":true,"showGridExtensionLines":true,"showPositiveLineNumbers":true,"showNegativeLineNumbers":true,"showAreaNames":true,"showLineNames":false,"gridBorderColor":"#9334e6","rowLineColor":"#9334e6","columnLineColor":"#9334e6","rowHatchColor":"rgba(127, 32, 210, 0.8)","columnHatchColor":"rgba(127, 32, 210, 0.8)","areaBorderColor":"#1a73e8"},"isPrimaryGrid":true}]}
	];

	dispatch(["drawHighlight", info[0]]);
	</script>
	</body>
	</html>