blob: 284b81552017e6e6f689f06968d066fcd77bfe18 [file] [log] [blame]
<!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) {
WI.domManager.querySelector(documentNode.id, "#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) {
WI.domManager.querySelector(hostNode.shadowRoots()[0].id, "#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>