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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <pre id="console">
   8 This tests the correctness of includers of forwarded children.
   9 Note that this test needs internals object thus cannot run outside DRT.
  10 </pre>
  11 <div id="container"></div>
  12 <script>
  13 function includerFor(element) {
  14     var insertionPoints = element.getDestinationInsertionPoints();
  15     if (insertionPoints.length == 0)
  16         return null;
  17     return insertionPoints.item(insertionPoints.length - 1);
  18 }
  19 var container = document.getElementById("container");
  20
  21 var shadowRoot = null;
  22
  23 var elementWithoutShadow = document.createElement("div");
  24 container.appendChild(elementWithoutShadow);
  25 var childOfElementWithoutShadow = document.createElement("span");
  26 elementWithoutShadow.appendChild(childOfElementWithoutShadow);
  27 container.offsetLeft;
  28 shouldBe("includerFor(childOfElementWithoutShadow)", "null");
  29
  30 var elementWithShadow = document.createElement("div");
  31 container.appendChild(elementWithShadow);
  32 var shadowRootOfElementWithShadow = elementWithShadow.createShadowRoot();
  33 shadowRootOfElementWithShadow.appendChild(document.createElement("div")); // Gives non-content child.
  34 var childOfElementWithShadow = document.createElement("span");
  35 elementWithShadow.appendChild(childOfElementWithShadow);
  36 container.offsetLeft;
  37 shouldBe("includerFor(childOfElementWithShadow)", "null");
  38
  39 var elementWithShadowContent = document.createElement("div");
  40 container.appendChild(elementWithShadowContent);
  41 var shadowRootOfElementWithShadowContent = elementWithShadowContent.createShadowRoot();
  42 var shadowContentOfElementWithShadowContent = document.createElement('content');
  43 shadowRootOfElementWithShadowContent.appendChild(shadowContentOfElementWithShadowContent);
  44 var childOfElementWithShadowContent = document.createElement("span");
  45 elementWithShadowContent.appendChild(childOfElementWithShadowContent);
  46 container.offsetLeft;
  47 shouldBe("includerFor(childOfElementWithShadowContent)", "shadowContentOfElementWithShadowContent");
  48
  49 //
  50 // Testing dynamic change
  51 //
  52 var movingChild = childOfElementWithShadowContent;
  53
  54 // Removing
  55 elementWithShadowContent.removeChild(movingChild);
  56 shouldBe("includerFor(movingChild)", "null");
  57
  58 // Moving to content-less tree
  59 elementWithShadow.appendChild(movingChild);
  60 shouldBe("includerFor(movingChild)", "null");
  61 elementWithShadow.removeChild(movingChild);
  62
  63 // Moving to another content-full tree
  64 var anotherElementWithShadowContent = document.createElement("div");
  65 container.appendChild(anotherElementWithShadowContent);
  66 var anotherShadowRootOfElementWithShadowContent = anotherElementWithShadowContent.createShadowRoot();
  67 var anotherShadowContentOfElementWithShadowContent = document.createElement('content');
  68 anotherShadowRootOfElementWithShadowContent.appendChild(anotherShadowContentOfElementWithShadowContent);
  69
  70 anotherElementWithShadowContent.appendChild(movingChild);
  71 container.offsetLeft;
  72 shouldBe("includerFor(movingChild)", "anotherShadowContentOfElementWithShadowContent");
  73 </script>
  74 </body>
  75 </html>