| <html> |
| <head> |
| <style> |
| @font-face { |
| font-family: 'ahem'; |
| src: url(../../resources/Ahem.ttf); |
| } |
| </style> |
| <script type="text/javascript" src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></script> |
| <script> |
| |
| function test() |
| { |
| InspectorTest.sendCommand("DOM.enable", {}); |
| InspectorTest.sendCommandOrDie("DOM.getLayoutTreeNodes", {}, onLayoutTreeNodes); |
| |
| function onLayoutTreeNodes(response) |
| { |
| InspectorTest.log("\nLayoutTreeNodes result:"); |
| canonicalizeBackendNodeIds(response); |
| InspectorTest.log(JSON.stringify(response, null, 2)); |
| InspectorTest.completeTest(); |
| } |
| |
| // While unique the backendNodeId IDs are not stable cross platform, so we canonicalize them. |
| var nextId = 1; |
| var nodeMap = {}; |
| function canonicalizeBackendNodeIds(node) { |
| if (node.hasOwnProperty('backendNodeId')) { |
| if (!nodeMap.hasOwnProperty(node.backendNodeId)) { |
| nodeMap[node.backendNodeId] = nextId++; |
| } |
| node.backendNodeId = nodeMap[node.backendNodeId]; |
| } |
| for (var property in node) { |
| if (!node.hasOwnProperty(property) || typeof node[property] === 'object') |
| canonicalizeBackendNodeIds(node[property]); |
| } |
| } |
| } |
| |
| </script> |
| <template id="shadow-template"> |
| <style> |
| :host { |
| color: red; |
| } |
| </style> |
| <div>Hi!</div> |
| </template> |
| </head> |
| <body class="body-class"> |
| <div style="font-family: ahem;"> |
| <div class="class1">Some Text</div> And More Text |
| <div style="display:inline-block; width: 200px"> |
| <p> |
| 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. |
| </p> |
| <ul class="class3"> |
| <li class="class4"></li> |
| <span>Lets have a span</span> |
| </ul> |
| </div> |
| <div style="transform: rotateZ(90deg); width: 200px">Rotated text!</div> |
| <iframe src="resources/simple-iframe.html" width="400" height="200"></iframe> |
| <div id="shadow-host"></div> |
| <script type="text/javascript"> |
| var host = document.querySelector("#shadow-host").createShadowRoot(); |
| var template = document.querySelector("#shadow-template"); |
| host.appendChild(template.content); |
| template.remove(); |
| runTest(); |
| </script> |
| </div> |
| </body> |
| </html> |