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

 <!DOCTYPE html>
 <html>
 <head>
 <script src="../../http/tests/inspector/resources/inspector-test.js"></script>
 <script>

 function test()
 {
     let suite = InspectorTest.createAsyncSuite("DOMNodeStyles.usedCSSVariables");

     function addTestCase({name, description, selector, checkUsedCSSVariables})
     {
         suite.addTestCase({
             name,
             description,
             async test() {
                 let documentNode = await WI.domManager.requestDocument();
                 let nodeId = await documentNode.querySelector(selector);
                 let domNode = await WI.domManager.nodeForId(nodeId);
                 InspectorTest.assert(domNode, `Should find DOM Node for selector '${selector}'.`);

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

                 await cssStyles.refreshIfNeeded();

                 checkUsedCSSVariables(cssStyles.usedCSSVariables);
             },
         });
     }

     addTestCase({
         name: "DOMNodeStyles.usedCSSVariables.InheritedUsed",
         description: "A used inherited variable is found in the set of used variables",
         selector: "#used-inherited-variable",
         checkUsedCSSVariables(usedCSSVariables) {
             InspectorTest.expectEqual(usedCSSVariables.size, 1, "Set should contain one used variable");
             InspectorTest.expectTrue(usedCSSVariables.has("--inherited-color"), "--inherited-color should be used");
         },
     });

     addTestCase({
         name: "DOMNodeStyles.usedCSSVariables.InheritedUsedReferenced",
         description: "An inherited variable referenced by another used variable is found in the set of used variables",
         selector: "#used-referenced-inherited-variable",
         checkUsedCSSVariables(usedCSSVariables) {
             InspectorTest.expectEqual(usedCSSVariables.size, 2, "Set should contain two used variables");
             InspectorTest.expectTrue(usedCSSVariables.has("--inherited-color"), "--inherited-color should be used");
             InspectorTest.expectTrue(usedCSSVariables.has("--color"), "--color should be used");
         },
     });

     addTestCase({
         name: "DOMNodeStyles.usedCSSVariables.InheritedNotUsed",
         description: "Unused inherited variables are not found in the set of used variables",
         selector: "#unused-inherited-variable",
         checkUsedCSSVariables(usedCSSVariables) {
             InspectorTest.expectEqual(usedCSSVariables.size, 1, "Set should contain one used variable");
             InspectorTest.expectTrue(usedCSSVariables.has("--color"), "--color should be used");
             InspectorTest.expectFalse(usedCSSVariables.has("--inherited-color"), "--inherited-color should not be used");
         },
     });

     addTestCase({
         name: "DOMNodeStyles.usedCSSVariables.InheritedUsedFunction",
         description: "An inherited variable used in a function value is found in the set of used variables",
         selector: "#used-inherited-variable-function",
         checkUsedCSSVariables(usedCSSVariables) {
             InspectorTest.expectEqual(usedCSSVariables.size, 1, "Set should contain one used variable");
             InspectorTest.expectTrue(usedCSSVariables.has("--inherited-color"), "--inherited-color should be used");
         },
     });

     addTestCase({
         name: "DOMNodeStyles.usedCSSVariables.HighSpecificityUsed",
         description: "A variable declared in a higher specificity rule but used in a lower specificity rule is found in the set of used variables",
         selector: "#used-higher-specificity",
         checkUsedCSSVariables(usedCSSVariables) {
             InspectorTest.expectTrue(usedCSSVariables.has("--color"), "--color should be used");
         },
     });

     addTestCase({
         name: "DOMNodeStyles.usedCSSVariables.InheritedHighSpecificityUsed",
         description: "An inherited variable declared in a higher specificity rule but used in a lower specificity rule on an inheritable property (`color`) is found in the set of used variables",
         selector: "#used-higher-specificity-inheritable > p",
         checkUsedCSSVariables(usedCSSVariables) {
             InspectorTest.expectEqual(usedCSSVariables.size, 1, "Set should contain one used variable");
             InspectorTest.expectTrue(usedCSSVariables.has("--color"), "--color should be used");
         },
     });

     addTestCase({
         name: "DOMNodeStyles.usedCSSVariables.InheritedHighSpecificityNotUsed",
         description: "An inherited variable declared in a higher specificity rule but used in a lower specificity rule on a non-inheritable property (`background-color`) is not found in the set of used variables",
         selector: "#unused-higher-specificity-non-inheritable > p",
         checkUsedCSSVariables(usedCSSVariables) {
             InspectorTest.expectFalse(usedCSSVariables.has("--color"), "--color should not be used");
         },
     });

     suite.runTestCasesAndFinish();
 }
 </script>
 <style>

 html {
     --inherited-color: green;
 }

 div#used-inherited-variable {
     color: var(--inherited-color, red);
 }

 div#used-referenced-inherited-variable {
     --color: var(--inherited-color);
     color: var(--color, red);
 }

 div#unused-inherited-variable {
     --color: green;
     color: var(--color, red);
 }

 div#used-inherited-variable-function {
     background: linear-gradient(90deg, var(--inherited-color, red), white);
 }

 div.used-lower-specificity {
     background-color: var(--color, red);
 }

 div#used-higher-specificity {
     --color: green;
 }

 div.used-lower-specificity-inheritable {
     color: var(--color, red);
 }

 div#used-higher-specificity-inheritable {
     --color: green;
 }

 div.unused-lower-specificity-non-inheritable {
     background-color: var(--color, red);
 }

 div#unused-higher-specificity-non-inheritable {
     --color: green;
 }

 </style>
 </head>
 <body onload="runTest();">
 <p>Test for DOMNodeStyles.usedCSSVariables</p>
 <div>
     <div id="used-inherited-variable"></div>
     <div id="used-referenced-inherited-variable"></div>
     <div id="unused-inherited-variable"></div>
     <div id="used-inherited-variable-function"></div>
     <div id="used-higher-specificity" class="used-lower-specificity"></div>
     <div id="used-higher-specificity-inheritable" class="used-lower-specificity-inheritable">
         <p></p>
     </div>
     <div id="unused-higher-specificity-non-inheritable" class="unused-lower-specificity-non-inheritable">
         <p></p>
     </div>
 </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
	<script>

	function test()
	{
	let suite = InspectorTest.createAsyncSuite("DOMNodeStyles.usedCSSVariables");

	function addTestCase({name, description, selector, checkUsedCSSVariables})
	{
	suite.addTestCase({
	name,
	description,
	async test() {
	let documentNode = await WI.domManager.requestDocument();
	let nodeId = await documentNode.querySelector(selector);
	let domNode = await WI.domManager.nodeForId(nodeId);
	InspectorTest.assert(domNode, `Should find DOM Node for selector '${selector}'.`);

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

	await cssStyles.refreshIfNeeded();

	checkUsedCSSVariables(cssStyles.usedCSSVariables);
	},
	});
	}

	addTestCase({
	name: "DOMNodeStyles.usedCSSVariables.InheritedUsed",
	description: "A used inherited variable is found in the set of used variables",
	selector: "#used-inherited-variable",
	checkUsedCSSVariables(usedCSSVariables) {
	InspectorTest.expectEqual(usedCSSVariables.size, 1, "Set should contain one used variable");
	InspectorTest.expectTrue(usedCSSVariables.has("--inherited-color"), "--inherited-color should be used");
	},
	});

	addTestCase({
	name: "DOMNodeStyles.usedCSSVariables.InheritedUsedReferenced",
	description: "An inherited variable referenced by another used variable is found in the set of used variables",
	selector: "#used-referenced-inherited-variable",
	checkUsedCSSVariables(usedCSSVariables) {
	InspectorTest.expectEqual(usedCSSVariables.size, 2, "Set should contain two used variables");
	InspectorTest.expectTrue(usedCSSVariables.has("--inherited-color"), "--inherited-color should be used");
	InspectorTest.expectTrue(usedCSSVariables.has("--color"), "--color should be used");
	},
	});

	addTestCase({
	name: "DOMNodeStyles.usedCSSVariables.InheritedNotUsed",
	description: "Unused inherited variables are not found in the set of used variables",
	selector: "#unused-inherited-variable",
	checkUsedCSSVariables(usedCSSVariables) {
	InspectorTest.expectEqual(usedCSSVariables.size, 1, "Set should contain one used variable");
	InspectorTest.expectTrue(usedCSSVariables.has("--color"), "--color should be used");
	InspectorTest.expectFalse(usedCSSVariables.has("--inherited-color"), "--inherited-color should not be used");
	},
	});

	addTestCase({
	name: "DOMNodeStyles.usedCSSVariables.InheritedUsedFunction",
	description: "An inherited variable used in a function value is found in the set of used variables",
	selector: "#used-inherited-variable-function",
	checkUsedCSSVariables(usedCSSVariables) {
	InspectorTest.expectEqual(usedCSSVariables.size, 1, "Set should contain one used variable");
	InspectorTest.expectTrue(usedCSSVariables.has("--inherited-color"), "--inherited-color should be used");
	},
	});

	addTestCase({
	name: "DOMNodeStyles.usedCSSVariables.HighSpecificityUsed",
	description: "A variable declared in a higher specificity rule but used in a lower specificity rule is found in the set of used variables",
	selector: "#used-higher-specificity",
	checkUsedCSSVariables(usedCSSVariables) {
	InspectorTest.expectTrue(usedCSSVariables.has("--color"), "--color should be used");
	},
	});

	addTestCase({
	name: "DOMNodeStyles.usedCSSVariables.InheritedHighSpecificityUsed",
	description: "An inherited variable declared in a higher specificity rule but used in a lower specificity rule on an inheritable property (`color`) is found in the set of used variables",
	selector: "#used-higher-specificity-inheritable > p",
	checkUsedCSSVariables(usedCSSVariables) {
	InspectorTest.expectEqual(usedCSSVariables.size, 1, "Set should contain one used variable");
	InspectorTest.expectTrue(usedCSSVariables.has("--color"), "--color should be used");
	},
	});

	addTestCase({
	name: "DOMNodeStyles.usedCSSVariables.InheritedHighSpecificityNotUsed",
	description: "An inherited variable declared in a higher specificity rule but used in a lower specificity rule on a non-inheritable property (`background-color`) is not found in the set of used variables",
	selector: "#unused-higher-specificity-non-inheritable > p",
	checkUsedCSSVariables(usedCSSVariables) {
	InspectorTest.expectFalse(usedCSSVariables.has("--color"), "--color should not be used");
	},
	});

	suite.runTestCasesAndFinish();
	}
	</script>
	<style>

	html {
	--inherited-color: green;
	}

	div#used-inherited-variable {
	color: var(--inherited-color, red);
	}

	div#used-referenced-inherited-variable {
	--color: var(--inherited-color);
	color: var(--color, red);
	}

	div#unused-inherited-variable {
	--color: green;
	color: var(--color, red);
	}

	div#used-inherited-variable-function {
	background: linear-gradient(90deg, var(--inherited-color, red), white);
	}

	div.used-lower-specificity {
	background-color: var(--color, red);
	}

	div#used-higher-specificity {
	--color: green;
	}

	div.used-lower-specificity-inheritable {
	color: var(--color, red);
	}

	div#used-higher-specificity-inheritable {
	--color: green;
	}

	div.unused-lower-specificity-non-inheritable {
	background-color: var(--color, red);
	}

	div#unused-higher-specificity-non-inheritable {
	--color: green;
	}

	</style>
	</head>
	<body onload="runTest();">
	<p>Test for DOMNodeStyles.usedCSSVariables</p>
	<div>
	<div id="used-inherited-variable"></div>
	<div id="used-referenced-inherited-variable"></div>
	<div id="unused-inherited-variable"></div>
	<div id="used-inherited-variable-function"></div>
	<div id="used-higher-specificity" class="used-lower-specificity"></div>
	<div id="used-higher-specificity-inheritable" class="used-lower-specificity-inheritable">
	<p></p>
	</div>
	<div id="unused-higher-specificity-non-inheritable" class="unused-lower-specificity-non-inheritable">
	<p></p>
	</div>
	</div>
	</body>
	</html>