src/third_party/WebKit/LayoutTests/fast/dom/shadow/content-element-renderers.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 /* relative positioning ensures underlying RenderLayer */
   6 .container {
   7     position: relative;
   8 }
   9 </style>
  10 <script>
  11 function log(message)
  12 {
  13     var line = document.createElement("div");
  14     line.textContent = message;
  15     document.getElementById("console").appendChild(line);
  16 }
  17
  18 var contentSources = [
  19   "<div/>",
  20   "#text<div/>",
  21   "<div/>#text",
  22   "#text<div/>#text",
  23
  24   "<span/>",
  25   "#text<span/>",
  26   "<span/>#text",
  27   "#text<span/>#text",
  28
  29   "<span/>#text<div/>",
  30   "<div/>#text<span/>",
  31   "<div/><span/>",
  32   "<span/><div/>"
  33
  34 ];
  35
  36 var shadowSources = [
  37   "<content/>",
  38   "<div/><content/><div/>",
  39   "<div/><content/><span/>",
  40   "<span/><content/><span/>",
  41   "<span/><content/><div/>",
  42
  43   "<div/><content/><div/>",
  44   "<div/><content/><span/>",
  45   "<span/><content/><span/>",
  46   "<span/><content/><div/>",
  47
  48   "<div/>#text<content/>#text<div/>",
  49   "<div/>#text<content/>#text<span/>",
  50   "<span/>#text<content/>#text<span/>",
  51   "<span/>#text<content/>#text<div/>",
  52
  53   "<div><content/></div>",
  54   "<span><content/></span>"
  55 ];
  56
  57 function createTreeFrom(html)
  58 {
  59     var enhancedHtml = html.replace(/<span\/>/g, "<span> </span>").replace(/<div\/>/g, "<div> </div>").replace(/<content\/>/g, "<content></content>").replace(/#text/g, " ");
  60     var root = document.createElement("blockquote");
  61     root.innerHTML = enhancedHtml;
  62     var contentPlaceholder = root.getElementsByTagName("CONTENT")[0];
  63     if (contentPlaceholder) {
  64         var contentParent = contentPlaceholder.parentNode;
  65         contentParent.replaceChild(window.document.createElement('content'), contentPlaceholder);
  66     };
  67
  68     return root;
  69 }
  70
  71 function moveChildren(fromParent, toParent)
  72 {
  73     var children = fromParent.childNodes;
  74     while (fromParent.firstChild)
  75         toParent.appendChild(fromParent.firstChild);
  76 }
  77
  78 function createTargetTree(contentHtml, shadowHtml)
  79 {
  80     var content = createTreeFrom(contentHtml);
  81     var shadow = createTreeFrom(shadowHtml);
  82     var host = document.createElement("blockquote");
  83     var shadowRoot = host.createShadowRoot();
  84     moveChildren(content, host);
  85     moveChildren(shadow, shadowRoot);
  86     return host;
  87 }
  88
  89 function cleanupContainer(container)
  90 {
  91     var child = container.firstChild;
  92     if (child)
  93         container.removeChild(child);
  94     container.offsetLeft;
  95 }
  96
  97 function testWithContentAndShadow(contentHtml, shadowHtml, label)
  98 {
  99     var targetContainer = document.getElementById("targetContainer");
 100     cleanupContainer(targetContainer);
 101     var target = createTargetTree(contentHtml, shadowHtml);
 102     targetContainer.appendChild(target);
 103     var targetRenderTree = removeContainerLines(window.internals.elementRenderTreeAsText(targetContainer));
 104
 105     var referenceContainer = document.getElementById("referenceContainer");
 106     cleanupContainer(referenceContainer);
 107     var separator = "<!-- -->"; // Uses a separator for keeping text node separate.
 108     var referenceHtml = shadowHtml.replace("<content/>", (separator + contentHtml + separator));
 109     var reference = createTreeFrom(referenceHtml);
 110     referenceContainer.appendChild(reference);
 111     var referenceRenderTree = removeContainerLines(window.internals.elementRenderTreeAsText(referenceContainer));
 112     if (targetRenderTree == referenceRenderTree)
 113         log("PASS[" + label + "]: content=" + contentHtml + " shadow=" + shadowHtml);
 114     else {
 115         log("FAIL[" + label + "]: content=" + contentHtml + " shadow=" + shadowHtml);
 116         log("Expected: (for " + reference.innerHTML + ")");
 117         log(referenceRenderTree);
 118         log("Actual: (for " + target.innerHTML + ")");
 119         log(targetRenderTree);
 120     }
 121 }
 122
 123 function removeContainerLines(text)
 124 {
 125     var lines = text.split("\n");
 126     lines.splice(0, 2);
 127     return lines.join("\n");
 128 }
 129
 130 function test()
 131 {
 132     testRunner.dumpAsText();
 133     log("This test compares a shadow-based render tree with one for a reference DOM tree.");
 134     log("Note that this test only runs on DRT.");
 135
 136     for (var i = 0; i < contentSources.length; ++i) {
 137         for (var j = 0; j < shadowSources.length; ++j) {
 138             var testLabel = i + "," + j;
 139             testWithContentAndShadow(contentSources[i], shadowSources[j], testLabel);
 140         }
 141     }
 142
 143     document.getElementById("test").style.display = "none";
 144     document.getElementById("console").style.display = "block";
 145 }
 146 </script>
 147 </head>
 148 <body onload="test()">
 149 <div id="test">
 150 <div class="container" id="targetContainer"></div>
 151 <div class="container" id="referenceContainer"></div>
 152 </div>
 153 <pre id="console" style="display: none;"></pre>
 154 </body>
 155 </html>