| 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 |
| 7 function createShadowRoot(hostId, slots) |
| 8 { |
| 9 var host = document.createElement("div"); |
| 10 host.id = hostId; |
| 11 document.body.appendChild(host); |
| 12 |
| 13 var shadow = host.attachShadow({ mode: "open" }); |
| 14 for (var i = 0; i < slots.length; i++) { |
| 15 var slot = document.createElement("slot"); |
| 16 slot.id = "slot" + (i + 1); |
| 17 if (slots[i]) |
| 18 slot.setAttribute("name", slots[i]); |
| 19 shadow.appendChild(slot); |
| 20 } |
| 21 } |
| 22 |
| 23 function createChild(hostId, childId, tagName, slotName) |
| 24 { |
| 25 var child = document.createElement(tagName); |
| 26 child.id = childId; |
| 27 if (slotName) |
| 28 child.setAttribute("slot", slotName); |
| 29 var host = document.getElementById(hostId); |
| 30 host.appendChild(child); |
| 31 } |
| 32 |
| 33 function resolveElement(elementId) |
| 34 { |
| 35 var parts = elementId.split("."); |
| 36 var root = document; |
| 37 while (parts.length > 1) { |
| 38 root = root.getElementById(parts[0]).shadowRoot; |
| 39 parts.shift(); |
| 40 } |
| 41 return root.getElementById(parts[0]); |
| 42 } |
| 43 |
| 44 function changeAttribute(elementId, name, value) |
| 45 { |
| 46 var element = resolveElement(elementId); |
| 47 if (value) |
| 48 element.setAttribute(name, value); |
| 49 else |
| 50 element.removeAttribute(name); |
| 51 } |
| 52 |
| 53 function removeElement(elementId) |
| 54 { |
| 55 var element = resolveElement(elementId); |
| 56 element.parentNode.removeChild(element); |
| 57 } |
| 58 |
| 59 function reparentElement(elementId, parentId) |
| 60 { |
| 61 var element = resolveElement(elementId); |
| 62 var parent = resolveElement(parentId); |
| 63 parent.appendChild(element); |
| 64 } |
| 65 |
| 66 function test() |
| 67 { |
| 68 InspectorTest.runTestSuite([ |
| 69 function createHost1(next) |
| 70 { |
| 71 evalAndDump("createShadowRoot('host1', ['slot1', 'slot2', ''])", "ho
st1", next); |
| 72 }, |
| 73 |
| 74 function createChild1(next) |
| 75 { |
| 76 evalAndDump("createChild('host1', 'child1', 'span', 'slot2')", "host
1", next); |
| 77 }, |
| 78 |
| 79 function createChild2(next) |
| 80 { |
| 81 evalAndDump("createChild('host1', 'child2', 'div', '')", "host1", ne
xt); |
| 82 }, |
| 83 |
| 84 function createChild3(next) |
| 85 { |
| 86 evalAndDump("createChild('host1', 'child3', 'h1', 'slot2')", "host1"
, next); |
| 87 }, |
| 88 |
| 89 function createChild4(next) |
| 90 { |
| 91 evalAndDump("createChild('host1', 'child4', 'h2', 'slot1')", "host1"
, next); |
| 92 }, |
| 93 |
| 94 function createChild5(next) |
| 95 { |
| 96 evalAndDump("createChild('host1', 'child5', 'h3', 'slot3')", "host1"
, next); |
| 97 }, |
| 98 |
| 99 function modifyChild1(next) |
| 100 { |
| 101 evalAndDump("changeAttribute('child1', 'slot', 'slot1')", "host1", n
ext); |
| 102 }, |
| 103 |
| 104 function modifyChild4(next) |
| 105 { |
| 106 evalAndDump("changeAttribute('child4', 'slot', '')", "host1", next); |
| 107 }, |
| 108 |
| 109 function modifySlot1(next) |
| 110 { |
| 111 evalAndDump("changeAttribute('host1.slot1', 'name', 'slot3')", "host
1", next); |
| 112 }, |
| 113 |
| 114 function modifySlot2(next) |
| 115 { |
| 116 evalAndDump("changeAttribute('host1.slot2', 'name', 'slot1')", "host
1", next); |
| 117 }, |
| 118 |
| 119 function removeChild3(next) |
| 120 { |
| 121 evalAndDump("removeElement('child3')", "host1", next); |
| 122 }, |
| 123 |
| 124 function removeChild1(next) |
| 125 { |
| 126 evalAndDump("removeElement('child1')", "host1", next); |
| 127 }, |
| 128 |
| 129 function removeSlot1(next) |
| 130 { |
| 131 evalAndDump("removeElement('host1.slot1')", "host1", next); |
| 132 }, |
| 133 |
| 134 function createHost2(next) |
| 135 { |
| 136 evalAndDump("createShadowRoot('host2', ['slot3'])", "host2", next); |
| 137 }, |
| 138 |
| 139 function moveChild5FromHost1ToHost2(next) |
| 140 { |
| 141 evalAndDump("reparentElement('child5', 'host2')", "host2", next); |
| 142 }, |
| 143 |
| 144 function modifyChild4(next) |
| 145 { |
| 146 evalAndDump("changeAttribute('child4', 'slot', 'slot1')", "host1", n
ext); |
| 147 }, |
| 148 ]); |
| 149 |
| 150 function evalAndDump(code, nodeId, next) |
| 151 { |
| 152 InspectorTest.evaluateInPage(code, InspectorTest.expandElementsTree.bind
(InspectorTest, dump)); |
| 153 |
| 154 function dump() |
| 155 { |
| 156 InspectorTest.dumpElementsTree(InspectorTest.expandedNodeWithId(node
Id)); |
| 157 next(); |
| 158 } |
| 159 } |
| 160 } |
| 161 |
| 162 </script> |
| 163 </head> |
| 164 |
| 165 <body onload="runTest()"> |
| 166 <p> |
| 167 Tests that elements panel updates dom tree structure upon distribution in shadow
dom. |
| 168 </p> |
| 169 </body> |
| 170 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2347963002:
[DevTools] Show distribution for Shadow DOM V1. (Closed)
