css/css-variables/variable-reference-name-substitution.html - external/github.com/web-platform-tests/wpt - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <title>var() name argument is an arbitrary substitution value</title>
     <link rel="help" href="https://drafts.csswg.org/css-variables-2/#replace-a-var-function">
     <link rel="help" href="https://drafts.csswg.org/css-values-5/#component-function-commas">
     <link rel="author" title="Apple Inc." href="https://apple.com">
     <script src="/resources/testharness.js"></script>
     <script src="/resources/testharnessreport.js"></script>
     <style>
         #target { --other: 10px; }
         @property --registered-length {
             syntax: "<length>";
             inherits: false;
             initial-value: 7px;
         }
         @property --registered-universal {
             syntax: "*";
             inherits: false;
         }
     </style>
 </head>
 <body>
 <div id="target" data-name="--other" data-not-a-name="10px"></div>
 <script>
     "use strict";

     const target = document.getElementById("target");

     function computed(declaration, property) {
         target.setAttribute("style", declaration);
         const value = getComputedStyle(target).getPropertyValue(property || "width");
         target.removeAttribute("style");
         return value;
     }

     const initialWidth = computed("width: initial;");

     // The inner var() resolves to `--other`, which becomes the name looked up by the outer var().
     // https://drafts.csswg.org/css-variables-2/#replace-a-var-function example.
     test(() => {
         assert_equals(computed("--myvar: --other; width: var(var(--myvar));"), "10px");
     }, "var() name comes from another var()");

     test(() => {
         assert_equals(computed("--myvar: --other; --indirect: --myvar; width: var(var(var(--indirect)));"), "10px");
     }, "var() name comes from a chain of var()s");

     // A substituted name that does not parse as a <custom-property-name> makes the reference
     // guaranteed-invalid, so the fallback is used.
     test(() => {
         assert_equals(computed("--myvar: not-a-custom-prop; width: var(var(--myvar), 20px);"), "20px");
     }, "invalid substituted name falls back");

     // The name-providing var() is itself unset, so the name is guaranteed-invalid: fallback is used.
     test(() => {
         assert_equals(computed("width: var(var(--unset), 30px);"), "30px");
     }, "unset name-providing var() falls back");

     // Whitespace around the substituted name is allowed.
     test(() => {
         assert_equals(computed("--myvar: --other; width: var( var(--myvar) );"), "10px");
     }, "whitespace around substituted name");

     // A substituted name that is not itself a custom-property name (bad prefix) and no fallback:
     // the property is invalid at computed-value time and falls back to initial (auto).
     test(() => {
         assert_equals(computed("--myvar: other; width: var(var(--myvar));"), initialWidth);
     }, "invalid substituted name without fallback is invalid at computed-value time");

     // A name argument that substitutes to nothing does not parse as a <custom-property-name>.
     test(() => {
         assert_equals(computed("--empty: ; width: var(var(--empty), 40px);"), "40px");
     }, "name argument substituting to nothing falls back");

     // A <custom-property-name> is a single ident, so a multi-token name never parses.
     test(() => {
         assert_equals(computed("--two: --other --other; width: var(var(--two), 50px);"), "50px");
     }, "multi-token substituted name falls back");

     test(() => {
         assert_equals(computed("--dimension: 10px; width: var(var(--dimension), 60px);"), "60px");
     }, "dimension-token substituted name falls back");

     test(() => {
         assert_equals(computed('--string: "--other"; width: var(var(--string), 70px);'), "70px");
     }, "string substituted name falls back");

     // "--" is not a valid <custom-property-name>.
     test(() => {
         assert_equals(computed("--dashes: --; width: var(var(--dashes), 80px);"), "80px");
     }, "-- as substituted name falls back");

     // https://drafts.csswg.org/css-values-5/#component-function-commas
     // A {}-wrapped free-form production represents the contents of the block, so the braces are
     // stripped before the name is parsed. They are allowed even when not required.
     test(() => {
         assert_equals(computed("width: var({--other});"), "10px");
     }, "{}-wrapped literal name argument");

     test(() => {
         assert_equals(computed("--myvar: --other; width: var({var(--myvar)});"), "10px");
     }, "{}-wrapped substituted name argument");

     test(() => {
         assert_equals(computed("width: var( { --other } );"), "10px");
     }, "{}-wrapped name argument with whitespace");

     test(() => {
         assert_equals(computed("width: var({--unset}, 90px);"), "90px");
     }, "{}-wrapped name argument with fallback");

     // Other arbitrary substitution functions can produce the name.
     test(() => {
         assert_equals(computed("width: var(attr(data-name type(*)));"), "10px");
     }, "var() name comes from attr()");

     test(() => {
         assert_equals(computed("width: var(attr(data-not-a-name type(*)), 100px);"), "100px");
     }, "var() name from attr() that is not a name falls back");

     test(() => {
         assert_equals(computed("width: var(if(style(--other: 10px): --other; else: --unset));"), "10px");
     }, "var() name comes from if()");

     test(() => {
         assert_equals(computed("width: var(random-item(--key, --other, --other));"), "10px");
     }, "var() name comes from random-item()");

     // Cycles are detected through the name argument, since looking up the referenced property
     // implies property replacement. https://drafts.csswg.org/css-variables-2/#replace-a-var-function
     test(() => {
         assert_equals(computed("--self: var(var(--self)); width: var(--self, 110px);"), "110px");
     }, "direct cycle through the name argument");

     test(() => {
         assert_equals(computed("--name: --cyclic; --cyclic: var(var(--name)); width: var(--cyclic, 120px);"), "120px");
     }, "indirect cycle through the name argument");

     // Registered properties: a substituted name resolves them like a literal name does.
     test(() => {
         assert_equals(computed("--name: --registered-length; width: var(var(--name));"), "7px");
     }, "substituted name resolves a registered property");

     // A universal registration without an initial value is guaranteed-invalid, so the fallback is used.
     test(() => {
         assert_equals(computed("--name: --registered-universal; width: var(var(--name), 130px);"), "130px");
     }, "substituted name of a guaranteed-invalid registered property uses the fallback");

     // A name that does not parse has no referenced property, so there is no registered syntax to
     // check the fallback against.
     // https://drafts.css-houdini.org/css-properties-values-api/#fallbacks-in-var-references
     test(() => {
         assert_equals(computed("--name: not-a-name; width: var(var(--name), 140px);"), "140px");
     }, "fallback of an unparsed name is not syntax checked");
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>var() name argument is an arbitrary substitution value</title>
	<link rel="help" href="https://drafts.csswg.org/css-variables-2/#replace-a-var-function">
	<link rel="help" href="https://drafts.csswg.org/css-values-5/#component-function-commas">
	<link rel="author" title="Apple Inc." href="https://apple.com">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<style>
	#target { --other: 10px; }
	@property --registered-length {
	syntax: "<length>";
	inherits: false;
	initial-value: 7px;
	}
	@property --registered-universal {
	syntax: "*";
	inherits: false;
	}
	</style>
	</head>
	<body>
	<div id="target" data-name="--other" data-not-a-name="10px"></div>
	<script>
	"use strict";

	const target = document.getElementById("target");

	function computed(declaration, property) {
	target.setAttribute("style", declaration);
	const value = getComputedStyle(target).getPropertyValue(property \|\| "width");
	target.removeAttribute("style");
	return value;
	}

	const initialWidth = computed("width: initial;");

	// The inner var() resolves to `--other`, which becomes the name looked up by the outer var().
	// https://drafts.csswg.org/css-variables-2/#replace-a-var-function example.
	test(() => {
	assert_equals(computed("--myvar: --other; width: var(var(--myvar));"), "10px");
	}, "var() name comes from another var()");

	test(() => {
	assert_equals(computed("--myvar: --other; --indirect: --myvar; width: var(var(var(--indirect)));"), "10px");
	}, "var() name comes from a chain of var()s");

	// A substituted name that does not parse as a <custom-property-name> makes the reference
	// guaranteed-invalid, so the fallback is used.
	test(() => {
	assert_equals(computed("--myvar: not-a-custom-prop; width: var(var(--myvar), 20px);"), "20px");
	}, "invalid substituted name falls back");

	// The name-providing var() is itself unset, so the name is guaranteed-invalid: fallback is used.
	test(() => {
	assert_equals(computed("width: var(var(--unset), 30px);"), "30px");
	}, "unset name-providing var() falls back");

	// Whitespace around the substituted name is allowed.
	test(() => {
	assert_equals(computed("--myvar: --other; width: var( var(--myvar) );"), "10px");
	}, "whitespace around substituted name");

	// A substituted name that is not itself a custom-property name (bad prefix) and no fallback:
	// the property is invalid at computed-value time and falls back to initial (auto).
	test(() => {
	assert_equals(computed("--myvar: other; width: var(var(--myvar));"), initialWidth);
	}, "invalid substituted name without fallback is invalid at computed-value time");

	// A name argument that substitutes to nothing does not parse as a <custom-property-name>.
	test(() => {
	assert_equals(computed("--empty: ; width: var(var(--empty), 40px);"), "40px");
	}, "name argument substituting to nothing falls back");

	// A <custom-property-name> is a single ident, so a multi-token name never parses.
	test(() => {
	assert_equals(computed("--two: --other --other; width: var(var(--two), 50px);"), "50px");
	}, "multi-token substituted name falls back");

	test(() => {
	assert_equals(computed("--dimension: 10px; width: var(var(--dimension), 60px);"), "60px");
	}, "dimension-token substituted name falls back");

	test(() => {
	assert_equals(computed('--string: "--other"; width: var(var(--string), 70px);'), "70px");
	}, "string substituted name falls back");

	// "--" is not a valid <custom-property-name>.
	test(() => {
	assert_equals(computed("--dashes: --; width: var(var(--dashes), 80px);"), "80px");
	}, "-- as substituted name falls back");

	// https://drafts.csswg.org/css-values-5/#component-function-commas
	// A {}-wrapped free-form production represents the contents of the block, so the braces are
	// stripped before the name is parsed. They are allowed even when not required.
	test(() => {
	assert_equals(computed("width: var({--other});"), "10px");
	}, "{}-wrapped literal name argument");

	test(() => {
	assert_equals(computed("--myvar: --other; width: var({var(--myvar)});"), "10px");
	}, "{}-wrapped substituted name argument");

	test(() => {
	assert_equals(computed("width: var( { --other } );"), "10px");
	}, "{}-wrapped name argument with whitespace");

	test(() => {
	assert_equals(computed("width: var({--unset}, 90px);"), "90px");
	}, "{}-wrapped name argument with fallback");

	// Other arbitrary substitution functions can produce the name.
	test(() => {
	assert_equals(computed("width: var(attr(data-name type(*)));"), "10px");
	}, "var() name comes from attr()");

	test(() => {
	assert_equals(computed("width: var(attr(data-not-a-name type(*)), 100px);"), "100px");
	}, "var() name from attr() that is not a name falls back");

	test(() => {
	assert_equals(computed("width: var(if(style(--other: 10px): --other; else: --unset));"), "10px");
	}, "var() name comes from if()");

	test(() => {
	assert_equals(computed("width: var(random-item(--key, --other, --other));"), "10px");
	}, "var() name comes from random-item()");

	// Cycles are detected through the name argument, since looking up the referenced property
	// implies property replacement. https://drafts.csswg.org/css-variables-2/#replace-a-var-function
	test(() => {
	assert_equals(computed("--self: var(var(--self)); width: var(--self, 110px);"), "110px");
	}, "direct cycle through the name argument");

	test(() => {
	assert_equals(computed("--name: --cyclic; --cyclic: var(var(--name)); width: var(--cyclic, 120px);"), "120px");
	}, "indirect cycle through the name argument");

	// Registered properties: a substituted name resolves them like a literal name does.
	test(() => {
	assert_equals(computed("--name: --registered-length; width: var(var(--name));"), "7px");
	}, "substituted name resolves a registered property");

	// A universal registration without an initial value is guaranteed-invalid, so the fallback is used.
	test(() => {
	assert_equals(computed("--name: --registered-universal; width: var(var(--name), 130px);"), "130px");
	}, "substituted name of a guaranteed-invalid registered property uses the fallback");

	// A name that does not parse has no referenced property, so there is no registered syntax to
	// check the fallback against.
	// https://drafts.css-houdini.org/css-properties-values-api/#fallbacks-in-var-references
	test(() => {
	assert_equals(computed("--name: not-a-name; width: var(var(--name), 140px);"), "140px");
	}, "fallback of an unparsed name is not syntax checked");
	</script>
	</body>
	</html>