[css-variables-1] Specify that if var substitution results in a single CSS-wide keyword, it's processed as if that were the specified value. #5325

Author: tabatkins

css-variables-1/Overview.bs

@@ -388,29 +388,13 @@ Resolving Dependency Cycles</h3>
 
 
 <!--
-UUUUUUUU     UUUUUUUU                  iiii
-U::::::U     U::::::U                 i::::i
-U::::::U     U::::::U                  iiii
-UU:::::U     U:::::UU
- U:::::U     U:::::U    ssssssssss   iiiiiiinnnn  nnnnnnnn       ggggggggg   ggggg
- U:::::D     D:::::U  ss::::::::::s  i:::::in:::nn::::::::nn    g:::::::::ggg::::g
- U:::::D     D:::::Uss:::::::::::::s  i::::in::::::::::::::nn  g:::::::::::::::::g
- U:::::D     D:::::Us::::::ssss:::::s i::::inn:::::::::::::::ng::::::ggggg::::::gg
- U:::::D     D:::::U s:::::s  ssssss  i::::i  n:::::nnnn:::::ng:::::g     g:::::g
- U:::::D     D:::::U   s::::::s       i::::i  n::::n    n::::ng:::::g     g:::::g
- U:::::D     D:::::U      s::::::s    i::::i  n::::n    n::::ng:::::g     g:::::g
- U::::::U   U::::::Ussssss   s:::::s  i::::i  n::::n    n::::ng::::::g    g:::::g
- U:::::::UUU:::::::Us:::::ssss::::::si::::::i n::::n    n::::ng:::::::ggggg:::::g
-  UU:::::::::::::UU s::::::::::::::s i::::::i n::::n    n::::n g::::::::::::::::g
-    UU:::::::::UU    s:::::::::::ss  i::::::i n::::n    n::::n  gg::::::::::::::g
-      UUUUUUUUU       sssssssssss    iiiiiiii nnnnnn    nnnnnn    gggggggg::::::g
-                                                                          g:::::g
-                                                              gggggg      g:::::g
-                                                              g:::::gg   gg:::::g
-                                                               g::::::ggg:::::::g
-                                                                gg:::::::::::::g
-                                                                  ggg::::::ggg
-                                                                     gggggg
+██     ██    ███    ████████    ███ ███
+██     ██   ██ ██   ██     ██  ██     ██
+██     ██  ██   ██  ██     ██ ██       ██
+██     ██ ██     ██ ████████  ██       ██
+ ██   ██  █████████ ██   ██   ██       ██
+  ██ ██   ██     ██ ██    ██   ██     ██
+   ███    ██     ██ ██     ██   ███ ███
 -->
 
 
@@ -568,6 +552,12 @@ Using Cascading Variables: the ''var()'' notation</h2>
 	does not match its declared grammar,
 	the declaration is <a>invalid at computed-value time</a>.
 
+	If a declaration,
+	once all ''var()'' functions are substituted in,
+	contains only a [=CSS-wide keyword=]
+	(and possibly whitespace),
+	its value is determined as if that keyword were its [=specified value=] all along.
+
 	<div class='example'>
 		For example,
 		the following usage is fine from a syntax standpoint,
@@ -589,6 +579,28 @@ Using Cascading Variables: the ''var()'' notation</h2>
 		rather than the initial value.
 	</div>
 
+	<div class='example'>
+		While a ''var()'' function can't get a [=CSS-wide keyword=]
+		from the [=custom property=] itself--
+		if you tried to specify that,
+		like ''--foo: initial;'',
+		it would just trigger [[css-cascade-4#defaulting-keywords|explicit defaulting]]
+		for the custom property--
+		it can have a [=CSS-wide keyword=] in its fallback:
+
+		<pre>
+		p { color: var(--does-not-exist, initial); }
+		</pre>
+
+		In the above code, if the ''--does-not-exist'' property didn't exist
+		or is [=invalid at computed-value time=],
+		the ''var()'' will instead substitute in the ''initial'' keyword,
+		making the property behave as if it was originally ''color: initial''.
+		This will make it take on the document's initial 'color' value,
+		rather than defaulting to inheritance,
+		as it would if there were no fallback.
+	</div>
+
 
 <h3 id='invalid-variables'>
 Invalid Variables</h3>