| OLD | NEW |
|---|
| (Empty) |
| 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", "#oldestShadowRootTemp
late"); | |
| 19 } | |
| 20 | |
| 21 function initYoungestShadowRoot() | |
| 22 { | |
| 23 createShadowRootFromTemplate(document, "#shadowHost", "#youngestShadowRootTe
mplate"); | |
| 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 ========", originalEleme
ntsTreeDumped); | |
| 65 } | |
| 66 | |
| 67 function originalElementsTreeDumped(node) | |
| 68 { | |
| 69 InspectorTest.evaluateInPage("initOldestShadowRoot()", onOldestShadowRoo
tInitialized); | |
| 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", distributedN
odeChangedAfterFirstAdding); | |
| 80 InspectorTest.evaluateInPage("addDistributedNodeToOldest()"); | |
| 81 } | |
| 82 | |
| 83 function distributedNodeChangedAfterFirstAdding() | |
| 84 { | |
| 85 waitForModifiedNodesUpdate("After adding another distributed node", dist
ributedNodeChangedAfterSecondAdding); | |
| 86 InspectorTest.evaluateInPage("addDistributedNodeToOldest()"); | |
| 87 } | |
| 88 | |
| 89 function distributedNodeChangedAfterSecondAdding() | |
| 90 { | |
| 91 waitForModifiedNodesUpdate("After adding youngest shadow root", distribu
tedNodeChangedAfterAddingYoungestShadowRoot); | |
| 92 InspectorTest.evaluateInPage("initYoungestShadowRoot()"); | |
| 93 } | |
| 94 | |
| 95 function distributedNodeChangedAfterAddingYoungestShadowRoot() | |
| 96 { | |
| 97 waitForModifiedNodesUpdate("After adding inner shadow root node", distri
butedNodeChangedAfterAddingInnerShadowRoot); | |
| 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, "_u
pdateModifiedNodes", 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 differe
nt shadow host display modes.</p> | |
| 132 <template id="youngestShadowRootTemplate"> | |
| 133 <div class="youngestShadowMain"> | |
| 134 <shadow></shadow> | |
| 135 <content select=".distributeMeToYoungest"><div id="fallbackYoungest"></d
iv></content> | |
| 136 <div class="innerShadowHost"> | |
| 137 <content in-youngest-shadow-root select=".distributeMeToInner"></con
tent> | |
| 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> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1158883003:
DevTools: shard inspector/elements tests for faster execution. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk