| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| /* relative positioning ensures underlying RenderLayer */ |
| .container { |
| position: relative; |
| } |
| </style> |
| <script> |
| function log(message) |
| { |
| var line = document.createElement("div"); |
| line.textContent = message; |
| document.getElementById("console").appendChild(line); |
| } |
| |
| var contentSources = [ |
| "<div/>", |
| "#text<div/>", |
| "<div/>#text", |
| "#text<div/>#text", |
| |
| "<span/>", |
| "#text<span/>", |
| "<span/>#text", |
| "#text<span/>#text", |
| |
| "<span/>#text<div/>", |
| "<div/>#text<span/>", |
| "<div/><span/>", |
| "<span/><div/>" |
| |
| ]; |
| |
| var shadowSources = [ |
| "<content/>", |
| "<div/><content/><div/>", |
| "<div/><content/><span/>", |
| "<span/><content/><span/>", |
| "<span/><content/><div/>", |
| |
| "<div/><content/><div/>", |
| "<div/><content/><span/>", |
| "<span/><content/><span/>", |
| "<span/><content/><div/>", |
| |
| "<div/>#text<content/>#text<div/>", |
| "<div/>#text<content/>#text<span/>", |
| "<span/>#text<content/>#text<span/>", |
| "<span/>#text<content/>#text<div/>", |
| |
| "<div><content/></div>", |
| "<span><content/></span>" |
| ]; |
| |
| function createTreeFrom(html) |
| { |
| var enhancedHtml = html.replace(/<span\/>/g, "<span> </span>").replace(/<div\/>/g, "<div> </div>").replace(/<content\/>/g, "<content></content>").replace(/#text/g, " "); |
| var root = document.createElement("blockquote"); |
| root.innerHTML = enhancedHtml; |
| var contentPlaceholder = root.getElementsByTagName("CONTENT")[0]; |
| if (contentPlaceholder) { |
| var contentParent = contentPlaceholder.parentNode; |
| contentParent.replaceChild(window.internals.createContentElement(), contentPlaceholder); |
| }; |
| |
| return root; |
| } |
| |
| function moveChildren(fromParent, toParent) |
| { |
| var children = fromParent.childNodes; |
| while (fromParent.firstChild) |
| toParent.appendChild(fromParent.firstChild); |
| } |
| |
| function createTargetTree(contentHtml, shadowHtml) |
| { |
| var content = createTreeFrom(contentHtml); |
| var shadow = createTreeFrom(shadowHtml); |
| var host = document.createElement("blockquote"); |
| var shadowRoot = internals.ensureShadowRoot(host); |
| moveChildren(content, host); |
| moveChildren(shadow, shadowRoot); |
| return host; |
| } |
| |
| function cleanupContainer(container) |
| { |
| var child = container.firstChild; |
| if (child) |
| container.removeChild(child); |
| container.offsetLeft; |
| } |
| |
| function testWithContentAndShadow(contentHtml, shadowHtml, label) |
| { |
| var targetContainer = document.getElementById("targetContainer"); |
| cleanupContainer(targetContainer); |
| var target = createTargetTree(contentHtml, shadowHtml); |
| targetContainer.appendChild(target); |
| var targetRenderTree = removeContainerLines(window.internals.elementRenderTreeAsText(targetContainer)); |
| |
| var referenceContainer = document.getElementById("referenceContainer"); |
| cleanupContainer(referenceContainer); |
| var separator = "<!-- -->"; // Uses a separator for keeping text node separate. |
| var referenceHtml = shadowHtml.replace("<content/>", (separator + contentHtml + separator)); |
| var reference = createTreeFrom(referenceHtml); |
| referenceContainer.appendChild(reference); |
| var referenceRenderTree = removeContainerLines(window.internals.elementRenderTreeAsText(referenceContainer)); |
| if (targetRenderTree == referenceRenderTree) |
| log("PASS[" + label + "]: content=" + contentHtml + " shadow=" + shadowHtml); |
| else { |
| log("FAIL[" + label + "]: content=" + contentHtml + " shadow=" + shadowHtml); |
| log("Expected: (for " + reference.innerHTML + ")"); |
| log(referenceRenderTree); |
| log("Actual: (for " + target.innerHTML + ")"); |
| log(targetRenderTree); |
| } |
| } |
| |
| function removeContainerLines(text) |
| { |
| var lines = text.split("\n"); |
| lines.splice(0, 2); |
| return lines.join("\n"); |
| } |
| |
| function test() |
| { |
| testRunner.dumpAsText(); |
| log("This test compares a shadow-based render tree with one for a reference DOM tree."); |
| log("Note that this test only runs on DRT."); |
| |
| for (var i = 0; i < contentSources.length; ++i) { |
| for (var j = 0; j < shadowSources.length; ++j) { |
| var testLabel = i + "," + j; |
| testWithContentAndShadow(contentSources[i], shadowSources[j], testLabel); |
| } |
| } |
| |
| document.getElementById("test").style.display = "none"; |
| document.getElementById("console").style.display = "block"; |
| } |
| </script> |
| </head> |
| <body onload="test()"> |
| <div id="test"> |
| <div class="container" id="targetContainer"></div> |
| <div class="container" id="referenceContainer"></div> |
| </div> |
| <pre id="console" style="display: none;"></pre> |
| </body> |
| </html> |
