| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function test() |
| { |
| let suite = InspectorTest.createAsyncSuite("CSS.getMatchedStyleForNode.StartingStyleGrouping"); |
| |
| function expectRuleAtIndex(rules, index, {selectorText, colorPropertyValue, colorPropertyOverriden, file, lineNumber, groupings}) |
| { |
| InspectorTest.log(`- Testing rule #${index}`); |
| |
| let rule = rules[index]; |
| InspectorTest.expectEqual(rule.selectorText, selectorText, `Selector text should be "${selectorText}".`); |
| |
| let colorProperty = rule.style.propertyForName("color"); |
| InspectorTest.expectEqual(colorProperty.value, colorPropertyValue, `"color" property value should be "${colorPropertyValue}".`); |
| InspectorTest.expectEqual(colorProperty.overridden, colorPropertyOverriden, `"color" property value should ${colorPropertyOverriden ? "" : "not "}be overridden.`); |
| |
| InspectorTest.expectEqual(rule.sourceCodeLocation?.sourceCode.urlComponents.lastPathComponent, file, `Source code for rule should be in file named "${file}".`); |
| |
| if (!groupings) { |
| InspectorTest.expectEmpty(rule.groupings, "Rule should have no groupings."); |
| return; |
| } |
| |
| InspectorTest.expectEqual(rule.groupings.length, groupings.length, `Rule should have ${groupings.length} grouping(s).`); |
| |
| for (let i = 0; i < groupings.length; ++i) { |
| InspectorTest.expectEqual(rule.groupings[i].type, groupings[i].type, `Grouping ${i} should have a type of "${groupings[i].type}".`); |
| |
| if (groupings[i].text) |
| InspectorTest.expectEqual(rule.groupings[i].text, groupings[i].text, `Grouping ${i} should have a text of "${groupings[i].text}".`); |
| else |
| InspectorTest.expectEmpty(rule.groupings[i].text, `Grouping ${i} should not have any text.`); |
| } |
| } |
| |
| function addTestCase({name, description, selector, expectedAuthoredRuleCount, authoredRulesHandler}) |
| { |
| suite.addTestCase({ |
| name, |
| description, |
| async test() { |
| let documentNode = await WI.domManager.requestDocument(); |
| let nodeId = await documentNode.querySelector(selector); |
| let domNode = WI.domManager.nodeForId(nodeId); |
| InspectorTest.assert(domNode, `Should find DOM Node for selector '${selector}'.`); |
| |
| let domNodeStyles = WI.cssManager.stylesForNode(domNode); |
| InspectorTest.assert(domNodeStyles, `Should find CSS Styles for DOM Node.`); |
| await domNodeStyles.refreshIfNeeded(); |
| |
| let authoredRules = domNodeStyles.matchedRules.filter((rule) => rule.type === WI.CSSStyleSheet.Type.Author); |
| InspectorTest.expectEqual(authoredRules.length, expectedAuthoredRuleCount, `Should have ${expectedAuthoredRuleCount} authored rules.`); |
| authoredRulesHandler(authoredRules); |
| }, |
| }); |
| } |
| |
| addTestCase({ |
| name: "CSS.getMatchedStyleForNode.StartingStyleGrouping.Full.Normal", |
| description: "Starting styles should be presented in the expected order when overridden by a regular style.", |
| selector: "#full", |
| expectedAuthoredRuleCount: 3, |
| authoredRulesHandler(rules) { |
| expectRuleAtIndex(rules, 0, { |
| selectorText: "#full", |
| colorPropertyValue: "blue", |
| colorPropertyOverriden: true, |
| file: "getMatchedStylesForNodeStartingStyleGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.StartingStyleRule}, |
| ], |
| }); |
| expectRuleAtIndex(rules, 1, { |
| selectorText: "#full", |
| colorPropertyValue: "green", |
| colorPropertyOverriden: false, |
| file: "getMatchedStylesForNodeStartingStyleGrouping.html", |
| }); |
| expectRuleAtIndex(rules, 2, { |
| selectorText: "#full", |
| colorPropertyValue: "red", |
| colorPropertyOverriden: true, |
| file: "getMatchedStylesForNodeStartingStyleGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.StartingStyleRule}, |
| {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"}, |
| ], |
| }); |
| } |
| }); |
| |
| addTestCase({ |
| name: "CSS.getMatchedStyleForNode.StartingStyleGrouping.Initial.Normal", |
| description: "Starting styles should be presented in the expected order when only defined in starting styles.", |
| selector: "#initial", |
| expectedAuthoredRuleCount: 2, |
| authoredRulesHandler(rules) { |
| expectRuleAtIndex(rules, 0, { |
| selectorText: "#initial", |
| colorPropertyValue: "blue", |
| colorPropertyOverriden: false, |
| file: "getMatchedStylesForNodeStartingStyleGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.StartingStyleRule}, |
| ], |
| }); |
| expectRuleAtIndex(rules, 1, { |
| selectorText: "#initial", |
| colorPropertyValue: "red", |
| colorPropertyOverriden: true, |
| file: "getMatchedStylesForNodeStartingStyleGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.StartingStyleRule}, |
| {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"}, |
| ], |
| }); |
| } |
| }); |
| |
| addTestCase({ |
| name: "CSS.getMatchedStyleForNode.StartingStyleGrouping.Full.Important", |
| description: "Starting styles should be presented in the expected order when overridden by a regular style.", |
| selector: "#full-important", |
| expectedAuthoredRuleCount: 3, |
| authoredRulesHandler(rules) { |
| expectRuleAtIndex(rules, 0, { |
| selectorText: "#full-important", |
| colorPropertyValue: "blue", |
| colorPropertyOverriden: true, |
| file: "getMatchedStylesForNodeStartingStyleGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.StartingStyleRule}, |
| ], |
| }); |
| expectRuleAtIndex(rules, 1, { |
| selectorText: "#full-important", |
| colorPropertyValue: "green", |
| colorPropertyOverriden: false, |
| file: "getMatchedStylesForNodeStartingStyleGrouping.html", |
| }); |
| expectRuleAtIndex(rules, 2, { |
| selectorText: "#full-important", |
| colorPropertyValue: "red", |
| colorPropertyOverriden: true, |
| file: "getMatchedStylesForNodeStartingStyleGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.StartingStyleRule}, |
| {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"}, |
| ], |
| }); |
| } |
| }); |
| |
| addTestCase({ |
| name: "CSS.getMatchedStyleForNode.StartingStyleGrouping.Initial.Important", |
| description: "Starting styles should be presented in the expected order when only defined in starting styles.", |
| selector: "#initial-important", |
| expectedAuthoredRuleCount: 2, |
| authoredRulesHandler(rules) { |
| expectRuleAtIndex(rules, 0, { |
| selectorText: "#initial-important", |
| colorPropertyValue: "blue", |
| colorPropertyOverriden: true, |
| file: "getMatchedStylesForNodeStartingStyleGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.StartingStyleRule}, |
| ], |
| }); |
| expectRuleAtIndex(rules, 1, { |
| selectorText: "#initial-important", |
| colorPropertyValue: "red", |
| colorPropertyOverriden: false, |
| file: "getMatchedStylesForNodeStartingStyleGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.StartingStyleRule}, |
| {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"}, |
| ], |
| }); |
| } |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| <style> |
| @supports(color: red) { |
| @starting-style { |
| #full { |
| color: red; |
| } |
| #initial { |
| color: red; |
| } |
| #full-important { |
| color: red !important; |
| } |
| #initial-important { |
| color: red !important; |
| } |
| } |
| } |
| |
| #full { |
| color: green; |
| } |
| #full-important { |
| color: green; |
| } |
| |
| @starting-style { |
| #full { |
| color: blue; |
| } |
| #initial { |
| color: blue; |
| } |
| #full-important { |
| color: blue; |
| } |
| #initial-important { |
| color: blue; |
| } |
| } |
| </style> |
| </head> |
| <body onload="runTest()"> |
| <p>Tests for the CSS.getMatchedStyleForNode command and style rule groupings.</p> |
| <div id="full"></div> |
| <div id="initial"></div> |
| <div id="full-important"></div> |
| <div id="initial-important"></div> |
| </body> |
| </html> |
