[css-conditional-3] Rewrite the supports() text into algorithm form, to make it easier to express that you pay attention to the syntax of registered custom properties in the supports(prop, val) form.

Author: tabatkins

css-conditional-3/Overview.bs

@@ -676,24 +676,48 @@ partial namespace CSS {
 	<dt><code>supports(CSSOMString conditionText)</code>, returns <code>boolean</code>
 	<dd>
 		When the {{supports(property, value)}} method is invoked
-		with two arguments <var>property</var> and <var>value</var>,
-		it must return <code>true</code> if <var>property</var> is a literal match for the name of a CSS property that the UA supports,
-		and <var>value</var> would be successfully parsed as a supported value for that property.
-		(Literal match means that no CSS escape processing is performed,
-		and leading and trailing whitespace are not stripped,
-		so any leading whitespace, trailing whitespace,
-		or CSS escapes equivalent to the name of a property
-		would cause the method to return <code>false</code>.)
-		Otherwise, it must return <code>false</code>.
-
-		When {{supports(conditionText)}} invoked with a single <var>conditionText</var> argument,
-		it must return <code>true</code> if <var>conditionText</var>,
-		when either parsed and evaluated as a <<supports-condition>>
-		or parsed as a <<declaration>>,
-		wrapped in implied parentheses,
-		and evaluated as a <<supports-condition>>,
-		would return true.
-		Otherwise, it must return <code>false</code>.
+		with two arguments <var>property</var> and <var>value</var>:
+
+    <div algorithm="supports(property, value)">
+      1. If |property| is an [=ASCII case-insensitive=] match
+        for any defined CSS property that the UA supports,
+        and |value| successfully [=CSS/parses=] according to that property's grammar,
+        return <code>true</code>.
+      2. Otherwise, if |property| is an exact match for the property name of any item
+        in the document's {{[[registeredPropertySet]]}} slot,
+        and the syntax of that item is not "*":
+
+        1. If |value| successfully [=CSS/parses=] according to the syntax of that item,
+          return <code>true</code>.
+        2. Otherwise, return <code>false</code>.
+      3. Otherwise, if |property| is a [=custom property name string=],
+        return <code>true</code>.
+      4. Otherwise, return <code>false</code>.
+
+      Note: No CSS escape or whitespace processing is performed on the property name,
+      so <code>CSS.supports(" width", "5px")</code> will return <code>false</code>,
+      as " width" isn't the name of any property due to the leading space.
+
+      Note: This version of the method will verify the grammar of registered custom properties,
+      but the other version will not.
+    </div>
+
+		When the {{supports(conditionText)}} method is invoked
+    with a single <var>conditionText</var> argument:
+
+    <div algorithm="supports(conditionText)">
+      1. If |conditionText|,
+        [=CSS/parsed=] and evaluated as a <<supports-condition>>,
+        would return true,
+        return <code>true</code>.
+      2. Otherwise,
+        If |conditionText|,
+        wrapped in parentheses
+        and then [=CSS/parsed=] and evaluated as a <<supports-condition>>,
+        would return true,
+        return <code>true</code>.
+      3. Otherwise, return <code>false</code>.
+    </div>
 </dl>
 
 <h2 class=no-num id=priv-sec>Privacy and Security Considerations</h2>