| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function test() |
| { |
| let suite = InspectorTest.createAsyncSuite("CSS.getMatchedStyleForNode.ScopeGrouping"); |
| |
| function expectRuleAtIndex(rules, index, {selectorText, colorPropertyValue, 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(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.ScopeGrouping.Outer", |
| selector: "#outer", |
| expectedAuthoredRuleCount: 0 |
| }); |
| |
| addTestCase({ |
| name: "CSS.getMatchedStyleForNode.ScopeGrouping.Middle", |
| selector: "#middle", |
| expectedAuthoredRuleCount: 2, |
| authoredRulesHandler(rules) { |
| expectRuleAtIndex(rules, 0, { |
| selectorText: "#middle", |
| colorPropertyValue: "darkgreen", |
| file: "getMatchedStylesForNodeScopeGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.ScopeRule}, |
| ], |
| }); |
| expectRuleAtIndex(rules, 1, { |
| selectorText: "#middle", |
| colorPropertyValue: "green", |
| file: "getMatchedStylesForNodeScopeGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.ScopeRule, text: "(#outer) to (#inner)"}, |
| ], |
| }); |
| } |
| }); |
| |
| addTestCase({ |
| name: "CSS.getMatchedStyleForNode.ScopeGrouping.Inner", |
| selector: "#inner", |
| expectedAuthoredRuleCount: 2, |
| authoredRulesHandler(rules) { |
| expectRuleAtIndex(rules, 0, { |
| selectorText: "#inner", |
| colorPropertyValue: "lightblue", |
| file: "getMatchedStylesForNodeScopeGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.ScopeRule}, |
| ], |
| }); |
| expectRuleAtIndex(rules, 1, { |
| selectorText: "#inner", |
| colorPropertyValue: "darkblue", |
| file: "getMatchedStylesForNodeScopeGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.ScopeRule}, |
| ], |
| }); |
| } |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| <style> |
| @scope (#outer) to (#inner) { |
| #outer { |
| color: red; |
| } |
| |
| #middle { |
| color: green; |
| } |
| |
| #inner { |
| color: blue; |
| } |
| } |
| </style> |
| </head> |
| <body onload="runTest()"> |
| <p>Tests for the CSS.getMatchedStyleForNode command and style rule groupings.</p> |
| <div id="outer"> |
| <style> |
| @scope { |
| #outer { |
| color: darkred; |
| } |
| |
| #middle { |
| color: darkgreen; |
| } |
| |
| #inner { |
| color: darkblue; |
| } |
| } |
| </style> |
| <div id="middle"> |
| <style> |
| @scope { |
| #outer { |
| color: lightcoral; |
| } |
| |
| #middle { |
| color: lightgreen; |
| } |
| |
| #inner { |
| color: lightblue; |
| } |
| } |
| </style> |
| <div id="inner"> |
| <style> |
| @scope { |
| #outer { |
| color: grey; |
| } |
| |
| #middle { |
| color: lightgrey; |
| } |
| |
| #inner { |
| color: darkgrey; |
| } |
| } |
| </style> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
