<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>