diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs
index 10fd5bd0997d..dbadf8bf475b 100644
--- a/css-conditional-5/Overview.bs
+++ b/css-conditional-5/Overview.bs
@@ -1991,11 +1991,115 @@ The CSSContainerRule interface
or simplification based on evaluating results) are not allowed.
- Issue(6205): Container Queries should have a matchContainer 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 resizeObserver,
- but it provides the additional Container Query syntax and features.
+The matchContainer() method
+
+
+partial interface Element {
+ [NewObject] ContainerQueryList matchContainer(CSSOMString query);
+ };
+
+
+The matchContainer(query) method, when invoked, must run these steps:
+
+
+ - Let parsed container query list be the result of
+ parsing
+ query.
+
- Return a new {{ContainerQueryList}} object,
+ with [=this=] as the element,
+ as the document,
+ with parsed container query list
+ as its associated [=ContainerQueryList/container query list=].
+
+
+The {{ContainerQueryList}} Interface
+
+This section integrates with the event loop defined in HTML. [[!HTML]]
+
+A {{ContainerQueryList}} object has an associated
+container query list
+and an associated
+element set(or assigned?) on creation.
+
+A {{ContainerQueryList}} object has an associated
+container which is the
+serialized
+form of the associated [=ContainerQueryList/container query list=].
+
+A {{ContainerQueryList}} object has an associated
+matches state
+which is true if the associated [=ContainerQueryList/container query list=]
+matches the state of the query container, and false otherwise.
+
+
+When asked to evaluate container queries and report changes
+for a {{query container}} of the element ele, run these steps:
+
+
+ -
+
+ For each {{ContainerQueryList}} object target that has ele, in the order they were created, oldest first, run these substeps:
+
+
+
+ - If target's matches state has changed since the last time these steps were run,
+ fire an event named change at target
+ using {{ContainerQueryListEvent}},
+ with its {{Event/isTrusted}} attribute initialized to true,
+ its {{ContainerQueryList/container}} attribute initialized to target's container,
+ and its {{ContainerQueryListEvent/matches}} attribute initialized to target's matches state.
+
+
+
+
+
+
+ A simple piece of code that detects changes in the overflow in any of a series of elements can be written as follows:
+
+
+ function handleOverflowChange(event) {
+ if(event.matches) // the thing overflowed
+ …
+ else
+ …
+ }
+
+ const element = document.getElementById("target");
+ var cql = element.matchContainer("(scroll-state(scrollable))");
+ cql.onchange = handleOverflowChange;
+
+
+[Exposed=Window]
+interface ContainerQueryList : EventTarget {
+ readonly attribute CSSOMString container;
+ readonly attribute boolean matches;
+ attribute EventHandler onchange;
+};
+
+
+The container attribute must return
+the associated container.
+
+The matches attribute must return
+the associated matches state.
+
+The following are the event handlers (and their corresponding
+event handler event types) that must be supported, as
+event handler IDL attributes, by all objects implementing the
+{{ContainerQueryList}} interface:
+
+
The CSSSupportsConditionRule interface