| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| /* relative positioning ensures underlying Layer */ |
| .container { |
| position: relative; |
| } |
| </style> |
| <script> |
| function log(message) |
| { |
| document.getElementById("console").innerHTML += (message + "\n"); |
| } |
| |
| function removeContainerLines(text) |
| { |
| var lines = text.split("\n"); |
| lines.splice(0, 2); |
| return lines.join("\n"); |
| } |
| |
| function setupTargetTree() |
| { |
| var target = document.createElement("div"); |
| target.innerHTML = "<span>content</span>"; |
| var root = target.createShadowRoot(); |
| |
| var child0 = document.createElement("span"); |
| child0.innerHTML = "Hello,"; |
| root.appendChild(child0); |
| root.appendChild(window.document.createElement('content')); |
| var child1 = document.createElement("span"); |
| child1.innerHTML = "World."; |
| root.appendChild(child1); |
| |
| document.getElementById("target").appendChild(target); |
| } |
| |
| function test() |
| { |
| testRunner.dumpAsText(); |
| log("This test compares a shadow-based render tree with one for a reference DOM tree."); |
| setupTargetTree(); |
| var targetContainerLayoutTree = internals.elementLayoutTreeAsText(document.getElementById("targetContainer")); |
| var targetLayoutTree = removeContainerLines(targetContainerLayoutTree); |
| var refContainerLayoutTree = internals.elementLayoutTreeAsText(document.getElementById("refContainer")); |
| var refLayoutTree = removeContainerLines(refContainerLayoutTree); |
| if (targetLayoutTree == refLayoutTree) |
| log("PASS"); |
| else { |
| log("FAIL"); |
| log("Expected:"); |
| log(refLayoutTree); |
| log("Actual:"); |
| log(targetLayoutTree); |
| } |
| |
| document.getElementById("test").style.display = "none"; |
| } |
| </script> |
| </head> |
| <body onload="test()"> |
| <div id="test"> |
| <div class="container" id="targetContainer"><div id="target"></div></div> |
| <div class="container" id="refContainer"><div><div><span>Hello,</span><span>content</span><span>World.</span></div></div></div> |
| </div> |
| <pre id="console"></pre> |
| </body> |
| </html> |
