| Index: third_party/WebKit/LayoutTests/inspector/elements/shadow/shadow-distribution.html
|
| diff --git a/third_party/WebKit/LayoutTests/inspector/elements/shadow/shadow-distribution.html b/third_party/WebKit/LayoutTests/inspector/elements/shadow/shadow-distribution.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..fc9cf0cb9f2f13431aaf4865a9ecc1f5e407c03b
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/inspector/elements/shadow/shadow-distribution.html
|
| @@ -0,0 +1,170 @@
|
| +<html>
|
| +<head>
|
| +<script src="../../../http/tests/inspector/inspector-test.js"></script>
|
| +<script src="../../../http/tests/inspector/elements-test.js"></script>
|
| +<script>
|
| +
|
| +function createShadowRoot(hostId, slots)
|
| +{
|
| + var host = document.createElement("div");
|
| + host.id = hostId;
|
| + document.body.appendChild(host);
|
| +
|
| + var shadow = host.attachShadow({ mode: "open" });
|
| + for (var i = 0; i < slots.length; i++) {
|
| + var slot = document.createElement("slot");
|
| + slot.id = "slot" + (i + 1);
|
| + if (slots[i])
|
| + slot.setAttribute("name", slots[i]);
|
| + shadow.appendChild(slot);
|
| + }
|
| +}
|
| +
|
| +function createChild(hostId, childId, tagName, slotName)
|
| +{
|
| + var child = document.createElement(tagName);
|
| + child.id = childId;
|
| + if (slotName)
|
| + child.setAttribute("slot", slotName);
|
| + var host = document.getElementById(hostId);
|
| + host.appendChild(child);
|
| +}
|
| +
|
| +function resolveElement(elementId)
|
| +{
|
| + var parts = elementId.split(".");
|
| + var root = document;
|
| + while (parts.length > 1) {
|
| + root = root.getElementById(parts[0]).shadowRoot;
|
| + parts.shift();
|
| + }
|
| + return root.getElementById(parts[0]);
|
| +}
|
| +
|
| +function changeAttribute(elementId, name, value)
|
| +{
|
| + var element = resolveElement(elementId);
|
| + if (value)
|
| + element.setAttribute(name, value);
|
| + else
|
| + element.removeAttribute(name);
|
| +}
|
| +
|
| +function removeElement(elementId)
|
| +{
|
| + var element = resolveElement(elementId);
|
| + element.parentNode.removeChild(element);
|
| +}
|
| +
|
| +function reparentElement(elementId, parentId)
|
| +{
|
| + var element = resolveElement(elementId);
|
| + var parent = resolveElement(parentId);
|
| + parent.appendChild(element);
|
| +}
|
| +
|
| +function test()
|
| +{
|
| + InspectorTest.runTestSuite([
|
| + function createHost1(next)
|
| + {
|
| + evalAndDump("createShadowRoot('host1', ['slot1', 'slot2', ''])", "host1", next);
|
| + },
|
| +
|
| + function createChild1(next)
|
| + {
|
| + evalAndDump("createChild('host1', 'child1', 'span', 'slot2')", "host1", next);
|
| + },
|
| +
|
| + function createChild2(next)
|
| + {
|
| + evalAndDump("createChild('host1', 'child2', 'div', '')", "host1", next);
|
| + },
|
| +
|
| + function createChild3(next)
|
| + {
|
| + evalAndDump("createChild('host1', 'child3', 'h1', 'slot2')", "host1", next);
|
| + },
|
| +
|
| + function createChild4(next)
|
| + {
|
| + evalAndDump("createChild('host1', 'child4', 'h2', 'slot1')", "host1", next);
|
| + },
|
| +
|
| + function createChild5(next)
|
| + {
|
| + evalAndDump("createChild('host1', 'child5', 'h3', 'slot3')", "host1", next);
|
| + },
|
| +
|
| + function modifyChild1(next)
|
| + {
|
| + evalAndDump("changeAttribute('child1', 'slot', 'slot1')", "host1", next);
|
| + },
|
| +
|
| + function modifyChild4(next)
|
| + {
|
| + evalAndDump("changeAttribute('child4', 'slot', '')", "host1", next);
|
| + },
|
| +
|
| + function modifySlot1(next)
|
| + {
|
| + evalAndDump("changeAttribute('host1.slot1', 'name', 'slot3')", "host1", next);
|
| + },
|
| +
|
| + function modifySlot2(next)
|
| + {
|
| + evalAndDump("changeAttribute('host1.slot2', 'name', 'slot1')", "host1", next);
|
| + },
|
| +
|
| + function removeChild3(next)
|
| + {
|
| + evalAndDump("removeElement('child3')", "host1", next);
|
| + },
|
| +
|
| + function removeChild1(next)
|
| + {
|
| + evalAndDump("removeElement('child1')", "host1", next);
|
| + },
|
| +
|
| + function removeSlot1(next)
|
| + {
|
| + evalAndDump("removeElement('host1.slot1')", "host1", next);
|
| + },
|
| +
|
| + function createHost2(next)
|
| + {
|
| + evalAndDump("createShadowRoot('host2', ['slot3'])", "host2", next);
|
| + },
|
| +
|
| + function moveChild5FromHost1ToHost2(next)
|
| + {
|
| + evalAndDump("reparentElement('child5', 'host2')", "host2", next);
|
| + },
|
| +
|
| + function modifyChild4(next)
|
| + {
|
| + evalAndDump("changeAttribute('child4', 'slot', 'slot1')", "host1", next);
|
| + },
|
| + ]);
|
| +
|
| + function evalAndDump(code, nodeId, next)
|
| + {
|
| + InspectorTest.evaluateInPage(code, InspectorTest.expandElementsTree.bind(InspectorTest, dump));
|
| +
|
| + function dump()
|
| + {
|
| + InspectorTest.dumpElementsTree(InspectorTest.expandedNodeWithId(nodeId));
|
| + next();
|
| + }
|
| + }
|
| +}
|
| +
|
| +</script>
|
| +</head>
|
| +
|
| +<body onload="runTest()">
|
| +<p>
|
| +Tests that elements panel updates dom tree structure upon distribution in shadow dom.
|
| +</p>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 2347963002:
[DevTools] Show distribution for Shadow DOM V1. (Closed)
