From 43a97878ce14b72f0981164f87f2e35e14151312 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 11:22:09 +0200
Subject: Adding upstream version 110.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../animation-container-size.html                  |  43 +++
 .../animation-container-type-dynamic.html          |  68 ++++
 .../animation-nested-animation.html                |  47 +++
 .../animation-nested-transition.html               |  44 +++
 .../aspect-ratio-feature-evaluation.html           |  49 +++
 .../container-queries/at-container-parsing.html    | 206 +++++++++++
 .../at-container-serialization.html                |  74 ++++
 .../at-container-style-serialization.html          |  34 ++
 .../container-queries/auto-scrollbars.html         |  53 +++
 .../container-queries/backdrop-invalidation.html   |  51 +++
 .../container-queries/calc-evaluation.html         |  32 ++
 .../container-queries/canvas-as-container-001.html |  29 ++
 .../container-queries/canvas-as-container-002.html |  30 ++
 .../container-queries/canvas-as-container-003.html |  32 ++
 .../container-queries/canvas-as-container-004.html |  33 ++
 .../container-queries/canvas-as-container-005.html |  36 ++
 .../container-queries/canvas-as-container-006.html |  37 ++
 .../change-display-in-container-ref.html           |   4 +
 .../change-display-in-container.html               |  27 ++
 .../chrome-legacy-skip-recalc.html                 |  20 ++
 .../column-spanner-in-container.html               |  41 +++
 .../conditional-container-status.html              |  28 ++
 .../container-queries/container-computed.html      |  28 ++
 .../container-queries/container-for-cue-ref.html   |  23 ++
 .../container-queries/container-for-cue.html       |  27 ++
 .../container-for-shadow-dom.html                  | 345 ++++++++++++++++++
 .../container-queries/container-inheritance.html   |  18 +
 .../container-inner-at-rules.html                  | 196 ++++++++++
 .../container-inside-multicol-with-table.html      |  41 +++
 .../container-longhand-animation-type.html         |  45 +++
 .../container-queries/container-name-computed.html |  23 ++
 .../container-name-invalidation.html               |  74 ++++
 .../container-queries/container-name-parsing.html  |  45 +++
 .../container-name-tree-scoped.html                |  73 ++++
 .../container-queries/container-nested.html        | 239 +++++++++++++
 .../container-queries/container-parsing.html       |  63 ++++
 .../container-queries/container-selection.html     | 183 ++++++++++
 .../container-size-invalidation-after-load.html    |  39 ++
 .../container-size-invalidation.html               |  39 ++
 .../container-size-nested-invalidation.html        |  62 ++++
 .../container-size-shadow-invalidation.html        |  55 +++
 .../container-queries/container-type-computed.html |  18 +
 .../container-type-containment.html                |  85 +++++
 .../container-type-invalidation.html               |  70 ++++
 .../container-type-layout-invalidation.html        |  29 ++
 .../container-queries/container-type-parsing.html  |  44 +++
 .../container-units-animation.html                 |  70 ++++
 .../container-queries/container-units-basic.html   |  54 +++
 ...container-units-computational-independence.html |  20 ++
 .../container-units-gradient-invalidation.html     |  38 ++
 .../container-units-gradient-ref.html              |  21 ++
 .../container-units-gradient.html                  |  25 ++
 .../container-units-in-at-container-dynamic.html   |  37 ++
 .../container-units-in-at-container-fallback.html  |  68 ++++
 .../container-units-in-at-container.html           | 111 ++++++
 .../container-units-ineligible-container.html      |  44 +++
 .../container-units-invalidation.html              | 119 +++++++
 .../container-units-media-queries.html             |  61 ++++
 .../container-units-selection.html                 | 101 ++++++
 .../container-queries/container-units-shadow.html  |  65 ++++
 .../container-units-small-viewport-fallback.html   |  70 ++++
 .../container-units-svglength.html                 |  95 +++++
 .../container-units-typed-om.html                  |  59 ++++
 .../container-queries/counters-flex-circular.html  |  76 ++++
 .../counters-in-container-dynamic.html             |  29 ++
 .../container-queries/counters-in-container.html   |  25 ++
 .../container-queries/counters-ref.html            |   4 +
 .../container-queries/crashtests/br-crash.html     |   6 +
 .../crashtests/canvas-as-container-crash.html      |  10 +
 .../crashtests/chrome-bug-1289718-000-crash.html   |   6 +
 .../crashtests/chrome-bug-1289718-001-crash.html   |   6 +
 .../crashtests/chrome-bug-1346969-crash.html       |  14 +
 .../crashtests/chrome-bug-1362391-crash.html       |   8 +
 .../crashtests/chrome-layout-root-crash.html       |  17 +
 .../crashtests/chrome-quotes-crash.html            |  11 +
 .../chrome-remove-insert-evaluator-crash.html      |  15 +
 .../crashtests/columns-in-table-001-crash.html     |  10 +
 .../crashtests/columns-in-table-002-crash.html     |  15 +
 .../crashtests/container-in-canvas-crash.html      |  11 +
 .../container-type-change-chrome-legacy-crash.html |  16 +
 .../crashtests/dirty-rowgroup-crash.html           |  18 +
 .../crashtests/flex-in-columns-000-crash.html      |  17 +
 .../crashtests/flex-in-columns-001-crash.html      |  17 +
 .../crashtests/flex-in-columns-002-crash.html      |  19 +
 .../crashtests/flex-in-columns-003-crash.html      |  19 +
 .../focus-inside-content-visibility-crash.html     |  42 +++
 .../crashtests/force-sibling-style-crash.html      |  16 +
 .../crashtests/grid-in-columns-000-crash.html      |  17 +
 .../crashtests/grid-in-columns-001-crash.html      |  17 +
 .../crashtests/grid-in-columns-002-crash.html      |  19 +
 .../crashtests/grid-in-columns-003-crash.html      |  19 +
 .../crashtests/iframe-init-crash.html              |   3 +
 .../inline-multicol-inside-container-crash.html    |  21 ++
 .../crashtests/inline-with-columns-000-crash.html  |  17 +
 .../crashtests/inline-with-columns-001-crash.html  |  17 +
 .../input-column-group-container-crash.html        |  14 +
 .../input-placeholder-inline-size-crash.html       |  12 +
 .../marker-gcs-after-disconnect-crash.html         |  26 ++
 .../math-block-container-child-crash.html          |  14 +
 .../crashtests/orthogonal-replaced-crash.html      |  11 +
 .../crashtests/pseudo-container-crash.html         |  14 +
 .../crashtests/svg-layout-root-crash.html          |  22 ++
 .../crashtests/svg-text-crash.html                 |   8 +
 .../crashtests/table-in-columns-000-crash.html     |  17 +
 .../crashtests/table-in-columns-001-crash.html     |  17 +
 .../crashtests/table-in-columns-002-crash.html     |  19 +
 .../crashtests/table-in-columns-003-crash.html     |  19 +
 .../crashtests/table-in-columns-004-crash.html     |  16 +
 .../crashtests/table-in-columns-005-crash.html     |   8 +
 .../custom-layout-container-001.https.html         |  66 ++++
 .../custom-property-style-queries.html             | 337 ++++++++++++++++++
 .../custom-property-style-query-change.html        |  89 +++++
 .../deep-nested-inline-size-containers.html        |  38 ++
 .../container-queries/display-contents.html        |  93 +++++
 .../display-in-container-ref.html                  |  47 +++
 .../container-queries/display-in-container.html    |  69 ++++
 .../container-queries/display-none.html            | 393 +++++++++++++++++++++
 .../fieldset-legend-change-ref.html                |   4 +
 .../container-queries/fieldset-legend-change.html  |  26 ++
 .../font-relative-calc-dynamic.html                |  35 ++
 .../font-relative-units-dynamic.html               | 280 +++++++++++++++
 .../container-queries/font-relative-units.html     | 100 ++++++
 .../fragmented-container-001.html                  |  48 +++
 .../container-queries/get-animations.html          |  34 ++
 .../container-queries/grid-container.html          |  29 ++
 .../container-queries/grid-item-container.html     |  38 ++
 .../css-contain/container-queries/idlharness.html  |  29 ++
 .../iframe-in-container-invalidation.html          |  58 +++
 .../container-queries/iframe-invalidation.html     |  43 +++
 .../container-queries/ineligible-containment.html  |  51 +++
 .../inline-size-and-min-width.html                 |  26 ++
 .../inline-size-bfc-floats-ref.html                |   9 +
 .../container-queries/inline-size-bfc-floats.html  |  47 +++
 .../inline-size-containment-vertical-rl.html       |  38 ++
 .../container-queries/inline-size-containment.html |  37 ++
 .../inner-first-line-non-matching-ref.html         |   3 +
 .../inner-first-line-non-matching.html             |  13 +
 .../container-queries/layout-dependent-focus.html  |  39 ++
 .../container-queries/multicol-container-001.html  |  31 ++
 .../multicol-inside-container.html                 |  28 ++
 .../container-queries/nested-query-containers.html | 125 +++++++
 .../container-queries/never-match-container.html   |  44 +++
 .../orthogonal-wm-container-query.html             |  38 ++
 .../percentage-padding-orthogonal.html             |  66 ++++
 .../container-queries/pseudo-elements-001.html     |  59 ++++
 .../container-queries/pseudo-elements-002-ref.html |  16 +
 .../container-queries/pseudo-elements-002.html     |  76 ++++
 .../container-queries/pseudo-elements-003.html     |  69 ++++
 .../container-queries/pseudo-elements-004.html     |  52 +++
 .../container-queries/pseudo-elements-005.html     |  58 +++
 .../container-queries/pseudo-elements-006.html     |  66 ++++
 .../container-queries/pseudo-elements-007.html     |  49 +++
 .../container-queries/pseudo-elements-008.html     |  59 ++++
 .../container-queries/query-content-box.html       |  80 +++++
 .../container-queries/query-evaluation.html        | 136 +++++++
 .../reattach-container-with-dirty-child.html       |  37 ++
 ...resize-while-content-visibility-hidden-ref.html |   3 +
 .../resize-while-content-visibility-hidden.html    |  53 +++
 .../sibling-layout-dependency.html                 | 134 +++++++
 .../size-container-no-principal-box.html           |  63 ++++
 .../container-queries/size-feature-evaluation.html |  91 +++++
 .../style-change-in-container.html                 |  30 ++
 .../container-queries/style-not-sharing-float.html |  40 +++
 .../container-queries/support/cq-testcommon.js     |   3 +
 .../css-contain/container-queries/support/test.vtt |   4 +
 .../svg-foreignobject-child-container.html         |  38 ++
 .../svg-foreignobject-no-size-container-ref.html   |   4 +
 .../svg-foreignobject-no-size-container.html       |  24 ++
 .../svg-g-no-size-container-ref.html               |   4 +
 .../container-queries/svg-g-no-size-container.html |  23 ++
 .../container-queries/svg-root-size-container.html |  36 ++
 ...able-inside-container-changing-display-ref.html |   4 +
 .../table-inside-container-changing-display.html   |  26 ++
 .../top-layer-dialog-backdrop-ref.html             |   3 +
 .../top-layer-dialog-backdrop.html                 |  20 ++
 .../top-layer-dialog-container.html                |  33 ++
 .../container-queries/top-layer-dialog.html        |  45 +++
 .../container-queries/top-layer-nested-dialog.html |  45 +++
 .../container-queries/transition-scrollbars.html   |  59 ++++
 .../transition-style-change-event-002.html         |  45 +++
 .../transition-style-change-event.html             |  58 +++
 .../container-queries/unsupported-axis.html        | 228 ++++++++++++
 .../container-queries/viewport-units-dynamic.html  |  59 ++++
 .../container-queries/viewport-units.html          |  33 ++
 .../whitespace-update-after-removal.html           |  26 ++
 185 files changed, 9156 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/animation-container-size.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/animation-container-type-dynamic.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/animation-nested-animation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/animation-nested-transition.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/aspect-ratio-feature-evaluation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/at-container-parsing.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/at-container-serialization.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/at-container-style-serialization.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/auto-scrollbars.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/backdrop-invalidation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/calc-evaluation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-001.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-002.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-003.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-004.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-005.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-006.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/change-display-in-container-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/change-display-in-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/chrome-legacy-skip-recalc.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/column-spanner-in-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/conditional-container-status.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-computed.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-for-cue-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-for-cue.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-for-shadow-dom.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-inheritance.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-inner-at-rules.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-inside-multicol-with-table.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-longhand-animation-type.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-name-computed.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-name-invalidation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-name-parsing.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-name-tree-scoped.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-nested.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-parsing.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-selection.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-size-invalidation-after-load.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-size-invalidation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-size-nested-invalidation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-size-shadow-invalidation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-type-computed.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-type-containment.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-type-invalidation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-type-layout-invalidation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-type-parsing.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-animation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-basic.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-computational-independence.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-gradient-invalidation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-gradient-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-gradient.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-in-at-container-dynamic.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-in-at-container-fallback.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-in-at-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-ineligible-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-invalidation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-media-queries.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-selection.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-shadow.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-small-viewport-fallback.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-svglength.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/container-units-typed-om.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/counters-flex-circular.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/counters-in-container-dynamic.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/counters-in-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/counters-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/br-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/canvas-as-container-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1289718-000-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1289718-001-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1346969-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1362391-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-layout-root-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-quotes-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-remove-insert-evaluator-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/columns-in-table-001-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/columns-in-table-002-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/container-in-canvas-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/container-type-change-chrome-legacy-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/dirty-rowgroup-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-000-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-001-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-002-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-003-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/focus-inside-content-visibility-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/force-sibling-style-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-000-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-001-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-002-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-003-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/iframe-init-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/inline-multicol-inside-container-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/inline-with-columns-000-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/inline-with-columns-001-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/input-column-group-container-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/input-placeholder-inline-size-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/marker-gcs-after-disconnect-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/math-block-container-child-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/orthogonal-replaced-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/pseudo-container-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/svg-layout-root-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/svg-text-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-000-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-001-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-002-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-003-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-004-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-005-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/custom-layout-container-001.https.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-queries.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-query-change.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/deep-nested-inline-size-containers.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/display-contents.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/display-in-container-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/display-in-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/display-none.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/fieldset-legend-change-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/fieldset-legend-change.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/font-relative-calc-dynamic.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/font-relative-units-dynamic.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/font-relative-units.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/fragmented-container-001.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/get-animations.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/grid-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/grid-item-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/idlharness.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/iframe-in-container-invalidation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/iframe-invalidation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/ineligible-containment.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/inline-size-and-min-width.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/inline-size-bfc-floats-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/inline-size-bfc-floats.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/inline-size-containment-vertical-rl.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/inline-size-containment.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/inner-first-line-non-matching-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/inner-first-line-non-matching.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/layout-dependent-focus.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/multicol-container-001.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/multicol-inside-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/nested-query-containers.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/never-match-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/orthogonal-wm-container-query.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/percentage-padding-orthogonal.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-001.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-002.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-003.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-004.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-005.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-006.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-007.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-008.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/query-content-box.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/query-evaluation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/reattach-container-with-dirty-child.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/resize-while-content-visibility-hidden-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/resize-while-content-visibility-hidden.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/sibling-layout-dependency.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/size-container-no-principal-box.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/size-feature-evaluation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/style-change-in-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/style-not-sharing-float.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/support/cq-testcommon.js
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/support/test.vtt
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/svg-foreignobject-child-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/svg-foreignobject-no-size-container-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/svg-foreignobject-no-size-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/svg-g-no-size-container-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/svg-g-no-size-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/svg-root-size-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/table-inside-container-changing-display-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/table-inside-container-changing-display.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog-backdrop-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog-backdrop.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog-container.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/top-layer-nested-dialog.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/transition-scrollbars.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/transition-style-change-event-002.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/transition-style-change-event.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/unsupported-axis.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/viewport-units-dynamic.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/viewport-units.html
 create mode 100644 testing/web-platform/tests/css/css-contain/container-queries/whitespace-update-after-removal.html

(limited to 'testing/web-platform/tests/css/css-contain/container-queries')

diff --git a/testing/web-platform/tests/css/css-contain/container-queries/animation-container-size.html b/testing/web-platform/tests/css/css-contain/container-queries/animation-container-size.html
new file mode 100644
index 0000000000..fefb721cbc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/animation-container-size.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<title>Container Queries - Animating container size</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  @keyframes anim {
+    from { width: 200px; }
+    to { width: 100px; }
+  }
+  #container {
+    container-type: inline-size;
+    animation: anim 1s linear paused;
+  }
+  #target {
+    background-color: green;
+  }
+
+  @container (width: 200px) {
+    #target {
+      background-color: blue;
+    }
+  }
+</style>
+<div id=container>
+  <div id=target>
+    Test
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 0, 255)');
+
+    assert_equals(container.getAnimations().length, 1);
+    let animation = container.getAnimations()[0];
+    animation.currentTime = 500;
+
+    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)');
+  }, 'Animation affects container query evaluation');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/animation-container-type-dynamic.html b/testing/web-platform/tests/css/css-contain/container-queries/animation-container-type-dynamic.html
new file mode 100644
index 0000000000..835e8e1be1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/animation-container-type-dynamic.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<title>Container Queries - Animated container creating new containers</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  @keyframes anim {
+    from { width: 200px; }
+    to { width: 300px; }
+  }
+  #container {
+    container-type: inline-size;
+    animation: anim 1s linear paused;
+  }
+  #target {
+    background-color: red;
+  }
+
+  #intermediate {
+    width: 100px;
+  }
+
+  @container (min-width: 250px) {
+    #intermediate {
+      container-type: inline-size;
+    }
+  }
+
+  @container (width: 200px) {
+    #target {
+      background-color: blue;
+    }
+  }
+
+  @container (width: 100px) {
+    /* Initially queries  #container, but later queries #intermediate, when
+       the other container query starts matching. */
+    #target {
+      background-color: green;
+    }
+  }
+</style>
+<div id=container>
+  <div id=intermediate>
+    <div id=target>
+      Test
+    </div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 0, 255)');
+
+    assert_equals(container.getAnimations().length, 1);
+    let animation = container.getAnimations()[0];
+
+    animation.currentTime = 600;
+    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)');
+
+    // Verify that #intermediate is queried by changing its width. The container
+    // query will stop matching if #intermediate is the queried container.
+    intermediate.style.width = '110px';
+    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(255, 0, 0)');
+  }, 'Animated container creating new container');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/animation-nested-animation.html b/testing/web-platform/tests/css/css-contain/container-queries/animation-nested-animation.html
new file mode 100644
index 0000000000..7f1ae854ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/animation-nested-animation.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>Container Queries - Animations within animating container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  @keyframes outer {
+    from { width: 100px; }
+    to { width: 300px; }
+  }
+  @keyframes inner {
+    from { background-color: blue; }
+    to { background-color: yellow; }
+  }
+  #container {
+    container-type: inline-size;
+    animation: outer 1s linear paused;
+  }
+  #target {
+    background-color: green;
+  }
+
+  @container (min-width: 200px) {
+    #target {
+      animation: inner 1s linear paused;
+    }
+  }
+</style>
+<div id=container>
+  <div id=target>
+    Test
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)');
+
+    assert_equals(container.getAnimations().length, 1);
+    let animation = container.getAnimations()[0];
+    animation.currentTime = 600;
+
+    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 0, 255)');
+  }, 'Animated container can create inner animation');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/animation-nested-transition.html b/testing/web-platform/tests/css/css-contain/container-queries/animation-nested-transition.html
new file mode 100644
index 0000000000..934f995a97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/animation-nested-transition.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<title>Container Queries - Animated container with inner transition</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  @keyframes outer {
+    from { width: 100px; }
+    to { width: 300px; }
+  }
+  #container {
+    container-type: inline-size;
+    animation: outer 1s linear paused;
+  }
+  #target {
+    background-color: rgb(100, 100, 100);
+  }
+
+  @container (min-width: 200px) {
+    #target {
+      transition: background-color 100s steps(2, start);
+      background-color: rgb(200, 200, 200);
+    }
+  }
+</style>
+<div id=container>
+  <div id=target>
+    Test
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(100, 100, 100)');
+
+    assert_equals(container.getAnimations().length, 1);
+    let animation = container.getAnimations()[0];
+    animation.currentTime = 600;
+
+    assert_equals(getComputedStyle(target).backgroundColor, 'rgb(150, 150, 150)');
+  }, 'Animated container size triggers transition');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/aspect-ratio-feature-evaluation.html b/testing/web-platform/tests/css/css-contain/container-queries/aspect-ratio-feature-evaluation.html
new file mode 100644
index 0000000000..843f34732b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/aspect-ratio-feature-evaluation.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<title>@container queries with aspect-ratio</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#aspect-ratio">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  .container {
+    width: 100px;
+    height: 100px;
+  }
+  #inline-size { container-type: inline-size; }
+  #size { container-type: size; }
+  span { color: red }
+  @container (min-aspect-ratio: 1 / 1000) {
+    span { color: green; }
+  }
+  @container (min-aspect-ratio: 2 / 1) {
+    span { background-color: lime; }
+  }
+</style>
+<div id="inline-size" class="container"><span></span></div>
+<div id="size" class="container"><span></span></div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const red = "rgb(255, 0, 0)";
+  const green = "rgb(0, 128, 0)";
+  const lime = "rgb(0, 255, 0)";
+  const transparent = "rgba(0, 0, 0, 0)";
+
+  const inline_span = document.querySelector("#inline-size > span");
+  const size_span = document.querySelector("#size > span");
+
+  test(() => {
+    assert_equals(getComputedStyle(inline_span).color, red,
+                  "Should not match for inline-size containment");
+    assert_equals(getComputedStyle(size_span).color, green,
+                  "Should match for block-size containment");
+    assert_equals(getComputedStyle(size_span).backgroundColor, transparent,
+                  "Square should not match 2/1 min-ratio");
+  }, "@container queries with aspect-ratio and size containment");
+
+  test(() => {
+    document.querySelector("#size").style.width = "200px";
+    assert_equals(getComputedStyle(size_span).backgroundColor, lime,
+                  "Should match 2/1 min-ratio");
+  }, "@container query with aspect-ratio change after resize");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/at-container-parsing.html b/testing/web-platform/tests/css/css-contain/container-queries/at-container-parsing.html
new file mode 100644
index 0000000000..2fbd4b8b6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/at-container-parsing.html
@@ -0,0 +1,206 @@
+<!doctype html>
+<title>@container: parsing</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-rule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<div style="container-name:name;container-type:size; width:100px; height:100px">
+  <main id=main></main>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  function cleanup_main() {
+    while (main.firstChild)
+      main.firstChild.remove();
+  }
+
+  function set_style(text) {
+    let style = document.createElement('style');
+    style.innerText = text;
+    main.append(style);
+    return style;
+  }
+
+  function test_rule_valid(query) {
+    test(t => {
+      t.add_cleanup(cleanup_main);
+      let style = set_style(`@container ${query} {}`);
+      assert_equals(style.sheet.rules.length, 1);
+    }, query);
+  }
+
+  function test_condition_invalid(condition) {
+    test(t => {
+      t.add_cleanup(cleanup_main);
+      let style = set_style(`@container name ${condition} {}`);
+      assert_equals(style.sheet.rules.length, 0);
+    }, condition);
+  }
+
+  // Tests that 1) the condition parses, and 2) is either "unknown" or not, as
+  // specified.
+  function test_condition_valid(condition, unknown) {
+    test(t => {
+      t.add_cleanup(cleanup_main);
+      let style = set_style(`
+        @container name ${condition} {}
+        @container name (${condition}) or (not (${condition})) { main { --match:true; } }
+      `);
+      assert_equals(style.sheet.rules.length, 2);
+      const expected = unknown ? '' : 'true';
+      assert_equals(getComputedStyle(main).getPropertyValue('--match'), expected);
+    }, condition);
+  }
+
+  function test_condition_known(condition) {
+    test_condition_valid(condition, false /* unknown */);
+  }
+
+  function test_condition_unknown(condition) {
+    test_condition_valid(condition, true /* unknown */);
+  }
+
+  function test_container_name_invalid(container_name) {
+    test(t => {
+      t.add_cleanup(cleanup_main);
+      let style = set_style(`@container ${container_name} not (width) {}`);
+      assert_equals(style.sheet.rules.length, 0);
+    }, `Container name: ${container_name}`);
+  }
+
+  function test_container_name_valid(container_name) {
+    test(t => {
+      t.add_cleanup(cleanup_main);
+      let style = set_style(`@container ${container_name} not (width) {}`);
+      assert_equals(style.sheet.rules.length, 1);
+    }, `Container name: ${container_name}`);
+  }
+
+  test_condition_known('(width)');
+  test_condition_known('(min-width: 0px)');
+  test_condition_known('(max-width: 0px)');
+  test_condition_known('(height)');
+  test_condition_known('(min-height: 0px)');
+  test_condition_known('(max-height: 0px)');
+  test_condition_known('(aspect-ratio)');
+  test_condition_known('(min-aspect-ratio: 1/2)');
+  test_condition_known('(max-aspect-ratio: 1/2)');
+  test_condition_known('(orientation: portrait)');
+  test_condition_known('(inline-size)');
+  test_condition_known('(min-inline-size: 0px)');
+  test_condition_known('(max-inline-size: 0px)');
+  test_condition_known('(block-size)');
+  test_condition_known('(min-block-size: 0px)');
+  test_condition_known('(max-block-size: 0px)');
+
+  test_condition_known('(width: 100px)');
+  test_condition_known('((width: 100px))');
+  test_condition_known('(not (width: 100px))');
+  test_condition_known('((width: 100px) and (height: 100px))');
+  test_condition_known('(((width: 40px) or (width: 50px)) and (height: 100px))');
+  test_condition_known('((width: 100px) and ((height: 40px) or (height: 50px)))');
+  test_condition_known('(((width: 40px) and (height: 50px)) or (height: 100px))');
+  test_condition_known('((width: 50px) or ((width: 40px) and (height: 50px)))');
+  test_condition_known('((width: 100px) and (not (height: 100px)))');
+  test_condition_known('(width < 100px)');
+  test_condition_known('(width <= 100px)');
+  test_condition_known('(width = 100px)');
+  test_condition_known('(width > 100px)');
+  test_condition_known('(width >= 100px)');
+  test_condition_known('(100px < width)');
+  test_condition_known('(100px <= width)');
+  test_condition_known('(100px = width)');
+  test_condition_known('(100px > width)');
+  test_condition_known('(100px >= width)');
+  test_condition_known('(100px < width < 200px)');
+  test_condition_known('(100px < width <= 200px)');
+  test_condition_known('(100px <= width < 200px)');
+  test_condition_known('(100px > width > 200px)');
+  test_condition_known('(100px > width >= 200px)');
+  test_condition_known('(100px >= width > 200px)');
+
+  test_condition_known('(width: calc(10px))');
+  test_condition_known('(width: calc(10em))');
+  test_condition_known('(width: calc(10px + 10em))');
+  test_condition_known('(width < calc(10px + 10em))');
+  test_condition_known('(width < max(10px, 10em))');
+  test_condition_known('(calc(10px + 10em) < width)');
+  test_condition_known('(calc(10px + 10em) < width < max(30px, 30em))');
+  test_condition_known('(width: 100px) and (height: 100px)');
+  test_condition_known('(width: 100px) or (height: 100px)');
+  test_condition_known('not (width: 100px)');
+
+  test_condition_unknown('foo(width)');
+  test_condition_unknown('size(width)');
+  test_condition_unknown('(asdf)');
+  test_condition_unknown('(resolution > 100dpi)');
+  test_condition_unknown('(resolution: 150dpi)');
+  test_condition_unknown('(color)');
+  test_condition_unknown('(min-color: 1)');
+  test_condition_unknown('(color-index >= 1)');
+  test_condition_unknown('size(grid)');
+  test_condition_unknown('(grid)');
+  test_condition_unknown('(width == 100px)');
+  test_condition_unknown('(100px == width)');
+  test_condition_unknown('(100px = width = 200px)');
+  test_condition_unknown('(100px < width > 200px)');
+  test_condition_unknown('(100px <= width >= 200px)');
+  test_condition_unknown('(100px <= width > 200px)');
+  test_condition_unknown('(100px < width >= 200px)');
+  test_condition_unknown('(100px : width : 200px)');
+
+  test_condition_invalid('screen');
+  test_condition_invalid('print');
+  test_condition_invalid('not print');
+  test_condition_invalid('only print');
+  test_condition_invalid('screen and (width: 100px)');
+  test_condition_invalid('screen or (width: 100px)');
+  test_condition_invalid('not screen and (width: 100px)');
+  test_condition_invalid('not screen or (width: 100px)');
+  test_condition_invalid('(width: 100px), (height: 100px)');
+  test_condition_invalid('foo (width: 100px)');
+
+  test_rule_valid('name not (width <= 500px)');
+  test_rule_valid('not (width <= 500px)');
+
+  test_container_name_valid('foo');
+  test_container_name_valid(' foo');
+  test_container_name_valid(' foo ');
+  test_container_name_valid('normal');
+  test_container_name_valid('Normal');
+  test_container_name_valid('auto');
+  test_container_name_valid('Auto');
+
+  test_container_name_invalid('foo foo');
+  test_container_name_invalid('1px');
+  test_container_name_invalid('50gil');
+  test_container_name_invalid('name(foo)');
+  test_container_name_invalid('type(inline-size)');
+  test_container_name_invalid('"foo"');
+  test_container_name_invalid('"inherit"');
+  test_container_name_invalid('inherit');
+  test_container_name_invalid('INITIAL');
+  test_container_name_invalid('Unset');
+  test_container_name_invalid('deFAULT');
+  test_container_name_invalid('none');
+  test_container_name_invalid('None');
+  test_container_name_invalid('and');
+  test_container_name_invalid('or');
+  test_container_name_invalid('not');
+  test_container_name_invalid('And');
+  test_container_name_invalid('oR');
+  test_container_name_invalid('nOt');
+
+  test_condition_known('style(--my-prop: foo)');
+  test_condition_known('style(--my-prop: foo - bar ())');
+  test_condition_known('style(not ((--foo: calc(10px + 2em)) and ((--foo: url(x)))))');
+  test_condition_known('style((--foo: bar) or (--bar: 10px))');
+  test_condition_known('style(--my-prop:)');
+  test_condition_known('style(--my-prop: )');
+  test_condition_known('style(--foo: bar !important)');
+
+  test_condition_unknown('style(--foo: bar;)');
+  test_condition_unknown('style(--foo)');
+  test_condition_unknown('style(style(--foo: bar))');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/at-container-serialization.html b/testing/web-platform/tests/css/css-contain/container-queries/at-container-serialization.html
new file mode 100644
index 0000000000..141062a8d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/at-container-serialization.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<title>CSS Container Queries: @container serialization</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-rule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style id="testSheet">
+  @container (width=100px) {
+    @container \!-name (inline-size > 200px    ) {
+      #id { color: lime }
+    }
+    #id { color: green }
+  }
+  @container (  wiDTh  ) { }
+  @container (width:100px) { }
+  @container (min-width:  100px) { }
+  @container (   MAX-WIDTH:100px  ) { }
+  @container (width > 100px) { }
+  @container (width < 100px) { }
+  @container (widTH >= 100px) { }
+  @container (width <= 100px) { }
+  @container (10px < width < 100px) { }
+  @container (10px <=  width  <=  100px) { }
+  @container (100px>WIDTH>10px) { }
+  @container (  100px >= width >= 10px  ) { }
+  @container (calc(1em + 1px) >= width >= max(10em, 10px)) { }
+</style>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  let rules = testSheet.sheet.cssRules;
+
+  test(() => {
+    assert_equals(rules.length, 14);
+    assert_equals(rules[0].cssRules.length, 2);
+
+    assert_equals(rules[0].conditionText, "(width = 100px)");
+    assert_equals(rules[0].cssRules[0].conditionText, "\\!-name (inline-size > 200px)");
+  }, "Serialization of conditionText");
+
+  test(() => {
+    assert_equals(rules[0].cssRules[0].cssText, "@container \\!-name (inline-size > 200px) {\n  #id { color: lime; }\n}");
+  }, "Serialization of inner @container rule");
+
+  test(() => {
+    assert_equals(rules[0].cssText, "@container (width = 100px) {\n  @container \\!-name (inline-size > 200px) {\n  #id { color: lime; }\n}\n  #id { color: green; }\n}");
+  }, "Serialization of nested @container rule");
+
+  test(() => {
+    assert_equals(rules[1].conditionText, "(width)");
+  }, "Serialization of boolean condition syntax");
+
+  test(() => {
+    assert_equals(rules[2].conditionText, "(width: 100px)");
+    assert_equals(rules[3].conditionText, "(min-width: 100px)");
+    assert_equals(rules[4].conditionText, "(max-width: 100px)");
+  }, "Serialization of colon condition syntax");
+
+  test(() => {
+    assert_equals(rules[5].conditionText, "(width > 100px)");
+    assert_equals(rules[6].conditionText, "(width < 100px)");
+    assert_equals(rules[7].conditionText, "(width >= 100px)");
+    assert_equals(rules[8].conditionText, "(width <= 100px)");
+    assert_equals(rules[9].conditionText, "(10px < width < 100px)");
+    assert_equals(rules[10].conditionText, "(10px <= width <= 100px)");
+    assert_equals(rules[11].conditionText, "(100px > width > 10px)");
+    assert_equals(rules[12].conditionText, "(100px >= width >= 10px)");
+  }, "Serialization of range condition syntax");
+
+  test(() => {
+    assert_equals(rules[13].conditionText, "(calc(1em + 1px) >= width >= max(10em, 10px))");
+  }, "Serialization of calc()");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/at-container-style-serialization.html b/testing/web-platform/tests/css/css-contain/container-queries/at-container-style-serialization.html
new file mode 100644
index 0000000000..a498c4a7e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/at-container-style-serialization.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<title>CSS Container Queries: style() conditionText serialization</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-rule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style id="testSheet">
+  @container style(        --foo:bar) { }
+  @container STyle(--foo:    ) { }
+  @container STyle(--foo:) { }
+  @container STyle(--foo) { }
+  @container  style(  ( --FOO: BAR) OR ( prop: val  ) ) { }
+  @container style (--foo: bar) { }
+</style>
+<script>
+  setup(() => {
+    assert_implements_container_queries();
+    assert_equals(testSheet.sheet.cssRules.length, 6);
+  });
+
+  const tests = [
+      ["style(--foo: bar)", "Normalize spaces"],
+      ["style(--foo: )", "Empty declaration value - spaces"],
+      ["style(--foo: )", "Empty declaration value"],
+      ["STyle(--foo)", "Missing declaration value"],
+      ["style((--FOO: BAR) or ( prop: val ))", "Unknown CSS property after 'or'"],
+      ["(--foo: bar)", "Not a style function with space before '('"]
+  ].map((e, i) => [testSheet.sheet.cssRules[i], ...e]);
+
+  tests.forEach((t) => {
+    test(() => assert_equals(t[0].conditionText, t[1]), t[2]);
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/auto-scrollbars.html b/testing/web-platform/tests/css/css-contain/container-queries/auto-scrollbars.html
new file mode 100644
index 0000000000..9cf797186c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/auto-scrollbars.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<title>CSS Container Queries Test: scrollbar stability for @container queries and overflow:auto</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollbar-layout">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #scroller {
+    height: 100px;
+    width: 100px;
+    overflow-y: auto;
+  }
+  #container {
+    container-type: inline-size;
+  }
+  #inner {
+    height: 100px;
+    border-bottom: 1px solid red;
+  }
+  @container (max-width: 99px) {
+    #inner {
+      height: 50px;
+    }
+  }
+</style>
+<div id="precondition" style="width:100px;height:100px;overflow:scroll"></div>
+<div id="scroller">
+  <div id="container">
+    <div id="inner"></div>
+  </div>
+</div>
+<script>
+  setup(() => {
+    assert_implements_container_queries();
+    assert_implements_optional(precondition.clientWidth < 100,
+                               "Tests do not work with overlay scrollbars");
+  });
+
+  test(() => {
+    assert_less_than(scroller.clientWidth, 100, "Expects a vertical scrollbar");
+    assert_equals(getComputedStyle(inner).height, "50px",
+                  "Layout with a scrollbar means the container query applies");
+  }, "Initial layout - expecting a scrollbar without overflowing content instead of overflowing content without a scrollbar");
+
+  test(() => {
+    inner.style.borderBottomWidth = "2px";
+    assert_less_than(scroller.clientWidth, 100, "Expects a vertical scrollbar");
+    assert_equals(getComputedStyle(inner).height, "50px",
+                  "Layout with a scrollbar means the container query applies");
+  }, "Same result after a reflow");
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/backdrop-invalidation.html b/testing/web-platform/tests/css/css-contain/container-queries/backdrop-invalidation.html
new file mode 100644
index 0000000000..6a59a2f894
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/backdrop-invalidation.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<title>Test that ::backdrop responds to container size changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  :root {
+    color: black;
+  }
+
+  #container {
+    container-type: size;
+    width: 200px;
+    height: 40px;
+  }
+
+  ::backdrop {
+    background-color: black;
+  }
+
+  @container (min-width: 300px) {
+    ::backdrop {
+      background-color: green;
+    }
+  }
+</style>
+<main id=container>
+  <dialog>test</dialog>
+</main>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  let dialog = document.querySelector('dialog');
+
+  test(function() {
+    try {
+      dialog.showModal();
+
+      assert_equals(getComputedStyle(dialog, '::backdrop').backgroundColor, 'rgb(0, 0, 0)');
+
+      container.style.width = '300px';
+      assert_equals(getComputedStyle(dialog, '::backdrop').backgroundColor, 'rgb(0, 128, 0)');
+
+      container.style = '';
+      assert_equals(getComputedStyle(dialog, '::backdrop').backgroundColor, 'rgb(0, 0, 0)');
+    } finally {
+      dialog.close();
+    }
+  }, 'Pseudo-element ::backdrop responds to container size changes');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/calc-evaluation.html b/testing/web-platform/tests/css/css-contain/container-queries/calc-evaluation.html
new file mode 100644
index 0000000000..71a5e23764
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/calc-evaluation.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>CSS Container Queries Test: calc()</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#units">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  :root { font-size: 10px; }
+
+  /* To make output more readable */
+  :root > * { font-size: initial; }
+
+  #container {
+    container-type: size;
+    width: 200px;
+    height: 50px;
+  }
+  @container (width = calc(100px + 10rem)) {
+    #target { color: green; }
+  }
+</style>
+<div id=container>
+  <div id=target></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+  }, 'em relative inline-size');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-001.html b/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-001.html
new file mode 100644
index 0000000000..f904d1fe24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-001.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>CSS Container Queries Test: Canvas as size container for focusable child</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<style>
+  @supports (container-type: size) {
+    canvas:focus-within {
+      border: 50px solid green;
+    }
+    canvas {
+      display: block;
+      width: 100px;
+      height: 100px;
+      box-sizing: border-box;
+      container-type: size;
+    }
+  }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<canvas>
+  <div id="target" tabIndex="1"></div>
+</canvas>
+<script>
+  requestAnimationFrame(()=> {
+    requestAnimationFrame(()=> {
+      target.focus();
+    });
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-002.html b/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-002.html
new file mode 100644
index 0000000000..689feeb5ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-002.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<title>CSS Container Queries Test: Absolute positioned canvas as size container for focusable child</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<style>
+  @supports (container-type: size) {
+    canvas:focus-within {
+      border: 50px solid green;
+    }
+    canvas {
+      display: block;
+      position: absolute;
+      width: 100px;
+      height: 100px;
+      box-sizing: border-box;
+      container-type: size;
+    }
+  }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<canvas>
+  <div id="target" tabIndex="1"></div>
+</canvas>
+<script>
+  requestAnimationFrame(()=> {
+    requestAnimationFrame(()=> {
+      target.focus();
+    });
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-003.html b/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-003.html
new file mode 100644
index 0000000000..74199cc72b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-003.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<title>CSS Container Queries Test: Canvas as size container for focusable child with display</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<style>
+  @supports (container-type: size) {
+    canvas:focus-within {
+      background-color: green;
+    }
+    canvas {
+      display: block;
+      width: 100px;
+      height: 100px;
+      container-type: size;
+    }
+    #target { display: none; }
+    @container (width = 100px) {
+      #target { display: block; }
+    }
+  }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<canvas>
+  <div id="target" tabIndex="1"></div>
+</canvas>
+<script>
+  requestAnimationFrame(()=> {
+    requestAnimationFrame(()=> {
+      target.focus();
+    });
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-004.html b/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-004.html
new file mode 100644
index 0000000000..b23846382b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-004.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<title>CSS Container Queries Test: Absolute positioned canvas as size container for focusable child with display</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<style>
+  @supports (container-type: size) {
+    canvas:focus-within {
+      background-color: green;
+    }
+    canvas {
+      display: block;
+      position: absolute;
+      width: 100px;
+      height: 100px;
+      container-type: size;
+    }
+    #target { display: none; }
+    @container (width = 100px) {
+      #target { display: block; }
+    }
+  }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<canvas>
+  <div id="target" tabIndex="1"></div>
+</canvas>
+<script>
+  requestAnimationFrame(()=> {
+    requestAnimationFrame(()=> {
+      target.focus();
+    });
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-005.html b/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-005.html
new file mode 100644
index 0000000000..9132592434
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-005.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<title>CSS Container Queries Test: Canvas as dynamic size container for focusable child with display</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  canvas {
+    display: block;
+    width: 100px;
+    height: 100px;
+    container-type: size;
+  }
+  #target { display: none; }
+  @container (width = 200px) {
+    #target { display: block; }
+  }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<canvas id="canvas">
+  <div id="target" tabIndex="1"></div>
+</canvas>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    target.focus();
+    assert_not_equals(document.activeElement, target);
+  }, "Initially display:none, not focusable");
+
+  test(() => {
+    canvas.style.width = "200px";
+    target.focus();
+    assert_equals(document.activeElement, target);
+  }, "Focusable after container size change");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-006.html b/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-006.html
new file mode 100644
index 0000000000..02dbce6275
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/canvas-as-container-006.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<title>CSS Container Queries Test: Absolute positioned canvas as dynamic size container for focusable child with display</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  canvas {
+    display: block;
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    container-type: size;
+  }
+  #target { display: none; }
+  @container (width = 200px) {
+    #target { display: block; }
+  }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<canvas id="canvas">
+  <div id="target" tabIndex="1"></div>
+</canvas>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    target.focus();
+    assert_not_equals(document.activeElement, target);
+  }, "Initially display:none, not focusable");
+
+  test(() => {
+    canvas.style.width = "200px";
+    target.focus();
+    assert_equals(document.activeElement, target);
+  }, "Focusable after container size change");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/change-display-in-container-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/change-display-in-container-ref.html
new file mode 100644
index 0000000000..8dd3b8b2c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/change-display-in-container-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<p>You should see the word PASS below.</p>
+PASS
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/change-display-in-container.html b/testing/web-platform/tests/css/css-contain/container-queries/change-display-in-container.html
new file mode 100644
index 0000000000..8c58d22b7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/change-display-in-container.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<title>CSS Container Queries Test: Change display and box inside a container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="match" href="change-display-in-container-ref.html">
+<style>
+  .fail { display: inline; }
+  .pass { display: none; }
+  #container { container-type: size; width: 100px; }
+  @container (min-width: 200px) {
+    .fail { display: none; }
+    .pass { display: inline; }
+  }
+</style>
+<p>You should see the word PASS below.</p>
+<div id="container">
+  <span>
+    <span class="fail">FAIL</span>
+  </span>
+  <span>
+    <span class="pass">PASS</span>
+    <span class="fail">FAIL</span>
+  </span>
+</div>
+<script>
+  container.offsetTop;
+  container.style.width = "auto";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/chrome-legacy-skip-recalc.html b/testing/web-platform/tests/css/css-contain/container-queries/chrome-legacy-skip-recalc.html
new file mode 100644
index 0000000000..b86a4091a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/chrome-legacy-skip-recalc.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<title>CSS Container Queries Test: Chrome legacy layout skipping style recalc</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://crbug.com/1288879">
+<link rel="match" href="/css/reference/pass_if_pass_below.html">
+<style>
+  #container {
+    container-type: inline-size;
+  }
+  #multicol {
+    column-count: 1;
+  }
+
+  @supports not (container-type: inline-size) {
+    #container { display: none }
+  }
+</style>
+<p>Test passes if there is the word "PASS" below.</p>
+<div id="container"><span>PASS</span></div>
+<span id="multicol"><table></table></span>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/column-spanner-in-container.html b/testing/web-platform/tests/css/css-contain/container-queries/column-spanner-in-container.html
new file mode 100644
index 0000000000..d494e28504
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/column-spanner-in-container.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<title>CSS Container Queries Test: Column-spanner depending on container in column</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #multicol {
+    container-type: inline-size;
+    width: 600px;
+    columns: 2;
+    column-gap: 0;
+    height: 200px;
+  }
+  #spanner { height: 100px; }
+  @container (width = 600px) {
+    #spanner {
+      column-span: all;
+    }
+  }
+</style>
+<div id="multicol">
+  <div id="spanner"></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(spanner).width, "600px");
+  }, "#spanner matching container with column-width 300px, getting column-span:all");
+
+  test(() => {
+    multicol.style.width = "500px";
+    assert_equals(getComputedStyle(spanner).width, "250px");
+  }, "Reducing #multicol width means #spanner no longer gets column-span:all");
+
+  test(() => {
+    multicol.style.width = "";
+    assert_equals(getComputedStyle(spanner).width, "600px");
+  }, "Back to matching 300px and column-span:all");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/conditional-container-status.html b/testing/web-platform/tests/css/css-contain/container-queries/conditional-container-status.html
new file mode 100644
index 0000000000..e9762f9323
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/conditional-container-status.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<title>Conditionally removing container status</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  .parent { width: 300px; }
+  .child { width: 100px; }
+  .parent, .child { container-type: inline-size; }
+  @container (min-width: 200px) {
+    .child { container-type: initial; }
+    .grandchild { border: 3px solid green }
+  }
+</style>
+<div class="parent">
+  <div class="child">
+    <div class="grandchild">You should see a green border around this text</div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(function() {
+    let s = getComputedStyle(document.querySelector('.grandchild'));
+    assert_equals(s.getPropertyValue('border-color'), 'rgb(0, 128, 0)');
+  }, 'Conditionally applying container-type:initial');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-computed.html b/testing/web-platform/tests/css/css-contain/container-queries/container-computed.html
new file mode 100644
index 0000000000..2be304481b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-computed.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Computed values of container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-name">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<div id="target"></div>
+<script>
+setup(() => assert_implements_container_queries());
+
+test_computed_value('container', 'initial', 'none');
+test_computed_value('container', 'inherit', 'none');
+test_computed_value('container', 'unset', 'none');
+test_computed_value('container', 'none / inline-size');
+test_computed_value('container', 'none / size');
+test_computed_value('container', 'inline-size / inline-size');
+test_computed_value('container', 'block-size / size');
+test_computed_value('container', 'foo / inline-size');
+test_computed_value('container', 'foo /inline-size', 'foo / inline-size');
+test_computed_value('container', 'foo/ inline-size', 'foo / inline-size');
+test_computed_value('container', 'foo/inline-size', 'foo / inline-size');
+test_computed_value('container', 'FoO / size');
+test_computed_value('container', 'foo bar / size', 'foo bar / size');
+test_computed_value('container', 'foo / normal', 'foo');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-for-cue-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/container-for-cue-ref.html
new file mode 100644
index 0000000000..48b2622363
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-for-cue-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html class="reftest-wait">
+<head>
+  <title>CSS Test Reference</title>
+  <script src="/common/reftest-wait.js"></script>
+  <style>
+    video {
+      contain: size;
+      width: 200px;
+      height: 200px;
+    }
+    video::cue { background-color: green }
+    video::cue(b) { color: lime }
+  </style>
+</head>
+<body>
+  <video autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+    <track default src="support/test.vtt">
+    <source src="/media/white.webm" type="video/webm">
+    <source src="/media/white.mp4" type="video/mp4">
+  </video>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-for-cue.html b/testing/web-platform/tests/css/css-contain/container-queries/container-for-cue.html
new file mode 100644
index 0000000000..f53d161db0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-for-cue.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html class="reftest-wait">
+<head>
+  <title>CSS Container Queries Test: Container for pseudo elements</title>
+  <link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+  <link rel="match" href="container-for-cue-ref.html">
+  <script src="/common/reftest-wait.js"></script>
+  <style>
+    video {
+      container-type: size;
+      width: 200px;
+      height: 200px;
+    }
+    @container (width = 200px) {
+      video::cue { background-color: green }
+      video::cue(b) { color: lime }
+    }
+  </style>
+</head>
+<body>
+  <video autoplay onplaying="this.onplaying = null; this.pause(); takeScreenshot();">
+    <source src="/media/white.webm" type="video/webm">
+    <source src="/media/white.mp4" type="video/mp4">
+    <track default src="support/test.vtt">
+  </video>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-for-shadow-dom.html b/testing/web-platform/tests/css/css-contain/container-queries/container-for-shadow-dom.html
new file mode 100644
index 0000000000..9328060e27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-for-shadow-dom.html
@@ -0,0 +1,345 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Container Queries Test: query container for Shadow DOM</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #inclusive-ancestor-across-root,
+  #inclusive-ancestor-skip-slotting,
+  #inclusive-ancestor-slotted,
+  #inclusive-ancestor-host,
+  #inclusive-ancestor-part,
+  #inclusive-ancestor-slotted-before,
+  #inclusive-ancestor-host-before,
+  #inclusive-ancestor-part-before,
+  #inclusive-ancestor-inner-part,
+  #inclusive-ancestor-slot-fallback,
+  #inner-scope-host-part {
+    width: 400px;
+    container-type: inline-size;
+  }
+</style>
+
+<div id="inclusive-ancestor-across-root">
+  <div>
+    <template shadowroot="open">
+      <style>
+        @container (width = 400px) {
+          #t1 { color: green; }
+        }
+      </style>
+      <div id="t1"></div>
+    </template>
+  </div>
+</div>
+
+<div id="inclusive-ancestor-skip-slotting">
+  <div>
+    <template shadowroot="open">
+      <style>
+        div {
+          width: 200px;
+          container-type: inline-size;
+        }
+      </style>
+      <div>
+        <slot></slot>
+      </div>
+    </template>
+    <style>
+      @container (width = 400px) {
+        #t2 { color: green; }
+      }
+    </style>
+    <div id="t2"></div>
+  </div>
+</div>
+
+<div id="inclusive-ancestor-slotted">
+  <div>
+    <template shadowroot="open">
+      <style>
+        slot {
+          display: block;
+          width: 200px;
+          container-type: inline-size;
+        }
+        @container (width = 200px) {
+          ::slotted(#t3) { color: green; }
+        }
+      </style>
+      <slot></slot>
+    </template>
+    <div id="t3"></div>
+  </div>
+</div>
+
+<div id="inclusive-ancestor-host">
+  <div id="t4">
+    <template shadowroot="open">
+      <style>
+        @container (width = 400px) {
+          :host(#t4) { color: green; }
+        }
+      </style>
+    </template>
+  </div>
+</div>
+
+<div id="inclusive-ancestor-part">
+  <div>
+    <template shadowroot="open">
+      <style>
+        div {
+          width: 200px;
+          container-type: inline-size;
+        }
+      </style>
+      <div>
+        <span id="t5" part="part"></span>
+      </div>
+    </template>
+    <style>
+      @container (width = 400px) {
+        #inclusive-ancestor-part > div::part(part) { color: green; }
+      }
+    </style>
+  </div>
+</div>
+
+<div id="inclusive-ancestor-slotted-before">
+  <div>
+    <template shadowroot="open">
+      <style>
+        slot {
+          display: block;
+          width: 200px;
+          container-type: inline-size;
+        }
+        @container (width = 200px) {
+          ::slotted(#t6)::before {
+            content: "X";
+            color: green;
+          }
+        }
+      </style>
+      <slot></slot>
+    </template>
+    <style>
+      #t6 {
+        width: 400px;
+        container-type: inline-size;
+      }
+    </style>
+    <div id="t6"></div>
+  </div>
+</div>
+
+<div id="inclusive-ancestor-host-before">
+  <div id="t7">
+    <template shadowroot="open">
+      <style>
+        :host {
+          width: 200px;
+          container-type: inline-size;
+        }
+        @container (width = 200px) {
+          :host(#t7)::before {
+            content: "X";
+            color: green;
+          }
+        }
+      </style>
+    </template>
+  </div>
+</div>
+
+<div id="inclusive-ancestor-part-before">
+  <style>
+    @container (width = 400px) {
+      #inclusive-ancestor-part-before > div::part(part)::before {
+        content: "X";
+        color: green;
+      }
+    }
+  </style>
+  <div>
+    <template shadowroot="open">
+      <style>
+        div {
+          width: 200px;
+          container-type: inline-size;
+        }
+      </style>
+      <div>
+        <span id="t8" part="part"></span>
+      </div>
+    </template>
+  </div>
+</div>
+
+<div id="inclusive-ancestor-inner-part">
+  <style>
+    @container (width = 400px) {
+      #inclusive-ancestor-inner-part > div::part(inner-part) { color: green; }
+    }
+  </style>
+  <div>
+    <template shadowroot="open">
+      <style>
+        div {
+          width: 200px;
+          container-type: inline-size;
+        }
+      </style>
+      <div exportparts="inner-part">
+        <template shadowroot="open">
+          <style>
+            div {
+              width: 200px;
+              container-type: inline-size;
+            }
+          </style>
+          <div>
+            <span id="t9" part="inner-part"></span>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</div>
+
+<div id="inclusive-ancestor-slot-fallback">
+  <div><template shadowroot="open">
+    <style>
+      div {
+        width: 200px;
+        container-type: inline-size;
+      }
+      @container (width = 200px) {
+        #t10 { color: green; }
+      }
+    </style>
+    <div>
+      <slot><span id="t10"></span></slot>
+    </div>
+  </template></div>
+</div>
+
+<div id="no-container-for-part">
+  <div>
+    <template shadowroot="open">
+      <style>
+        div {
+          width: 200px;
+          container-type: inline-size;
+        }
+        #t11 { color: green; }
+      </style>
+      <div>
+        <span id="t11" part="part"></span>
+      </div>
+    </template>
+    <style>
+      @container (width = 200px) {
+        #no-container-for-part > div::part(part) { color: red; }
+      }
+    </style>
+  </div>
+</div>
+
+<div id="inner-scope-host-part">
+  <div>
+    <template shadowroot="open">
+      <style>
+        div {
+          width: 200px;
+          container-type: inline-size;
+        }
+        @container (width = 400px) {
+          :host::part(part) { color: green; }
+        }
+      </style>
+      <div>
+        <span id="t12" part="part"></span>
+      </div>
+    </template>
+    <style>
+    </style>
+  </div>
+</div>
+
+<script>
+  setup(() => {
+    assert_implements_container_queries();
+    polyfill_declarative_shadow_dom(document);
+  });
+
+  const green = "rgb(0, 128, 0)";
+
+  test(() => {
+    const t1 = document.querySelector("#inclusive-ancestor-across-root > div").shadowRoot.querySelector("#t1");
+    assert_equals(getComputedStyle(t1).color, green);
+  }, "Match container in outer tree");
+
+  test(() => {
+    const t2 = document.querySelector("#t2");
+    assert_equals(getComputedStyle(t2).color, green);
+  }, "Match container in same tree, not walking flat tree ancestors");
+
+  test(() => {
+    const t3 = document.querySelector("#t3");
+    assert_equals(getComputedStyle(t3).color, green);
+  }, "Match container in ::slotted selector's originating element tree");
+
+  test(() => {
+    const t4 = document.querySelector("#t4");
+    assert_equals(getComputedStyle(t4).color, green);
+  }, "Match container in outer tree for :host");
+
+  test(() => {
+    const t5 = document.querySelector("#inclusive-ancestor-part > div").shadowRoot.querySelector("#t5");
+    assert_equals(getComputedStyle(t5).color, green);
+  }, "Match container in ::part selector's originating element tree");
+
+  test(() => {
+    const t6 = document.querySelector("#t6");
+    assert_equals(getComputedStyle(t6, "::before").color, green);
+  }, "Match container for ::before in ::slotted selector's originating element tree");
+
+  test(() => {
+    const t7 = document.querySelector("#t7");
+    assert_equals(getComputedStyle(t7, "::before").color, green);
+  }, "Match container in outer tree for :host::before");
+
+  test(() => {
+    const t8 = document.querySelector("#inclusive-ancestor-part-before > div").shadowRoot.querySelector("#t8");
+    assert_equals(getComputedStyle(t8, "::before").color, green);
+  }, "Match container for ::before in ::part selector's originating element tree");
+
+  test(() => {
+    const outerhost = document.querySelector("#inclusive-ancestor-inner-part > div");
+    const innerhost = outerhost.shadowRoot.querySelector("div");
+    const t9 = innerhost.shadowRoot.querySelector("#t9");
+    assert_equals(getComputedStyle(t9).color, green);
+  }, "Match container for ::part selector's originating element tree for exportparts");
+
+  test(() => {
+    const t10 = document.querySelector("#inclusive-ancestor-slot-fallback > div").shadowRoot.querySelector("#t10");
+    assert_equals(getComputedStyle(t10).color, green);
+  }, "Match container for slot light tree child fallback");
+
+  test(() => {
+    const t11 = document.querySelector("#no-container-for-part > div").shadowRoot.querySelector("#t11");
+    assert_equals(getComputedStyle(t11).color, green);
+  }, "Should not match container inside shadow tree for ::part()");
+
+  test(() => {
+    const t12 = document.querySelector("#inner-scope-host-part > div").shadowRoot.querySelector("#t12");
+    assert_equals(getComputedStyle(t12).color, green);
+  }, "A :host::part rule should match containers in the originating element tree");
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-inheritance.html b/testing/web-platform/tests/css/css-contain/container-queries/container-inheritance.html
new file mode 100644
index 0000000000..b333b691fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-inheritance.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Inheritance of container-*</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-name">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/inheritance-testcommon.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+setup(() => assert_implements_container_queries());
+
+assert_not_inherited('container-name', 'none', 'foo');
+assert_not_inherited('container-type', 'normal', 'inline-size');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-inner-at-rules.html b/testing/web-platform/tests/css/css-contain/container-queries/container-inner-at-rules.html
new file mode 100644
index 0000000000..ac18002929
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-inner-at-rules.html
@@ -0,0 +1,196 @@
+<!doctype html>
+<title>@container: inner at-rules</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-rule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container {
+    container-type: size;
+    width: 100px;
+    height: 100px;
+  }
+
+</style>
+<div id=container>
+  <div id=child></div>
+</div>
+
+<script>
+  setup(() => assert_implements_container_queries());
+</script>
+
+<style>
+  @container (width: 100px) {
+    @keyframes anim1 {
+      from { --anim1:true; }
+      to { --anim1:true; }
+    }
+  }
+
+  @container (width: 200px) {
+    @keyframes anim2 {
+      from { --anim2:true; }
+      to { --anim2:true; }
+    }
+  }
+
+  #child { animation: anim1 10s paused, anim2 10s paused; }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--anim1'), 'true');
+    assert_equals(getComputedStyle(child).getPropertyValue('--anim2'), 'true');
+  }, '@keyframes is defined regardless of evaluation');
+</script>
+
+
+<style>
+  @container (width: 100px) {
+    @property --prop1 {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 0px;
+    }
+  }
+
+  @container (width: 200px) {
+    @property --prop2 {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 0px;
+    }
+  }
+
+  #child {
+    font-size: 20px;
+    --prop1:1em;
+    --prop2:2em;
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--prop1'), '20px');
+    assert_equals(getComputedStyle(child).getPropertyValue('--prop2'), '40px');
+  }, '@property is defined regardless of evaluation');
+</script>
+
+
+<style>
+  @container (width: 100px) {
+    @layer a;
+  }
+
+  @container (width: 200px) {
+    @layer b;
+  }
+
+  @layer b {
+    #child { --layer:b; }
+  }
+
+  @layer a {
+    #child { --layer:a; }
+  }
+
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--layer'), 'b');
+  }, '@layer order respected regardless of evaluation');
+</script>
+
+
+<style>
+  @container (width: 100px) {
+    @font-face {
+      font-family: Font1;
+      font-stretch: 50% 200%;
+      src: url(/fonts/Ahem.ttf);
+    }
+  }
+
+  @container (width: 200px) {
+    @font-face {
+      font-family: Font2;
+      font-stretch: 40% 190%;
+      src: url(/fonts/Ahem.ttf);
+    }
+  }
+
+</style>
+<script>
+  promise_test(async (t) => {
+    const fonts1 = await document.fonts.load("20px Font1");
+    assert_not_equals(fonts1[0], undefined);
+    assert_equals(fonts1[0].stretch, "50% 200%");
+
+    const fonts2 = await document.fonts.load("20px Font2");
+    assert_not_equals(fonts2[0], undefined);
+    assert_equals(fonts2[0].stretch, "40% 190%");
+  }, '@font-face is defined regardless of evaluation');
+</script>
+
+
+<style>
+  @container (width: 100px) {
+    /* Assumed to be false */
+    @media (width: 0px) {
+      #child { --media1:true; }
+    }
+    /* Assumed to be true */
+    @media (min-width: 0px) {
+      #child { --media2:true; }
+    }
+  }
+
+  /* Same again, but with failing container query. */
+  @container (width: 200px) {
+    @media (width: 0px) {
+      #child { --media3:true; }
+    }
+    @media (min-width: 0px) {
+      #child { --media4:true; }
+    }
+  }
+
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--media1'), '');
+    assert_equals(getComputedStyle(child).getPropertyValue('--media2'), 'true');
+    assert_equals(getComputedStyle(child).getPropertyValue('--media3'), '');
+    assert_equals(getComputedStyle(child).getPropertyValue('--media4'), '');
+  }, '@media works inside @container');
+</script>
+
+
+<style>
+  @container (width: 100px) {
+    @supports (width: 500kg) {
+      #child { --supports1:true; }
+    }
+    @supports (width: 500px) {
+      #child { --supports2:true; }
+    }
+  }
+
+  /* Same again, but with failing container query. */
+  @container (width: 200px) {
+    @supports (width: 500kg) {
+      #child { --supports3:true; }
+    }
+    @supports (width: 500px) {
+      #child { --supports4:true; }
+    }
+  }
+
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--supports1'), '');
+    assert_equals(getComputedStyle(child).getPropertyValue('--supports2'), 'true');
+    assert_equals(getComputedStyle(child).getPropertyValue('--supports3'), '');
+    assert_equals(getComputedStyle(child).getPropertyValue('--supports4'), '');
+  }, '@supports works inside @container');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-inside-multicol-with-table.html b/testing/web-platform/tests/css/css-contain/container-queries/container-inside-multicol-with-table.html
new file mode 100644
index 0000000000..8688159da3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-inside-multicol-with-table.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<title>CSS Container Queries Test: container inside multicol with table</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #multicol {
+    columns: 2;
+  }
+  .container {
+    container-type: inline-size;
+    width: 100px;
+  }
+  @container (width = 100px) {
+    #t1, #t2 { color: green; }
+  }
+</style>
+<div id="multicol">
+  <div class="container">
+    <div id="t1"></div>
+  </div>
+  <table>
+    <div class="container">
+      <div id="t2"></div>
+    </div>
+  </table>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const green = "rgb(0, 128, 0)";
+
+  test(() => {
+    assert_equals(getComputedStyle(t1).color, green);
+  }, "Matching size container inside table inside multicol");
+
+  test(() => {
+    assert_equals(getComputedStyle(t2).color, green);
+  }, "Matching size container inside multicol with table sibling");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-longhand-animation-type.html b/testing/web-platform/tests/css/css-contain/container-queries/container-longhand-animation-type.html
new file mode 100644
index 0000000000..aded2a3ec8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-longhand-animation-type.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<title>Container Queries - The container longhands are not animatable</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#propdef-container-name">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#propdef-container-type">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  @keyframes anim {
+    from {
+      --ref:PASS;
+      container-name: FAIL;
+      container-type: size;
+    }
+    to {
+      --ref:PASS;
+      container-name: FAIL;
+      container-type: size;
+    }
+  }
+  #container {
+    --ref:FAIL;
+    container-name: PASS;
+    container-type: inline-size;
+    animation: anim 1s linear paused;
+  }
+</style>
+<div id=container>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(container).getPropertyValue('--ref'), 'PASS');
+  }, 'Reference variable is applied');
+
+  test(() => {
+    assert_equals(getComputedStyle(container).getPropertyValue('container-name'), 'PASS');
+  }, 'container-name is not animatable');
+
+  test(() => {
+    assert_equals(getComputedStyle(container).getPropertyValue('container-type'), 'inline-size');
+  }, 'container-type is not animatable');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-name-computed.html b/testing/web-platform/tests/css/css-contain/container-queries/container-name-computed.html
new file mode 100644
index 0000000000..f58d54744e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-name-computed.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Computed values of container-name</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-name">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<div id="target"></div>
+<script>
+setup(() => assert_implements_container_queries());
+
+test_computed_value('container-name', 'initial', 'none');
+test_computed_value('container-name', 'unset', 'none');
+test_computed_value('container-name', 'foo');
+test_computed_value('container-name', 'FoO');
+test_computed_value('container-name', 'foo bar');
+test_computed_value('container-name', 'bar foo');
+test_computed_value('container-name', 'foo foo bar');
+test_computed_value('container-name', 'foo bar foo');
+test_computed_value('container-name', 'bar foo foo');
+test_computed_value('container-name', '\\!escaped');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-name-invalidation.html b/testing/web-platform/tests/css/css-contain/container-queries/container-name-invalidation.html
new file mode 100644
index 0000000000..aad225def9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-name-invalidation.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<title>container-name invalidation</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-name">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  div {
+    color: black;
+  }
+  #outer {
+    container-name: c1;
+    container-type: inline-size;
+    width: 300px;
+  }
+
+  #inner {
+    container-name: c2;
+    container-type: inline-size;
+    width: 200px;
+  }
+
+  #intermediate {
+    width: 250px;
+  }
+
+  @container c1 (width: 250px) {
+    #child {
+      color: green;
+    }
+  }
+</style>
+<div id=outer>
+  <div id=intermediate>
+    <div id=inner>
+      <div id=child>Test</div>
+    </div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(function(t) {
+    t.add_cleanup(() => { outer.style = ''; });
+
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
+
+    outer.style.width = '250px';
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
+
+    outer.style.width = '251px';
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
+  }, 'Changing a named container invalidates relevant descendants');
+
+  test(function(t) {
+    t.add_cleanup(() => {
+      outer.style = '';
+      intermediate.style = '';
+    });
+
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
+
+    // #intermediate becomes the new container.
+    intermediate.style = 'container-name:c1; container-type:inline-size';
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
+
+    // #outer becomes the container again.
+    intermediate.style = '';
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
+
+    outer.style.width = '250px';
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
+  }, 'Changing container-name invalidates relevant descendants');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-name-parsing.html b/testing/web-platform/tests/css/css-contain/container-queries/container-name-parsing.html
new file mode 100644
index 0000000000..4f385cca52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-name-parsing.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Parsing of container-name</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-name">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<div id="target"></div>
+<script>
+setup(() => assert_implements_container_queries());
+
+test_valid_value('container-name', 'initial');
+test_valid_value('container-name', 'inherit');
+test_valid_value('container-name', 'unset');
+test_valid_value('container-name', 'revert');
+test_valid_value('container-name', 'none');
+test_valid_value('container-name', 'foo');
+test_valid_value('container-name', 'BAR');
+test_valid_value('container-name', 'foo bar');
+test_valid_value('container-name', 'foo foo');
+test_valid_value('container-name', '\\!escaped');
+test_valid_value('container-name', 'auto');
+test_valid_value('container-name', 'normal');
+
+test_invalid_value('container-name', 'none none');
+test_invalid_value('container-name', 'foo, bar');
+test_invalid_value('container-name', '#fff');
+test_invalid_value('container-name', '1px');
+test_invalid_value('container-name', 'default'); /* reserved */
+
+test_invalid_value('container-name', '"initial"');
+test_invalid_value('container-name', '"inherit"');
+test_invalid_value('container-name', '"unset"');
+test_invalid_value('container-name', '"revert"');
+test_invalid_value('container-name', '"none"');
+test_invalid_value('container-name', '"foo"');
+
+test_invalid_value('container-name', 'not');
+test_invalid_value('container-name', 'and');
+test_invalid_value('container-name', 'or');
+test_invalid_value('container-name', 'Not');
+test_invalid_value('container-name', 'aNd');
+test_invalid_value('container-name', 'oR');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-name-tree-scoped.html b/testing/web-platform/tests/css/css-contain/container-queries/container-name-tree-scoped.html
new file mode 100644
index 0000000000..c4f4bb9d55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-name-tree-scoped.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Container Queries Test: Tree scoped container-name</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container">
+<link rel="help" href="https://drafts.csswg.org/css-scoping-1/#shadow-names">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
+<script src="support/cq-testcommon.js"></script>
+
+<div id="container-name-host">
+  <div>
+    <template shadowroot="open">
+      <style>
+        :host { container-name: foo; }
+      </style>
+      <slot></slot>
+    </template>
+    <div id="t1"></div>
+  </div>
+  <style>
+    #container-name-host > div {
+      container-type: inline-size;
+    }
+    #t1 { color: green; }
+    @container foo (width > 0px) {
+      #t1 { color: red; }
+    }
+  </style>
+</div>
+
+<div id="container-name-slotted">
+  <div>
+    <template shadowroot="open">
+      <style>
+        ::slotted(div) {
+          container-name: foo;
+        }
+      </style>
+      <slot></slot>
+    </template>
+    <div>
+      <div id="t2"></div>
+    </div>
+  </div>
+  <style>
+    #container-name-slotted > div > div {
+      container-type: inline-size;
+    }
+    #t2 { color: green; }
+    @container foo (width > 0px) {
+      #t2 { color: red; }
+    }
+  </style>
+</div>
+
+<script>
+  setup(() => {
+    assert_implements_container_queries();
+    polyfill_declarative_shadow_dom(document);
+  });
+
+  const green = "rgb(0, 128, 0)";
+
+  test(() => {
+    assert_equals(getComputedStyle(t1).color, green);
+  }, "Outer scope query should not match container-name set by :host rule in shadow tree");
+
+  test(() => {
+    assert_equals(getComputedStyle(t2).color, green);
+  }, "Outer scope query should not match container-name set by ::slotted rule in shadow tree");
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-nested.html b/testing/web-platform/tests/css/css-contain/container-queries/container-nested.html
new file mode 100644
index 0000000000..3ad35bd2be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-nested.html
@@ -0,0 +1,239 @@
+<!doctype html>
+<title>@container (nested)</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-rule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+
+#outer {
+  container-name: outer;
+  container-type: size;
+  width: 100px;
+  height: 100px;
+}
+
+#inner {
+  container-name: inner;
+  container-type: size;
+  width: 50px;
+  height: 50px;
+}
+</style>
+<div id=outer>
+  <div id=inner>
+    <div id=child></div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+</script>
+
+<!--
+  "Implicit" refers to implicit container selection, i.e. understanding which
+  container to evaluate against by looking at the features used.
+-->
+
+<style>
+  @container (width: 50px) {
+    @container (height: 50px) {
+      #child { --implicit:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--implicit'), 'true');
+  }, 'Implicit');
+</script>
+
+
+<style>
+  @container (width: 70px) {
+    @container (height: 50px) {
+      #child { --implicit-outer-fail:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--implicit-outer-fail'), '');
+  }, 'Implicit, outer failing');
+</script>
+
+
+<style>
+  @container (width: 50px) {
+    @container (height: 70px) {
+      #child { --implicit-inner-fail:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--implicit-inner-fail'), '');
+  }, 'Implicit, inner failing');
+</script>
+
+
+<style>
+  @container outer (width: 100px) {
+    @container inner (height: 50px) {
+      #child { --named-outer-inner:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--named-outer-inner'), 'true');
+  }, 'Outer named, inner named');
+</script>
+
+
+<style>
+  @container inner (width: 50px) {
+    @container outer (height: 100px) {
+      #child { --named-outer-inner-reverse:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--named-outer-inner-reverse'), 'true');
+  }, 'Outer named, inner named (reverse)');
+</script>
+
+
+<style>
+  @container unknown (width: 100px) {
+    @container inner (height: 50px) {
+      #child { --named-failing-outer:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--named-failing-outer'), '');
+  }, 'Failing outer name');
+</script>
+
+<style>
+  @container outer (width: 100px) {
+    @container unknown (height: 50px) {
+      #child { --named-failing-inner:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--named-failing-inner'), '');
+  }, 'Failing inner name');
+</script>
+
+
+<style>
+  @container outer (width: 100px) {
+    @container (height: 50px) {
+      #child { --named-outer-inner-implicit:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--named-outer-inner-implicit'), 'true');
+  }, 'Outer named, inner implicit');
+</script>
+
+
+<style>
+  @container (width: 50px) {
+    @container inner (height: 50px) {
+      #child { --implicit-outer-inner-named:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--implicit-outer-inner-named'), 'true');
+  }, 'Inner named, outer implicit');
+</script>
+
+
+<style>
+  @container (width: 50px) {
+    @container outer (height: 100px) {
+      #child { --implicit-outer-inner-named-reverse:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--implicit-outer-inner-named-reverse'), 'true');
+  }, 'Inner named, outer implicit (reverse)');
+</script>
+
+
+<style>
+  @container (width > 1px) {
+    @container (width > 2px) {
+      @container (width > 3px) {
+        #child { --three-levels:true; }
+      }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--three-levels'), 'true');
+  }, 'Three levels');
+</script>
+
+
+<style>
+  @container (width > 1px) {
+    @container (width > 2000px) {
+      @container (width > 3px) {
+        #child { --three-levels-middle-fail:true; }
+      }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--three-levels-middle-fail'), '');
+  }, 'Three levels, middle fail');
+</script>
+
+
+<style>
+  @container (width: 50px) {
+    @container outer (height: 100px) {
+      #child { --inner-named-invalidation:true; }
+    }
+  }
+</style>
+<script>
+  test((t) => {
+    t.add_cleanup(() => { outer.style = ''; });
+    assert_equals(getComputedStyle(child).getPropertyValue('--inner-named-invalidation'), 'true');
+    outer.style.height = '200px';
+    assert_equals(getComputedStyle(child).getPropertyValue('--inner-named-invalidation'), '');
+  }, 'Named inner invalidation');
+</script>
+
+
+<style>
+  @container (width: 50px) {
+    @container outer (height: 100px) {
+      #child { --outer-implicit-invalidation:true; }
+    }
+  }
+</style>
+<script>
+  test((t) => {
+    t.add_cleanup(() => { inner.style = ''; });
+    assert_equals(getComputedStyle(child).getPropertyValue('--outer-implicit-invalidation'), 'true');
+    inner.style.width = '200px';
+    assert_equals(getComputedStyle(child).getPropertyValue('--outer-implicit-invalidation'), '');
+  }, 'Implicit outer invalidation');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-parsing.html b/testing/web-platform/tests/css/css-contain/container-queries/container-parsing.html
new file mode 100644
index 0000000000..87b3bdd48c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-parsing.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Parsing of container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-name">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<div id="target"></div>
+<script>
+setup(() => assert_implements_container_queries());
+
+test_valid_value('container', 'initial');
+test_valid_value('container', 'inherit');
+test_valid_value('container', 'unset');
+test_valid_value('container', 'revert');
+test_valid_value('container', 'none');
+test_valid_value('container', 'none / normal', 'none');
+test_valid_value('container', 'inline-size');
+test_valid_value('container', 'none / inline-size', 'none / inline-size');
+test_valid_value('container', 'size');
+test_valid_value('container', 'block-size / size');
+test_valid_value('container', 'inline-size / inline-size');
+test_valid_value('container', 'size / size');
+test_valid_value('container', 'foo');
+test_valid_value('container', 'foo / normal', 'foo');
+test_valid_value('container', 'foo bar / size');
+test_valid_value('container', 'foo bar / normal', 'foo bar');
+test_valid_value('container', 'FOO / size');
+test_valid_value('container', 'FOO/size', 'FOO / size');
+test_valid_value('container', '  FOO  /size', 'FOO / size');
+test_valid_value('container', 'normal / size');
+test_valid_value('container', 'auto / size');
+
+test_invalid_value('container', 'none none');
+test_invalid_value('container', 'none inline-size');
+test_invalid_value('container', 'none / inline-size none');
+test_invalid_value('container', 'none / inline-size normal');
+test_invalid_value('container', 'none / inline-size inline-size');
+test_invalid_value('container', 'none / inline-size block-size unknown');
+test_invalid_value('container', 'none / inline-size block-size');
+test_invalid_value('container', 'none / size block-size');
+test_invalid_value('container', 'none, none');
+test_invalid_value('container', 'none, normal');
+test_invalid_value('container', 'none / none');
+test_invalid_value('container', 'none / auto');
+test_invalid_value('container', 'none / foo');
+test_invalid_value('container', 'none / foo, bar');
+test_invalid_value('container', '#fff');
+test_invalid_value('container', '1px');
+test_invalid_value('container', 'default');
+test_invalid_value('container', '10px / inline-size');
+test_invalid_value('container', '#fefefe / inline-size');
+test_invalid_value('container', 'calc(3px) / inline-size');
+test_invalid_value('container', 'size 1 / name');
+test_invalid_value('container', 'none / block-size');
+test_invalid_value('container', 'name / block-size');
+test_invalid_value('container', ' NAME  / block-size', 'NAME / block-size');
+test_invalid_value('container', 'NAME/block-size','NAME / block-size');
+test_invalid_value('container', 'block-size / block-size');
+test_invalid_value('container', 'none / size style');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-selection.html b/testing/web-platform/tests/css/css-contain/container-queries/container-selection.html
new file mode 100644
index 0000000000..cef20f85a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-selection.html
@@ -0,0 +1,183 @@
+<!doctype html>
+<title>@container: selection using name and implicit selection</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-rule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+
+  main { background-color: lightgray; }
+  main > div { background-color: skyblue; }
+  main > div > div { background-color: seagreen; }
+  main > div > div > div { background-color: tomato; }
+
+  main {
+    width: 64px;
+    height: 64px;
+  }
+
+  main div {
+    width: 50%;
+    height: 50%;
+  }
+
+  .inline { container-type: inline-size; }
+  .size { container-type: size; }
+
+  .a-inline { container: a / inline-size; }
+  .a-size { container: a / size; }
+
+  .b-size { container: inline- b / size; }
+  .b-size { container: b / size; }
+
+  .ab-size { container: a b / size; }
+
+  .a { container-name: a; contain: strict; }
+
+</style>
+
+<main>
+  <div class="inline">
+    <div class="size">
+      <span></span>
+    </div>
+  </div>
+</main>
+
+<main>
+  <div class="size">
+    <div class="inline">
+      <span></span>
+    </div>
+  </div>
+</main>
+
+<main>
+  <div class="inline">
+    <div class="inline">
+      <span></span>
+    </div>
+  </div>
+</main>
+
+<main>
+  <div class="a-size">
+    <div class="b-size">
+      <span></span>
+    </div>
+  </div>
+</main>
+
+<main>
+  <div class="a-size">
+    <div class="a-size">
+      <span></span>
+    </div>
+  </div>
+</main>
+
+<main>
+  <div class="a-size">
+    <div class="a">
+      <span></span>
+    </div>
+  </div>
+</main>
+
+<main>
+  <div class="a-size">
+    <div class="b-size">
+      <div class="a-inline">
+        <span></span>
+      </div>
+    </div>
+  </div>
+</main>
+
+<main>
+  <div class="a-inline">
+    <div class="b-size">
+      <span></span>
+    </div>
+  </div>
+</main>
+
+<main>
+  <div class="ab-size">
+    <div class="size">
+      <span></span>
+    </div>
+  </div>
+</main>
+
+<script>
+  setup(() => assert_implements_container_queries());
+
+  function test_query(prelude, selector, expected) {
+    test(t => {
+      let elements = document.querySelectorAll(selector);
+      assert_equals(elements.length, 1);
+      let element = elements[0];
+
+      let style = document.createElement('style');
+      t.add_cleanup(() => { style.remove(); });
+      style.innerText = `@container ${prelude} { span { --match:true; } } `;
+      document.body.append(style);
+
+      assert_equals(getComputedStyle(element).getPropertyValue('--match'), expected);
+    }, `${prelude} for ${selector}`);
+  }
+
+  // Test that a given container query applies to the specified element.
+  // The provided selector must unique identify the element.
+  function test_applied(prelude, selector) {
+    test_query(prelude, selector, 'true');
+  }
+
+  function test_rejected(prelude, selector) {
+    test_query(prelude, selector, '');
+  }
+
+  // For the following tests, the inner container has a size of 16x16px,
+  // and the outer container has a size of 32x32px.
+
+  // Implicit selection:
+  test_applied('(width: 16px)',  '.size > .inline > span');
+  test_applied('(height: 16px)', '.inline > .size > span');
+  test_applied('(width: 16px)',  '.inline > .size > span');
+  test_applied('(height: 32px)', '.size > .inline > span');
+  test_rejected('(height: 16px)', '.size > .inline > span');
+
+  // Name selection:
+  test_applied('a (width: 32px)', '.a-size > .b-size > span');
+  test_applied('b (width: 16px)', '.a-size > .b-size > span');
+  test_rejected('c (width)', '.a-size > .b-size > span');
+  test_applied('a (width: 16px)', '.a-size > .a-size > span');
+
+  // container-name alone does not establish a container:
+  test_applied('a (width: 32px)', '.a-size > .a > span');
+
+  // Can query container with multiple names:
+  test_applied('a (width: 32px)', '.ab-size > .size > span');
+  test_applied('b (width: 32px)', '.ab-size > .size > span');
+  test_rejected('c (width)', '.ab-size > .size > span');
+
+  // The following tests have three containers:
+  //
+  //  outer  -> 32x32px
+  //  middle -> 16x16px
+  //  inner -> 8x8px
+
+  // Combinations of name and implicit selection:
+  test_applied('a (width: 8px)', '.a-size > .b-size > .a-inline > span');
+  test_applied('b (width: 16px)', '.a-size > .b-size > .a-inline > span');
+  test_applied('a (height: 32px)', '.a-size > .b-size > .a-inline > span');
+  test_rejected('a (height)', '.a-inline > .b-size');
+
+  // Same tests as above, but logical versions:
+  test_applied('a (inline-size: 8px)', '.a-size > .b-size > .a-inline > span');
+  test_applied('b (inline-size: 16px)', '.a-size > .b-size > .a-inline > span');
+  test_applied('a (block-size: 32px)', '.a-size > .b-size > .a-inline > span');
+  test_rejected('a (block-size)', '.a-inline > .b-size');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-size-invalidation-after-load.html b/testing/web-platform/tests/css/css-contain/container-queries/container-size-invalidation-after-load.html
new file mode 100644
index 0000000000..cf5687aa39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-size-invalidation-after-load.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<title>@container: invalidation of container size after load event</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container {
+    container-type: size;
+    width: 200px;
+    height: 4em;
+    border: 1px solid black;
+  }
+  @container (width > 300px) {
+    #child { color: green; }
+  }
+</style>
+<div id=container>
+  <div id=child>
+    Green
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  function waitForLoad(w) {
+    return new Promise(resolve => w.addEventListener('load', resolve));
+  }
+
+  promise_test(async () => {
+    await waitForLoad(window);
+    container.offsetTop;
+
+    container.style.width = '400px';
+    container.style.setProperty('--x', 'x'); // crbug.com/1321010
+
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-size-invalidation.html b/testing/web-platform/tests/css/css-contain/container-queries/container-size-invalidation.html
new file mode 100644
index 0000000000..ab26971749
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-size-invalidation.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<title>@container-dependent elements respond to container size changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container {
+    container-type: size;
+    width: 200px;
+    height: 50px;
+  }
+  div { color: red; }
+  @container (min-width: 300px) {
+    div { color: green; }
+  }
+</style>
+<main id=container>
+  <div id=child>
+    Test
+    <p><span id=descendant>Deep</span></p>
+  </div>
+</main>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(function() {
+    assert_equals(getComputedStyle(child).color, 'rgb(255, 0, 0)');
+    container.style.width = '300px';
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
+  }, 'Children respond to changes in container size');
+
+  test(function() {
+    container.style = '';
+    assert_equals(getComputedStyle(descendant).color, 'rgb(255, 0, 0)');
+    container.style.width = '300px';
+    assert_equals(getComputedStyle(descendant).color, 'rgb(0, 128, 0)');
+  }, 'Descendants respond to changes in container size');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-size-nested-invalidation.html b/testing/web-platform/tests/css/css-contain/container-queries/container-size-nested-invalidation.html
new file mode 100644
index 0000000000..a549f6d848
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-size-nested-invalidation.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<title>Nested @container-dependent elements respond to outer container size changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #outer {
+    container-type: size;
+    container-name: outer;
+    width: 100px;
+    height: 100px;
+  }
+
+  /* Note that it's intentional that nothing queries this container. */
+  #inner {
+    container-type: size;
+    width: 42px;
+    height: 42px;
+  }
+
+  @container (width > 90px) {
+    #outer_child {
+      --outer:true;
+    }
+  }
+
+  @container outer (width > 70px) {
+    #inner_child {
+      --inner:true;
+    }
+  }
+</style>
+<div id=outer>
+  <div id=outer_child></div>
+  <div id=inner>
+    <div id=inner_child></div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(function() {
+    assert_equals(getComputedStyle(outer_child).getPropertyValue('--outer'), 'true');
+    assert_equals(getComputedStyle(inner_child).getPropertyValue('--inner'), 'true');
+
+    outer.style.width = '80px';
+
+    assert_equals(getComputedStyle(outer_child).getPropertyValue('--outer'), '');
+    assert_equals(getComputedStyle(inner_child).getPropertyValue('--inner'), 'true');
+
+    outer.style.width = '60px';
+
+    assert_equals(getComputedStyle(outer_child).getPropertyValue('--outer'), '');
+    assert_equals(getComputedStyle(inner_child).getPropertyValue('--inner'), '');
+
+    outer.style.width = '100px';
+
+    assert_equals(getComputedStyle(outer_child).getPropertyValue('--outer'), 'true');
+    assert_equals(getComputedStyle(inner_child).getPropertyValue('--inner'), 'true');
+  }, 'Queries that skip a container are invalidated correctly');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-size-shadow-invalidation.html b/testing/web-platform/tests/css/css-contain/container-queries/container-size-shadow-invalidation.html
new file mode 100644
index 0000000000..7350d29714
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-size-shadow-invalidation.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Container Queries Test: Invalidate size container query for Shadow DOM</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  .container {
+    container-type: inline-size;
+    width: 100px;
+  }
+  @container (width = 200px) {
+    .target { color: green; }
+  }
+</style>
+<div id="host_container" class="container">
+  <template shadowroot="open">
+    <div class="container">
+      <slot></slot>
+    </div>
+  </template>
+  <div class="target">Green</div>
+</div>
+<div id="non_host_container" class="container">
+  <div>
+    <template shadowroot="open">
+      <div class="container">
+        <slot></slot>
+      </div>
+    </template>
+    <div class="target">Green</div>
+  </div>
+</div>
+<script>
+  setup(() => {
+    assert_implements_container_queries();
+    polyfill_declarative_shadow_dom(document);
+  });
+
+  const green = "rgb(0, 128, 0)";
+
+  test(() => {
+    document.body.offsetTop;
+    host_container.style.width = "200px";
+    assert_equals(getComputedStyle(document.querySelector("#host_container .target")).color, green);
+  }, "Host container child invalidated with container in shadow tree");
+
+  test(() => {
+    document.body.offsetTop;
+    non_host_container.style.width = "200px";
+    assert_equals(getComputedStyle(document.querySelector("#non_host_container .target")).color, green);
+  }, "Non-host container child invalidated with container in shadow tree");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-type-computed.html b/testing/web-platform/tests/css/css-contain/container-queries/container-type-computed.html
new file mode 100644
index 0000000000..0b5e033a0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-type-computed.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Computed values of container-type</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<div id="target"></div>
+<script>
+setup(() => assert_implements_container_queries());
+
+test_computed_value('container-type', 'initial', 'normal');
+test_computed_value('container-type', 'unset', 'normal');
+test_computed_value('container-type', 'inline-size');
+test_computed_value('container-type', 'size');
+test_computed_value('container-type', 'normal');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-type-containment.html b/testing/web-platform/tests/css/css-contain/container-queries/container-type-containment.html
new file mode 100644
index 0000000000..66500a6a71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-type-containment.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<title>CSS Container Queries Test: applied containment for container-type</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<script>
+  setup(() => assert_implements_container_queries());
+</script>
+
+<style>
+  /* Note: background colors have no impact on the test result. They are
+           present to make it easier to visually verify that the test
+           does the right thing. */
+  .square {
+    width: 50px;
+    height: 50px;
+    background: tomato;
+  }
+  .half {
+    width: 25px;
+    height: 50px;
+    background: red;
+  }
+  div > div:nth-of-type(1) { background: skyblue; }
+  div > div:nth-of-type(2) { background: hotpink; }
+</style>
+
+<div id=test1 class=square>
+  <div id=float1 class=half style="float:left"></div>
+  <div id=child1 class=half style="container-type:inline-size"></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(child1.offsetLeft, test1.offsetLeft + float1.offsetWidth);
+  }, 'container-type:inline-size turns on layout containment');
+</script>
+
+<hr>
+
+<div id=test2 class=square>
+  <div id=ref2 style="float:left">A</div>
+  <div id=child2 style="float:left; container-type:inline-size">A</div>
+</div>
+<script>
+  test(() => {
+    assert_equals(child2.offsetWidth, 0);
+    assert_equals(child2.offsetHeight, ref2.offsetHeight);
+  }, 'container-type:inline-size turns on inline-size containment');
+</script>
+
+<hr>
+
+<div id=test3 class=square>
+  <div id=child3 style="float:left; container-type:size">A</div>
+</div>
+<script>
+  test(() => {
+    assert_equals(child3.offsetHeight, 0);
+    assert_equals(child3.offsetWidth, 0);
+  }, 'container-type:size turns on full size containment');
+</script>
+
+<hr>
+
+<style>
+  #ref4::before, #child4::before {
+    content: counter(foo);
+  }
+</style>
+<div id=test4 class=square style="counter-set: foo 5">
+  <div id=ref4 style="float:left"></div>
+  <section style="container-type:inline-size">
+    <span style="counter-increment: foo 1000;"></span>
+  </section>
+  <section style="container-type:size">
+    <span style="counter-increment: foo 1000;"></span>
+  </section>
+  <div id=child4 style="float:left"></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(child4.offsetWidth, ref4.offsetWidth);
+  }, 'container-type:inline/size turns on style containment');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-type-invalidation.html b/testing/web-platform/tests/css/css-contain/container-queries/container-type-invalidation.html
new file mode 100644
index 0000000000..90e0b4acd1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-type-invalidation.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<title>container-type invalidation</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  div {
+    color: black;
+  }
+  #outer {
+    width: 300px;
+  }
+
+  #intermediate {
+    width: 250px;
+  }
+
+  #inner {
+    width: 200px;
+  }
+
+  .container {
+    container-type: inline-size;
+  }
+
+  @container ((max-width: 200px) or (min-width: 300px)) {
+    #child { color: green; }
+  }
+
+</style>
+<div id=outer>
+  <div id=intermediate>
+    <div id=inner>
+      <div id=child>Test</div>
+    </div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(function(t) {
+    t.add_cleanup(() => {
+      for (let e of [outer, intermediate, inner])
+        e.classList.remove('container');
+    });
+
+    // No container.
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
+
+    outer.classList.add('container');
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
+
+    // The container query does not match widths in the range [201, 299],
+    // and #intermediate has width:250px.
+    intermediate.classList.add('container');
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
+
+    inner.classList.add('container');
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
+
+    // Should have no effect, #inner is the container.
+    outer.classList.remove('container');
+    intermediate.classList.remove('container');
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
+
+    inner.classList.remove('container');
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
+  }, 'Changing the container type invalidates relevant descendants');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-type-layout-invalidation.html b/testing/web-platform/tests/css/css-contain/container-queries/container-type-layout-invalidation.html
new file mode 100644
index 0000000000..3103de81f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-type-layout-invalidation.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>container-type layout invalidation</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #div {
+    width: fit-content;
+  }
+</style>
+<div id=div>
+  content
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(function(t) {
+    t.add_cleanup(() => { div.style = ''; });
+
+    assert_greater_than(div.offsetWidth, 0);
+    assert_greater_than(div.offsetHeight, 0);
+
+    div.style.containerType = 'size';
+
+    assert_equals(div.offsetWidth, 0);
+    assert_equals(div.offsetHeight, 0);
+  }, 'Changing container-type invalidates layout');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-type-parsing.html b/testing/web-platform/tests/css/css-contain/container-queries/container-type-parsing.html
new file mode 100644
index 0000000000..5805a927b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-type-parsing.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Parsing of container-type</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<div id="target"></div>
+<script>
+setup(() => assert_implements_container_queries());
+
+test_valid_value('container-type', 'initial');
+test_valid_value('container-type', 'inherit');
+test_valid_value('container-type', 'unset');
+test_valid_value('container-type', 'revert');
+test_valid_value('container-type', 'normal');
+test_valid_value('container-type', 'size');
+test_valid_value('container-type', 'inline-size');
+
+test_invalid_value('container-type', 'none');
+test_invalid_value('container-type', 'auto');
+test_invalid_value('container-type', 'block-size');
+test_invalid_value('container-type', 'normal normal');
+test_invalid_value('container-type', 'normal inline-size');
+test_invalid_value('container-type', 'inline-size normal');
+test_invalid_value('container-type', 'inline-size inline-size');
+test_invalid_value('container-type', 'inline-size block-size');
+test_invalid_value('container-type', 'block-size inline-size');
+test_invalid_value('container-type', 'size inline-size');
+test_invalid_value('container-type', 'inline-size size');
+test_invalid_value('container-type', 'normal, normal');
+test_invalid_value('container-type', 'foo');
+test_invalid_value('container-type', '"foo"');
+test_invalid_value('container-type', 'foo, bar');
+test_invalid_value('container-type', '#fff');
+test_invalid_value('container-type', '1px');
+test_invalid_value('container-type', 'default');
+test_invalid_value('container-type', 'size nonsense');
+test_invalid_value('container-type', 'style');
+test_invalid_value('container-type', 'inline-size style', 'style inline-size');
+test_invalid_value('container-type', 'style inline-size');
+test_invalid_value('container-type', 'style size');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-animation.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-animation.html
new file mode 100644
index 0000000000..cf1b9a8f34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-animation.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<title>Container Relative Units: Animation</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container {
+    container-type: size;
+    width: 200px;
+    height: 200px;
+  }
+
+  @keyframes anim_cqw { from { top: 20cqw; } to { top: 40cqw; } }
+  @keyframes anim_cqh { from { top: 20cqh; } to { top: 40cqh; } }
+  @keyframes anim_cqi { from { top: 20cqi; } to { top: 40cqi; } }
+  @keyframes anim_cqb { from { top: 20cqb; } to { top: 40cqb; } }
+  @keyframes anim_cqmin { from { top: 20cqmin; } to { top: 40cqmin; } }
+  @keyframes anim_cqmax { from { top: 20cqmax; } to { top: 40cqmax; } }
+
+  #container > div {
+    animation-delay: -5s;
+    animation-play-state: paused;
+    animation-duration: 10s;
+    animation-timing-function: linear;
+  }
+
+  #element_cqw { animation-name: anim_cqw; }
+  #element_cqh { animation-name: anim_cqh; }
+  #element_cqi { animation-name: anim_cqi; }
+  #element_cqb { animation-name: anim_cqb; }
+  #element_cqmin { animation-name: anim_cqmin; }
+  #element_cqmax { animation-name: anim_cqmax; }
+
+</style>
+<div id=container>
+  <div id=element_cqw></div>
+  <div id=element_cqh></div>
+  <div id=element_cqi></div>
+  <div id=element_cqb></div>
+  <div id=element_cqmin></div>
+  <div id=element_cqmax></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const units = ['cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax'];
+
+  for (let unit of units) {
+    test(() => {
+      let element = document.getElementById(`element_${unit}`)
+      assert_equals(getComputedStyle(element).top, '60px');
+    }, `Animation using ${unit} unit`);
+
+    test(() => {
+      let element = document.getElementById(`element_${unit}`)
+      assert_equals(getComputedStyle(element).top, '60px');
+      try {
+        container.style.width = '300px';
+        container.style.height = '300px';
+        assert_equals(getComputedStyle(element).top, '90px');
+      } finally {
+        container.style = '';
+      }
+
+      assert_equals(getComputedStyle(element).top, '60px');
+    }, `Animation using ${unit} unit responds to changing container size`);
+  }
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-basic.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-basic.html
new file mode 100644
index 0000000000..166a003a29
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-basic.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<title>Container Relative Units: cqi, cqb, etc</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  .inline { container-type: inline-size; }
+  .size { container-type: size; }
+  .inline.outer { width: 500px; }
+  .size.outer { height: 400px; }
+  .inline.inner { width: 300px; }
+</style>
+<div id=ref></div>
+<div class="inline outer">
+  <div class="size outer">
+    <div class="inline inner">
+      <div id=child>Test</div>
+    </div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  function assert_unit_equals(element, actual, expected) {
+    try {
+      element.style.padding = actual;
+      ref.style.padding = expected;
+      assert_equals(getComputedStyle(element).paddingLeft,
+                    getComputedStyle(ref).paddingLeft);
+    } finally {
+      element.style = '';
+      ref.style = '';
+    }
+  }
+
+  test(function() {
+    assert_unit_equals(child, '0cqi', '0px');
+    assert_unit_equals(child, '1cqi', '3px');
+    assert_unit_equals(child, '10cqi', '30px');
+    assert_unit_equals(child, '10cqw', '30px');
+    assert_unit_equals(child, '10cqb', '40px');
+    assert_unit_equals(child, '10cqh', '40px');
+    assert_unit_equals(child, '10cqmin', '30px');
+    assert_unit_equals(child, '10cqmax', '40px');
+  }, 'Container relative units');
+
+  test(function() {
+    assert_unit_equals(child, '10cqi', '30px');
+    assert_unit_equals(child, '10cqb', '40px');
+    assert_unit_equals(child, 'calc(10cqi + 10cqb)', '70px');
+    assert_unit_equals(child, 'max(10cqi, 10cqb)', '40px');
+  }, 'Container relative units in math functions');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-computational-independence.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-computational-independence.html
new file mode 100644
index 0000000000..694b665c79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-computational-independence.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<title>Container Relative Units: Computationally independent</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#computationally-independent">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const units = ['cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax'];
+
+  for (let unit of units) {
+    test(function() {
+      assert_throws_dom('SyntaxError', () => {
+        CSS.registerProperty({ name: '--x', inherits: false, syntax: '<length>', initialValue: `1${unit}` });
+      });
+    }, `Container relative unit ${unit} is not computationally independent`);
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-gradient-invalidation.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-gradient-invalidation.html
new file mode 100644
index 0000000000..665a14dcaa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-gradient-invalidation.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>Container Relative Units in gradients</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="match" href="container-units-gradient-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+  .container {
+    container-type: size;
+    width: 500px;
+    height: 400px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .smaller {
+    width: 400px;
+    height: 300px;
+  }
+  .box {
+    width: 100px;
+    height: 100px;
+    margin: 5px;
+  }
+</style>
+<div class=container>
+  <div class=box style="background:linear-gradient(green 5cqw, blue 10cqh)"></div>
+  <div class=box style="background:linear-gradient(green 5cqi, blue 10cqb)"></div>
+  <div class=box style="background:linear-gradient(green 5cqmin, blue 10cqmax)"></div>
+  <div class=box style="background:radial-gradient(green 5cqw, blue 10cqh)"></div>
+  <div class=box style="background:conic-gradient(from 180deg at 10cqh, green, blue)"></div>
+</div>
+<script>
+  document.body.offsetTop;
+  document.querySelector('.container').classList.add('smaller');
+  waitForAtLeastOneFrame().then(takeScreenshot);
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-gradient-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-gradient-ref.html
new file mode 100644
index 0000000000..dbdabd9bc4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-gradient-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+  .container {
+    width: 400px;
+    height: 300px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .box {
+    width: 100px;
+    height: 100px;
+    margin: 5px;
+  }
+</style>
+<div class=container>
+  <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div>
+  <div class=box style="background:linear-gradient(green 20px, blue 30px)"></div>
+  <div class=box style="background:linear-gradient(green 15px, blue 40px)"></div>
+  <div class=box style="background:radial-gradient(green 20px, blue 30px)"></div>
+  <div class=box style="background:conic-gradient(from 180deg at 30px, green, blue);"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-gradient.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-gradient.html
new file mode 100644
index 0000000000..3d6f5378c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-gradient.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>Container Relative Units in gradients</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="match" href="container-units-gradient-ref.html">
+<style>
+  .container {
+    container-type: size;
+    width: 400px;
+    height: 300px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .box {
+    width: 100px;
+    height: 100px;
+    margin: 5px;
+  }
+</style>
+<div class=container>
+  <div class=box style="background:linear-gradient(green 5cqw, blue 10cqh)"></div>
+  <div class=box style="background:linear-gradient(green 5cqi, blue 10cqb)"></div>
+  <div class=box style="background:linear-gradient(green 5cqmin, blue 10cqmax)"></div>
+  <div class=box style="background:radial-gradient(green 5cqw, blue 10cqh)"></div>
+  <div class=box style="background:conic-gradient(from 180deg at 10cqh, green, blue);"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-in-at-container-dynamic.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-in-at-container-dynamic.html
new file mode 100644
index 0000000000..c1f929241c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-in-at-container-dynamic.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<title>Container Relative Units: in @container prelude (dynamic)</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #outer {
+     container-type: size;
+     width: 40px;
+     height: 40px;
+   }
+  #container {
+    container-type: size;
+    width: 16px;
+    height: 16px;
+  }
+
+  @container ((width = 16px) and (width = 50cqw)) { #child { --cqw:true;  } }
+
+</style>
+
+<div id=outer>
+  <div id=container>
+    <div id=child>Test</div>
+  </div>
+</div>
+
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--cqw'), '');
+    outer.style.width = '32px';
+    assert_equals(getComputedStyle(child).getPropertyValue('--cqw'), 'true');
+  }, 'Query with container-relative units are responsive to changes');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-in-at-container-fallback.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-in-at-container-fallback.html
new file mode 100644
index 0000000000..3784499c38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-in-at-container-fallback.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<title>Container Relative Units: container relative units fall back to small viewport</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  iframe {
+    width: 200px;
+    height: 320px;
+  }
+</style>
+<iframe id=iframe srcdoc="
+  <style>
+    #parent {
+      container-type: inline-size;
+      width: 64px;
+      height: 50px;
+    }
+    #container {
+      container-type: size;
+      width: 32px;
+      height: 32px;
+    }
+
+    #target1, #target2 { color: green; }
+
+    /* Unit should evaluate against width of #parent */
+    @container ((height = 32px) and (height = 50cqw)) {
+      #target1 { color: blue; }
+    }
+
+    /* Unit should evaluate against height of iframe */
+    @container ((height = 32px) and (height = 10cqh)) {
+      #target2 { color: blue; }
+    }
+
+  </style>
+  <div id=parent>
+    <div id=container>
+      <div id=target1></div>
+      <div id=target2></div>
+    </div>
+  </div>
+"></iframe>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  function waitForLoad(w) {
+    return new Promise(resolve => w.addEventListener('load', resolve));
+  }
+
+  promise_test(async () => {
+    await waitForLoad(window);
+    let inner_target1 = iframe.contentDocument.querySelector('#target1');
+    let inner_target2 = iframe.contentDocument.querySelector('#target2');
+    assert_equals(getComputedStyle(inner_target1).color, 'rgb(0, 0, 255)');
+    assert_equals(getComputedStyle(inner_target2).color, 'rgb(0, 0, 255)');
+
+    iframe.style = 'height:400px';
+
+    // #target1 is not affected since it evaluated against another container.
+    // #target2 *is* affected, because it evaluated against the iframe size
+    // which just changed.
+    assert_equals(getComputedStyle(inner_target1).color, 'rgb(0, 0, 255)');
+    assert_equals(getComputedStyle(inner_target2).color, 'rgb(0, 128, 0)');
+  }, 'Use small viewport size as fallback');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-in-at-container.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-in-at-container.html
new file mode 100644
index 0000000000..9ddca55ec1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-in-at-container.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<title>Container Relative Units: in @container prelude</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  .size { container-type: size; }
+  .inline { container-type: inline-size; }
+  .ancestor {
+     container-type: size;
+     width: 64px;
+     height: 160px;
+  }
+  .parent {
+     container-type: inline-size;
+     width: 32px;
+     height: 77px;
+   }
+  .container {
+    container-type: size;
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Unit should resolve against .parent width. */
+  @container ((width = 16px) and (width = 50cqw)) { #child1 { --cqw:true;  } }
+
+  /* Unit should resolve against .ancestor height. */
+  @container ((width = 16px) and (width = 10cqh)) { #child1 { --cqh:true;  } }
+
+  /* Unit should resolve against .parent width. */
+  @container ((width = 16px) and (width = 50cqi)) { #child1 { --cqi:true;  } }
+
+  /* Unit should resolve against .ancestor height. */
+  @container ((width = 16px) and (width = 10cqb)) { #child1 { --cqb:true;  } }
+
+  /* Unit should resolve against biggest of w/h. */
+  @container ((width = 16px) and (width = 10cqmax)) { #child1 { --cqmax:true;  } }
+
+  /* Unit should resolve against smallest of w/h. */
+  @container ((width = 16px) and (width = 50cqmin)) { #child1 { --cqmin:true;  } }
+
+  /* Flipped writing mode: */
+
+  /* Non-logical units are the same as above */
+  @container ((width = 16px) and (width = 50cqw)) { #child2 { --cqw:true;  } }
+  @container ((width = 16px) and (width = 10cqh)) { #child2 { --cqh:true;  } }
+  @container ((width = 16px) and (width = 10cqmax)) { #child2 { --cqmax:true;  } }
+  @container ((width = 16px) and (width = 50cqmin)) { #child2 { --cqmin:true;  } }
+
+  /* Unit should resolve against .ancestor height. */
+  @container ((width = 16px) and (width = 50cqb)) { #child2 { --cqi:true;  } }
+
+  /* Unit should resolve against .parent width. */
+  @container ((width = 16px) and (width = 10cqi)) { #child2 { --cqb:true;  } }
+</style>
+
+<div class=ancestor>
+  <div class=parent>
+    <div class=container>
+      <div id=child1>Test1</div>
+    </div>
+  </div>
+</div>
+
+<div class=ancestor>
+  <div class=parent>
+    <div class=container style="writing-mode:vertical-rl;">
+      <div id=child2>Test1</div>
+    </div>
+  </div>
+</div>
+
+<script>
+  setup(() => assert_implements_container_queries());
+
+  let units = [
+    'cqw',
+    'cqh',
+    'cqi',
+    'cqb',
+    'cqmin',
+    'cqmax',
+  ];
+
+  for (let unit of units) {
+    test(() => {
+      assert_equals(getComputedStyle(child1).getPropertyValue(`--${unit}`), 'true');
+    }, `${unit} unit resolves against appropriate container`);
+  }
+
+  // Ensure that the writing mode of the subject element is not relevant for
+  // container-relative units in the @container prelude.
+  for (let unit of units) {
+    test((t) => {
+      t.add_cleanup(() => {
+        child1.style = '';
+      });
+      child1.style.writingMode = 'vertical-rl';
+      assert_equals(getComputedStyle(child1).getPropertyValue(`--${unit}`), 'true');
+    }, `${unit} unit resolves against appropriate container (vertical writing-mode on subject)`);
+  }
+
+  for (let unit of units) {
+    test(() => {
+      assert_equals(getComputedStyle(child2).getPropertyValue(`--${unit}`), 'true');
+    }, `${unit} unit resolves against appropriate container (vertical writing-mode on container)`);
+  }
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-ineligible-container.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-ineligible-container.html
new file mode 100644
index 0000000000..8882d4a38b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-ineligible-container.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Container Relative Units: ineligible container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<style>
+  #grandparent, #parent { container-type: size; }
+  #grandparent { width: 300px; height: 250px; }
+  #parent { width: 200px; height: 150px; }
+  #target { width: 10cqw; height: 10cqh; }
+</style>
+<div id="log"></div>
+<div id="grandparent">
+  <div id="parent">
+    <div id="target"></div>
+  </div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<script>
+  setup(() => assert_implements_container_queries());
+  const cases = {
+    "/* basic */": [20, 15],
+    "display: table": [30, 25],
+    "display: table-cell": [30, 25],
+    "display: inline": [30, 25],
+    "display: contents": [30, 25],
+    "display: none": [30, 25],
+    "container-type: normal": [30, 25],
+    "container-type: inline-size": [20, 25],
+    "container-type: inline-size; writing-mode: vertical-lr": [30, 15],
+  };
+  const parent = document.getElementById("parent");
+  const target = document.getElementById("target");
+  const cs = getComputedStyle(target);
+  for (let [style, [width, height]] of Object.entries(cases)) {
+    test(() => {
+      parent.style.cssText = style;
+      assert_equals(cs.width, width + "px", "width");
+      assert_equals(cs.height, height + "px", "height");
+    }, style);
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-invalidation.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-invalidation.html
new file mode 100644
index 0000000000..abb766cd0c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-invalidation.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<title>Container Relative Units: Invalidation</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #inline { container-type: inline-size; }
+  #size, #outer { container-type: size; }
+  .h600 { height: 600px; }
+  .w500 { width: 500px; }
+  .h400 { height: 400px; }
+  .w300 { width: 300px; }
+  .child {
+    padding-left: 10cqi;
+    padding-right: 10cqb;
+  }
+</style>
+<div id=ref></div>
+<div id=outer class="h600">
+  <div id=size class="w500 h400">
+    <div id=inline class="w300">
+      <div id=child class="child">Test</div>
+      <div><div id=deeper class="child">Test</div></div>
+    </div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  function assert_cqi_equals(element, expected) {
+    assert_equals(getComputedStyle(element).paddingLeft, expected);
+  }
+
+  function assert_cqb_equals(element, expected) {
+    assert_equals(getComputedStyle(element).paddingRight, expected);
+  }
+
+  test(function(t) {
+    assert_cqi_equals(child, '30px');
+    assert_cqi_equals(deeper, '30px');
+
+    try {
+      inline.style.containerType = 'normal';
+      assert_cqi_equals(child, '50px');
+      assert_cqi_equals(deeper, '50px');
+    } finally {
+      inline.style = '';
+    }
+
+    assert_cqi_equals(child, '30px');
+    assert_cqi_equals(deeper, '30px');
+  }, `cqi respond when selected container changes type (inline-size -> normal)`);
+
+  test(function() {
+    assert_cqb_equals(child, '40px');
+    assert_cqb_equals(deeper, '40px');
+
+    try {
+      size.style.containerType = 'normal';
+      assert_cqb_equals(child, '60px');
+      assert_cqb_equals(deeper, '60px');
+    } finally {
+      size.style = '';
+    }
+
+    assert_cqb_equals(child, '40px');
+    assert_cqb_equals(deeper, '40px');
+  }, `cqb respond when selected container changes type (size -> normal)`);
+
+  test(function() {
+    assert_cqb_equals(child, '40px');
+    assert_cqb_equals(deeper, '40px');
+
+    try {
+      inline.style.containerType = 'size';
+      inline.style.height = '200px';
+      assert_cqb_equals(child, '20px');
+      assert_cqb_equals(deeper, '20px');
+    } finally {
+      inline.style = '';
+    }
+
+    assert_cqb_equals(child, '40px');
+    assert_cqb_equals(deeper, '40px');
+  }, `cqb respond when intermediate container changes type (inline-size -> size)`);
+
+  test(function() {
+    assert_cqi_equals(child, '30px');
+    assert_cqi_equals(deeper, '30px');
+
+    try {
+      inline.style.width = '50px';
+      assert_cqi_equals(child, '5px');
+      assert_cqi_equals(deeper, '5px');
+    } finally {
+      inline.style = '';
+    }
+
+    assert_cqi_equals(child, '30px');
+    assert_cqi_equals(deeper, '30px');
+  }, 'cqi respond when selected container changes inline-size');
+
+  test(function() {
+    assert_cqb_equals(child, '40px');
+    assert_cqb_equals(deeper, '40px');
+
+    try {
+      size.style.height = '50px';
+      assert_cqb_equals(child, '5px');
+      assert_cqb_equals(deeper, '5px');
+    } finally {
+      size.style = '';
+    }
+
+    assert_cqb_equals(child, '40px');
+    assert_cqb_equals(deeper, '40px');
+  }, 'cqb respond when selected container changes block-size');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-media-queries.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-media-queries.html
new file mode 100644
index 0000000000..7b76f654e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-media-queries.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<title>Container-relative units in @media</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+
+<style>
+  iframe {
+    width: 200px;
+    height: 100px;
+  }
+</style>
+
+<iframe id=iframe></iframe>
+
+<script>
+setup(() => assert_implements_container_queries());
+
+const doc = iframe.contentDocument;
+const win = iframe.contentWindow;
+
+function test_media_query(feature, result, description) {
+  test((t) => {
+    t.add_cleanup(() => { doc.body.innerHTML = ''; })
+    doc.body.innerHTML = `
+      <style>
+        body {
+          color: red;
+        }
+        @media (${feature}) {
+          body {
+            color: green;
+          }
+        }
+      </style>
+      `;
+    assert_equals(win.getComputedStyle(doc.body).color, result);
+  }, description);
+}
+
+function test_media_query_applies(feature) {
+  test_media_query(feature, 'rgb(0, 128, 0)', `@media(${feature}) applies`);
+}
+
+function test_media_query_does_not_apply(feature) {
+  test_media_query(feature, 'rgb(255, 0, 0)', `@media(${feature}) does not apply`);
+}
+
+// Container-relative units resolve against the "small viewport size" for
+// media queries.
+test_media_query_applies('width:100cqw');
+test_media_query_applies('width:100cqi');
+test_media_query_applies('width:100cqmax');
+test_media_query_applies('height:100cqh');
+test_media_query_applies('height:100cqb');
+test_media_query_applies('height:100cqmin');
+test_media_query_does_not_apply('width:90cqw');
+test_media_query_does_not_apply('height:90cqh');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-selection.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-selection.html
new file mode 100644
index 0000000000..16a44cd176
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-selection.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<title>Container Relative Units: Advanced Container Selection</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  * { writing-mode: initial; }
+  .inline { container-type: inline-size; }
+  .size { container-type: size; }
+  .vertical { writing-mode: vertical-rl; }
+  .w500 { width: 500px; }
+  .h400 { height: 400px; }
+  .w300 { width: 300px; }
+  .h200 { height: 200px; }
+  .w100 { width: 100px; }
+</style>
+<div id=ref></div>
+<div id=c1>
+  <div id=c2>
+    <div id=c3>
+      <div id=c4>
+        <div id=child>Test</div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  function assert_unit_equals(element, actual, expected) {
+    try {
+      element.style.padding = actual;
+      ref.style.padding = expected;
+      assert_equals(getComputedStyle(element).paddingLeft,
+                    getComputedStyle(ref).paddingLeft);
+    } finally {
+      element.style = '';
+      ref.style = '';
+    }
+  }
+
+  test(() => {
+    try {
+      c1.className = 'inline w500'; // Selected by nothing.
+      c2.className = 'size h400 w300'; // Selected by cqh, cqb.
+      c3.className = 'inline w100'; // Selected by cqw, cqi.
+      assert_unit_equals(child, '10cqw', '10px');
+      assert_unit_equals(child, '10cqi', '10px');
+      assert_unit_equals(child, '10cqh', '40px');
+      assert_unit_equals(child, '10cqb', '40px');
+      assert_unit_equals(child, '10cqmin', '10px');
+      assert_unit_equals(child, '10cqmax', '40px');
+
+      c3.className = ''; // cqw, cqi now selects c2 instead.
+      assert_unit_equals(child, '10cqw', '30px');
+      assert_unit_equals(child, '10cqi', '30px');
+      assert_unit_equals(child, '10cqh', '40px');
+      assert_unit_equals(child, '10cqb', '40px');
+      assert_unit_equals(child, '10cqmin', '30px');
+      assert_unit_equals(child, '10cqmax', '40px');
+
+    } finally {
+      for (let c of [c1, c2, c3, c4, child])
+        c.className = '';
+    }
+  }, 'Container units select the proper container');
+
+  test(() => {
+    try {
+      c1.className = 'size w500 h400';
+      c2.className = 'inline w300 h200';
+
+      // [cqi, cqb] corresponds to [cqw, cqh].
+      assert_unit_equals(child, '10cqw', '30px');
+      assert_unit_equals(child, '10cqi', '30px');
+      assert_unit_equals(child, '10cqh', '40px');
+      assert_unit_equals(child, '10cqb', '40px');
+
+      child.className = 'vertical';
+      // [cqi, cqb] now corresponds to [cqh, cqw].
+      assert_unit_equals(child, '10cqw', '30px');
+      assert_unit_equals(child, '10cqi', '40px');
+      assert_unit_equals(child, '10cqh', '40px');
+      assert_unit_equals(child, '10cqb', '30px');
+
+      c2.classList.add('vertical');
+      // The inline containment on #c2 now applies to the vertical axis.
+      // [cqi, cqb] still corresponds to [cqh, cqw], but we now expect
+      // cqh to resolve against #c2, and cqw to resolve against #c1.
+      assert_unit_equals(child, '10cqw', '50px');
+      assert_unit_equals(child, '10cqi', '20px');
+      assert_unit_equals(child, '10cqh', '20px');
+      assert_unit_equals(child, '10cqb', '50px');
+
+    } finally {
+      for (let c of [c1, c2, c3, c4, child])
+        c.className = '';
+    }
+  }, 'Units respond to the writing-mode of the element');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-shadow.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-shadow.html
new file mode 100644
index 0000000000..1a711dad00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-shadow.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<title>Container Relative Units: Shadow DOM</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #outer {
+    container-type: size;
+    width: 200px;
+    height: 200px;
+  }
+  #direct {
+    container-type: inline-size;
+    width: 50cqw;
+    height: 50cqh;
+  }
+  #nondirect {
+    width: 10cqw;
+    height: 10cqh;
+    background: green;
+  }
+</style>
+<div id=outer>
+  <div>
+    <template shadowroot="open">
+      <style>
+        #inner {
+          container-type: size;
+          width: 30px;
+          height: 30px;
+        }
+      </style>
+      <div id=inner>
+        <slot></slot>
+      </div>
+    </template>
+    <div>
+      <div id=direct>
+        <div id=nondirect>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  setup(() => {
+    assert_implements_container_queries();
+    polyfill_declarative_shadow_dom(document);
+  });
+
+  test(() => {
+    let cs = getComputedStyle(direct);
+    assert_equals(cs.width, '100px');
+    assert_equals(cs.height, '100px');
+  }, 'Direct slotted child queries shadow-including ancestors');
+
+  test(() => {
+    let cs = getComputedStyle(nondirect);
+    assert_equals(cs.width, '10px'); // #direct
+    assert_equals(cs.height, '20px'); // #outer
+  }, 'Nondirect slotted child queries shadow-including ancestors');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-small-viewport-fallback.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-small-viewport-fallback.html
new file mode 100644
index 0000000000..6c8851681f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-small-viewport-fallback.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<title>Container Relative Units: fall back to small viewport</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  iframe {
+    width: 200px;
+    height: 40px;
+  }
+</style>
+<iframe id=iframe srcdoc="
+  <style>
+    #container {
+      container-type: inline-size;
+      width: 70px;
+      height: 30px;
+    }
+    #target {
+      left: 10cqw;
+      top: 10cqh;
+      right: 10cqi;
+      bottom: 10cqb;
+      margin-left: 10cqmax;
+      margin-right: 10cqmin;
+    }
+  </style>
+  <div id=container>
+    <div id=target></div>
+  </div>
+"></iframe>
+
+<script>
+  setup(() => assert_implements_container_queries());
+
+  function waitForLoad(w) {
+    return new Promise(resolve => w.addEventListener('load', resolve));
+  }
+
+  promise_test(async () => {
+    await waitForLoad(window);
+    let inner_target = iframe.contentDocument.querySelector('#target');
+
+    // Since there's an inline-size container, cqw/cqi should evaluate against
+    // that.
+    assert_equals(getComputedStyle(inner_target).left, '7px'); // 10cqw
+    assert_equals(getComputedStyle(inner_target).right, '7px'); // 10cqi
+
+    // However, there is no size container, so cqh/cqb should evaluate against
+    // the small viewport size.
+    assert_equals(getComputedStyle(inner_target).top, '4px'); // 10cqh
+    assert_equals(getComputedStyle(inner_target).bottom, '4px'); // 10cqb
+
+    assert_equals(getComputedStyle(inner_target).marginLeft, '7px'); // 10cqmax
+    assert_equals(getComputedStyle(inner_target).marginRight, '4px'); // 10cqmin
+
+    iframe.style = 'width:400px;height:80px';
+
+    // Not affected by resize:
+    assert_equals(getComputedStyle(inner_target).left, '7px'); // 10cqw
+    assert_equals(getComputedStyle(inner_target).right, '7px'); // 10cqi
+
+    // Affected:
+    assert_equals(getComputedStyle(inner_target).top, '8px'); // 10cqh
+    assert_equals(getComputedStyle(inner_target).bottom, '8px'); // 10cqb
+    assert_equals(getComputedStyle(inner_target).marginLeft, '8px'); // 10cqmax
+    assert_equals(getComputedStyle(inner_target).marginRight, '7px'); // 10cqmin
+  }, 'Use small viewport size as fallback');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-svglength.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-svglength.html
new file mode 100644
index 0000000000..8bb227c049
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-svglength.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<title>CSS Container Queries Test: container-relative units in SVGLength</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="help" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGLength">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<script src="/resources/SVGAnimationTestCase-testharness.js"></script>
+<style>
+  #container {
+    container-type: size;
+    width: 200px;
+    height: 150px;
+  }
+</style>
+<div id=container>
+  <svg id=rootSVGElement>
+    <rect id="rect1" width="10cqw" height="10cqh"/>
+    <rect id="rect2" width="10cqi" height="10cqb"/>
+    <rect id="rect3" width="10cqmin" height="10cqmax"/>
+    <rect id="rect4" width="calc(10cqmin + 10cqmax)" height="calc(10cqw + 3px)"/>
+    <rect id="rect_dynamic"/>
+    <rect id="rect_animated" width="42px" height="42px" fill="green">
+      <animate id=animation attributeName=width from="5cqw" to="10cqw" begin="0s" dur="4s"/>
+    </rect>
+  </svg>
+</div>
+<script>
+  setup(() => {
+    assert_implements_container_queries();
+    container.offsetTop;
+  });
+
+  function cleanup() {
+    rect_dynamic.removeAttribute('width');
+    rect_dynamic.removeAttribute('height');
+  }
+
+  test(() => {
+    assert_equals(rect1.width.baseVal.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
+  }, 'unitType with container-relative units');
+
+  test(() => {
+    assert_equals(rect1.width.baseVal.value, 20);
+    assert_equals(rect1.height.baseVal.value, 15);
+  }, 'cqw,cqh can be resolved');
+
+  test(() => {
+    assert_equals(rect2.width.baseVal.value, 20);
+    assert_equals(rect2.height.baseVal.value, 15);
+  }, 'cqi,cqb can be resolved');
+
+  test(() => {
+    assert_equals(rect3.width.baseVal.value, 15);
+    assert_equals(rect3.height.baseVal.value, 20);
+  }, 'cqmin,cqmax can be resolved');
+
+  test(() => {
+    assert_equals(rect4.width.baseVal.value, 35);
+    assert_equals(rect4.height.baseVal.value, 23);
+  }, 'calc() with container-relative units can be resolved');
+
+  test((t) => {
+    t.add_cleanup(cleanup);
+    rect_dynamic.setAttribute('width', '20cqw');
+    rect_dynamic.setAttribute('height', '20cqh');
+    assert_equals(rect_dynamic.width.baseVal.value, 40);
+    assert_equals(rect_dynamic.height.baseVal.value, 30);
+
+    rect_dynamic.width.baseVal.value = 80;
+    rect_dynamic.height.baseVal.value = 45;
+    assert_equals(rect_dynamic.getAttribute('width'), '80');
+    assert_equals(rect_dynamic.getAttribute('height'), '45');
+  }, 'Can modify value with container-relative units');
+
+  smil_async_test((t) => {
+    t.add_cleanup(cleanup);
+    let assert_width = (expected) => {
+      let epsilon = 1.0;
+      return () => {
+        assert_approx_equals(rect_animated.width.animVal.value, expected, epsilon);
+      };
+    };
+    const expectedValues = [
+        // [animationId, time, sampleCallback]
+        ["animation", 0.0,   assert_width(10)],
+        ["animation", 2.0,   assert_width(15)],
+        ["animation", 3.999, assert_width(20)],
+        ["animation", 4,     assert_width(42)],
+    ];
+
+    runAnimationTest(t, expectedValues);
+  });
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-typed-om.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-typed-om.html
new file mode 100644
index 0000000000..6da3306fdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-units-typed-om.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<title>Container Relative Units: CSS Typed OM</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-lengths">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymap">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<div id=element></div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const units = ['cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax'];
+  const functions = {
+    cqw: CSS.cqw,
+    cqh: CSS.cqh,
+    cqi: CSS.cqi,
+    cqb: CSS.cqb,
+    cqmin: CSS.cqmin,
+    cqmax: CSS.cqmax,
+  };
+
+  for (let unit of units) {
+    let func = functions[unit];
+
+    test(() => {
+      assert_equals(`${func(10)}`, `10${unit}`);
+    }, `CSS.${unit} function`);
+
+    test(() => {
+      try {
+        element.style.top = `10${unit}`;
+        let value = element.attributeStyleMap.get('top');
+        assert_equals(value.value, 10);
+        assert_equals(value.unit, unit);
+      } finally {
+        element.style = '';
+      }
+    }, `Reify value with ${unit} unit`);
+
+    test(() => {
+      try {
+        element.attributeStyleMap.set('top', `10${unit}`);
+        assert_equals(element.style.top, `10${unit}`);
+      } finally {
+        element.style = '';
+      }
+    }, `Set value with ${unit} unit (string)`);
+
+    test(() => {
+      try {
+        element.attributeStyleMap.set('top', func(10));
+        assert_equals(element.style.top, `10${unit}`);
+      } finally {
+        element.style = '';
+      }
+    }, `Set value with ${unit} unit (CSS.${unit})`);
+  }
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/counters-flex-circular.html b/testing/web-platform/tests/css/css-contain/container-queries/counters-flex-circular.html
new file mode 100644
index 0000000000..d60049e26c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/counters-flex-circular.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<title>CSS Container Queries Test: counters inside container should not affect container size via flex layout</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #flex {
+    width: 200px;
+    display: flex;
+    flex-direction: row;
+    counter-reset: my-count 0;
+  }
+  /* #item1 grows to use remaining space given #item2's content */
+  #item1 {
+    flex-grow: 1;
+    height: 100px;
+  }
+  #container {
+    container-type: size;
+  }
+  #item2 {
+    flex-grow: 0;
+    font: 50px/1 Ahem;
+  }
+  /* #item2 size depends on generated content which depends on my-count
+     counter. */
+  #item2::before {
+    display: inline-block;
+    content: counter(my-count);
+  }
+  /* The counter-increment inside the container should not affect the size of
+     #item2 because of style containment. Otherwise we would have a
+     circularity. */
+  @container (min-width: 125px) {
+    #inner {
+      counter-increment: my-count 10;
+      background-color: green;
+    }
+  }
+</style>
+<div id="flex">
+  <div id="item1">
+    <div id="container">
+      <div id="inner"></div>
+    </div>
+  </div>
+  <div id="item2"></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const item1_width = parseInt(getComputedStyle(item1).width);
+  const item2_width = parseInt(getComputedStyle(item2).width);
+  const container_width = parseInt(getComputedStyle(container).width);
+  const inner_width = parseInt(getComputedStyle(inner).width);
+
+  test(() => {
+    assert_equals(item1_width, container_width);
+    assert_equals(item1_width, inner_width);
+  }, "#item1, #container, and #inner should all have the same width: " + item1_width);
+
+  test(() => {
+    let expected_background = container_width >= 125 ? "rgb(0, 128, 0)" : "rgba(0, 0, 0, 0)";
+    assert_equals(getComputedStyle(inner).backgroundColor, expected_background);
+  }, "The container query should match the layed out width");
+
+  test(() => {
+    assert_equals(item1_width + item2_width, 200);
+  }, "The sum of the item widths should match the flexbox width");
+
+  test(() => {
+    assert_equals(parseInt(getComputedStyle(item2, "::before").width), item2_width);
+  }, "The size of the flex item #2 should be given by its contents");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/counters-in-container-dynamic.html b/testing/web-platform/tests/css/css-contain/container-queries/counters-in-container-dynamic.html
new file mode 100644
index 0000000000..d85ab6cb42
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/counters-in-container-dynamic.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>CSS Container Queries Test: counter updates</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
+<link rel="match" href="counters-ref.html">
+<style>
+  #container {
+    container-type: size;
+    width: 200px;
+    height: 200px;
+  }
+
+  #counter::before {
+    content: counter(my-counter);
+  }
+
+  @container (min-width: 300px) {
+    #counter {
+      counter-reset: my-counter 100;
+    }
+  }
+</style>
+<p>Pass if you see the number 100 below.</p>
+<div id="container">
+  <div id="counter"></div>
+</div>
+<script>
+  container.offsetTop;
+  container.style.width = "400px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/counters-in-container.html b/testing/web-platform/tests/css/css-contain/container-queries/counters-in-container.html
new file mode 100644
index 0000000000..376f52ea7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/counters-in-container.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<title>CSS Container Queries Test: counters depending on container queries</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
+<link rel="match" href="counters-ref.html">
+<style>
+  #container {
+    container-type: size;
+    width: 200px;
+    height: 200px;
+  }
+
+  #counter::before {
+    content: counter(my-counter);
+  }
+
+  @container (min-width: 200px) {
+    #counter {
+      counter-reset: my-counter 100;
+    }
+  }
+</style>
+<p>Pass if you see the number 100 below.</p>
+<div id="container">
+  <div id="counter"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/counters-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/counters-ref.html
new file mode 100644
index 0000000000..303c1e89bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/counters-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<p>Pass if you see the number 100 below.</p>
+<div>100</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/br-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/br-crash.html
new file mode 100644
index 0000000000..6631ba2fd5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/br-crash.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<title>Don't crash for blocky &lt;br> (etc) with inline-size containment</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#contain-property">
+<link rel="help" href="https://crbug.com/1313444">
+<br style="container-type:inline-size; display:block;">
+<wbr style="container-type:inline-size; display:block;">
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/canvas-as-container-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/canvas-as-container-crash.html
new file mode 100644
index 0000000000..ae7fe8dc16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/canvas-as-container-crash.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<title>CSS Container Queries Test: Absolute positioned canvas container crash</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://crbug.com/1289850">
+<p>Pass if there is no crash.</p>
+<canvas id="canv" style="display:block;position:absolute;container-type:inline-size"></canvas>
+<script>
+  canv.offsetTop;
+  canv.appendChild(document.createElement("span"));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1289718-000-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1289718-000-crash.html
new file mode 100644
index 0000000000..f30461919a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1289718-000-crash.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1289718">
+<div style="container-type:inline-size;">
+  <span style="columns:2;"></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1289718-001-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1289718-001-crash.html
new file mode 100644
index 0000000000..ce530fb2c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1289718-001-crash.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1289718">
+<div style="container-type:inline-size;">
+  <video style="columns:2;"></video>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1346969-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1346969-crash.html
new file mode 100644
index 0000000000..37c74cf8cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1346969-crash.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>Chrome crash bug 1346969</title>
+<link rel="help" href="https://crbug.com/1346969">
+<table id="table"> </table>
+<script>
+  document.body.offsetTop;
+  table.style.containerType = "inline-size";
+  table.style.appearance = "auto";
+  table.style.columnCount = 2;
+  table.createTBody();
+  table.createCaption();
+  document.body.offsetTop;
+  table.style.whiteSpace = "pre-wrap";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1362391-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1362391-crash.html
new file mode 100644
index 0000000000..d4e1fec400
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-bug-1362391-crash.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<title>DCHECK failure for style recalc from layout tree rebuild</title>
+<link rel="help" href="https://crbug.com/1362391">
+<div style="display:table-column-group">
+  <div style="container-type:size">
+    <image title="crash"></image>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-layout-root-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-layout-root-crash.html
new file mode 100644
index 0000000000..e3e709a240
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-layout-root-crash.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html class="reftest-wait">
+<link rel="help" href="https://crbug.com/1371820">
+<style>
+  body, div, img { container-type: size; }
+</style>
+<p>Pass if no crash.</p>
+<div id="div"><img id="img" alt="a"></div>
+<script>
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    // Adds a layout root inside the div size container.
+    img.alt = img.src = "b";
+    // Marks div size container for layout which skips style recalc for the sub-tree.
+    div.style.width = "500px";
+    document.documentElement.classList.remove("reftest-wait");
+  }));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-quotes-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-quotes-crash.html
new file mode 100644
index 0000000000..363f96fd02
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-quotes-crash.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<title>Container Queries Test: Quotes update outside container being laid out causes crash</title>
+<link rel="help" href="https://crbug.com/1313003">
+<style>
+  div { container-type: size }
+</style>
+<div style="float: right">
+  <span></span>
+  <div style="position:absolute"><q></q></div>
+  <q></q>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-remove-insert-evaluator-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-remove-insert-evaluator-crash.html
new file mode 100644
index 0000000000..986f6b0bf6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/chrome-remove-insert-evaluator-crash.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<title>Removing and re-inserting a container should crash</title>
+<link rel="help" href="https://crbug.com/1342750">
+<style>
+  #container { container-type: inline-size }
+</style>
+<div id="outer">
+  <div id="container"></div>
+</div>
+<script>
+  container.offsetTop;
+  let removed = container;
+  container.remove();
+  outer.appendChild(removed);
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/columns-in-table-001-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/columns-in-table-001-crash.html
new file mode 100644
index 0000000000..fe421500da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/columns-in-table-001-crash.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<title>CSS Container Queries Test: TR container with multicol TD crashes Chrome</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://crbug.com/1291471">
+<p>Pass if test does not crash.</p>
+<table>
+  <tr style="container-type:size;">
+    <td style="columns:2"></td>
+  </tr>
+</table>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/columns-in-table-002-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/columns-in-table-002-crash.html
new file mode 100644
index 0000000000..24b9f1aab2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/columns-in-table-002-crash.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<title>CSS Container Queries Test: container with multicol table-header-group crashes Chrome</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://crbug.com/1307656">
+<p>Pass if test does not crash.</p>
+<div id="container" style="container-type:inline-size">
+  <span style="display:table-header-group;columns:1"></span>
+  <span style="display:table-header-group;"></span>
+</div>
+<script>
+  // This originally caused a crash.
+  document.body.offsetTop;
+  // Additionally make sure we don't crash when the container is re-attached.
+  container.style.display = "inline-block";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/container-in-canvas-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/container-in-canvas-crash.html
new file mode 100644
index 0000000000..215c6a04db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/container-in-canvas-crash.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Don't crash with a container query container inside canvas</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3">
+<link rel="help" href="https://crbug.com/1321471">
+<canvas>
+  <div>
+    <div style="container-type: size">
+      <div>Test</div>
+    </div>
+  </div>
+</canvas>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/container-type-change-chrome-legacy-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/container-type-change-chrome-legacy-crash.html
new file mode 100644
index 0000000000..609142a2c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/container-type-change-chrome-legacy-crash.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<title>CSS Container Queries Test: Changing container-type in Chrome legacy layout</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://crbug.com/1286773">
+<p>Pass if there is no crash.</p>
+<span style="column-count: 1"><table></table></span>
+<video id="video"></video>
+<input id="input"></input>
+<script>
+  document.body.offsetTop;
+  video.style.containerType = "inline-size";
+  document.body.offsetLeft;
+  video.style.columnCount = "1";
+  input.setAttribute("type", "button");
+  document.body.offsetTop;
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/dirty-rowgroup-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/dirty-rowgroup-crash.html
new file mode 100644
index 0000000000..2a66cd452a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/dirty-rowgroup-crash.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<div style='container-type: size;'></div>
+<table>
+  <tbody id='id_0'></tbody>
+    <th id='id_1'>
+      <tr>
+        <th></th>
+      </tr>
+    </th>
+</table>
+<script>
+  const tbody = document.getElementById('id_0')
+  tbody.getBoundingClientRect();
+  const theader = document.getElementById('id_1')
+  tbody.outerText = 'foo';
+  theader.setAttribute('rowspan', 100)
+  tbody.getBoundingClientRect();
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-000-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-000-crash.html
new file mode 100644
index 0000000000..e7b789345c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-000-crash.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 500px) {
+    #target {
+      display: flex;
+    }
+  }
+</style>
+<div id="container" style="columns:2; container-type:inline-size; width:600px;">
+  <div id="target"></div>
+</div>
+<script>
+  document.body.offsetTop;
+  container.style.width = "400px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-001-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-001-crash.html
new file mode 100644
index 0000000000..0c0648c15b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-001-crash.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 500px) {
+    #target {
+      display: flex;
+    }
+  }
+</style>
+<div id="container" style="columns:2; container-type:inline-size; width:400px;">
+  <div id="target"></div>
+</div>
+<script>
+  document.body.offsetTop;
+  container.style.width = "600px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-002-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-002-crash.html
new file mode 100644
index 0000000000..ef3052d2c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-002-crash.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 250px) {
+    #target {
+      display: flex;
+    }
+  }
+</style>
+<div id="ancestor" style="columns:2; column-gap:0; width:600px;">
+  <div style="container-type:inline-size;">
+    <div id="target"></div>
+  </div>
+</div>
+<script>
+  document.body.offsetTop;
+  ancestor.style.width = "400px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-003-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-003-crash.html
new file mode 100644
index 0000000000..a86f25a773
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/flex-in-columns-003-crash.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 250px) {
+    #target {
+      display: flex;
+    }
+  }
+</style>
+<div id="ancestor" style="columns:2; column-gap:0; width:400px;">
+  <div style="container-type:inline-size;">
+    <div id="target"></div>
+  </div>
+</div>
+<script>
+  document.body.offsetTop;
+  ancestor.style.width = "600px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/focus-inside-content-visibility-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/focus-inside-content-visibility-crash.html
new file mode 100644
index 0000000000..1bf68d6686
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/focus-inside-content-visibility-crash.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<title>Container Queries Test: size change detected while focusing inside content-visibility: auto container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#using-cv-auto">
+<link rel="help" href="https://crbug.com/1270848">
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+
+<style>
+.spacer { height: 3000px; }
+.auto { content-visibility: auto; }
+#container {
+  border: 1px solid black;
+  width: 100px;
+  height: 100px;
+
+  container-type: size;
+}
+#input {
+  width: 100%;
+  visibility: hidden;
+}
+@container (min-width: 150px) {
+  #input { visibility: visible; }
+}
+
+</style>
+
+<div class=spacer></div>
+<div class=auto>
+  <div id=container>
+    <input id=input type=text></input>
+  </div>
+</div>
+
+<script>
+function focus() {
+  container.style.width = "200px";
+  input.focus();
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(focus));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/force-sibling-style-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/force-sibling-style-crash.html
new file mode 100644
index 0000000000..093a01b809
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/force-sibling-style-crash.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>getComputedStyle on sibling of style-dirty container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://crbug.com/1306385">
+<div id=ancestor style="--x:foo">
+  <div id=container style="container-type:size;width:100px;">
+    <span>Test</span>
+  </div>
+  <div id=target></div>
+</div>
+<script>
+  ancestor.offsetTop;
+  ancestor.style.setProperty('--x', 'bar');
+  container.style.width = '200px';
+  getComputedStyle(target).getPropertyValue('--x');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-000-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-000-crash.html
new file mode 100644
index 0000000000..56cf6cfdbb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-000-crash.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 500px) {
+    #target {
+      display: grid;
+    }
+  }
+</style>
+<div id="container" style="columns:2; container-type:inline-size; width:600px;">
+  <div id="target"></div>
+</div>
+<script>
+  document.body.offsetTop;
+  container.style.width = "400px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-001-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-001-crash.html
new file mode 100644
index 0000000000..b9cf100533
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-001-crash.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 500px) {
+    #target {
+      display: grid;
+    }
+  }
+</style>
+<div id="container" style="columns:2; container-type:inline-size; width:400px;">
+  <div id="target"></div>
+</div>
+<script>
+  document.body.offsetTop;
+  container.style.width = "600px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-002-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-002-crash.html
new file mode 100644
index 0000000000..762ad44f24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-002-crash.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 250px) {
+    #target {
+      display: grid;
+    }
+  }
+</style>
+<div id="ancestor" style="columns:2; column-gap:0; width:600px;">
+  <div style="container-type:inline-size;">
+    <div id="target"></div>
+  </div>
+</div>
+<script>
+  document.body.offsetTop;
+  ancestor.style.width = "400px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-003-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-003-crash.html
new file mode 100644
index 0000000000..11089e6902
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/grid-in-columns-003-crash.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 250px) {
+    #target {
+      display: grid;
+    }
+  }
+</style>
+<div id="ancestor" style="columns:2; column-gap:0; width:400px;">
+  <div style="container-type:inline-size;">
+    <div id="target"></div>
+  </div>
+</div>
+<script>
+  document.body.offsetTop;
+  ancestor.style.width = "600px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/iframe-init-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/iframe-init-crash.html
new file mode 100644
index 0000000000..e915c2479f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/iframe-init-crash.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<audio controls style='container-type: size'></audio>
+<iframe>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/inline-multicol-inside-container-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/inline-multicol-inside-container-crash.html
new file mode 100644
index 0000000000..7e209f7ffd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/inline-multicol-inside-container-crash.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<title>CSS Container Queries Test: Inline multicol inside size container - crash</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://crbug.com/829028">
+<style>
+  #container {
+    container-type: size;
+    width: 200px;
+    height: 100px;
+  }
+  @container (width <= 200px) {
+    #multicol {
+      column-count: 2;
+      column-gap: 0;
+    }
+  }
+</style>
+<p>Test passes if it doesn't crash.</p>
+<div id="container">
+  <span id="multicol"><div></div></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/inline-with-columns-000-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/inline-with-columns-000-crash.html
new file mode 100644
index 0000000000..733b2c4ee9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/inline-with-columns-000-crash.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 500px) {
+    #target {
+      columns: 2;
+    }
+  }
+</style>
+<div id="container" style="container-type:inline-size; width:600px;">
+  <span id="target"></span>
+</div>
+<script>
+  document.body.offsetTop;
+  container.style.width = "400px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/inline-with-columns-001-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/inline-with-columns-001-crash.html
new file mode 100644
index 0000000000..3b9bdf32bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/inline-with-columns-001-crash.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 500px) {
+    #target {
+      columns: 2;
+    }
+  }
+</style>
+<div id="container" style="container-type:inline-size; width:400px;">
+  <span id="target"></span>
+</div>
+<script>
+  document.body.offsetTop;
+  container.style.width = "600px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/input-column-group-container-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/input-column-group-container-crash.html
new file mode 100644
index 0000000000..5e520a45cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/input-column-group-container-crash.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>CSS Container Queries Test: </title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="help" href="https://crbug.com/1282782">
+<p>Pass if this test does not crash</p>
+<span style="column-count: 1">
+  <span style="display:table-column-group"></span>
+  <input id="inp">
+</span>
+<script>
+  document.body.offsetTop;
+  document.body.style.setProperty("container", "inline-size");
+  inp.setAttribute("type", "image");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/input-placeholder-inline-size-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/input-placeholder-inline-size-crash.html
new file mode 100644
index 0000000000..4b1284e5cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/input-placeholder-inline-size-crash.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<title>CSS Container Queries Test: Crash: input inline-size container with placeholder</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://crbug.com/1288692">
+<p>Pass if this test does not crash</p>
+<input id="input" style="container-type:size">
+<script>
+  document.body.offsetTop;
+  input.style.position = "absolute";
+  input.setAttribute("placeholder", "placeholder");
+  document.body.offsetTop;
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/marker-gcs-after-disconnect-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/marker-gcs-after-disconnect-crash.html
new file mode 100644
index 0000000000..3680c79512
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/marker-gcs-after-disconnect-crash.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>Don't crash during getComputedStyle which removes ::marker</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3">
+<link rel="help" href="https://crbug.com/1349732">
+<style>
+#container {
+  width: 100px;
+  height: 100px;
+  container-type: size;
+}
+@container (width) {
+  span { color: green; }
+}
+</style>
+<ul>
+  <li id="target"></li>
+</ul>
+<div id=container>
+  <span>PASS if no crash</span>
+</div>
+<script>
+let li = document.querySelector('li');
+getComputedStyle(target, '::marker').width;
+li.style.listStyleType = 'none';
+getComputedStyle(target, '::marker').width;
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/math-block-container-child-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/math-block-container-child-crash.html
new file mode 100644
index 0000000000..00b6836655
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/math-block-container-child-crash.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>CSS Container Queries Test: Math block container child crash</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://crbug.com/1294268">
+<p>Pass if there is no crash.</p>
+<math id="m" style="display:block math"></math>
+<script>
+  let div = document.createElement("div");
+  div.style.containerType = "size";
+  m.appendChild(div);
+  div.appendChild(document.createElement("span"));
+  document.body.offsetTop;
+  div.style.color = "green";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/orthogonal-replaced-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/orthogonal-replaced-crash.html
new file mode 100644
index 0000000000..10474fd984
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/orthogonal-replaced-crash.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<title>Chrome crash for replaced in orthogonal flow query container</title>
+<link rel="help" href="https://crbug.com/1325673">
+<p>Pass if no crash.</p>
+<iframe></iframe>
+<style>
+  body {
+    container-type: size;
+    writing-mode: vertical-rl;
+  }
+</style>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/pseudo-container-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/pseudo-container-crash.html
new file mode 100644
index 0000000000..f998c3a446
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/pseudo-container-crash.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<title>CSS Container Queries Test: No crash when ::after is a container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container">
+<link rel="help" href="https://crbug.com/1225381">
+<style>
+  div::after {
+    container-type: size;
+    content: '';
+    display: block;
+  }
+</style>
+<div>
+  PASS if no crash
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/svg-layout-root-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/svg-layout-root-crash.html
new file mode 100644
index 0000000000..75a3839add
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/svg-layout-root-crash.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<title>@container changing display of SVG element should not crash</title>
+<link rel="help" href="https://crbug.com/1245689">
+<iframe id="frame" style="width: 200px"></iframe>
+<script>
+  frame.srcdoc = `
+    <style>
+      #container {
+        container-type: inline-size;
+      }
+      @container (min-width: 300px) {
+        .hide { display: none; }
+      }
+    </style>
+    <div id="container">
+      <div class="hide"><svg></svg></div>
+    </div>`;
+
+  requestAnimationFrame(() =>
+      requestAnimationFrame(() =>
+          requestAnimationFrame(() => frame.style.width = "400px")));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/svg-text-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/svg-text-crash.html
new file mode 100644
index 0000000000..aadba08679
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/svg-text-crash.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<title>SVG text element with size container-type should not crash</title>
+<link rel="help" href="https://crbug.com/1298319">
+<style>
+  text { container-type: inline-size; }
+</style>
+<p>Pass if no crash.</p>
+<svg><text></text></svg>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-000-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-000-crash.html
new file mode 100644
index 0000000000..566a4eb1eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-000-crash.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 500px) {
+    #target {
+      display: table;
+    }
+  }
+</style>
+<div id="container" style="columns:2; container-type:inline-size; width:600px;">
+  <div id="target"></div>
+</div>
+<script>
+  document.body.offsetTop;
+  container.style.width = "400px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-001-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-001-crash.html
new file mode 100644
index 0000000000..4fab9de88f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-001-crash.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 500px) {
+    #target {
+      display: table;
+    }
+  }
+</style>
+<div id="container" style="columns:2; container-type:inline-size; width:400px;">
+  <div id="target"></div>
+</div>
+<script>
+  document.body.offsetTop;
+  container.style.width = "600px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-002-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-002-crash.html
new file mode 100644
index 0000000000..4f0cdc0740
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-002-crash.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 250px) {
+    #target {
+      display: table;
+    }
+  }
+</style>
+<div id="ancestor" style="columns:2; column-gap:0; width:600px;">
+  <div style="container-type:inline-size;">
+    <div id="target"></div>
+  </div>
+</div>
+<script>
+  document.body.offsetTop;
+  ancestor.style.width = "400px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-003-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-003-crash.html
new file mode 100644
index 0000000000..436da592d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-003-crash.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
+<style>
+  @container (max-width: 250px) {
+    #target {
+      display: table;
+    }
+  }
+</style>
+<div id="ancestor" style="columns:2; column-gap:0; width:400px;">
+  <div style="container-type:inline-size;">
+    <div id="target"></div>
+  </div>
+</div>
+<script>
+  document.body.offsetTop;
+  ancestor.style.width = "600px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-004-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-004-crash.html
new file mode 100644
index 0000000000..daed42f009
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-004-crash.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<title>CSS Container Queries Crash Test</title>
+<link rel="help" href="https://crbug.com/1338055">
+<p>Pass if no crash</p>
+<div style="container-type:inline-size">
+  <span style="columns: 1">
+    <canvas>
+      <script>
+        document.body.offsetTop;
+      </script>
+      <div style="container-type:inline-size">
+        <span style="display:table-column-group"></span>
+      </div>
+    </canvas>
+  </span>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-005-crash.html b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-005-crash.html
new file mode 100644
index 0000000000..60d6f9d3a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/crashtests/table-in-columns-005-crash.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<title>CSS Container Queries Crash Test</title>
+<link rel="help" href="https://crbug.com/1336334">
+<li style="container-type:inline-size">
+  <span style="columns:2">
+    <table></table>
+  </span>
+</li>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/custom-layout-container-001.https.html b/testing/web-platform/tests/css/css-contain/container-queries/custom-layout-container-001.https.html
new file mode 100644
index 0000000000..8f301e8ebf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/custom-layout-container-001.https.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html class=reftest-wait>
+<title>CSS Container Queries Test: Size queries on CSS Layout API containers</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<style>
+  #test1 {
+    width: 400px;
+    height: 100px;
+  }
+  #outer {
+    display: inline; /* Shouldn't pass without layout api support */
+    display: layout(half);
+    height: 100px;
+    container-type: inline-size;
+  }
+  @container (width = 400px) {
+    #inner {
+      display: inline; /* Shouldn't pass without layout api support */
+      display: layout(half);
+      height: 100px;
+      container-type: inline-size;
+    }
+  }
+  @container (width = 200px) {
+    #green {
+      background-color: green;
+      height: 100px;
+    }
+  }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id="test1">
+  <div id="outer">
+    <div id="inner">
+      <div id="green"></div>
+    </div>
+  </div>
+</div>
+
+<script id="code" type="text/worklet">
+  registerLayout("half", class {
+    async intrinsicSizes() {}
+    async layout(children, edges, constraints, styleMap) {
+      const childInlineSize = constraints.fixedInlineSize / 2;
+      const childFragments = await Promise.all(children.map((child) => {
+        return child.layoutNextFragment({fixedInlineSize: childInlineSize});
+      }));
+
+      for (let childFragment of childFragments) {
+        childFragment.inlineOffset = 0;
+        childFragment.blockOffset = 0;
+      }
+      const autoBlockSize = 100;
+      return {autoBlockSize, childFragments};
+    }
+  });
+</script>
+
+<script>
+  importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById("code").textContent);
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-queries.html b/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-queries.html
new file mode 100644
index 0000000000..7a11d45c31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-queries.html
@@ -0,0 +1,337 @@
+<!doctype html>
+<title>CSS Container Queries Test: custom property style queries</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#style-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #outer {
+    container-name: outer;
+    --inner: false;
+    --outer: true;
+    --inner-no-space:false;
+    --outer-no-space:true;
+    --inner-space-after:false ;
+    --outer-space-after:true ;
+  }
+  #inner {
+    --inner: true;
+    --outer: false;
+    --inner-no-space:true;
+    --outer-no-space:false;
+    --inner-space-after:true ;
+    --outer-space-after:false ;
+  }
+</style>
+<div id="outer">
+  <div id="inner">
+    <div id="target"></div>
+  </div>
+</div>
+<script>
+  const green = "rgb(0, 128, 0)";
+
+  function test_evaluation(query, expected) {
+    test((t) => {
+      let style_node = document.createElement('style');
+      t.add_cleanup(() => {
+        style_node.remove();
+      });
+      style_node.innerText = `@container ${query} { #target { --applied:true; } }`;
+
+      assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
+      document.head.append(style_node);
+      assert_equals(getComputedStyle(target).getPropertyValue('--applied'), expected ? 'true' : '');
+    }, `${query}`);
+  }
+
+  setup(() => assert_implements_container_queries());
+
+  test_evaluation('style(--inner: true)', true);
+  test_evaluation('style(--inner:true)', true);
+  test_evaluation('style(--inner:true )', true);
+  test_evaluation('style(--inner: true )', true);
+  test_evaluation('style(--inner-no-space: true)', true);
+  test_evaluation('style(--inner-no-space:true)', true);
+  test_evaluation('style(--inner-no-space:true )', true);
+  test_evaluation('style(--inner-no-space: true )', true);
+  test_evaluation('style(--inner-space-after: true)', true);
+  test_evaluation('style(--inner-space-after:true)', true);
+  test_evaluation('style(--inner-space-after:true )', true);
+  test_evaluation('style(--inner-space-after: true )', true);
+  test_evaluation('style(--outer: true)', false);
+  test_evaluation('style(--outer:true)', false);
+  test_evaluation('style(--outer:true )', false);
+  test_evaluation('style(--outer: true )', false);
+  test_evaluation('style(--outer-no-space: true)', false);
+  test_evaluation('style(--outer-no-space:true)', false);
+  test_evaluation('style(--outer-no-space:true )', false);
+  test_evaluation('style(--outer-no-space: true )', false);
+  test_evaluation('style(--outer-space-after: true)', false);
+  test_evaluation('style(--outer-space-after:true)', false);
+  test_evaluation('style(--outer-space-after:true )', false);
+  test_evaluation('style(--outer-space-after: true )', false);
+  test_evaluation('outer style(--inner: true)', false);
+  test_evaluation('outer style(--inner:true)', false);
+  test_evaluation('outer style(--inner:true )', false);
+  test_evaluation('outer style(--inner: true )', false);
+  test_evaluation('outer style(--inner-no-space: true)', false);
+  test_evaluation('outer style(--inner-no-space:true)', false);
+  test_evaluation('outer style(--inner-no-space:true )', false);
+  test_evaluation('outer style(--inner-no-space: true )', false);
+  test_evaluation('outer style(--inner-space-after: true)', false);
+  test_evaluation('outer style(--inner-space-after:true)', false);
+  test_evaluation('outer style(--inner-space-after:true )', false);
+  test_evaluation('outer style(--inner-space-after: true )', false);
+  test_evaluation('outer style(--outer: true)', true);
+  test_evaluation('outer style(--outer:true)', true);
+  test_evaluation('outer style(--outer:true )', true);
+  test_evaluation('outer style(--outer: true )', true);
+  test_evaluation('outer style(--outer-no-space: true)', true);
+  test_evaluation('outer style(--outer-no-space:true)', true);
+  test_evaluation('outer style(--outer-no-space:true )', true);
+  test_evaluation('outer style(--outer-no-space: true )', true);
+  test_evaluation('outer style(--outer-space-after: true)', true);
+  test_evaluation('outer style(--outer-space-after:true)', true);
+  test_evaluation('outer style(--outer-space-after:true )', true);
+  test_evaluation('outer style(--outer-space-after: true )', true);
+</script>
+
+<style>
+  #important {
+    --foo: bar;
+  }
+  @container style(--foo: bar !important) {
+    #important-child { color: green; }
+  }
+</style>
+<div id="important">
+  <div id="important-child"></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#important-child")).color, green);
+  }, "Query custom property with !important declaration");
+</script>
+
+<style>
+  #var-query {
+    --foo: baz;
+    --bar: baz;
+  }
+  @container style(--foo: var(--bar)) {
+    #var-subst { color: green; }
+  }
+  @container not style(--foo: var(--unknown)) {
+    #var-subst-unknown { color: green; }
+  }
+  @container not style(--foo: var(--unknown, nomatch)) {
+    #var-subst-unknown-fallback { color: green; }
+  }
+  @container style(--foo: var(--unknown, baz)) {
+    #var-subst-matching-fallback { color: green; }
+  }
+  @container style(--baz: var(--unknown)) {
+    #var-subst-unknown-matching { color: green; }
+  }
+</style>
+<div id="var-query">
+  <div id="var-subst"></div>
+  <div id="var-subst-unknown"></div>
+  <div id="var-subst-unknown-fallback"></div>
+  <div id="var-subst-matching-fallback"></div>
+  <div id="var-subst-unknown-matching"></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#var-subst")).color, green);
+  }, "Query custom property using var()");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#var-subst-unknown")).color, green);
+  }, "Query custom property including unknown var() reference");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#var-subst-unknown-fallback")).color, green);
+  }, "Query custom property including unknown var() reference with non-matching fallback");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#var-subst-matching-fallback")).color, green);
+  }, "Query custom property including unknown var() reference with matching fallback");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#var-subst-unknown-matching")).color, green);
+  }, "Query custom property matching guaranteed-invalid values");
+</script>
+
+<style>
+  #revert {
+    --foo: revert;
+  }
+  #revert-layer {
+    --foo: revert-layer;
+  }
+  #revert-child, #revert-layer-child {
+      color: green;
+  }
+  @container style(--foo: revert) {
+    #revert-child { color: red; }
+  }
+  @container style(--foo: revert-layer) {
+    #revert-layer-child { color: red; }
+  }
+</style>
+<div id="revert">
+  <div id="revert-child"></div>
+</div>
+<div id="revert-layer">
+  <div id="revert-layer-child"></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#revert-child")).color, green);
+  }, "Style query with revert keyword is false");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#revert-layer-child")).color, green);
+  }, "Style query with revert-layer keyword is false");
+</script>
+
+<style>
+  #defaulting {
+    --inherit: baz;
+    --inherit-no: baz;
+  }
+  #defaulting-container {
+    --inherit-no: bar;
+    --unset-no: baz;
+    --initial-no: baz;
+  }
+  @container style(--initial: initial) {
+    #initial { color: green; }
+  }
+  @container not style(--initial-no: initial) {
+    #initial-no { color: green; }
+  }
+  @container style(--inherit: inherit) {
+    #inherit { color: green; }
+  }
+  @container not style(--inherit-no: inherit) {
+    #inherit-no { color: green; }
+  }
+  @container style(--unset: unset) {
+    #unset { color: green; }
+  }
+  @container not style(--unset-no: unset) {
+    #unset-no { color: green; }
+  }
+</style>
+<div id="defaulting">
+  <div id="defaulting-container">
+    <div id="initial"></div>
+    <div id="initial-no"></div>
+    <div id="inherit"></div>
+    <div id="inherit-no"></div>
+    <div id="unset"></div>
+    <div id="unset-no"></div>
+  </div>
+</div>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#initial")).color, green);
+  }, "Style query 'initial' matching");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#initial-no")).color, green);
+  }, "Style query 'initial' not matching");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#inherit")).color, green);
+  }, "Style query 'inherit' matching");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#inherit-no")).color, green);
+  }, "Style query 'inherit' not matching");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#unset")).color, green);
+  }, "Style query 'unset' matching");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#unset-no")).color, green);
+  }, "Style query 'unset' not matching");
+</script>
+
+<style>
+  @property --reg-length {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 10px;
+  }
+
+  #registered {
+    container-type: inline-size;
+    width: 200px;
+    font-size: 20px;
+  }
+
+  #reg-container-px {
+    --reg-length: 10px;
+  }
+  @container style(--reg-length: 10px) {
+    #reg-px { color: green; }
+  }
+
+  #reg-container-font-relative {
+    --reg-length: 10px;
+  }
+  @container style(--reg-length: 0.5em) {
+    #reg-font-relative { color: green; }
+  }
+
+  #reg-container-font-relative-2 {
+    --reg-length: 0.5em;
+  }
+  @container style(--reg-length: 10px) {
+    #reg-font-relative-2 { color: green; }
+  }
+
+  #reg-container-container-relative {
+    width: 100px;
+    --reg-length: 100px;
+  }
+  @container style(--reg-length: 50cqi) {
+    #reg-container-relative { color: green; }
+  }
+</style>
+<div id="registered">
+  <div id="reg-container-px">
+    <div id="reg-px"></div>
+  </div>
+  <div id="reg-container-font-relative">
+    <div id="reg-font-relative"></div>
+  </div>
+  <div id="reg-container-font-relative-2">
+    <div id="reg-font-relative-2"></div>
+  </div>
+  <div id="reg-container-container-relative">
+    <div id="reg-container-relative"></div>
+  </div>
+</div>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#reg-px")).color, green);
+  }, "Match registered <length> custom property with px.");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#reg-font-relative")).color, green);
+  }, "Match registered <length> custom property with em in query.");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#reg-font-relative-2")).color, green);
+  }, "Match registered <length> custom property with em in computed value.");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#reg-container-relative")).color, green);
+  }, "Match registered <length> custom property with cqi unit.");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-query-change.html b/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-query-change.html
new file mode 100644
index 0000000000..6669ede31d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/custom-property-style-query-change.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<title>CSS Container Queries Test: custom property style query changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#style-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container { container-name: my-container; }
+  #child, #grandchild { color: red; }
+  @container style(--target: child) {
+    #child { color: green; }
+  }
+  @container my-container style(--target: grandchild) {
+    #grandchild { color: green; }
+  }
+</style>
+<div id="container">
+  <div id="child"></div>
+  <div>
+    <div id="grandchild"></div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const green = "rgb(0, 128, 0)";
+  const red = "rgb(255, 0, 0)";
+
+  test(() => {
+    assert_equals(getComputedStyle(child).color, red);
+    assert_equals(getComputedStyle(grandchild).color, red);
+  }, "Initially no queries match.");
+
+  test(() => {
+    container.style.setProperty("--target", "child");
+    assert_equals(getComputedStyle(child).color, green);
+    assert_equals(getComputedStyle(grandchild).color, red);
+  }, "Target child");
+
+  test(() => {
+    container.style.setProperty("--target", "grandchild");
+    assert_equals(getComputedStyle(child).color, red);
+    assert_equals(getComputedStyle(grandchild).color, green);
+  }, "Target grandchild");
+</script>
+
+<style>
+  @property --length {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 0px;
+  }
+
+  #reg_container {
+    container-name: my-reg-container;
+    font-size: 50px;
+  }
+  #reg_child, #reg_grandchild { color: red; }
+  @container style(--length: 100px) {
+    #reg_child { color: green; }
+  }
+  @container my-reg-container style(--length: 200px) {
+    #reg_grandchild { color: green; }
+  }
+</style>
+<div id="reg_container">
+  <div id="reg_child"></div>
+  <div>
+    <div id="reg_grandchild"></div>
+  </div>
+</div>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(reg_child).color, red);
+    assert_equals(getComputedStyle(reg_grandchild).color, red);
+  }, "Initially no queries for registered property match.");
+
+  test(() => {
+    reg_container.style.setProperty("--length", "2em");
+    assert_equals(getComputedStyle(reg_child).color, green);
+    assert_equals(getComputedStyle(reg_grandchild).color, red);
+  }, "Registered property query child");
+
+  test(() => {
+    reg_container.style.setProperty("--length", "200px");
+    assert_equals(getComputedStyle(reg_child).color, red);
+    assert_equals(getComputedStyle(reg_grandchild).color, green);
+  }, "Registered property query grandchild");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/deep-nested-inline-size-containers.html b/testing/web-platform/tests/css/css-contain/container-queries/deep-nested-inline-size-containers.html
new file mode 100644
index 0000000000..00bc8b0a6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/deep-nested-inline-size-containers.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<title>CSS Container Queries Test: Deeply nested inline-size container queries</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style id="test_style">
+  .container { container-type: inline-size; }
+  #outer { width: 200px; }
+</style>
+<div id="outer" class="container"></div>
+<script>
+  setup(() => {
+    assert_implements_container_queries();
+
+    // Create 50 nested inline-size containers where a child container is 1px
+    // narrower than its parent
+    let sheet = test_style.sheet;
+    let container = outer;
+    for (let width = 200; width > 150; --width) {
+      sheet.insertRule(`
+        @container (width = ${width}px) {
+          .container { max-width: ${width-1}px; }
+        }
+      `);
+      let child = document.createElement("div");
+      child.className = "container";
+      container.appendChild(child);
+      container = child;
+    }
+  });
+
+  test(() => {
+    let expected_width = 200;
+    for (let container of document.querySelectorAll(".container"))
+      assert_equals(container.offsetWidth, expected_width--);
+  }, "Test that all container widths match");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/display-contents.html b/testing/web-platform/tests/css/css-contain/container-queries/display-contents.html
new file mode 100644
index 0000000000..d96a46d06a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/display-contents.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<title>@container and display:contents</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<script>
+  setup(() => assert_implements_container_queries());
+</script>
+<style>
+  .container {
+    container-type: inline-size;
+    width: 30px;
+    height: 30px;
+    background: tomato;
+  }
+  .big {
+    width: 50px;
+    height: 50px;
+    background: skyblue;
+  }
+  .contents {
+    display: contents;
+  }
+
+  @container (width: 30px) {
+    .target { --x:30; }
+  }
+
+  @container (width: 50px) {
+    .target { --x:50; }
+  }
+
+  main {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+</style>
+
+<main>
+  <!-- Container is display:contents -->
+  <div class="container contents">
+    <div>
+      <div class="target" id=target1></div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target1);
+      assert_equals(s.getPropertyValue('--x'), '');
+    }, 'getComputedStyle when container is display:contents');
+  </script>
+
+  <!-- Container becomes display:contents -->
+  <div id=container2 class="container">
+    <div>
+      <div class="target" id=target2></div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target2);
+      assert_equals(s.getPropertyValue('--x'), '30');
+      container2.classList.add('contents');
+      assert_equals(s.getPropertyValue('--x'), '');
+      container2.classList.remove('contents');
+      assert_equals(s.getPropertyValue('--x'), '30');
+    }, 'getComputedStyle when container becomes display:contents');
+  </script>
+
+  <!-- Intermediate container becomes display:contents -->
+  <div class="container">
+    <div>
+      <div id=container3 class="container">
+        <div>
+          <div class="target" id=target3></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target3);
+      assert_equals(s.getPropertyValue('--x'), '30');
+      container3.classList.add('contents');
+      assert_equals(s.getPropertyValue('--x'), '');
+      container3.classList.remove('contents');
+      assert_equals(s.getPropertyValue('--x'), '30');
+    }, 'getComputedStyle when intermediate container becomes display:contents');
+  </script>
+</main>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/display-in-container-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/display-in-container-ref.html
new file mode 100644
index 0000000000..fd8e9ef0c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/display-in-container-ref.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+  .container, .not_a_container {
+    width: auto;
+    height: 100px;
+    border: 1px solid black;
+    margin-bottom: 10px;
+  }
+  span {
+    border: 1px solid green;
+    margin: 2px;
+  }
+</style>
+<div style="width:150px">
+  <div class=container>
+    <main>
+      <div style="display:flex">
+        <span style="flex:1">Test1</span>
+        <span style="flex:1">Test2</span>
+        <span style="flex:1">Test3</span>
+      </div>
+    </main>
+  </div>
+</div>
+<div style="width:200px">
+  <div class=container>
+    <main>
+      <div>
+        <span style="display:block">Test1</span>
+        <span style="display:block">Test2</span>
+        <span style="display:block">Test3</span>
+      </div>
+    </main>
+  </div>
+</div>
+<div style="width:150px">
+  <div class=not_a_container>
+    <main>
+      <div>
+        <span>Test1</span>
+        <span>Test2</span>
+        <span>Test3</span>
+      </div>
+    </main>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/display-in-container.html b/testing/web-platform/tests/css/css-contain/container-queries/display-in-container.html
new file mode 100644
index 0000000000..a2a4cd731c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/display-in-container.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<title>CSS Container Queries Test: @container queries affecting display type</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="match" href="display-in-container-ref.html">
+<style>
+  .container, .not_a_container {
+    width: auto;
+    height: 100px;
+    border: 1px solid black;
+    margin-bottom: 10px;
+  }
+  .container {
+    container-type: size;
+  }
+  span {
+    border: 1px solid green;
+    margin: 2px;
+  }
+
+  /* Note: 150px - 2px, since .container has a 1px border */
+  @container (min-width: 148px) {
+    div { display: flex; }
+    span { flex: 1; }
+  }
+
+  /* Note: 200px - 2px, since .container has a 1px border */
+  @container (min-width: 198px) {
+    div { display: revert; }
+    span { display: block; }
+  }
+
+  /* Should not apply: */
+  @container (min-width: 199px) {
+    * { color: red; background-color: red; }
+  }
+</style>
+<div style="width:150px">
+  <div class=container>
+    <main>
+      <div>
+        <span>Test1</span>
+        <span>Test2</span>
+        <span>Test3</span>
+      </div>
+    </main>
+  </div>
+</div>
+<div style="width:200px">
+  <div class=container>
+    <main>
+      <div>
+        <span>Test1</span>
+        <span>Test2</span>
+        <span>Test3</span>
+      </div>
+    </main>
+  </div>
+</div>
+<div style="width:150px">
+  <div class=not_a_container>
+    <main>
+      <div>
+        <span>Test1</span>
+        <span>Test2</span>
+        <span>Test3</span>
+      </div>
+    </main>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/display-none.html b/testing/web-platform/tests/css/css-contain/container-queries/display-none.html
new file mode 100644
index 0000000000..8d07ec09dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/display-none.html
@@ -0,0 +1,393 @@
+<!doctype html>
+<title>@container in display:none</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<script>
+  setup(() => assert_implements_container_queries());
+</script>
+<style>
+  .container {
+    container-type: size;
+    width: 30px;
+    height: 30px;
+    background: tomato;
+  }
+  .small {
+    width: 10px;
+    height: 10px;
+  }
+  .big {
+    width: 50px;
+    height: 50px;
+    background: skyblue;
+  }
+  .auto {
+    width: auto;
+  }
+  .none {
+    display: none;
+  }
+  .pseudo::before {
+    content: "foo";
+  }
+  .pseudo_none::before {
+    content: "foo";
+    display: none;
+  }
+
+  @container (width: 30px) {
+    .target { --x:30; }
+  }
+
+  @container (width: 50px) {
+    .target { --x:50; }
+  }
+
+  main {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+</style>
+
+<main>
+  <!-- Target element is display:none -->
+  <div class="container">
+    <div>
+      <div>
+        <div class="target none" id=target1></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target1);
+      assert_equals(s.getPropertyValue('--x'), '30');
+    }, 'getComputedStyle when element is display:none');
+  </script>
+
+  <!-- Parent is display:none -->
+  <div class="container">
+    <div>
+      <div class="none">
+        <div class="target" id=target2></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target2);
+      assert_equals(s.getPropertyValue('--x'), '30');
+    }, 'getComputedStyle when parent is display:none');
+  </script>
+
+  <!-- Ancestor is display:none -->
+  <div class="container">
+    <div class="none">
+      <div>
+        <div class="target" id=target3></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target3);
+      assert_equals(s.getPropertyValue('--x'), '30');
+    }, 'getComputedStyle when ancestor is display:none');
+  </script>
+
+  <!-- Container is display:none -->
+  <div class="container none">
+    <div>
+      <div>
+        <div class="target" id=target4></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target4);
+      assert_equals(s.getPropertyValue('--x'), '');
+    }, 'getComputedStyle when container is display:none');
+  </script>
+
+  <!-- Target element is display:none in nested container -->
+  <div class="container big">
+    <div>
+      <div>
+        <div class="container">
+          <div>
+            <div>
+              <div class="target none" id=target5></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target5);
+      assert_equals(s.getPropertyValue('--x'), '30');
+    }, 'getComputedStyle when element in nested container is display:none');
+  </script>
+
+  <!-- Inner container is display:none -->
+  <div class="container big">
+    <div>
+      <div>
+        <div class="container none">
+          <div>
+            <div>
+              <div class="target" id=target6></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target6);
+      assert_equals(s.getPropertyValue('--x'), '');
+    }, 'getComputedStyle when inner container is display:none');
+  </script>
+
+  <!-- Intermediate ancestor is display:none -->
+  <div class="container big">
+    <div class="none">
+      <div>
+        <div class="container">
+          <div>
+            <div>
+              <div class="target" id=target7></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target7);
+      assert_equals(s.getPropertyValue('--x'), '');
+    }, 'getComputedStyle when intermediate ancestor is display:none');
+  </script>
+
+  <!-- Outer container is display:none -->
+  <div class="container big none">
+    <div>
+      <div>
+        <div class="container">
+          <div>
+            <div>
+              <div class="target" id=target8></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target8);
+      assert_equals(s.getPropertyValue('--x'), '');
+    }, 'getComputedStyle when outer container is display:none');
+  </script>
+
+  <!-- Nothing is display:none initially, but target becomes display:none -->
+  <div class="container">
+    <div>
+      <div>
+        <div class="target" id=target9></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target9);
+      assert_equals(s.getPropertyValue('--x'), '30');
+      target9.classList.add('none');
+      assert_equals(s.getPropertyValue('--x'), '30');
+    }, 'getComputedStyle when element becomes display:none');
+  </script>
+
+  <!-- Nothing is display:none initially, but parent becomes display:none -->
+  <div class="container">
+    <div>
+      <div id=parent10>
+        <div class="target" id=target10></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target10);
+      assert_equals(s.getPropertyValue('--x'), '30');
+      parent10.classList.add('none');
+      assert_equals(s.getPropertyValue('--x'), '30');
+    }, 'getComputedStyle when parent becomes display:none');
+  </script>
+
+  <!-- Nothing is display:none initially, but ancestor becomes display:none -->
+  <div class="container">
+    <div id=ancestor11>
+      <div>
+        <div class="target" id=target11></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target11);
+      assert_equals(s.getPropertyValue('--x'), '30');
+      ancestor11.classList.add('none');
+      assert_equals(s.getPropertyValue('--x'), '30');
+    }, 'getComputedStyle when ancestor becomes display:none');
+  </script>
+
+  <!-- Nothing is display:none initially, but container becomes display:none -->
+  <div class="container" id=container12>
+    <div>
+      <div>
+        <div class="target" id=target12></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target12);
+      assert_equals(s.getPropertyValue('--x'), '30');
+      container12.classList.add('none');
+      assert_equals(s.getPropertyValue('--x'), '');
+    }, 'getComputedStyle when container becomes display:none');
+  </script>
+
+  <!-- Intermediate container becomes display:none -->
+  <div class="container big">
+    <div>
+      <div>
+        <div class="container" id=container13>
+          <div>
+            <div>
+              <div class="target" id=target13></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target13);
+      assert_equals(s.getPropertyValue('--x'), '30');
+      container13.classList.add('none');
+      assert_equals(s.getPropertyValue('--x'), '');
+    }, 'getComputedStyle when intermediate container becomes display:none');
+  </script>
+
+  <!-- Pseudo-element is display:none -->
+  <div class="container">
+    <div>
+      <div>
+        <div class="target pseudo_none" id=target14></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target14, '::before');
+      assert_equals(s.getPropertyValue('content'), '"foo"');
+      assert_equals(s.getPropertyValue('--x'), '30');
+    }, 'getComputedStyle when ::before is display:none');
+  </script>
+
+  <!-- Pseudo-element with display:none originating element -->
+  <div class="container">
+    <div>
+      <div>
+        <div class="target pseudo none" id=target15></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target15, '::before');
+      assert_equals(s.getPropertyValue('content'), '"foo"');
+      assert_equals(s.getPropertyValue('--x'), '30');
+    }, 'getComputedStyle when originating element is display:none');
+  </script>
+
+  <!-- Pseudo-element with display:none ancestor -->
+  <div class="container">
+    <div class="none">
+      <div>
+        <div class="target pseudo" id=target16></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target16, '::before');
+      assert_equals(s.getPropertyValue('content'), '"foo"');
+      assert_equals(s.getPropertyValue('--x'), '30');
+    }, 'getComputedStyle on ::before when ancestor element is display:none');
+  </script>
+
+  <!-- Pseudo-element with in display:none container -->
+  <div class="container none">
+    <div>
+      <div>
+        <div class="target pseudo" id=target17></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      let s = getComputedStyle(target17, '::before');
+      assert_equals(s.getPropertyValue('content'), '"foo"');
+      assert_equals(s.getPropertyValue('--x'), '');
+    }, 'getComputedStyle on ::before when container is display:none');
+  </script>
+
+  <!-- Target in display:none with layout dirty outer element -->
+  <div class=small id="outer18">
+    <div class="container auto">
+      <div class="none">
+        <div>
+          <div class="target" id=target18></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      target18.offsetTop;
+      let s = getComputedStyle(target18);
+      assert_equals(s.getPropertyValue('--x'), '');
+
+      outer18.classList.remove('small');
+      outer18.classList.add('big');
+      assert_equals(s.getPropertyValue('--x'), '50');
+    }, 'getComputedStyle when in display:none with layout dirty outer element');
+  </script>
+
+  <!-- Intermediate container has forced style -->
+  <div class="container">
+    <div class="none">
+      <div id="inner19" class="container">
+        <div id="target19" class="target"></div>
+      </div>
+    </div>
+  </div>
+  <script>
+    test(function() {
+      getComputedStyle(inner19).getPropertyValue('--x');
+      let s = getComputedStyle(target19);
+      assert_equals(s.getPropertyValue('--x'), '');
+    }, 'getComputedStyle when display:none inner container has forced style');
+  </script>
+</main>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/fieldset-legend-change-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/fieldset-legend-change-ref.html
new file mode 100644
index 0000000000..b6e8dc6038
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/fieldset-legend-change-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<p>Pass if the rendered legend below is "PASS"</p>
+<fieldset style="width:400px"><legend>PASS</legend></fieldset>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/fieldset-legend-change.html b/testing/web-platform/tests/css/css-contain/container-queries/fieldset-legend-change.html
new file mode 100644
index 0000000000..15b44a0e52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/fieldset-legend-change.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>CSS Container Queries Test: inline-size query changes rendered legend in fieldset</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="match" href="fieldset-legend-change-ref.html">
+<p>Pass if the rendered legend below is "PASS"</p>
+<style>
+  fieldset {
+    width: 200px;
+    container-type: inline-size;
+  }
+  .wide { width: 400px; }
+
+  @container (min-width: 300px) {
+    #fail {
+      display: none;
+    }
+  }
+</style>
+<fieldset id="fieldset">
+  <legend id="fail">FAIL</legend>
+  <legend>PASS</legend>
+</fieldset>
+<script>
+  fieldset.offsetTop;
+  fieldset.className = "wide";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/font-relative-calc-dynamic.html b/testing/web-platform/tests/css/css-contain/container-queries/font-relative-calc-dynamic.html
new file mode 100644
index 0000000000..54f01d45a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/font-relative-calc-dynamic.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<title>CSS Container Queries Test: font-relative calc - dynamic</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  body { font-size: 10px; }
+  body.larger { font-size: 20px; }
+  #container {
+    container-type: inline-size;
+    width: 100px;
+    color: red;
+  }
+  #intermediate {
+    font-size: 8px;
+  }
+  @container (width: calc(1em + 80px)) {
+    #target { color: green; }
+  }
+</style>
+<div id="container">
+  <div id=intermediate>
+    <div id="target"></div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(target).color, 'rgb(255, 0, 0)');
+    document.body.className = 'larger';
+    assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
+  }, 'font-relative calc() is responsive to container font-size changes');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/font-relative-units-dynamic.html b/testing/web-platform/tests/css/css-contain/container-queries/font-relative-units-dynamic.html
new file mode 100644
index 0000000000..63a07c61db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/font-relative-units-dynamic.html
@@ -0,0 +1,280 @@
+<!doctype html>
+<title>CSS Container Queries Test: font-relative units - dynamic</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<script>
+
+setup(() => assert_implements_container_queries());
+
+// Inflate a <template> subtree into #main, run the test function,
+// then clean up.
+function test_template(template_element, test_fn, description) {
+  test((t) => {
+    assert_equals(template_element.tagName, "TEMPLATE");
+    t.add_cleanup(() => main.replaceChildren());
+    main.append(template_element.content.cloneNode(true));
+    test_fn(t);
+  }, description);
+}
+
+const green = "rgb(0, 128, 0)";
+const red = "rgb(255, 0, 0)";
+
+</script>
+
+<style>
+  main {
+    color: red;
+  }
+  #container {
+    container-type: inline-size;
+    width: 100px;
+  }
+  #container > div {
+    font-size: 16px;
+  }
+</style>
+
+<main id=main>
+</main>
+
+<template>
+  <style>
+    main { font-size: 10px; }
+    main.larger { font-size: 20px; }
+    @container (width: 5em) {
+      #test { color: green }
+    }
+  </style>
+  <div id="container">
+    <div>
+      <div id="test"></div>
+    </div>
+  </div>
+</template>
+<script>
+test_template(document.currentScript.previousElementSibling, (t) => {
+  t.add_cleanup(() => main.classList.remove("larger"));
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
+  main.classList.add("larger");
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
+}, 'em units respond to changes');
+</script>
+
+<template>
+  <style>
+    :root { font-size: 10px; }
+    :root.larger { font-size: 50px; }
+    @container (width: 2rem) {
+      #test { color: green }
+    }
+  </style>
+  <div id="container">
+    <div>
+      <div id="test"></div>
+    </div>
+  </div>
+</template>
+<script>
+test_template(document.currentScript.previousElementSibling, (t) => {
+  t.add_cleanup(() => document.documentElement.classList.remove("larger"));
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
+  document.documentElement.classList.add("larger");
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
+}, 'rem units respond to changes');
+</script>
+
+<template>
+  <style>
+    main { font-size: 10px; }
+    main.larger { font-size: 20px; }
+    @container (width <= 15ex) {
+      #test { color: green }
+    }
+  </style>
+  <div id="container">
+    <div>
+      <div id="test"></div>
+    </div>
+  </div>
+</template>
+<script>
+test_template(document.currentScript.previousElementSibling, (t) => {
+  t.add_cleanup(() => main.classList.remove("larger"));
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
+  main.classList.add("larger");
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
+}, 'ex units respond to changes');
+</script>
+
+<template>
+  <style>
+    :root { font-size: 10px; }
+    :root.larger { font-size: 20px; }
+    @container (width <= 12rex) {
+      #test { color: green }
+    }
+  </style>
+  <div id="container">
+    <div>
+      <div id="test"></div>
+    </div>
+  </div>
+</template>
+<script>
+test_template(document.currentScript.previousElementSibling, (t) => {
+  t.add_cleanup(() => document.documentElement.classList.remove("larger"));
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
+  document.documentElement.classList.add("larger");
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
+}, 'rex units respond to changes');
+</script>
+
+<template>
+  <style>
+    main { font-size: 10px; }
+    main.larger { font-size: 20px; }
+    @container (width <= 15ch) {
+      #test { color: green }
+    }
+  </style>
+  <div id="container">
+    <div>
+      <div id="test"></div>
+    </div>
+  </div>
+</template>
+<script>
+test_template(document.currentScript.previousElementSibling, (t) => {
+  t.add_cleanup(() => main.classList.remove("larger"));
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
+  main.classList.add("larger");
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
+}, 'ch units respond to changes');
+</script>
+
+<template>
+  <style>
+    :root { font-size: 10px; }
+    :root.larger { font-size: 20px; }
+    @container (width <= 15rch) {
+      #test { color: green }
+    }
+  </style>
+  <div id="container">
+    <div>
+      <div id="test"></div>
+    </div>
+  </div>
+</template>
+<script>
+test_template(document.currentScript.previousElementSibling, (t) => {
+  t.add_cleanup(() => document.documentElement.classList.remove("larger"));
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
+  document.documentElement.classList.add("larger");
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
+}, 'rch units respond to changes');
+</script>
+
+<template>
+  <style>
+    main {
+      font-size: 10px;
+      line-height: 5;
+    }
+    main.larger { font-size: 20px; }
+    @container (width <= 1lh) {
+      #test { color: green }
+    }
+  </style>
+  <div id="container">
+    <div>
+      <div id="test"></div>
+    </div>
+  </div>
+</template>
+<script>
+test_template(document.currentScript.previousElementSibling, (t) => {
+  t.add_cleanup(() => main.classList.remove("larger"));
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
+  main.classList.add("larger");
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
+}, 'lh units respond to changes');
+</script>
+
+<template>
+  <style>
+    :root {
+      font-size: 10px;
+      line-height: 5;
+    }
+    :root.larger {
+      font-size: 20px;
+    }
+    @container (width <= 1rlh) {
+      #test { color: green }
+    }
+  </style>
+  <div id="container">
+    <div>
+      <div id="test"></div>
+    </div>
+  </div>
+</template>
+<script>
+test_template(document.currentScript.previousElementSibling, (t) => {
+  t.add_cleanup(() => document.documentElement.classList.remove("larger"));
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
+  document.documentElement.classList.add("larger");
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
+}, 'rlh units respond to changes');
+</script>
+
+<template>
+  <style>
+    main { font-size: 10px; }
+    main.larger { font-size: 20px; }
+    @container (width <= 8ic) {
+      #test { color: green }
+    }
+  </style>
+  <div id="container">
+    <div>
+      <div id="test"></div>
+    </div>
+  </div>
+</template>
+<script>
+test_template(document.currentScript.previousElementSibling, (t) => {
+  t.add_cleanup(() => main.classList.remove("larger"));
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
+  main.classList.add("larger");
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
+}, 'ic units respond to changes');
+</script>
+
+
+<template>
+  <style>
+    :root { font-size: 10px; }
+    :root.larger { font-size: 20px; }
+    @container (width <= 8ric) {
+      #test { color: green }
+    }
+  </style>
+  <div id="container">
+    <div>
+      <div id="test"></div>
+    </div>
+  </div>
+</template>
+<script>
+test_template(document.currentScript.previousElementSibling, (t) => {
+  t.add_cleanup(() => document.documentElement.classList.remove("larger"));
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, red);
+  document.documentElement.classList.add("larger");
+  assert_equals(getComputedStyle(main.querySelector("#test")).color, green);
+}, 'ric units respond to changes');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/font-relative-units.html b/testing/web-platform/tests/css/css-contain/container-queries/font-relative-units.html
new file mode 100644
index 0000000000..7f711ebf96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/font-relative-units.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<title>CSS Container Queries Test: font-relative units</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  :root { font-size: 10px; line-height: 10px; }
+  #em_container {
+    container-type: inline-size;
+    width: 100px;
+    font-size: 100px;
+  }
+  #ex_container {
+    container-type: inline-size;
+    font-size: 50px;
+    width: 10ex;
+    height: 50rex;
+  }
+  #ch_container {
+    container-type: inline-size;
+    font-size: 50px;
+    width: 10ch;
+  }
+  #ic_container {
+    container-type: inline-size;
+    font-size: 50px;
+    width: 10ic;
+  }
+  #lh_container {
+    container-type: inline-size;
+    line-height: 50px;
+    width: 10lh;
+  }
+  @container (width: 1em) {
+    #em_test { color: green }
+  }
+  @container (width: 10rem) {
+    #rem_test { color: green }
+  }
+  @container (width: 10ex) {
+    #ex_test { color: green }
+  }
+  @container (49rex <= width <= 100rex) {
+    #rex_test { color: green }
+  }
+  @container (width: 10ch) {
+    #ch_test { color: green }
+  }
+  @container (width: 50rch) {
+    #rch_test { color: green }
+  }
+  @container (width: 10ic) {
+    #ic_test { color: green }
+  }
+  @container (width: 50ric) {
+    #ric_test { color: green }
+  }
+  @container (width: 10lh) {
+    #lh_test { color: green }
+  }
+  @container (width: 50rlh) {
+    #rlh_test { color: green }
+  }
+</style>
+<div id="em_container">
+  <div id="em_test"></div>
+  <div id="rem_test"></div>
+</div>
+<div id="ex_container">
+  <div id="ex_test"></div>
+  <div id="rex_test"></div>
+</div>
+<div id="ch_container">
+  <div id="ch_test"></div>
+  <div id="rch_test"></div>
+</div>
+<div id="ic_container">
+  <div id="ic_test"></div>
+  <div id="ric_test"></div>
+</div>
+<div id="lh_container">
+  <div id="lh_test"></div>
+  <div id="rlh_test"></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const green = "rgb(0, 128, 0)";
+  test(() => assert_equals(getComputedStyle(em_test).color, green), "em relative inline-size");
+  test(() => assert_equals(getComputedStyle(rem_test).color, green), "rem relative inline-size");
+  test(() => assert_equals(getComputedStyle(ex_test).color, green), "ex relative inline-size");
+  test(() => assert_equals(getComputedStyle(rex_test).color, green), "rex relative inline-size");
+  test(() => assert_equals(getComputedStyle(ch_test).color, green), "ch relative inline-size");
+  test(() => assert_equals(getComputedStyle(rch_test).color, green), "rch relative inline-size");
+  test(() => assert_equals(getComputedStyle(ic_test).color, green), "ic relative inline-size");
+  test(() => assert_equals(getComputedStyle(ric_test).color, green), "ric relative inline-size");
+  test(() => assert_equals(getComputedStyle(lh_test).color, green), "lh relative inline-size");
+  test(() => assert_equals(getComputedStyle(rlh_test).color, green), "rlh relative inline-size");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/fragmented-container-001.html b/testing/web-platform/tests/css/css-contain/container-queries/fragmented-container-001.html
new file mode 100644
index 0000000000..886f179054
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/fragmented-container-001.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<title>CSS Container Queries Test: Query fragmented inline-size container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #multicol {
+    width: 400px;
+    column-count: 2;
+    column-fill: auto;
+    column-gap: 0;
+    height: 100px;
+  }
+  #float {
+    float: left;
+    width: 100px;
+    height: 50px;
+  }
+  #container {
+    container-type: inline-size;
+    display: flow-root;
+    height: 200px;
+  }
+  #first-child {
+    break-after: column;
+  }
+  @container (width = 100px) {
+    #first-child { color: green; }
+    #second-child { color: green; }
+  }
+</style>
+<div id="multicol">
+  <div id="float"></div>
+  <div id="container">
+    <div id="first-child"></div>
+    <div id="second-child"></div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    const green = "rgb(0, 128, 0)";
+    assert_equals(getComputedStyle(document.querySelector("#first-child")).color, green);
+    assert_equals(getComputedStyle(document.querySelector("#second-child")).color, green);
+  }, "Children of fragmented inline-size container should match inline-size of first fragment");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/get-animations.html b/testing/web-platform/tests/css/css-contain/container-queries/get-animations.html
new file mode 100644
index 0000000000..dca41c6ada
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/get-animations.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<title>getAnimations depending on container query</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container {
+    container-type: inline-size;
+    width: 100px;
+  }
+  #div { color: red; }
+  @keyframes test {
+    from { color: green; }
+    to { color: green; }
+  }
+  @container (min-width: 200px) {
+    #div { animation: test 1s linear forwards; }
+  }
+</style>
+<div id=container>
+  <div id=div>Green</div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(div).color, 'rgb(255, 0, 0)');
+
+    container.style = 'width:300px';
+    assert_equals(div.getAnimations().length, 1);
+    assert_equals(getComputedStyle(div).color, 'rgb(0, 128, 0)');
+  }, 'Calling getAnimations updates layout of parent frame if needed');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/grid-container.html b/testing/web-platform/tests/css/css-contain/container-queries/grid-container.html
new file mode 100644
index 0000000000..60278e09c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/grid-container.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>CSS Container Queries Test: Grid container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #grid {
+    display: grid;
+    container-type: inline-size;
+    width: 400px;
+    grid-template-columns: 1fr 1fr;
+  }
+  @container (width = 400px) {
+    #grid div { color: green }
+  }
+</style>
+<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(item1).color, "rgb(0, 128, 0)");
+    assert_equals(getComputedStyle(item2).color, "rgb(0, 128, 0)");
+  }, "Check that grid items can query grid container");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/grid-item-container.html b/testing/web-platform/tests/css/css-contain/container-queries/grid-item-container.html
new file mode 100644
index 0000000000..f1c66efc26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/grid-item-container.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<title>CSS Container Queries Test: Grid item container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #grid {
+    width: 300px;
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+  }
+  .item {
+    container-type: inline-size;
+  }
+  @container (width > 50px) {
+    .item div { color: lime; }
+  }
+  @container (width > 150px) {
+    .item div { color: green; }
+  }
+</style>
+<div id="grid">
+  <div class="item">
+    <div id="target1"></div>
+  </div>
+  <div class="item">
+    <div id="target2"></div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(target1).color, "rgb(0, 128, 0)", "First item container should be 200px wide");
+    assert_equals(getComputedStyle(target2).color, "rgb(0, 255, 0)", "Second item container should be 100px wide");
+  }, "Check that children can query grid item containers");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/idlharness.html b/testing/web-platform/tests/css/css-contain/container-queries/idlharness.html
new file mode 100644
index 0000000000..ac1a677bb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/idlharness.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<title>CSS Container Queries: CSSContainer Rule IDL tests</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/WebIDLParser.js"></script>
+<script src="/resources/idlharness.js"></script>
+<!-- used to provide objects -->
+<style>
+  @container cont (width = 100px) {
+    @container (inline-size > 200em) {
+      #id { color: lime }
+    }
+    #id { color: green }
+  }
+</style>
+<script>
+  idl_test(
+      ['css-contain-3'],
+      ['css-conditional', 'cssom', 'dom'],
+      idl_array => {
+        idl_array.add_objects({
+          CSSContainerRule: ['sheet.cssRules[0]',
+                             'sheet.cssRules[0].cssRules[0]'],
+        });
+        self.sheet = document.styleSheets[0];
+      }
+    );
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/iframe-in-container-invalidation.html b/testing/web-platform/tests/css/css-contain/container-queries/iframe-in-container-invalidation.html
new file mode 100644
index 0000000000..f43d1ce789
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/iframe-in-container-invalidation.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<title>@container-dependent elements respond to size changes of an @container-dependent iframe</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container {
+    container-type: size;
+    width: 200px;
+    height: 200px;
+  }
+  iframe {
+    width: 200px;
+    height: 40px;
+  }
+  @container (width > 300px) {
+    iframe { width: 400px; }
+  }
+</style>
+<div id=container>
+  <iframe id=iframe srcdoc="
+    <style>
+      div#container {
+        container-type: size;
+        height: 20px;
+      }
+      div#child { color: red; }
+      @container (width > 300px) {
+        div#child { color: green; }
+      }
+    </style>
+    <div id=container>
+      <div id=child>Test</div>
+    </div>
+  "></iframe>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  function waitForLoad(w) {
+    return new Promise(resolve => w.addEventListener('load', resolve));
+  }
+
+  promise_test(async () => {
+    await waitForLoad(window);
+    let inner_div = iframe.contentDocument.querySelector('div#child');
+    assert_equals(getComputedStyle(inner_div).color, 'rgb(255, 0, 0)');
+
+    // Changing the size of the outer container changes the size of the iframe,
+    // which in turn should change the size of the inner container (inside that
+    // iframe).
+    container.style.width = '400px';
+    container.style.setProperty('--x', 'x'); // crbug.com/1312940
+
+    assert_equals(getComputedStyle(inner_div).color, 'rgb(0, 128, 0)');
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/iframe-invalidation.html b/testing/web-platform/tests/css/css-contain/container-queries/iframe-invalidation.html
new file mode 100644
index 0000000000..51f2be9cfa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/iframe-invalidation.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<title>@container-dependent elements respond to iframe size changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  iframe {
+    width: 200px;
+    height: 40px;
+  }
+</style>
+<iframe id=iframe srcdoc="
+  <style>
+    div#container {
+      container-type: size;
+      height: 20px;
+    }
+    div#child { color: red; }
+    @container (min-width: 300px) {
+      div#child { color: green; }
+    }
+  </style>
+  <div id=container>
+    <div id=child>Test</div>
+  </div>
+"></iframe>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  function waitForLoad(w) {
+    return new Promise(resolve => w.addEventListener('load', resolve));
+  }
+
+  promise_test(async () => {
+    await waitForLoad(window);
+    let inner_div = iframe.contentDocument.querySelector('div#child');
+    assert_equals(getComputedStyle(inner_div).color, 'rgb(255, 0, 0)');
+
+    iframe.style = 'width:400px';
+    assert_equals(getComputedStyle(inner_div).color, 'rgb(0, 128, 0)');
+  })
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/ineligible-containment.html b/testing/web-platform/tests/css/css-contain/container-queries/ineligible-containment.html
new file mode 100644
index 0000000000..36ce68d864
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/ineligible-containment.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<title>Containers ineligible for containment</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #outer, #inner1, #inner2 {
+    width: 200px;
+    container-type: inline-size;
+  }
+  #inner1 {
+    display: table;
+  }
+  p {
+    color: green;
+  }
+  @container (min-width: 1px) {
+    p { color: red; }
+  }
+</style>
+<div id=outer>
+  <div id=inner1>
+    <p id=p1>Test1</p>
+  </div>
+  <div id=inner2>
+    <p id=p2>Test1</p>
+  </div>
+</main>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(function(t) {
+    // #inner1 is the container, but it does not satisfy the containment
+    // requirements, hence the query should fail.
+    assert_equals(getComputedStyle(p1).color, 'rgb(0, 128, 0)');
+  }, 'Container ineligible for containment');
+
+  test(function(t) {
+    t.add_cleanup(() => { inner2.style = ''; });
+
+    assert_equals(getComputedStyle(p2).color, 'rgb(255, 0, 0)');
+
+    inner2.style = 'display:table';
+
+    // #inner2 is still the container, but it no longer satisfies the
+    // containment requirements.
+    assert_equals(getComputedStyle(p2).color, 'rgb(0, 128, 0)');
+  }, 'Changing containment eligibility invalidates style');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/inline-size-and-min-width.html b/testing/web-platform/tests/css/css-contain/container-queries/inline-size-and-min-width.html
new file mode 100644
index 0000000000..8ddcbc614c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/inline-size-and-min-width.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>CSS Container Queries Test: query of inline-size container is affected by min-width property</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container {
+    container-type: inline-size;
+    min-width: 200px;
+    width: fit-content;
+  }
+  @container (min-width: 200px) {
+    #child { color: green }
+  }
+</style>
+<div id="container">
+  <div id="child">Green</div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(child).color, "rgb(0, 128, 0)");
+  }, "min-width of inline-size container affects container size");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/inline-size-bfc-floats-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/inline-size-bfc-floats-ref.html
new file mode 100644
index 0000000000..ecd72b7516
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/inline-size-bfc-floats-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<p>You should see the text "no red" to the left of the third float and no red.</p>
+<div style="width:400px">
+  <div style="float:right;width:200px;height:150px;background:blue"></div>
+  <div style="float:left;width:250px;height:100px;background:blue"></div>
+  <div style="float:right;width:300px;height:100px;background:blue"></div>
+  <div style="height:200px;display:flow-root">No red</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/inline-size-bfc-floats.html b/testing/web-platform/tests/css/css-contain/container-queries/inline-size-bfc-floats.html
new file mode 100644
index 0000000000..88b81c6759
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/inline-size-bfc-floats.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<title>CSS Container Queries Test: inline-size constrained by floats - layout moving forwards</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
+<link rel="match" href="inline-size-bfc-floats-ref.html">
+<style>
+  .float { float: left; background-color: blue; }
+  .right { float: right; }
+
+  #outer { width: 400px; }
+  #float1 { width: 200px; height: 150px; }
+  #float2 { width: 250px; height: 100px; }
+  #float3 { width: 300px; height: 100px; }
+
+  #container { container-type: inline-size; }
+
+  /* Initially, text + 200px of red content (#content1 + #content2) is too tall
+     to make #container fit by #float1 */
+  .content { height: 100px; background-color: red; }
+
+  /* Trying to fit #container beside #float2 causes the width to remove
+     #content1. text + 100px of red content (#content2) is too tall to fit
+     beside #float2. It would at this point fit beside #float1, but that would
+     cause the width to increase again, and the spec says layout always moves
+     forward. */
+  @container (width < 200px) {
+    #content1 { display: none }
+  }
+
+  /* Trying to fit #container beside #float3 causes the rest of the red content
+     (#content2) to disappear. */
+  @container (width < 150px) {
+    #content2 { display: none }
+  }
+</style>
+<p>You should see the text "no red" to the left of the third float and no red.</p>
+<div id="outer">
+  <div id="float1" class="float right"></div>
+  <div id="float2" class="float left"></div>
+  <div id="float3" class="float right"></div>
+
+  <div id="container">
+    No red
+    <div id="content1" class="content"></div>
+    <div id="content2" class="content"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/inline-size-containment-vertical-rl.html b/testing/web-platform/tests/css/css-contain/container-queries/inline-size-containment-vertical-rl.html
new file mode 100644
index 0000000000..38c88f2df7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/inline-size-containment-vertical-rl.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<title>CSS Container Queries Test: query of inline-size container in vertical-rl</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  #ancestry { writing-mode: vertical-rl; }
+  #keg { container-type: inline-size; }
+  @container (max-height: 200px) {
+    #target { width: 400px; }
+  }
+  @container (min-height: 400px) {
+    #target { width: 20px; }
+  }
+</style>
+<div id="ancestry">
+  <div id="keg">
+    <div id="target">
+      <div style="width:50px;"></div>
+    </div>
+  </div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(()=> {
+    ancestry.style.height = "100px";
+    assert_equals(keg.offsetWidth, 400);
+
+    ancestry.style.height = "300px";
+    assert_equals(keg.offsetWidth, 50);
+
+    ancestry.style.height = "500px";
+    assert_equals(keg.offsetWidth, 20);
+  }, "inline-size containment only");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/inline-size-containment.html b/testing/web-platform/tests/css/css-contain/container-queries/inline-size-containment.html
new file mode 100644
index 0000000000..d519322bd2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/inline-size-containment.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<title>CSS Container Queries Test: query of inline-size container is affected by min-width property</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<style>
+  #keg { container-type: inline-size; }
+  @container (max-width: 200px) {
+    #target { height: 400px; }
+  }
+  @container (min-width: 400px) {
+    #target { height: 20px; }
+  }
+</style>
+<div id="ancestry">
+  <div id="keg">
+    <div id="target">
+      <div style="height:50px;"></div>
+    </div>
+  </div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(()=> {
+    ancestry.style.width = "100px";
+    assert_equals(keg.offsetHeight, 400);
+
+    ancestry.style.width = "300px";
+    assert_equals(keg.offsetHeight, 50);
+
+    ancestry.style.width = "500px";
+    assert_equals(keg.offsetHeight, 20);
+  }, "inline-size containment only");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/inner-first-line-non-matching-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/inner-first-line-non-matching-ref.html
new file mode 100644
index 0000000000..99e9c334bf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/inner-first-line-non-matching-ref.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<div style="color:green">This text should be green.</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/inner-first-line-non-matching.html b/testing/web-platform/tests/css/css-contain/container-queries/inner-first-line-non-matching.html
new file mode 100644
index 0000000000..5f39124e51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/inner-first-line-non-matching.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>CSS Container Queries Test: Non-matching ::first-line in @container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="match" href="inner-first-line-non-matching-ref.html">
+<style>
+  #outer::first-line { color: green }
+  @container (width > 99999px) {
+    #inner::first-line { color: red }
+  }
+</style>
+<div id="outer">
+  <div id="inner">This text should be green.</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/layout-dependent-focus.html b/testing/web-platform/tests/css/css-contain/container-queries/layout-dependent-focus.html
new file mode 100644
index 0000000000..a16370ac56
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/layout-dependent-focus.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<title>CSS Container Queries: Input losing focus as a result of a size query</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container {
+    container-type: inline-size;
+    width: 200px;
+  }
+  #container.narrow {
+    width: 100px;
+  }
+  @container (width = 100px) {
+    #inner.hide { visibility: hidden; }
+  }
+</style>
+<div id="outer">
+  <div id="container">
+    <input type="text" id="inner">
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  let hide_test = async_test("Verify that onblur is called on hidden input");
+  onload = () => {
+    inner.addEventListener("blur", () => hide_test.done());
+    inner.focus();
+    inner.className = "hide";
+    container.className = "narrow";
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        hide_test.step(() => assert_unreached("Event listener for 'blur' not called"));
+      });
+    });
+  };
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/multicol-container-001.html b/testing/web-platform/tests/css/css-contain/container-queries/multicol-container-001.html
new file mode 100644
index 0000000000..3032170ac6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/multicol-container-001.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<title>CSS Container Queries Test: Query multicol container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #multicol {
+    container-type: inline-size;
+    width: 400px;
+    column-count: 2;
+    column-gap: 0;
+  }
+  @container (width = 400px) {
+    #first-child { color: green; }
+    #second-child { color: green; }
+  }
+</style>
+<div id="multicol">
+  <div id="first-child">First</div>
+  <div id="second-child">Second</div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    const green = "rgb(0, 128, 0)";
+    assert_equals(getComputedStyle(document.querySelector("#first-child")).color, green);
+    assert_equals(getComputedStyle(document.querySelector("#second-child")).color, green);
+  }, "Children of multicol inline-size container should match inline-size of the container");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/multicol-inside-container.html b/testing/web-platform/tests/css/css-contain/container-queries/multicol-inside-container.html
new file mode 100644
index 0000000000..9fc8393a51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/multicol-inside-container.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<title>CSS Container Queries Test: Multicol inside size container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<style>
+  #container {
+    container-type: size;
+    width: 200px;
+    height: 100px;
+  }
+  @container (width <= 200px) {
+    #multicol {
+      column-count: 2;
+      column-gap: 0;
+    }
+  }
+  #green {
+    display: inline-block;
+    width: 100%;
+    height: 100px;
+    background-color: green;
+    vertical-align: bottom;
+  }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id="container">
+  <div id="multicol"><div id="green"></div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/nested-query-containers.html b/testing/web-platform/tests/css/css-contain/container-queries/nested-query-containers.html
new file mode 100644
index 0000000000..83cc3c2fec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/nested-query-containers.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<title>Nested query containers affecting each other</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  body > section {
+    contain: strict;
+    width: 500px;
+  }
+</style>
+<body>
+<script>
+promise_setup(() => {
+  assert_implements_container_queries();
+  return new Promise(resolve => {
+    addEventListener("load", () => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          document.body.className = "run";
+          resolve();
+        });
+      });
+    }, {once: true});
+  });
+});
+
+function booleanTuples(n) {
+  const tuple = new Array(n);
+  function* recursion(i) {
+    if (i == n) {
+      yield tuple.slice();
+      return;
+    }
+    tuple[i] = false;
+    yield* recursion(i + 1);
+    tuple[i] = true;
+    yield* recursion(i + 1);
+  }
+  return recursion(0);
+}
+
+// The following display values evaluate container queries to unknown.
+const testCases = [
+  {
+    display: "inline",
+    expected: {
+      width: depth => depth % 2 ? 0 : 500 - depth,
+      height: depth => 0,
+    },
+  },
+  {
+    display: "contents",
+    expected: {
+      width: depth => depth % 2 ? 0 : 500 - depth,
+      height: depth => 0,
+    },
+  },
+  {
+    display: "table-cell",
+    expected: {
+      width: depth => depth % 2 ? 2 : 0,
+      height: depth => depth % 2 ? 2 : 0,
+    },
+  },
+  {
+    display: "table",
+    expected: {
+      width: depth => depth % 2 ? 4 : 0,
+      height: depth => depth % 2 ? 4 : 0,
+    },
+  },
+];
+
+let testNum = 1;
+for (let testCase of testCases) {
+  for (let tuple of booleanTuples(3)) {
+    const section = document.createElement("section");
+    const id = "test" + testNum;
+    section.id = id;
+    const style = document.createElement("style");
+    style.textContent = `
+      :where(body${tuple[0] ? ".run" : ""}) > #${id} {
+        container-type: size;
+        container-name: name;
+      }
+      :where(body${tuple[1] ? ".run" : ""}) > #${id} div {
+        container-type: size;
+        container-name: name;
+        border: solid;
+        border-width: 1px;
+      }
+      @container name (width >= 0) {
+        :where(body${tuple[2] ? ".run" : ""}) > #${id} div {
+          display: ${testCase.display};
+          border-style: dotted;
+        }
+      }
+    `;
+    section.appendChild(style);
+    section.insertAdjacentHTML(
+      "beforeend",
+      "<div><div><div><div><div><div></div></div></div></div></div></div>"
+    );
+    document.body.appendChild(section);
+    promise_test(async function() {
+      let div = section.querySelector("div");
+      let depth = 1;
+      while (div) {
+        const cs = getComputedStyle(div);
+        assert_equals(cs.display, depth % 2 ? testCase.display : "block");
+        assert_equals(cs.borderStyle, depth % 2 ? "dotted" : "solid", "borderStyle");
+        assert_equals(div.clientWidth, testCase.expected.width(depth), "clientWidth");
+        assert_equals(div.clientHeight, testCase.expected.height(depth), "clientHeight");
+        div = div.firstElementChild;
+        depth += 1;
+      }
+    }, id + " - " + testCase.display + " - 0b" + tuple.map(Number).join(""));
+    testNum += 1;
+  }
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/never-match-container.html b/testing/web-platform/tests/css/css-contain/container-queries/never-match-container.html
new file mode 100644
index 0000000000..9d5ff6d227
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/never-match-container.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<title>CSS Container Queries Test: @container querying size of elements without layout containment</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<script>
+  setup(() => assert_implements_container_queries());
+</script>
+<style>
+  #outer-container {
+    width: 100px;
+    container-type: inline-size;
+  }
+  #container-inline, #svg-container {
+    width: 100px;
+    container-type: inline-size;
+  }
+  @container (width >= 0px) {
+    #inner { color: red; }
+    #svg-inner { fill: red; }
+  }
+</style>
+<div id="outer-container">
+  <span id="container-inline">
+    <span id="inner">Not red</span>
+  </span>
+  <svg>
+    <g id="svg-container">
+      <text x="0" y="20" id="svg-inner">Not red</text>
+    </g>
+  </svg>
+</div>
+<script>
+  const red = "rgb(255, 0, 0)";
+
+  test(() => {
+    assert_not_equals(getComputedStyle(inner).color, red);
+  }, "Size @container query against inline box never matches");
+
+  test(() => {
+    assert_not_equals(getComputedStyle(document.querySelector("#svg-inner")).fill, red);
+  }, "Size @container query against svg element never matches");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/orthogonal-wm-container-query.html b/testing/web-platform/tests/css/css-contain/container-queries/orthogonal-wm-container-query.html
new file mode 100644
index 0000000000..1ad52bf499
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/orthogonal-wm-container-query.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<title>CSS Container Queries Test: Orthogonal writing-mode change in @container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  #container {
+    container-type: size;
+    width: 50vw;
+    height: 50vh;
+  }
+  #orthogonal {
+    font: 50px/1 Ahem;
+  }
+  @container (max-width: 100px) {
+    #orthogonal {
+      writing-mode: vertical-lr;
+    }
+  }
+</style>
+<div id="container">
+  <div id="orthogonal">XX</div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(orthogonal.offsetWidth, container.offsetWidth);
+  }, "Initial non-orthogonal width");
+
+  test(() => {
+    container.style.width = "100px";
+    assert_equals(orthogonal.offsetWidth, 50);
+    assert_not_equals(orthogonal.offsetWidth, container.offsetWidth);
+  }, "Orthogonal width");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/percentage-padding-orthogonal.html b/testing/web-platform/tests/css/css-contain/container-queries/percentage-padding-orthogonal.html
new file mode 100644
index 0000000000..5fc591a668
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/percentage-padding-orthogonal.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<title>CSS Container Queries Test: @container queries affecting height affecting percentage padding</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #vertical {
+    width: 500px;
+    writing-mode: vertical-lr;
+  }
+
+  #padded {
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 100%;
+    background-color: orange;
+  }
+
+  #horizontal {
+    writing-mode: horizontal-tb;
+    width: 100%;
+  }
+
+  #container {
+    width: 100%;
+    container-type: inline-size;
+    background-color: green;
+  }
+
+  #first, #second { height: 50px; }
+
+  @container (width <= 400px) {
+    #second { display: none; }
+  }
+</style>
+<div id="vertical">
+  <div id="padded">
+    <div id="horizontal">
+      <div id="container">
+        <div id="first"></div>
+        <div id="second"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => assert_equals(padded.offsetHeight, 100),
+       "#container height measured with 500px width. Both container children visible");
+  test(() => assert_equals(container.offsetWidth, 400),
+       "#container width 400px after padding is applied.");
+  test(() => assert_equals(container.offsetHeight, 50),
+       "#container width 400px after padding is applied. #second is removed from the rendering");
+
+  // Reduce width by 1px to test that a re-layout is not stateful.
+  vertical.style.width = "399px";
+
+  test(() => assert_equals(padded.offsetHeight, 100),
+       "#container height measured with 499px width. Both container children visible");
+  test(() => assert_equals(container.offsetWidth, 399),
+       "#container width 399px after padding is applied. #second is removed from the rendering");
+  test(() => assert_equals(container.offsetHeight, 50),
+       "#container width 399x after padding is applied. #second is removed from the rendering");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-001.html b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-001.html
new file mode 100644
index 0000000000..0baef0bfc2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-001.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<title>CSS Container Queries Test: Container for elements with pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  :root {
+    color: black;
+  }
+
+  .container {
+    container-type: size;
+    width: 200px;
+    height: 40px;
+  }
+
+  @container (min-width: 300px) {
+    #container1 div::before { content: "before"; }
+    #container1 div::after { content: "after"; }
+    #container2 li::marker { color: green; }
+  }
+</style>
+<main id=container1 class=container>
+  <div>test</div>
+</main>
+<main id=container2 class=container>
+  <ol>
+    <li>One</li>
+  </ol>
+</main>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(function() {
+    let div = document.querySelector('#container1 > div');
+    assert_equals(getComputedStyle(div, '::before').content, 'none');
+    assert_equals(getComputedStyle(div, '::after').content, 'none');
+
+    container1.style.width = '300px';
+    assert_equals(getComputedStyle(div, '::before').content, '"before"');
+    assert_equals(getComputedStyle(div, '::after').content, '"after"');
+
+    container1.style = '';
+    assert_equals(getComputedStyle(div, '::before').content, 'none');
+    assert_equals(getComputedStyle(div, '::after').content, 'none');
+  }, 'Pseudo-elements ::before and ::after respond to container size changes');
+
+  test(function() {
+    let li = document.querySelector('#container2 li');
+    assert_equals(getComputedStyle(li, '::marker').color, 'rgb(0, 0, 0)');
+
+    container2.style.width = '300px';
+    assert_equals(getComputedStyle(li, '::marker').color, 'rgb(0, 128, 0)');
+
+    container2.style = '';
+    assert_equals(getComputedStyle(li, '::marker').color, 'rgb(0, 0, 0)');
+  }, 'Pseudo-element ::marker responds to container size changes');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-002-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-002-ref.html
new file mode 100644
index 0000000000..9dc6c572b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-002-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>CSS Test Reference</title>
+<div>PASS</div>
+<div>PASS</div>
+<div>PASS</div>
+<div>PASS</div>
+<div><span style="color:green">P</span>ASS if P is green.</div>
+<div><span style="color:green">P</span>ASS if P is green.</div>
+<div><span style="color:green">P</span>ASS if P is green.</div>
+<div><span style="color:green">P</span>ASS if P is green.</div>
+<div style="color:green">PASS if text is green.</div>
+<div style="color:green">PASS if text is green.</div>
+<div style="color:green">PASS if text is green.</div>
+<div style="color:green">PASS if text is green.</div>
+<div style="color:green">PASS if text is green.</div>
+<div style="color:green">PASS if text is green.</div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-002.html b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-002.html
new file mode 100644
index 0000000000..96e7db40ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-002.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<title>CSS Container Queries Test: Container for pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="match" href="pseudo-elements-002-ref.html">
+<style>
+  .container { container-type: inline-size; }
+
+  @container (max-width: 100px) { #c1::before { content: "PASS" } }
+  @container (min-width: 150px) { #c1::before { content: "FAIL" } }
+
+  @container (max-width: 100px) { #c2::before { content: "PASS" } }
+  @container (min-width: 150px) { #c2::before { content: "FAIL" } }
+
+  @container (max-width: 100px) { #c3::after { content: "PASS" } }
+  @container (min-width: 150px) { #c3::after { content: "FAIL" } }
+
+  @container (max-width: 100px) { #c4::after { content: "PASS" } }
+  @container (min-width: 150px) { #c4::after { content: "FAIL" } }
+
+  @container (max-width: 300px) { #c5::first-letter { color: green } }
+  @container (max-width: 300px) { #c6::first-letter { color: green } }
+
+  @container (min-width: 400px) { #c7::first-letter { color: green } }
+  @container (min-width: 400px) { #c8::first-letter { color: green } }
+
+  @container (max-width: 300px) { #c9::first-line { color: green } }
+  @container (max-width: 300px) { #c10::first-line { color: green } }
+
+  @container (min-width: 400px) { #c11::first-line { color: green } }
+  @container (min-width: 400px) { #c12::first-line { color: green } }
+
+  #c13::first-line { color: red }
+  @container (min-width: 400px) { #c13::first-line { color: green } }
+  @container (min-width: 400px) { #c14::first-line { color: green } }
+</style>
+<div id="c1" class="container" style="width:100px"></div>
+<div id="c2" class="container" style="width:200px"></div>
+<div id="c3" class="container" style="width:100px"></div>
+<div id="c4" class="container" style="width:200px"></div>
+<div class="container" style="width:400px">
+  <div id="c5" class="container" style="width:300px">PASS if P is green.</div>
+</div>
+<div class="container" style="width:400px">
+  <div id="c6" class="container" style="width:400px">PASS if P is green.</div>
+</div>
+<div id="c7" class="container" style="width:400px">
+  <div class="container" style="width:300px">PASS if P is green.</div>
+</div>
+<div id="c8" class="container" style="width:300px">
+  <div class="container" style="width:300px">PASS if P is green.</div>
+</div>
+<div class="container" style="width:400px">
+  <div id="c9" class="container" style="width:300px">PASS if text is green.</div>
+</div>
+<div class="container" style="width:400px">
+  <div id="c10" class="container" style="width:400px">PASS if text is green.</div>
+</div>
+<div id="c11" class="container" style="width:400px">
+  <div class="container" style="width:300px">PASS if text is green.</div>
+</div>
+<div id="c12" class="container" style="width:300px">
+  <div class="container" style="width:300px">PASS if text is green.</div>
+</div>
+<div id="c13" class="container" style="width:300px">PASS if text is green.</div>
+<div id="c14" class="container" style="width:300px">PASS if text is green.</div>
+<script>
+  document.body.offsetTop;
+  c2.style.width = "100px";
+  c4.style.width = "100px";
+  c6.style.width = "300px";
+  c8.style.width = "400px";
+  c10.style.width = "300px";
+  c12.style.width = "400px";
+  c13.style.width = "400px";
+  c14.style.width = "400px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-003.html b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-003.html
new file mode 100644
index 0000000000..2d7647f710
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-003.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<title>@container: originating element container for pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  .container { container-type: inline-size; }
+  #target { display: list-item; }
+  @container (max-width: 200px) {
+    #target::before { content: "PASS"; color: green; }
+    #target::after { color: green; }
+    #target::marker { color: green; }
+    #target::first-line { color: green; }
+    #target::first-letter { color: green; }
+  }
+  @container ((min-width: 300px) and (max-width: 350px)) {
+    #outer::first-line { color: green; }
+    #outer::first-letter { color: green; }
+  }
+  dialog::backdrop { background-color: lime; }
+  @container (max-width: 100px) {
+    dialog::backdrop { background-color: green; }
+  }
+</style>
+<div style="width: 400px" class="container">
+  <div style="width: 300px" class="container">
+    <div id="target" class="container" style="width: 200px">First-line</div>
+    <dialog id="dialog" class="container" style="width: 100px"></dialog>
+  </div>
+  <div style="width: 400px" class="container">
+    <div id="outer" style="width: 300px" class="container">
+      <div class="container" style="width: 200px">First-line</div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const green = "rgb(0, 128, 0)";
+  const lime = "rgb(0, 255, 0)";
+
+  test(() => {
+    assert_equals(getComputedStyle(target, "::before").color, green);
+  }, "Originating element container for ::before");
+  test(() => {
+    assert_equals(getComputedStyle(target, "::after").color, green);
+  }, "Originating element container for ::after");
+  test(() => {
+    assert_equals(getComputedStyle(target, "::marker").color, green);
+  }, "Originating element container for ::marker");
+  test(() => {
+    assert_equals(getComputedStyle(target, "::first-line").color, green);
+  }, "Originating element container for ::first-line");
+  test(() => {
+    assert_equals(getComputedStyle(target, "::first-letter").color, green);
+  }, "Originating element container for ::first-letter");
+  test(() => {
+    assert_equals(getComputedStyle(outer, "::first-line").color, green);
+  }, "Originating element container for outer ::first-line");
+  test(() => {
+    assert_equals(getComputedStyle(outer, "::first-letter").color, green);
+  }, "Originating element container for outer ::first-letter");
+  test((t) => {
+    t.add_cleanup(() => dialog.close());
+    assert_equals(getComputedStyle(dialog, "::backdrop").backgroundColor, lime, "::backdrop not rendered");
+    dialog.showModal();
+    assert_equals(getComputedStyle(dialog, "::backdrop").backgroundColor, green, "::backdrop rendered");
+  }, "Originating element container for ::backdrop");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-004.html b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-004.html
new file mode 100644
index 0000000000..db199f2205
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-004.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<title>@container: originating element container for pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #target { container-type: inline-size; }
+  #target::before,
+  #target::after,
+  #target::marker,
+  #target::first-line,
+  #target::first-letter,
+  #target::backdrop {
+    color: red;
+  }
+  @container (width >= 300px) {
+    #target::before,
+    #target::after,
+    #target::marker,
+    #target::first-line,
+    #target::first-letter,
+    #target::backdrop {
+      color: green;
+    }
+  }
+</style>
+<div id="outer" style="width: 200px">
+  <div id="target"></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const green = "rgb(0, 128, 0)";
+  const red = "rgb(255, 0, 0)";
+
+  const pseudo_elements = ["::before", "::after", "::marker", "::first-line", "::first-letter", "::backdrop"];
+
+  pseudo_elements.forEach((pseudo_element) => {
+    test(() => {
+      assert_equals(getComputedStyle(target, pseudo_element).color, red);
+    }, `Initial color for ${pseudo_element}`);
+  });
+
+  outer.style.width = "300px";
+
+  pseudo_elements.forEach((pseudo_element) => {
+    test(() => {
+      assert_equals(getComputedStyle(target, pseudo_element).color, green);
+    }, `Color for ${pseudo_element} depending on container`);
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-005.html b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-005.html
new file mode 100644
index 0000000000..575b66d6f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-005.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<title>CSS Container Queries Test: Style container for pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #c1 {
+    --theme: green;
+  }
+  @container style(--theme: green) {
+    #c1::before {
+      content: "";
+      color: green;
+      display: block;
+      height: 100px;
+    }
+  }
+</style>
+<div id="c1"></div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    let style = getComputedStyle(c1, "::before");
+    assert_equals(style.color, "rgb(0, 128, 0)");
+    assert_equals(style.height, "100px");
+  }, "::before pseudo element querying style() of originating element");
+</script>
+
+<style>
+  #c2 {
+    --theme: red;
+  }
+  #c2::before { color: red }
+  #c2.green {
+    --theme: green;
+  }
+  @container style(--theme: green) {
+    #c2::before {
+      content: "";
+      color: green;
+    }
+  }
+</style>
+<div id="c2"></div>
+<script>
+  test(() => {
+    let style = getComputedStyle(c2, "::before");
+    assert_equals(style.color, "rgb(255, 0, 0)");
+  }, "::before pseudo element not matching style()");
+
+  test(() => {
+    c2.className = "green";
+    let style = getComputedStyle(c2, "::before");
+    assert_equals(style.color, "rgb(0, 128, 0)");
+  }, "::before pseudo element matching style() query after class change");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-006.html b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-006.html
new file mode 100644
index 0000000000..65aee97f75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-006.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<title>@container: originating element container for pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  .container { container-type: inline-size; }
+  #target { display: list-item; }
+  @container (max-width: 200px) {
+    #target::before { content: "PASS"; font-size: 10cqw; }
+    #target::after { font-size: 10cqw; }
+    #target::marker { font-size: 10cqw; }
+    #target::first-line { font-size: 10cqw; }
+    #target::first-letter { font-size: 10cqw; }
+  }
+  @container ((min-width: 300px) and (max-width: 350px)) {
+    #outer::first-line { font-size: 10cqw; }
+    #outer::first-letter { font-size: 10cqw; }
+  }
+  dialog::backdrop { font-size: 0px; }
+  @container (max-width: 100px) {
+    dialog::backdrop { font-size: 10cqw; }
+  }
+</style>
+<div style="width: 400px" class="container">
+  <div style="width: 300px" class="container">
+    <div id="target" class="container" style="width: 200px">First-line</div>
+    <dialog id="dialog" class="container" style="width: 100px"></dialog>
+  </div>
+  <div style="width: 400px" class="container">
+    <div id="outer" style="width: 300px" class="container">
+      <div class="container" style="width: 200px">First-line</div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(target, "::before").fontSize, "20px");
+  }, "Originating element container for ::before");
+  test(() => {
+    assert_equals(getComputedStyle(target, "::after").fontSize, "20px");
+  }, "Originating element container for ::after");
+  test(() => {
+    assert_equals(getComputedStyle(target, "::marker").fontSize, "20px");
+  }, "Originating element container for ::marker");
+  test(() => {
+    assert_equals(getComputedStyle(target, "::first-line").fontSize, "20px");
+  }, "Originating element container for ::first-line");
+  test(() => {
+    assert_equals(getComputedStyle(target, "::first-letter").fontSize, "20px");
+  }, "Originating element container for ::first-letter");
+  test(() => {
+    assert_equals(getComputedStyle(outer, "::first-line").fontSize, "30px");
+  }, "Originating element container for outer ::first-line");
+  test(() => {
+    assert_equals(getComputedStyle(outer, "::first-letter").fontSize, "30px");
+  }, "Originating element container for outer ::first-letter");
+  test((t) => {
+    t.add_cleanup(() => dialog.close());
+    assert_equals(getComputedStyle(dialog, "::backdrop").fontSize, "0px", "::backdrop not rendered");
+    dialog.showModal();
+    assert_equals(getComputedStyle(dialog, "::backdrop").fontSize, "10px", "::backdrop rendered");
+  }, "Originating element container for ::backdrop");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-007.html b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-007.html
new file mode 100644
index 0000000000..951f4226f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-007.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<title>@container: originating element container for pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #target { container-type: inline-size; }
+  #target::before,
+  #target::after,
+  #target::marker,
+  #target::first-line,
+  #target::first-letter,
+  #target::backdrop {
+    font-size: 0px;
+  }
+  @container (width >= 300px) {
+    #target::before,
+    #target::after,
+    #target::marker,
+    #target::first-line,
+    #target::first-letter,
+    #target::backdrop {
+      font-size: 10cqw;
+    }
+  }
+</style>
+<div id="outer" style="width: 200px">
+  <div id="target"></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const pseudo_elements = ["::before", "::after", "::marker", "::first-line", "::first-letter", "::backdrop"];
+
+  pseudo_elements.forEach((pseudo_element) => {
+    test(() => {
+      assert_equals(getComputedStyle(target, pseudo_element).fontSize, "0px");
+    }, `Initial font-size for ${pseudo_element}`);
+  });
+
+  outer.style.width = "300px";
+
+  pseudo_elements.forEach((pseudo_element) => {
+    test(() => {
+      assert_equals(getComputedStyle(target, pseudo_element).fontSize, "30px");
+    }, `font-size for ${pseudo_element} depending on container`);
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-008.html b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-008.html
new file mode 100644
index 0000000000..1d722a46b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/pseudo-elements-008.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<title>@container: originating element container for pseudo elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  .container { container-type: inline-size; }
+  #target { display: list-item; }
+  #target::before { content: "PASS"; font-size: 10cqw; }
+  #target::after { font-size: 10cqw; }
+  #target::marker { font-size: 10cqw; }
+  #target::first-line { font-size: 10cqw; }
+  #target::first-letter { font-size: 10cqw; }
+  #outer::first-line { font-size: 10cqw; }
+  #outer::first-letter { font-size: 10cqw; }
+  dialog::backdrop { font-size: 10cqw; }
+</style>
+<div style="width: 400px" class="container">
+  <div style="width: 300px" class="container">
+    <div id="target" class="container" style="width: 200px">First-line</div>
+    <dialog id="dialog" class="container" style="width: 100px"></dialog>
+  </div>
+  <div style="width: 400px" class="container">
+    <div id="outer" style="width: 300px" class="container">
+      <div class="container" style="width: 200px">First-line</div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(target, "::before").fontSize, "20px");
+  }, "Originating element container for ::before");
+  test(() => {
+    assert_equals(getComputedStyle(target, "::after").fontSize, "20px");
+  }, "Originating element container for ::after");
+  test(() => {
+    assert_equals(getComputedStyle(target, "::marker").fontSize, "20px");
+  }, "Originating element container for ::marker");
+  test(() => {
+    assert_equals(getComputedStyle(target, "::first-line").fontSize, "20px");
+  }, "Originating element container for ::first-line");
+  test(() => {
+    assert_equals(getComputedStyle(target, "::first-letter").fontSize, "20px");
+  }, "Originating element container for ::first-letter");
+  test(() => {
+    assert_equals(getComputedStyle(outer, "::first-line").fontSize, "30px");
+  }, "Originating element container for outer ::first-line");
+  test(() => {
+    assert_equals(getComputedStyle(outer, "::first-letter").fontSize, "30px");
+  }, "Originating element container for outer ::first-letter");
+  test((t) => {
+    t.add_cleanup(() => dialog.close());
+    assert_equals(getComputedStyle(dialog, "::backdrop").fontSize, "30px", "::backdrop not rendered");
+    dialog.showModal();
+    assert_equals(getComputedStyle(dialog, "::backdrop").fontSize, "10px", "::backdrop rendered");
+  }, "Originating element container for ::backdrop");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/query-content-box.html b/testing/web-platform/tests/css/css-contain/container-queries/query-content-box.html
new file mode 100644
index 0000000000..5f6cc9fdbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/query-content-box.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<title>CSS Container Queries Test: Size queries match content-box</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  .container {
+    container-type: size;
+    border: 10px solid black;
+    padding: 40px;
+    margin: 20px;
+  }
+
+  #container1 {
+    box-sizing: content-box;
+    width: 100px;
+    height: 100px;
+  }
+
+  #container2 {
+    box-sizing: border-box;
+    width: 200px;
+    height: 200px;
+  }
+
+  #container3 {
+    box-sizing: content-box;
+    width: 100px;
+    height: 100px;
+    overflow: scroll;
+  }
+
+  #container4 {
+    box-sizing: border-box;
+    width: 200px;
+    height: 200px;
+    overflow: scroll;
+  }
+
+  @container ((width = 100px) and (height = 100px)) {
+    .target {
+      background-color: green;
+      height: 100%;
+    }
+  }
+</style>
+<div id="container1" class="container">
+  <div class="target"></div>
+</div>
+<div id="container2" class="container">
+  <div class="target"></div>
+</div>
+<div id="container3" class="container">
+  <div class="target"></div>
+</div>
+<div id="container4" class="container">
+  <div class="target"></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const green = "rgb(0, 128, 0)";
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#container1 > .target")).backgroundColor, green);
+  }, "Size queries with content-box sizing");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#container2 > .target")).backgroundColor, green);
+  }, "Size queries with border-box sizing");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#container3 > .target")).backgroundColor, green);
+  }, "Size queries with content-box sizing and overflow:scroll");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#container4 > .target")).backgroundColor, green);
+  }, "Size queries with border-box sizing and overflow:scroll");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/query-evaluation.html b/testing/web-platform/tests/css/css-contain/container-queries/query-evaluation.html
new file mode 100644
index 0000000000..67139d02d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/query-evaluation.html
@@ -0,0 +1,136 @@
+<!doctype html>
+<title>Evaluation of queries</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-rule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container {
+    width: 1px;
+    height: 0px;
+    container-type: size;
+    --applied:false;
+  }
+</style>
+<div id=container>
+  <div id=inner></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  function test_query(query, expected) {
+    test((t) => {
+      let style = document.createElement('style');
+      t.add_cleanup(() => { style.remove(); });
+      style.innerText = `@container ${query} { #inner { --applied:true; } }`;
+      let cs = getComputedStyle(inner);
+      assert_equals(cs.getPropertyValue('--applied'), 'false');
+      document.head.append(style);
+      assert_equals(cs.getPropertyValue('--applied'), expected.toString());
+    }, query);
+  };
+
+  // We don't care about specific features in this file, only higher level
+  // evaluation like "and", "or", and so forth. The features "width", "height"
+  // and "unknown" are arbitrarily chosen to represent true, false, and
+  // unknown values, respectively.
+
+  test_query('(width)', true);
+  test_query('(height)', false);
+  test_query('(unknown)', false);
+  test_query('unknown(width)', false);
+
+  // Nesting in <container-query>:
+  test_query('((width))', true);
+  test_query('((height))', false);
+  test_query('((unknown))', false);
+  test_query('((((width))))', true);
+  test_query('((((height))))', false);
+  test_query('((((unknown))))', false);
+
+  // "not" in <container-query>:
+  test_query('(not (width))', false);
+  test_query('(not (height))', true);
+  test_query('(not (unknown))', false);
+  test_query('(not unknown(width))', false);
+
+  // "and" in <container-query>:
+  test_query('((width) and (width))', true);
+  test_query('((width) and (width) and (width))', true);
+  test_query('((height) and (height))', false);
+  test_query('((height) and (width) and (width))', false);
+  test_query('((width) and (height) and (width))', false);
+  test_query('((width) and (width) and (height))', false);
+  test_query('((unknown) and (width) and (width))', false);
+  test_query('((width) and (unknown) and (width))', false);
+  test_query('((width) and (width) and (unknown))', false);
+
+  // "or" in <container-query>:
+  test_query('((width) or (width))', true);
+  test_query('((width) or (width) or (width))', true);
+  test_query('((height) or (height))', false);
+  test_query('((height) or (width) or (width))', true);
+  test_query('((width) or (height) or (width))', true);
+  test_query('((width) or (width) or (height))', true);
+  test_query('((unknown) or (width) or (width))', true);
+  test_query('((width) or (unknown) or (width))', true);
+  test_query('((width) or (width) or (unknown))', true);
+  test_query('((unknown) or (height) or (width))', true);
+
+  // Combinations, <container-query>:
+  test_query('(not ((width) and (width)))', false);
+  test_query('(not ((width) and (height)))', true);
+  test_query('((width) and (not ((height) or (width))))', false);
+  test_query('((height) or (not ((height) and (width))))', true);
+  test_query('((height) or ((height) and (width)))', false);
+
+  // Note that the following assumes that elements are style containers by
+  // default [1], and that:
+  //
+  // - style(width: 1px) is a query that returns 'true', and
+  // - style(height: 2px) is a query that returns 'false'.
+  //
+  // [1] https://github.com/w3c/csswg-drafts/issues/7066
+
+  // Nesting in <style-query>:
+  test_query('style((width: 1px))', true);
+  test_query('style((height: 2px))', false);
+  test_query('style((unknown))', false);
+  test_query('unknown((width: 1px))', false);
+
+  // "not" in <style-query>:
+  test_query('style(not (width: 1px))', false);
+  test_query('style(not (height: 2px))', true);
+  test_query('style(not (unknown))', false);
+
+  // "and" in <style-query>:
+  test_query('style((width: 1px) and (width: 1px))', true);
+  test_query('style((width: 1px) and (width: 1px) and (width: 1px))', true);
+  test_query('style((height: 2px) and (height: 2px))', false);
+  test_query('style((height: 2px) and (width: 1px) and (width: 1px))', false);
+  test_query('style((width: 1px) and (height: 2px) and (width: 1px))', false);
+  test_query('style((width: 1px) and (width: 1px) and (height: 2px))', false);
+  test_query('style((unknown) and (width: 1px) and (width: 1px))', false);
+  test_query('style((width: 1px) and (unknown) and (width: 1px))', false);
+  test_query('style((width: 1px) and (width: 1px) and (unknown))', false);
+
+  // "or" in <style-query>:
+  test_query('style((width: 1px) or (width: 1px))', true);
+  test_query('style((width: 1px) or (width: 1px) or (width: 1px))', true);
+  test_query('style((height: 2px) or (height: 2px))', false);
+  test_query('style((height: 2px) or (width: 1px) or (width: 1px))', true);
+  test_query('style((width: 1px) or (height: 2px) or (width: 1px))', true);
+  test_query('style((width: 1px) or (width: 1px) or (height: 2px))', true);
+  test_query('style((unknown) or (width: 1px) or (width: 1px))', true);
+  test_query('style((width: 1px) or (unknown) or (width: 1px))', true);
+  test_query('style((width: 1px) or (width: 1px) or (unknown))', true);
+  test_query('style((unknown) or (height: 2px) or (width: 1px))', true);
+
+  // Combinations, <style-query>:
+  test_query('style(not ((width: 1px) and (width: 1px)))', false);
+  test_query('style(not ((width: 1px) and (height: 2px)))', true);
+  test_query('style((width: 1px) and (not ((height: 2px) or (width: 1px))))', false);
+  test_query('style((height: 2px) or (not ((height: 2px) and (width: 1px))))', true);
+  test_query('style((height: 2px) or ((height: 2px) and (width: 1px)))', false);
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/reattach-container-with-dirty-child.html b/testing/web-platform/tests/css/css-contain/container-queries/reattach-container-with-dirty-child.html
new file mode 100644
index 0000000000..680d9caa84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/reattach-container-with-dirty-child.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<title>CSS Container Queries Test: @container changing display type while descendant styles change</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container {
+    container-type: inline-size;
+  }
+  @container (min-width: 200px) {
+    div { color: red }
+  }
+  @container (max-width: 150px) {
+    div { color: lime }
+  }
+</style>
+<div id="container">
+  <div id="child"><span id="inner">XXX</span></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    container.offsetTop;
+    assert_equals(getComputedStyle(child).color, "rgb(255, 0, 0)");
+  }, "Initially wider than 200px");
+
+  test(() => {
+    container.style.width = "100px";
+    container.style.display = "inline-block";
+    inner.style.color = "green";
+    container.offsetTop;
+    assert_equals(getComputedStyle(child).color, "rgb(0, 255, 0)");
+    assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)");
+  }, "Container query changed and inner.style applied");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/resize-while-content-visibility-hidden-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/resize-while-content-visibility-hidden-ref.html
new file mode 100644
index 0000000000..2a87df85b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/resize-while-content-visibility-hidden-ref.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<div style="width:200px;height:200px;background:green"></div>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/resize-while-content-visibility-hidden.html b/testing/web-platform/tests/css/css-contain/container-queries/resize-while-content-visibility-hidden.html
new file mode 100644
index 0000000000..a3658f7f34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/resize-while-content-visibility-hidden.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>CSS Container Queries Test: condition change while content-visibility: hidden</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="resize-while-content-visibility-hidden-ref.html">
+<link rel="assert" content="Container query applies even if container is content-visibility: hidden">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  container-name: container;
+  container-type: size;
+  width: 300px;
+  height: 300px;
+}
+
+#child {
+  width: 200px;
+  height: 200px;
+  background: red;
+}
+
+#container.wide { width: 500px; }
+.locked { content-visibility: hidden; }
+
+@container container (min-width: 400px) { #child { background: green; } }
+</style>
+
+<div id=container>
+  <div id=child></div>
+</div>
+
+<script>
+async function runTest() {
+  await new Promise(requestAnimationFrame);
+  container.classList.add("locked");
+
+  await new Promise(requestAnimationFrame);
+  container.classList.add("wide");
+
+  await new Promise(requestAnimationFrame);
+  container.classList.remove("locked");
+
+  await new Promise(requestAnimationFrame);
+  takeScreenshot();
+}
+
+requestAnimationFrame(() => { requestAnimationFrame(() => runTest()) });
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/sibling-layout-dependency.html b/testing/web-platform/tests/css/css-contain/container-queries/sibling-layout-dependency.html
new file mode 100644
index 0000000000..5e30a998d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/sibling-layout-dependency.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<title>@container-dependent styles respond to layout changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<script>
+  setup(() => assert_implements_container_queries());
+</script>
+<style>
+
+  @container (width: 10px) { .affected { --x:10; } }
+  @container (width: 20px) { .affected { --x:20; } }
+
+  .flex {
+    display: flex;
+    height: 30px;
+    width: 30px;
+  }
+
+  .container {
+    container-type: size;
+    flex: 1;
+    background: tomato;
+  }
+
+  .sibling {
+    background-color: skyblue;
+  }
+  .w10 {
+    width: 10px;
+  }
+  .ahem { font: 5px Ahem; }
+
+  /* The following is just to make the results more human-readable. */
+  main {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+</style>
+
+<main>
+  <!-- A sibling of the container gets a layout-affecting style change -->
+  <div class=flex>
+    <div class=container>
+      <div>
+        <div>
+          <div class=affected id=target1></div>
+        </div>
+      </div>
+    </div>
+    <div class="sibling w10" id=sibling1></div>
+  </div>
+  <script>
+    test(function() {
+      let cs = getComputedStyle(target1);
+      assert_equals(cs.getPropertyValue('--x'), '20');
+
+      sibling1.style.width = '20px';
+      assert_equals(cs.getPropertyValue('--x'), '10');
+    }, 'Sibling style mutation');
+  </script>
+
+  <!-- A sibling of the container gets a layout-affecting style change
+       affecting the parent of the gCS target -->
+  <div class=flex>
+    <div class=container>
+      <div>
+        <div class=affected id=parent2>
+          <div id=target2></div>
+        </div>
+      </div>
+    </div>
+    <div class="sibling w10" id=sibling2></div>
+  </div>
+  <script>
+    test(function() {
+      let cs = getComputedStyle(target2);
+      assert_equals(cs.getPropertyValue('--x'), '20');
+
+      sibling2.style.width = '20px';
+      assert_equals(cs.getPropertyValue('--x'), '10');
+    }, 'Sibling style mutation, parent is affected');
+  </script>
+
+<!-- A sibling of the container gets a layout-affecting style change
+       affecting an ancestor of the gCS target -->
+  <div class=flex>
+    <div class=container>
+      <div class=affected id=ancestor3>
+        <div>
+          <div id=target3></div>
+        </div>
+      </div>
+    </div>
+    <div class="sibling w10" id=sibling3></div>
+  </div>
+  <script>
+    test(function() {
+      let cs = getComputedStyle(target3);
+      assert_equals(cs.getPropertyValue('--x'), '20');
+
+      sibling3.style.width = '20px';
+      assert_equals(cs.getPropertyValue('--x'), '10');
+    }, 'Sibling style mutation, ancestor is affected');
+  </script>
+
+  <!-- A sibling of the container needs layout via text mutation -->
+  <div class=flex>
+    <div class=container>
+      <div>
+        <div>
+          <div class=affected id=target4></div>
+        </div>
+      </div>
+    </div>
+    <div class="sibling ahem" id=sibling4>XX</div>
+  </div>
+  <script>
+    promise_test(async function() {
+      await document.fonts.ready;
+
+      let cs = getComputedStyle(target4);
+      assert_equals(cs.getPropertyValue('--x'), '20');
+
+      sibling4.textContent = 'XXXX';
+      assert_equals(cs.getPropertyValue('--x'), '10');
+    }, 'Sibling text mutation');
+  </script>
+
+</main>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/size-container-no-principal-box.html b/testing/web-platform/tests/css/css-contain/container-queries/size-container-no-principal-box.html
new file mode 100644
index 0000000000..4bff0681ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/size-container-no-principal-box.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<title>CSS Container Queries Test: size container types apply to elements without a principal box</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #outer {
+    container-type: inline-size;
+  }
+  #inner_none {
+    display: none;
+    container-type: inline-size;
+  }
+  #inner_contents {
+    display: contents;
+    container-type: inline-size;
+  }
+  @container (min-width: 0) {
+    span { color: red; }
+  }
+  @container (min-width: 0) {
+    #ref { color: green; }
+  }
+  @container not (max-width: 0) {
+    span { background-color: red; }
+  }
+  @container not (max-width: 0) {
+    #ref { background-color: green; }
+  }
+</style>
+<div id="outer">
+  <div id="ref"></div>
+  <div id="inner_none"><span></span></div>
+  <div id="inner_contents"><span></span></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(ref).color, "rgb(0, 128, 0)");
+  }, "(min-width: 0) can match a container with a principal box");
+
+  test(() => {
+    assert_equals(getComputedStyle(inner_none.firstChild).color, "rgb(0, 0, 0)");
+  }, "(min-width: 0) does not match a container without a principal box (display:none)");
+
+  test(() => {
+    assert_equals(getComputedStyle(inner_contents.firstChild).color, "rgb(0, 0, 0)");
+  }, "(min-width: 0) does not match a container without a principal box (display:contents)");
+
+  test(() => {
+    assert_equals(getComputedStyle(ref).backgroundColor, "rgb(0, 128, 0)");
+  }, "not (max-width: 0) can match a container with a principal box");
+
+  test(() => {
+    assert_equals(getComputedStyle(inner_none.firstChild).backgroundColor, "rgba(0, 0, 0, 0)");
+  }, "not (max-width: 0) does not match a container without a principal box (display:none)");
+
+  test(() => {
+    assert_equals(getComputedStyle(inner_contents.firstChild).backgroundColor, "rgba(0, 0, 0, 0)");
+  }, "not (max-width: 0) does not match a container without a principal box (display:contents)");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/size-feature-evaluation.html b/testing/web-platform/tests/css/css-contain/container-queries/size-feature-evaluation.html
new file mode 100644
index 0000000000..600a266fce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/size-feature-evaluation.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<title>Evaluation of size features</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+
+<div id=container>
+  <div id=target>
+    Test
+  </div>
+</div>
+
+<script>
+setup(() => assert_implements_container_queries());
+
+function test_evaluation(container_class, query, expected) {
+  test(function(t) {
+    let style_node = document.createElement('style');
+    t.add_cleanup(() => {
+      container.classList.remove(container_class);
+      style_node.remove();
+    });
+    style_node.innerText = `@container ${query} { #target { --applied:true; } }`;
+
+    assert_equals(getComputedStyle(target).getPropertyValue('--applied'), '');
+    container.classList.add(container_class);
+    document.head.append(style_node);
+    assert_equals(getComputedStyle(target).getPropertyValue('--applied'), expected ? 'true' : '');
+  }, `${query} (.${container_class})`);
+}
+
+</script>
+
+<style>
+  .horizontal {
+    width: 100px;
+    height: 200px;
+    container-type: size;
+  }
+
+  .vertical {
+    width: 100px;
+    height: 200px;
+    container-type: size;
+    writing-mode: vertical-rl;
+  }
+</style>
+<script>
+
+  for (let cls of ['horizontal', 'vertical']) {
+
+    let logical_width = (cls == 'horizontal') ? 'inline' : 'block';
+    let logical_height = (cls == 'horizontal') ? 'block' : 'inline';
+
+    test_evaluation(cls, '(width < 100px)', false);
+    test_evaluation(cls, '(width >= 100px)', true);
+    test_evaluation(cls, '(min-width: 100px)', true);
+    test_evaluation(cls, '(min-width: 101px)', false);
+    test_evaluation(cls, '(max-width: 100px)', true);
+    test_evaluation(cls, '(max-width: 99px)', false);
+
+    test_evaluation(cls, '(height < 200px)', false);
+    test_evaluation(cls, '(height >= 200px)', true);
+    test_evaluation(cls, '(min-height: 200px)', true);
+    test_evaluation(cls, '(min-height: 201px)', false);
+    test_evaluation(cls, '(max-height: 200px)', true);
+    test_evaluation(cls, '(max-height: 199px)', false);
+
+    test_evaluation(cls, `(${logical_width}-size < 100px)`, false);
+    test_evaluation(cls, `(${logical_width}-size >= 100px)`, true);
+    test_evaluation(cls, `(min-${logical_width}-size: 100px)`, true);
+    test_evaluation(cls, `(min-${logical_width}-size: 101px)`, false);
+    test_evaluation(cls, `(max-${logical_width}-size: 100px)`, true);
+    test_evaluation(cls, `(max-${logical_width}-size: 99px)`, false);
+
+    test_evaluation(cls, `(${logical_height}-size < 200px)`, false);
+    test_evaluation(cls, `(${logical_height}-size >= 200px)`, true);
+    test_evaluation(cls, `(min-${logical_height}-size: 200px)`, true);
+    test_evaluation(cls, `(min-${logical_height}-size: 201px)`, false);
+    test_evaluation(cls, `(max-${logical_height}-size: 200px)`, true);
+    test_evaluation(cls, `(max-${logical_height}-size: 199px)`, false);
+
+    test_evaluation(cls, '(orientation: landscape)', false);
+    test_evaluation(cls, '(orientation: portrait)', true);
+
+    test_evaluation(cls, '(aspect-ratio: 1/2)', true);
+    test_evaluation(cls, '(aspect-ratio: 2/1)', false);
+  }
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/style-change-in-container.html b/testing/web-platform/tests/css/css-contain/container-queries/style-change-in-container.html
new file mode 100644
index 0000000000..ed4baa7e8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/style-change-in-container.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<title>CSS Container Queries Test: recompute style inside a @container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container { container-type: size; }
+  @container (min-width: 1px) {
+    #content { color: green; }
+  }
+</style>
+<div id="container">
+  <div id="content"></div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  let content = document.getElementById("content");
+
+  test(() => {
+    assert_equals(getComputedStyle(content).color, "rgb(0, 128, 0)");
+
+    // Dirty style of an element inside the container:
+    content.style.backgroundColor = "lime";
+
+    // The container query should still evaluate correctly:
+    assert_equals(getComputedStyle(content).color, 'rgb(0, 128, 0)');
+  }, "Basic test for container query evaluation stability");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/style-not-sharing-float.html b/testing/web-platform/tests/css/css-contain/container-queries/style-not-sharing-float.html
new file mode 100644
index 0000000000..7c76bb32bf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/style-not-sharing-float.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<title>CSS Container Queries Test: Check style is not sharing between cousins in the case of Container Queries</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  .float {
+    float: left;
+    width: 25px;
+    height: 25px;
+  }
+  .item {
+    container-type: inline-size;
+    height: 25px;
+  }
+  @container (width >= 50px) {
+    .item div { color: lime; }
+  }
+  @container (width >= 150px) {
+    .item div { color: green; }
+  }
+</style>
+<div style="width: 150px">
+  <div class="float"></div>
+  <div class="item">
+    <div id="target1"></div>
+  </div>
+  <div class="item">
+    <div id="target2"></div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(target1).color, "rgb(0, 255, 0)", "Second item container should be 100px wide");
+    assert_equals(getComputedStyle(target2).color, "rgb(0, 128, 0)", "First item container should be 200px wide");
+  }, "Check that style is not sharing in the case of Container Queries");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/support/cq-testcommon.js b/testing/web-platform/tests/css/css-contain/container-queries/support/cq-testcommon.js
new file mode 100644
index 0000000000..2eaca1dd09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/support/cq-testcommon.js
@@ -0,0 +1,3 @@
+function assert_implements_container_queries() {
+  assert_implements(CSS.supports("container-type:size"), "Basic support for container queries required");
+}
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/support/test.vtt b/testing/web-platform/tests/css/css-contain/container-queries/support/test.vtt
new file mode 100644
index 0000000000..ffd1d4ca44
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/support/test.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:10.000
+Sub-<b>title</b>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/svg-foreignobject-child-container.html b/testing/web-platform/tests/css/css-contain/container-queries/svg-foreignobject-child-container.html
new file mode 100644
index 0000000000..898fc22c2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/svg-foreignobject-child-container.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<title>CSS Container Queries Test: size query container inside foreignObject</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  svg {
+    display: block;
+    width: 200px;
+    height: 200px;
+    container-type: size;
+  }
+  #container {
+    width: 100px;
+    height: 100px;
+    container-type: size;
+  }
+  @container (width = 100px) {
+    #inner { color: green; }
+  }
+</style>
+<svg>
+  <foreignObject>
+    <div id="container">
+      <div id="inner">Green</div>
+    </div>
+  </foreignObject>
+</svg>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const green = "rgb(0, 128, 0)";
+
+  test(() => {
+    assert_equals(getComputedStyle(inner).color, green);
+  }, "#inner querying #container inside foreignObject");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/svg-foreignobject-no-size-container-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/svg-foreignobject-no-size-container-ref.html
new file mode 100644
index 0000000000..abf1af122b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/svg-foreignobject-no-size-container-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<p>You should see the word PASS below and no red.</p>
+<svg><foreignObject style="width:100px;height:100px;"><div>PASS</div><foreignObject></svg>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/svg-foreignobject-no-size-container.html b/testing/web-platform/tests/css/css-contain/container-queries/svg-foreignobject-no-size-container.html
new file mode 100644
index 0000000000..38fc493a16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/svg-foreignobject-no-size-container.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<title>CSS Container Queries Test: SVG &lt;foreignObject&gt; element not a size query container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="match" href="svg-foreignobject-no-size-container-ref.html">
+<style>
+  foreignObject {
+    display: block;
+    width: 100px;
+    height: 100px;
+    container-type: size;
+  }
+  @supports not (container-type: size) {
+    div { color: red; }
+  }
+  @container (width = 100px) {
+    div { color: red; }
+  }
+</style>
+<p>You should see the word PASS below and no red.</p>
+<svg>
+  <foreignObject>
+    <div id="div">PASS</div>
+  </foreignObject>
+</svg>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/svg-g-no-size-container-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/svg-g-no-size-container-ref.html
new file mode 100644
index 0000000000..4f30c39939
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/svg-g-no-size-container-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<p>You should see the word PASS below and no red.</p>
+<svg><text x="0" y="20" id="text">PASS</text></svg>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/svg-g-no-size-container.html b/testing/web-platform/tests/css/css-contain/container-queries/svg-g-no-size-container.html
new file mode 100644
index 0000000000..ed9e853676
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/svg-g-no-size-container.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>CSS Container Queries Test: SVG &lt;g&gt; element not a size query container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<link rel="match" href="svg-g-no-size-container-ref.html">
+<style>
+  g {
+    display: block;
+    width: 100px;
+    height: 100px;
+    container-type: size;
+  }
+
+  @supports not (container-type: size) {
+    text { fill: red; }
+  }
+  @container (width = 100px) {
+    text { fill: red; }
+  }
+</style>
+<p>You should see the word PASS below and no red.</p>
+<svg>
+  <g><text x="0" y="20" id="text">PASS</text></g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/svg-root-size-container.html b/testing/web-platform/tests/css/css-contain/container-queries/svg-root-size-container.html
new file mode 100644
index 0000000000..70ce40c0bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/svg-root-size-container.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<title>CSS Container Queries Test: SVG root as a size query container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  svg {
+    display: block;
+    width: 100px;
+    height: 100px;
+    container-type: size;
+  }
+  @container (width = 100px) {
+    #div, #text { color: green; }
+  }
+</style>
+<svg>
+  <text id="text">Green</text>
+  <foreignObject>
+    <div id="div">Green</div>
+  </foreignObject>
+</svg>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const green = "rgb(0, 128, 0)";
+
+  test(() => {
+    assert_equals(getComputedStyle(text).color, green);
+  }, "SVG text querying SVG root size container");
+
+  test(() => {
+    assert_equals(getComputedStyle(div).color, green);
+  }, "div in foreignObject querying SVG root size container");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/table-inside-container-changing-display-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/table-inside-container-changing-display-ref.html
new file mode 100644
index 0000000000..c0355d2f50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/table-inside-container-changing-display-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<p>You should see the word PASS below.</p>
+<table><td>PASS</td></table>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/table-inside-container-changing-display.html b/testing/web-platform/tests/css/css-contain/container-queries/table-inside-container-changing-display.html
new file mode 100644
index 0000000000..33a4f4fe72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/table-inside-container-changing-display.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>CSS Container Queries Test: table inside @container changing display type</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="help" href="https://crbug.com/1284918">
+<link rel="match" href="table-inside-container-changing-display-ref.html">
+<style>
+  @supports not (container-type: inline-size) {
+    #container { display: none !important; }
+  }
+  #container {
+    width: 200px;
+    height: 200px;
+    container-type: inline-size;
+  }
+</style>
+<p>You should see the word PASS below.</p>
+<div id="container">
+  <div>
+    <table><td>PASS</td></table>
+  </div>
+</div>
+<script>
+  document.body.offsetTop;
+  document.querySelector("#container").style.display = "inline-block";
+  document.querySelector("table").style.color = "currentColor";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog-backdrop-ref.html b/testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog-backdrop-ref.html
new file mode 100644
index 0000000000..49c46974c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog-backdrop-ref.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<html style="background:green">
+<title>CSS Test Reference</title>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog-backdrop.html b/testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog-backdrop.html
new file mode 100644
index 0000000000..25635167a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog-backdrop.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<title>CSS Container Queries Test: ::backdrop depending on @container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="match" href="top-layer-dialog-backdrop-ref.html">
+<style>
+  html { background: green; }
+  #container { container-type: inline-size; }
+  @container (max-width: 200px) {
+    ::backdrop { display: none; }
+    #dialog { visibility: hidden; }
+  }
+</style>
+<div id="container">
+  <dialog id="dialog"></dialog>
+</div>
+<script>
+  dialog.showModal();
+  dialog.offsetTop;
+  container.style.width = "100px";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog-container.html b/testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog-container.html
new file mode 100644
index 0000000000..5627a6cea0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog-container.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<title>CSS Container Queries Test: Top layer element as a @container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #parent { width: 100px; }
+  #dialog {
+    container-type: inline-size;
+    width: auto;
+    border: none;
+  }
+  #child { color: red; }
+  @container (min-width: 200px) {
+    #child { color: green; }
+  }
+</style>
+<div id="parent">
+  <dialog id="dialog"><span id="child"></span></dialog>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(child).color, "rgb(255, 0, 0)");
+  }, "#dialog initially sized by #containing-block");
+
+  test(() => {
+    dialog.showModal();
+    assert_equals(getComputedStyle(child).color, "rgb(0, 128, 0)");
+  }, "#dialog sized by viewport");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog.html b/testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog.html
new file mode 100644
index 0000000000..9d18b1862d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/top-layer-dialog.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<title>CSS Container Queries Test: @container with modal dialog child</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #container {
+    container-type: inline-size;
+  }
+  dialog {
+    color: red;
+  }
+  @container (max-width: 200px) {
+    dialog { color: green; }
+  }
+  @container (max-width: 100px) {
+    dialog { color: lime; }
+  }
+</style>
+<div id="container">
+  <dialog id="dialog"></dialog>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(dialog).color, "rgb(255, 0, 0)");
+  }, "#container initially wider than 200px");
+
+  test(() => {
+    container.style.width = "200px";
+    assert_equals(getComputedStyle(dialog).color, "rgb(0, 128, 0)");
+  }, "#container changed to 200px");
+
+  test(() => {
+    dialog.showModal();
+    assert_equals(getComputedStyle(dialog).color, "rgb(0, 128, 0)");
+  }, "Modal dialog still has parent as query container while in top layer");
+
+  test(() => {
+    container.style.width = "100px";
+    assert_equals(getComputedStyle(dialog).color, "rgb(0, 255, 0)");
+  }, "Container changes width while dialog is in top layer");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/top-layer-nested-dialog.html b/testing/web-platform/tests/css/css-contain/container-queries/top-layer-nested-dialog.html
new file mode 100644
index 0000000000..1a6d573f24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/top-layer-nested-dialog.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<title>CSS Container Queries Test: Nested top layer elements and @container</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  dialog { color: red; }
+  #container { width: 100px; }
+  #container, #outer { container-type: inline-size; }
+  @container (min-width: 200px) {
+    #outer { width: 400px; color: lime; }
+  }
+  @container (min-width: 400px) {
+    #inner { color: green; }
+  }
+</style>
+<div id="container">
+  <dialog id="outer">
+    <dialog id="inner"></dialog>
+  </dialog>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)");
+    assert_equals(getComputedStyle(inner).color, "rgb(255, 0, 0)");
+  }, "Dialogs initially not matching for container queries");
+
+  test(() => {
+    container.offsetTop;
+    outer.showModal();
+    inner.showModal();
+    assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)");
+    assert_equals(getComputedStyle(inner).color, "rgb(255, 0, 0)");
+  }, "Dialogs still not matching after showModal");
+
+  test(() => {
+    container.offsetTop;
+    container.style.width = "200px";
+    assert_equals(getComputedStyle(outer).color, "rgb(0, 255, 0)");
+    assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)");
+  }, "@container queries start matching");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/transition-scrollbars.html b/testing/web-platform/tests/css/css-contain/container-queries/transition-scrollbars.html
new file mode 100644
index 0000000000..60d82d26b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/transition-scrollbars.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<title>Container Queries - Scrollbars do not cause transitions</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions/#starting">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #scrollable {
+    overflow: auto;
+    width: 100px;
+    height: 100px;
+  }
+  #container {
+    container-type: inline-size;
+  }
+  #target {
+    background-color: black;
+  }
+
+  /* Matches with or without a scrollbar: */
+  @container (max-width: 100px) {
+    #target {
+      background-color: blue;
+    }
+  }
+
+  /* Matches only when there's a scrollbar: */
+  @container (max-width: 99px) {
+    #target {
+      background-color: green;
+      font-size: 10px;
+      transition: 2s steps(2, start) background-color;
+    }
+  }
+</style>
+<div id=scrollable>
+  <div id=container>
+    <div id=target>
+      Foo bar foo bar foo
+      Foo bar foo bar foo
+      Foo bar foo bar foo
+      Foo bar foo bar foo
+      Foo bar foo bar foo
+    </div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    // Whether or not a scrollbar appeared is out of scope for this test.
+    // The only thing we care about is that no transition was triggered.
+    // Therefore we allow both 'green' and 'blue', but not any other values.
+    let has_scrollbar = target.offsetWidth < 100;
+    let expected = has_scrollbar ? 'rgb(0, 128, 0)' : 'rgb(0, 0, 255)';
+    assert_equals(getComputedStyle(target).backgroundColor, expected);
+  }, 'Scrollbars do not cause a transition of background-color');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/transition-style-change-event-002.html b/testing/web-platform/tests/css/css-contain/container-queries/transition-style-change-event-002.html
new file mode 100644
index 0000000000..dc9297004d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/transition-style-change-event-002.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Container Queries - Style Change Event for transitions</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions/#starting">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  .container {
+    container-type: inline-size;
+  }
+  #outer {
+    width: 100px;
+    color: green;
+  }
+  #target {
+    transition: color 100s step-end;
+  }
+
+  @container (min-width: 200px) {
+    #inner { color: red; }
+  }
+  @container (min-width: 200px) {
+    #target {
+      /* This rule exists just to have a container query dependency between
+         target and #inner */
+      background-color: orange;
+    }
+  }
+</style>
+<div id="outer" class="container">
+  <div id="inner" class="container">
+    <div id="target">Green</div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  test(() => {
+    outer.offsetTop;
+    outer.style.width = "200px";
+    assert_equals(getComputedStyle(target).color, "rgb(0, 128, 0)");
+  }, "#inner color change to red triggers a step transition starting at green");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/transition-style-change-event.html b/testing/web-platform/tests/css/css-contain/container-queries/transition-style-change-event.html
new file mode 100644
index 0000000000..4cc1772979
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/transition-style-change-event.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Container Queries - Style Change Event for transitions</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions/#starting">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  .container { container-type: size }
+  #outer {
+    width: 100px;
+    color: green;
+  }
+  @container (min-width: 200px) {
+    #inner { color: red }
+  }
+  @container (min-width: 400px) {
+    #target {
+      color: green;
+      transition: color 1s step-start;
+    }
+  }
+</style>
+<div id="outer" class="container">
+  <div id="inner" class="container">
+    <div id="target">Green</div>
+  </div>
+</div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const t = async_test("");
+  const event_handler = t.step_func_done((e) => {
+    assert_unreached("Transition event incorrectly triggered: " + e.type);
+  });
+  for (let event_name of ["transitionrun",
+                          "transitionstart",
+                          "transitionend",
+                          "transitioncancel"]) {
+    target.addEventListener(event_name, event_handler);
+  }
+
+  outer.offsetTop;
+  // #target is green. Making the #outer container 200px will turn #inner and
+  // #target red through inheritance.
+  outer.style.width = "200px";
+  // Making #inner 400px will make #target green.
+  inner.style.width = "400px";
+  // Both changes above should happen in one style change event and should not
+  // trigger any transition events. Run two rAFs to make sure any events have
+  // time to trigger.
+  requestAnimationFrame(() => requestAnimationFrame(t.step_func_done(() => {
+    assert_equals(getComputedStyle(inner).color, "rgb(255, 0, 0)",
+        "@container queries supported");
+  })));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/unsupported-axis.html b/testing/web-platform/tests/css/css-contain/container-queries/unsupported-axis.html
new file mode 100644
index 0000000000..308de2f424
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/unsupported-axis.html
@@ -0,0 +1,228 @@
+<!doctype html>
+<title>Query against unsupported axis</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<script>
+  setup(() => assert_implements_container_queries());
+</script>
+
+<style>
+  #container {
+    width: 200px;
+    height: 100px;
+    container-type: inline-size;
+  }
+</style>
+
+<div id=container>
+  <div id=target>
+    Test
+  </div>
+</div>
+
+
+<style>
+  @container (width > 0px) {
+    #target { --width:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    assert_equals(getComputedStyle(target).getPropertyValue('--width'), 'true');
+  }, '(width > 0px)');
+</script>
+
+
+<style>
+  @container (height > 0px) {
+    #target { --height:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    // container-type:inline-size does not support queries along the block
+    // axis.
+    assert_equals(getComputedStyle(target).getPropertyValue('--height'), '');
+  }, '(height > 0px)');
+</script>
+
+
+<style>
+  @container ((height > 0px) or (width > 0px)) {
+    #target { --height-or-width:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    // (height > 0px) requires container-type:size.
+    assert_equals(getComputedStyle(target).getPropertyValue('--height-or-width'), '');
+  }, '((height > 0px) or (width > 0px))');
+</script>
+
+
+<style>
+  @container ((width > 0px) or (height > 0px)) {
+    #target { --width-or-height:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    // (height > 0px) requires container-type:size.
+    assert_equals(getComputedStyle(target).getPropertyValue('--width-or-height'), '');
+  }, '((width > 0px) or (height > 0px))');
+</script>
+
+<style>
+  @container ((orientation: landscape) or (width > 0px)) {
+    #target { --orientation-or-width:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    // (orientation: landscape) requires container-type:size.
+    assert_equals(getComputedStyle(target).getPropertyValue('--orientation-or-width'), '');
+  }, '((orientation: landscape) or (width > 0px))');
+</script>
+
+
+<style>
+  @container ((width > 0px) or (orientation: landscape)) {
+    #target { --width-or-orientation:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    // (orientation: landscape) requires container-type:size.
+    assert_equals(getComputedStyle(target).getPropertyValue('--width-or-orientation'), '');
+  }, '((width > 0px) or (orientation: landscape))');
+</script>
+
+
+<style>
+  @container ((height > 0px) or (orientation: landscape)) {
+    #target { --height-or-orientation:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    assert_equals(getComputedStyle(target).getPropertyValue('--height-or-orientation'), '');
+  }, '((height > 0px) or (orientation: landscape))');
+</script>
+
+
+<style>
+  @container ((height > 0px) or (orientation: landscape)) {
+    #target { --height-or-orientation2:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    // Adding full size containment via the 'contain' property does not
+    // make 'height' queryable. (Limited by container-type:inline-size).
+    t.add_cleanup(() => { target.style = ''; });
+    target.style.contain = 'size';
+    assert_equals(getComputedStyle(target).getPropertyValue('--height-or-orientation2'), '');
+  }, '((height > 0px) or (orientation: landscape)), with contain:size');
+</script>
+
+
+<style>
+  @container (inline-size > 0px) {
+    #target { --inline-size:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    assert_equals(getComputedStyle(target).getPropertyValue('--inline-size'), 'true');
+  }, '(inline-size > 0px)');
+</script>
+
+
+<style>
+  @container (block-size > 0px) {
+    #target { --block-size:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    // container-type:inline-size does not support queries along the block
+    // axis.
+    assert_equals(getComputedStyle(target).getPropertyValue('--block-size'), '');
+  }, '(block-size > 0px)');
+</script>
+
+
+<style>
+  @container (block-size > 0px) {
+    #target { --block-size2:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    // Changing the writing-mode does not affect the evaluation of block-size.
+    t.add_cleanup(() => { target.style = ''; });
+    target.style.writingMode = 'vertical-rl';
+    assert_equals(getComputedStyle(target).getPropertyValue('--block-size2'), '');
+  }, '(block-size > 0px), with writing-mode:vertical-rl');
+</script>
+
+
+<style>
+  @container not (width < 0px) {
+    #target { --not-width:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    assert_equals(getComputedStyle(target).getPropertyValue('--not-width'), 'true');
+  }, 'not (width < 0px)');
+</script>
+
+
+<style>
+  @container not (height < 0px) {
+    #target { --not-height:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    assert_equals(getComputedStyle(target).getPropertyValue('--not-height'), '');
+  }, 'not (height < 0px)');
+</script>
+
+
+<style>
+  @container not (inline-size < 0px) {
+    #target { --not-inline-size:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    assert_equals(getComputedStyle(target).getPropertyValue('--not-inline-size'), 'true');
+  }, 'not (inline-size < 0px)');
+</script>
+
+
+<style>
+  @container not (block-size < 0px) {
+    #target { --not-block-size:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    assert_equals(getComputedStyle(target).getPropertyValue('--not-block-size'), '');
+  }, 'not (block-size < 0px)');
+</script>
+
+<style>
+  @container not (orientation) {
+    #target { --not-orientation:true; }
+  }
+</style>
+<script>
+  test(function(t) {
+    assert_equals(getComputedStyle(target).getPropertyValue('--not-orientation'), '');
+  }, 'not (orientation)');
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/viewport-units-dynamic.html b/testing/web-platform/tests/css/css-contain/container-queries/viewport-units-dynamic.html
new file mode 100644
index 0000000000..2339533dee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/viewport-units-dynamic.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<title>CSS Container Queries Test: @container-dependent elements respond to viewport unit changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  iframe {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<iframe id="iframe" srcdoc="
+  <style>
+    #vw, #vh {
+      container-type: inline-size;
+      width: 100px;
+    }
+
+    @container (min-width: 50vw) {
+      #vw span { color: green }
+    }
+    @container (min-width: 100vw) {
+      #vw span { color: red }
+    }
+    @container (min-width: 50vh) {
+      #vh span { color: green }
+    }
+    @container (min-width: 100vh) {
+      #vh span { color: red }
+    }
+  </style>
+  <div id=vw><span>Green</span></div>
+  <div id=vh><span>Green</span></div>
+"></iframe>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  function waitForLoad(w) {
+    return new Promise(resolve => w.addEventListener('load', resolve));
+  }
+
+  promise_test(async () => {
+    await waitForLoad(window);
+    const vw_child = iframe.contentDocument.querySelector("#vw > span");
+    const vh_child = iframe.contentDocument.querySelector("#vh > span");
+
+    assert_equals(getComputedStyle(vw_child).color, "rgb(255, 0, 0)", "vw before resize");
+    assert_equals(getComputedStyle(vh_child).color, "rgb(255, 0, 0)", "vh before resize");
+
+    iframe.style.width = "200px";
+    assert_equals(getComputedStyle(vw_child).color, "rgb(0, 128, 0)", "vw after width resize");
+    assert_equals(getComputedStyle(vh_child).color, "rgb(255, 0, 0)", "vh after width resize");
+
+    iframe.style.height = "200px";
+    assert_equals(getComputedStyle(vw_child).color, "rgb(0, 128, 0)", "vw after height resize");
+    assert_equals(getComputedStyle(vh_child).color, "rgb(0, 128, 0)", "vh after height resize");
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/viewport-units.html b/testing/web-platform/tests/css/css-contain/container-queries/viewport-units.html
new file mode 100644
index 0000000000..9b8bb42c43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/viewport-units.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<title>CSS Container Queries Test: viewport units</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+  #vw { container-type: inline-size; width: 10vw; }
+  #vh { container-type: inline-size; width: 10vh; }
+
+  @container (min-width: 10vw) {
+    #vw span { color: green }
+  }
+  @container (min-width: 11vw) {
+    #vw span { color: red }
+  }
+  @container (min-width: 10vh) {
+    #vh span { color: green }
+  }
+  @container (min-width: 11vh) {
+    #vh span { color: red }
+  }
+</style>
+<div id="vw"><span>Green</span></div>
+<div id="vh"><span>Green</span></div>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  const green = "rgb(0, 128, 0)";
+
+  test(() => assert_equals(getComputedStyle(vw.firstChild).color, green), "Match width with vw");
+  test(() => assert_equals(getComputedStyle(vh.firstChild).color, green), "Match width with vh");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/whitespace-update-after-removal.html b/testing/web-platform/tests/css/css-contain/container-queries/whitespace-update-after-removal.html
new file mode 100644
index 0000000000..a7df55efc6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/whitespace-update-after-removal.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<title>CSS Container Queries Test: whitespace changes in container which changes evaluation</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="match" href="change-display-in-container-ref.html">
+<style>
+  #container {
+    container-type: size;
+    width: 400px;
+    height: 200px;
+  }
+
+  @container (min-width: 400px) {
+    span { color: red; }
+  }
+</style>
+<p>You should see the word PASS below.</p>
+<div id="container"><span id="fail">FAIL</span> <span>PASS</span></div>
+<script>
+  if (CSS.supports("container-type:size")) {
+    container.offsetTop;
+    container.style.width = "200px";
+    // The space text node between the two spans no longer takes up space when the
+    // first span is removed.
+    fail.remove();
+  }
+</script>
-- 
cgit v1.2.3