[css-conditional-5] Define a range syntax for style container queries

css-conditional-5/Overview.bs

@@ -945,6 +945,13 @@ Container Queries: the ''@container'' rule</h3>
 	<dfn><<style-in-parens>></dfn> = ( <<style-query>> )
 	                  | ( <<style-feature>> )
 	                  | <<general-enclosed>>
+	<dfn><<style-feature>></dfn> = <<style-feature-plain>> | <<style-feature-boolean>> | <<style-range>>
+	<dfn><<style-feature-plain>></dfn> = <<style-feature-name>> : <<style-feature-value>>
+	<dfn><<style-feature-boolean>></dfn> = <<style-feature-name>>
+	<dfn><<style-range>></dfn> = <<style-range-value>> <<mf-comparison>> <<style-range-value>>
+            | <<style-range-value>> <<mf-lt>> <<style-range-value>> <<mf-lt>> <<style-range-value>>
+            | <<style-range-value>> <<mf-gt>> <<style-range-value>> <<mf-gt>> <<style-range-value>>
+	<dfn><<style-range-value>></dfn> = <<custom-property-name>> | <<style-feature-value>>
 
 	<dfn><<scroll-state-query>></dfn>     = not <<scroll-state-in-parens>>
 	                         | <<scroll-state-in-parens>> [ [ and <<scroll-state-in-parens>> ]* | [ or <<scroll-state-in-parens>> ]* ]
@@ -1323,21 +1330,38 @@ Orientation: the '@container/orientation' feature</h4>
 <h3 id="style-container">
 Style Container Features</h3>
 
-	A <dfn export>container style query</dfn>
-	allows querying
-	the [=computed values=] of the [=query container=].
-	It is a boolean combination of
-	individual <dfn>style features</dfn> (<<style-feature>>)
-	that each query a single, specific property of the [=query container=].
-	The syntax of a <dfn><<style-feature>></dfn> is either the same as for a valid [=declaration=]
-	[[!CSS-SYNTAX-3]], a [=supported CSS property=], or a <<custom-property-name>>.
-
-	Its query evaluates to true if the [=computed value=] of the given property on the
-	[=query container=] matches the given value (which is also [=computed value|computed=]
-	with respect to the [=query container=]), and false otherwise.
-
-	A [=style feature=] without a value evaluates to true if the [=computed value=]
-	is different from the [=initial value=] for the given [=property=].
+	A <dfn export>container style query</dfn> allows querying the
+	[=computed values=] of the [=query container=].
+	It is a boolean combination of individual <dfn>style features</dfn>
+	(<<style-feature>>) that each query a single, specific property of the
+	[=query container=]. The syntax of a <<style-feature>> is either the same
+	as for a valid [=declaration=][[!CSS-SYNTAX-3]], a <<style-feature-name>>
+	or a valid <dfn>style range</dfn>(<<style-range>>).
+	<dfn><<style-feature-name>></dfn> can be either a
+	[=supported CSS property=] or a valid <<custom-property-name>>.
+	<dfn><<style-feature-value>></dfn> is any valid sequence of tokens.
+
+	A <<style-feature-plain>> evaluates to true if the [=computed value=] of
+	the given property on the [=query container=] matches the given value
+	(which is also [=computed value|computed=] with respect to the
+	[=query container=]), and false otherwise.
+
+	A [=style feature=] without a value (<<style-feature-boolean>>) evaluates
+	to true if the [=computed value=] is different from the [=initial value=]
+	for the given [=property=].
+
+	To evaluate a [=style feature=] with a range (<<style-range>>), the
+	following steps needs to be performed:
+
+	1. If <<style-range-value>> is a valid <<custom-property-name>>, it needs
+        to be substituted.
+	2. Substitute [=arbitrary substitution function=] within
+        <<style-range-value>>.
+	3. Parse <<style-range-value>> to any [=numeric data types=] except
+        <<integer>>. If this cannot be done, evaluate to false.
+	4. If each <<style-range-value>> from the range have the same type, compute
+        each and evaluate the comparison.
+	5. Otherwise evaluate to false.
 
 	The boolean syntax and logic combining [=style features=] into a [=container style query|style query=]
 	is the same as for [=CSS feature queries=].