Define CSSOM for @Custom-Media (#12525)

Author: tursunova

mediaqueries-5/Overview.bs

@@ -2706,54 +2706,40 @@ Script-based Custom Media Queries</h3>
 ██    ██ ██    ██ ██    ██ ██     ██ ██     ██
  ██████   ██████   ██████   ███████  ██     ██
 -->
-<!--
+
 <h2 id='custom-mq-cssom'>
 CSSOM</h2>
 
-	The <a interface>CSSRule</a> interface is extended as follows:
-
-	<pre class="idl partial">
-	partial interface CSSRule {
-		const unsigned short CUSTOM_MEDIA_RULE = 17;
-	};
-	</pre>
-
-	The <a interface>CSSCustomMediaRule</a> interface represents a ''@custom-media'' rule.
-
-	<pre class="idl">
-	[Exposed=Window]
-	interface CSSCustomMediaRule : CSSRule {
-		attribute CSSOMString name;
-		[SameObject, PutForwards=mediaText] readonly attribute MediaList media;
-	};
-	</pre>
-
-	<dl dfn-type=attribute dfn-for=CSSCustomMediaRule>
-		<dt><dfn>name</dfn>, of type <code>CSSOMString</code>
-		<dd>
-			The <a attribute>name</a> attribute on getting must return a <code>CSSOMString</code> object
-			that contains the serialization of the <<extension-name>> defined for the associated rule.
-
-			On setting the <a attribute>name</a> attribute,
-			run the following steps:
+The {{CSSCustomMediaRule}} interface represents a ''@custom-media'' rule.
 
-			<ol>
-				<li><a>Parse a component value</a> from the value.
+<pre class="idl" export>
+typedef (MediaList or boolean) CustomMediaQuery;
 
-				<li>
-					If the returned value is an <<extension-name>>,
-					replace the associated rule's name with the <<extension-name>>'s representation.
+[Exposed=Window, RuntimeEnabled=CSSCustomMedia]
+interface CSSCustomMediaRule : CSSRule {
+    readonly attribute CSSOMString name;
+    readonly attribute CustomMediaQuery query;
+};
+</pre>
 
-				<li>
-					Otherwise, do nothing.
-			</ol>
+<dl dfn-type=attribute dfn-for=CSSCustomMediaRule>
+	<dt><dfn>name</dfn>
+	<dd>
+		Returns a CSSOMString representing the <<extension-name>> of the ''@custom-media'' rule.
 
-		<dt><dfn>media</dfn>, of type <a interface>MediaList</a>, readonly
-		<dd>
-			The <a attribute>media</a> attribute must return a <a interface>MediaList</a> object
-			for the <<media-query-list>> specified with the associated rule.
-	</dl>
--->
+	<dt><dfn>query</dfn>
+	<dd>
+		Represents the value of the <a>custom media query</a>.
+		The returned {{CustomMediaQuery}} will be one of the following:
+		<ul>
+			<li>A {{MediaList}} object,
+			if the rule was defined with a <<media-query-list>>.
+			<li>The boolean true,
+			if the rule was defined with the value <a value for="@custom-media">true</a>.
+			<li>The boolean false,
+			if the rule was defined with the value <a value for="@custom-media">false</a>.
+		</ul>
+</dl>
 
 <!--
   ██     ██  ██████  ████████ ████████  ████████  ████████  ████████ ████████  ██████