third_party/WebKit/LayoutTests/inspector/elements/shadow/shadow-host-display-modes.html

   1 <html>
   2 <head>
   3 <script src="../../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../../http/tests/inspector/elements-test.js"></script>
   5 <script>
   6 function createShadowRootFromTemplate(root, selector, templateId)
   7 {
   8     var shadowHost = root.querySelector(selector);
   9     var shadowRoot = shadowHost.createShadowRoot();
  10     var template = document.querySelector(templateId);
  11     var clone = document.importNode(template.content, true);
  12     shadowRoot.appendChild(clone);
  13     return shadowHost;
  14 }
  15
  16 function initOldestShadowRoot()
  17 {
  18     createShadowRootFromTemplate(document, "#shadowHost", "#oldestShadowRootTemplate");
  19 }
  20
  21 function initYoungestShadowRoot()
  22 {
  23     createShadowRootFromTemplate(document, "#shadowHost", "#youngestShadowRootTemplate");
  24 }
  25
  26 function initInnerShadowRoot()
  27 {
  28     var shadowHost = document.querySelector("#shadowHost");
  29     var innerShadowHost = createShadowRootFromTemplate(shadowHost.shadowRoot, ".innerShadowHost", "#innerShadowRootTemplate");
  30     innerShadowHost.id = "innerShadowHost";
  31 }
  32
  33 var lastDistributedNodeId = 0;
  34
  35 function addDistributedNode(oldest)
  36 {
  37     var node = document.createElement("div");
  38     node.classList.add(oldest ? "distributeMeToOldest" : "distributeMeToYoungest");
  39     node.classList.add("distributeMeAsWell_" + (++lastDistributedNodeId));
  40     var shadowHost = document.querySelector("#shadowHost");
  41     shadowHost.appendChild(node);
  42 }
  43
  44 function addDistributedNodeToOldest()
  45 {
  46     addDistributedNode(true);
  47 }
  48
  49 function test()
  50 {
  51     var shadowHostNode;
  52     var treeOutline;
  53     var shadowHostTreeElement;
  54     var innerShadowHostNode;
  55     var innerShadowHostTreeElement;
  56
  57     InspectorTest.expandElementsTree(elementsTreeExpanded);
  58
  59     function elementsTreeExpanded(node)
  60     {
  61         treeOutline = InspectorTest.firstElementsTreeOutline();
  62         shadowHostNode = InspectorTest.expandedNodeWithId("shadowHost");
  63         shadowHostTreeElement = treeOutline.findTreeElement(shadowHostNode)
  64         expandAndDumpShadowHostNode("========= Original ========", originalElementsTreeDumped);
  65     }
  66
  67     function originalElementsTreeDumped(node)
  68     {
  69         InspectorTest.evaluateInPage("initOldestShadowRoot()", onOldestShadowRootInitialized);
  70     }
  71
  72     function onOldestShadowRootInitialized()
  73     {
  74         expandAndDumpShadowHostNode("========= After shadow root created ========", onOldestShadowRootDumped);
  75     }
  76
  77     function onOldestShadowRootDumped()
  78     {
  79         waitForModifiedNodesUpdate("After adding distributed node", distributedNodeChangedAfterFirstAdding);
  80         InspectorTest.evaluateInPage("addDistributedNodeToOldest()");
  81     }
  82
  83     function distributedNodeChangedAfterFirstAdding()
  84     {
  85         waitForModifiedNodesUpdate("After adding another distributed node", distributedNodeChangedAfterSecondAdding);
  86         InspectorTest.evaluateInPage("addDistributedNodeToOldest()");
  87     }
  88
  89     function distributedNodeChangedAfterSecondAdding()
  90     {
  91         waitForModifiedNodesUpdate("After adding youngest shadow root", distributedNodeChangedAfterAddingYoungestShadowRoot);
  92         InspectorTest.evaluateInPage("initYoungestShadowRoot()");
  93     }
  94
  95     function distributedNodeChangedAfterAddingYoungestShadowRoot()
  96     {
  97         waitForModifiedNodesUpdate("After adding inner shadow root node", distributedNodeChangedAfterAddingInnerShadowRoot);
  98         InspectorTest.evaluateInPage("initInnerShadowRoot()");
  99     }
 100
 101     function distributedNodeChangedAfterAddingInnerShadowRoot()
 102     {
 103         InspectorTest.completeTest();
 104     }
 105
 106     function waitForModifiedNodesUpdate(title, next)
 107     {
 108         InspectorTest.addSniffer(WebInspector.ElementsTreeOutline.prototype, "_updateModifiedNodes", callback);
 109
 110         function callback()
 111         {
 112             expandAndDumpShadowHostNode("========= " + title + " ========", next);
 113         }
 114     }
 115
 116     function expandAndDumpShadowHostNode(title, next)
 117     {
 118         InspectorTest.addResult(title);
 119         InspectorTest.expandElementsTree(callback);
 120
 121         function callback()
 122         {
 123             InspectorTest.dumpElementsTree(shadowHostNode);
 124             next();
 125         }
 126     }
 127 }
 128 </script>
 129 </head>
 130 <body onload="runTest()">
 131 <p>Tests that distributed nodes and their updates are correctly shown in different shadow host display modes.</p>
 132 <template id="youngestShadowRootTemplate">
 133     <div class="youngestShadowMain">
 134         <shadow></shadow>
 135         <content select=".distributeMeToYoungest"><div id="fallbackYoungest"></div></content>
 136         <div class="innerShadowHost">
 137             <content in-youngest-shadow-root select=".distributeMeToInner"></content>
 138         </div>
 139     </div>
 140 </template>
 141 <template id="oldestShadowRootTemplate">
 142     <div class="oldestShadowMain">
 143         <content select=".distributeMeToOldest"><div id="fallbackOldest"></div></content>
 144     </div>
 145 </template>
 146 <template id="innerShadowRootTemplate">
 147     <div class="innerShadowMain">
 148         <content in-inner-shadow-root select=".distributeMeToInner"></content>
 149     </div>
 150 </template>
 151 <div id="shadowHost">
 152     <div class="distributeMeToYoungest original">
 153         youngest distributed text
 154     </div>
 155     <div class="distributeMeToOldest original">
 156         oldest distributed text
 157     </div>
 158     <div class="distributeMeToInner original">
 159         oldest distributed text
 160     </div>
 161     <div class="distributeMeToInner original2">
 162         oldest distributed text
 163     </div>
 164 </div>
 165 </body>
 166 </html>