[css-conditional-5] Define a range syntax for style container queries (#12401)

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

* Apply sembr and cleanup

* Update css-conditional-5/Overview.bs

---------

Co-authored-by: Tab Atkins Jr. <[email protected]>

Author: tursunova

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,45 @@ Orientation: the '@container/orientation' feature</h4>
 <h3 id="style-container">
 Style Container Features</h3>
 
-	A <dfn export>container style query</dfn>
-	allows querying
+	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.
+	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>>).
+	The <dfn><<style-feature-name>></dfn> can be either a [=supported CSS property=]
+	or a valid <<custom-property-name>>.
+	The <dfn><<style-feature-value>></dfn> production matches any valid <<declaration-value>>
+	as long as it doesn't contain <<mf-lt>>, <<mf-gt>> and <<mf-eq>> 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 evaluates to true if the [=computed value=]
-	is different from the [=initial value=] for the given [=property=].
+	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=].
+
+	<div algorithm>
+		To <dfn>evaluate a <<style-range>></dfn>,
+		the following steps needs to be performed:
+
+		1. If <<style-range-value>> is a <<custom-property-name>>,
+			it needs to be substituted
+			as if the <<custom-property-name>> was wrapped inside a ''var()''.
+		2. Substitute [=arbitrary substitution function=] within <<style-range-value>>.
+		3. Parse <<style-range-value>> to
+			<<number>>, <<percentage>>, <<length>>, <<angle>>, <<time>>, <<frequency>> or <<resolution>>.
+			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.
+	</div>
 
 	The boolean syntax and logic combining [=style features=] into a [=container style query|style query=]
 	is the same as for [=CSS feature queries=].