| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/protocol-test.js"></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> |
