From 67ed6768313fb6a0a03054577358bc5aea7ca72e Mon Sep 17 00:00:00 2001
From: Psychpsyo <psychpsyo@gmail.com>
Date: Sat, 18 Jan 2025 20:39:26 +0100
Subject: [PATCH] LibWeb: Implement CSS 'contain' property

---
 Libraries/LibWeb/CSS/ComputedProperties.cpp   |  68 ++++++
 Libraries/LibWeb/CSS/ComputedProperties.h     |   1 +
 Libraries/LibWeb/CSS/ComputedValues.h         |  16 ++
 Libraries/LibWeb/CSS/Display.h                |   5 +
 Libraries/LibWeb/CSS/Enums.json               |  10 +
 Libraries/LibWeb/CSS/Keywords.json            |   6 +
 Libraries/LibWeb/CSS/Properties.json          |  10 +
 Libraries/LibWeb/DOM/Document.cpp             |  14 +-
 Libraries/LibWeb/DOM/Element.cpp              | 148 +++++++++++++
 Libraries/LibWeb/DOM/Element.h                |  10 +
 Libraries/LibWeb/HTML/HTMLHtmlElement.cpp     |  13 ++
 Libraries/LibWeb/Layout/Box.cpp               |  31 +++
 Libraries/LibWeb/Layout/Box.h                 |   6 +-
 Libraries/LibWeb/Layout/FormattingContext.cpp |   9 +-
 Libraries/LibWeb/Layout/Node.cpp              |  20 ++
 .../css/css-contain/contain-crash.html        |  12 +
 .../contain-style-remove-element-crash.html   |  26 +++
 .../contain-dynamic-change-crash.html         |  25 +++
 .../crashtests/contain-nested-crash-001.html  |  24 ++
 .../crashtests/contain-nested-crash-002.html  |  15 ++
 .../crashtests/contain-nested-crash-003.html  |  18 ++
 .../crashtests/contain-nested-crash-004.html  |  12 +
 .../contain-nested-relayout-boundary.html     |  11 +
 .../wpt-import/common/reftest-wait.js         |  39 ++++
 .../wpt-import/common/rendering-utils.js      |  19 ++
 ...ontain-inline-size-bfc-floats-001-ref.html |   9 +
 ...ontain-inline-size-bfc-floats-002-ref.html |   9 +
 ...out-formatting-context-margin-001-ref.html |  37 ++++
 ...layout-ignored-cases-ib-split-001-ref.html |  76 +++++++
 ...gnored-cases-no-principal-box-002-ref.html |  33 +++
 ...gnored-cases-no-principal-box-003-ref.html |  33 +++
 .../css-contain/contain-paint-050-ref.html    |  28 +++
 ...int-containing-block-absolute-001-ref.html |  19 ++
 ...-paint-ignored-cases-ib-split-001-ref.html |  76 +++++++
 ...gnored-cases-no-principal-box-001-ref.html |  57 +++++
 ...ontain-paint-stacking-context-001-ref.html |  62 ++++++
 .../contain-size-replaced-004-ref.html        |  25 +++
 .../contain-size-replaced-005-ref.html        |  26 +++
 .../contain-size-replaced-006-ref.html        |  24 ++
 .../contain-size-select-elem-003-ref.html     |  35 +++
 .../contain-size-table-caption-001-ref.html   |  18 ++
 .../contain-body-overflow-001-ref.html        |  15 ++
 .../reference/contain-content-011-ref.html    |  27 +++
 .../reference/contain-layout-020-ref.html     |  30 +++
 .../reference/contain-layout-021-ref.html     |  27 +++
 .../contain-layout-cell-001-ref.html          |  43 ++++
 .../reference/contain-layout-ifc-022-ref.html |  36 +++
 .../contain-layout-ink-overflow-013-ref.html  |  24 ++
 .../contain-layout-ink-overflow-014-ref.html  |  24 ++
 .../contain-layout-ink-overflow-015-ref.html  |  11 +
 .../contain-layout-size-003-ref.html          |  37 ++++
 .../reference/contain-paint-022-ref.html      |  24 ++
 .../reference/contain-paint-ifc-011-ref.html  |  46 ++++
 ...ndependent-formatting-context-001-ref.html |  14 ++
 ...ndependent-formatting-context-003-ref.html |  14 ++
 .../reference/contain-size-022-ref.html       |  11 +
 .../reference/contain-size-064-ref.html       |  25 +++
 .../contain-style-counters-002-ref.html       |  18 ++
 .../contain-style-counters-004-ref.html       |  18 ++
 .../reference/counter-scoping-001-ref.html    |   8 +
 .../reference/counter-scoping-003-ref.html    |   8 +
 .../reference/counter-scoping-004-ref.html    |  15 ++
 .../reference/pass_if_pass_below_clipped.html |  13 ++
 .../css/css-contain/support/60x60-green.png   | Bin 0 -> 86 bytes
 .../wpt-import/css/reference/nothing.html     |   4 +
 .../css/reference/pass_if_pass_below.html     |  11 +
 .../wpt-import/css/support/swatch-blue.png    | Bin 0 -> 83 bytes
 .../wpt-import/css/support/swatch-orange.png  | Bin 0 -> 83 bytes
 .../input/wpt-import/common/reftest-wait.js   |  39 ++++
 .../wpt-import/common/rendering-utils.js      |  19 ++
 .../contain-body-overflow-001.html            |  26 +++
 .../contain-body-overflow-003.html            |  26 +++
 .../contain-body-overflow-004.html            |  26 +++
 .../css/css-contain/contain-content-001.html  |  42 ++++
 .../css/css-contain/contain-content-003.html  |  52 +++++
 .../css/css-contain/contain-content-004.html  |  62 ++++++
 .../contain-html-overflow-001.html            |  28 +++
 .../contain-html-overflow-002.html            |  29 +++
 .../contain-html-overflow-003.html            |  28 +++
 .../contain-html-overflow-004.html            |  28 +++
 ...-inline-size-grid-stretches-auto-rows.html |  35 +++
 .../contain-inline-size-table.html            |  14 ++
 .../css/css-contain/contain-layout-001.html   |  23 ++
 .../css/css-contain/contain-layout-006.html   |  28 +++
 .../css/css-contain/contain-layout-014.html   |  30 +++
 .../css/css-contain/contain-layout-016.html   |  20 ++
 .../css/css-contain/contain-layout-017.html   |  22 ++
 .../css/css-contain/contain-layout-019.html   |  37 ++++
 .../css/css-contain/contain-layout-020.html   |  42 ++++
 .../css-contain/contain-layout-cell-001.html  |  68 ++++++
 .../css-contain/contain-layout-cell-002.html  |  62 ++++++
 ...-layout-containing-block-absolute-001.html |  35 +++
 ...-layout-formatting-context-margin-001.html |  37 ++++
 .../css-contain/contain-layout-ifc-022.html   |  53 +++++
 ...ain-layout-ignored-cases-ib-split-001.html |  77 +++++++
 ...ut-ignored-cases-no-principal-box-002.html |  36 +++
 ...ut-ignored-cases-no-principal-box-003.html |  36 +++
 ...ut-independent-formatting-context-001.html |  19 ++
 ...ut-independent-formatting-context-002.html |  19 ++
 .../contain-layout-ink-overflow-014.html      |  46 ++++
 .../contain-layout-ink-overflow-016.html      |  46 ++++
 .../contain-layout-ink-overflow-017.html      |  47 ++++
 .../contain-layout-stacking-context-001.html  |  66 ++++++
 .../css/css-contain/contain-paint-002.html    |  23 ++
 .../css/css-contain/contain-paint-009.html    |  28 +++
 .../css/css-contain/contain-paint-011.html    |  34 +++
 .../css/css-contain/contain-paint-020.html    |  20 ++
 .../css/css-contain/contain-paint-021.html    |  22 ++
 .../css/css-contain/contain-paint-024.html    |  49 ++++
 .../css/css-contain/contain-paint-050.html    |  32 +++
 .../contain-paint-change-opacity.html         |  19 ++
 ...n-paint-containing-block-absolute-001.html |  34 +++
 ...tain-paint-ignored-cases-ib-split-001.html |  77 +++++++
 ...nt-ignored-cases-no-principal-box-001.html |  61 +++++
 ...nt-independent-formatting-context-001.html |  19 ++
 ...nt-independent-formatting-context-002.html |  19 ++
 ...nt-independent-formatting-context-003.html |  19 ++
 .../contain-paint-stacking-context-001a.html  |  66 ++++++
 .../css/css-contain/contain-size-001.html     |  17 ++
 .../css/css-contain/contain-size-007.html     |  21 ++
 .../css/css-contain/contain-size-008.html     |  21 ++
 .../css/css-contain/contain-size-009.html     |  21 ++
 .../css/css-contain/contain-size-010.html     |  21 ++
 .../css/css-contain/contain-size-012.html     |  17 ++
 .../css/css-contain/contain-size-012b.html    |  18 ++
 .../css/css-contain/contain-size-013.html     |  17 ++
 .../css/css-contain/contain-size-064.html     |  36 +++
 .../contain-size-replaced-001.html            |  17 ++
 .../contain-size-replaced-002.html            |  18 ++
 .../contain-size-replaced-004.html            |  28 +++
 .../contain-size-replaced-005.html            |  29 +++
 .../contain-size-replaced-006.html            |  30 +++
 .../contain-size-select-elem-003.html         |  44 ++++
 .../contain-size-table-caption-001.html       |  32 +++
 .../css/css-contain/support/60x60-green.png   | Bin 0 -> 86 bytes
 .../css/css-contain/support/blue-100x100.png  | Bin 0 -> 91 bytes
 .../css/css-contain/support/blue50wBy46h.png  | Bin 0 -> 84 bytes
 .../css/css-contain/support/swatch-orange.png | Bin 0 -> 83 bytes
 ...upported-properties-and-default-values.txt |   3 +-
 ...eclaration-has-indexed-property-getter.txt | 209 +++++++++---------
 .../css/getComputedStyle-print-all.txt        |   3 +-
 .../contain-chrome-thcrash-001.txt            |   6 +
 .../css-contain/contain-flexbox-outline.txt   |   6 +
 .../parsing/contain-computed-children.txt     |   6 +
 .../css-contain/parsing/contain-computed.txt  |  21 ++
 .../css-contain/parsing/contain-invalid.txt   |  19 ++
 .../css/css-contain/parsing/contain-valid.txt |  19 ++
 .../css-flexbox/flex-item-contains-strict.txt |  11 +-
 .../contain-chrome-thcrash-001.html           |  28 +++
 .../css-contain/contain-flexbox-outline.html  |  24 ++
 .../parsing/contain-computed-children.html    |  17 ++
 .../css-contain/parsing/contain-computed.html |  33 +++
 .../css-contain/parsing/contain-invalid.html  |  30 +++
 .../css-contain/parsing/contain-valid.html    |  32 +++
 154 files changed, 4200 insertions(+), 117 deletions(-)
 create mode 100644 Tests/LibWeb/Crash/wpt-import/css/css-contain/contain-crash.html
 create mode 100644 Tests/LibWeb/Crash/wpt-import/css/css-contain/contain-style-remove-element-crash.html
 create mode 100644 Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-dynamic-change-crash.html
 create mode 100644 Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-001.html
 create mode 100644 Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-002.html
 create mode 100644 Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-003.html
 create mode 100644 Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-004.html
 create mode 100644 Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-relayout-boundary.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/common/reftest-wait.js
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/common/rendering-utils.js
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-inline-size-bfc-floats-001-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-inline-size-bfc-floats-002-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-formatting-context-margin-001-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-ignored-cases-ib-split-001-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-002-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-003-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-050-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-containing-block-absolute-001-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-ignored-cases-ib-split-001-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-ignored-cases-no-principal-box-001-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-stacking-context-001-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-replaced-004-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-replaced-005-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-replaced-006-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-select-elem-003-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-table-caption-001-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-body-overflow-001-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-content-011-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-020-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-021-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-cell-001-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ifc-022-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-013-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-014-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-015-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-size-003-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-022-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-ifc-011-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-independent-formatting-context-001-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-independent-formatting-context-003-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-size-022-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-size-064-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-style-counters-002-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-style-counters-004-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/counter-scoping-001-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/counter-scoping-003-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/counter-scoping-004-ref.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/pass_if_pass_below_clipped.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/support/60x60-green.png
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/reference/nothing.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/reference/pass_if_pass_below.html
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/support/swatch-blue.png
 create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/support/swatch-orange.png
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/common/reftest-wait.js
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/common/rendering-utils.js
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-body-overflow-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-body-overflow-003.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-body-overflow-004.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-content-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-content-003.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-content-004.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-002.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-003.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-004.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-inline-size-grid-stretches-auto-rows.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-inline-size-table.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-006.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-014.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-016.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-017.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-019.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-020.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-cell-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-cell-002.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-containing-block-absolute-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-formatting-context-margin-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ifc-022.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ignored-cases-ib-split-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-002.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-003.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-independent-formatting-context-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-independent-formatting-context-002.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ink-overflow-014.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ink-overflow-016.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ink-overflow-017.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-stacking-context-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-002.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-009.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-011.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-020.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-021.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-024.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-050.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-change-opacity.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-containing-block-absolute-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-ignored-cases-ib-split-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-ignored-cases-no-principal-box-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-independent-formatting-context-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-independent-formatting-context-002.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-independent-formatting-context-003.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-stacking-context-001a.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-007.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-008.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-009.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-010.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-012.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-012b.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-013.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-064.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-002.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-004.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-005.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-006.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-select-elem-003.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-table-caption-001.html
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/support/60x60-green.png
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/support/blue-100x100.png
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/support/blue50wBy46h.png
 create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/support/swatch-orange.png
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-contain/contain-chrome-thcrash-001.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-contain/contain-flexbox-outline.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-computed-children.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-invalid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-valid.txt
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-contain/contain-chrome-thcrash-001.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-contain/contain-flexbox-outline.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-computed-children.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-invalid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-valid.html

diff --git a/Libraries/LibWeb/CSS/ComputedProperties.cpp b/Libraries/LibWeb/CSS/ComputedProperties.cpp
index f7ef0e19030..ada580407af 100644
--- a/Libraries/LibWeb/CSS/ComputedProperties.cpp
+++ b/Libraries/LibWeb/CSS/ComputedProperties.cpp
@@ -1360,6 +1360,74 @@ Optional<CSS::Isolation> ComputedProperties::isolation() const
     return keyword_to_isolation(value.to_keyword());
 }
 
+CSS::Containment ComputedProperties::contain() const
+{
+    CSS::Containment containment = {};
+    auto const& value = property(CSS::PropertyID::Contain);
+
+    switch (value.to_keyword()) {
+    case Keyword::None:
+        // This value indicates that the property has no effect. The element renders as normal, with no containment effects applied.
+        return {};
+    case Keyword::Strict:
+        // This value computes to 'size layout paint style', and thus turns on all forms of containment for the element.
+        containment.size_containment = true;
+        containment.layout_containment = true;
+        containment.paint_containment = true;
+        containment.style_containment = true;
+        break;
+    case Keyword::Content:
+        //  This value computes to 'layout paint style', and thus turns on all forms of containment except size containment for the element.
+        containment.layout_containment = true;
+        containment.paint_containment = true;
+        containment.style_containment = true;
+        break;
+    case Keyword::Size:
+        containment.size_containment = true;
+        break;
+    case Keyword::InlineSize:
+        containment.inline_size_containment = true;
+        break;
+    case Keyword::Layout:
+        containment.layout_containment = true;
+        break;
+    case Keyword::Style:
+        containment.style_containment = true;
+        break;
+    case Keyword::Paint:
+        containment.paint_containment = true;
+        break;
+    default:
+        if (value.is_value_list()) {
+            auto& values = value.as_value_list().values();
+            for (auto const& item : values) {
+                switch (item->to_keyword()) {
+                case Keyword::Size:
+                    containment.size_containment = true;
+                    break;
+                case Keyword::InlineSize:
+                    containment.inline_size_containment = true;
+                    break;
+                case Keyword::Layout:
+                    containment.layout_containment = true;
+                    break;
+                case Keyword::Style:
+                    containment.style_containment = true;
+                    break;
+                case Keyword::Paint:
+                    containment.paint_containment = true;
+                    break;
+                default:
+                    dbgln("`{}` is not supported in `contain` (yet?)", item->to_string(CSSStyleValue::SerializationMode::Normal));
+                    break;
+                }
+            }
+        }
+    }
+
+    return containment;
+}
+
 Optional<CSS::MaskType> ComputedProperties::mask_type() const
 {
     auto const& value = property(CSS::PropertyID::MaskType);
diff --git a/Libraries/LibWeb/CSS/ComputedProperties.h b/Libraries/LibWeb/CSS/ComputedProperties.h
index 5c8a745bbb5..b8f3cf5eb11 100644
--- a/Libraries/LibWeb/CSS/ComputedProperties.h
+++ b/Libraries/LibWeb/CSS/ComputedProperties.h
@@ -161,6 +161,7 @@ public:
     Optional<CSS::WritingMode> writing_mode() const;
     Optional<CSS::UserSelect> user_select() const;
     Optional<CSS::Isolation> isolation() const;
+    CSS::Containment contain() const;
 
     static Vector<CSS::Transformation> transformations_for_style_value(CSSStyleValue const& value);
     Vector<CSS::Transformation> transformations() const;
diff --git a/Libraries/LibWeb/CSS/ComputedValues.h b/Libraries/LibWeb/CSS/ComputedValues.h
index 5f1494b10e0..b2ee38ed598 100644
--- a/Libraries/LibWeb/CSS/ComputedValues.h
+++ b/Libraries/LibWeb/CSS/ComputedValues.h
@@ -66,6 +66,18 @@ struct ObjectPosition {
     CSS::LengthPercentage offset_y { Percentage(50) };
 };
 
+// https://drafts.csswg.org/css-contain-2/#containment-types
+struct Containment {
+    // FIXME: It'd be nice if this was a single-byte bitfield instead of some bools.
+    bool size_containment = false;
+    bool inline_size_containment = false;
+    bool layout_containment = false;
+    bool style_containment = false;
+    bool paint_containment = false;
+
+    bool is_empty() const { return !(size_containment || inline_size_containment || layout_containment || style_containment || paint_containment); }
+};
+
 class InitialValues {
 public:
     static AspectRatio aspect_ratio() { return AspectRatio { true, {} }; }
@@ -172,6 +184,7 @@ public:
     static CSS::WritingMode writing_mode() { return CSS::WritingMode::HorizontalTb; }
     static CSS::UserSelect user_select() { return CSS::UserSelect::Auto; }
     static CSS::Isolation isolation() { return CSS::Isolation::Auto; }
+    static CSS::Containment contain() { return {}; }
 
     // https://www.w3.org/TR/SVG/geometry.html
     static LengthPercentage cx() { return CSS::Length::make_px(0); }
@@ -428,6 +441,7 @@ public:
     CSS::WritingMode writing_mode() const { return m_inherited.writing_mode; }
     CSS::UserSelect user_select() const { return m_noninherited.user_select; }
     CSS::Isolation isolation() const { return m_noninherited.isolation; }
+    CSS::Containment const& contain() const { return m_noninherited.contain; }
 
     CSS::LengthBox const& inset() const { return m_noninherited.inset; }
     const CSS::LengthBox& margin() const { return m_noninherited.margin; }
@@ -681,6 +695,7 @@ protected:
         CSS::UnicodeBidi unicode_bidi { InitialValues::unicode_bidi() };
         CSS::UserSelect user_select { InitialValues::user_select() };
         CSS::Isolation isolation { InitialValues::isolation() };
+        CSS::Containment contain { InitialValues::contain() };
 
         Optional<CSS::Transformation> rotate;
         Optional<CSS::Transformation> translate;
@@ -855,6 +870,7 @@ public:
     void set_writing_mode(CSS::WritingMode value) { m_inherited.writing_mode = value; }
     void set_user_select(CSS::UserSelect value) { m_noninherited.user_select = value; }
     void set_isolation(CSS::Isolation value) { m_noninherited.isolation = value; }
+    void set_contain(CSS::Containment value) { m_noninherited.contain = move(value); }
 
     void set_fill(SVGPaint value) { m_inherited.fill = move(value); }
     void set_stroke(SVGPaint value) { m_inherited.stroke = move(value); }
diff --git a/Libraries/LibWeb/CSS/Display.h b/Libraries/LibWeb/CSS/Display.h
index bae4acc2a13..43fa5978f94 100644
--- a/Libraries/LibWeb/CSS/Display.h
+++ b/Libraries/LibWeb/CSS/Display.h
@@ -62,6 +62,11 @@ public:
     bool is_table_cell() const { return is_internal() && internal() == DisplayInternal::TableCell; }
     bool is_table_column_group() const { return is_internal() && internal() == DisplayInternal::TableColumnGroup; }
     bool is_table_caption() const { return is_internal() && internal() == DisplayInternal::TableCaption; }
+    // https://drafts.csswg.org/css-display-3/#internal-table-element
+    bool is_internal_table() const
+    {
+        return is_internal() && (internal() == DisplayInternal::TableRowGroup || internal() == DisplayInternal::TableHeaderGroup || internal() == DisplayInternal::TableFooterGroup || internal() == DisplayInternal::TableRow || internal() == DisplayInternal::TableCell || internal() == DisplayInternal::TableColumnGroup || internal() == DisplayInternal::TableColumn);
+    }
 
     bool is_none() const { return m_type == Type::Box && m_value.box == DisplayBox::None; }
     bool is_contents() const { return m_type == Type::Box && m_value.box == DisplayBox::Contents; }
diff --git a/Libraries/LibWeb/CSS/Enums.json b/Libraries/LibWeb/CSS/Enums.json
index 09fe23c2068..1c66608a01b 100644
--- a/Libraries/LibWeb/CSS/Enums.json
+++ b/Libraries/LibWeb/CSS/Enums.json
@@ -107,6 +107,16 @@
     "none",
     "all"
   ],
+  "contain": [
+    "none",
+    "strict",
+    "content",
+    "size",
+    "inline-size",
+    "layout",
+    "style",
+    "paint"
+  ],
   "content-visibility": [
     "visible",
     "auto",
diff --git a/Libraries/LibWeb/CSS/Keywords.json b/Libraries/LibWeb/CSS/Keywords.json
index e95576afa77..c9b30eca833 100644
--- a/Libraries/LibWeb/CSS/Keywords.json
+++ b/Libraries/LibWeb/CSS/Keywords.json
@@ -210,6 +210,7 @@
   "inline-end",
   "inline-flex",
   "inline-grid",
+  "inline-size",
   "inline-start",
   "inline-table",
   "inset",
@@ -235,6 +236,7 @@
   "landscape",
   "large",
   "larger",
+  "layout",
   "left",
   "legacy",
   "less",
@@ -308,6 +310,7 @@
   "p3",
   "padding-box",
   "paged",
+  "paint",
   "paused",
   "petite-caps",
   "pixelated",
@@ -366,6 +369,7 @@
   "sideways-lr",
   "sideways-rl",
   "simplified",
+  "size",
   "slashed-zero",
   "slider-horizontal",
   "slow",
@@ -389,7 +393,9 @@
   "static",
   "sticky",
   "stretch",
+  "strict",
   "stroke-box",
+  "style",
   "sub",
   "subtractive",
   "super",
diff --git a/Libraries/LibWeb/CSS/Properties.json b/Libraries/LibWeb/CSS/Properties.json
index aa9bfe60252..ab1852dfd22 100644
--- a/Libraries/LibWeb/CSS/Properties.json
+++ b/Libraries/LibWeb/CSS/Properties.json
@@ -923,6 +923,16 @@
       "column-count"
     ]
   },
+  "contain": {
+    "__comment": "FIXME: Some values of contain need to be mutually exclusive. The grammar this should adhere to is 'none | strict | content | [ [size | inline-size] || layout || style || paint ]'.",
+    "affects-stacking-context": true,
+    "animation-type": "none",
+    "inherited": false,
+    "initial": "none",
+    "valid-types": [
+      "contain"
+    ]
+  },
   "content": {
     "animation-type": "discrete",
     "inherited": false,
diff --git a/Libraries/LibWeb/DOM/Document.cpp b/Libraries/LibWeb/DOM/Document.cpp
index 6eddd9c2806..3c9d5d25da4 100644
--- a/Libraries/LibWeb/DOM/Document.cpp
+++ b/Libraries/LibWeb/DOM/Document.cpp
@@ -1190,9 +1190,21 @@ static void propagate_scrollbar_width_to_viewport(Element& root_element, Layout:
     viewport_computed_values.set_scrollbar_width(root_element_computed_values.scrollbar_width());
 }
 
+// https://drafts.csswg.org/css-overflow-3/#overflow-propagation
 static void propagate_overflow_to_viewport(Element& root_element, Layout::Viewport& viewport)
 {
-    // https://drafts.csswg.org/css-overflow-3/#overflow-propagation
+    // https://drafts.csswg.org/css-contain-2/#contain-property
+    // Additionally, when any containments are active on either the HTML <html> or <body> elements, propagation of
+    // properties from the <body> element to the initial containing block, the viewport, or the canvas background, is
+    // disabled. Notably, this affects:
+    // - 'overflow' and its longhands (see CSS Overflow 3 § 3.3 Overflow Viewport Propagation)
+    if (root_element.is_html_html_element() && !root_element.computed_properties()->contain().is_empty())
+        return;
+
+    auto* body_element = root_element.first_child_of_type<HTML::HTMLBodyElement>();
+    if (body_element && !body_element->computed_properties()->contain().is_empty())
+        return;
+
     // UAs must apply the overflow-* values set on the root element to the viewport
     // when the root element’s display value is not none.
     auto overflow_origin_node = root_element.layout_node();
diff --git a/Libraries/LibWeb/DOM/Element.cpp b/Libraries/LibWeb/DOM/Element.cpp
index e501dec6f16..c2eeff851e7 100644
--- a/Libraries/LibWeb/DOM/Element.cpp
+++ b/Libraries/LibWeb/DOM/Element.cpp
@@ -2741,6 +2741,148 @@ bool Element::is_relevant_to_the_user()
     return false;
 }
 
+// https://drafts.csswg.org/css-contain-2/#skips-its-contents
+bool Element::skips_its_contents()
+{
+    // https://drafts.csswg.org/css-contain-2/#valdef-content-visibility-hidden
+    // The element skips its contents.
+    if (computed_properties()->content_visibility() == CSS::ContentVisibility::Hidden)
+        return true;
+
+    // https://drafts.csswg.org/css-contain-2/#valdef-content-visibility-auto
+    // If the element is not relevant to the user, it also skips its contents.
+    if (computed_properties()->content_visibility() == CSS::ContentVisibility::Auto && !this->is_relevant_to_the_user()) {
+        return true;
+    }
+
+    return false;
+}
+
+// https://drafts.csswg.org/css-contain-2/#containment-size
+bool Element::has_size_containment() const
+{
+    // However, giving an element size containment has no effect if any of the following are true:
+
+    // - if the element does not generate a principal box (as is the case with 'display: contents' or 'display: none')
+    if (!layout_node())
+        return false;
+
+    // - if its inner display type is 'table'
+    if (layout_node()->display().is_table_inside())
+        return false;
+
+    // - if its principal box is an internal table box
+    if (layout_node()->display().is_internal_table())
+        return false;
+
+    // - if its principal box is an internal ruby box or a non-atomic inline-level box
+    // FIXME: Implement this.
+
+    if (computed_properties()->contain().size_containment)
+        return true;
+
+    return false;
+}
+// https://drafts.csswg.org/css-contain-2/#containment-inline-size
+bool Element::has_inline_size_containment() const
+{
+    // Giving an element inline-size containment has no effect if any of the following are true:
+
+    // - if the element does not generate a principal box (as is the case with 'display: contents' or 'display: none')
+    if (!layout_node())
+        return false;
+
+    // - if its inner display type is 'table'
+    if (layout_node()->display().is_table_inside())
+        return false;
+
+    // - if its principal box is an internal table box
+    if (layout_node()->display().is_internal_table())
+        return false;
+
+    // - if its principal box is an internal ruby box or a non-atomic inline-level box
+    // FIXME: Implement this.
+
+    if (computed_properties()->contain().inline_size_containment)
+        return true;
+
+    return false;
+}
+// https://drafts.csswg.org/css-contain-2/#containment-layout
+bool Element::has_layout_containment() const
+{
+    // However, giving an element layout containment has no effect if any of the following are true:
+
+    // - if the element does not generate a principal box (as is the case with 'display: contents' or 'display: none')
+    if (!layout_node())
+        return false;
+
+    // - if its principal box is an internal table box other than 'table-cell'
+    if (layout_node()->display().is_internal_table() && !layout_node()->display().is_table_cell())
+        return false;
+
+    // - if its principal box is an internal ruby box or a non-atomic inline-level box
+    // FIXME: Implement this.
+
+    if (computed_properties()->contain().layout_containment)
+        return true;
+
+    // https://drafts.csswg.org/css-contain-2/#valdef-content-visibility-auto
+    // Changes the used value of the 'contain' property so as to turn on layout containment, style containment, and
+    // paint containment for the element.
+    if (computed_properties()->content_visibility() == CSS::ContentVisibility::Auto)
+        return true;
+
+    return false;
+}
+// https://drafts.csswg.org/css-contain-2/#containment-style
+bool Element::has_style_containment() const
+{
+    // However, giving an element style containment has no effect if any of the following are true:
+
+    // - if the element does not generate a principal box (as is the case with 'display: contents' or 'display: none')
+    if (!layout_node())
+        return false;
+
+    if (computed_properties()->contain().style_containment)
+        return true;
+
+    // https://drafts.csswg.org/css-contain-2/#valdef-content-visibility-auto
+    // Changes the used value of the 'contain' property so as to turn on layout containment, style containment, and
+    // paint containment for the element.
+    if (computed_properties()->content_visibility() == CSS::ContentVisibility::Auto)
+        return true;
+
+    return false;
+}
+// https://drafts.csswg.org/css-contain-2/#containment-paint
+bool Element::has_paint_containment() const
+{
+    // However, giving an element paint containment has no effect if any of the following are true:
+
+    // - if the element does not generate a principal box (as is the case with 'display: contents' or 'display: none')
+    if (!layout_node())
+        return false;
+
+    // - if its principal box is an internal table box other than 'table-cell'
+    if (layout_node()->display().is_internal_table() && !layout_node()->display().is_table_cell())
+        return false;
+
+    // - if its principal box is an internal ruby box or a non-atomic inline-level box
+    // FIXME: Implement this
+
+    if (computed_properties()->contain().paint_containment)
+        return true;
+
+    // https://drafts.csswg.org/css-contain-2/#valdef-content-visibility-auto
+    // Changes the used value of the 'contain' property so as to turn on layout containment, style containment, and
+    // paint containment for the element.
+    if (computed_properties()->content_visibility() == CSS::ContentVisibility::Auto)
+        return true;
+
+    return false;
+}
+
 bool Element::id_reference_exists(String const& id_reference) const
 {
     return document().get_element_by_id(id_reference);
@@ -3154,6 +3296,12 @@ void Element::resolve_counters(CSS::ComputedProperties& style)
     for (auto const& counter : counter_reset)
         ensure_counters_set().instantiate_a_counter(counter.name, unique_id(), counter.is_reversed, counter.value);
 
+    // FIXME: Take style containment into account
+    // https://drafts.csswg.org/css-contain-2/#containment-style
+    // Giving an element style containment has the following effects:
+    // 1. The 'counter-increment' and 'counter-set' properties must be scoped to the element’s sub-tree and create a
+    //    new counter.
+
     // 3. Counter values are incremented (counter-increment).
     auto counter_increment = style.counter_data(CSS::PropertyID::CounterIncrement);
     for (auto const& counter : counter_increment)
diff --git a/Libraries/LibWeb/DOM/Element.h b/Libraries/LibWeb/DOM/Element.h
index 71c9778f85b..58c91cf9fba 100644
--- a/Libraries/LibWeb/DOM/Element.h
+++ b/Libraries/LibWeb/DOM/Element.h
@@ -398,6 +398,16 @@ public:
     void determine_proximity_to_the_viewport();
     bool is_relevant_to_the_user();
 
+    // https://drafts.csswg.org/css-contain-2/#skips-its-contents
+    bool skips_its_contents();
+
+    // https://drafts.csswg.org/css-contain-2/#containment-types
+    bool has_size_containment() const;
+    bool has_inline_size_containment() const;
+    bool has_layout_containment() const;
+    bool has_style_containment() const;
+    bool has_paint_containment() const;
+
 protected:
     Element(Document&, DOM::QualifiedName);
     virtual void initialize(JS::Realm&) override;
diff --git a/Libraries/LibWeb/HTML/HTMLHtmlElement.cpp b/Libraries/LibWeb/HTML/HTMLHtmlElement.cpp
index 7c300a352d2..966b6534b07 100644
--- a/Libraries/LibWeb/HTML/HTMLHtmlElement.cpp
+++ b/Libraries/LibWeb/HTML/HTMLHtmlElement.cpp
@@ -6,6 +6,7 @@
 
 #include <LibWeb/Bindings/HTMLHtmlElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
+#include <LibWeb/HTML/HTMLBodyElement.h>
 #include <LibWeb/HTML/HTMLHtmlElement.h>
 #include <LibWeb/Layout/Node.h>
 
@@ -28,6 +29,18 @@ void HTMLHtmlElement::initialize(JS::Realm& realm)
 
 bool HTMLHtmlElement::should_use_body_background_properties() const
 {
+    // https://drafts.csswg.org/css-contain-2/#contain-property
+    // Additionally, when any containments are active on either the HTML <html> or <body> elements, propagation of
+    // properties from the <body> element to the initial containing block, the viewport, or the canvas background, is
+    // disabled. Notably, this affects:
+    // - 'background' and its longhands (see CSS Backgrounds 3 § 2.11.2 The Canvas Background and the HTML <body> Element)
+    if (!computed_properties()->contain().is_empty())
+        return false;
+
+    auto* body_element = first_child_of_type<HTML::HTMLBodyElement>();
+    if (body_element && !body_element->computed_properties()->contain().is_empty())
+        return false;
+
     auto background_color = layout_node()->computed_values().background_color();
     auto const& background_layers = layout_node()->background_layers();
 
diff --git a/Libraries/LibWeb/Layout/Box.cpp b/Libraries/LibWeb/Layout/Box.cpp
index ad66c92023f..89d7828fafd 100644
--- a/Libraries/LibWeb/Layout/Box.cpp
+++ b/Libraries/LibWeb/Layout/Box.cpp
@@ -28,6 +28,37 @@ Box::~Box()
 {
 }
 
+Optional<CSSPixels> Box::natural_width() const
+{
+    // https://drafts.csswg.org/css-contain-2/#containment-size
+    // Replaced elements must be treated as having a natural width and height of 0 and no natural aspect
+    // ratio.
+    if (dom_node() && dom_node()->is_element() && as<DOM::Element>(dom_node())->has_size_containment())
+        return 0;
+
+    return m_natural_width;
+}
+Optional<CSSPixels> Box::natural_height() const
+{
+    // https://drafts.csswg.org/css-contain-2/#containment-size
+    // Replaced elements must be treated as having a natural width and height of 0 and no natural aspect
+    // ratio.
+    if (dom_node() && dom_node()->is_element() && as<DOM::Element>(dom_node())->has_size_containment())
+        return 0;
+
+    return m_natural_height;
+}
+Optional<CSSPixelFraction> Box::natural_aspect_ratio() const
+{
+    // https://drafts.csswg.org/css-contain-2/#containment-size
+    // Replaced elements must be treated as having a natural width and height of 0 and no natural aspect
+    // ratio.
+    if (dom_node() && dom_node()->is_element() && as<DOM::Element>(dom_node())->has_size_containment())
+        return {};
+
+    return m_natural_aspect_ratio;
+}
+
 void Box::visit_edges(Cell::Visitor& visitor)
 {
     Base::visit_edges(visitor);
diff --git a/Libraries/LibWeb/Layout/Box.h b/Libraries/LibWeb/Layout/Box.h
index 549b291fdd7..e1e66472575 100644
--- a/Libraries/LibWeb/Layout/Box.h
+++ b/Libraries/LibWeb/Layout/Box.h
@@ -25,9 +25,9 @@ public:
     Painting::PaintableBox* paintable_box();
 
     // https://www.w3.org/TR/css-images-3/#natural-dimensions
-    Optional<CSSPixels> natural_width() const { return m_natural_width; }
-    Optional<CSSPixels> natural_height() const { return m_natural_height; }
-    Optional<CSSPixelFraction> natural_aspect_ratio() const { return m_natural_aspect_ratio; }
+    Optional<CSSPixels> natural_width() const;
+    Optional<CSSPixels> natural_height() const;
+    Optional<CSSPixelFraction> natural_aspect_ratio() const;
 
     bool has_natural_width() const { return natural_width().has_value(); }
     bool has_natural_height() const { return natural_height().has_value(); }
diff --git a/Libraries/LibWeb/Layout/FormattingContext.cpp b/Libraries/LibWeb/Layout/FormattingContext.cpp
index 8e35f6fc6c6..66ba7c450dc 100644
--- a/Libraries/LibWeb/Layout/FormattingContext.cpp
+++ b/Libraries/LibWeb/Layout/FormattingContext.cpp
@@ -94,7 +94,14 @@ bool FormattingContext::creates_block_formatting_context(Box const& box)
     if (box.display().is_flow_root_inside())
         return true;
 
-    // FIXME: Elements with contain: layout, content, or paint.
+    // https://drafts.csswg.org/css-contain-2/#containment-types
+    // 1. The layout containment box establishes an independent formatting context.
+    // 4. The paint containment box establishes an independent formatting context.
+    if (box.dom_node() && box.dom_node()->is_element()) {
+        auto element = as<DOM::Element>(box.dom_node());
+        if (element->has_layout_containment() || element->has_paint_containment())
+            return true;
+    }
 
     if (box.parent()) {
         auto parent_display = box.parent()->display();
diff --git a/Libraries/LibWeb/Layout/Node.cpp b/Libraries/LibWeb/Layout/Node.cpp
index 0d6fee21978..fe4935e7027 100644
--- a/Libraries/LibWeb/Layout/Node.cpp
+++ b/Libraries/LibWeb/Layout/Node.cpp
@@ -89,6 +89,17 @@ bool Node::can_contain_boxes_with_position_absolute() const
     if (computed_values().scale().has_value())
         return true;
 
+    // https://drafts.csswg.org/css-contain-2/#containment-types
+    // 4. The layout containment box establishes an absolute positioning containing block and a fixed positioning
+    //    containing block.
+    // 4. The paint containment box establishes an absolute positioning containing block and a fixed positioning
+    //    containing block.
+    if (dom_node() && dom_node()->is_element()) {
+        auto element = as<DOM::Element>(dom_node());
+        if (element->has_layout_containment() || element->has_paint_containment())
+            return true;
+    }
+
     return false;
 }
 
@@ -220,6 +231,15 @@ bool Node::establishes_stacking_context() const
     if (computed_values().isolation() == CSS::Isolation::Isolate)
         return true;
 
+    // https://drafts.csswg.org/css-contain-2/#containment-types
+    // 5. The layout containment box creates a stacking context.
+    // 3. The paint containment box creates a stacking context.
+    if (dom_node() && dom_node()->is_element()) {
+        auto element = as<DOM::Element>(dom_node());
+        if (element->has_layout_containment() || element->has_paint_containment())
+            return true;
+    }
+
     return computed_values().opacity() < 1.0f;
 }
 
diff --git a/Tests/LibWeb/Crash/wpt-import/css/css-contain/contain-crash.html b/Tests/LibWeb/Crash/wpt-import/css/css-contain/contain-crash.html
new file mode 100644
index 00000000000..373e004c050
--- /dev/null
+++ b/Tests/LibWeb/Crash/wpt-import/css/css-contain/contain-crash.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1129563">
+<body style="contain: size layout;">
+  <div id="target" style="contain: size layout;"></div>
+  <div id="child"></div>
+</body>
+<script>
+document.body.offsetTop;
+const target = document.getElementById('target');
+const child = document.getElementById('child');
+target.appendChild(child);
+</script>
diff --git a/Tests/LibWeb/Crash/wpt-import/css/css-contain/contain-style-remove-element-crash.html b/Tests/LibWeb/Crash/wpt-import/css/css-contain/contain-style-remove-element-crash.html
new file mode 100644
index 00000000000..cbf079523ff
--- /dev/null
+++ b/Tests/LibWeb/Crash/wpt-import/css/css-contain/contain-style-remove-element-crash.html
@@ -0,0 +1,26 @@
+<style>
+* {
+  counter-reset: reversed(counter_3) reversed(counter_4) 64 reversed(counter_5) -8772;
+  contain: layout paint style inline-size !important;
+}
+</style>
+<script>
+window.addEventListener("load", () => {
+  let a = document.documentElement
+  let b = document.getElementById("o1")
+  let c = document.getElementById("o3")
+  let d = new Range()
+  document.documentElement.style.display = "none"
+  document.documentElement.getBoundingClientRect()
+  document.documentElement.style.display = ""
+  d.setStartAfter(document.getElementById("o2"))
+  try { document.prepend("", document.documentElement) } catch (e) {}
+  d.surroundContents(b)
+  try { b.prepend(a, c) } catch (e) {}
+  b.scrollIntoView({ })
+  a.style.display = "none"
+})
+</script>
+<br id="o1">
+<li id="o2">
+<input id="o3">
diff --git a/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-dynamic-change-crash.html b/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-dynamic-change-crash.html
new file mode 100644
index 00000000000..43d590bf065
--- /dev/null
+++ b/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-dynamic-change-crash.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1928724">
+
+<style>
+*:only-child {
+  contain: size layout paint;
+}
+</style>
+
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+  a.getBoundingClientRect();
+  a.appendChild(c);
+  b.scrollBy();
+})
+</script>
+
+<body>
+<svg>
+<animateMotion id="b">
+</animateMotion>
+<foreignObject id="a">
+<article>
+<data id="c">
diff --git a/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-001.html b/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-001.html
new file mode 100644
index 00000000000..063563c2609
--- /dev/null
+++ b/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
+<link rel="help" href="https://crbug.com/1214198">
+<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
+<style>
+.contain {
+  contain: strict;
+  display: block;
+  width: 100px;
+  height: 100px;
+}
+</style>
+<body>
+  <div id="outer" class="contain">
+    <div>
+      <div id="inner" class="contain"></div>
+    </div>
+  </div>
+<script>
+  document.body.offsetTop;
+  inner.appendChild(document.createTextNode('inner-child'));
+  outer.appendChild(document.createTextNode('outer-child'));
+</script>
+</body>
diff --git a/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-002.html b/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-002.html
new file mode 100644
index 00000000000..42dc06b9938
--- /dev/null
+++ b/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-002.html
@@ -0,0 +1,15 @@
+<!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=1340168">
+<div style="contain:size layout;">
+  <div id="klabb" style="display:inline-block; contain:size layout;">t</div>
+  <br>
+  <div id="babb" style="display:inline-block; width:10px; height:10px;"></div>
+</div>
+<script>
+  document.body.offsetTop;
+  klabb.innerHTML = ":-)";
+  klabb.style.height = "100px";
+  document.body.offsetTop;
+  babb.style.width = "20px";
+</script>
diff --git a/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-003.html b/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-003.html
new file mode 100644
index 00000000000..a7dbe7dcc31
--- /dev/null
+++ b/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-003.html
@@ -0,0 +1,18 @@
+<!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=1386673">
+<div style="contain:layout size;">
+  <div style="display:inline-block;">
+    <div style="contain:layout size;">
+      <div id="firstVictim"></div>
+    </div>
+  </div>
+  <div style="position:absolute;">
+    <div id="secondVictim"></div>
+  </div>
+</div>
+<script>
+  document.body.offsetTop;
+  firstVictim.style.display = "none";
+  secondVictim.style.display = "none";
+</script>
diff --git a/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-004.html b/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-004.html
new file mode 100644
index 00000000000..db29e1424d9
--- /dev/null
+++ b/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-crash-004.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1439692">
+<style>
+body, fieldset { contain: strict; }
+</style>
+<script>
+function crash() {
+  document.body.offsetTop;
+  document.body.appendChild(document.createElement("fieldset"));
+}
+</script>
+<body onload="crash()">
diff --git a/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-relayout-boundary.html b/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-relayout-boundary.html
new file mode 100644
index 00000000000..ce915728f48
--- /dev/null
+++ b/Tests/LibWeb/Crash/wpt-import/css/css-contain/crashtests/contain-nested-relayout-boundary.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<div style="position: relative; width: 100px; height: 100px; overflow: hidden;">
+  <div id="target" style="contain: size layout;">
+    <canvas id="inner" width="0"></canvas>
+  </div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('inner').width = '100';
+document.getElementById('target').style.contain = 'initial';
+</script>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/common/reftest-wait.js b/Tests/LibWeb/Ref/expected/wpt-import/common/reftest-wait.js
new file mode 100644
index 00000000000..80435b0fcf6
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/common/reftest-wait.js
@@ -0,0 +1,39 @@
+/**
+ * Remove the `reftest-wait` class on the document element.
+ * The reftest runner will wait with taking a screenshot while
+ * this class is present.
+ *
+ * See https://web-platform-tests.org/writing-tests/reftests.html#controlling-when-comparison-occurs
+ */
+function takeScreenshot() {
+    document.documentElement.classList.remove("reftest-wait");
+}
+
+/**
+ * Call `takeScreenshot()` after a delay of at least |timeout| milliseconds.
+ * @param {number} timeout - milliseconds
+ */
+function takeScreenshotDelayed(timeout) {
+    setTimeout(function () {
+        takeScreenshot();
+    }, timeout);
+}
+
+/**
+ * Ensure that a precondition is met before waiting for a screenshot.
+ * @param {bool} condition - Fail the test if this evaluates to false
+ * @param {string} msg - Error message to write to the screenshot
+ */
+function failIfNot(condition, msg) {
+    const fail = () => {
+        (document.body || document.documentElement).textContent = `Precondition Failed: ${msg}`;
+        takeScreenshot();
+    };
+    if (!condition) {
+        if (document.readyState == "interactive") {
+            fail();
+        } else {
+            document.addEventListener("DOMContentLoaded", fail, false);
+        }
+    }
+}
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/common/rendering-utils.js b/Tests/LibWeb/Ref/expected/wpt-import/common/rendering-utils.js
new file mode 100644
index 00000000000..90cc16fda9e
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/common/rendering-utils.js
@@ -0,0 +1,19 @@
+"use strict";
+
+/**
+ * Waits until we have at least one frame rendered, regardless of the engine.
+ *
+ * @returns {Promise}
+ */
+function waitForAtLeastOneFrame() {
+    return new Promise(resolve => {
+        // Different web engines work slightly different on this area but waiting
+        // for two requestAnimationFrames() to happen, one after another, should be
+        // sufficient to ensure at least one frame has been generated anywhere.
+        window.requestAnimationFrame(() => {
+            window.requestAnimationFrame(() => {
+                resolve();
+            });
+        });
+    });
+}
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-inline-size-bfc-floats-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-inline-size-bfc-floats-001-ref.html
new file mode 100644
index 00000000000..383920cc99e
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-inline-size-bfc-floats-001-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<p>You should see a wide orange rectangle to the left of the third float, overlapping the float.</p>
+<div style="width:400px;position:relative">
+  <div style="float:right;width:200px;height:100px;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="position:absolute;left:0;top:200px;width:200px;height:20px;background-color:orange"></div>
+</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-inline-size-bfc-floats-002-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-inline-size-bfc-floats-002-ref.html
new file mode 100644
index 00000000000..a7d4bc759aa
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-inline-size-bfc-floats-002-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<p>You should see a wide orange rectangle to the left of the first float, overlapping the float.</p>
+<div style="width:400px;position:relative">
+  <div style="float:right;width:200px;height:100px;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="position:absolute;left:0;top:0;width:300px;height:20px;background-color:orange"></div>
+</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-formatting-context-margin-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-formatting-context-margin-001-ref.html
new file mode 100644
index 00000000000..5a6d6538624
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-formatting-context-margin-001-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Test</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <style>
+  #a {
+      background: blue;
+      margin: 10px;
+      width: 50px;
+      height: 50px;
+  }
+  #b {
+      width: 50px;
+      height: 40px;
+      background: green;
+  }
+  #b-padding {
+      height: 10px;
+  }
+  #c {
+    width: 50px;
+    height: 10px;
+    background: lightblue;
+  }
+  </style>
+</head>
+<body>
+  <div id="a">
+    <div id="b-padding"></div>
+    <div id="b"></div>
+    <div id="c"></div>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-ignored-cases-ib-split-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-ignored-cases-ib-split-001-ref.html
new file mode 100644
index 00000000000..eb787424ed4
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-ignored-cases-ib-split-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .abspos-box {
+      position: absolute;
+      width: 200px;
+      height: 200px;
+    }
+
+    /* The boxes should stack in the order that I've listed their CSS classes
+       here.  The class names' first word (outside/before/inside/after) refers
+       to the boxes' DOM position, and "background"/"midground"/"foreground"
+       refers to their z-index values. */
+
+    .before-IB-background {
+      background: darkmagenta;
+      z-index: -1;
+      top: 50px;
+      left: 50px;
+    }
+    .after-IB-background {
+      background: magenta;
+      z-index: -1;
+      top: 70px;
+      left: 70px;
+    }
+    .outside-span-midground {
+      background: darkkhaki;
+      top: 90px;
+      left: 90px;
+    }
+    .inside-IB-midground {
+      background: khaki;
+      top: 110px;
+      left: 110px;
+    }
+    .before-IB-foreground {
+      background: darkcyan;
+      z-index: 1;
+      top: 130px;
+      left: 130px;
+    }
+    .after-IB-foreground {
+      background: cyan;
+      z-index: 1;
+      top: 150px;
+      left: 150px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The expectation here is that 'abspos-box' elements will all interact in
+       the same top-level stacking context. That means the box ordering should
+       be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
+       with the boxes stacked (visually) from top-left to bottom-right. -->
+
+  <div class="abspos-box outside-span-midground"></div>
+
+  <!-- Note: this file is identical to the testcase,
+       except for the lack of "contain: layout" on this span. -->
+  <span>
+    <div class="abspos-box before-IB-background"></div>
+    <div class="abspos-box before-IB-foreground"></div>
+    <!-- This unstyled div crates the IB split: -->
+    <div>
+      <div class="abspos-box inside-IB-midground"></div>
+    </div>
+    <div class="abspos-box after-IB-background"></div>
+    <div class="abspos-box after-IB-foreground"></div>
+  </span>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-002-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-002-ref.html
new file mode 100644
index 00000000000..1911bdaca0c
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-002-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <style>
+  #a {
+      display: contents;
+      width: 100px;
+      height: 100px;
+      background: green;
+      margin: 50px;
+  }
+ #b {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100px;
+      height: 100px;
+      background: green;
+  }
+  </style>
+</head>
+<body>
+  <div id="a">
+    <div>
+      <div id="b"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-003-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-003-ref.html
new file mode 100644
index 00000000000..46f028c0581
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-003-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <style>
+  #a {
+    display: contents;
+    width: 100px;
+    height: 100px;
+    background: red;
+    margin: 50px;
+  }
+  #b {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+  </style>
+</head>
+<body>
+  <div id="a">
+    <div>
+      <div id="b"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-050-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-050-ref.html
new file mode 100644
index 00000000000..191c8dcbe3b
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-050-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>CSS Containment Test: Scrolling overflow works when paint is contained"</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
+<meta name="assert" content="Scrolling overflow works when paint is contained.">
+
+<script src="../../common/reftest-wait.js"></script>
+<script src="../../common/rendering-utils.js"></script>
+
+<style>
+.content {
+  height: 100vh;
+  width: 100%;
+}
+</style>
+
+<body>
+  <div class="content"></div>
+
+<script>
+waitForAtLeastOneFrame().then(() => {
+  document.body.scrollTop = 100;
+  takeScreenshot();
+});
+</script>
+
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-containing-block-absolute-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-containing-block-absolute-001-ref.html
new file mode 100644
index 00000000000..8861d19f888
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-containing-block-absolute-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <style>
+  #a {
+      width: 100px;
+      height: 100px;
+      background: green;
+      margin: 50px;
+  }
+  </style>
+</head>
+<body>
+  <div id="a"></div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-ignored-cases-ib-split-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-ignored-cases-ib-split-001-ref.html
new file mode 100644
index 00000000000..8a698b9d2ce
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-ignored-cases-ib-split-001-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .abspos-box {
+      position: absolute;
+      width: 200px;
+      height: 200px;
+    }
+
+    /* The boxes should stack in the order that I've listed their CSS classes
+       here.  The class names' first word (outside/before/inside/after) refers
+       to the boxes' DOM position, and "background"/"midground"/"foreground"
+       refers to their z-index values. */
+
+    .before-IB-background {
+      background: darkmagenta;
+      z-index: -1;
+      top: 50px;
+      left: 50px;
+    }
+    .after-IB-background {
+      background: magenta;
+      z-index: -1;
+      top: 70px;
+      left: 70px;
+    }
+    .outside-span-midground {
+      background: darkkhaki;
+      top: 90px;
+      left: 90px;
+    }
+    .inside-IB-midground {
+      background: khaki;
+      top: 110px;
+      left: 110px;
+    }
+    .before-IB-foreground {
+      background: darkcyan;
+      z-index: 1;
+      top: 130px;
+      left: 130px;
+    }
+    .after-IB-foreground {
+      background: cyan;
+      z-index: 1;
+      top: 150px;
+      left: 150px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The expectation here is that 'abspos-box' elements will all interact in
+       the same top-level stacking context. That means the box ordering should
+       be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
+       with the boxes stacked (visually) from top-left to bottom-right. -->
+
+  <div class="abspos-box outside-span-midground"></div>
+
+  <!-- Note: this file is identical to the testcase,
+       except for the lack of "contain: paint" on this span. -->
+  <span>
+    <div class="abspos-box before-IB-background"></div>
+    <div class="abspos-box before-IB-foreground"></div>
+    <!-- This unstyled div crates the IB split: -->
+    <div>
+      <div class="abspos-box inside-IB-midground"></div>
+    </div>
+    <div class="abspos-box after-IB-background"></div>
+    <div class="abspos-box after-IB-foreground"></div>
+  </span>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-ignored-cases-no-principal-box-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-ignored-cases-no-principal-box-001-ref.html
new file mode 100644
index 00000000000..b4513709e51
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-ignored-cases-no-principal-box-001-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+  <style>
+    div {
+      position: relative;
+      width: 100px;
+    }
+    #div1,
+    #div3 {
+      background-color: #cfc;
+      height: 100px;
+    }
+    #div1 {
+      z-index: 5;
+    }
+    #div2 {
+      display: contents;
+      background-color: #fdd;
+      height: 100px;
+      top: -20px;
+    }
+    #div2_1 {
+      background-color: #ffc;
+      z-index: 6;
+      top: -10px;
+      height: 100px;
+    }
+    #div2_2 {
+      z-index: 3;
+      position: absolute;
+      top: -15px;
+      width: 40px;
+      height: 300px;
+      background-color: #ddf;
+    }
+    #div3 {
+      z-index: 2;
+      top: -50px;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1"></div>
+
+  <div id="div2">
+    <div id="div2_1"></div>
+
+    <div id="div2_2"></div>
+  </div>
+
+  <div id="div3"></div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-stacking-context-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-stacking-context-001-ref.html
new file mode 100644
index 00000000000..c7553716ab6
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-paint-stacking-context-001-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+  <style>
+    div {
+      position: relative;
+      width: 100px;
+    }
+    #div1,
+    #div3 {
+      background-color: #cfc;
+    }
+    #div1 {
+      z-index: 5;
+    }
+    #div2 {
+      z-index: 1;
+      background-color: #fdd;
+      height: 100px;
+      top: -20px;
+    }
+    #div2_1 {
+      background-color: #ffc;
+      z-index: 6;
+      top: -10px;
+    }
+    #div2_2 {
+      z-index: 3;
+      position: absolute;
+      top: -15px;
+      width: 40px;
+      height: 100px;
+      background-color: #ddf;
+    }
+    #div3 {
+      z-index: 2;
+      top: -50px;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1">
+    <br/><br/>
+  </div>
+
+  <div id="div2">
+    <div id="div2_1">
+      <br/><br/>
+    </div>
+
+    <div id="div2_2">
+    </div>
+  </div>
+
+  <div id="div3">
+    <br/><br/>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-replaced-004-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-replaced-004-ref.html
new file mode 100644
index 00000000000..56ca5d2e50e
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-replaced-004-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
+<style>
+  body > div, video, audio, img, canvas, svg, iframe {
+    border: 3px solid orange;
+    contain: size;
+    margin-bottom: 15px;
+    width: 0px;
+    height: 0px;
+    float: left;
+    clear: both;
+  }
+</style>
+<div>abc</div>
+<video></video><br>
+<video controls></video><br>
+<img src="support/60x60-green.png"><br>
+<picture>
+<source srcset="support/60x60-green.png">
+    <img>
+</picture><br>
+<canvas></canvas><br>
+<svg></svg><br>
+<iframe></iframe>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-replaced-005-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-replaced-005-ref.html
new file mode 100644
index 00000000000..178e137cb72
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-replaced-005-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
+<style>
+  body > div, video, audio, img, canvas, svg, iframe {
+    position: absolute;
+    border: 3px solid orange;
+    contain: size;
+    margin-bottom: 15px;
+    width: 0px;
+    height: 0px;
+    float: left;
+    clear: both;
+  }
+</style>
+<div>abc</div>
+<video></video><br>
+<video controls></video><br>
+<img src="support/60x60-green.png"><br>
+<picture>
+<source srcset="support/60x60-green.png">
+    <img>
+</picture><br>
+<canvas></canvas><br>
+<svg></svg><br>
+<iframe></iframe>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-replaced-006-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-replaced-006-ref.html
new file mode 100644
index 00000000000..d6753c0694b
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-replaced-006-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Reference: Size containment replaced elements intrinsic size</title>
+<style>
+  div, video, audio, img, canvas, svg, iframe {
+    border: 3px solid orange;
+    margin-bottom: 15px;
+    width: 25px;
+    height: 35px;
+    float: left;
+    clear: both;
+  }
+</style>
+<div>abc</div>
+<video></video><br>
+<video controls></video><br>
+<img src="support/60x60-green.png"><br>
+<picture>
+<source srcset="support/60x60-green.png">
+    <img>
+</picture><br>
+<canvas></canvas><br>
+<svg></svg><br>
+<iframe></iframe>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-select-elem-003-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-select-elem-003-ref.html
new file mode 100644
index 00000000000..214ad1891ba
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-select-elem-003-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <style>
+  select {
+    color: transparent;
+  }
+  .minWidth {
+    min-width: 100px;
+  }
+  .width {
+    width: 100px;
+  }
+  .floatLWidth {
+    float: left;
+    width: 100px;
+  }
+  </style>
+</head>
+<body>
+  <select multiple class="floatLWidth">
+  </select>
+  <br style="clear:both;">
+
+  <select multiple class="minWidth">
+  </select>
+  <br>
+
+  <select multiple class="width">
+  </select>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-table-caption-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-table-caption-001-ref.html
new file mode 100644
index 00000000000..49b09334f2b
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/contain-size-table-caption-001-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <style>
+  caption {
+    border: 1em solid green;
+  }
+  </style>
+</head>
+<body>
+  <table>
+    <caption></caption>
+  </table>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-body-overflow-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-body-overflow-001-ref.html
new file mode 100644
index 00000000000..32bc8b0eafc
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-body-overflow-001-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test referemce</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+
+<style>
+html, body, p, div {
+    margin: 0;
+    width: 200px;
+    height: 200px;
+}
+</style>
+
+<p>Test passes if there is no red.
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-content-011-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-content-011-ref.html
new file mode 100644
index 00000000000..00ad302ca42
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-content-011-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div#green-square
+    {
+      background-color: green;
+      height: 100px;
+      width: 100px;
+    }
+
+  div#result
+    {
+      font-size: 3em;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square, no red and the number 17.
+
+  <div id="green-square"></div>
+
+  <div id="result">17</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-020-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-020-ref.html
new file mode 100644
index 00000000000..9a0eab3afe6
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-020-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Containment Test: Removing layout containment and contained positioned elements</title>
+
+<style>
+.container {
+    width: 300px;
+    height: 300px;
+}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+.fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+.abspos {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+</style>
+
+<div class="container">
+  <div class="fixed box"></div>
+  <div class="abspos box"></div>
+</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-021-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-021-ref.html
new file mode 100644
index 00000000000..c29b12e137f
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-021-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Layout containment fixed positioned descendants</title>
+<style>
+#green {
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+body {
+  height: 3000px;
+  margin: 0px;
+}
+#spacer {
+  height: 200px;
+}
+</style>
+<script>
+function runTest() {
+  document.documentElement.scrollTop += 200;
+}
+</script>
+<body onload="runTest()">
+<div id="spacer"></div>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="green"></div>
+</body>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-cell-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-cell-001-ref.html
new file mode 100644
index 00000000000..9ff7f45e39c
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-cell-001-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  table
+    {
+      background-color: blue;
+      border-spacing: 2px;
+      height: 206px;
+      table-layout: fixed;
+      width: 206px;
+    }
+
+  td
+    {
+      background-color: white;
+      padding: 0px;
+      vertical-align: baseline;
+    }
+
+  span
+    {
+      background-color: green;
+      color: white;
+      font-family: monospace;
+      vertical-align: top;
+    }
+  </style>
+
+  <p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
+
+  <table>
+
+    <tr><td>&nbsp;<td>&nbsp;
+
+    <tr><td>&nbsp;<td><span>PASS</span>
+
+  </table>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ifc-022-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ifc-022-ref.html
new file mode 100644
index 00000000000..682af7d4f44
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ifc-022-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      color: transparent;
+      float: left;
+      font-size: 16px;
+      padding: 8px;
+    }
+
+  div#blue-rectangle
+    {
+      background-color: blue;
+      margin: 8px;
+      width: 6em;
+    }
+
+  div#orange-rectangle
+    {
+      background-color: orange;
+      width: 12em;
+    }
+  </style>
+
+  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
+
+  <div id="blue-rectangle">Some text in a blue rectangle.</div>
+
+  <div id="orange-rectangle">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-013-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-013-ref.html
new file mode 100644
index 00000000000..27041414e4f
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-013-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      font-family: monospace;
+      font-size: 100px;
+      height: 3em;
+      overflow: scroll;
+      width: 4ch;
+    }
+  </style>
+
+ <body>
+
+  <p>Test passes if there is no red.
+
+  <div></div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-014-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-014-ref.html
new file mode 100644
index 00000000000..a2b75db3147
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-014-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      font-family: monospace;
+      font-size: 100px;
+      height: 2.8ch;
+      overflow: scroll;
+      width: 4ch;
+    }
+  </style>
+
+ <body>
+
+  <p>Test passes if there is no red.
+
+  <div></div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-015-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-015-ref.html
new file mode 100644
index 00000000000..8dbbbbd3ec3
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-015-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <body>
+
+  <p>Test passes if there is no red.
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-size-003-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-size-003-ref.html
new file mode 100644
index 00000000000..e3932a9b05f
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-layout-size-003-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      color: transparent;
+      float: left;
+      font-size: 16px;
+      padding: 8px;
+    }
+
+  div#blue-rectangle
+    {
+      background-color: blue;
+      margin: 8px;
+      width: 6em;
+    }
+
+  div#orange-rectangle
+    {
+      background-color: orange;
+      height: 0px;
+      width: 12em;
+    }
+  </style>
+
+  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
+
+  <div id="blue-rectangle">Some text in a blue rectangle.</div>
+
+  <div id="orange-rectangle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-022-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-022-ref.html
new file mode 100644
index 00000000000..b3bb7576f29
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-022-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      background-color: green;
+      height: 100px;
+      left: 100px;
+      position: relative;
+      top: 100px;
+      width: 100px;
+    }
+
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div></div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-ifc-011-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-ifc-011-ref.html
new file mode 100644
index 00000000000..229c8c2d74b
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-ifc-011-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  p
+    {
+      margin-bottom: 30px;
+    }
+
+  div
+    {
+      height: 30px;
+    }
+
+  div.orange
+    {
+      background-color: orange;
+    }
+
+  div.blue
+    {
+      background-color: blue;
+    }
+
+  div#lime
+    {
+      background-color: lime;
+    }
+  </style>
+
+  <p>Test passes if there are 5 horizontal stripes across the page in this order (from top to bottom): an orange stripe, a blue stripe, a bright green stripe, a blue stripe and then an orange stripe.
+
+  <div class="orange"></div>
+
+  <div class="blue"></div>
+
+  <div id="lime"></div>
+
+  <div class="blue"></div>
+
+  <div class="orange"></div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-independent-formatting-context-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-independent-formatting-context-001-ref.html
new file mode 100644
index 00000000000..08900b201b1
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-independent-formatting-context-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+.wrapper {
+  border: solid thick;
+  margin: 1em;
+}
+</style>
+<p>Test passes if it has the same output than the reference.</p>
+<div class="wrapper">
+  <div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
+</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-independent-formatting-context-003-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-independent-formatting-context-003-ref.html
new file mode 100644
index 00000000000..0cef592ba5c
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-independent-formatting-context-003-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+.wrapper {
+  border: solid thick;
+  margin: 1em;
+}
+</style>
+<p>Test passes if it has the same output than the reference.</p>
+<div class="wrapper">
+  <div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
+</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-size-022-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-size-022-ref.html
new file mode 100644
index 00000000000..3ca9ac9ee4d
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-size-022-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <p>This test passes if the painted blue area is <strong>exactly as tall as</strong> the orange square.
+
+  <div><img src="../support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"> <img src="../support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-size-064-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-size-064-ref.html
new file mode 100644
index 00000000000..f8826e5c95c
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-size-064-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>test reference</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div { font-size: 50px; }
+.green { background: green; }
+.grid {
+    display: grid;
+    grid-template-columns: min-content max-content;
+}
+</style>
+
+<p>This test passes if there are two green rectangles and no red.
+
+<div class=grid>
+    <div style="grid-area: 1/1">&nbsp;</div>
+    <div style="grid-area: 2/2"id=test class="grid">
+        <div>&nbsp;</div>
+        <div class=green></div>
+        <div class=green></div>
+        <div>&nbsp;</div>
+    </div>
+</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-style-counters-002-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-style-counters-002-ref.html
new file mode 100644
index 00000000000..7a14112c44c
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-style-counters-002-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+  <style>
+  div
+    {
+      font-size: 3em;
+    }
+  </style>
+
+  <p>Test passes if there is the number 14.
+
+  <div>14</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-style-counters-004-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-style-counters-004-ref.html
new file mode 100644
index 00000000000..c362dbbf533
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-style-counters-004-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Reference Test</title>
+
+  <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+
+  <style>
+  div
+    {
+      font-size: 3em;
+    }
+  </style>
+
+  <p>Test passes if there is the number 13.
+
+  <div>13</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/counter-scoping-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/counter-scoping-001-ref.html
new file mode 100644
index 00000000000..cc721c49826
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/counter-scoping-001-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test reference</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+
+<p>Test passes if the text below is "1 1.2" (not including the quotation marks).<p>
+<div>1 1.2</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/counter-scoping-003-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/counter-scoping-003-ref.html
new file mode 100644
index 00000000000..6ef3db7c89f
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/counter-scoping-003-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test reference</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+
+<p>Test passes if the text below is "1 2" (not including the quotation marks).<p>
+<div>1 2</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/counter-scoping-004-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/counter-scoping-004-ref.html
new file mode 100644
index 00000000000..f6d8e38fd5f
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/counter-scoping-004-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="UTF-8">
+<title>CSS Test Reference</title>
+<style>
+  .list-item {
+    margin-left: 40px;
+  }
+</style>
+<div class="list-item">
+  [1] A1
+  <div class="list-item">[1] B1</div>
+  <div class="list-item">[2] B2</div>
+</div>
+<div class="list-item">[2] A2</div>
+<div class="list-item">[3] A3</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/pass_if_pass_below_clipped.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/pass_if_pass_below_clipped.html
new file mode 100644
index 00000000000..044783d1e54
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/pass_if_pass_below_clipped.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+   <title>Reference rendering - passes if there is the word "PASS" below</title>
+<style>
+div { overflow: hidden; }
+</style>
+</head>
+<body>
+   <p>Test passes if there is the word "PASS" below.</p>
+   <div>PASS</div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/support/60x60-green.png b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/support/60x60-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..3fdd0b8138c79dcd1fc539458061aebc0db083fa
GIT binary patch
literal 86
zcmeAS@N?(olHy`uVBq!ia0y~yV6XvUMrH;E1_mQ<Lk0#0<^Z1%SB3_LIX{<9WME+6
l^K@|xk&sN5U|r0>&cMJV!@xMj_P;4ey{D_6%Q~loCIDbD5G()y

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/reference/nothing.html b/Tests/LibWeb/Ref/expected/wpt-import/css/reference/nothing.html
new file mode 100644
index 00000000000..98ee818a846
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/reference/nothing.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<p>There should be nothing below.</p>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/reference/pass_if_pass_below.html b/Tests/LibWeb/Ref/expected/wpt-import/css/reference/pass_if_pass_below.html
new file mode 100644
index 00000000000..7de44825c06
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/css/reference/pass_if_pass_below.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+   <title>Reference rendering - passes if there is the word "PASS" below</title>
+   <link rel="author" title="Opera" href="https://www.opera.com/">
+</head>
+<body>
+   <p>Test passes if there is the word "PASS" below.</p>
+   <div>PASS</div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/support/swatch-blue.png b/Tests/LibWeb/Ref/expected/wpt-import/css/support/swatch-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ab9b4e84f8141f21e7fe858074b7895ca10689a
GIT binary patch
literal 83
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~MrH;E21W^XP6h@B<^Z1%R|bavT@{zY85kJ2
kJzX3_IAoI*SQ!`?bQu_XI}W^JU|?YIboFyt=akR{00mVKL;wH)

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/support/swatch-orange.png b/Tests/LibWeb/Ref/expected/wpt-import/css/support/swatch-orange.png
new file mode 100644
index 0000000000000000000000000000000000000000..db967b46e4dffd6c75473aa644cca0e580a1e264
GIT binary patch
literal 83
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~MrH;E21W^XP6h@B<^Z1%*Z)fyPEB&0&A`CG
k?djqe!XcZiz{<eDpv%D6+i~C(0|Nttr>mdKI;Vst03-Jg_5c6?

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Ref/input/wpt-import/common/reftest-wait.js b/Tests/LibWeb/Ref/input/wpt-import/common/reftest-wait.js
new file mode 100644
index 00000000000..64fe9bfd7f5
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/common/reftest-wait.js
@@ -0,0 +1,39 @@
+/**
+ * Remove the `reftest-wait` class on the document element.
+ * The reftest runner will wait with taking a screenshot while
+ * this class is present.
+ *
+ * See https://web-platform-tests.org/writing-tests/reftests.html#controlling-when-comparison-occurs
+ */
+function takeScreenshot() {
+    document.documentElement.classList.remove("reftest-wait");
+}
+
+/**
+ * Call `takeScreenshot()` after a delay of at least |timeout| milliseconds.
+ * @param {number} timeout - milliseconds
+ */
+function takeScreenshotDelayed(timeout) {
+    setTimeout(function() {
+        takeScreenshot();
+    }, timeout);
+}
+
+/**
+ * Ensure that a precondition is met before waiting for a screenshot.
+ * @param {bool} condition - Fail the test if this evaluates to false
+ * @param {string} msg - Error message to write to the screenshot
+ */
+function failIfNot(condition, msg) {
+  const fail = () => {
+    (document.body || document.documentElement).textContent = `Precondition Failed: ${msg}`;
+    takeScreenshot();
+  };
+  if (!condition) {
+    if (document.readyState == "interactive") {
+      fail();
+    } else {
+      document.addEventListener("DOMContentLoaded", fail, false);
+    }
+  }
+}
diff --git a/Tests/LibWeb/Ref/input/wpt-import/common/rendering-utils.js b/Tests/LibWeb/Ref/input/wpt-import/common/rendering-utils.js
new file mode 100644
index 00000000000..46283bd5d07
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/common/rendering-utils.js
@@ -0,0 +1,19 @@
+"use strict";
+
+/**
+ * Waits until we have at least one frame rendered, regardless of the engine.
+ *
+ * @returns {Promise}
+ */
+function waitForAtLeastOneFrame() {
+  return new Promise(resolve => {
+    // Different web engines work slightly different on this area but waiting
+    // for two requestAnimationFrames() to happen, one after another, should be
+    // sufficient to ensure at least one frame has been generated anywhere.
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        resolve();
+      });
+    });
+  });
+}
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-body-overflow-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-body-overflow-001.html
new file mode 100644
index 00000000000..6fbd566ab9f
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-body-overflow-001.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test: layout containment on body prevents overflow propagation</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+  <meta name=flags content="">
+  <meta name=assert content="layout containment on body prevents overflow propagation">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-body-overflow-001-ref.html">
+  <link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
+
+<style>
+html, body, p, div {
+    margin: 0;
+    width: 200px;
+    height: 200px;
+}
+div { background: red; }
+body {
+    overflow: hidden;
+    contain: layout;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-body-overflow-003.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-body-overflow-003.html
new file mode 100644
index 00000000000..e3921432650
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-body-overflow-003.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test: size containment on body prevents overflow propagation</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+  <meta name=flags content="">
+  <meta name=assert content="size containment on body prevents overflow propagation">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-body-overflow-001-ref.html">
+  <link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
+
+<style>
+html, body, p, div {
+    margin: 0;
+    width: 200px;
+    height: 200px;
+}
+div { background: red; }
+body {
+    overflow: hidden;
+    contain: size;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-body-overflow-004.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-body-overflow-004.html
new file mode 100644
index 00000000000..c353020034e
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-body-overflow-004.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test: style containment on body prevents overflow propagation</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+  <meta name=flags content="">
+  <meta name=assert content="style containment on body prevents overflow propagation">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-body-overflow-001-ref.html">
+  <link rel=help href="https://drafts.csswg.org/css-contain-2/#contain-property">
+
+<style>
+html, body, p, div {
+    margin: 0;
+    width: 200px;
+    height: 200px;
+}
+div { background: red; }
+body {
+    overflow: hidden;
+    contain: style;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-content-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-content-001.html
new file mode 100644
index 00000000000..a70d7a966d1
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-content-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Containment Test: a block with 'contain: content' alongside a float</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-layout-ifc-022-ref.html">
+
+
+  <style>
+  div
+    {
+      color: transparent;
+      font-size: 16px;
+      padding: 8px;
+    }
+
+  div#floated-left
+    {
+      background-color: blue;
+      float: left;
+      margin: 8px;
+      width: 6em;
+    }
+
+  div#with-contain-content
+    {
+      background-color: orange;
+      width: 12em;
+
+      contain: content;
+    }
+  </style>
+
+
+  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
+
+  <div id="floated-left">Some text in a blue rectangle.</div>
+
+  <div id="with-contain-content">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-content-003.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-content-003.html
new file mode 100644
index 00000000000..cf2f24a55e6
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-content-003.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Containment Test: element with 'contain: content' and absolutely positioned descendants</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
+  <link rel="match" href="../../../../expected/wpt-import/css/reference/ref-filled-green-100px-square.xht">
+
+  <meta name="assert" content="This test checks that an element with 'contain: content' acts as containing block for its absolutely positioned descendants.">
+
+  <style>
+  div
+    {
+      width: 100px;
+    }
+
+  div#contain-content
+    {
+      background-color: red;
+      contain: content;
+      height: 100px;
+    }
+
+  div.abspos
+    {
+      background-color: green;
+      height: 50px;
+      position: absolute;
+      right: 0;
+    }
+
+  div#first-abspos
+    {
+      top: 0px;
+    }
+
+  div#second-abspos
+    {
+      bottom: 0px;
+    }
+  </style>
+
+  <body>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="contain-content">
+    <div id="first-abspos" class="abspos"></div>
+    <div id="second-abspos" class="abspos"></div>
+  </div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-content-004.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-content-004.html
new file mode 100644
index 00000000000..31e115c24cd
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-content-004.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Containment Test: 'contain: content' applies to 'table-cell' elements</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-layout-cell-001-ref.html">
+
+  <meta content="In this test, the td#contain should act as the containing block for div#abs-pos ." name="assert">
+
+  <style>
+  table
+    {
+      background-color: blue;
+      border-spacing: 2px;
+      height: 206px;
+      table-layout: fixed;
+      width: 206px;
+    }
+
+  td
+    {
+      background-color: white;
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#contain
+    {
+      contain: content;
+    }
+
+  span
+    {
+      background-color: red;
+      color: yellow;
+      font-family: monospace;
+      vertical-align: top;
+    }
+
+  div#abs-pos
+    {
+      background-color: green;
+      color: white;
+      font-family: monospace;
+      left: 0px;
+      position: absolute;
+      top: 0px;
+    }
+  </style>
+
+  <p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
+
+  <table>
+
+    <tr><td>&nbsp;<td>&nbsp;
+
+    <tr><td>&nbsp;<td id="contain"><span>FAIL</span><div id="abs-pos">PASS</div>
+
+  </table>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-001.html
new file mode 100644
index 00000000000..a2688040b2f
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-001.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test: layout containment on html prevents overflow propagation</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+  <meta name=flags content="">
+  <meta name=assert content="layout containment on html prevents overflow propagation">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-body-overflow-001-ref.html">
+  <link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
+
+<style>
+html, body, p, div {
+    margin: 0;
+    width: 200px;
+    height: 200px;
+}
+div { background: red; }
+body {
+    overflow: hidden;
+}
+html {
+    contain: layout;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-002.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-002.html
new file mode 100644
index 00000000000..5f8843aa1da
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-002.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test: paint containment on html prevents overflow propagation</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+  <meta name=flags content="">
+  <meta name=assert content="paint containment on html prevents overflow propagation">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-body-overflow-001-ref.html">
+  <link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
+
+<style>
+html, body, p, div {
+    margin: 0;
+    width: 200px;
+    height: 200px;
+}
+div { background: red; }
+body {
+    overflow: hidden;
+}
+html {
+    height: 400px;
+    contain: paint;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-003.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-003.html
new file mode 100644
index 00000000000..0ec59832c32
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-003.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test: size containment on html prevents overflow propagation</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+  <meta name=flags content="">
+  <meta name=assert content="size containment on html prevents overflow propagation">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-body-overflow-001-ref.html">
+  <link rel=help href="https://drafts.csswg.org/css-contain-1/#contain-property">
+
+<style>
+html, body, p, div {
+    margin: 0;
+    width: 200px;
+    height: 200px;
+}
+div { background: red; }
+body {
+    overflow: hidden;
+}
+html {
+    contain: size;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-004.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-004.html
new file mode 100644
index 00000000000..c1ce1afe9a9
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-html-overflow-004.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test: style containment on html prevents overflow propagation</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+  <meta name=flags content="">
+  <meta name=assert content="style containment on html prevents overflow propagation">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-body-overflow-001-ref.html">
+  <link rel=help href="https://drafts.csswg.org/css-contain-2/#contain-property">
+
+<style>
+html, body, p, div {
+    margin: 0;
+    width: 200px;
+    height: 200px;
+}
+div { background: red; }
+body {
+    overflow: hidden;
+}
+html {
+    contain: style;
+}
+</style>
+
+<p>Test passes if there is no red.
+
+<div></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-inline-size-grid-stretches-auto-rows.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-inline-size-grid-stretches-auto-rows.html
new file mode 100644
index 00000000000..1c5f344efce
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-inline-size-grid-stretches-auto-rows.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-stretch">
+<link rel="match" href="../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="grid with inline-size containment, and min-height will still distribute extra space to auto rows">
+<style>
+grid {
+    display: grid;
+    min-height: 100px;
+    grid-template-rows: auto;
+    contain: inline-size;
+}
+.absolute {
+    position: absolute;
+}
+.align-end {
+    align-self: end;
+}
+.item {
+    width: 100px;
+    height: 50px;
+    background-color: green;
+}
+</style>
+</head>
+<body>
+    <p>Test passes if there is a filled green square.</p>
+    <grid>
+        <div class="absolute item"></div>
+        <div class="item align-end"></div>
+    </grid>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-inline-size-table.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-inline-size-table.html
new file mode 100644
index 00000000000..80091133dd7
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-inline-size-table.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>contain:inline-size on table</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<!-- Note that size containment doesn't apply to tables:
+     https://www.w3.org/TR/css-contain-1/#containment-size -->
+<div style="width:100px; height:100px; background:red;">
+  <div style="display:table; contain:inline-size; width:fit-content; background:green;">
+    <div style="width:100px; height:100px;"></div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-001.html
new file mode 100644
index 00000000000..24aebb7ac32
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-001.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test: layout containment on non-atomic inlines</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+  <meta name=flags content="">
+  <meta name=assert content="layout containment does not apply to non atomic inlines">
+  <link rel="match" href="../../../../expected/wpt-import/css/reference/pass_if_pass_below.html">
+  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+
+<style>
+#pa {
+  contain: layout;
+  height: 100vh; /*If layout containment applies, the span becomes a BFC, height applies, and knocks SS off the page */
+}
+
+#ss {
+  vertical-align: bottom;
+}
+</style>
+
+<p>Test passes if there is the word "PASS" below.</p>
+<div><span id="pa">PA</span><span id="ss">SS</span></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-006.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-006.html
new file mode 100644
index 00000000000..2e788f67a4f
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-006.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Layout containment absolutely positioned descendants</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/ref-filled-green-100px-square.xht">
+<meta name=assert content="Layout containment makes an element to act as containing block for absolutely positioned descendants.">
+<style>
+#contain-layout {
+  contain: layout;
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+
+#abspos {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="contain-layout">
+  <div id="abspos"></div>
+</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-014.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-014.html
new file mode 100644
index 00000000000..51777e8984c
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-014.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>CSS Containment Test: Layout containment on table-caption</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/ref-filled-green-100px-square.xht">
+<meta name=assert content="Layout containment does apply to table-caption elements.">
+
+<style>
+#table-caption {
+  display: table-caption;
+  contain: layout;
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+#abspos {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="table-caption">
+  <div id="abspos"></div>
+</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-016.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-016.html
new file mode 100644
index 00000000000..7ccc371ee2d
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-016.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Layout containment stacking context</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/pass_if_pass_below.html">
+<meta name=assert content="Layout containment elements create a stacking context.">
+<style>
+div {
+  contain: layout;
+  background: white;
+}
+span {
+  position: relative;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is the word "PASS" below.</p>
+<div><span>PASS</span></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-017.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-017.html
new file mode 100644
index 00000000000..6f718f9f99e
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-017.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Layout containment stacking context</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/nothing.html">
+<meta name=assert content="Elements in which layout containment doesn't apply, do not create a stacking context.">
+<style>
+rt {
+  display: ruby-text;
+  contain: layout;
+  background: white;
+  overflow: hidden;
+}
+span {
+  position: relative;
+  z-index: -1;
+}
+</style>
+
+<p>There should be nothing below.</p>
+<ruby><rt><span>FAIL</span></rt></ruby>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-019.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-019.html
new file mode 100644
index 00000000000..03ce4c3ef33
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-019.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Layout containment inside a fit-content element</title>
+<link rel="help" href="https://crbug.com/1268449">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/ref-filled-green-100px-square.xht">
+<meta name=assert
+    content="Layout containment inside a fit-content element should update size when the content is changed">
+<style>
+    #contain-parent {
+        width: fit-content;
+    }
+
+    #contain-layout {
+        contain: layout;
+        background: green;
+    }
+
+    #content {
+        width: 50px;
+        height: 100px;
+    }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="contain-parent">
+    <div id="contain-layout">
+        <div id="content"></div>
+    </div>
+</div>
+
+<script>
+window.requestAnimationFrame(() => {
+    document.body.offsetTop;
+    document.getElementById('content').style.width = '100px';
+    document.body.offsetTop;
+});
+</script>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-020.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-020.html
new file mode 100644
index 00000000000..3bab564ba56
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-020.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset=utf-8>
+<title>CSS Containment Test: Removing layout containment and contained positioned elements</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-layout-020-ref.html">
+<meta name=assert content="Removing layout containment relayouts contained positioned elements correctly.">
+
+<style>
+#container {
+    width: 300px;
+    height: 300px;
+    contain: layout;
+}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+.fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+.abspos {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+</style>
+
+<div id="container">
+  <div class="fixed box"></div>
+  <div class="abspos box"></div>
+</div>
+
+<script>
+  requestAnimationFrame(() => {
+    container.style.contain = "none";
+    document.documentElement.removeAttribute("class");
+  });
+</script>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-cell-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-cell-001.html
new file mode 100644
index 00000000000..a39857a06f4
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-cell-001.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Containment Test: 'contain: layout' applies to 'table-cell' elements</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-layout-cell-001-ref.html">
+
+  <meta content="In this test, the div#contain should act as the containing block for div#abs-pos ." name="assert">
+
+  <style>
+  div#table
+    {
+      background-color: blue;
+      border-spacing: 2px;
+      display: table;
+      height: 206px;
+      table-layout: fixed;
+      width: 206px;
+    }
+
+  div.row
+    {
+      display: table-row;
+    }
+
+  div.cell
+    {
+      background-color: white;
+      display: table-cell;
+      vertical-align: top;
+    }
+
+  div#contain
+    {
+      contain: layout;
+    }
+
+  span
+    {
+      background-color: red;
+      color: yellow;
+      font-family: monospace;
+      vertical-align: top;
+    }
+
+  div#abs-pos
+    {
+      background-color: green;
+      color: white;
+      font-family: monospace;
+      left: 0px;
+      position: absolute;
+      top: 0px;
+    }
+  </style>
+
+  <p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
+
+  <div id="table">
+
+    <div class="row"><div class="cell">&nbsp;</div><div class="cell">&nbsp;</div></div>
+
+    <div class="row"><div class="cell">&nbsp;</div><div class="cell" id="contain"><span>FAIL</span><div id="abs-pos">PASS</div></div></div>
+
+  </div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-cell-002.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-cell-002.html
new file mode 100644
index 00000000000..4864d3c4ceb
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-cell-002.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Containment Test: 'contain: layout' applies to 'table-cell' elements</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-layout-cell-001-ref.html">
+
+  <meta content="In this test, the td#contain should act as the containing block for div#abs-pos ." name="assert">
+
+  <style>
+  table
+    {
+      background-color: blue;
+      border-spacing: 2px;
+      height: 206px;
+      table-layout: fixed;
+      width: 206px;
+    }
+
+  td
+    {
+      background-color: white;
+      padding: 0px;
+      vertical-align: top;
+    }
+
+  td#contain
+    {
+      contain: layout;
+    }
+
+  span
+    {
+      background-color: red;
+      color: yellow;
+      font-family: monospace;
+      vertical-align: top;
+    }
+
+  div#abs-pos
+    {
+      background-color: green;
+      color: white;
+      font-family: monospace;
+      left: 0px;
+      position: absolute;
+      top: 0px;
+    }
+  </style>
+
+  <p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
+
+  <table>
+
+    <tr><td>&nbsp;<td>&nbsp;
+
+    <tr><td>&nbsp;<td id="contain"><span>FAIL</span><div id="abs-pos">PASS</div>
+
+  </table>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-containing-block-absolute-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-containing-block-absolute-001.html
new file mode 100644
index 00000000000..40106858979
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-containing-block-absolute-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: layout' element should contain absolute position elements.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-paint-containing-block-absolute-001-ref.html">
+  <style>
+  #a {
+      contain: layout;
+      width: 100px;
+      height: 100px;
+      background: red;
+      margin: 50px;
+  }
+  #b {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100px;
+      height: 100px;
+      background: green;
+  }
+  </style>
+</head>
+<body>
+  <div id="a">
+    <div>
+      <div id="b"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-formatting-context-margin-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-formatting-context-margin-001.html
new file mode 100644
index 00000000000..d9cc4f9469b
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-formatting-context-margin-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: layout' with a vertical margin child. Margin collapse should not occur, and neither should overflow clipping.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-layout-formatting-context-margin-001-ref.html">
+  <style>
+  #a {
+      contain:layout;
+      background: blue;
+      margin: 10px;
+      width: 50px;
+      height: 50px;
+  }
+  #b {
+      width: 50px;
+      height: 40px;
+      background: green;
+      margin-top: 10px;
+  }
+  #c {
+      background: lightblue;
+      width: 50px;
+      height: 10px;
+  }
+  </style>
+</head>
+<body>
+  <div id="a">
+    <div id="b"></div>
+    <div id="c"></div>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ifc-022.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ifc-022.html
new file mode 100644
index 00000000000..e22df1e34d5
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ifc-022.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Containment Test: 'contain: layout' and creation of an independent formating context: text no longer flowing around a float</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-layout-ifc-022-ref.html">
+
+  <meta content="This test checks that an element with 'contain: layout' will make such element create its own formatting context. In this test, the element with 'contain: layout' acts as if it has its own formatting context independent from div#floated-left element. In other words, the div#with-contain-layout is no longer required to flow its content around the div#floated-left element and current line boxes next to the float are no longer shortened to make room for the margin box of the float." name="assert">
+
+  <style>
+  div
+    {
+      color: transparent;
+      font-size: 16px;
+      padding: 8px;
+    }
+
+  div#floated-left
+    {
+      background-color: blue;
+      float: left;
+      margin: 8px;
+      width: 6em;
+    }
+
+  div#with-contain-layout
+    {
+      background-color: orange;
+      contain: layout;
+      width: 12em;
+    }
+  </style>
+
+  <p>Test passes if the orange rectangle and blue rectangle do not overlap.
+
+  <!--
+
+  or
+
+  <p>Test passes if the orange rectangle and blue rectangle are side by side.
+
+  or
+
+  <p>Test passes if the orange rectangle and blue rectangle are apart from each other.
+
+  -->
+
+  <div id="floated-left">Some text in a blue rectangle.</div>
+
+  <div id="with-contain-layout">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ignored-cases-ib-split-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ignored-cases-ib-split-001.html
new file mode 100644
index 00000000000..078107a9eb5
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ignored-cases-ib-split-001.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: layout' should have no effect on non-atomic inline
+         (including its block part, if there's a block-in-inline split)</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-layout-ignored-cases-ib-split-001-ref.html">
+  <style>
+    .abspos-box {
+      position: absolute;
+      width: 200px;
+      height: 200px;
+    }
+
+    /* The boxes should stack in the order that I've listed their CSS classes
+       here.  The class names' first word (outside/before/inside/after) refers
+       to the boxes' DOM position, and "background"/"midground"/"foreground"
+       refers to their z-index values. */
+
+    .before-IB-background {
+      background: darkmagenta;
+      z-index: -1;
+      top: 50px;
+      left: 50px;
+    }
+    .after-IB-background {
+      background: magenta;
+      z-index: -1;
+      top: 70px;
+      left: 70px;
+    }
+    .outside-span-midground {
+      background: darkkhaki;
+      top: 90px;
+      left: 90px;
+    }
+    .inside-IB-midground {
+      background: khaki;
+      top: 110px;
+      left: 110px;
+    }
+    .before-IB-foreground {
+      background: darkcyan;
+      z-index: 1;
+      top: 130px;
+      left: 130px;
+    }
+    .after-IB-foreground {
+      background: cyan;
+      z-index: 1;
+      top: 150px;
+      left: 150px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The expectation here is that 'abspos-box' elements will all interact in
+       the same top-level stacking context. That means the box ordering should
+       be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
+       with the boxes stacked (visually) from top-left to bottom-right. -->
+
+  <div class="abspos-box outside-span-midground"></div>
+
+  <span style="contain: layout">
+    <div class="abspos-box before-IB-background"></div>
+    <div class="abspos-box before-IB-foreground"></div>
+    <!-- This unstyled div crates the IB split: -->
+    <div>
+      <div class="abspos-box inside-IB-midground"></div>
+    </div>
+    <div class="abspos-box after-IB-background"></div>
+    <div class="abspos-box after-IB-foreground"></div>
+  </span>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-002.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-002.html
new file mode 100644
index 00000000000..5afb457c4df
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: layout' element should not contain absolute/fixed position elements when no principal box is generated.</title>
+  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-002-ref.html">
+  <style>
+  #a {
+      contain: layout;
+      display: contents;
+      width: 100px;
+      height: 100px;
+      background: red;
+      margin: 50px;
+  }
+  #b {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100px;
+      height: 100px;
+      background: green;
+  }
+  </style>
+</head>
+<body>
+  <div id="a">
+    <div>
+      <div id="b"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-003.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-003.html
new file mode 100644
index 00000000000..0b0de98463c
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-003.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: layout' element should not contain absolute/fixed position elements when no principal box is generated.</title>
+  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-layout-ignored-cases-no-principal-box-003-ref.html">
+  <style>
+  #a {
+    contain: layout;
+    display: contents;
+    width: 100px;
+    height: 100px;
+    background: red;
+    margin: 50px;
+  }
+  #b {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+  </style>
+</head>
+<body>
+  <div id="a">
+    <div>
+      <div id="b"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-independent-formatting-context-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-independent-formatting-context-001.html
new file mode 100644
index 00000000000..c485d9c2ed6
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-independent-formatting-context-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Layout containment independent formatting context</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-paint-independent-formatting-context-001-ref.html">
+<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to blocks.">
+<style>
+.wrapper {
+  border: solid thick;
+  margin: 1em;
+}
+</style>
+<p>Test passes if it has the same output than the reference.</p>
+<div class="wrapper">
+  <div style="margin: 1em 0; contain: layout;">
+    <div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-independent-formatting-context-002.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-independent-formatting-context-002.html
new file mode 100644
index 00000000000..2f2d09dbe97
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-independent-formatting-context-002.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Layout containment independent formatting context</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-paint-independent-formatting-context-001-ref.html">
+<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to inline blocks.">
+<style>
+.wrapper {
+  border: solid thick;
+  margin: 1em;
+}
+</style>
+<p>Test passes if it has the same output than the reference.</p>
+<div class="wrapper">
+  <span style="display: inline-block; margin: 1em 0; vertical-align: top; contain: layout;">
+    <div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
+  </span>
+</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ink-overflow-014.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ink-overflow-014.html
new file mode 100644
index 00000000000..b8429fefc48
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ink-overflow-014.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Containment Test: 'contain: layout' and ink overflow</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">
+  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-014-ref.html">
+
+  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">
+
+  <style>
+  div#outer
+    {
+      font-family: monospace;
+      font-size: 100px;
+      height: 2.8ch;
+      line-height: 1.5; /* computes to 150px */
+      width: 4ch;
+
+      overflow: scroll;
+    }
+
+  div#inner
+    {
+      color: red;
+      contain: layout;
+      height: 0;
+    }
+  </style>
+
+  <!--
+
+  150px : height of 1 line box
+
+  -->
+
+ <body onload="document.getElementById('outer').scrollLeft = 250; document.getElementById('outer').scrollTop = 150;">
+
+  <p>Test passes if there is no red.
+
+  <div id="outer">
+    <div id="inner">&nbsp;<br>FAIL</div>
+  </div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ink-overflow-016.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ink-overflow-016.html
new file mode 100644
index 00000000000..64fdd51a791
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ink-overflow-016.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Containment Test: 'contain: layout' and ink overflow</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">
+  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-015-ref.html">
+
+  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">
+
+  <style>
+  div#outer
+    {
+      font-family: monospace;
+      font-size: 100px;
+      height: 2.8ch;
+      line-height: 1.5; /* computes to 150px */
+      width: 4ch;
+
+      overflow: auto;
+    }
+
+  div#inner
+    {
+      color: red;
+      contain: layout;
+      height: 0;
+    }
+  </style>
+
+  <!--
+
+  150px : height of 1 line box
+
+  -->
+
+ <body onload="document.getElementById('outer').scrollLeft = 250; document.getElementById('outer').scrollTop = 150;">
+
+  <p>Test passes if there is no red.
+
+  <div id="outer">
+    <div id="inner">&nbsp;<br>FAIL</div>
+  </div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ink-overflow-017.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ink-overflow-017.html
new file mode 100644
index 00000000000..b194ae00d27
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-ink-overflow-017.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Containment Test: 'contain: layout' and ink overflow</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#ink-overflow">
+  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-layout-ink-overflow-014-ref.html">
+
+  <meta content="This test checks that when the contents of an element with 'contain: layout' overflows, its contents must be treated as ink overflow. In this test, the content overflows the div#inner. If such content was treated as 'overflow: visible', then the div#outer would 'pick up' such content and would make it reachable and accessible via its own generated scrollbar. But the overflowed content must be treated as ink overflow and is therefore treated as a graphical effect that is beyond the scrolling mechanism and outside the scrolling mechanism." name="assert">
+
+  <style>
+  div#outer
+    {
+      font-family: monospace;
+      font-size: 100px;
+      height: 2.8ch;
+      line-height: 1.5; /* computes to 150px */
+      width: 4ch;
+
+      overflow: scroll;
+    }
+
+  div#inner
+    {
+      color: red;
+      contain: layout;
+      height: 0;
+      width: 0;
+    }
+  </style>
+
+  <!--
+
+  150px : height of 1 line box
+
+  -->
+
+ <body onload="document.getElementById('outer').scrollLeft = 4000; document.getElementById('outer').scrollTop = 150;">
+
+  <p>Test passes if there is no red.
+
+  <div id="outer">
+    <div id="inner"><br>FAIL</div>
+  </div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-stacking-context-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-stacking-context-001.html
new file mode 100644
index 00000000000..e007d9b510b
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-layout-stacking-context-001.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: layout' with stacking contents. Z-index is defined only for siblings and children.</title>
+  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-paint-stacking-context-001-ref.html">
+  <style>
+    div {
+      position: relative;
+      width: 100px;
+    }
+    #div1,
+    #div3 {
+      background-color: #cfc;
+    }
+    #div1 {
+      z-index: 5;
+    }
+    #div2 {
+      contain: layout;
+      background-color: #fdd;
+      height: 100px;
+      top: -20px;
+    }
+    #div2_1 {
+      background-color: #ffc;
+      z-index: 6;
+      top: -10px;
+    }
+    #div2_2 {
+      z-index: 3;
+      position: absolute;
+      top: -15px;
+      width: 40px;
+      height: 100px;
+      background-color: #ddf;
+    }
+    #div3 {
+      z-index: 2;
+      top: -50px;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1">
+    <br/><br/>
+  </div>
+
+  <div id="div2">
+    <div id="div2_1">
+      <br/><br/>
+    </div>
+
+    <div id="div2_2">
+    </div>
+  </div>
+
+  <div id="div3">
+    <br/><br/>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-002.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-002.html
new file mode 100644
index 00000000000..7b041d94e2b
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-002.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test: paint containment on non-atomic inlines</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+  <meta name=flags content="">
+  <meta name=assert content="paint containment does not apply to non atomic inlines">
+  <link rel="match" href="../../../../expected/wpt-import/css/reference/pass_if_pass_below.html">
+  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">
+
+<style>
+span {
+  contain: paint;
+  width: 0; /* Because if the test fails, the span may get blockified, and which would make wide enough to hold the PASS */
+}
+span::after {
+  content: "PASS";
+  position: absolute;
+}
+</style>
+
+<p>Test passes if there is the word "PASS" below.</p>
+<div><span></span></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-009.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-009.html
new file mode 100644
index 00000000000..1bb8c2dbe1d
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-009.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Paint containment absolutely positioned descendants</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/ref-filled-green-100px-square.xht">
+<meta name=assert content="Paint containment makes an element to act as containing block for absolutely positioned descendants.">
+<style>
+#contain-paint {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+
+#abspos {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="contain-paint">
+  <div id="abspos"></div>
+</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-011.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-011.html
new file mode 100644
index 00000000000..84fe3d429e6
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-011.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Paint containment absolutely positioned descendants</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/ref-filled-green-100px-square.xht">
+<meta name=assert content="Paint containment doesn't apply to non-atomic inline elements so they don't act as containing block for absolutely positioned descendants.">
+<style>
+#containing-block {
+  position: relative;
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+
+#contain-paint {
+  contain: paint;
+}
+
+#abspos {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: green;
+  width: 100%;
+  height: 100%;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="containing-block">
+  <span id="contain-paint">
+    <div id="abspos"></div>
+  </span>
+</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-020.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-020.html
new file mode 100644
index 00000000000..891aef39083
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-020.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Paint containment stacking context</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/pass_if_pass_below.html">
+<meta name=assert content="Paint containment elements create a stacking context.">
+<style>
+div {
+  contain: paint;
+  background: white;
+}
+span {
+  position: relative;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is the word "PASS" below.</p>
+<div><span>PASS</span></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-021.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-021.html
new file mode 100644
index 00000000000..2099e07e8bd
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-021.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Paint containment stacking context</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/nothing.html">
+<meta name=assert content="Elements in which paint containment doesn't apply, do not create a stacking context.">
+<style>
+rt {
+  display: ruby-text;
+  contain: paint;
+  background: white;
+  overflow: hidden;
+}
+span {
+  position: relative;
+  z-index: -1;
+}
+</style>
+
+<p>There should be nothing below.</p>
+<ruby><rt><span>FAIL</span></rt></ruby>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-024.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-024.html
new file mode 100644
index 00000000000..34128ad9d2e
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-024.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Containment Test: 'contain: paint' and absolutely positioned descendants</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-paint">
+  <link rel="match" href="../../../../expected/wpt-import/css/reference/ref-filled-green-100px-square.xht">
+
+  <meta content="This test checks that paint containment does not apply to non-atomic inline elements so they do not act as containing block for absolutely positioned descendants." name="assert">
+
+  <style>
+  div#correct-containing-block
+    {
+      background-color: red;
+      height: 100px;
+      position: relative;
+      width: 100px;
+    }
+
+  div#incorrect-containing-block
+    {
+      contain: paint;
+      display: inline;
+    }
+
+  div#abspos
+    {
+      background-color: green;
+      bottom: 0;
+      height: 100%;
+      position: absolute;
+      right: 0;
+      width: 100%;
+    }
+  </style>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.
+
+  <div id="correct-containing-block">
+
+    <div id="incorrect-containing-block">
+
+      <div id="abspos"></div>
+
+    </div>
+
+  </div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-050.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-050.html
new file mode 100644
index 00000000000..feaef50cda7
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-050.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>CSS Containment Test: Scrolling overflow works when paint is contained"</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-paint-050-ref.html">
+<meta name="assert" content="Scrolling overflow works when paint is contained.">
+
+<script src="../../common/reftest-wait.js"></script>
+<script src="../../common/rendering-utils.js"></script>
+
+<style>
+body {
+  contain: paint;
+}
+.content {
+  height: 100vh;
+  width: 100%;
+}
+</style>
+
+<body>
+  <div class="content"></div>
+
+<script>
+waitForAtLeastOneFrame().then(() => {
+  document.body.scrollTop = 100;
+  takeScreenshot();
+});
+</script>
+
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-change-opacity.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-change-opacity.html
new file mode 100644
index 00000000000..f5413129ed6
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-change-opacity.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/#contain-property">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/ref-filled-green-100px-square.xht">
+<script src="../../common/reftest-wait.js"></script>
+<script src="../../common/rendering-utils.js"></script>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; background: red">
+  <div id="container" style="contain: paint; opacity: 0.1">
+    <div style="height: 100px; background: green; position: relative"></div>
+  </div>
+</div>
+<script>
+waitForAtLeastOneFrame().then(() => {
+  container.style.opacity = 1;
+  takeScreenshot();
+});
+</script>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-containing-block-absolute-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-containing-block-absolute-001.html
new file mode 100644
index 00000000000..879e9032a4b
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-containing-block-absolute-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' element should contain absolute position elements.</title>
+  <link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-paint-containing-block-absolute-001-ref.html">
+  <style>
+  #a {
+      contain: paint;
+      width: 100px;
+      height: 100px;
+      background: red;
+      margin: 50px;
+  }
+  #b {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100px;
+      height: 100px;
+      background: green;
+  }
+  </style>
+</head>
+<body>
+  <div id="a">
+    <div>
+      <div id="b"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-ignored-cases-ib-split-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-ignored-cases-ib-split-001.html
new file mode 100644
index 00000000000..ceb89e5a246
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-ignored-cases-ib-split-001.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' should have no effect on non-atomic inline
+         (including its block part, if there's a block-in-inline split)</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-paint-ignored-cases-ib-split-001-ref.html">
+  <style>
+    .abspos-box {
+      position: absolute;
+      width: 200px;
+      height: 200px;
+    }
+
+    /* The boxes should stack in the order that I've listed their CSS classes
+       here.  The class names' first word (outside/before/inside/after) refers
+       to the boxes' DOM position, and "background"/"midground"/"foreground"
+       refers to their z-index values. */
+
+    .before-IB-background {
+      background: darkmagenta;
+      z-index: -1;
+      top: 50px;
+      left: 50px;
+    }
+    .after-IB-background {
+      background: magenta;
+      z-index: -1;
+      top: 70px;
+      left: 70px;
+    }
+    .outside-span-midground {
+      background: darkkhaki;
+      top: 90px;
+      left: 90px;
+    }
+    .inside-IB-midground {
+      background: khaki;
+      top: 110px;
+      left: 110px;
+    }
+    .before-IB-foreground {
+      background: darkcyan;
+      z-index: 1;
+      top: 130px;
+      left: 130px;
+    }
+    .after-IB-foreground {
+      background: cyan;
+      z-index: 1;
+      top: 150px;
+      left: 150px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The expectation here is that 'abspos-box' elements will all interact in
+       the same top-level stacking context. That means the box ordering should
+       be (back to front): darkmagenta/magenta/darkkhaki/khaki/darkcyan/cyan,
+       with the boxes stacked (visually) from top-left to bottom-right. -->
+
+  <div class="abspos-box outside-span-midground"></div>
+
+  <span style="contain: paint">
+    <div class="abspos-box before-IB-background"></div>
+    <div class="abspos-box before-IB-foreground"></div>
+    <!-- This unstyled div crates the IB split: -->
+    <div>
+      <div class="abspos-box inside-IB-midground"></div>
+    </div>
+    <div class="abspos-box after-IB-background"></div>
+    <div class="abspos-box after-IB-foreground"></div>
+  </span>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-ignored-cases-no-principal-box-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-ignored-cases-no-principal-box-001.html
new file mode 100644
index 00000000000..c671c5b413e
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-ignored-cases-no-principal-box-001.html
@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' with 'display: contents'.</title>
+  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-paint-ignored-cases-no-principal-box-001-ref.html">
+  <meta name="assert" content="Contain:paint should have no effect when no principle box is generated.">
+  <style>
+    div {
+      position: relative;
+      width: 100px;
+    }
+    #div1,
+    #div3 {
+      background-color: #cfc;
+      height: 100px;
+    }
+    #div1 {
+      z-index: 5;
+    }
+    #div2 {
+      display: contents;
+      contain: paint;
+      background-color: #fdd;
+      height: 100px;
+      top: -20px;
+    }
+    #div2_1 {
+      background-color: #ffc;
+      z-index: 6;
+      top: -10px;
+      height: 100px;
+    }
+    #div2_2 {
+      z-index: 3;
+      position: absolute;
+      top: -15px;
+      width: 40px;
+      height: 300px;
+      background-color: #ddf;
+    }
+    #div3 {
+      z-index: 2;
+      top: -50px;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1"></div>
+
+  <div id="div2">
+    <div id="div2_1"></div>
+
+    <div id="div2_2"></div>
+  </div>
+
+  <div id="div3"></div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-independent-formatting-context-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-independent-formatting-context-001.html
new file mode 100644
index 00000000000..796b2a0cb11
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-independent-formatting-context-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Paint containment independent formatting context</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-paint-independent-formatting-context-001-ref.html">
+<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to blocks.">
+<style>
+.wrapper {
+  border: solid thick;
+  margin: 1em;
+}
+</style>
+<p>Test passes if it has the same output than the reference.</p>
+<div class="wrapper">
+  <div style="margin: 1em 0; contain: paint;">
+    <div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
+  </div>
+</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-independent-formatting-context-002.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-independent-formatting-context-002.html
new file mode 100644
index 00000000000..26d905babe8
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-independent-formatting-context-002.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Paint containment independent formatting context</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-paint-independent-formatting-context-001-ref.html">
+<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment applies to inline blocks.">
+<style>
+.wrapper {
+  border: solid thick;
+  margin: 1em;
+}
+</style>
+<p>Test passes if it has the same output than the reference.</p>
+<div class="wrapper">
+  <span style="display: inline-block; margin: 1em 0; contain: paint;">
+    <div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
+  </span>
+</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-independent-formatting-context-003.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-independent-formatting-context-003.html
new file mode 100644
index 00000000000..d8ad7ee75a0
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-independent-formatting-context-003.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Paint containment independent formatting context</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-paint-independent-formatting-context-003-ref.html">
+<meta name=assert content="Paint containment elements establish an independent formatting context. The test checks that this feature of paint containment does not appliy to inline elements.">
+<style>
+.wrapper {
+  border: solid thick;
+  margin: 1em;
+}
+</style>
+<p>Test passes if it has the same output than the reference.</p>
+<div class="wrapper">
+  <span style="margin: 1em 0; contain: paint;">
+    <div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
+  </span>
+</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-stacking-context-001a.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-stacking-context-001a.html
new file mode 100644
index 00000000000..6d81aa9bd34
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-stacking-context-001a.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: paint' with stacking contents. Z-index is defined only for siblings and children.</title>
+  <link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
+
+  <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-paint-stacking-context-001-ref.html">
+  <style>
+    div {
+      position: relative;
+      width: 100px;
+    }
+    #div1,
+    #div3 {
+      background-color: #cfc;
+    }
+    #div1 {
+      z-index: 5;
+    }
+    #div2 {
+      contain: paint;
+      background-color: #fdd;
+      height: 100px;
+      top: -20px;
+    }
+    #div2_1 {
+      background-color: #ffc;
+      z-index: 6;
+      top: -10px;
+    }
+    #div2_2 {
+      z-index: 3;
+      position: absolute;
+      top: -15px;
+      width: 40px;
+      height: 100px;
+      background-color: #ddf;
+    }
+    #div3 {
+      z-index: 2;
+      top: -50px;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1">
+    <br/><br/>
+  </div>
+
+  <div id="div2">
+    <div id="div2_1">
+      <br/><br/>
+    </div>
+
+    <div id="div2_2">
+    </div>
+  </div>
+
+  <div id="div3">
+    <br/><br/>
+  </div>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-001.html
new file mode 100644
index 00000000000..251dc4c474c
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-001.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test: size containment on non-atomic inlines</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+  <meta name=flags content="">
+  <meta name=assert content="size containment does not apply to non atomic inlines">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/pass_if_pass_below_clipped.html">
+  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">
+
+<style>
+div { overflow: hidden; }
+span { contain: size; }
+</style>
+
+<p>Test passes if there is the word "PASS" below.</p>
+<div><span>PASS</span></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-007.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-007.html
new file mode 100644
index 00000000000..8504c927aa8
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-007.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Size containment on table-row-group</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/pass_if_pass_below_clipped.html">
+<meta name=assert content="Size containment doesn't apply to table-row-group elements.">
+<style>
+div {
+  display: table-row-group;
+  contain: size;
+}
+section {
+  overflow: hidden;
+}
+</style>
+
+<p>Test passes if there is the word "PASS" below.</p>
+<section>
+<div>PASS</div>
+<section>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-008.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-008.html
new file mode 100644
index 00000000000..ef49974e410
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-008.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Size containment on table-header-group</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/pass_if_pass_below_clipped.html">
+<meta name=assert content="Size containment doesn't apply to table-header-group elements.">
+<style>
+div {
+  display: table-header-group;
+  contain: size;
+}
+section {
+  overflow: hidden;
+}
+</style>
+
+<p>Test passes if there is the word "PASS" below.</p>
+<section>
+<div>PASS</div>
+</section>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-009.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-009.html
new file mode 100644
index 00000000000..9402a556dbf
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-009.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Size containment on table-footer-group</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/pass_if_pass_below_clipped.html">
+<meta name=assert content="Size containment doesn't apply to table-footer-group elements.">
+<style>
+div {
+  display: table-footer-group;
+  contain: size;
+}
+section {
+  overflow: hidden;
+}
+</style>
+
+<p>Test passes if there is the word "PASS" below.</p>
+<section>
+<div>PASS</div>
+</section>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-010.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-010.html
new file mode 100644
index 00000000000..5d343c7963f
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-010.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Size containment on table-row</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/pass_if_pass_below_clipped.html">
+<meta name=assert content="Size containment doesn't apply to table-row elements.">
+<style>
+div {
+  display: table-row;
+  contain: size;
+}
+section {
+  overflow: hidden;
+}
+</style>
+
+<p>Test passes if there is the word "PASS" below.</p>
+<section>
+<div>PASS</div>
+</section>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-012.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-012.html
new file mode 100644
index 00000000000..d36633f5073
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-012.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Size containment on display:table</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/pass_if_pass_below_clipped.html">
+<meta name=assert content="Size containment doesn't apply to table boxes.">
+<style>
+div {
+  display: table;
+  contain: size;
+  overflow: hidden;
+}
+</style>
+
+<p>Test passes if there is the word "PASS" below.</p>
+<div>PASS</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-012b.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-012b.html
new file mode 100644
index 00000000000..3a4c9d63439
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-012b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Size containment on display:inline-table</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/pass_if_pass_below_clipped.html">
+<meta name=assert content="Size containment doesn't apply to inline-table boxes.">
+<style>
+div {
+  display: inline-table;
+  contain: size;
+  overflow: hidden;
+}
+</style>
+
+<p>Test passes if there is the word "PASS" below.</p>
+<div>PASS</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-013.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-013.html
new file mode 100644
index 00000000000..00c3f9c9a03
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-013.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/ref-filled-green-100px-square.xht">
+<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">
+<style>
+img {
+  background: green;
+  padding: 50px;
+  contain: size;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<img src="/css/support/60x60-red.png" alt="Image download support must be enabled" />
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-064.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-064.html
new file mode 100644
index 00000000000..7b144954a45
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-064.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang=en>
+  <meta charset=utf-8>
+  <title>CSS-contain test: size containment: layout in place</title>
+  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+  <meta name=flags content="">
+  <meta name=assert content="The size containment box's content (including any pseudo-elements) must be laid out into the now fixed-size size containment box normally.">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/reference/contain-size-064-ref.html">
+  <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">
+
+<style>
+div { font-size: 50px; }
+.red { background: red; }
+.green { background: green; }
+.grid {
+    display: grid;
+    grid-template-columns: min-content max-content;
+}
+#test { contain: size; }
+#test::after { content: "\a0" ; }
+</style>
+
+<p>This test passes if there are two green rectangles and no red.
+
+<div class=grid>
+    <div style="grid-area: 1/1">&nbsp;</div>
+    <div style="grid-area: 1/2"class=red></div><!-- will show if the size containment doesn't result in 0x0-->
+    <div style="grid-area: 1/3"></div>
+
+    <div class=red></div><!-- will show if the size containment doesn't result in 0x0-->
+    <div id=test class="grid red"><!-- will show if the size containment doesn't result in 0x0-->
+        <div>&nbsp;</div>
+        <div class=green></div><!-- won't show unless ::after is inserted and grid tracks are properly sized-->
+        <div class=green></div><!-- won't show unless ::after is inserted and grid tracks are properly sized-->
+    </div>
+</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-001.html
new file mode 100644
index 00000000000..d74665ffbd6
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/ref-filled-green-100px-square.xht">
+<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">
+<style>
+object {
+  background: green;
+  padding: 50px;
+  contain: size;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<object data="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect fill='red' width='100' height='100'/></svg>">
+</object>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-002.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-002.html
new file mode 100644
index 00000000000..7fe78e9eeaf
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="match" href="../../../../expected/wpt-import/css/reference/ref-filled-green-100px-square.xht">
+<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">
+<style>
+svg {
+  background: green;
+  padding: 50px 0;
+  contain: size;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<svg width="100" viewBox="0 0 50 50">
+  <rect fill="red" width="50" height="50"/>
+</svg>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-004.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-004.html
new file mode 100644
index 00000000000..2ad8c5c602f
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-004.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-size-replaced-004-ref.html">
+<meta name=assert content="This test checks that intrinsic size of replaced elements with 'contain: size' is zero.">
+<style>
+  body > div, video, audio, img, canvas, svg, iframe {
+    border: 3px solid orange;
+    contain: size;
+    margin-bottom: 15px;
+    width: min-content;
+    height: min-content;
+    float: left;
+    clear: both;
+  }
+</style>
+<div>abc</div>
+<video></video><br>
+<video controls></video><br>
+<img src="support/60x60-green.png"><br>
+<picture>
+<source srcset="support/60x60-green.png">
+    <img>
+</picture><br>
+<canvas></canvas><br>
+<svg></svg><br>
+<iframe></iframe>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-005.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-005.html
new file mode 100644
index 00000000000..8c4ff3a8e8c
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-005.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-size-replaced-005-ref.html">
+<meta name=assert content="This test checks that intrinsic size of out-of-flow replaced elements with 'contain: size' is zero.">
+<style>
+  body > div, video, audio, img, canvas, svg, iframe {
+    position: absolute;
+    border: 3px solid orange;
+    contain: size;
+    margin-bottom: 15px;
+    width: min-content;
+    height: min-content;
+    float: left;
+    clear: both;
+  }
+</style>
+<div>abc</div>
+<video></video><br>
+<video controls></video><br>
+<img src="support/60x60-green.png"><br>
+<picture>
+<source srcset="support/60x60-green.png">
+    <img>
+</picture><br>
+<canvas></canvas><br>
+<svg></svg><br>
+<iframe></iframe>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-006.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-006.html
new file mode 100644
index 00000000000..88d9c227c5a
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-replaced-006.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Size containment replaced elements intrinsic size</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
+<link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-size-replaced-006-ref.html">
+<meta name=assert content="This test checks that min-width/min-height of replaced elements with 'contain: size' works.">
+<style>
+  body > div, video, audio, img, canvas, svg, iframe {
+    border: 3px solid orange;
+    contain: size;
+    margin-bottom: 15px;
+    min-width: 25px;
+    min-height: 35px;
+    width: min-content;
+    height: min-content;
+    float: left;
+    clear: both;
+  }
+</style>
+<div>abc</div>
+<video></video><br>
+<video controls></video><br>
+<img src="support/60x60-green.png"><br>
+<picture>
+<source srcset="support/60x60-green.png">
+    <img>
+</picture><br>
+<canvas></canvas><br>
+<svg></svg><br>
+<iframe></iframe>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-select-elem-003.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-select-elem-003.html
new file mode 100644
index 00000000000..6ae5f1f7c6e
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-select-elem-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: size' on select objects should cause them to be sized as if they have no contents.</title>
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-size-select-elem-003-ref.html">
+  <style>
+  select {
+    contain: size;
+    color: transparent;
+  }
+  .minWidth {
+    min-width: 100px;
+  }
+  .width {
+    width: 100px;
+  }
+  .floatLWidth {
+    float: left;
+    width: 100px;
+  }
+  </style>
+</head>
+<body>
+  <select multiple class="floatLWidth">
+    <option>CSS Test: A size-contained floated select with specified width and no specified height should size itself as if it had no contents.</option>
+    <option>a</option>
+  </select>
+  <br style="clear:both;">
+
+  <select multiple class="minWidth">
+    <option>CSS Test: A size-contained select with specified min-width should size itself as if it had no contents.</option>
+    <option>a</option>
+  </select>
+  <br>
+
+  <select multiple class="width">
+    <option>CSS Test: A size-contained select with specified width should size itself as if it had no contents.</option>
+    <option>a</option>
+  </select>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-table-caption-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-table-caption-001.html
new file mode 100644
index 00000000000..d3518e259fa
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-size-table-caption-001.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: size' on table captions should cause them to be sized as if they had no contents.</title>
+  <link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
+  <link rel="match" href="../../../../expected/wpt-import/css/css-contain/contain-size-table-caption-001-ref.html">
+  <style>
+  .contain {
+    contain:size;
+  }
+  .innerContents {
+    height: 100px;
+    width: 100px;
+    color: transparent;
+  }
+  caption {
+    border: 1em solid green;
+  }
+  </style>
+</head>
+<body>
+  <table>
+    <caption class="contain">
+      <div class="innerContents">
+        inner
+      </div>
+    </caption>
+  </table>
+</body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/support/60x60-green.png b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/support/60x60-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..3fdd0b8138c79dcd1fc539458061aebc0db083fa
GIT binary patch
literal 86
zcmeAS@N?(olHy`uVBq!ia0y~yV6XvUMrH;E1_mQ<Lk0#0<^Z1%SB3_LIX{<9WME+6
l^K@|xk&sN5U|r0>&cMJV!@xMj_P;4ey{D_6%Q~loCIDbD5G()y

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/support/blue-100x100.png b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/support/blue-100x100.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5d1aaec5cda9d929d5dc873409c735aff2be687
GIT binary patch
literal 91
zcmeAS@N?(olHy`uVBq!ia0y~yU`PRBMrH;E1}`0UaRvqk<^Z1%R|bavT@{zY85kIZ
sJzX3_BqWn1SQjUV^fU!JgflR(RxmK$ab=QbU|?YIboFyt=akR{0N#2MK>z>%

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/support/blue50wBy46h.png b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/support/blue50wBy46h.png
new file mode 100644
index 0000000000000000000000000000000000000000..79e78b690e482b2b3d72abecbbe44c82f237be49
GIT binary patch
literal 84
zcmeAS@N?(olHy`uVBq!ia0y~yU@&4}V9;Y^W?*0lczQ#Kfq{WJz$e6&f#H8w#ieit
n1_mBa7sn6@$z%!E5>^Jr0tQCq**&5R3=9mOu6{1-oD!M<g}4yj

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/support/swatch-orange.png b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/support/swatch-orange.png
new file mode 100644
index 0000000000000000000000000000000000000000..db967b46e4dffd6c75473aa644cca0e580a1e264
GIT binary patch
literal 83
zcmeAS@N?(olHy`uVBq!ia0y~yVBiN~MrH;E21W^XP6h@B<^Z1%*Z)fyPEB&0&A`CG
k?djqe!XcZiz{<eDpv%D6+i~C(0|Nttr>mdKI;Vst03-Jg_5c6?

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt
index b9a5888a54c..9d75b2c2eb5 100644
--- a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt
+++ b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt
@@ -1,6 +1,6 @@
 All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
 'cssText': ''
-'length': '214'
+'length': '215'
 'parentRule': 'null'
 'cssFloat': 'none'
 'WebkitAlignContent': 'normal'
@@ -261,6 +261,7 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'columnWidth': 'auto'
 'column-width': 'auto'
 'columns': 'auto'
+'contain': 'none'
 'content': 'normal'
 'contentVisibility': 'visible'
 'content-visibility': 'visible'
diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt
index 8c6069af5a2..e475fa85f01 100644
--- a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt
+++ b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt
@@ -110,110 +110,111 @@ All properties associated with getComputedStyle(document.body):
     "107": "column-gap",
     "108": "column-span",
     "109": "column-width",
-    "110": "content",
-    "111": "content-visibility",
-    "112": "counter-increment",
-    "113": "counter-reset",
-    "114": "counter-set",
-    "115": "cx",
-    "116": "cy",
-    "117": "display",
-    "118": "filter",
-    "119": "flex-basis",
-    "120": "flex-direction",
-    "121": "flex-grow",
-    "122": "flex-shrink",
-    "123": "flex-wrap",
-    "124": "float",
-    "125": "grid-auto-columns",
-    "126": "grid-auto-flow",
-    "127": "grid-auto-rows",
-    "128": "grid-column-end",
-    "129": "grid-column-start",
-    "130": "grid-row-end",
-    "131": "grid-row-start",
-    "132": "grid-template-areas",
-    "133": "grid-template-columns",
-    "134": "grid-template-rows",
-    "135": "height",
-    "136": "inline-size",
-    "137": "inset-block-end",
-    "138": "inset-block-start",
-    "139": "inset-inline-end",
-    "140": "inset-inline-start",
-    "141": "isolation",
-    "142": "justify-content",
-    "143": "justify-items",
-    "144": "justify-self",
-    "145": "left",
-    "146": "margin-block-end",
-    "147": "margin-block-start",
-    "148": "margin-bottom",
-    "149": "margin-inline-end",
-    "150": "margin-inline-start",
-    "151": "margin-left",
-    "152": "margin-right",
-    "153": "margin-top",
-    "154": "mask",
-    "155": "mask-image",
-    "156": "mask-type",
-    "157": "max-height",
-    "158": "max-inline-size",
-    "159": "max-width",
-    "160": "min-height",
-    "161": "min-inline-size",
-    "162": "min-width",
-    "163": "object-fit",
-    "164": "object-position",
-    "165": "opacity",
-    "166": "order",
-    "167": "outline-color",
-    "168": "outline-offset",
-    "169": "outline-style",
-    "170": "outline-width",
-    "171": "overflow-x",
-    "172": "overflow-y",
-    "173": "padding-block-end",
-    "174": "padding-block-start",
-    "175": "padding-bottom",
-    "176": "padding-inline-end",
-    "177": "padding-inline-start",
-    "178": "padding-left",
-    "179": "padding-right",
-    "180": "padding-top",
-    "181": "position",
-    "182": "r",
-    "183": "right",
-    "184": "rotate",
-    "185": "row-gap",
-    "186": "rx",
-    "187": "ry",
-    "188": "scale",
-    "189": "scrollbar-gutter",
-    "190": "scrollbar-width",
-    "191": "stop-color",
-    "192": "stop-opacity",
-    "193": "table-layout",
-    "194": "text-decoration-color",
-    "195": "text-decoration-style",
-    "196": "text-decoration-thickness",
-    "197": "text-overflow",
-    "198": "top",
-    "199": "transform",
-    "200": "transform-box",
-    "201": "transform-origin",
-    "202": "transition-delay",
-    "203": "transition-duration",
-    "204": "transition-property",
-    "205": "transition-timing-function",
-    "206": "translate",
-    "207": "unicode-bidi",
-    "208": "user-select",
-    "209": "vertical-align",
-    "210": "width",
-    "211": "x",
-    "212": "y",
-    "213": "z-index"
+    "110": "contain",
+    "111": "content",
+    "112": "content-visibility",
+    "113": "counter-increment",
+    "114": "counter-reset",
+    "115": "counter-set",
+    "116": "cx",
+    "117": "cy",
+    "118": "display",
+    "119": "filter",
+    "120": "flex-basis",
+    "121": "flex-direction",
+    "122": "flex-grow",
+    "123": "flex-shrink",
+    "124": "flex-wrap",
+    "125": "float",
+    "126": "grid-auto-columns",
+    "127": "grid-auto-flow",
+    "128": "grid-auto-rows",
+    "129": "grid-column-end",
+    "130": "grid-column-start",
+    "131": "grid-row-end",
+    "132": "grid-row-start",
+    "133": "grid-template-areas",
+    "134": "grid-template-columns",
+    "135": "grid-template-rows",
+    "136": "height",
+    "137": "inline-size",
+    "138": "inset-block-end",
+    "139": "inset-block-start",
+    "140": "inset-inline-end",
+    "141": "inset-inline-start",
+    "142": "isolation",
+    "143": "justify-content",
+    "144": "justify-items",
+    "145": "justify-self",
+    "146": "left",
+    "147": "margin-block-end",
+    "148": "margin-block-start",
+    "149": "margin-bottom",
+    "150": "margin-inline-end",
+    "151": "margin-inline-start",
+    "152": "margin-left",
+    "153": "margin-right",
+    "154": "margin-top",
+    "155": "mask",
+    "156": "mask-image",
+    "157": "mask-type",
+    "158": "max-height",
+    "159": "max-inline-size",
+    "160": "max-width",
+    "161": "min-height",
+    "162": "min-inline-size",
+    "163": "min-width",
+    "164": "object-fit",
+    "165": "object-position",
+    "166": "opacity",
+    "167": "order",
+    "168": "outline-color",
+    "169": "outline-offset",
+    "170": "outline-style",
+    "171": "outline-width",
+    "172": "overflow-x",
+    "173": "overflow-y",
+    "174": "padding-block-end",
+    "175": "padding-block-start",
+    "176": "padding-bottom",
+    "177": "padding-inline-end",
+    "178": "padding-inline-start",
+    "179": "padding-left",
+    "180": "padding-right",
+    "181": "padding-top",
+    "182": "position",
+    "183": "r",
+    "184": "right",
+    "185": "rotate",
+    "186": "row-gap",
+    "187": "rx",
+    "188": "ry",
+    "189": "scale",
+    "190": "scrollbar-gutter",
+    "191": "scrollbar-width",
+    "192": "stop-color",
+    "193": "stop-opacity",
+    "194": "table-layout",
+    "195": "text-decoration-color",
+    "196": "text-decoration-style",
+    "197": "text-decoration-thickness",
+    "198": "text-overflow",
+    "199": "top",
+    "200": "transform",
+    "201": "transform-box",
+    "202": "transform-origin",
+    "203": "transition-delay",
+    "204": "transition-duration",
+    "205": "transition-property",
+    "206": "transition-timing-function",
+    "207": "translate",
+    "208": "unicode-bidi",
+    "209": "user-select",
+    "210": "vertical-align",
+    "211": "width",
+    "212": "x",
+    "213": "y",
+    "214": "z-index"
 }
 All properties associated with document.body.style by default:
 {}
diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
index f14108f4fa8..e75ecc5b120 100644
--- a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
+++ b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
@@ -108,6 +108,7 @@ column-count: auto
 column-gap: normal
 column-span: none
 column-width: auto
+contain: none
 content: normal
 content-visibility: visible
 counter-increment: none
@@ -133,7 +134,7 @@ grid-row-start: auto
 grid-template-areas: none
 grid-template-columns: auto
 grid-template-rows: auto
-height: 2295px
+height: 2312px
 inline-size: auto
 inset-block-end: auto
 inset-block-start: auto
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/contain-chrome-thcrash-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/contain-chrome-thcrash-001.txt
new file mode 100644
index 00000000000..fbb2ca6bed1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/contain-chrome-thcrash-001.txt
@@ -0,0 +1,6 @@
+Harness status: OK
+
+Found 1 tests
+
+1 Pass
+Pass	chrome does not crash with contain
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/contain-flexbox-outline.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/contain-flexbox-outline.txt
new file mode 100644
index 00000000000..24ec9aabb4e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/contain-flexbox-outline.txt
@@ -0,0 +1,6 @@
+Harness status: OK
+
+Found 1 tests
+
+1 Pass
+Pass	Pass if no crash
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-computed-children.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-computed-children.txt
new file mode 100644
index 00000000000..9c517907ae5
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-computed-children.txt
@@ -0,0 +1,6 @@
+Harness status: OK
+
+Found 1 tests
+
+1 Pass
+Pass	computed contain value for children should ignore container contain value
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-computed.txt
new file mode 100644
index 00000000000..0c7b8c2998c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-computed.txt
@@ -0,0 +1,21 @@
+Harness status: OK
+
+Found 15 tests
+
+8 Pass
+7 Fail
+Pass	Property contain value 'none'
+Pass	Property contain value 'strict'
+Pass	Property contain value 'content'
+Pass	Property contain value 'size'
+Pass	Property contain value 'layout'
+Pass	Property contain value 'style'
+Pass	Property contain value 'paint'
+Fail	Property contain value 'size layout'
+Fail	Property contain value 'style paint'
+Fail	Property contain value 'style layout paint'
+Fail	Property contain value 'size style layout paint'
+Fail	Property contain value 'size layout paint'
+Fail	Property contain value 'layout paint'
+Pass	Property contain value 'inline-size'
+Fail	Property contain value 'inline-size layout style paint'
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-invalid.txt
new file mode 100644
index 00000000000..fbe5b7eabf1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-invalid.txt
@@ -0,0 +1,19 @@
+Harness status: OK
+
+Found 14 tests
+
+14 Pass
+Pass	e.style['contain'] = "auto" should not set the property value
+Pass	e.style['contain'] = "layout layout" should not set the property value
+Pass	e.style['contain'] = "strict layout" should not set the property value
+Pass	e.style['contain'] = "paint strict" should not set the property value
+Pass	e.style['contain'] = "paint layout style paint" should not set the property value
+Pass	e.style['contain'] = "none none" should not set the property value
+Pass	e.style['contain'] = "none strict" should not set the property value
+Pass	e.style['contain'] = "strict strict" should not set the property value
+Pass	e.style['contain'] = "strict none" should not set the property value
+Pass	e.style['contain'] = "strict content" should not set the property value
+Pass	e.style['contain'] = "size layout size" should not set the property value
+Pass	e.style['contain'] = "paint content" should not set the property value
+Pass	e.style['contain'] = "size inline-size" should not set the property value
+Pass	e.style['contain'] = "inline-size inline-size" should not set the property value
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-valid.txt
new file mode 100644
index 00000000000..dfd31da478e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-contain/parsing/contain-valid.txt
@@ -0,0 +1,19 @@
+Harness status: OK
+
+Found 13 tests
+
+8 Pass
+5 Fail
+Pass	e.style['contain'] = "none" should set the property value
+Pass	e.style['contain'] = "strict" should set the property value
+Pass	e.style['contain'] = "content" should set the property value
+Pass	e.style['contain'] = "size" should set the property value
+Pass	e.style['contain'] = "layout" should set the property value
+Pass	e.style['contain'] = "style" should set the property value
+Pass	e.style['contain'] = "paint" should set the property value
+Fail	e.style['contain'] = "layout size" should set the property value
+Fail	e.style['contain'] = "paint style" should set the property value
+Fail	e.style['contain'] = "layout style paint" should set the property value
+Fail	e.style['contain'] = "layout paint style size" should set the property value
+Pass	e.style['contain'] = "inline-size" should set the property value
+Fail	e.style['contain'] = "layout inline-size" should set the property value
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-contains-strict.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-contains-strict.txt
index b1d1e31eb9a..beff7d1060b 100644
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-contains-strict.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-flexbox/flex-item-contains-strict.txt
@@ -2,13 +2,12 @@ Harness status: OK
 
 Found 8 tests
 
-4 Pass
-4 Fail
-Fail	.inline-flex 1
-Fail	.inline-flex 2
+8 Pass
+Pass	.inline-flex 1
+Pass	.inline-flex 2
 Pass	.inline-flex 3
 Pass	.inline-flex 4
-Fail	.inline-flex 5
-Fail	.inline-flex 6
+Pass	.inline-flex 5
+Pass	.inline-flex 6
 Pass	.inline-flex 7
 Pass	.inline-flex 8
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-contain/contain-chrome-thcrash-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/contain-chrome-thcrash-001.html
new file mode 100644
index 00000000000..e3a913c76d9
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/contain-chrome-thcrash-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>CSS Overflow and Transforms: css-overflow-3</title>
+<link rel="author" href="mailto:atotic@google.com">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<link rel="help" href="https://crbug.com/964924">
+<meta name="assert" content="chrome does not crash with css contain edge case">
+<style>
+  * {
+    contain: size layout;
+  }
+  html {
+    outline-style: auto;
+    margin-bottom: 39%;
+  }
+  #target {
+    -webkit-appearance: button;
+  }
+</style>
+<output id="target">text</output>
+<script>
+test(() => {
+  document.body.offsetTop;
+  document.querySelector("#target").value = "";
+  document.body.offsetTop;
+  assert_equals(document.querySelector("#target").value, "");
+}, 'chrome does not crash with contain');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-contain/contain-flexbox-outline.html b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/contain-flexbox-outline.html
new file mode 100644
index 00000000000..28c2950cf62
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/contain-flexbox-outline.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<title>Test `contain: strict` to Flexbox does not crash</title>
+<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
+<link rel="author" href="mailto:kojii@chromium.org">
+<style>
+body {
+  contain: strict;
+  display: flex;
+}
+html {
+  outline: 1px auto;
+}
+</style>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<div id="target"></div>
+<div id="log"></div>
+<script>
+test(() => {
+  document.body.offsetTop;
+  target.style.width = '100px';
+  document.body.offsetTop;
+}, "Pass if no crash");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-computed-children.html b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-computed-children.html
new file mode 100644
index 00000000000..83669074131
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-computed-children.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8">
+<title>CSS Containment Module Level 1: getComputedStyle().contain</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
+<meta name="assert" content="computed contain value for children should ignore container contain value.">
+<div id="container"><div id="target"></div></div>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script>
+test(() => {
+  ['none', 'style', 'layout', 'paint', 'size', 'strict', 'content'].forEach(value => {
+    container.style.contain = value;
+    assert_equals(getComputedStyle(target).contain, "none");
+  });
+}, "computed contain value for children should ignore container contain value");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-computed.html
new file mode 100644
index 00000000000..dc3f3013224
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-computed.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Containment Module Level 3: getComputedStyle().contain</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#contain-property">
+<meta name="assert" content="contain computed value is as specified.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("contain", "none");
+test_computed_value("contain", "strict");
+test_computed_value("contain", "content");
+
+test_computed_value("contain", "size");
+test_computed_value("contain", "layout");
+test_computed_value("contain", "style");
+test_computed_value("contain", "paint");
+test_computed_value("contain", "size layout");
+test_computed_value("contain", "style paint");
+test_computed_value("contain", "style layout paint", "content");
+test_computed_value("contain", "size style layout paint", "strict");
+test_computed_value("contain", "size layout paint", "size layout paint");
+test_computed_value("contain", "layout paint");
+test_computed_value("contain", "inline-size");
+test_computed_value("contain", "inline-size layout style paint");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-invalid.html
new file mode 100644
index 00000000000..c62169313a5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-invalid.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Containment Module Level 3: parsing contain with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#contain-property">
+<meta name="assert" content="contain supports only the grammar 'none | strict | content | [ [ size | inline-size ] || layout || style || paint ]'.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("contain", "auto");
+test_invalid_value("contain", "layout layout");
+test_invalid_value("contain", "strict layout");
+test_invalid_value("contain", "paint strict");
+test_invalid_value("contain", "paint layout style paint");
+test_invalid_value("contain", "none none");
+test_invalid_value("contain", "none strict");
+test_invalid_value("contain", "strict strict");
+test_invalid_value("contain", "strict none");
+test_invalid_value("contain", "strict content");
+test_invalid_value("contain", "size layout size");
+test_invalid_value("contain", "paint content");
+test_invalid_value("contain", "size inline-size");
+test_invalid_value("contain", "inline-size inline-size");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-valid.html
new file mode 100644
index 00000000000..533f75ef2fd
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-contain/parsing/contain-valid.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Containment Module Level 3: parsing contain with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#contain-property">
+<meta name="assert" content="contain supports the full grammar 'none | strict | content | [ [ size | inline-size ] || layout || style || paint ]'.">
+<meta name="assert" content="contain serializes in canonical order.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("contain", "none");
+test_valid_value("contain", "strict");
+test_valid_value("contain", "content");
+
+// [ [ size | inline-size ] || layout || style || paint ]
+test_valid_value("contain", "size");
+test_valid_value("contain", "layout");
+test_valid_value("contain", "style");
+test_valid_value("contain", "paint");
+test_valid_value("contain", "layout size", "size layout");
+test_valid_value("contain", "paint style", "style paint");
+test_valid_value("contain", "layout style paint");
+test_valid_value("contain", "layout paint style size", "size layout style paint");
+test_valid_value("contain", "inline-size");
+test_valid_value("contain", "layout inline-size", "inline-size layout");
+</script>
+</body>
+</html>