blob: 7768b34857061ec68b95bfe68797c7d8affba6e2 [file] [log] [blame]
<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", {});
var whitelist = ["transform", "transform-origin", "height", "width", "display", "outline-color"];
InspectorTest.sendCommandOrDie("CSS.getLayoutTreeAndStyles", {"computedStyleWhitelist": whitelist}, 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 style="font-family: ahem;"><h1>Hi!</h1></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="../dom/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();
window.onload = runTest;
</script>
</div>
</body>
</html>