The Tor Browser: dom/tests/mochitest/webcomponents/test_shadow

     1 <!DOCTYPE HTML>

     2 <html>

     3 <!--

     4 https://bugzilla.mozilla.org/show_bug.cgi?id=887538

     5 -->

     6 <head>

     7   <title>Test for HTMLShadowElement</title>

     8   <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>

     9   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />

    10 </head>

    11 <body>

    12 <div id="grabme"></div>

    13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=887538">Bug 887538</a>

    14 <script>

    15 var host = document.createElement("span");

    17 // Create three shadow roots on a single host and make sure that shadow elements

    18 // are associated with the correct shadow root.

    19 var firstShadow = host.createShadowRoot();

    20 firstShadow.innerHTML = '<shadow id="shadowone"></shadow>';

    21 var secondShadow = host.createShadowRoot();

    22 secondShadow.innerHTML = '<shadow id="shadowtwo"></shadow>';

    23 var thirdShadow = host.createShadowRoot();

    24 thirdShadow.innerHTML = '<shadow id="shadowthree"></shadow>';

    26 is(firstShadow.getElementById("shadowone").olderShadowRoot, null, "Shadow element in oldest ShadowRoot should not be associated with a ShadowRoot.");

    27 is(secondShadow.getElementById("shadowtwo").olderShadowRoot, firstShadow, "Shadow element should be associated with older ShadowRoot.");

    28 is(thirdShadow.getElementById("shadowthree").olderShadowRoot, secondShadow, "Shadow element should be associated with older ShadowRoot.");

    30 // Only the first ShadowRoot in tree order is an insertion point.

    31 host = document.createElement("span");

    32 firstShadow = host.createShadowRoot();

    33 secondShadow = host.createShadowRoot();

    34 secondShadow.innerHTML = '<shadow id="shadowone"></shadow><shadow id="shadowtwo"></shadow>';

    35 var shadowElemOne = secondShadow.getElementById("shadowone");

    36 var shadowElemTwo = secondShadow.getElementById("shadowtwo");

    38 is(shadowElemOne.olderShadowRoot, firstShadow, "First <shadow> in tree order should be an insertion point.");

    39 is(shadowElemTwo.olderShadowRoot, null, "Second <shadow> in tree order should not be an insertion point.");

    41 // Remove the first <shadow> element and make sure the second <shadow> element becomes an insertion point.

    42 secondShadow.removeChild(shadowElemOne);

    43 is(shadowElemOne.olderShadowRoot, null, "<shadow> element not in a ShadowRoot is not an insertion point.");

    44 is(shadowElemTwo.olderShadowRoot, firstShadow, "Second <shadow> element should become insertion point after first is removed.");

    46 // Insert a <shadow> element before the current shadow insertion point and make sure that it becomes an insertion point.

    47 secondShadow.insertBefore(shadowElemOne, shadowElemTwo);

    48 is(shadowElemOne.olderShadowRoot, firstShadow, "<shadow> element inserted as first in tree order should become an insertion point.");

    49 is(shadowElemTwo.olderShadowRoot, null, "<shadow> element should no longer be an insertion point it another is inserted before.");

    51 // <shadow> element in fallback content is not an insertion point.

    52 host = document.createElement("span");

    53 firstShadow = host.createShadowRoot();

    54 secondShadow = host.createShadowRoot();

    55 secondShadow.innerHTML = '<content><shadow id="shadowone"></shadow></content><shadow id="shadowtwo"></shadow>';

    56 shadowElemOne = secondShadow.getElementById("shadowone");

    57 shadowElemTwo = secondShadow.getElementById("shadowtwo");

    59 is(shadowElemOne.olderShadowRoot, null, "<shadow> element in fallback content is not an insertion point.");

    60 is(shadowElemTwo.olderShadowRoot, null, "<shadow> element preceeded by another <shadow> element is not an insertion point.");

    62 // <shadow> element that is descendant of shadow element is not an insertion point.

    63 host = document.createElement("span");

    64 firstShadow = host.createShadowRoot();

    65 secondShadow = host.createShadowRoot();

    66 secondShadow.innerHTML = '<shadow><shadow id="shadowone"></shadow></shadow>';

    67 shadowElemOne = secondShadow.getElementById("shadowone");

    68 is(shadowElemOne.olderShadowRoot, null, "<shadow> element that is descendant of shadow element is not an insertion point.");

    70 // Check projection of <content> elements through <shadow> elements.

    71 host = document.createElement("span");

    72 firstShadow = host.createShadowRoot();

    73 secondShadow = host.createShadowRoot();

    74 firstShadow.innerHTML = '<content id="firstcontent"></content>';

    75 secondShadow.innerHTML = '<shadow><span id="one"></span><content id="secondcontent"></content><span id="four"></span></shadow>';

    76 host.innerHTML = '<span id="two"></span><span id="three"></span>';

    77 var firstContent = firstShadow.getElementById("firstcontent");

    78 var secondContent = secondShadow.getElementById("secondcontent");

    79 var firstDistNodes = firstContent.getDistributedNodes();

    80 var secondDistNodes = secondContent.getDistributedNodes();

    82 is(secondDistNodes.length, 2, "There should be two distributed nodes from the host.");

    83 ok(secondDistNodes[0].id == "two" &&

    84    secondDistNodes[1].id == "three", "Nodes projected from host should preserve order.");

    86 is(firstDistNodes.length, 4, "There should be four distributed nodes, two from the first shadow, two from the second shadow.");

    87 ok(firstDistNodes[0].id == "one" &&

    88    firstDistNodes[1].id == "two" &&

    89    firstDistNodes[2].id == "three" &&

    90    firstDistNodes[3].id == "four", "Reprojection through shadow should preserve node order.");

    92 // Remove a node from the host and make sure that it is removed from all insertion points.

    93 host.removeChild(host.firstChild);

    94 firstDistNodes = firstContent.getDistributedNodes();

    95 secondDistNodes = secondContent.getDistributedNodes();

    97 is(secondDistNodes.length, 1, "There should be one distriubted node remaining after removing node from host.");

    98 ok(secondDistNodes[0].id == "three", "Span with id=two should have been removed from content element.");

    99 is(firstDistNodes.length, 3, "There should be three distributed nodes remaining after removing node from host.");

   100 ok(firstDistNodes[0].id == "one" &&

   101    firstDistNodes[1].id == "three" &&

   102    firstDistNodes[2].id == "four", "Reprojection through shadow should preserve node order.");

   104 // Check projection of <shadow> elements to <content> elements.

   105 host = document.createElement("span");

   106 firstShadow = host.createShadowRoot();

   107 secondShadow = host.createShadowRoot();

   108 secondShadow.innerHTML = '<span id="firstspan"><shadow></shadow></span>';

   109 thirdShadow = secondShadow.getElementById("firstspan").createShadowRoot();

   110 thirdShadow.innerHTML = '<content id="firstcontent"></content>';

   111 firstContent = thirdShadow.getElementById("firstcontent");

   112 var shadowChild = document.createElement("span");

   113 firstShadow.appendChild(shadowChild);

   115 is(firstContent.getDistributedNodes()[0], shadowChild, "Elements in shadow insertioin point should be projected into content insertion points.");

   117 // Remove child of ShadowRoot and check that projected node is removed from insertion point.

   118 firstShadow.removeChild(firstShadow.firstChild);

   120 is(firstContent.getDistributedNodes().length, 0, "Reprojected element was removed from ShadowRoot, thus it should be removed from content insertion point.");

   122 // Check deeply nested projection of <shadow> elements.

   123 host = document.createElement("span");

   124 firstShadow = host.createShadowRoot();

   125 firstShadow.innerHTML = '<content></content>';

   126 secondShadow = host.createShadowRoot();

   127 secondShadow.innerHTML = '<shadow><content></content></shadow>';

   128 thirdShadow = host.createShadowRoot();

   129 thirdShadow.innerHTML = '<span id="firstspan"><shadow><content></content></shadow></span>';

   130 var fourthShadow = thirdShadow.getElementById("firstspan").createShadowRoot();

   131 fourthShadow.innerHTML = '<content id="firstcontent"></content>';

   132 firstContent = fourthShadow.getElementById("firstcontent");

   133 host.innerHTML = '<span></span>';

   135 is(firstContent.getDistributedNodes()[0], host.firstChild, "Child of host should be projected to insertion point.");

   137 // Remove node and make sure that it is removed from distributed nodes.

   138 host.removeChild(host.firstChild);

   140 is(firstContent.getDistributedNodes().length, 0, "Node removed from host should be removed from insertion point.");

   142 // Check projection of fallback content through <shadow> elements.

   143 host = document.createElement("span");

   144 firstShadow = host.createShadowRoot();

   145 firstShadow.innerHTML = '<content><span id="firstspan"></span></content>';

   146 secondShadow = host.createShadowRoot();

   147 secondShadow.innerHTML = '<span id="secondspan"><shadow id="firstshadow"></shadow></span>';

   148 firstShadowElem = secondShadow.getElementById("firstshadow");

   149 thirdShadow = secondShadow.getElementById("secondspan").createShadowRoot();

   150 thirdShadow.innerHTML = '<content id="firstcontent"></content>';

   151 firstContent = thirdShadow.getElementById("firstcontent");

   153 is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from fallback content.");

   154 is(firstContent.getDistributedNodes()[0], firstShadow.getElementById("firstspan"), "Fallback content should be distributed.");

   156 // Add some content to the host (causing the fallback content to be dropped) and make sure distribution nodes are updated.

   158 var newElem = document.createElement("div");

   159 firstShadowElem.appendChild(newElem);

   161 is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from the host.");

   162 is(firstContent.getDistributedNodes()[0], newElem, "Distributed node should be from host, not fallback content.");

   164 // Remove the distribution node and check that fallback content is used.

   165 firstShadowElem.removeChild(newElem);

   167 is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from fallback content.");

   168 is(firstContent.getDistributedNodes()[0], firstShadow.getElementById("firstspan"), "Fallback content should be distributed after removing node from host.");

   170 </script>

   171 </body>

   172 </html>

The Tor Browser / file revision

dom/tests/mochitest/webcomponents/test_shadow_element.html@a63d609f5ebe

dom/tests/mochitest/webcomponents/test_shadow_element.html