Add matchContainer() method and QueryContainerList interface

Author: meyerweb

css-conditional-5/Overview.bs

@@ -1772,11 +1772,103 @@ The <code>CSSContainerRule</code> interface</h3>
 			or simplification based on evaluating results) are not allowed.
 	</dl>
 
-	Issue(6205): Container Queries should have a <code>matchContainer</code> method.
-	This will be modeled on {{matchMedia()}} and the {{MediaQueryList}} interface,
-	but applied to Elements rather than the Window.
-	When measuring layout sizes, it behaves Similar to <code>resizeObserver</code>,
-	but it provides the additional Container Query syntax and features.
+<h3 id=the-matchContainer-method>The matchContainer() method</h3>
+
+<pre class=idl>
+partial interface Element {
+    [NewObject] ContainerQueryList matchContainer(CSSOMString query);
+    }
+</pre>
+
+
+
+<h3 id=the-ContainerQueryList-interface>The {{ContainerQueryList}} Interface</h3>
+
+This section integrates with the <a for=/>event loop</a> defined in HTML. [[!HTML]]
+
+A {{ContainerQueryList}} object has an associated 
+<dfn for=ContainerQueryList>container query list</dfn> 
+and an associated 
+<dfn for=ContainerQueryList>document</dfn> set on creation.
+
+A {{ContainerQueryList}} object has an associated 
+<dfn for=ContainerQueryList>container</dfn> which is the 
+<a lt='serialize a container query list'>serialized</a> 
+form of the associated [=ContainerQueryList/container query list=].
+
+A {{ContainerQueryList}} object has an associated 
+<dfn for=ContainerQueryList>matches state</dfn> 
+which is true if the associated [=ContainerQueryList/container query list=] 
+matches the state of the <a for=ContainerQueryList>document</a>, and false otherwise.
+
+
+When asked to <dfn export>evaluate container queries and report changes</dfn> 
+for a {{Document}} <var>doc</var>, run these steps:
+
+<ol>
+
+ <li>
+
+  For each {{ContainerQueryList}} object <var>target</var> that has <var>doc</var> as its <a for=ContainerQueryList>document</a>, in the order they were created, oldest first, run these substeps:
+
+  <ol>
+
+   <li>If <var>target</var>'s <a>matches state</a> has changed since the last time these steps were run, 
+   <a>fire an event</a> named <a event>change</a> at <var>target</var>
+   using {{ContainerQueryListEvent}},
+   with its {{Event/isTrusted}} attribute initialized to true,
+   its {{ContainerQueryList/container}} attribute initialized to <var>target</var>'s <a>container</a>,
+   and its {{ContainerQueryListEvent/matches}} attribute initialized to <var>target</var>'s <a>matches state</a>. <!--fingerprint-->
+
+  </ol>
+
+</ol>
+
+<div class='example'>
+    A simple piece of code that detects changes in the overflow in any of a series of elements can be written as follows:
+
+    <pre highlight=javascript>
+    function handleOverflowChange(event) {
+        if(event.matches) // the thing overflowed
+            &hellip;
+        else
+            &hellip;
+    }
+    var cql = matchContainer("(scroll-state(scrollable))");
+    cql.onchange = handleOverflowChange;
+    </pre>
+</div>
+
+<pre class=idl>
+[Exposed=Window]
+interface ContainerQueryList : EventTarget {
+  readonly attribute CSSOMString container;
+  readonly attribute boolean matches;
+           attribute EventHandler onchange;
+};
+</pre>
+
+The <dfn attribute for=ContainerQueryList>container</dfn> attribute must return
+the associated <a>container</a>.
+
+The <dfn attribute for=ContainerQueryList>matches</dfn> attribute must return
+the associated <a>matches state</a>. <!--fingerprint-->
+
+The following are the <a>event handlers</a> (and their corresponding 
+<a>event handler event types</a>) that must be supported, as 
+<a>event handler IDL attributes</a>, by all objects implementing the 
+{{ContainerQueryList}} interface:
+
+<table class="complex data">
+ <thead>
+  <tr>
+   <th><a>Event handler</a>
+   <th><a>Event handler event type</a>
+ <tbody>
+  <tr>
+   <td><dfn attribute for=ContainerQueryList>onchange</dfn>
+   <td><a event>change</a>
+</table>
 
 <h2 class=no-num id="security">Security Considerations</h2>