[css-color-adjust-1] Make color forcing a used-value time operation. w3c#4915

Author: fantasai

css-color-adjust-1/Overview.bs

@@ -348,8 +348,8 @@ Properties Affected by Forced Colors Mode {#forced-colors-properties}
 		<li>'background-color'
 	</ul>
 
-	if its [=computed value=] would be a color other than a [=system color=],
-	it is instead forced to a [=system color=] as follows:
+	if its [=computed value=] is a color other than a [=system color=],
+	its [=used value=] is forced to a [=system color=] as follows:
 
 	* If the color value indicates a “fallback” color
 		(as in the ''color()'' function in [[CSS-COLOR-5]])
@@ -370,6 +370,27 @@ Properties Affected by Forced Colors Mode {#forced-colors-properties}
 		whenever all of the element’s affected properties
 		are likewise UA-determined.
 
+		<div class="note">
+			UAs need to be careful about inheritance when forcing colors.
+			For example,
+			suppose the UA’s button 'color' and 'background-color'
+			are the opposite of its canvas 'color' and 'background-color'.
+			Given markup such as
+
+			<xmp highlight=html>
+				<button>Push <em>this</em> button</button>
+			</xmp>
+
+			Normally, <{em}> will inherit from <{button}>,
+			ensuring its readability.
+			However in [=forced colors mode=],
+			the 'color' of both <{button}> and <{em}> will need to be forced.
+			It's easy to see that <{button}>’s color should be forced to the button color,
+			but <{em}> also needs to be forced to the button color;
+			if it were forced to the canvas 'color' like it is everywhere else in the document,
+			its text will be unreadable.
+		</div>
+
 	Additionally:
 	* 'box-shadow' and 'text-shadow' compute to to ''box-shadow/none''
 	* 'background-image' computes to ''background-image/none''