| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function test() |
| { |
| let suite = InspectorTest.createAsyncSuite("CSS.getMatchedStyleForNode.LayerGrouping"); |
| |
| 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}".`); |
| InspectorTest.expectEqual(rule.style.propertyForName("color").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.expectNull(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.LayerGrouping.Normal", |
| description: "Layers should be presented in the expected order, with layers applied in the order they are declared.", |
| selector: "#normal", |
| expectedAuthoredRuleCount: 3, |
| authoredRulesHandler(rules) { |
| expectRuleAtIndex(rules, 0, { |
| selectorText: ".item", |
| colorPropertyValue: "red", |
| file: "getMatchedStylesForNodeLayerGrouping.html", |
| }); |
| expectRuleAtIndex(rules, 1, { |
| selectorText: ".item", |
| colorPropertyValue: "lawngreen", |
| file: "getMatchedStylesForNodeLayerGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.LayerRule, text: "special"}, |
| {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"}, |
| ], |
| }); |
| expectRuleAtIndex(rules, 2, { |
| selectorText: ".item", |
| colorPropertyValue: "peachpuff", |
| file: "getMatchedStylesForNodeLayerGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.LayerRule, text: "base"}, |
| ], |
| }); |
| } |
| }); |
| |
| addTestCase({ |
| name: "CSS.getMatchedStyleForNode.LayerGrouping.Imported", |
| description: "Stylesheets imported with @import with a layer parameter should have nested layer groupings.", |
| selector: "#imported", |
| expectedAuthoredRuleCount: 5, |
| authoredRulesHandler(rules) { |
| expectRuleAtIndex(rules, 0, { |
| selectorText: ".item", |
| colorPropertyValue: "red", |
| file: "getMatchedStylesForNodeLayerGrouping.html", |
| }); |
| expectRuleAtIndex(rules, 1, { |
| selectorText: ".item", |
| colorPropertyValue: "lawngreen", |
| file: "getMatchedStylesForNodeLayerGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.LayerRule, text: "special"}, |
| {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"}, |
| ], |
| }); |
| expectRuleAtIndex(rules, 2, { |
| selectorText: ".item", |
| colorPropertyValue: "peachpuff", |
| file: "getMatchedStylesForNodeLayerGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.LayerRule, text: "base"}, |
| ], |
| }); |
| expectRuleAtIndex(rules, 3, { |
| selectorText: ".imported", |
| colorPropertyValue: "darkslategray", |
| file: "external-layers.css", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.LayerRule, text: "special"}, |
| {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"}, |
| {type: WI.CSSGrouping.Type.LayerImportRule, text: "imported"}, |
| ], |
| }); |
| expectRuleAtIndex(rules, 4, { |
| selectorText: ".imported", |
| colorPropertyValue: "mintcream", |
| file: "external-layers.css", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.LayerRule, text: "base"}, |
| {type: WI.CSSGrouping.Type.LayerImportRule, text: "imported"}, |
| ], |
| }); |
| } |
| }); |
| |
| addTestCase({ |
| name: "CSS.getMatchedStyleForNode.LayerGrouping.Anonymous", |
| description: "Anonymous layers (layers without a name) should be separate and be applied in the order they are declared relative to other anonymous and named layers.", |
| selector: "#anonymous", |
| expectedAuthoredRuleCount: 4, |
| authoredRulesHandler(rules) { |
| expectRuleAtIndex(rules, 0, { |
| selectorText: ".item", |
| colorPropertyValue: "red", |
| file: "getMatchedStylesForNodeLayerGrouping.html", |
| }); |
| expectRuleAtIndex(rules, 1, { |
| selectorText: ".anonymous", |
| colorPropertyValue: "darkviolet", |
| file: "getMatchedStylesForNodeLayerGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.LayerRule}, |
| ], |
| }); |
| expectRuleAtIndex(rules, 2, { |
| selectorText: ".item", |
| colorPropertyValue: "lawngreen", |
| file: "getMatchedStylesForNodeLayerGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.LayerRule, text: "special"}, |
| {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"}, |
| ], |
| }); |
| expectRuleAtIndex(rules, 3, { |
| selectorText: ".item", |
| colorPropertyValue: "peachpuff", |
| file: "getMatchedStylesForNodeLayerGrouping.html", |
| groupings: [ |
| {type: WI.CSSGrouping.Type.LayerRule, text: "base"}, |
| ], |
| }); |
| } |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| <style> |
| @layer imported, base, special; |
| |
| @import url("./resources/external-layers.css") layer(imported); |
| |
| @supports(color: red) { |
| @layer special { |
| .item { |
| color: lawngreen; |
| } |
| } |
| } |
| |
| @layer base { |
| .item { |
| color: peachpuff; |
| } |
| } |
| |
| @layer { |
| .anonymous { |
| color: darkviolet; |
| } |
| } |
| |
| .item { |
| color: red; |
| } |
| </style> |
| </head> |
| <body onload="runTest()"> |
| <p>Tests for the CSS.getMatchedStyleForNode command and style rule groupings.</p> |
| <div id="normal" class="item"></div> |
| <div id="imported" class="item imported"></div> |
| <div id="anonymous" class="item anonymous"></div> |
| </body> |
| </html> |
