125 lines
4.0 KiB
HTML
125 lines
4.0 KiB
HTML
<html>
|
|
<head>
|
|
<script src="../../http/tests/inspector/resources/protocol-test.js"></script>
|
|
<script>
|
|
window.internals.insertAuthorCSS("div { z-index: 400; }");
|
|
window.internals.insertUserCSS("div { z-index: 600; }");
|
|
window.internals.insertAuthorCSS("div { z-index: 300; }");
|
|
window.internals.insertUserCSS("div { z-index: 500; }");
|
|
</script>
|
|
<style>
|
|
@import url(resources/external.css?1) (min-width: 0px);
|
|
|
|
body { color: red; }
|
|
@media (min-width: 1px) { body { color: red; } }
|
|
@media (min-width: 2px) { @supports(display: block) { body { color: red; } } }
|
|
</style>
|
|
<style media="(min-width: 3px)">
|
|
body { color: red;}
|
|
</style>
|
|
<link rel="stylesheet" href="resources/external.css?2" media="(min-width: 4px)">
|
|
<style>
|
|
div#x { z-index: 100; }
|
|
#x { z-index: 200; }
|
|
div { z-index: 300; }
|
|
|
|
div::first-line { z-index: 1; }
|
|
div::first-letter { z-index: 2; }
|
|
div::marker { z-index: 3; }
|
|
div::before { z-index: 4; }
|
|
div::after { z-index: 5; }
|
|
div::selection { z-index: 6; }
|
|
div::-webkit-scrollbar { z-index: 7; }
|
|
div::-webkit-scrollbar-thumb { z-index: 8; }
|
|
div::-webkit-scrollbar-button { z-index: 9; }
|
|
div::-webkit-scrollbar-track { z-index: 10; }
|
|
div::-webkit-scrollbar-track-piece { z-index: 11; }
|
|
div::-webkit-scrollbar-corner { z-index: 12; }
|
|
div::-webkit-resizer { z-index: 13; }
|
|
</style>
|
|
<script>
|
|
function test()
|
|
{
|
|
Promise.resolve()
|
|
.then(() => {
|
|
ProtocolTest.log("Enabling Page domain...");
|
|
return InspectorProtocol.awaitCommand({
|
|
method: "Page.enable",
|
|
params: {},
|
|
});
|
|
})
|
|
.then(() => {
|
|
ProtocolTest.log("Requesting document...");
|
|
return InspectorProtocol.awaitCommand({
|
|
method: "DOM.getDocument",
|
|
params: {},
|
|
});
|
|
})
|
|
.then(({root}) => {
|
|
ProtocolTest.log("Querying for \"div#x\"...");
|
|
return InspectorProtocol.awaitCommand({
|
|
method: "DOM.querySelector",
|
|
params: {
|
|
nodeId: root.nodeId,
|
|
selector: "div#x",
|
|
},
|
|
});
|
|
})
|
|
.then(({nodeId}) => {
|
|
ProtocolTest.log("Getting matched styles for \"div#x\"...");
|
|
return InspectorProtocol.awaitCommand({
|
|
method: "CSS.getMatchedStylesForNode",
|
|
params: {
|
|
nodeId,
|
|
includePseudo: true,
|
|
includeInherited: true,
|
|
},
|
|
});
|
|
})
|
|
.then(({matchedCSSRules, pseudoElements, inherited}) => {
|
|
function filterRuleMatches(ruleMatches) {
|
|
return ruleMatches.filter((ruleMatch) => ruleMatch.rule.origin !== "user-agent");
|
|
}
|
|
|
|
function replacer(key, value) {
|
|
if (key === "ruleId" || key === "styleId" || key === "range" || key === "sourceLine" || key === "sourceURL")
|
|
return "<filtered>";
|
|
return value;
|
|
}
|
|
|
|
ProtocolTest.log("");
|
|
ProtocolTest.log("Matched:");
|
|
matchedCSSRules = filterRuleMatches(matchedCSSRules);
|
|
ProtocolTest.json(matchedCSSRules, replacer);
|
|
|
|
ProtocolTest.log("");
|
|
ProtocolTest.log("Pseudo:");
|
|
pseudoElements = pseudoElements.filter((pseudoIdMatch) => {
|
|
pseudoIdMatch.matches = filterRuleMatches(pseudoIdMatch.matches);
|
|
return pseudoIdMatch.matches.length;
|
|
});
|
|
ProtocolTest.json(pseudoElements, replacer);
|
|
|
|
ProtocolTest.log("");
|
|
ProtocolTest.log("Inherited:");
|
|
inherited = inherited.filter((inheritedStyleEntry) => {
|
|
inheritedStyleEntry.matchedCSSRules = filterRuleMatches(inheritedStyleEntry.matchedCSSRules);
|
|
return inheritedStyleEntry.matchedCSSRules.length;
|
|
});
|
|
ProtocolTest.json(inherited, replacer);
|
|
})
|
|
.catch((error) => {
|
|
ProtocolTest.log(error);
|
|
})
|
|
.finally(() => {
|
|
ProtocolTest.completeTest();
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onLoad="runTest()">
|
|
<p>Testing CSS.getMatchedStylesForNode.</p>
|
|
<div id="x"></div>
|
|
</body>
|
|
</html>
|