[devtools] Add DOMSnapshot domain for dom+layout+style snapshots.

third_party/WebKit/LayoutTests/inspector-protocol/dom-snapshot/dom-snapshot-getSnapshot-expected.txt

 Some Text
 And More Text 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet est sem. Aenean ut neque volutpat, posuere odio at, mollis nibh. Aenean sodales nulla et ligula efficitur sollicitudin blandit sed lectus. Duis orci enim, sodales ac lectus sed, hendrerit efficitur est. Quisque gravida facilisis viverra.
 
 Lets have a span
 Rotated text!
 
-
-LayoutTreeNodes result:
 {
+  "domNodes": [
+    {
+      "nodeType": 9,
+      "nodeName": "#document",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        1
+      ],
+      "documentURL": "<string>",
+      "baseURL": "<string>",
+      "layoutNodeIndex": 0
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "HTML",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        2,
+        13,
+        14
+      ],
+      "attributes": [],
+      "frameId": "<string>",
+      "layoutNodeIndex": 1
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "HEAD",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        3,
+        4,
+        6,
+        7,
+        8,
+        9,
+        11,
+        12
+      ],
+      "attributes": []
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "STYLE",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        5
+      ],
+      "attributes": []
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n@font-face {\n  font-family: 'ahem';\n  src: url(../../resources/Ahem.ttf);\n}\n"
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "SCRIPT",
+      "nodeValue": "",
+      "attributes": [
+        {
+          "name": "type",
+          "value": "text/javascript"
+        },
+        {
+          "name": "src",
+          "value": "../../http/tests/inspector-protocol/inspector-protocol-test.js"
+        }
+      ]
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "SCRIPT",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        10
+      ],
+      "attributes": []
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n\nfunction test()\n{\n    InspectorTest.sendCommand(\"DOM.enable\", {});\n\n    var whitelist = [\"transform\", \"transform-origin\", \"height\", \"width\", \"display\", \"outline-color\"];\n    InspectorTest.sendCommandOrDie(\"DOMSnapshot.getSnapshot\", {\"computedStyleWhitelist\": whitelist, \"depth\": -1, \"pierce\": true}, onSnapshot);\n\n    function onSnapshot(response) {\n        function stabilize(key, value) {\n            var unstableKeys = [\"documentURL\", \"baseURL\", \"frameId\"];\n            if (unstableKeys.indexOf(key) !== -1)\n                return \"<\" + typeof(value) + \">\";\n            return value;\n        }\n        InspectorTest.log(JSON.stringify(response, stabilize, 2));\n        InspectorTest.completeTest();\n    }\n}\n\n"
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "BODY",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        15,
+        16,
+        66
+      ],
+      "attributes": [
+        {
+          "name": "class",
+          "value": "body-class"
+        }
+      ],
+      "layoutNodeIndex": 2
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "DIV",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        17,
+        18,
+        20,
+        21,
+        34,
+        35,
+        37,
+        38,
+        52,
+        53,
+        62,
+        63,
+        65
+      ],
+      "attributes": [
+        {
+          "name": "style",
+          "value": "font-family: ahem;"
+        }
+      ],
+      "layoutNodeIndex": 3
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n    "
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "DIV",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        19
+      ],
+      "attributes": [
+        {
+          "name": "class",
+          "value": "class1"
+        }
+      ],
+      "layoutNodeIndex": 4
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "Some Text",
+      "layoutNodeIndex": 5
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": " And More Text\n    ",
+      "layoutNodeIndex": 6
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "DIV",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        22,
+        23,
+        25,
+        26,
+        33
+      ],
+      "attributes": [
+        {
+          "name": "style",
+          "value": "display:inline-block; width: 200px"
+        }
+      ],
+      "layoutNodeIndex": 7
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n        "
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "P",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        24
+      ],
+      "attributes": [],
+      "layoutNodeIndex": 8
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet est sem.\n        Aenean ut neque volutpat, posuere odio at, mollis nibh. Aenean sodales nulla et\n        ligula efficitur sollicitudin blandit sed lectus. Duis orci enim, sodales ac lectus sed,\n        hendrerit efficitur est. Quisque gravida facilisis viverra.\n        ",
+      "layoutNodeIndex": 9
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n        "
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "UL",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        27,
+        28,
+        29,
+        30,
+        32
+      ],
+      "attributes": [
+        {
+          "name": "class",
+          "value": "class3"
+        }
+      ],
+      "layoutNodeIndex": 10
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n            "
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "LI",
+      "nodeValue": "",
+      "attributes": [
+        {
+          "name": "class",
+          "value": "class4"
+        }
+      ],
+      "layoutNodeIndex": 11
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n            "
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "SPAN",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        31
+      ],
+      "attributes": [],
+      "layoutNodeIndex": 12
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "Lets have a span",
+      "layoutNodeIndex": 13
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n        ",
+      "layoutNodeIndex": 14
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n    "
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n    ",
+      "layoutNodeIndex": 15
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "DIV",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        36
+      ],
+      "attributes": [
+        {
+          "name": "style",
+          "value": "transform: rotateZ(90deg); width: 200px"
+        }
+      ],
+      "layoutNodeIndex": 16
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "Rotated text!",
+      "layoutNodeIndex": 17
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n    "
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "IFRAME",
+      "nodeValue": "",
+      "attributes": [
+        {
+          "name": "src",
+          "value": "../dom/resources/simple-iframe.html"
+        },
+        {
+          "name": "width",
+          "value": "400"
+        },
+        {
+          "name": "height",
+          "value": "200"
+        }
+      ],
+      "frameId": "<string>",
+      "contentDocumentIndex": 39,
+      "layoutNodeIndex": 18
+    },
+    {
+      "nodeType": 9,
+      "nodeName": "#document",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        40
+      ],
+      "documentURL": "<string>",
+      "baseURL": "<string>",
+      "layoutNodeIndex": 19
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "HTML",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        41,
+        46,
+        47
+      ],
+      "attributes": [],
+      "frameId": "<string>",
+      "layoutNodeIndex": 20
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "HEAD",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        42,
+        43,
+        45
+      ],
+      "attributes": []
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "STYLE",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        44
+      ],
+      "attributes": []
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n@font-face {\n  font-family: 'ahem';\n  src: url(../../../resources/Ahem.ttf);\n}\n"
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "BODY",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        48,
+        49,
+        51
+      ],
+      "attributes": [],
+      "layoutNodeIndex": 21
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "DIV",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        50
+      ],
+      "attributes": [
+        {
+          "name": "style",
+          "value": "font-family: ahem;"
+        }
+      ],
+      "layoutNodeIndex": 22
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\nHello from the iframe.\n",
+      "layoutNodeIndex": 23
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n\n\n"
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n    ",
+      "layoutNodeIndex": 24
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "DIV",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        54,
+        55,
+        57,
+        58,
+        61
+      ],
+      "attributes": [
+        {
+          "name": "id",
+          "value": "shadow-host"
+        }
+      ],
+      "layoutNodeIndex": 25
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "STYLE",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        56
+      ],
+      "attributes": []
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n:host {\n    color: red;\n}\n"
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "DIV",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        59
+      ],
+      "attributes": [
+        {
+          "name": "style",
+          "value": "font-family: ahem;"
+        }
+      ],
+      "layoutNodeIndex": 26
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "H1",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        60
+      ],
+      "attributes": [],
+      "layoutNodeIndex": 27
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "Hi!",
+      "layoutNodeIndex": 28
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n    "
+    },
+    {
+      "nodeType": 1,
+      "nodeName": "SCRIPT",
+      "nodeValue": "",
+      "childNodeIndexes": [
+        64
+      ],
+      "attributes": [
+        {
+          "name": "type",
+          "value": "text/javascript"
+        }
+      ]
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n        var host = document.querySelector(\"#shadow-host\").createShadowRoot();\n        var template = document.querySelector(\"#shadow-template\");\n        host.appendChild(template.content);\n        template.remove();\n        window.onload = runTest;\n    "
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n"
+    },
+    {
+      "nodeType": 3,
+      "nodeName": "#text",
+      "nodeValue": "\n\n\n"
+    }
+  ],
   "layoutTreeNodes": [
     {
-      "nodeId": 1,
+      "domNodeIndex": 0,
       "boundingBox": {
         "x": 0,
         "y": 0,
         "width": 785,
         "height": 600
       }
     },
     {
-      "nodeId": 2,
+      "domNodeIndex": 1,
       "boundingBox": {
         "x": 0,
         "y": 0,
         "width": 785,
         "height": 911
       },
       "styleIndex": 0
     },
     {
-      "nodeId": 9,
+      "domNodeIndex": 14,
       "boundingBox": {
         "x": 8,
         "y": 8,
         "width": 769,
         "height": 882
       },
       "styleIndex": 1
     },
     {
-      "nodeId": 10,
+      "domNodeIndex": 16,
       "boundingBox": {
         "x": 8,
         "y": 8,
         "width": 769,
         "height": 882
       },
       "styleIndex": 1
     },
     {
-      "nodeId": 11,
+      "domNodeIndex": 18,
       "boundingBox": {
         "x": 8,
         "y": 8,
         "width": 769,
         "height": 16
       },
       "styleIndex": 2
     },
     {
-      "nodeId": 12,
+      "domNodeIndex": 19,
       "boundingBox": {
         "x": 8,
         "y": 8,
         "width": 144,
         "height": 16
       },
       "layoutText": "Some Text",
       "inlineTextNodes": [
         {
           "boundingBox": {
             "x": 8,
             "y": 8,
             "width": 144,
             "height": 16
           },
           "startCharacterIndex": 0,
           "numCharacters": 9
         }
       ],
       "styleIndex": 3
     },
     {
-      "nodeId": 13,
+      "domNodeIndex": 20,
       "boundingBox": {
         "x": 8,
         "y": 568,
         "width": 224,
         "height": 16
       },
       "layoutText": " And More Text\n    ",
       "inlineTextNodes": [
         {
           "boundingBox": {
             "x": 8,
             "y": 568,
             "width": 224,
             "height": 16
           },
           "startCharacterIndex": 1,
           "numCharacters": 14
         }
       ],
       "styleIndex": 3
     },
     {
-      "nodeId": 14,
+      "domNodeIndex": 21,
       "boundingBox": {
         "x": 232,
         "y": 24,
         "width": 200,
         "height": 576
       },
       "styleIndex": 4
     },
     {
-      "nodeId": 15,
+      "domNodeIndex": 23,
       "boundingBox": {
         "x": 232,
         "y": 40,
         "width": 200,
         "height": 480
       },
       "styleIndex": 5
     },
     {
-      "nodeId": 16,
+      "domNodeIndex": 24,
       "boundingBox": {
         "x": 232,
         "y": 40,
         "width": 192,
         "height": 480
       },
       "layoutText": "\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet est sem.\n        Aenean ut neque volutpat, posuere odio at, mollis nibh. Aenean sodales nulla et\n        ligula efficitur sollicitudin blandit sed lectus. Duis orci enim, sodales ac lectus sed,\n        hendrerit efficitur est. Quisque gravida facilisis viverra.\n        ",
       "inlineTextNodes": [
         {
           "boundingBox": {
@@ skipping 302 matching lines @@
             "width": 128,
             "height": 16
           },
           "startCharacterIndex": 341,
           "numCharacters": 8
         }
       ],
       "styleIndex": 3
     },
     {
-      "nodeId": 17,
+      "domNodeIndex": 26,
       "boundingBox": {
         "x": 232,
         "y": 536,
         "width": 200,
         "height": 48
       },
       "styleIndex": 6
     },
     {
-      "nodeId": 18,
+      "domNodeIndex": 28,
       "boundingBox": {
         "x": 272,
         "y": 536,
         "width": 160,
         "height": 16
       },
       "styleIndex": 7
     },
     {
-      "nodeId": 19,
+      "domNodeIndex": 30,
       "boundingBox": {
         "x": 272,
         "y": 552,
         "width": 144,
         "height": 32
       },
       "styleIndex": 8
     },
     {
-      "nodeId": 20,
+      "domNodeIndex": 31,
       "boundingBox": {
         "x": 272,
         "y": 552,
         "width": 144,
         "height": 32
       },
       "layoutText": "Lets have a span",
       "inlineTextNodes": [
         {
           "boundingBox": {
@@ skipping 12 matching lines @@
             "width": 96,
             "height": 16
           },
           "startCharacterIndex": 10,
           "numCharacters": 6
         }
       ],
       "styleIndex": 8
     },
     {
-      "nodeId": 21,
+      "domNodeIndex": 32,
+      "boundingBox": {
+        "x": 0,
+        "y": 0,
+        "width": 0,
+        "height": 0
+      },
+      "layoutText": "\n        ",
+      "styleIndex": 3
+    },
+    {
+      "domNodeIndex": 34,
+      "boundingBox": {
+        "x": 0,
+        "y": 0,
+        "width": 0,
+        "height": 0
+      },
+      "layoutText": "\n    ",
+      "styleIndex": 3
+    },
+    {
+      "domNodeIndex": 35,
       "boundingBox": {
         "x": 92,
         "y": 516,
         "width": 32,
         "height": 200
       },
       "styleIndex": 9
     },
     {
-      "nodeId": 22,
+      "domNodeIndex": 36,
       "boundingBox": {
         "x": 92,
         "y": 516,
         "width": 32,
         "height": 112
       },
       "layoutText": "Rotated text!",
       "inlineTextNodes": [
         {
           "boundingBox": {
@@ skipping 12 matching lines @@
             "width": 16,
             "height": 80
           },
           "startCharacterIndex": 8,
           "numCharacters": 5
         }
       ],
       "styleIndex": 10
     },
     {
-      "nodeId": 23,
+      "domNodeIndex": 38,
       "boundingBox": {
         "x": 8,
         "y": 632,
         "width": 404,
         "height": 204
       },
       "styleIndex": 11
     },
     {
-      "nodeId": 25,
+      "domNodeIndex": 39,
+      "boundingBox": {
+        "x": 0,
+        "y": 0,
+        "width": 400,
+        "height": 200
+      }
+    },
+    {
+      "domNodeIndex": 40,
+      "boundingBox": {
+        "x": 10,
+        "y": 634,
+        "width": 400,
+        "height": 200
+      },
+      "styleIndex": 12
+    },
+    {
+      "domNodeIndex": 47,
+      "boundingBox": {
+        "x": 18,
+        "y": 642,
+        "width": 384,
+        "height": 184
+      },
+      "styleIndex": 13
+    },
+    {
+      "domNodeIndex": 49,
+      "boundingBox": {
+        "x": 18,
+        "y": 642,
+        "width": 384,
+        "height": 16
+      },
+      "styleIndex": 14
+    },
+    {
+      "domNodeIndex": 50,
+      "boundingBox": {
+        "x": 8,
+        "y": 8,
+        "width": 352,
+        "height": 16
+      },
+      "layoutText": "\nHello from the iframe.\n",
+      "inlineTextNodes": [
+        {
+          "boundingBox": {
+            "x": 8,
+            "y": 8,
+            "width": 352,
+            "height": 16
+          },
+          "startCharacterIndex": 1,
+          "numCharacters": 22
+        }
+      ],
+      "styleIndex": 3
+    },
+    {
+      "domNodeIndex": 52,
+      "boundingBox": {
+        "x": 0,
+        "y": 0,
+        "width": 0,
+        "height": 0
+      },
+      "layoutText": "\n    ",
+      "styleIndex": 3
+    },
+    {
+      "domNodeIndex": 53,
       "boundingBox": {
         "x": 8,
         "y": 857,
         "width": 769,
         "height": 33
       },
-      "styleIndex": 12
+      "styleIndex": 15
+    },
+    {
+      "domNodeIndex": 58,
+      "boundingBox": {
+        "x": 8,
+        "y": 857,
+        "width": 769,
+        "height": 33
+      },
+      "styleIndex": 15
+    },
+    {
+      "domNodeIndex": 59,
+      "boundingBox": {
+        "x": 8,
+        "y": 857,
+        "width": 769,
+        "height": 33
+      },
+      "styleIndex": 15
+    },
+    {
+      "domNodeIndex": 60,
+      "boundingBox": {
+        "x": 8,
+        "y": 857,
+        "width": 96,
+        "height": 33
+      },
+      "layoutText": "Hi!",
+      "inlineTextNodes": [
+        {
+          "boundingBox": {
+            "x": 8,
+            "y": 857.4375,
+            "width": 96,
+            "height": 32
+          },
+          "startCharacterIndex": 0,
+          "numCharacters": 3
+        }
+      ],
+      "styleIndex": 16
     }
   ],
   "computedStyles": [
     {
       "properties": [
         {
           "name": "transform",
           "value": "none"
         },
         {
@@ skipping 322 matching lines @@
         },
         {
           "name": "outline-color",
           "value": "rgb(0, 0, 0)"
         }
       ]
     },
     {
       "properties": [
         {
+          "name": "transform",
+          "value": "none"
+        },
+        {
+          "name": "transform-origin",
+          "value": "200px 100px"
+        },
+        {
+          "name": "height",
+          "value": "200px"
+        },
+        {
+          "name": "width",
+          "value": "400px"
+        },
+        {
+          "name": "display",
+          "value": "block"
+        },
+        {
+          "name": "outline-color",
+          "value": "rgb(0, 0, 0)"
+        }
+      ]
+    },
+    {
+      "properties": [
+        {
+          "name": "transform",
+          "value": "none"
+        },
+        {
+          "name": "transform-origin",
+          "value": "192px 92px"
+        },
+        {
+          "name": "height",
+          "value": "184px"
+        },
+        {
+          "name": "width",
+          "value": "384px"
+        },
+        {
+          "name": "display",
+          "value": "block"
+        },
+        {
+          "name": "outline-color",
+          "value": "rgb(0, 0, 0)"
+        }
+      ]
+    },
+    {
+      "properties": [
+        {
+          "name": "transform",
+          "value": "none"
+        },
+        {
+          "name": "transform-origin",
+          "value": "192px 8px"
+        },
+        {
+          "name": "height",
+          "value": "16px"
+        },
+        {
+          "name": "width",
+          "value": "384px"
+        },
+        {
+          "name": "display",
+          "value": "block"
+        },
+        {
+          "name": "outline-color",
+          "value": "rgb(0, 0, 0)"
+        }
+      ]
+    },
+    {
+      "properties": [
+        {
           "name": "transform",
           "value": "none"
         },
         {
           "name": "transform-origin",
           "value": "384.5px 16px"
         },
         {
           "name": "height",
           "value": "32px"
         },
         {
           "name": "width",
           "value": "769px"
         },
         {
           "name": "display",
           "value": "block"
         },
         {
           "name": "outline-color",
           "value": "rgb(255, 0, 0)"
         }
       ]
+    },
+    {
+      "properties": [
+        {
+          "name": "transform",
+          "value": "none"
+        },
+        {
+          "name": "transform-origin",
+          "value": "0px 0px"
+        },
+        {
+          "name": "height",
+          "value": "auto"
+        },
+        {
+          "name": "width",
+          "value": "auto"
+        },
+        {
+          "name": "display",
+          "value": "block"
+        },
+        {
+          "name": "outline-color",
+          "value": "rgb(255, 0, 0)"
+        }
+      ]
     }
   ]
 }