| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function test() |
| { |
| function isEmptyObject(object) { |
| for (let property in object) |
| return false; |
| return true; |
| } |
| |
| function generateCSSRuleString(style) { |
| let styleText = style.selectorText + " {\n"; |
| for (let property of style.enabledProperties) { |
| if (property.anonymous) |
| continue; |
| |
| styleText += " " + property.text.trim(); |
| |
| if (!styleText.endsWith(";")) |
| styleText += ";"; |
| |
| styleText += "\n"; |
| } |
| styleText += "}"; |
| return styleText; |
| } |
| |
| function dumpStyleDeclarations(styles) { |
| InspectorTest.log("STYLES:"); |
| for (let style of styles) |
| InspectorTest.log(generateCSSRuleString(style)); |
| } |
| |
| let documentNode; |
| let hostNode; |
| |
| let suite = InspectorTest.createAsyncSuite("CSS.ShadowScopedStyle"); |
| |
| suite.addTestCase({ |
| name: "CSS.ShadowScopedStyle.HostStyles", |
| description: "Ensure shadow root host element gets :host styles.", |
| test(resolve, reject) { |
| documentNode.querySelector("#shadow-host", (nodeId) => { |
| if (!nodeId) { |
| InspectorTest.fail("DOM node #shadow-host not found in document."); |
| reject(); |
| return; |
| } |
| |
| hostNode = WI.domManager.nodeForId(nodeId); |
| let nodeStyles = WI.cssManager.stylesForNode(hostNode); |
| nodeStyles.refresh().then(() => { |
| InspectorTest.expectThat(hostNode.hasShadowRoots(), "Node should have shadow roots."); |
| InspectorTest.expectFalse(hostNode.isInShadowTree(), "Node should not be in a shadow tree."); |
| InspectorTest.expectThat(hostNode.shadowRoots()[0].shadowRootType() === WI.DOMNode.ShadowRootType.Open, "Node should have an open shadow root."); |
| InspectorTest.expectThat(isEmptyObject(nodeStyles.pseudoElements), "Node should have no pseudo element styles."); |
| dumpStyleDeclarations(nodeStyles.orderedStyles); |
| resolve(); |
| }).catch(reject); |
| }); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "CSS.ShadowScopedStyle.ElementInShadowTree", |
| description: "Ensure element in shadow tree gets shadow dom scoped styles.", |
| test(resolve, reject) { |
| hostNode.shadowRoots()[0].querySelector("#shadow-node", (nodeId) => { |
| if (!nodeId) { |
| InspectorTest.fail("DOM node #shadow-node not found in #shadow-host's shadowRoot."); |
| reject(); |
| return; |
| } |
| |
| let node = WI.domManager.nodeForId(nodeId); |
| let nodeStyles = WI.cssManager.stylesForNode(node); |
| nodeStyles.refresh().then(() => { |
| InspectorTest.expectFalse(node.hasShadowRoots(), "Node should not have shadow roots."); |
| InspectorTest.expectThat(node.isInShadowTree(), "Node should be in a shadow tree."); |
| dumpStyleDeclarations(nodeStyles.orderedStyles); |
| resolve(); |
| }).catch(reject); |
| }); |
| } |
| }); |
| |
| // Add Test: CSS.ShadowScopedStyle.SlottedElement |
| // FIXME: <https://webkit.org/b/164249> Web Inspector: Ensure inspector shows :slotted() styles in sidebar |
| |
| WI.domManager.requestDocument((node) => { |
| documentNode = node; |
| suite.runTestCasesAndFinish(); |
| }); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Test matched styles for nodes include shadow dom scoped styles.</p> |
| <div> |
| Before |
| <div id="shadow-host" style="padding: 5px"></div> |
| After |
| </div> |
| <style>#shadow-host { padding: 10px; }</style> |
| <script> |
| (function() { |
| let shadowRoot = document.getElementById("shadow-host").attachShadow({mode: "open"}); |
| shadowRoot.innerHTML = ` |
| <style> |
| :host { padding: 20px; } |
| div { color: blue; } |
| </style> |
| <div id="shadow-node" style="color: green">Shadow Content</div> |
| `; |
| })(); |
| </script> |
| </body> |
| </html> |
