[css-conditional-5] Add matchContainer() and ContainerQueryList API text

[meyerweb]

As per #6205.

[DevSDK]

How about describe or mention what the target is? I initially thought it was element itself. But the recent issues talks and container query behavior is finding eligible ancestor of the element.

[DevSDK]

Related: https://github.com/w3c/csswg-drafts/pull/13551/changes#r2950925618

[DevSDK]

I focused on referring to the element's target container which is already defined as a "query container" for @container.

[DevSDK]

we missed the serialization rule here.

We may need to create/adopt the existing rule? https://drafts.csswg.org/cssom-1/#serialize-a-media-query-list

[DevSDK]

I suppose we missed definition ContainerQueryListEvent idl here?

FYR: https://drafts.csswg.org/cssom-view/#mediaquerylistevent

and also We may need to ContainerQueryListEventInit that correspond with MediaQueryListEventInit

[DevSDK]

Related: https://github.com/w3c/csswg-drafts/pull/13551/changes#r2950925618

[DevSDK]

cc + @frivoal can you take a look here? :)

[DevSDK]

While I'm working on the CL, there are three things need to be consider:

1. -List name: Media queries can be a list with a ',' separator, but container queries don't seem to have a similar syntax.
2. The query itself: Should we accept a container name or not? If we do, what would be a good approach? matchContainer("container name and condition") or matchContainer("condition", containerName)?
3. Serialization rules (maybe adopt containerRule.containerQuery?)

[DevSDK]

Additionally, @andruud mentioned that we should specify the event timing in the CL.

Since the following specs are managed by HTML's event loop-processing-model:

• resize-observer Algorithms:

  Note: The following algorithms are invoked as a part of update the rendering in the html spec: gather active resize observations at depth, has active resize observations, has skipped resize observations, broadcast active resize observations and deliver resize loop error notification.

• css-conditional-5 Updating Scroll State:

  To avoid such layout cycles, scroll-state query containers update their current state as part of run snapshot post-layout state steps which is only run at specific points in the HTML event loop processing model.
  When asked to run snapshot post-layout state steps, update the current state of every scroll-state query container. This snapshotted state will be used for any style and layout updates until the next time these steps are run.

We should consider a similar approach here.