LayoutTests/inspector/css/getMatchedStylesForNodeContainerGrouping.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <script src="../../http/tests/inspector/resources/inspector-test.js"></script>
 <script>
 function setContainerWidth(width)
 {
     document.getElementById("container").style.width = `${width}px`;
 }

 function test()
 {
     let suite = InspectorTest.createAsyncSuite("CSS.getMatchedStyleForNode.ContainerGrouping");

     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, containerWidth, expectedAuthoredRuleCount, authoredRulesHandler})
     {
         suite.addTestCase({
             name,
             description,
             async test() {

                 await InspectorTest.evaluateInPage(`setContainerWidth(${containerWidth})`);

                 let documentNode = await WI.domManager.requestDocument();
                 let nodeId = await documentNode.querySelector("#item");
                 let domNode = WI.domManager.nodeForId(nodeId);
                 InspectorTest.assert(domNode, `Should find DOM Node for selector '#item'.`);

                 let domNodeStyles = WI.cssManager.stylesForNode(domNode);
                 InspectorTest.assert(domNodeStyles, `Should find CSS Styles for DOM Node.`);
                 await domNodeStyles.refresh();

                 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.ContainerGrouping.Narrow",
         description: "No `@container` queries should apply to the item in a 100px wide container.",
         containerWidth: 100,
         expectedAuthoredRuleCount: 1,
         authoredRulesHandler(rules) {
             expectRuleAtIndex(rules, 0, {
                 selectorText: "#item",
                 colorPropertyValue: "peachpuff",
                 file: "getMatchedStylesForNodeContainerGrouping.html",
             });
         }
     });

     addTestCase({
         name: "CSS.getMatchedStyleForNode.ContainerGrouping.Medium",
         description: "Only one `@container` query should apply to the item in a 200px wide container.",
         containerWidth: 200,
         expectedAuthoredRuleCount: 2,
         authoredRulesHandler(rules) {
             expectRuleAtIndex(rules, 0, {
                 selectorText: "#item",
                 colorPropertyValue: "lemonchiffon",
                 file: "getMatchedStylesForNodeContainerGrouping.html",
                 groupings: [
                     {type: WI.CSSGrouping.Type.ContainerRule, text: "usedName (width >= 200px)"},
                     {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"},
                 ],
             });
             expectRuleAtIndex(rules, 1, {
                 selectorText: "#item",
                 colorPropertyValue: "peachpuff",
                 file: "getMatchedStylesForNodeContainerGrouping.html",
             });
         }
     });

     addTestCase({
         name: "CSS.getMatchedStyleForNode.ContainerGrouping.Wide",
         description: "Two `@container` queries should apply to the item in a 300px wide container.",
         containerWidth: 300,
         expectedAuthoredRuleCount: 3,
         authoredRulesHandler(rules) {
             expectRuleAtIndex(rules, 0, {
                 selectorText: "#item",
                 colorPropertyValue: "thistle",
                 file: "getMatchedStylesForNodeContainerGrouping.html",
                 groupings: [
                     {type: WI.CSSGrouping.Type.ContainerRule, text: "(width >= 300px)"},
                 ],
             });
             expectRuleAtIndex(rules, 1, {
                 selectorText: "#item",
                 colorPropertyValue: "lemonchiffon",
                 file: "getMatchedStylesForNodeContainerGrouping.html",
                 groupings: [
                     {type: WI.CSSGrouping.Type.ContainerRule, text: "usedName (width >= 200px)"},
                     {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"},
                 ],
             });
             expectRuleAtIndex(rules, 2, {
                 selectorText: "#item",
                 colorPropertyValue: "peachpuff",
                 file: "getMatchedStylesForNodeContainerGrouping.html",
             });
         }
     });

     suite.runTestCasesAndFinish();
 }
 </script>
 <style>
     #container {
         container-type: size;
         container-name: usedName;
     }

     #item {
         color: peachpuff;
     }

     @supports(color: red) {
         @container usedName (width >= 200px) {
             #item {
                 color: lemonchiffon;
             }
         }
     }

     @container notUsedName (width >= 200px) {
         #item {
             color: PaleVioletRed;
         }
     }

     @container (width >= 300px) {
         #item {
             color: thistle;
         }
     }
 </style>
 </head>
 <body onload="runTest()">
     <p>Tests for the CSS.getMatchedStyleForNode command and container rule groups.</p>
     <div id="container">
         <div id="item"></div>
     </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
	<script>
	function setContainerWidth(width)
	{
	document.getElementById("container").style.width = `${width}px`;
	}

	function test()
	{
	let suite = InspectorTest.createAsyncSuite("CSS.getMatchedStyleForNode.ContainerGrouping");

	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, containerWidth, expectedAuthoredRuleCount, authoredRulesHandler})
	{
	suite.addTestCase({
	name,
	description,
	async test() {

	await InspectorTest.evaluateInPage(`setContainerWidth(${containerWidth})`);

	let documentNode = await WI.domManager.requestDocument();
	let nodeId = await documentNode.querySelector("#item");
	let domNode = WI.domManager.nodeForId(nodeId);
	InspectorTest.assert(domNode, `Should find DOM Node for selector '#item'.`);

	let domNodeStyles = WI.cssManager.stylesForNode(domNode);
	InspectorTest.assert(domNodeStyles, `Should find CSS Styles for DOM Node.`);
	await domNodeStyles.refresh();

	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.ContainerGrouping.Narrow",
	description: "No `@container` queries should apply to the item in a 100px wide container.",
	containerWidth: 100,
	expectedAuthoredRuleCount: 1,
	authoredRulesHandler(rules) {
	expectRuleAtIndex(rules, 0, {
	selectorText: "#item",
	colorPropertyValue: "peachpuff",
	file: "getMatchedStylesForNodeContainerGrouping.html",
	});
	}
	});

	addTestCase({
	name: "CSS.getMatchedStyleForNode.ContainerGrouping.Medium",
	description: "Only one `@container` query should apply to the item in a 200px wide container.",
	containerWidth: 200,
	expectedAuthoredRuleCount: 2,
	authoredRulesHandler(rules) {
	expectRuleAtIndex(rules, 0, {
	selectorText: "#item",
	colorPropertyValue: "lemonchiffon",
	file: "getMatchedStylesForNodeContainerGrouping.html",
	groupings: [
	{type: WI.CSSGrouping.Type.ContainerRule, text: "usedName (width >= 200px)"},
	{type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"},
	],
	});
	expectRuleAtIndex(rules, 1, {
	selectorText: "#item",
	colorPropertyValue: "peachpuff",
	file: "getMatchedStylesForNodeContainerGrouping.html",
	});
	}
	});

	addTestCase({
	name: "CSS.getMatchedStyleForNode.ContainerGrouping.Wide",
	description: "Two `@container` queries should apply to the item in a 300px wide container.",
	containerWidth: 300,
	expectedAuthoredRuleCount: 3,
	authoredRulesHandler(rules) {
	expectRuleAtIndex(rules, 0, {
	selectorText: "#item",
	colorPropertyValue: "thistle",
	file: "getMatchedStylesForNodeContainerGrouping.html",
	groupings: [
	{type: WI.CSSGrouping.Type.ContainerRule, text: "(width >= 300px)"},
	],
	});
	expectRuleAtIndex(rules, 1, {
	selectorText: "#item",
	colorPropertyValue: "lemonchiffon",
	file: "getMatchedStylesForNodeContainerGrouping.html",
	groupings: [
	{type: WI.CSSGrouping.Type.ContainerRule, text: "usedName (width >= 200px)"},
	{type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"},
	],
	});
	expectRuleAtIndex(rules, 2, {
	selectorText: "#item",
	colorPropertyValue: "peachpuff",
	file: "getMatchedStylesForNodeContainerGrouping.html",
	});
	}
	});

	suite.runTestCasesAndFinish();
	}
	</script>
	<style>
	#container {
	container-type: size;
	container-name: usedName;
	}

	#item {
	color: peachpuff;
	}

	@supports(color: red) {
	@container usedName (width >= 200px) {
	#item {
	color: lemonchiffon;
	}
	}
	}

	@container notUsedName (width >= 200px) {
	#item {
	color: PaleVioletRed;
	}
	}

	@container (width >= 300px) {
	#item {
	color: thistle;
	}
	}
	</style>
	</head>
	<body onload="runTest()">
	<p>Tests for the CSS.getMatchedStyleForNode command and container rule groups.</p>
	<div id="container">
	<div id="item"></div>
	</div>
	</body>
	</html>