spec:css-break-3; type:dfn; text:forced break

spec:css-break-3; type:dfn; text:fragmentation

spec:css-break-3; type:dfn; text:fragmentation container

spec:css-break-3; type:dfn; text:fragmentation context

spec:css-break-3; type:dfn; text:fragmented flow

spec:css-cascade-5; type:dfn; text:property

spec:css-conditional-3; type:dfn; text:conditional group rule

spec:css-conditional-3; type:type; text:<supports-decl>

spec:css-conditional-4; type:type; text:<supports-selector-fn>

spec:css-contain-2; type:dfn; text:layout containment box

spec:css-contain-2; type:dfn; text:size containment box

spec:css-display-3; type:property; text:display

spec:css-fonts-4; type:type; text:<font-format>

spec:css-fonts-4; type:type; text:<font-tech>

spec:css-grid-1; type:property; text:grid

spec:css-pseudo-4; type:dfn; text:fictional tag sequence

spec:css-pseudo-4; type:selector; text:::file-selector-button

spec:css-pseudo-4; type:selector; text:::placeholder

spec:css-scroll-snap-2; type:dfn; text:scrollsnapchanging

spec:css-sizing-3; type:dfn; text:height

spec:css-sizing-3; type:dfn; text:size

spec:css-sizing-3; type:dfn; text:width

spec:css-sizing-3; type:property; text:height

spec:css-sizing-3; type:property; text:min-height

spec:css-sizing-3; type:property; text:min-width

spec:css-sizing-4; type:property; text:aspect-ratio

spec:css-sizing-4; type:property; text:contain-intrinsic-size

spec:css-ui-3; type:property; text:text-overflow

spec:css-values-4; type:dfn; text:identifier

spec:css-values-4; type:dfn; text:relative length

spec:css2; type:dfn; text:stacking context

spec:css2; type:property; text:content

spec:css2; type:property; text:counter-increment

spec:infra; type:dfn; text:list

spec:intersection-observer; type:dfn; text:intersection root

spec:selectors-4; type:dfn; text:pseudo-elements

spec:web-animations-1; type:dfn; text:effect values

ISSUE: This is currently an early draft of the things that are <em>new</em> in level 5.

The features in Level 3 and Level 4 are still defined

in [[css-conditional-3]] and [[css-conditional-4]]

and have not yet been copied here.

CSS Conditional Level 5 extends

the ''@supports'' rule and [=supports query=] syntax

to allow testing for custom support conditions as well as supported [=at-rules=] and font technologies.

It also adds an ''@when'' rule,

which generalizes the concept of a conditional rule.

Anything that can be expressed in an existing conditional rule

can be expressed in ''@when''

by wrapping it in an appropriate function

to declare what kind of condition it is.

This allow authors to easily combine multiple types of queries,

such as media queries and supports queries,

in a single boolean expression.

Without this,

authors must rely on nesting separate conditional rules,

which is harder to read and write,

presupposes the conditions are to be conjoined with the “and” boolean relation

(with no easy way to indicate anything else),

and restricts their utility in the proposed [=conditional rule chains=].

It also adds ''@else'' rules,

which immediately follow other conditional rules

and automatically qualify their conditions

as the inverse of the immediately preceding rule’s conditions,

such that only the first matching rule in a [=conditional rule chain=]

is applied.

It also adds Container Queries.

They are conceptually similar to Media Queries,

but allow testing aspects of elements within the document (such as box dimensions or computed styles),

rather than on the document as a whole.

This level of the specification extends the <<supports-feature>> syntax as follows:

<pre class="prod def" nohighlight>

<dfn>&lt;declaration></dfn> here matches anything that would be successfully parsed by <l spec=css-syntax>[=consume a declaration=]</l>,

ignoring the context-validation check at the end of that algorithm.

<span class=note>Notably, this includes a trailing ''!important'',

which is valid but ignored for the purpose of ''@supports''.</span>

<dl dfn-type=function dfn-for="@supports">

: <<supports-condition-name>>

::

The result is true if the UA

<a href="#dfn-supports-condition-name">supports the named condition</a>.

If the name is not recognized,

the result is false.

: <dfn>font-tech( <<font-tech>> )</dfn>

::

The result is true if the UA

[=supports the font tech=]

provided as an argument to the function.

: <dfn>font-format( <<font-format>> )</dfn>

::

The result is true if the UA

[=supports the font format=]

provided as an argument to the function.

: <dfn>at-rule( <<at-keyword-token>> )</dfn>

::

The result is true if the UA

[=supports the at-rule=]

provided as an argument to the function.

: <dfn>named-feature( <<ident>> )</dfn>

::

The result is true if the UA

[=supports the named feature=]

provided as an argument to the function.

: <dfn>env( <<ident>> )</dfn>

::

The result is true if the UA

[=supports the environment variable=]

provided as an argument to the function.

</dl>

<wpt>

js/CSS-supports-L5.html

</wpt>

A CSS processor is considered to

<dfn export for=CSS id="dfn-support-font-tech" lt="support a font tech|support the font tech">support a font tech</dfn>

when it is capable of utilizing the specified [[css-fonts-4#font-tech-definitions]]

in layout and rendering.

A CSS processor is considered to

<dfn export for=CSS id="dfn-support-font-format" lt="support a font format|support the font format">support a font format</dfn>

when it is capable of utilizing the specified [[css-fonts-4#font-format-definitions]]

in layout and rendering,

and this format is not specified as a <<string>>.

<wpt>

js/supports-at-rule.html

</wpt>

A CSS processor is considered to

<dfn export for=CSS id="dfn-support-at-rule" lt="support an at-rule | support the at-rule">support an at-rule</dfn>

if it would accept an [=at-rule=] beginning with the specified at-keyword

within any context.

Note: Because ''@charset'' is not a valid [=at-rule=],

it is not considered to be supported under this definition.

A CSS processor is considered to

<dfn export for=CSS id="dfn-support-named-feature" lt="support a named feature|support the named feature">support a named feature</dfn>

if it supports the named feature based on the feature definition

described in the following list:

<dl value for="named-feature()" export>

: <dfn>anchor-position-follows-transforms</dfn>

:: Anchoring to a transformed element automatically takes into account the anchor's transforms,

causing the positioned element to shift to match it.

[[CSS-ANCHOR-POSITIONING]]

(An earlier version of the specification did not take transforms into account.)

: <dfn>single-axis-scroll-container</dfn>

:: The ability to have [=single-axis scroll containers=],

where one axis is scrollable and the other is ''overflow/clip''.

[[CSS-OVERFLOW-4]]

(Previously, specifying ''overflow/clip'' alongside a scrollable value caused it to compute to ''overflow/hidden'',

which is still a scrollable value even if it doesn't generate a scrollbar.)

</dl>

If the feature is not listed the processor does not support the named feature.

Note: The CSS Working Group intends to add features to this list rarely,

when there is real demand for feature testing something specific

and it would be unreasonable to add a more general feature testing mechanism

that would cover the use case.

A CSS processor is considered to

<dfn export for=CSS id="dfn-supports-condition-name" lt="support a named condition|support the named condition">support a named condition</dfn>

when the related [=named supports condition=] returns true.

A CSS processor is considered to

<dfn export for=CSS id="dfn-support-env" lt="support an environment variable|support the environment variable">support an environment variable</dfn>

if the <<ident>> is a supported [=environment variable=].

The <dfn>@when</dfn> at-rule is a [=conditional group rule=]

that generalizes the individual [=conditional group rules=]

such as ''@media'' and ''@supports''.

It is defined as:

<pre class=prod>

Where <dfn><<boolean-condition>></dfn> is a boolean algebra a la [[mediaqueries-4#mq-syntax]],

but with ''media()'' and ''supports()'' functions as leaves.

Issue: Define "boolean algebra, with X as leaves" in a generic way in Conditional,

so all the conditional rules can reference it directly,

rather than having to redefine boolean algebra on their own.

The ''media()'' and ''supports()'' functions are defined as:

<pre class=prod>

A ''media()'' or ''supports()'' function is associated with the boolean result

that its contained condition is associated with.

Usually, [=conditional group rules=] are independent;

each one has a separate condition

evaluated without direct reference to any other rule,

and decides whether or not to apply its contained rules

based solely on its condition.

This is fine for simple conditions,

but makes it difficult to write a collection of conditionals

that are meant to be mutually exclusive:

authors have to very carefully craft their conditions

to not activate when the other rules are meant to,

and make sure the collection of conditionals

don't accidentally <em>all</em> exclude some situation

which is then left unstyled.

The <dfn>@else</dfn> rule is a [=conditional group rule=]

used to form [=conditional rule chains=],

which associate multiple [=conditional group rules=]

and guarantee that only the first one that matches

will evaluate its condition as true.

It is defined as:

<pre class=prod>

''@else'' is interpreted identically to ''@when''.

If its <<boolean-condition>> is omitted,

it's treated as having a condition that's always true.

A <dfn export>conditional rule chain</dfn> is

a series of consecutive [=conditional group rules=],

starting with a [=conditional group rule=] other than ''@else'',

followed by zero or more ''@else'' rules.

There cannot be anything between the successive [=conditional group rules=]

other than whitespace and/or comments;

any other token “breaks” the chain.

Issue: Should we require that only the last ''@else'' in a chain can have an omitted condition?

It's not uncommon for me, when debugging code,

to short-circuit an if-else chain by setting one of them to "true";

I presume that would be similarly useful in CSS?

It's still pretty easy to see you've done something wrong if you omit the condition accidentally.

Within a [=conditional rule chain=],

the conditions of each [=conditional group rule=] are evaluated in order.

If one of them is true,

the conditions of all <em>following</em> [=conditional group rules=] in the chain

evaluate to false,

regardless of their stated condition.

An ''@else'' rule that is not part of a [=conditional rule chain=]

is invalid and must be ignored.

<div class=example>

For example, here's a (somewhat silly) conditional chain:

<pre class="lang-css">

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {

/* A */

} @else supports(caret-color: pink) and supports(background: double-rainbow()) {

/* B */

} @else {

/* C */

}

</pre>

Exactly one of the preceding rules will be chosen,

even though the second rule

doesn't exclude large widths, fine points, or flexbox support,

and the last rule

doesn't specify anything at all.

To achieve the same result without [=conditional rule chains=],

you'd need to write:

<pre class="lang-css">

@media (width >= 400px) and (pointer: fine) {

@supports (display: flex) {

/* A */

}

@supports not (display: flex) {

@supports (caret-color: pink) and (background: double-rainbow()) {

/* B */

}

@supports not ((caret-color: pink) and (background: double-rainbow())) {

/* C */

}

}

}

@media not ((width >= 400px) and (pointer: fine)) {

@supports (caret-color: pink) and (background: double-rainbow()) {

/* B */

}

@supports not ((caret-color: pink) and (background: double-rainbow())) {

/* C */

}

}

</pre>

This is simultaneously hard to read,

requires significant duplication of both conditions and contents,

and is <em>very</em> difficult to write correctly.

<!-- (I wrote it wrong <em>twice</em> while producing this example.) -->

If the conditions got any more complicated

(which is not unusual in real-world content),

the example would get <em>significantly</em> worse.

</div>

<div class="example">

In this example, three different color font technologies

are tested, in order of preference,

plus a monochrome fallback.

The most capable, COLRv1, supports both gradients and font variations;

the next best choice, SVG, supports gradients

while the least capable, COLRv0, supports flat color fill only.

The fallback has no test condition,

so will always be chosen unless one of the earlier conditions succeeds.

<pre class="lang-css">

@when font-tech(color-COLRv1) and font-tech(variations) {

@font-face { font-family: icons; src: url(icons-gradient-var.woff2); }

}

@else font-tech(color-SVG) {

@font-face { font-family: icons; src: url(icons-gradient.woff2); }

}

@else font-tech(color-COLRv0) {

@font-face { font-family: icons; src: url(icons-flat.woff2); }

}

@else {

@font-face { font-family: icons; src: url(icons-fallback.woff2); }

}

</pre>

Notice that in this example,

the variable color font is only downloaded

if COLRv1 is supported

and font variations are also supported.

Notice too that only one of the available options will be downloaded;

this would not be the case without ''@when'' and ''@else'',

as the next example shows.

</div>

<div class="example">

In this example,

although it appears that the fallback will not be used

if COLRv1 is supported,

in fact both fonts will be downloaded,

which wastes bandwidth if it is not used.

The fallback might still be used for some characters;

for example, if the color font supports only Latin,

while the fallback supports Latin and Greek.

<pre class="lang-css">

@font-face { font-family: icons; src: url(icons-fallback.woff2);

@supports font-tech(color-COLRv1) {

@font-face { font-family: icons; src: url(icons-gradient-var.woff2); }

}

</pre>

</div>

While [=media queries=] provide a method to query

aspects of the user agent or device environment

that a document is being displayed in

(such as viewport dimensions or user preferences),

[=container queries=] allow testing aspects of elements within the document

(such as box dimensions or computed styles).

By default, all elements are <dfn export lt="query container">query containers</dfn>

for the purpose of [=container style queries=],

and can be established as [=query containers=]

for [=container size queries=] and [=container scroll-state queries=] by specifying

the additional query types using the 'container-type' property

(or the 'container' [=shorthand=]).

Style rules applying to a [=query container=]’s [=flat tree=] descendants

can be conditioned by querying against it,

using the ''@container'' [=conditional group rule=].

An ancestor element that generates a box is not an eligible container for

[=container size queries=] if that box is not an ancestor box of any boxes

generated by the querying element.

<div class=note>

There are cases where the box for a [=pseudo-element=] is generated as a

sibling box of its originating element's box. If we allowed querying the size

of a sibling box, it would introduce layout cycles.

For example, the ''::scroll-marker-group'' and ''::scroll-button()'' pseudo-elements

generate sibling boxes of their originating element's box.

These pseudo-elements will not be able to query their originating scroller

for [=container size queries=]. They will, however, be able to query other

eligible [=query container=] ancestors.

</div>

<div class=example>

For example, we can define the main content area and sidebar as containers,

and then describe a ''.media-object'' that changes

from vertical to horizontal layout depending on the size of its container:

<pre class=lang-css>

main, aside {

container: my-layout / inline-size;

}

.media-object {

display: grid;

grid-template: 'img' auto 'content' auto / 100%;

}

@container my-layout (inline-size > 45em) {

.media-object {

grid-template: 'img content' auto / auto 1fr;

}

}

</pre>

Media objects in the main and sidebar areas

will each respond to their own container context.

</div>

For the ''::part()'' and ''::slotted()'' <a>pseudo-element</a> selectors,

which represent real elements in the DOM tree, [=query containers=] can be

established by [=flat tree=] ancestors of those elements.

For other <a>pseudo-element</a>s, [=query containers=] can be established by

inclusive [=flat tree=] ancestors of their <a>originating element</a>.

<div class=note>

It follows that:

* ''::before'', ''::after'', ''::marker'', and ''::backdrop'' query their

originating elements

* ''::first-letter'' and ''::first-line'' query their originating elements,

even if the <a>fictional tag sequence</a> may push the

<code>::first-line</code> past other elements for the purpose of

inheritance and rendering

* ''::slotted()'' selectors can query containers inside the shadow tree,

including the slot itself

* ''::slotted()::before'' selectors can query the slotted shadow host child

* ''::part()'' selectors can query containers inside the shadow tree

* ''::placeholder'' and ''::file-selector-button'' can query the input

element, but do not expose any internal containers if the input element is

implemented using a shadow tree

</div>

<div class=example>

A ::before selector querying the size of the originating element:

<pre class=lang-html>

&lt;style>

#container {

width: 100px;

container-type: inline-size;

}

@container (inline-size < 150px) {

#inner::before {

content: "BEFORE";

}

}

&lt;/style>

&lt;div id=container>

&lt;span id=inner>&lt;/span>

&lt;/div>

</pre>

</div>

<div class=example>

A ::slotted() selector for styling a shadow host child can query a

container in the shadow tree:

<pre class=lang-html>

&lt;div id=host style="width:200px">

&lt;template shadowroot=open>

&lt;style>

#container {

width: 100px;

container-type: inline-size;

}

@container (inline-size < 150px) {

::slotted(span) {

color: green;

}

}

&lt;/style>

&lt;div id=container>

&lt;slot />

&lt;/div>

&lt;/template>

&lt;span id=slotted>Green&lt;/span>

&lt;/div>

</pre>

</div>

<pre class='propdef'>

The 'container-type' property establishes the element as a

[=query container=] for certain types of queries. For size

[=container queries=], which require certain types of containment, elements

are explicitly made [=query containers=] through this property. For other

types of [=query containers=] any element can be a [=query container=], such

as for [=container style queries=].

Values have the following meanings:

<dl dfn-type=value dfn-for=container-type>

<dt><dfn>size</dfn>

<dd>

Establishes a [=query container=] for [=container size queries=]

on both the [=inline axis|inline=] and [=block axis=].

Applies [=style containment=] and [=size containment=]

to the [=principal box=],

and establishes an [=independent formatting context=].

<dt><dfn>inline-size</dfn>

<dd>

Establishes a [=query container=] for [=container size queries=]

on the container’s own [=inline axis=].

Applies [=style containment=] and [=inline-size containment=]

to the [=principal box=],

and establishes an [=independent formatting context=].

<dt><dfn>scroll-state</dfn>

<dd>

Establishes a [=query container=] for [=container scroll-state queries=].

For queries that match the state of the scroller itself

(such as ''@container/scrollable''),

the element is only a [=query container=]

on the element's own [=scrollable axises=].

Note: This means that a ''scrollable'' query, for example,

could query against different containers

for ''scroll-state(scrollable: block)'' and ''scroll-state(scrollable: inline)'' queries.

<dt><dfn>normal</dfn>

<dd>

The element is not a [=query container=]

for any [=container size queries=] or [=container scroll-state queries=],

but remains a [=query container=] for [=container style queries=].

</dl>

<div class=example>

For example, authors can create container-responsive typography,

adjusting 'font-size', 'line-height', and other typographic concerns

based on the size of a container:

<pre class=lang-css>

aside, main {

container-type: inline-size;

}

h2 { font-size: 1.2em; }

@container (width > 40em) {

h2 { font-size: 1.5em; }

}

</pre>

The ''40em'' value used in the query condition

is relative to the [=computed value=] of 'font-size'

on the relevant [=query container=].

</div>

<div class=example>

Containers can also expose computed style values for querying.

This can be useful for toggling behavior across multiple properties:

<pre class=lang-css>

@container style(--cards: small) {

article {

border: thin solid silver;

border-radius: 0.5em;

padding: 1em;

}

}

</pre>

</div>

<div class=example>

Containers can also expose state that depends on scroll offset. This example

styles a descendant of a sticky positioned element when it is stuck to the

top edge:

<pre class=lang-css>

#sticky {

container-type: scroll-state;

position: sticky;

}

@container scroll-state(stuck: top) {

#sticky-child {

background-color: lime;

}

}

</pre>

</div>

<pre class='propdef'>

<wpt>

container-queries/container-ident-function.html

container-queries/container-ident-function.html

</wpt>

The 'container-name' property

specifies a list of <dfn export lt="query container name">query container names</dfn>.

These names can be used by ''@container'' rules

to filter which [=query containers=] are targeted.

Container names are not [=tree-scoped names=].

<dl dfn-for=container-name dfn-type=value>

<dt><dfn>none</dfn>

<dd>

The [=query container=] has no [=query container name=].

<dt><dfn><<custom-ident>></dfn>

<dd>

Specifies a [=query container name=] as an [=identifier=].

The keywords ''container-name/none'', ''and'', ''not'', and ''or'' are excluded from this <<custom-ident>>.

</dl>

<div class=example>

In some cases, we want to query aspects of a specific container,

even if it’s not the nearest ancestor container.

For example, we might want to query the height of a main content area,

and the width of a more nested inline-container.

<pre class=lang-css>

main {

container-type: size;

container-name: my-page-layout;

}

.my-component {

container-type: inline-size;

container-name: my-component-library;

}

@container my-page-layout (block-size > 12em) {

.card { margin-block: 2em; }

}

@container my-component-library (inline-size > 30em) {

.card { margin-inline: 2em; }

}

</pre>

It is also possible to query for a container only based on its name.

<pre class=lang-css>

@container my-page-layout {

.card { padding: 1em; }

}

</pre>

</div>

<pre class='propdef shorthand'>

<wpt>

container-queries/animation-container-size.html

container-queries/animation-container-type-dynamic.html

container-queries/animation-nested-animation.html

container-queries/animation-nested-transition.html

container-queries/aspect-ratio-feature-evaluation.html

container-queries/at-container-parsing.html

container-queries/at-container-serialization.html

container-queries/at-container-style-parsing.html

container-queries/at-container-style-serialization.html

container-queries/auto-scrollbars.html

container-queries/backdrop-invalidation.html

container-queries/calc-evaluation.html

container-queries/canvas-as-container-001.html

container-queries/canvas-as-container-002.html

container-queries/canvas-as-container-003.html

container-queries/canvas-as-container-004.html

container-queries/canvas-as-container-005.html

container-queries/canvas-as-container-006.html

container-queries/change-display-in-container.html

container-queries/chrome-legacy-skip-recalc.html

container-queries/column-spanner-in-container.html

container-queries/conditional-container-status.html

container-queries/container-computed.html

container-queries/container-for-cue.html

container-queries/container-for-shadow-dom.html

container-queries/container-inheritance.html

container-queries/container-inner-at-rules.html

container-queries/container-inside-multicol-with-table.html

container-queries/container-longhand-animation-type.html

container-queries/container-name-computed.html

container-queries/container-name-invalidation.html

container-queries/container-name-parsing.html

container-queries/container-name-tree-scoped.html

container-queries/container-nested.html

container-queries/container-parsing.html

container-queries/container-selection-unknown-features.html

container-queries/container-selection.html

container-queries/container-size-invalidation-after-load.html

container-queries/container-size-invalidation.html

container-queries/container-size-nested-invalidation.html

container-queries/container-size-shadow-invalidation.html

container-queries/container-type-computed.html

container-queries/container-type-containment.html

container-queries/container-type-invalidation.html

container-queries/container-type-layout-invalidation.html

container-queries/container-type-parsing.html

container-queries/container-units-animation.html

container-queries/container-units-basic.html

container-queries/container-units-computational-independence.html

container-queries/container-units-content-box.html

container-queries/container-units-gradient-invalidation.html

container-queries/container-units-gradient.html

container-queries/container-units-in-at-container-dynamic.html

container-queries/container-units-in-at-container-fallback.html

container-queries/container-units-in-at-container.html

container-queries/container-units-ineligible-container.html

container-queries/container-units-invalidation.html

container-queries/container-units-media-queries.html

container-queries/container-units-rule-cache.html

container-queries/container-units-selection.html

container-queries/container-units-shadow.html

container-queries/container-units-sharing-via-rule-node.html

container-queries/container-units-small-viewport-fallback.html

container-queries/container-units-svglength.html

container-queries/container-units-typed-om.html

container-queries/counters-flex-circular.html

container-queries/counters-in-container-dynamic.html

container-queries/counters-in-container.html

container-queries/crashtests/br-crash.html

container-queries/crashtests/canvas-as-container-crash.html

container-queries/crashtests/chrome-bug-1289718-000-crash.html

container-queries/crashtests/chrome-bug-1289718-001-crash.html

container-queries/crashtests/chrome-bug-1346969-crash.html

container-queries/crashtests/chrome-bug-1362391-crash.html

container-queries/crashtests/chrome-bug-1429955-crash.html

container-queries/crashtests/chrome-bug-1505250-crash.html

container-queries/crashtests/chrome-bug-346264227-crash.html

container-queries/crashtests/chrome-bug-372358471-crash.html

container-queries/crashtests/chrome-custom-highlight-crash.html

container-queries/crashtests/chrome-layout-root-crash.html

container-queries/crashtests/chrome-quotes-crash.html

container-queries/crashtests/chrome-remove-insert-evaluator-crash.html

container-queries/crashtests/columns-in-table-001-crash.html

container-queries/crashtests/columns-in-table-002-crash.html

container-queries/crashtests/container-in-canvas-crash.html

container-queries/crashtests/container-type-change-chrome-legacy-crash.html

container-queries/crashtests/dialog-backdrop-crash.html

container-queries/crashtests/dirty-rowgroup-crash.html

container-queries/crashtests/flex-in-columns-000-crash.html

container-queries/crashtests/flex-in-columns-001-crash.html

container-queries/crashtests/flex-in-columns-002-crash.html

container-queries/crashtests/flex-in-columns-003-crash.html

container-queries/crashtests/focus-inside-content-visibility-crash.html

container-queries/crashtests/force-sibling-style-crash.html

container-queries/crashtests/grid-in-columns-000-crash.html

container-queries/crashtests/grid-in-columns-001-crash.html

container-queries/crashtests/grid-in-columns-002-crash.html

container-queries/crashtests/grid-in-columns-003-crash.html

container-queries/crashtests/iframe-init-crash.html

container-queries/crashtests/inline-multicol-inside-container-crash.html

container-queries/crashtests/inline-with-columns-000-crash.html

container-queries/crashtests/inline-with-columns-001-crash.html

container-queries/crashtests/input-column-group-container-crash.html

container-queries/crashtests/input-placeholder-inline-size-crash.html

container-queries/crashtests/marker-gcs-after-disconnect-crash.html

container-queries/crashtests/math-block-container-child-crash.html

container-queries/crashtests/mathml-container-type-crash.html

container-queries/crashtests/orthogonal-replaced-crash.html

container-queries/crashtests/pseudo-container-crash.html

container-queries/crashtests/remove-dom-child-change-style.html

container-queries/crashtests/reversed-ol-crash.html

container-queries/crashtests/size-change-during-transition-crash.html

container-queries/crashtests/svg-layout-root-crash.html

container-queries/crashtests/svg-resource-in-container-crash.html

container-queries/crashtests/svg-text-crash.html

container-queries/crashtests/table-in-columns-000-crash.html

container-queries/crashtests/table-in-columns-001-crash.html

container-queries/crashtests/table-in-columns-002-crash.html

container-queries/crashtests/table-in-columns-003-crash.html

container-queries/crashtests/table-in-columns-004-crash.html

container-queries/crashtests/table-in-columns-005-crash.html

container-queries/crashtests/top-layer-crash.html

container-queries/crashtests/top-layer-nested-crash.html

container-queries/custom-layout-container-001.https.html

container-queries/custom-property-style-queries.html

container-queries/custom-property-style-query-change.html

container-queries/deep-nested-inline-size-containers.html

container-queries/dialog-backdrop-create.html

container-queries/dialog-backdrop-remove.html

container-queries/display-contents-dynamic-style-queries.html

container-queries/display-contents.html

container-queries/display-in-container.html

container-queries/display-none.html

container-queries/fieldset-legend-change.html

container-queries/flex-basis-with-container-type.html

container-queries/font-relative-calc-dynamic.html

container-queries/font-relative-units-dynamic.html

container-queries/font-relative-units.html

container-queries/fragmented-container-001.html

container-queries/get-animations.html

container-queries/grid-container.html

container-queries/grid-item-container.html

container-queries/idlharness.html

container-queries/iframe-in-container-invalidation.html

container-queries/iframe-invalidation.html

container-queries/ineligible-containment.html

container-queries/inheritance-from-container.html

container-queries/inline-size-and-min-width.html

container-queries/inline-size-bfc-floats.html

container-queries/inline-size-containment-vertical-rl.html

container-queries/inline-size-containment.html

container-queries/inner-first-line-non-matching.html

container-queries/layout-dependent-focus.html

container-queries/multicol-container-001.html

container-queries/multicol-inside-container.html

container-queries/nested-query-containers.html

container-queries/nested-size-style-container-invalidation.html

container-queries/never-match-container.html

container-queries/no-layout-containment-abspos-dynamic.html

container-queries/no-layout-containment-abspos.html

container-queries/no-layout-containment-baseline.html

container-queries/no-layout-containment-fixedpos-dynamic.html

container-queries/no-layout-containment-fixedpos.html

container-queries/no-layout-containment-scroll.html

container-queries/no-layout-containment-subgrid-crash.html

container-queries/orthogonal-wm-container-query.html

container-queries/percentage-padding-orthogonal.html

container-queries/pseudo-elements-001.html

container-queries/pseudo-elements-002.html

container-queries/pseudo-elements-002b.html

container-queries/pseudo-elements-003.html

container-queries/pseudo-elements-004.html

container-queries/pseudo-elements-005.html

container-queries/pseudo-elements-006.html

container-queries/pseudo-elements-007.html

container-queries/pseudo-elements-008.html

container-queries/pseudo-elements-009.html

container-queries/pseudo-elements-010.html

container-queries/pseudo-elements-011.html

container-queries/pseudo-elements-012.html

container-queries/pseudo-elements-013.html

container-queries/query-content-box.html

container-queries/query-evaluation-style.html

container-queries/query-evaluation.html

container-queries/reattach-container-with-dirty-child.html

container-queries/registered-color-style-queries.html

container-queries/resize-while-content-visibility-hidden.html

container-queries/scroll-state/at-container-scrollable-parsing.html

container-queries/scroll-state/at-container-scrollable-serialization.html

container-queries/scroll-state/at-container-snapped-parsing.html

container-queries/scroll-state/at-container-snapped-serialization.html

container-queries/scroll-state/at-container-stuck-parsing.html

container-queries/scroll-state/at-container-stuck-serialization.html

container-queries/scroll-state/container-type-scroll-state-computed.html

container-queries/scroll-state/container-type-scroll-state-containment.html

container-queries/scroll-state/container-type-scroll-state-parsing.html

container-queries/scroll-state/scroll-state-initially-scrollable.html

container-queries/scroll-state/scroll-state-initially-snapped.html

container-queries/scroll-state/scroll-state-initially-stuck.html

container-queries/scroll-state/scroll-state-scrollable-change.html

container-queries/scroll-state/scroll-state-scrollable-container-type-change.html

container-queries/scroll-state/scroll-state-scrollable-layout-change.html

container-queries/scroll-state/scroll-state-scrollable-wm.html

container-queries/scroll-state/scroll-state-snapped-change.html

container-queries/scroll-state/scroll-state-snapped-container-type-change.html

container-queries/scroll-state/scroll-state-snapped-layout-change.html

container-queries/scroll-state/scroll-state-snapped-none.html

container-queries/scroll-state/scroll-state-snapped-snap-changing.html

container-queries/scroll-state/scroll-state-snapped-wm.html

container-queries/scroll-state/scroll-state-stuck-container-type-change.html

container-queries/scroll-state/scroll-state-stuck-layout-change.html

container-queries/scroll-state/scroll-state-stuck-writing-direction.html

container-queries/scroll-state/scroll-state-target-query-change.html

container-queries/scrollbar-container-units-block.html

container-queries/scrollbar-container-units-inline.html

container-queries/sibling-layout-dependency.html

container-queries/size-container-no-principal-box.html

container-queries/size-container-with-quotes.html

container-queries/size-container-writing-mode-change.html

container-queries/size-feature-evaluation.html

container-queries/style-change-in-container.html

container-queries/style-container-for-shadow-dom.html