From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../content-visibility/animation-display-lock.html | 188 +++++++++++++++++++++
 .../content-visibility/container-focus-ref.html    |  21 +++
 .../content-visibility/container-ref.html          |  17 ++
 .../container-with-child-ref.html                  |  25 +++
 .../container-with-pos-children-ref.html           |  56 ++++++
 .../content-visibility/content-visibility-001.html |  45 +++++
 .../content-visibility/content-visibility-002.html |  42 +++++
 .../content-visibility-003-ref.html                |  22 +++
 .../content-visibility/content-visibility-003.html |  29 ++++
 .../content-visibility-004-ref.html                |  11 ++
 .../content-visibility/content-visibility-004.html |  22 +++
 .../content-visibility/content-visibility-005.html |  42 +++++
 .../content-visibility/content-visibility-006.html |  43 +++++
 .../content-visibility/content-visibility-007.html |  43 +++++
 .../content-visibility/content-visibility-008.html |  44 +++++
 .../content-visibility/content-visibility-009.html |  47 ++++++
 .../content-visibility/content-visibility-010.html |  47 ++++++
 .../content-visibility/content-visibility-011.html |  47 ++++++
 .../content-visibility/content-visibility-012.html |  43 +++++
 .../content-visibility/content-visibility-013.html |  43 +++++
 .../content-visibility/content-visibility-014.html |  44 +++++
 .../content-visibility/content-visibility-015.html |  50 ++++++
 .../content-visibility/content-visibility-016.html |  51 ++++++
 .../content-visibility/content-visibility-017.html |  51 ++++++
 .../content-visibility/content-visibility-018.html |  52 ++++++
 .../content-visibility-019-ref.html                |  17 ++
 .../content-visibility-019.sub.https.html          |  37 ++++
 .../content-visibility-020-ref.html                |  17 ++
 .../content-visibility/content-visibility-020.html |  46 +++++
 .../content-visibility-021-ref.html                |  25 +++
 .../content-visibility/content-visibility-021.html |  46 +++++
 .../content-visibility-022-ref.html                |  24 +++
 .../content-visibility/content-visibility-022.html |  53 ++++++
 .../content-visibility-023-ref.html                |  24 +++
 .../content-visibility/content-visibility-023.html |  45 +++++
 .../content-visibility-024-ref.html                |  24 +++
 .../content-visibility/content-visibility-024.html |  46 +++++
 .../content-visibility-025-ref.html                |  32 ++++
 .../content-visibility/content-visibility-025.html |  53 ++++++
 .../content-visibility/content-visibility-026.html |  31 ++++
 .../content-visibility-027-ref.html                |  17 ++
 .../content-visibility/content-visibility-027.html |  37 ++++
 .../content-visibility/content-visibility-028.html |  64 +++++++
 .../content-visibility/content-visibility-029.html |  27 +++
 .../content-visibility/content-visibility-030.html | 183 ++++++++++++++++++++
 .../content-visibility/content-visibility-031.html |  72 ++++++++
 .../content-visibility-032-ref.html                |  11 ++
 .../content-visibility/content-visibility-032.html |  27 +++
 .../content-visibility-033-ref.html                |  11 ++
 .../content-visibility-033.sub.https.html          |  27 +++
 .../content-visibility-034-ref.html                |  30 ++++
 .../content-visibility/content-visibility-034.html |  44 +++++
 .../content-visibility/content-visibility-035.html |  59 +++++++
 .../content-visibility/content-visibility-036.html |  61 +++++++
 .../content-visibility/content-visibility-037.html |  39 +++++
 .../content-visibility/content-visibility-038.html | 107 ++++++++++++
 .../content-visibility/content-visibility-039.html |  79 +++++++++
 .../content-visibility/content-visibility-040.html |  45 +++++
 .../content-visibility/content-visibility-041.html |  43 +++++
 .../content-visibility-042-ref.html                |  21 +++
 .../content-visibility/content-visibility-042.html |  38 +++++
 .../content-visibility/content-visibility-043.html |  41 +++++
 .../content-visibility/content-visibility-044.html |  34 ++++
 .../content-visibility/content-visibility-045.html |  52 ++++++
 .../content-visibility/content-visibility-046.html |  45 +++++
 .../content-visibility/content-visibility-047.html |  48 ++++++
 .../content-visibility/content-visibility-048.html |  46 +++++
 .../content-visibility-049-ref.html                |  33 ++++
 .../content-visibility/content-visibility-049.html |  43 +++++
 .../content-visibility/content-visibility-050.html |  39 +++++
 .../content-visibility/content-visibility-051.html |  44 +++++
 .../content-visibility/content-visibility-052.html |  73 ++++++++
 .../content-visibility/content-visibility-053.html |  30 ++++
 .../content-visibility/content-visibility-054.html |  34 ++++
 .../content-visibility/content-visibility-055.html |  42 +++++
 .../content-visibility/content-visibility-056.html |  42 +++++
 .../content-visibility/content-visibility-057.html |  52 ++++++
 .../content-visibility-058-ref.html                |  61 +++++++
 .../content-visibility/content-visibility-058.html |  65 +++++++
 .../content-visibility/content-visibility-060.html |  57 +++++++
 .../content-visibility/content-visibility-061.html |  57 +++++++
 .../content-visibility/content-visibility-062.html |  57 +++++++
 .../content-visibility/content-visibility-063.html |  57 +++++++
 .../content-visibility-064-ref.html                |  57 +++++++
 .../content-visibility/content-visibility-064.html |  64 +++++++
 .../content-visibility/content-visibility-065.html |  57 +++++++
 .../content-visibility/content-visibility-066.html |  57 +++++++
 .../content-visibility/content-visibility-067.html |  55 ++++++
 .../content-visibility/content-visibility-068.html | 103 +++++++++++
 .../content-visibility/content-visibility-069.html |  53 ++++++
 .../content-visibility/content-visibility-070.html | 112 ++++++++++++
 .../content-visibility/content-visibility-071.html | 185 ++++++++++++++++++++
 .../content-visibility/content-visibility-072.html |  86 ++++++++++
 .../content-visibility/content-visibility-073.html |  44 +++++
 .../content-visibility-074-ref.html                |  35 ++++
 .../content-visibility/content-visibility-074.html |  69 ++++++++
 .../content-visibility-075-ref.html                |  37 ++++
 .../content-visibility/content-visibility-075.html |  41 +++++
 .../content-visibility/content-visibility-076.html |  41 +++++
 .../content-visibility/content-visibility-077.html |  27 +++
 .../content-visibility-078-ref.html                |  29 ++++
 .../content-visibility/content-visibility-078.html |  43 +++++
 .../content-visibility-079-ref.html                |   9 +
 .../content-visibility/content-visibility-079.html |  17 ++
 .../content-visibility/content-visibility-080.html |  32 ++++
 .../content-visibility/content-visibility-081.html |  55 ++++++
 .../content-visibility/content-visibility-082.html |  32 ++++
 .../content-visibility/content-visibility-083.html |  42 +++++
 .../content-visibility/content-visibility-084.html |  50 ++++++
 ...ontent-visibility-auto-applied-to-th-crash.html |  21 +++
 .../content-visibility-auto-in-iframe-ref.html     |  25 +++
 .../content-visibility-auto-in-iframe.html         |  28 +++
 .../content-visibility-auto-intrinsic-width.html   |  25 +++
 .../content-visibility-auto-nested-ref.html        |  10 ++
 .../content-visibility-auto-nested.html            |  28 +++
 .../content-visibility-auto-selection-crash.html   |  26 +++
 ...ility-auto-state-changed-first-observation.html |  65 +++++++
 ...tent-visibility-auto-state-changed-removed.html |  41 +++++
 .../content-visibility-auto-state-changed.html     |  98 +++++++++++
 .../content-visibility-canvas-ref.html             |  17 ++
 .../content-visibility-canvas.html                 |  43 +++++
 .../content-visibility-continuations-crash.html    |  14 ++
 .../content-visibility-fieldset-size-ref.html      |  14 ++
 .../content-visibility-fieldset-size.html          |  17 ++
 ...tent-visibility-forced-layout-client-rects.html | 105 ++++++++++++
 .../content-visibility-form-controls-crash.html    |  34 ++++
 ...content-visibility-hit-test-contents-crash.html |  27 +++
 .../content-visibility/content-visibility-img.html |  48 ++++++
 .../content-visibility-in-svg-000-crash.html       |  30 ++++
 .../content-visibility-input-image.html            |  33 ++++
 .../content-visibility-interpolation.html          |  86 ++++++++++
 .../content-visibility-output-crash.html           |  11 ++
 ...nt-visibility-resize-observer-no-error-ref.html |  17 ++
 ...ontent-visibility-resize-observer-no-error.html |  30 ++++
 .../content-visibility-selection-crash.html        |  20 +++
 .../content-visibility/content-visibility-svg.html |  25 +++
 .../content-visibility-video-ref.html              |  17 ++
 .../content-visibility-video.html                  |  41 +++++
 .../content-visibility-with-top-layer-000.html     |  29 ++++
 .../content-visibility-with-top-layer-001.html     |  30 ++++
 .../content-visibility-with-top-layer-002.html     |  32 ++++
 .../content-visibility-with-top-layer-003.html     |  37 ++++
 .../content-visibility-with-top-layer-004.html     |  31 ++++
 .../content-visibility-with-top-layer-005.html     |  31 ++++
 .../content-visibility-with-top-layer-006.html     |  40 +++++
 ...ibility-with-top-layer-hide-after-addition.html |  33 ++++
 .../content-with-top-layer-ref.html                |  18 ++
 .../contentvisibility-nestedslot-crash.html        |  31 ++++
 ...content-visibility-transition-finished-001.html |  43 +++++
 .../crashtests/first-line-and-inline-block.html    |  13 ++
 .../detach-locked-slot-children-crash.html         |  18 ++
 .../document-element-computed-style.html           |  18 ++
 ...mic-change-paint-fully-obscuring-child-001.html |  44 +++++
 .../element-reassigned-to-skipped-slot.html        |  68 ++++++++
 ...ment-reassigned-to-slot-in-skipped-subtree.html |  70 ++++++++
 .../hidden-execcommand-crash.html                  |  10 ++
 .../hidden-pseudo-element-removed-crash.html       |  20 +++
 .../content-visibility/inheritance.html            |  24 +++
 .../inline-container-with-child-ref.html           |  27 +++
 .../content-visibility/meter-selection-crash.html  |  21 +++
 .../parsing/content-visibility-computed.html       |  23 +++
 .../parsing/content-visibility-invalid.html        |  22 +++
 .../parsing/content-visibility-valid.html          |  20 +++
 .../positioned-container-ref.html                  |  22 +++
 .../content-visibility/resources/circles.svg       |  37 ++++
 .../content-visibility/resources/dice.png          | Bin 0 -> 43058 bytes
 .../content-visibility/resources/frame.html        |   8 +
 .../resources/slot-content-visibility.html         |   8 +
 .../resources/text-fragment-target-auto.html       |  64 +++++++
 ...llIntoView-target-with-contents-hidden-ref.html |  34 ++++
 ...scrollIntoView-target-with-contents-hidden.html |  37 ++++
 ...with-focus-target-with-contents-hidden-ref.html |  34 ++++
 ...iew-with-focus-target-with-contents-hidden.html |  37 ++++
 .../slot-content-visibility-1-crash.html           |  13 ++
 .../slot-content-visibility-10-crash.html          |  16 ++
 .../slot-content-visibility-11-crash.html          |  16 ++
 .../slot-content-visibility-12-crash.html          |  31 ++++
 .../slot-content-visibility-13-crash.html          |  20 +++
 .../slot-content-visibility-14-crash.html          |  21 +++
 .../slot-content-visibility-15-crash.html          |  13 ++
 .../slot-content-visibility-16-crash.html          |  14 ++
 .../slot-content-visibility-17-crash.html          |  21 +++
 .../slot-content-visibility-18-crash.html          |  21 +++
 .../slot-content-visibility-19-crash.html          |  12 ++
 .../slot-content-visibility-2-crash.html           |  13 ++
 .../slot-content-visibility-20-crash.html          |  33 ++++
 .../slot-content-visibility-21-crash.html          |  14 ++
 .../slot-content-visibility-22-crash.html          |   9 +
 .../slot-content-visibility-3-crash.html           |  15 ++
 .../slot-content-visibility-4-crash.html           |  13 ++
 .../slot-content-visibility-5-crash.html           |  33 ++++
 .../slot-content-visibility-6-crash.html           |  14 ++
 .../slot-content-visibility-7-crash.html           |  18 ++
 .../slot-content-visibility-8-crash.html           |  30 ++++
 .../slot-content-visibility-9-crash.html           |  16 ++
 .../spacer-and-container-ref.html                  |  23 +++
 .../spacer-and-container-scrolled-ref.html         |  27 +++
 .../spacer-with-top-layer-ref.html                 |  18 ++
 198 files changed, 7675 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/animation-display-lock.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/container-focus-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/container-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/container-with-child-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/container-with-pos-children-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-001.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-002.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-003.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-004.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-005.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-006.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-007.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-008.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-009.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-010.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-011.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-012.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-013.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-014.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-015.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-016.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-017.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-018.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-019-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-019.sub.https.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-020-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-020.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-021-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-021.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-022-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-022.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-023-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-023.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-024-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-024.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-025-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-025.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-026.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-027-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-027.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-028.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-029.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-030.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-031.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-032-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-032.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-033-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-033.sub.https.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-034-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-034.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-035.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-036.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-037.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-038.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-039.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-040.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-041.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-042-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-042.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-043.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-044.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-045.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-046.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-047.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-048.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-049-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-049.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-050.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-051.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-052.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-053.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-054.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-055.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-056.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-057.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-058-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-058.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-060.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-061.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-062.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-063.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-064-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-064.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-065.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-066.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-067.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-068.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-069.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-070.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-071.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-072.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-073.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-074-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-074.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-075-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-075.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-076.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-077.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-078-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-078.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-079-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-079.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-080.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-081.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-082.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-083.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-084.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-applied-to-th-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-in-iframe-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-in-iframe.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-intrinsic-width.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-nested-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-nested.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-selection-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-state-changed-first-observation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-state-changed-removed.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-state-changed.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-canvas-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-canvas.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-continuations-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-fieldset-size-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-fieldset-size.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-forced-layout-client-rects.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-form-controls-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-hit-test-contents-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-img.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-in-svg-000-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-input-image.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-interpolation.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-output-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-resize-observer-no-error-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-resize-observer-no-error.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-selection-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-svg.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-video-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-video.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-000.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-001.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-002.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-004.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-005.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-006.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-hide-after-addition.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/content-with-top-layer-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/contentvisibility-nestedslot-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/crashtests/content-visibility-transition-finished-001.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/crashtests/first-line-and-inline-block.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/detach-locked-slot-children-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/document-element-computed-style.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/dynamic-change-paint-fully-obscuring-child-001.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/element-reassigned-to-skipped-slot.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/element-reassigned-to-slot-in-skipped-subtree.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/hidden-execcommand-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/hidden-pseudo-element-removed-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/inheritance.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/inline-container-with-child-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/meter-selection-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/parsing/content-visibility-computed.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/parsing/content-visibility-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/parsing/content-visibility-valid.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/positioned-container-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/resources/circles.svg
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/resources/dice.png
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/resources/frame.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/resources/slot-content-visibility.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/resources/text-fragment-target-auto.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-target-with-contents-hidden-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-target-with-contents-hidden.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-with-focus-target-with-contents-hidden-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-with-focus-target-with-contents-hidden.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-1-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-10-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-11-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-12-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-13-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-14-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-15-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-16-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-17-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-18-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-19-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-2-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-20-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-21-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-22-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-3-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-4-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-5-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-6-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-7-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-8-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-9-crash.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/spacer-and-container-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/spacer-and-container-scrolled-ref.html
 create mode 100644 testing/web-platform/tests/css/css-contain/content-visibility/spacer-with-top-layer-ref.html

(limited to 'testing/web-platform/tests/css/css-contain/content-visibility')

diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/animation-display-lock.html b/testing/web-platform/tests/css/css-contain/content-visibility/animation-display-lock.html
new file mode 100644
index 0000000000..7960ba0f59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/animation-display-lock.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<meta charset=utf8>
+<title>Test getComputedStyle on a CSS animation in a display locked subtree</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-2/">
+<script src="/web-animations/testcommon.js"></script>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #container {
+    content-visibility: visible;
+    contain: style layout paint;
+    contain-intrinsic-size: 0 100px;
+  }
+  @keyframes fade {
+    from { opacity: 1; }
+    to { opacity: 0;  }
+  }
+  #target {
+    background: 'green';
+    height: 100px;
+    width: 100px;
+  }
+  .animate {
+    animation: fade 1s linear 2 alternate;
+  }
+  .transition {
+    transition: opacity 1s linear;
+  }
+</style>
+<body>
+  <div id="container"></div>
+</body>
+<script>
+"use strict";
+
+function reset() {
+  const container = document.getElementById('container');
+  const target = document.getElementById('target');
+  container.style = '';
+  container.removeChild(target);
+}
+
+function createAnimatingElement(test, name) {
+  const container = document.getElementById('container');
+  const target = document.createElement('div');
+  container.appendChild(target);
+  target.id = 'target';
+  target.className = name;
+  test.add_cleanup(() => {
+    reset();
+  });
+  return target;
+}
+
+promise_test(async t => {
+  const container = document.getElementById('container');
+  const target = createAnimatingElement(t, 'animate');
+  let animationIterationEvent = false;
+  target.addEventListener('animationiteration', () => {
+    animationIterationEvent = true;
+  });
+  const animation = target.getAnimations()[0];
+  await animation.ready;
+  await waitForAnimationFrames(1);
+  container.style.contentVisibility = 'hidden';
+  animation.currentTime = 1500;
+  assert_approx_equals(
+      parseFloat(getComputedStyle(target).opacity), 0.5, 1e-6,
+      'Computed style is updated even when the animation is running in a ' +
+      'display locked subtree');
+  await waitForAnimationFrames(2);
+  assert_false(animationIterationEvent,
+               'Animation events do not fire while the animation is ' +
+               'running in a display locked subtree');
+  container.style.contentVisibility = 'visible';
+  await waitForAnimationFrames(2);
+  assert_true(animationIterationEvent,
+              'The animationiteration event fires once the animation is ' +
+              'no longer display locked');
+}, 'Animation events do not fire for a CSS animation running in a display ' +
+   'locked subtree');
+
+promise_test(async t => {
+  const container = document.getElementById('container');
+  const target = createAnimatingElement(t, 'animate');
+  const animation = target.getAnimations()[0];
+  await animation.ready;
+  let finishedWhileDisplayLocked = false;
+  animation.finished.then(() => {
+    finishedWhileDisplayLocked =
+        getComputedStyle(container).contentVisibility == 'hidden';
+  });
+  await waitForAnimationFrames(1);
+  container.style.contentVisibility = 'hidden';
+  // Advance to just shy of the effect end.
+  animation.currentTime = 1999;
+  assert_approx_equals(
+      parseFloat(getComputedStyle(target).opacity), 0.999, 1e-6,
+                'Computed style is updated even when the animation is ' +
+                'running in a display locked subtree');
+  // Advancing frames should not resolve the finished promise.
+  await waitForAnimationFrames(3);
+  container.style.contentVisibility = 'visible';
+  // Now we can resolve the finished promise.
+  await animation.finished;
+  assert_equals(finishedWhileDisplayLocked, false);
+}, 'The finished promise does not resolve due to the normal passage of time  ' +
+   'for a CSS animation in a display locked subtree');
+
+promise_test(async t => {
+  const container = document.getElementById('container');
+  await waitForAnimationFrames(1);
+  const target = createAnimatingElement(t, 'transition');
+  await waitForAnimationFrames(1);
+  target.style.opacity = 0;
+  const animation = target.getAnimations()[0];
+  await animation.ready;
+  let finishedWhileDisplayLocked = false;
+  animation.finished.then(() => {
+    finishedWhileDisplayLocked =
+        getComputedStyle(container).contentVisibility == 'hidden';
+  });
+  await waitForAnimationFrames(1);
+  container.style.contentVisibility = 'hidden';
+  // Advance to just shy of the effect end.
+  animation.currentTime = 999;
+  assert_approx_equals(
+      parseFloat(getComputedStyle(target).opacity), 0.001, 1e-6,
+                'Computed style is updated even when the animation is ' +
+                'running in a display locked subtree');
+  // Advancing frames should not resolve the finished promise.
+  await waitForAnimationFrames(3);
+  container.style.contentVisibility = 'visible';
+  // Now we can resolve the finished promise.
+  await animation.finished;
+  assert_equals(finishedWhileDisplayLocked, false);
+}, 'The finished promise does not resolve due to the normal passage of time  ' +
+   'for a CSS transition in a display locked subtree');
+
+promise_test(async t => {
+  const container = document.getElementById('container');
+  const target = createAnimatingElement(t, 'animate');
+  const animation = target.getAnimations()[0];
+  target.className = '';
+  container.style.contentVisibility = 'hidden';
+  assert_equals(target.getAnimations().length, 0);
+
+  // Though originally a CSS animation, it is no longer associated with
+  // CSS rules and no longer has an owning element. It now behaves like a
+  // programmatic web animation. Animation playback events (but not CSS
+  // animation events) should be dispatched and promises resolved despite
+  // being in a display locked subtree.
+
+  let cssAnimationEndEvent = false;
+  target.addEventListener('animationend', () => {
+    cssAnimationEndEvent = true;
+  });
+
+  let animationFinishEvent = false;
+  animation.addEventListener('finish', () => {
+    animationFinishEvent = true;
+  });
+
+  let animationFinished = false;
+  animation.finished.then(() => {
+    animationFinished = true;
+  });
+
+  animation.play();
+  assert_equals(target.getAnimations().length, 1);
+
+  animation.currentTime = 1999;
+  await animation.ready;
+  await waitForAnimationFrames(2);
+
+  assert_true(animationFinishEvent,
+              'Animation event not blocked on display locked subtree if ' +
+              'no owning element');
+  assert_true(animationFinished,
+              'Finished promise not blocked on display locked subtrtee if ' +
+              'no owning element');
+  assert_false(cssAnimationEndEvent,
+              'CSS animation events should not be dispatched if there is no ' +
+              'owning element');
+}, 'Events and promises are handled normally for animations without an ' +
+   'owning element');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/container-focus-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/container-focus-ref.html
new file mode 100644
index 0000000000..402b689010
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/container-focus-ref.html
@@ -0,0 +1,21 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: container (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+</style>
+
+<p>Test passes if the light blue box below has focus.
+<div id=container tabindex=0></div>
+
+<script>
+onload = () => container.focus();
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/container-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/container-ref.html
new file mode 100644
index 0000000000..e3e8b279ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/container-ref.html
@@ -0,0 +1,17 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: container (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+</style>
+
+<div id=container></div>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/container-with-child-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/container-with-child-ref.html
new file mode 100644
index 0000000000..d9d6ad1943
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/container-with-child-ref.html
@@ -0,0 +1,25 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: container with child and text (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: green;
+}
+</style>
+
+<div id=container>
+  Test passes if you can see this text and a green box.
+  <div id=child></div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/container-with-pos-children-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/container-with-pos-children-ref.html
new file mode 100644
index 0000000000..1a84feca0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/container-with-pos-children-ref.html
@@ -0,0 +1,56 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: container with child and text (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+.container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+  contain: layout;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: lightgreen;
+}
+.abspos { position: absolute; }
+.relpos { position: relative; }
+.fixedpos { position: fixed; }
+.start { top: 0; left: 0; }
+.mid { top: 10px; left: 10px; }
+.end { bottom: 0; right: 0; }
+.zindex { z-index: 1; }
+.small { width: 10px; height: 10px; background: blue; }
+.medium { width: 20px; height: 20px; background: green; }
+.large { width: 30px; height: 30px; background: pink; }
+</style>
+
+<p>This test passes if the two light blue boxes below have the same content.
+
+<div class=container>
+  Text.
+  <div id=child></div>
+  <span>inline child</span>
+  <div class="abspos start small"></div>
+  <div class="relpos mid medium"></div>
+  <div class="fixedpos end large"></div>
+  <div class=relpos>
+    <div class="abspos mid small zindex"></div>
+  </div>
+</div>
+<br>
+<div class=container>
+  Text.
+  <div id=child></div>
+  <span>inline child</span>
+  <div class="abspos start small"></div>
+  <div class="relpos mid medium"></div>
+  <div class="fixedpos end large"></div>
+  <div class=relpos>
+    <div class="abspos mid small zindex"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-001.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-001.html
new file mode 100644
index 0000000000..b6b10164e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-001.html
@@ -0,0 +1,45 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden does not paint</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="content-visibility hidden subtrees are not painted">
+
+<style>
+#container {
+  content-visibility: hidden;
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: lightgreen;
+}
+.abspos { position: absolute; }
+.relpos { position: relative; }
+.fixedpos { position: fixed; }
+.start { top: 0; left: 0; }
+.mid { top: 10px; left: 10px; }
+.end { bottom: 0; right: 0; }
+.zindex { z-index: 1; }
+.small { width: 10px; height: 10px; background: blue; }
+.medium { width: 20px; height: 20px; background: green; }
+.large { width: 30px; height: 30px; background: pink; }
+</style>
+
+<div id=container>
+  Text.
+  <div id=child></div>
+  <span>inline child</span>
+  <div class="abspos start small"></div>
+  <div class="relpos mid medium"></div>
+  <div class="fixedpos end large"></div>
+  <div class=relpos>
+    <div class="abspos mid small zindex"></div>
+  </div>
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-002.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-002.html
new file mode 100644
index 0000000000..4d83821839
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-002.html
@@ -0,0 +1,42 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden starts painting when removed</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-with-child-ref.html">
+<meta name="assert" content="content-visibility hidden subtrees start painting when hidden is removed">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+.hidden {
+  content-visibility: hidden;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: green;
+}
+</style>
+
+<div id=container class=hidden>
+  Test passes if you can see this text and a green box.
+  <div id=child></div>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.remove("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-003-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-003-ref.html
new file mode 100644
index 0000000000..c5dd2eab6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-003-ref.html
@@ -0,0 +1,22 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden container is not breakable (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+#parent {
+  width: 100px;
+}
+#container {
+  border-top: solid green 50px;
+  border-bottom: solid green 50px;
+}
+</style>
+
+<p>Test passes if there is a solid green square below.
+
+<div id="parent">
+  <div id="container"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-003.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-003.html
new file mode 100644
index 0000000000..d3cc902b90
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-003.html
@@ -0,0 +1,29 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden container is not breakable</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-003-ref.html">
+<meta name="assert" content="content-visibility hidden container is not breakable">
+
+<style>
+#container {
+  border-top: solid green 50px;
+  border-bottom: solid green 50px;
+  content-visibility: hidden;
+}
+#parent {
+  columns: 2;
+  height: 0px;
+  width: 200px;
+  column-gap: 0;
+}
+</style>
+
+<p>Test passes if there is a solid green square below.
+
+<div id="parent">
+  <div id="container">Text</div>
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-004-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-004-ref.html
new file mode 100644
index 0000000000..ac48a2a0f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-004-ref.html
@@ -0,0 +1,11 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden container in an iframe (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<p>Test passes if the word “Fail” does not appear in the box below.</p>
+
+<iframe></iframe>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-004.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-004.html
new file mode 100644
index 0000000000..7091dd930d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-004.html
@@ -0,0 +1,22 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden container in an iframe</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-004-ref.html">
+<meta name="assert" content="content-visibility hidden makes iframe contents hidden">
+
+<p>Test passes if the word “Fail” does not appear in the box below.</p>
+
+<iframe id="frame" srcdoc='
+  <style>
+  #container {
+    width: 100px;
+    height: 100px;
+    content-visibility: hidden;
+  }
+  </style>
+  <div id="container">Fail</div>
+'></iframe>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-005.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-005.html
new file mode 100644
index 0000000000..7b4a791cc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-005.html
@@ -0,0 +1,42 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden stops painting when added</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+.hidden {
+  content-visibility: hidden;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: red;
+}
+</style>
+
+<div id=container>
+  Test fails if you can see this text or a red box.
+  <div id=child></div>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-006.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-006.html
new file mode 100644
index 0000000000..8a0a3db0d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-006.html
@@ -0,0 +1,43 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden stops painting when added (composited)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+  will-change: transform;
+}
+.hidden {
+  content-visibility: hidden;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: red;
+}
+</style>
+
+<div id=container>
+  Test fails if you can see this text or a red box.
+  <div id=child></div>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-007.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-007.html
new file mode 100644
index 0000000000..eec9b1d900
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-007.html
@@ -0,0 +1,43 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden stops painting when added (composited child)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+.hidden {
+  content-visibility: hidden;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: red;
+  will-change: transform;
+}
+</style>
+
+<div id=container>
+  Test fails if you can see this text or a red box.
+  <div id=child></div>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-008.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-008.html
new file mode 100644
index 0000000000..fec8549879
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-008.html
@@ -0,0 +1,44 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden stops painting when added (composited with composited child)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+  will-change: transform;
+}
+.hidden {
+  content-visibility: hidden;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: red;
+  will-change: transform;
+}
+</style>
+
+<div id=container>
+  Test fails if you can see this text or a red box.
+  <div id=child></div>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-009.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-009.html
new file mode 100644
index 0000000000..d65a475233
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-009.html
@@ -0,0 +1,47 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden stops painting when added (positioned)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="positioned-container-ref.html">
+<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+.positioned {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.hidden {
+  content-visibility: hidden;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: red;
+}
+</style>
+
+<div id=container class=positioned>
+  Test fails if you can see this text or a red box.
+  <div id=child></div>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-010.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-010.html
new file mode 100644
index 0000000000..a613bf2754
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-010.html
@@ -0,0 +1,47 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden stops painting when added (positioned child)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+.positioned {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.hidden {
+  content-visibility: hidden;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: red;
+}
+</style>
+
+<div id=container>
+  Test fails if you can see this text or a red box.
+  <div id=child class=positioned></div>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-011.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-011.html
new file mode 100644
index 0000000000..c69c36900f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-011.html
@@ -0,0 +1,47 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden stops painting when added (positioned with a positioned child)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="positioned-container-ref.html">
+<meta name="assert" content="content-visibility subtrees stop painting when hidden is added">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+.positioned {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.hidden {
+  content-visibility: hidden;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: red;
+}
+</style>
+
+<div id=container class=positioned>
+  Test fails if you can see this text or a red box below.
+  <div id=child class=positioned></div>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-012.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-012.html
new file mode 100644
index 0000000000..6a52890256
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-012.html
@@ -0,0 +1,43 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden starts painting when removed (composited)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-with-child-ref.html">
+<meta name="assert" content="content-visibility hidden subtrees start painting when hidden is removed">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+  will-change: transform;
+}
+.hidden {
+  content-visibility: hidden;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: green;
+}
+</style>
+
+<div id=container class=hidden>
+  Test passes if you can see this text and a green box.
+  <div id=child></div>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.remove("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-013.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-013.html
new file mode 100644
index 0000000000..18c8b9dfee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-013.html
@@ -0,0 +1,43 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden starts painting when removed (composited child)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-with-child-ref.html">
+<meta name="assert" content="content-visibility hidden subtrees start painting when hidden is removed">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+.hidden {
+  content-visibility: hidden;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: green;
+  will-change: transform;
+}
+</style>
+
+<div id=container class=hidden>
+  Test passes if you can see this text and a green box.
+  <div id=child></div>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.remove("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-014.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-014.html
new file mode 100644
index 0000000000..e3ee8af087
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-014.html
@@ -0,0 +1,44 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden starts painting when removed (composited with a composited child)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-with-child-ref.html">
+<meta name="assert" content="content-visibility hidden subtrees start painting when hidden is removed">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+  will-change: transform;
+}
+.hidden {
+  content-visibility: hidden;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: green;
+  will-change: transform;
+}
+</style>
+
+<div id=container class=hidden>
+  Test passes if you can see this text and a green box.
+  <div id=child></div>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.remove("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-015.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-015.html
new file mode 100644
index 0000000000..6099054ebd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-015.html
@@ -0,0 +1,50 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hit testing</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility hidden prevents hit-testing in the subtree">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+#outer {
+  width: 100px;
+  height: 100px;
+  background: lightblue;
+
+  content-visibility: hidden;
+}
+#inner {
+  margin: 25px;
+  width: 50px;
+  height: 50px;
+  background lightgreen;
+}
+</style>
+
+<body id="body">
+<div id="outer"><div id="inner"></div></div>
+</body>
+
+<script>
+async_test((t) => {
+  const container = document.getElementById("outer");
+
+  let target = document.elementFromPoint(50, 50);
+  t.step(() => assert_equals(target.id, "outer", "center hits outer"));
+  target = document.elementFromPoint(10, 50);
+  t.step(() => assert_equals(target.id, "outer", "edge hits outer"));
+  target = document.elementFromPoint(100, 50);
+  t.step(() => assert_equals(target.id, "body", "elsewhere hits body"));
+  t.done();
+});
+
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-016.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-016.html
new file mode 100644
index 0000000000..db3599e243
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-016.html
@@ -0,0 +1,51 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hit testing (composited)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility hidden prevents hit-testing in the subtree">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+#outer {
+  width: 100px;
+  height: 100px;
+  background: lightblue;
+
+  content-visibility: hidden;
+  will-change: transform;
+}
+#inner {
+  margin: 25px;
+  width: 50px;
+  height: 50px;
+  background lightgreen;
+}
+</style>
+
+<body id="body">
+<div id="outer"><div id="inner"></div></div>
+</body>
+
+<script>
+async_test((t) => {
+  const container = document.getElementById("outer");
+
+  let target = document.elementFromPoint(50, 50);
+  t.step(() => assert_equals(target.id, "outer", "center hits outer"));
+  target = document.elementFromPoint(10, 50);
+  t.step(() => assert_equals(target.id, "outer", "edge hits outer"));
+  target = document.elementFromPoint(100, 50);
+  t.step(() => assert_equals(target.id, "body", "elsewhere hits body"));
+  t.done();
+});
+
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-017.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-017.html
new file mode 100644
index 0000000000..a9c0e03009
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-017.html
@@ -0,0 +1,51 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hit testing (composited child)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility hidden prevents hit-testing in the subtree">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+#outer {
+  width: 100px;
+  height: 100px;
+  background: lightblue;
+
+  content-visibility: hidden;
+}
+#inner {
+  margin: 25px;
+  width: 50px;
+  height: 50px;
+  background lightgreen;
+  will-change: transform;
+}
+</style>
+
+<body id="body">
+<div id="outer"><div id="inner"></div></div>
+</body>
+
+<script>
+async_test((t) => {
+  const container = document.getElementById("outer");
+
+  let target = document.elementFromPoint(50, 50);
+  t.step(() => assert_equals(target.id, "outer", "center hits outer"));
+  target = document.elementFromPoint(10, 50);
+  t.step(() => assert_equals(target.id, "outer", "edge hits outer"));
+  target = document.elementFromPoint(100, 50);
+  t.step(() => assert_equals(target.id, "body", "elsewhere hits body"));
+  t.done();
+});
+
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-018.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-018.html
new file mode 100644
index 0000000000..15fe7f769d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-018.html
@@ -0,0 +1,52 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hit testing (composited with a composited child)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility hidden prevents hit-testing in the subtree">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+#outer {
+  width: 100px;
+  height: 100px;
+  background: lightblue;
+
+  content-visibility: hidden;
+  will-change: transform;
+}
+#inner {
+  margin: 25px;
+  width: 50px;
+  height: 50px;
+  background lightgreen;
+  will-change: transform;
+}
+</style>
+
+<body id="body">
+<div id="outer"><div id="inner"></div></div>
+</body>
+
+<script>
+async_test((t) => {
+  const container = document.getElementById("outer");
+
+  let target = document.elementFromPoint(50, 50);
+  t.step(() => assert_equals(target.id, "outer", "center hits outer"));
+  target = document.elementFromPoint(10, 50);
+  t.step(() => assert_equals(target.id, "outer", "edge hits outer"));
+  target = document.elementFromPoint(100, 50);
+  t.step(() => assert_equals(target.id, "body", "elsewhere hits body"));
+  t.done();
+});
+
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-019-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-019-ref.html
new file mode 100644
index 0000000000..09356a3b61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-019-ref.html
@@ -0,0 +1,17 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Display Locking: iframe locking (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+</style>
+
+<div>Test passes if there is a box with no text below.</div>
+<iframe id="frame" width=400 height=200 srcdoc=''></iframe>
+<div>Test passes if there is a box with no text above.</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-019.sub.https.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-019.sub.https.html
new file mode 100644
index 0000000000..19497af007
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-019.sub.https.html
@@ -0,0 +1,37 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: cross-origin iframe locking</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-019-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div>Test passes if there is a box with no text below.</div>
+<iframe id="frame" width=400 height=200 src='https://{{domains[www]}}:{{ports[https][0]}}/wpt_internal/display-lock/css-content-visibility/resources/frame.html'></iframe>
+<div>Test passes if there is a box with no text above.</div>
+
+<script>
+async function runTest() {
+  document.getElementById("frame").classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(runTest);
+  });
+};
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-020-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-020-ref.html
new file mode 100644
index 0000000000..7e0140365d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-020-ref.html
@@ -0,0 +1,17 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hidden iframe (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+</style>
+
+<div>Test passes if the word “FAIL” does not appear below and if there is no red.</div>
+<iframe id="frame" width=400 height=200 srcdoc=''></iframe>
+<div>Test passes if the word “FAIL” does not appear above and if there is no red.</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-020.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-020.html
new file mode 100644
index 0000000000..4b4873073e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-020.html
@@ -0,0 +1,46 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: hidden iframe</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-020-ref.html">
+<meta name="assert" content="content-visibility hidden iframe does not paint">
+
+<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div>Test passes if the word “FAIL” does not appear below and if there is no red.</div>
+<iframe id="frame" width=400 height=200 srcdoc='
+  <style>
+  div {
+    background: red;
+  }
+  </style>
+  <div>FAIL</div>
+'></iframe>
+<div>Test passes if the word “FAIL” does not appear above and if there is no red.</div>
+
+<script>
+async function runTest() {
+  document.getElementById("frame").classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(runTest);
+  });
+};
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-021-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-021-ref.html
new file mode 100644
index 0000000000..be71e10eb3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-021-ref.html
@@ -0,0 +1,25 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hidden image (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+.myimg {
+  display: inline-block;
+  width: 400px;
+  height: 200px;
+  background: lightblue;
+  border: 1px solid black;
+}
+</style>
+
+<div>Test passes if there are two identical light blue boxes below and no image in them.</div>
+<div class="myimg"></div>
+<div class="myimg"></div>
+<div>Test passes if there are two identical light blue boxes above and no image in them.</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-021.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-021.html
new file mode 100644
index 0000000000..f9e597cd55
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-021.html
@@ -0,0 +1,46 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: hidden image</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-021-ref.html">
+<meta name="assert" content="content-visibility hidden img element does not paint replaced content">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+img {
+  width: 400px;
+  height: 200px;
+  background: lightblue;
+  border: 1px solid black;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div>Test passes if there are two identical light blue boxes below and no image in them.</div>
+<img id="img1" src="resources/dice.png"></img>
+<img id="img2" src="resources/circles.svg"></img>
+<div>Test passes if there are two identical light blue boxes above and no image in them.</div>
+
+<script>
+async function runTest() {
+  document.getElementById("img1").classList.add("hidden");
+  document.getElementById("img2").classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(runTest);
+  });
+};
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-022-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-022-ref.html
new file mode 100644
index 0000000000..f85727489a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-022-ref.html
@@ -0,0 +1,24 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hidden svg (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+.mysvg {
+  display: inline-block;
+  width: 400px;
+  height: 300px;
+  background: lightblue;
+  border: 1px solid black;
+}
+</style>
+
+<div>Test passes if there is a plain light blue box below with no circles in it.</div>
+<div class="mysvg"></div>
+<div>Lorem ipsum consectetur adipiscing elit</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-022.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-022.html
new file mode 100644
index 0000000000..8912d70ed4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-022.html
@@ -0,0 +1,53 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: hidden svg</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-022-ref.html">
+<meta name="assert" content="content-visibility hidden svg does not paint">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+svg {
+  border: 1px solid black;
+  background: lightblue;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div>Test passes if there is a plain light blue box below with no circles in it.</div>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300" id="svg">
+  <g stroke-width="10" transform="translate(-30)">
+      <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>
+      <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>
+      <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/>
+      <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>
+      <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>
+      <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>
+      <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/>
+      <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>
+  </g>
+</svg>
+<div>Lorem ipsum consectetur adipiscing elit</div>
+
+<script>
+async function runTest() {
+  document.getElementById("svg").classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(runTest);
+  });
+};
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-023-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-023-ref.html
new file mode 100644
index 0000000000..713c2df706
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-023-ref.html
@@ -0,0 +1,24 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hidden iframe (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+</style>
+
+<div>Test passes if the word “PASS” and a green box can been seen below.</div>
+<iframe width=400 height=200 srcdoc='
+  <style>
+  div {
+    background: green;
+  }
+  </style>
+  <div>PASS</div>
+'></iframe>
+<div>Lorem ipsum consectetur adipiscing elit</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-023.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-023.html
new file mode 100644
index 0000000000..b561a8b0cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-023.html
@@ -0,0 +1,45 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: hidden iframe</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-023-ref.html">
+<meta name="assert" content="content-visibility hidden iframe paints when hidden is removed">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div>Test passes if the word “PASS” and a green box can been seen below.</div>
+<iframe id="frame" class=hidden width=400 height=200 srcdoc='
+  <style>
+  div {
+    background: green;
+  }
+  </style>
+  <div>PASS</div>
+'></iframe>
+<div>Lorem ipsum consectetur adipiscing elit</div>
+
+<script>
+async function runTest() {
+  document.getElementById("frame").classList.remove("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(runTest);
+  });
+};
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-024-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-024-ref.html
new file mode 100644
index 0000000000..a9c68285a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-024-ref.html
@@ -0,0 +1,24 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hidden image (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+img {
+  width: 400px;
+  height: 200px;
+  background: lightblue;
+  border: 1px solid black;
+}
+</style>
+
+<div>Test passes if there are two pictures below: one of colored dices over a checkered background, and one of a bunch of circles.</div>
+<img src="resources/dice.png"></img>
+<img src="resources/circles.svg"></img>
+<div>Lorem ipsum consectetur adipiscing elit</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-024.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-024.html
new file mode 100644
index 0000000000..cf2faca345
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-024.html
@@ -0,0 +1,46 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: hidden image</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-024-ref.html">
+<meta name="assert" content="content-visibility hidden img element paints when hidden is removed">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+img {
+  width: 400px;
+  height: 200px;
+  background: lightblue;
+  border: 1px solid black;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div>Test passes if there are two pictures below: one of colored dices over a checkered background, and one of a bunch of circles.</div>
+<img id="img1" class=hidden src="resources/dice.png"></img>
+<img id="img2" class=hidden src="resources/circles.svg"></img>
+<div>Lorem ipsum consectetur adipiscing elit</div>
+
+<script>
+async function runTest() {
+  document.getElementById("img1").classList.remove("hidden");
+  document.getElementById("img2").classList.remove("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(runTest);
+  });
+};
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-025-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-025-ref.html
new file mode 100644
index 0000000000..df156cee72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-025-ref.html
@@ -0,0 +1,32 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hidden svg (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+svg {
+  border: 1px solid black;
+  background: lightblue;
+}
+</style>
+
+<div>Test passes if there are circles in the light blue box below.</div>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
+  <g stroke-width="10" transform="translate(-30)">
+      <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>
+      <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>
+      <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/>
+      <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>
+      <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>
+      <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>
+      <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/>
+      <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>
+  </g>
+</svg>
+<div>Lorem ipsum consectetur adipiscing elit</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-025.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-025.html
new file mode 100644
index 0000000000..019cd1cc83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-025.html
@@ -0,0 +1,53 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: hidden svg</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-025-ref.html">
+<meta name="assert" content="content-visibility hidden svg paints when hidden is removed">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  background: blue;
+  color: white;
+}
+svg {
+  border: 1px solid black;
+  background: lightblue;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div>Test passes if there are circles in the light blue box below.</div>
+<svg class=hidden xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300" id="svg">
+  <g stroke-width="10" transform="translate(-30)">
+      <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>
+      <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>
+      <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/>
+      <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>
+      <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>
+      <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>
+      <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/>
+      <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>
+  </g>
+</svg>
+<div>Lorem ipsum consectetur adipiscing elit</div>
+
+<script>
+async function runTest() {
+  document.getElementById("svg").classList.remove("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(runTest);
+  });
+};
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-026.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-026.html
new file mode 100644
index 0000000000..17ec9a21d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-026.html
@@ -0,0 +1,31 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: Computed Values</title>
+<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility:hidden does not affect computed value of 'contain'">
+<meta name="assert" content="content-visibility:auto does not affect computed value of 'contain'">
+
+<div id="container"></div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+
+test(() => {
+  assert_equals(getComputedStyle(container).contain, "none");
+  container.style = "content-visibility:hidden";
+  assert_equals(getComputedStyle(container).contentVisibility, "hidden");
+  assert_equals(getComputedStyle(container).contain, "none");
+}, "content-visibility:hidden does not affect computed value of 'contain'");
+
+test(() => {
+  assert_equals(getComputedStyle(container).contain, "none");
+  container.style = "content-visibility:auto;contain:layout;";
+  assert_equals(getComputedStyle(container).contentVisibility, "auto");
+  assert_equals(getComputedStyle(container).contain, "layout");
+}, "content-visibility:auto does not affect computed value of 'contain'");
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-027-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-027-ref.html
new file mode 100644
index 0000000000..ce40d52998
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-027-ref.html
@@ -0,0 +1,17 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: auto in the viewport (reference).</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+.border {
+  border: 1px solid black;
+}
+</style>
+
+<div class=border>
+  Test passes if there is a border around this text.
+</div>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-027.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-027.html
new file mode 100644
index 0000000000..912cefd815
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-027.html
@@ -0,0 +1,37 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: auto in the viewport.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-027-ref.html">
+<meta name="assert" content="content-visibility auto element in the viewport paints">
+<meta name="assert" content="content-visibility auto element in the viewport does not have size containment">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  content-visibility: auto;
+  border: 1px solid black;
+}
+</style>
+
+<div class=locked>
+  Test passes if there is a border around this text.
+</div>
+
+<script>
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      takeScreenshot();
+    });
+  });
+});
+
+</script>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-028.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-028.html
new file mode 100644
index 0000000000..db13543f29
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-028.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Content Visibility: shadow dom</title>
+<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-with-child-ref.html">
+<meta name="assert" content="content-visibility hidden can be used in a shadow DOM">
+
+<script src="/common/reftest-wait.js"></script>
+<script src="resources/utils.js"></script>
+
+<style>
+.hidden {
+  content-visibility: hidden;
+}
+.child {
+  width: 50px;
+  height: 50px;
+  background: green;
+}
+</style>
+<div id="host">
+  <div id="slotted">
+    Test passes if you can see this text and a green box.
+    <div class=child></div>
+  </div>
+</div>
+
+<script>
+async function runTest() {
+  // Set up hidden element within shadow root.
+  let shadowRoot = host.attachShadow({ mode: "open" });
+  let hidden = document.createElement("div");
+  shadowRoot.innerHTML = `
+    <style>
+    .container {
+      width: 150px;
+      height: 150px;
+      background: lightblue;
+    }
+    </style>`;
+  shadowRoot.appendChild(hidden);
+  hidden.innerHTML = "<slot></slot>";
+  hidden.getBoundingClientRect();
+  hidden.classList.add("container");
+  hidden.classList.add("hidden");
+  requestAnimationFrame(() => {
+    slotted.style = "display: none";
+    // Do a forced layout outside the hidden subtree.
+    host.getBoundingClientRect();
+
+    hidden.classList.remove("hidden");
+    slotted.style = "";
+    requestAnimationFrame(() => {
+      // Check that everything is painted as we expect.
+      takeScreenshot();
+    });
+  });
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-029.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-029.html
new file mode 100644
index 0000000000..7598634678
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-029.html
@@ -0,0 +1,27 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: innerText</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="innerText skips content-visibility hidden elements">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/utils.js"></script>
+
+This text should be visible.
+<div id="container" style="content-visibility: hidden">
+  This text should not be visible.
+  <div id="inner">
+    This text is also not visible.
+  </div>
+</div>
+
+<script>
+test(() => {
+  assert_equals(document.body.innerText, "This text should be visible.");
+  assert_equals(document.getElementById("inner").innerText, "");
+}, "innerText on locked element.");
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-030.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-030.html
new file mode 100644
index 0000000000..397f8de519
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-030.html
@@ -0,0 +1,183 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: intersection observer interactions</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility hidden is not intersecting from IO perspective">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+}
+#spacer {
+  height: 3000px;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div id="target1">
+  <div id="target2"></div>
+</div>
+<div id="target3">
+  <div id="target4"></div>
+</div>
+<div id="spacer"></div>
+<div id="find_me"></div>
+
+<script>
+async_test((t) => {
+  let target1, target2, target3, target4;
+  let observer;
+  let entries = [];
+
+  // Set everything up.
+  function enqueueStep1() {
+    target1 = document.getElementById("target1");
+    target2 = document.getElementById("target2");
+    target3 = document.getElementById("target3");
+    target4 = document.getElementById("target4");
+
+    observer = new IntersectionObserver((new_entries) => {
+      entries = entries.concat(new_entries);
+    });
+    observer.observe(target1);
+    observer.observe(target2);
+    observer.observe(target3);
+    observer.observe(target4);
+
+    entries = entries.concat(observer.takeRecords());
+    t.step(() => { assert_equals(entries.length, 0, "No initial notifications") });
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        runStep1();
+      });
+    });
+  }
+
+  // Verify that all elements are visible at the start, with intersection events.
+  function runStep1() {
+    const step = arguments.callee.name;
+    t.step(() => {
+      assert_equals(entries.length, 4, step);
+      // Clear the observed visible targets.
+      for (let i = 0; i < entries.length; ++i) {
+        assert_true(entries[i].isIntersecting);
+        assert_true(entries[i].target === target1 ||
+                    entries[i].target === target2 ||
+                    entries[i].target === target3 ||
+                    entries[i].target === target4, step);
+      }
+    });
+
+    entries = [];
+    enqueueStep2();
+  }
+
+  // Lock target3.
+  async function enqueueStep2() {
+    target3.classList.add("hidden");
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        runStep2();
+      });
+    });
+  }
+
+  // Verify that the hidden element received a not-intersecting event.
+  function runStep2() {
+    const step = arguments.callee.name;
+    t.step(() => {
+      assert_equals(entries.length, 1, step);
+      assert_false(entries[0].isIntersecting, step);
+      assert_equals(entries[0].target, target4, step);
+    });
+
+    entries = [];
+    enqueueStep3();
+  }
+
+  // Scroll all elements off screen.
+  function enqueueStep3() {
+    document.getElementById("find_me").scrollIntoView();
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        runStep3();
+      });
+    });
+  }
+
+  // Verify that all elements received not intersecting event, except
+  // target4, which was already not intersecting due to being hidden.
+  function runStep3() {
+    const step = arguments.callee.name;
+    t.step(() => {
+      assert_equals(entries.length, 3, step);
+      for (let i = 0; i < entries.length; ++i) {
+        assert_false(entries[i].isIntersecting, step);
+        assert_not_equals(entries[i].target, target4, step);
+      }
+    });
+
+    entries = [];
+    enqueueStep4();
+  }
+
+  // Scroll the elements back on screen.
+  function enqueueStep4() {
+    target1.scrollIntoView();
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        runStep4();
+      });
+    });
+  }
+
+  // Verify that all elements received not intersecting event, except
+  // target4, which remains not intersecting.
+  function runStep4() {
+    const step = arguments.callee.name;
+    t.step(() => {
+      assert_equals(entries.length, 3, step);
+      for (let i = 0; i < entries.length; ++i) {
+        assert_true(entries[i].isIntersecting);
+        assert_not_equals(entries[i].target, target4, step);
+      }
+    });
+
+    entries = [];
+    enqueueStep5();
+  }
+
+  // Unlock target3.
+  async function enqueueStep5() {
+    target3.classList.remove("hidden");
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        runStep5();
+      });
+    });
+  }
+
+  function runStep5() {
+    const step = arguments.callee.name;
+    t.step(() => {
+      assert_equals(entries.length, 1, step);
+      assert_true(entries[0].isIntersecting, step);
+      assert_equals(entries[0].target, target4, step);
+    });
+    t.done();
+  }
+
+
+  window.onload = () => {
+    requestAnimationFrame(enqueueStep1);
+  };
+}, "IntersectionObserver interactions");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-031.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-031.html
new file mode 100644
index 0000000000..d131c242bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-031.html
@@ -0,0 +1,72 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: resize observer interactions</title>
+<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility hidden subtrees do not trigger resize observer">
+
+<style>
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+<div id="container">
+  <div id="resize" style="width: 50px; height: 50px">
+  </div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test(t => {
+  let didCallback = false;
+
+  function runTest() {
+    let resizeCallback = function (entries) {
+      didCallback = true;
+    }
+    let resizeObserver = new ResizeObserver(resizeCallback);
+
+    resizeObserver.observe(resize);
+
+    requestAnimationFrame(t.step_func(step2));
+  }
+
+  function step2() {
+    assert_true(didCallback, 'Resize observation should happen in first frame after registering');
+    didCallback = false;
+
+    const container = document.getElementById("container");
+    container.classList.add("hidden");
+
+    // Change the size of #resize. This should cause a resize observation, but
+    // only when the element becomes unhidden.
+    resize.style.width = '100px';
+
+    requestAnimationFrame(t.step_func(step3));
+  }
+
+  function step3() {
+    assert_false(didCallback, 'ResizeObsever should not run during while unrendered');
+    requestAnimationFrame(t.step_func(step4));
+  }
+
+  function step4() {
+    assert_false(didCallback, 'ResizeObsever should not run while unrendered');
+    const container = document.getElementById("container");
+    container.classList.remove("hidden");
+    requestAnimationFrame(t.step_func_done(step5));
+  }
+
+  function step5() {
+    assert_true(didCallback, 'ResizeObsevers should now run once becoming visible');
+  }
+
+  window.onload = function() {
+    requestAnimationFrame(() => requestAnimationFrame(t.step_func(runTest)));
+  };
+}, "ResizeObserver skipped while hidden");
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-032-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-032-ref.html
new file mode 100644
index 0000000000..0ab1a659f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-032-ref.html
@@ -0,0 +1,11 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hidden iframe, size changes (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<p>Test fails if the box below is square.</p>
+<iframe width=200 height=300></iframe>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-032.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-032.html
new file mode 100644
index 0000000000..0a8894f75e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-032.html
@@ -0,0 +1,27 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: hidden iframe, size changes</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-032-ref.html">
+<meta name="assert" content="content-visibility hidden iframes can change size.">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+<p>Test fails if the box below is square.</p>
+<iframe class=hidden id=frame width=200 height=200 srcdoc='Lorem ipsum'></iframe>
+
+<script>
+async function runTest() {
+  document.getElementById("frame").height = 300;
+  requestAnimationFrame(takeScreenshot);
+}
+
+onload = () => { requestAnimationFrame(runTest); };
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-033-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-033-ref.html
new file mode 100644
index 0000000000..0ab1a659f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-033-ref.html
@@ -0,0 +1,11 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hidden iframe, size changes (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<p>Test fails if the box below is square.</p>
+<iframe width=200 height=300></iframe>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-033.sub.https.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-033.sub.https.html
new file mode 100644
index 0000000000..59bad85af9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-033.sub.https.html
@@ -0,0 +1,27 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Display Locking: locks an iframe, and changes its size</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-033-ref.html">
+<meta name="assert" content="content-visibility hidden cross origin iframe can change size">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+<p>Test fails if the box below is square.</p>
+<iframe id="frame" class=hidden width=200 height=200 src='https://{{domains[www]}}:{{ports[https][0]}}/wpt_internal/display-lock/css-content-visibility/resources/frame.html'></iframe>
+
+<script>
+async function runTest() {
+  document.getElementById("frame").height = 300;
+  requestAnimationFrame(takeScreenshot);
+}
+
+onload = () => { requestAnimationFrame(runTest); };
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-034-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-034-ref.html
new file mode 100644
index 0000000000..f1a2cf57b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-034-ref.html
@@ -0,0 +1,30 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hidden element shifted down (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  border: 1px solid blue;
+}
+#spacer {
+  width: 100px;
+  height: 100px;
+  background: orange;
+}
+#checker {
+  width: 100px;
+  height: 50px;
+  background: blue;
+}
+</style>
+
+<p>There should be a square blank box (with a blue border) between an orange square and a blue rectangle.
+<div id="spacer"></div>
+<div id="container"></div>
+<div id="checker"></div>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-034.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-034.html
new file mode 100644
index 0000000000..d45200611b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-034.html
@@ -0,0 +1,44 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: hidden element shifted down</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-034-ref.html">
+<meta name="assert" content="content-visibility hidden element participates in layout">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  border: 1px solid blue;
+  content-visibility: hidden;
+}
+#spacer {
+  width: 100px;
+  height: 50px;
+  background: orange;
+}
+#checker {
+  width: 100px;
+  height: 50px;
+  background: blue;
+}
+</style>
+
+<p>There should be a square blank box (with a blue border) between an orange square and a blue rectangle.
+<div id="spacer"></div>
+<div id="container">Fail</div>
+<div id="checker"></div>
+
+<script>
+function runTest() {
+  document.getElementById("spacer").style.height = "100px";
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-035.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-035.html
new file mode 100644
index 0000000000..c2f62ca438
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-035.html
@@ -0,0 +1,59 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Display Locking: hidden shadow descendant</title>
+<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility hidden element's subtree cannot be focused">
+<meta name="assert" content="content-visibility hidden element's subtree can access layout values">
+
+<body style="margin: 0">
+
+<div id="host">
+  <input id="slotted" type="button">
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+let container = document.createElement("div");
+container.innerHTML = "<slot></slot>";
+
+let shadowRoot = host.attachShadow({ mode: "open" });
+shadowRoot.innerHTML = "<style>.hidden { content-visibility: hidden; }</style>";
+shadowRoot.appendChild(container);
+
+async_test((t) => {
+  async function focusTest() {
+    t.step(() => assert_not_equals(document.activeElement, slotted));
+    t.step(() => assert_not_equals(shadowRoot.activeElement, slotted));
+
+    container.classList.add("hidden");
+    requestAnimationFrame(() => {
+      t.step(() => assert_not_equals(document.activeElement, slotted));
+      t.step(() => assert_not_equals(shadowRoot.activeElement, slotted));
+
+      slotted.focus();
+      t.step(() => assert_not_equals(document.activeElement, slotted));
+      t.step(() => assert_not_equals(shadowRoot.activeElement, slotted));
+
+      forceLayoutTest();
+    });
+  }
+
+  async function forceLayoutTest() {
+    t.step(() => assert_equals(slotted.offsetTop, 0));
+    // Add a 20px div above the slotted div.
+    container.innerHTML = "<div style='height: 20px;'></div><slot></slot>";
+    t.step(() => assert_equals(slotted.offsetTop, 20));
+    t.done();
+  }
+
+  window.onload = function() {
+    requestAnimationFrame(() => requestAnimationFrame(focusTest));
+  };
+}, "Testing focus and force layout on element with hidden flat-tree ancestor");
+
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-036.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-036.html
new file mode 100644
index 0000000000..8dc56e9145
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-036.html
@@ -0,0 +1,61 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Display Locking: style on hidden element & child</title>
+<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="style is available for content-visibility hidden elements">
+
+<style>
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+<div id="container" class=hidden>
+  <div id="child">
+    <div id="grandchild"></div>
+  </div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test((t) => {
+  async function runTest() {
+    let container = document.getElementById("container");
+    container.style = "color: blue;";
+    t.step(() => assert_equals(getComputedStyle(container).color, "rgb(0, 0, 255)", "container color changed to blue"));
+    t.step(() => assert_equals(getComputedStyle(child).color, "rgb(0, 0, 255)", "child inherits blue color"));
+    t.step(() => assert_equals(getComputedStyle(grandchild).color, "rgb(0, 0, 255)", "grandchild inherits blue color"));
+
+    child.style = "color: green;";
+    t.step(() => assert_equals(getComputedStyle(container).color, "rgb(0, 0, 255)", "container color is still blue"));
+    t.step(() => assert_equals(getComputedStyle(child).color, "rgb(0, 128, 0)", "child color changed to green"));
+    t.step(() => assert_equals(getComputedStyle(grandchild).color, "rgb(0, 128, 0)", "grandchild inherits green color"));
+
+    child.style = "";
+
+    // Commit container, lock child.
+    container.classList.remove("hidden");
+    child.classList.add("hidden");
+    requestAnimationFrame(() => {
+      // Update style outside of the hidden subtree.
+      container.style = "color: red;";
+      container.offsetTop;
+
+      // Inheritance works as usual through hidden boundaries.
+      t.step(() => assert_equals(getComputedStyle(grandchild).color, "rgb(255, 0, 0)", "grandchild inherits red color"));
+      t.step(() => assert_equals(getComputedStyle(child).color, "rgb(255, 0, 0)", "child inherits red color"));
+      t.step(() => assert_equals(getComputedStyle(container).color, "rgb(255, 0, 0)", "container color changed to red"));
+
+      t.done();
+    });
+  }
+
+  window.onload = function() {
+    requestAnimationFrame(() => requestAnimationFrame(runTest));
+  };
+}, "getComputedStyle gets up-to-date style");
+</script>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-037.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-037.html
new file mode 100644
index 0000000000..c40b22026b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-037.html
@@ -0,0 +1,39 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: hidden grid with positioned child</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="content-visibility hidden grid does not paint the subtree">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#grid {
+  display: grid;
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+#positioned {
+  position: absolute;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div id=grid>
+  <div id=positioned>Test fails if this text is visible.</div>
+</div>
+
+<script>
+function runTest() {
+  document.getElementById("grid").classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => requestAnimationFrame(runTest);
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-038.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-038.html
new file mode 100644
index 0000000000..638a336c91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-038.html
@@ -0,0 +1,107 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: measure layout</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility hidden element layout is correct">
+<meta name="assert" content="content-visibility hidden element's subtree layout is correct">
+
+<style>
+#container {
+  background: lightgreen;
+  contain: layout;
+}
+.hidden {
+  content-visibility: hidden;
+}
+#sizer {
+  width: 100px;
+  height: 100px;
+}
+.child {
+  width: 20px;
+  height: 20%;
+  background: cyan;
+}
+#spacer {
+  width: 150px;
+  height: 150px;
+  background: green;
+}
+</style>
+
+<div id="parent"></div>
+<div id="spacer"></div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test((t) => {
+  function createChild(id) {
+    const child = document.createElement("div");
+    child.classList = "child";
+    child.id = id;
+    return child;
+  }
+
+  function measureForced() {
+    t.step(() => {
+      // Ensure children are laid out; this forces a layout if it wasn't done.
+      assert_equals(document.getElementById("0").offsetTop, 0, "0 forced");
+      assert_equals(document.getElementById("1").offsetTop, 20, "1 forced");
+      assert_equals(document.getElementById("2").offsetTop, 40, "2 forced");
+      // Both parent should be 0 height, since it's hidden. Both parent and spacers
+      // should have 8 offsetTop.
+      assert_equals(document.getElementById("parent").offsetTop, 8, "parent forced");
+      assert_equals(document.getElementById("spacer").offsetTop, 8, "spacer forced");
+    });
+  }
+
+  function measureWhenVisible() {
+    t.step(() => {
+      // Ensure children are still laid out.
+      assert_equals(document.getElementById("0").offsetTop, 0, "0 when visible");
+      assert_equals(document.getElementById("1").offsetTop, 20, "1 when visible");
+      assert_equals(document.getElementById("2").offsetTop, 40, "2 when visible");
+      // Now the parent should encompass a container, so spacer is pushed down.
+      assert_equals(document.getElementById("parent").offsetTop, 8, "parent when visible");
+      assert_equals(document.getElementById("spacer").offsetTop, 108, "spacer when visible");
+    });
+  }
+
+  function construct(container) {
+    const sizer = document.createElement("div");
+    sizer.id = "sizer";
+    container.appendChild(sizer);
+    sizer.appendChild(createChild("0"));
+    sizer.appendChild(createChild("1"));
+    sizer.appendChild(createChild("2"));
+  }
+
+  async function runTest() {
+    const container = document.createElement("div");
+    container.id = "container";
+
+    document.getElementById("parent").appendChild(container);
+    container.classList.add("hidden");
+    requestAnimationFrame(() => {
+      construct(container);
+      measureForced();
+
+      container.classList.remove("hidden");
+      requestAnimationFrame(() => requestAnimationFrame(() => {
+        measureWhenVisible();
+        t.done();
+      }));
+    });
+  }
+
+  window.onload = function() {
+    requestAnimationFrame(() => requestAnimationFrame(runTest));
+  };
+}, "Measure Forced Layout");
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-039.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-039.html
new file mode 100644
index 0000000000..481dcc4583
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-039.html
@@ -0,0 +1,79 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Display Locking: measure forced SVG text</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility hidden svg descendant has correct layout">
+
+<style>
+#container {
+  width: 100px;
+  height: 100px;
+  background: lightgreen;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div id="parent"></div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async_test((t) => {
+  let length;
+  function measureForced() {
+    t.step(() => {
+      length = document.getElementById("text").getComputedTextLength();
+      assert_not_equals(length, 0, "forced");
+
+    });
+  }
+
+  function measureWhenVisible() {
+    t.step(() => {
+      const visible_length = document.getElementById("text").getComputedTextLength();
+      assert_not_equals(visible_length, 0, "when visible");
+      assert_equals(visible_length, length, "when visible");
+    });
+  }
+
+  function construct(container) {
+    container.innerHTML = `
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <style>
+          .t { font: 10px sans-serif; }
+        </style>
+        <text id="text" x="10" y="10" class="t">This is text</text>
+      </svg>
+    `;
+  }
+
+  async function runTest() {
+    const container = document.createElement("div");
+    container.id = "container";
+
+    document.getElementById("parent").appendChild(container);
+    container.classList.add("hidden");
+    requestAnimationFrame(() => {
+      construct(container);
+      measureForced();
+
+      container.classList.remove("hidden");
+      requestAnimationFrame(() => {
+        measureWhenVisible();
+        t.done();
+      });
+    });
+  }
+
+  window.onload = function() {
+    requestAnimationFrame(() => requestAnimationFrame(runTest));
+  };
+}, "Measure Forced SVG Text");
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-040.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-040.html
new file mode 100644
index 0000000000..cf2e214e1a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-040.html
@@ -0,0 +1,45 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Display Locking: absolute positioned in flex, which is in a hidden div.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="content-visibility hidden flex and abspos descendants don't paint">
+
+<script src="/common/reftest-wait.js"></script>
+<script src="resources/utils.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+}
+div > div {
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+.hidden {
+  content-visibility: hidden;
+}
+.flex { display: flex; }
+.abspos { position: absolute; }
+</style>
+
+<div id=container>
+  <div class=flex>
+    <div class=abspos></div>
+  </div>
+</div>
+
+<script>
+async function runTest() {
+  document.getElementById("container").classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-041.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-041.html
new file mode 100644
index 0000000000..82c4feb131
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-041.html
@@ -0,0 +1,43 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: pseudo elements</title>
+<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="subtree-visiblity hidden doesn't paint ::before or ::after">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+#container::before {
+  content: "FAIL! ";
+  color: red;
+}
+.hasAfter::after {
+  content: "FAIL!";
+  background: red;
+  color: white;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+<div id="log"></div>
+<div id="container" style="display:none;"></div>
+
+<script>
+async function runTest() {
+  container.classList.add("hasAfter");
+  container.classList.add("hidden");
+  container.style = "";
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-042-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-042-ref.html
new file mode 100644
index 0000000000..a76d5397c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-042-ref.html
@@ -0,0 +1,21 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: pseudo elements</title>
+<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+#container::before {
+  content: "This test ";
+  color: green;
+}
+#container::after {
+  content: "PASSES.";
+  background: green;
+  color: white;
+}
+</style>
+<div id="container"></div>
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-042.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-042.html
new file mode 100644
index 0000000000..381af12dc5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-042.html
@@ -0,0 +1,38 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: pseudo elements</title>
+<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-042-ref.html">
+<meta name="assert" content="content-visibility elements paints ::before and ::after when hidden is removed">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container::before {
+  content: "This test ";
+  color: green;
+}
+.hasAfter::after {
+  content: "PASSES.";
+  background: green;
+  color: white;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+<div id="container" class=hidden style="display:none;"></div>
+
+<script>
+async function runTest() {
+  container.classList.add("hasAfter");
+  container.classList.remove("hidden");
+  container.style = "";
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-043.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-043.html
new file mode 100644
index 0000000000..a230315e69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-043.html
@@ -0,0 +1,41 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: scroll child into view, and adopt to a document</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="scrollIntoView on a hidden subtree is a no-op">
+<meta name="assert" content="adopting an element in a hidden subtree works (no asserts / crashes)">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+  color: red;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+<div id=container class=hidden>
+  FAIL.
+  <div id=child></div>
+</div>
+
+<script>
+function moveChild() {
+  child.scrollIntoView();
+  document.implementation.createDocument( "", null).adoptNode(child);
+  requestAnimationFrame(takeScreenshot);
+}
+
+async function runTest() {
+  requestAnimationFrame(moveChild);
+}
+
+window.onload = requestAnimationFrame(runTest);
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-044.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-044.html
new file mode 100644
index 0000000000..f8b9463447
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-044.html
@@ -0,0 +1,34 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: slot moved after container is hidden</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="ensure that hidden slotted element can be updated">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<body style="margin: 0">
+
+<div id=host>
+<input id=slotted style="margin: 0">
+<script>
+
+async_test((t) => {
+  let container = document.createElement("div");
+  container.innerHTML = "<slot></slot>";
+  let shadowRoot = host.attachShadow({ mode: "open" });
+  shadowRoot.innerHTML = "<style>.hidden { content-visibility: hidden }</style>";
+  shadowRoot.appendChild(container);
+
+  t.step(async () => {
+    container.classList.add("hidden");
+    requestAnimationFrame(() => {
+      assert_equals(slotted.offsetTop, 0);
+      container.innerHTML = "<div style='height: 20px;'></div><slot></slot>";
+      t.done();
+    });
+  });
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-045.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-045.html
new file mode 100644
index 0000000000..b965d4d1a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-045.html
@@ -0,0 +1,52 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: auto subtree becomes hidden in the viewport</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="content-visibility:auto subtree becomes hidden and so stops painting">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: red;
+}
+.auto { content-visibility: auto; }
+.hidden { content-visibility: hidden; }
+
+</style>
+
+<div id=container class=auto>
+  Test fails if you see this text or a red box.
+  <div id=child></div>
+</div>
+
+<script>
+
+function runTest() {
+  document.getElementById("container").classList.remove("auto");
+  document.getElementById("container").classList.add("hidden");
+
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runTest();
+    });
+  });
+});
+
+</script>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-046.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-046.html
new file mode 100644
index 0000000000..6f1cd28e39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-046.html
@@ -0,0 +1,45 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: viewport auto painting.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-with-child-ref.html">
+<meta name="assert" content="viewport intersection paints the content-visibility auto element">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: green;
+}
+.auto {
+  content-visibility: auto;
+}
+</style>
+
+<div id=container class=auto>
+  Test passes if you can see this text and a green box.
+  <div id=child></div>
+</div>
+
+<script>
+
+function runTest() {
+  document.getElementById("target").classList.add("auto");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(
+  () => requestAnimationFrame(takeScreenshot));
+
+</script>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-047.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-047.html
new file mode 100644
index 0000000000..bb5399280d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-047.html
@@ -0,0 +1,48 @@
+<!doctype HTML>
+<meta charset="utf8">
+<title>Content Visibility: tab order navigation ignores hidden subtrees</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="tab order navigation ignores hidden subtrees.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<input id=one type=text></input>
+<div class=hidden>
+  <input id=two type=text></input>
+  <input id=three type=text></input>
+  <input id=four type=text></input>
+</div>
+<input id=five type=text></input>
+
+<script>
+async_test((t) => {
+  const tab = "\uE004";
+
+  async function runTest() {
+    await test_driver.send_keys(document.body, tab);
+    t.step(() => {
+      assert_equals(document.activeElement, document.getElementById("one"));
+    });
+
+    await test_driver.send_keys(document.body, tab);
+    t.step(() => {
+      assert_equals(document.activeElement, document.getElementById("five"));
+    });
+
+    t.done();
+  }
+
+  window.onload = () => { requestAnimationFrame(runTest); };
+}, "Tab order navigation skips hidden subtrees");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-048.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-048.html
new file mode 100644
index 0000000000..2b8679b5dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-048.html
@@ -0,0 +1,46 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: navigating to a text fragment.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="timeout" content="long">
+<meta name="assert" content="content-visibility: auto subtrees are 'searchable' by text fragment links">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/common/utils.js"></script>
+<script src="/scroll-to-text-fragment/stash.js"></script>
+
+<script>
+promise_test(t => new Promise((resolve, reject) => {
+    const fragment = '#:~:text=hiddentext';
+    const key = token();
+    test_driver.bless("Open a URL with a text fragment directive", () => {
+      window.open(`resources/text-fragment-target-auto.html?key=${key}${fragment}`,
+                  '_blank',
+                  'noopener');
+    });
+    fetchResults(key, resolve, reject);
+}).then(data => {
+  assert_equals(data.scrollPosition, "text");
+  assert_equals(data.target, "text");
+}), "Fragment navigation with content-visibility; single text");
+
+promise_test(t => new Promise((resolve, reject) => {
+    const fragment = '#:~:text=start,end';
+    const key = token();
+    test_driver.bless("Open a URL with a text fragment directive", () => {
+      window.open(`resources/text-fragment-target-auto.html?key=${key}${fragment}`,
+                  '_blank',
+                  'noopener');
+    });
+    fetchResults(key, resolve, reject);
+}).then(data => {
+  assert_equals(data.scrollPosition, "text2");
+  assert_equals(data.target, "text2and3ancestor");
+}), "Fragment navigation with content-visibility; range across blocks");
+</script>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-049-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-049-ref.html
new file mode 100644
index 0000000000..be5fd78a34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-049-ref.html
@@ -0,0 +1,33 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: anchor links paint subtrees (reference)</title>
+<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  contain: style layout;
+  width: 150px;
+  height: 150px;
+  background: lightgreen;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="container"><div id="target"></div></div>
+
+<script>
+target.scrollIntoView();
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-049.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-049.html
new file mode 100644
index 0000000000..f130d77b66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-049.html
@@ -0,0 +1,43 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: anchor links paint subtrees</title>
+<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-049-ref.html">
+<meta name="assert" content="content-visibility auto subtrees respond to anchor links">
+
+<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightgreen;
+  content-visibility: auto;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="container"><div id="target"></div></div>
+
+<script>
+function runTest() {
+  location.href += "#target";
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => { requestAnimationFrame(runTest); };
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-050.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-050.html
new file mode 100644
index 0000000000..bcc4f5e430
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-050.html
@@ -0,0 +1,39 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: focus on new element</title>
+<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="focus can target content-visibility: auto subtrees created while hidden">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+.auto {
+  content-visibility: auto;
+}
+.spacer {
+  height: 3000px;
+}
+</style>
+
+<div class=spacer></div>
+<div id=container class=auto></div>
+
+<script>
+async_test((t) => {
+  function runTest() {
+    const focusable = document.createElement("div");
+    focusable.tabIndex = 0;
+    container.appendChild(focusable);
+    focusable.focus();
+    requestAnimationFrame(() => {
+      t.step(() => assert_greater_than(document.scrollingElement.scrollTop, 500));
+      t.done();
+    });
+  }
+  onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
+}, "Using tabindex to focus an newly constructed element in an auto subtree focuses element");
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-051.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-051.html
new file mode 100644
index 0000000000..15718cad32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-051.html
@@ -0,0 +1,44 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: switching to block stop painting</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="content-visibility has no effect on non-atomic inlines, but switching to block stop painting">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  content-visibility: hidden;
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+.inline {
+  display: inline;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: red;
+}
+</style>
+
+<div id=container class=inline>
+  Test fails if you see this text or a red box.
+  <div id=child></div>
+  <span>Fail.</span>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.remove("inline");
+  takeScreenshot();
+}
+
+window.onload = () => requestAnimationFrame(runTest);
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-052.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-052.html
new file mode 100644
index 0000000000..2df45ae149
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-052.html
@@ -0,0 +1,73 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden starts painting when removed</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-with-pos-children-ref.html">
+<meta name="assert" content="content-visibility subtrees start painting when hidden is removed">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+  contain: layout;
+}
+.hidden {
+  content-visibility: hidden;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: lightgreen;
+}
+.abspos { position: absolute; }
+.relpos { position: relative; }
+.fixedpos { position: fixed; }
+.start { top: 0; left: 0; }
+.mid { top: 10px; left: 10px; }
+.end { bottom: 0; right: 0; }
+.zindex { z-index: 1; }
+.small { width: 10px; height: 10px; background: blue; }
+.medium { width: 20px; height: 20px; background: green; }
+.large { width: 30px; height: 30px; background: pink; }
+</style>
+
+<p>This test passes if the two light blue boxes below have the same content.
+<div id=container class="container hidden">
+  Text.
+  <div id=child></div>
+  <span>inline child</span>
+  <div class="abspos start small"></div>
+  <div class="relpos mid medium"></div>
+  <div class="fixedpos end large"></div>
+  <div class=relpos>
+    <div class="abspos mid small zindex"></div>
+  </div>
+</div>
+<br>
+<div class="container">
+  Text.
+  <div id=child></div>
+  <span>inline child</span>
+  <div class="abspos start small"></div>
+  <div class="relpos mid medium"></div>
+  <div class="fixedpos end large"></div>
+  <div class=relpos>
+    <div class="abspos mid small zindex"></div>
+  </div>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.remove("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = runTest;
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-053.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-053.html
new file mode 100644
index 0000000000..ebdaecbc62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-053.html
@@ -0,0 +1,30 @@
+<html>
+<meta charset="utf8">
+<title>Content Visibility: focus on display none element</title>
+<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="tab navigation skips display none elements in an auto subtree">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id=spacer style="height: 3000px"></div>
+<div id="host">
+  <input id="slotted" type="text">
+</div>
+
+<script>
+test(() => {
+  const container = document.createElement("div");
+  container.innerHTML = "<slot></slot>";
+  container.style = "content-visibility: auto";
+
+  const shadowRoot = host.attachShadow({ mode: "open" });
+  shadowRoot.appendChild(container);
+
+  assert_not_equals(document.activeElement, slotted);
+  slotted.focus();
+  assert_equals(document.activeElement, slotted);
+}, "Targetting a slotted auto-hidden element with focus makes it the active element");
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-054.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-054.html
new file mode 100644
index 0000000000..232dc0d7b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-054.html
@@ -0,0 +1,34 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Display Locking: focus on styled element</title>
+<link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="focus does not target display-none but hidden elements">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="container" style="content-visibility: auto">
+  <div id="focusable1" tabIndex="0">
+    focusable thing
+  </div>
+  <div id="displayNoneParent">
+    <div id="focusable2" tabIndex="0">
+      focusable thing
+    </div>
+  </div>
+</div>
+
+<script>
+test(() => {
+  focusable1.style.display = "none";
+  focusable1.focus();
+  assert_not_equals(document.activeElement, focusable1);
+
+  displayNoneParent.style.display = "none";
+  focusable2.focus();
+  assert_not_equals(document.activeElement, focusable2);
+}, "Trying to focus on an element in a hidden subtree with display none will not work");
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-055.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-055.html
new file mode 100644
index 0000000000..3dae93a504
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-055.html
@@ -0,0 +1,42 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: anchor links prevented</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-and-container-scrolled-ref.html">
+<meta name="assert" content="anchor link scroll not prevented when the target is hidden and activatable">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 300vh;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  height: 150px;
+  background: green;
+  content-visibility: auto;
+}
+
+#target {
+  width: 150px;
+  height: 100px;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="container"><div id="target">Test passes if this is on screen.</div></div>
+
+<script>
+function runTest() {
+  location.href += "#target";
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => { requestAnimationFrame(runTest); };
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-056.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-056.html
new file mode 100644
index 0000000000..dae94aa095
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-056.html
@@ -0,0 +1,42 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: scrollIntoView prevented</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-and-container-ref.html">
+<meta name="assert" content="scrollIntoView is prevented when the target is hidden">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  height: 150px;
+  background: red;
+  content-visibility: hidden;
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background: pink;
+}
+</style>
+
+<div class="spacer">Test passes if there is no red.</div>
+<div id="container"><div id="target">FAIL</div></div>
+
+<script>
+function runTest() {
+  document.getElementById("target").scrollIntoView();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => { requestAnimationFrame(runTest); };
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-057.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-057.html
new file mode 100644
index 0000000000..d6a0d4f697
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-057.html
@@ -0,0 +1,52 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: hidden subtree becomes auto in the viewport</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-with-child-ref.html">
+<meta name="assert" content="hidden subtree becomes auto and then paints">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: green;
+}
+.auto { content-visibility: auto; }
+.hidden { content-visibility: hidden; }
+
+</style>
+
+<div id=container class=hidden>
+  Test passes if you can see this text and a green box.
+  <div id=child></div>
+</div>
+
+<script>
+
+function runTest() {
+  document.getElementById("container").classList.remove("hidden");
+  document.getElementById("container").classList.add("auto");
+
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runTest();
+    });
+  });
+});
+
+</script>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-058-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-058-ref.html
new file mode 100644
index 0000000000..a98e4a856a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-058-ref.html
@@ -0,0 +1,61 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: auto, scrollIntoView() (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  height: 10000px;
+}
+.container {
+  position: relative;
+  width: 150px;
+  background: lightblue;
+  contain-intrinsic-size: 50px 250px;
+}
+.size_contained {
+  contain: size;
+}
+.child {
+  width: 50px;
+  height: 300px;
+  background: lightgreen;
+}
+#target {
+  position: absolute;
+  bottom: 0;
+
+  width: 10px;
+  height: 10px;
+  background: blue;
+}
+</style>
+
+<p>Test FAILS if this sentence is at the top of the screen.
+<div class=spacer></div>
+<div id=container class="container">
+  <div class=child></div>
+  <div id=target></div>
+</div>
+<p>Test PASSES if this sentence is near the top of the screen, after a thin band of three colors.
+<div class=spacer></div>
+
+<script>
+
+function runReference() {
+  document.getElementById("target").scrollIntoView(true /* alignToTop */);
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runReference();
+    });
+  });
+});
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-058.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-058.html
new file mode 100644
index 0000000000..fe9d70b60f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-058.html
@@ -0,0 +1,65 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: auto, scrollIntoView()</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-058-ref.html">
+<meta name="assert" content="scrollIntoView() uses contain:size information to find target offset">
+<meta name="assert" content="viewport intersection removes contain:size thus moving target">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  height: 10000px;
+}
+.container {
+  width: 150px;
+  background: lightblue;
+  contain-intrinsic-size: 50px 250px;
+}
+.child {
+  width: 50px;
+  height: 300px;
+  background: lightgreen;
+}
+#target {
+  position: absolute;
+  bottom: 0;
+
+  width: 10px;
+  height: 10px;
+  background: blue;
+}
+.auto { content-visibility: auto; }
+
+</style>
+
+<p>Test FAILS if this sentence is at the top of the screen.
+<div class=spacer></div>
+<div class="container auto">
+  <div class=child></div>
+  <div id=target></div>
+</div>
+<p>Test PASSES if this sentence is near the top of the screen, after a thin band of three colors.
+<div class=spacer></div>
+
+<script>
+
+function runTest() {
+  document.getElementById("target").scrollIntoView(true /* alignToTop */);
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runTest();
+    });
+  });
+});
+
+</script>
+</html>
+
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-060.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-060.html
new file mode 100644
index 0000000000..84b7bc9c14
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-060.html
@@ -0,0 +1,57 @@
+<!doctype HTML>
+
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden + scrollIntoView on display:none</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-and-container-ref.html">
+<meta name="assert" content="scrollIntoView ignores display:none element in a hidden subtree">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  height: 150px;
+  background: red;
+}
+#target {
+  display: none;
+
+  position: relative;
+  top: 75px;
+
+  width: 50px;
+  height: 50px;
+  background: red;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div class=spacer>Test passes if there is no red.</div>
+<div id=container class=hidden>
+  <div id=target></div>
+</div>
+
+<script>
+function runTest() {
+  document.getElementById("target").scrollIntoView();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runTest();
+    });
+  });
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-061.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-061.html
new file mode 100644
index 0000000000..2181799a29
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-061.html
@@ -0,0 +1,57 @@
+<!doctype HTML>
+
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden + scrollIntoView on display:contents</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-and-container-ref.html">
+<meta name="assert" content="scrollIntoView ignores display:contents element in a hidden subtree">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  height: 150px;
+  background: red;
+}
+#target {
+  display: contents;
+
+  position: relative;
+  top: 75px;
+
+  width: 50px;
+  height: 50px;
+  background: pink;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div class=spacer>Test passes if there is no red.</div>
+<div id=container class=hidden>
+  <div id=target>FAIL</div>
+</div>
+
+<script>
+function runTest() {
+  document.getElementById("target").scrollIntoView();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runTest();
+    });
+  });
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-062.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-062.html
new file mode 100644
index 0000000000..ab99e82014
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-062.html
@@ -0,0 +1,57 @@
+<!doctype HTML>
+
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: auto + scrollIntoView on display:none</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-and-container-ref.html">
+<meta name="assert" content="scrollIntoView ignores display:none element in an auto subtree">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  height: 150px;
+  background: red;
+}
+#target {
+  display: none;
+
+  position: relative;
+  top: 75px;
+
+  width: 50px;
+  height: 50px;
+  background: pink;
+}
+.auto {
+  content-visibility: auto;
+}
+</style>
+
+<div class=spacer>Test passes if there is no red.</div>
+<div id=container class=auto>
+  <div id=target>FAIL</div>
+</div>
+
+<script>
+function runTest() {
+  document.getElementById("target").scrollIntoView();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runTest();
+    });
+  });
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-063.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-063.html
new file mode 100644
index 0000000000..e8a0146019
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-063.html
@@ -0,0 +1,57 @@
+<!doctype HTML>
+
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: auto + scrollIntoView on display:contents</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-and-container-ref.html">
+<meta name="assert" content="scrollIntoView ignores display:contents element in an auto subtree">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  height: 150px;
+  background: red;
+}
+#target {
+  display: contents;
+
+  position: relative;
+  top: 75px;
+
+  width: 50px;
+  height: 50px;
+  background: pink;
+}
+.auto {
+  content-visibility: auto;
+}
+</style>
+
+<div class=spacer>Test passes if there is no red.</div>
+<div id=container class=auto>
+  <div id=target>FAIL</div>
+</div>
+
+<script>
+function runTest() {
+  document.getElementById("target").scrollIntoView();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runTest();
+    });
+  });
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-064-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-064-ref.html
new file mode 100644
index 0000000000..814c8fba6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-064-ref.html
@@ -0,0 +1,57 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden + scrollIntoView (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  height: 1000px;
+  background: lightblue;
+}
+#container {
+  position: relative;
+  width: 150px;
+  background: lightblue;
+  contain: paint;
+}
+#child {
+  width: 150px;
+  height: 300px;
+}
+#target {
+  position: absolute;
+  bottom: 0;
+
+  width: 50px;
+  height: 50px;
+  background: green;
+}
+</style>
+
+<div>top of the page</div>
+<div class=spacer></div>
+<div id=container>
+  <div id=child></div>
+  <div id=target tabindex=0>PASS</div>
+</div>
+<div class=spacer></div>
+<div>bottom of the page</div>
+
+<script>
+function runReference() {
+  document.getElementById("target").focus();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runReference();
+    });
+  });
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-064.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-064.html
new file mode 100644
index 0000000000..1098e75957
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-064.html
@@ -0,0 +1,64 @@
+<!doctype HTML>
+
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: auto + focus</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-064-ref.html">
+<meta name="assert" content="focus() can focus auto skipped subtree elements">
+<meta name="assert" content="focus() scrolls after removing contain:size">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  height: 1000px;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  background: lightblue;
+  contain-intrinsic-size: 50px 150px;
+  contain: paint;
+}
+#child {
+  width: 150px;
+  height: 300px;
+}
+#target {
+  position: absolute;
+  bottom: 0;
+
+  width: 50px;
+  height: 50px;
+  background: green;
+}
+.auto {
+  content-visibility: auto;
+}
+</style>
+
+<div>top of the page</div>
+<div class=spacer></div>
+<div id=container class=auto>
+  <div id=child></div>
+  <div id=target tabindex=0>PASS</div>
+</div>
+<div class=spacer></div>
+<div>bottom of the page</div>
+
+<script>
+function runTest() {
+  document.getElementById("target").focus();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runTest();
+    });
+  });
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-065.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-065.html
new file mode 100644
index 0000000000..341f259b4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-065.html
@@ -0,0 +1,57 @@
+<!doctype HTML>
+
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: auto + focus on display:none</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-and-container-ref.html">
+<meta name="assert" content="focus ignores display:none element in an auto subtree">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  height: 150px;
+  background: red;
+}
+#target {
+  display: none;
+
+  position: relative;
+  top: 75px;
+
+  width: 50px;
+  height: 50px;
+  background: red;
+}
+.auto {
+  content-visibility: auto;
+}
+</style>
+
+<div class=spacer>Test passes if there is no red.</div>
+<div id=container class=auto>
+  <div id=target tabindex=0></div>
+</div>
+
+<script>
+function runTest() {
+  document.getElementById("target").focus();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runTest();
+    });
+  });
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-066.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-066.html
new file mode 100644
index 0000000000..d608d301f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-066.html
@@ -0,0 +1,57 @@
+<!doctype HTML>
+
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: auto + focus on display:contents</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-and-container-ref.html">
+<meta name="assert" content="focus ignores display:contents element in an auto subtree">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  height: 150px;
+  background: red;
+}
+#target {
+  display: contents;
+
+  position: relative;
+  top: 75px;
+
+  width: 50px;
+  height: 50px;
+  background: red;
+}
+.auto {
+  content-visibility: auto;
+}
+</style>
+
+<div class=spacer>Test passes if there is no red.</div>
+<div id=container class=auto>
+  <div id=target tabindex=0>FAIL</div>
+</div>
+
+<script>
+function runTest() {
+  document.getElementById("target").focus();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runTest();
+    });
+  });
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-067.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-067.html
new file mode 100644
index 0000000000..843a3bb6a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-067.html
@@ -0,0 +1,55 @@
+<!doctype HTML>
+
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: hidden + focus</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-and-container-ref.html">
+<meta name="assert" content="focus ignores element in a hidden subtree">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  height: 150px;
+  background: red;
+}
+#target {
+  position: relative;
+  top: 75px;
+
+  width: 50px;
+  height: 50px;
+  background: red;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div class=spacer>Test passes if there is no red.</div>
+<div id=container class=hidden>
+  <div id=target tabindex=0>FAIL</div>
+</div>
+
+<script>
+function runTest() {
+  document.getElementById("target").focus();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      runTest();
+    });
+  });
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-068.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-068.html
new file mode 100644
index 0000000000..844f04e6b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-068.html
@@ -0,0 +1,103 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: off-screen focus</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility auto element remains non-skipped when elements in its subtree have focus.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+body, html {
+  padding: 0;
+  margin: 0;
+}
+
+.spacer {
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  background: lightgreen;
+  contain-intrinsic-size: 50px 100px;
+  content-visibility: auto;
+}
+#focusable {
+  width: 10px;
+  height: 10px;
+}
+</style>
+
+<div id=end tabindex=1></div>
+<div class=spacer></div>
+<div id=container>
+  <div id=focusable tabindex=0></div>
+</div>
+<div class=spacer></div>
+
+<script>
+async_test((t) => {
+  // Initially container should be 3000px offscreen with contained height 100px.
+  function step1() {
+    const r = container.getBoundingClientRect();
+    t.step(() => {
+      assert_equals(r.y, 3000, "step1 offset");
+      assert_equals(r.height, 100, "step1 height");
+    });
+
+    focusable.focus();
+    step_timeout(step2, 0);
+  }
+  // After focusing the subtree, the container should be somewhere closer than
+  // 3000px (scrolled into view) and the height should be 10px, since it no
+  // longer has containment.
+  function step2() {
+    const r = container.getBoundingClientRect();
+    t.step(() => {
+      assert_less_than(r.y, 3000, "step2 offset");
+      assert_equals(r.height, 10, "step2 height");
+    });
+    document.scrollingElement.scrollTop = 0;
+    requestAnimationFrame(step3);
+  }
+  // After scrolling the document back to the top, the container should be back
+  // at 3000px but because its subtree is still focused, it should have height
+  // 10px.
+  function step3() {
+    const r = container.getBoundingClientRect();
+    t.step(() => {
+      assert_equals(r.y, 3000, "step3 offset");
+      assert_equals(r.height, 10, "step3 height");
+    });
+    requestAnimationFrame(step4);
+  }
+  // This is a repeat of step3, to ensure that this is a stable state.
+  function step4() {
+    const r = container.getBoundingClientRect();
+    t.step(() => {
+      assert_equals(r.y, 3000, "step4 offset");
+      assert_equals(r.height, 10, "step4 height");
+    });
+
+    // We don't use `blur()` here because in Gecko this leaves the selection
+    // on _focusable_ which means that its content is still relevant. Focusing
+    // another element will move both focus and selection.
+    end.focus();
+    requestAnimationFrame(step5);
+  }
+  // After blurring the focused element, we should go back to the contained
+  // height of 100px.
+  function step5() {
+    const r = container.getBoundingClientRect();
+    t.step(() => {
+      assert_equals(r.y, 3000, "step5 offset");
+      assert_equals(r.height, 100, "step5 height");
+    });
+    t.done();
+  }
+  step1();
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-069.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-069.html
new file mode 100644
index 0000000000..89cbd1dc93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-069.html
@@ -0,0 +1,53 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: pending visibility changes</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="disconnecting elements while visibility state adjustments are pending does not crash">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+body {
+  margin: 0;
+  padding: 0;
+}
+.spacer {
+  height: 3000px;
+}
+.auto {
+  content-visibility: auto;
+  width: 5px;
+  height: 5px;
+}
+</style>
+
+<body id="body">
+<div id=one class=auto>text</div>
+<div class=spacer></div>
+<div id=two class=auto>text</div>
+<div class=spacer></div>
+</body>
+
+<script>
+async_test((t) => {
+  function runTest() {
+    document.scrollingElement.scrollTop = 2990;
+
+    const range = document.createRange();
+    range.selectNodeContents(one);
+    window.getSelection().addRange(range);
+
+    requestAnimationFrame(() => {
+      one.remove();
+      two.remove();
+      t.done();
+    });
+  }
+  onload = requestAnimationFrame(() => requestAnimationFrame(runTest));
+});
+
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-070.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-070.html
new file mode 100644
index 0000000000..a41b513e62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-070.html
@@ -0,0 +1,112 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: off-screen selection</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility auto element remains non-skipped when elements in its subtree have selection.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+body, html {
+  padding: 0;
+  margin: 0;
+}
+
+.spacer {
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  background: lightgreen;
+  contain-intrinsic-size: 50px 100px;
+  content-visibility: auto;
+}
+#selectable {
+  width: 10px;
+  height: 10px;
+}
+</style>
+
+<div class=spacer></div>
+<div id=container>
+  <div id=selectable>hello</div>
+</div>
+<div class=spacer></div>
+
+<script>
+async_test((t) => {
+  const selection = window.getSelection();
+  const range = document.createRange();
+  range.selectNodeContents(selectable);
+
+  // Initially container should be 3000px offscreen with contained height 100px.
+  function step1() {
+    const r = container.getBoundingClientRect();
+    t.step(() => {
+      assert_equals(r.y, 3000, "step1 offset");
+      assert_equals(r.height, 100, "step1 height");
+    });
+
+    selection.removeAllRanges();
+    selection.addRange(range);
+
+    requestAnimationFrame(step2);
+  }
+  // The container has a selection so it should be smaller now, height 10px.
+  function step2() {
+    const r = container.getBoundingClientRect();
+    t.step(() => {
+      assert_equals(r.y, 3000, "step2 offset");
+      assert_equals(r.height, 10, "step2 height");
+    });
+    document.scrollingElement.scrollTop = 3000;
+    requestAnimationFrame(step3);
+  }
+  // After scrolling the container should be closer and still height 10px.
+  function step3() {
+    const r = container.getBoundingClientRect();
+    t.step(() => {
+      assert_less_than(r.y, 3000, "step3 offset");
+      assert_equals(r.height, 10, "step3 height");
+    });
+    document.scrollingElement.scrollTop = 0;
+    requestAnimationFrame(step4);
+  }
+  // Scrolling back to the top we should remain at height 10px.
+  function step4() {
+    const r = container.getBoundingClientRect();
+    t.step(() => {
+      assert_equals(r.y, 3000, "step4 offset");
+      assert_equals(r.height, 10, "step4 height");
+    });
+    requestAnimationFrame(step5);
+  }
+  // Repeat step4 to ensure we're in a stable situation.
+  function step5() {
+    const r = container.getBoundingClientRect();
+    t.step(() => {
+      assert_equals(r.y, 3000, "step5 offset");
+      assert_equals(r.height, 10, "step5 height");
+    });
+
+    selection.removeAllRanges();
+
+    requestAnimationFrame(step6);
+  }
+  // After removing the selection we should go back to the contained
+  // height of 100px.
+  function step6() {
+    const r = container.getBoundingClientRect();
+    t.step(() => {
+      assert_equals(r.y, 3000, "step5 offset");
+      assert_equals(r.height, 100, "step5 height");
+    });
+    t.done();
+  }
+  step1();
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-071.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-071.html
new file mode 100644
index 0000000000..6f267b27c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-071.html
@@ -0,0 +1,185 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: off-screen selection</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility auto element remains non-skipped when elements in its subtree have selection.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+body, html {
+  padding: 0;
+  margin: 0;
+}
+
+.spacer {
+  height: 3000px;
+}
+.container {
+  width: 10px;
+  contain-intrinsic-size: 10px 20px;
+  content-visibility: auto;
+}
+.child {
+  width: 10px;
+  height: 10px;
+}
+</style>
+
+<div class=spacer></div>
+<div id=container_1 class=container><div id=child_1 class=child>hello</div></div>
+<div id=container_2 class=container><div id=child_2 class=child>hello</div></div>
+<div id=container_3 class=container><div id=child_3 class=child>hello</div></div>
+<div id=container_4 class=container><div id=child_4 class=child>hello</div></div>
+<div id=container_5 class=container><div id=child_5 class=child>hello</div></div>
+
+<script>
+function isLocked(container) {
+  const height = container.getBoundingClientRect().height;
+  assert_true(height == 20 || height == 10);
+  return container.getBoundingClientRect().height == 20;
+}
+
+const selection = window.getSelection();
+function resetSelection() {
+  selection.removeAllRanges();
+  assert_true(isLocked(container_1));
+  assert_true(isLocked(container_2));
+  assert_true(isLocked(container_3));
+  assert_true(isLocked(container_4));
+  assert_true(isLocked(container_5));
+}
+
+test(() => {
+  resetSelection();
+  const range = document.createRange();
+  range.selectNodeContents(child_2);
+  selection.addRange(range);
+
+  assert_true(isLocked(container_1), "1");
+  assert_false(isLocked(container_2), "2");
+  assert_true(isLocked(container_3), "3");
+  assert_true(isLocked(container_4), "4");
+  assert_true(isLocked(container_5), "5");
+}, "One elements selected: ");
+
+test(() => {
+  resetSelection();
+  const range = document.createRange();
+  range.selectNodeContents(child_2);
+  selection.addRange(range);
+
+  assert_true(isLocked(container_1), "1");
+  assert_false(isLocked(container_2), "2");
+  assert_true(isLocked(container_3), "3");
+  assert_true(isLocked(container_4), "4");
+  assert_true(isLocked(container_5), "5");
+
+  selection.extend(child_4, 0);
+
+  assert_true(isLocked(container_1), "1");
+  assert_false(isLocked(container_2), "2");
+  assert_false(isLocked(container_3), "3");
+  assert_false(isLocked(container_4), "4");
+  assert_true(isLocked(container_5), "5");
+}, "Range extended to cover more elements: ");
+
+test(() => {
+  resetSelection();
+  const range = document.createRange();
+  range.setStart(child_2, 0);
+  range.setEnd(child_4, 0);
+  selection.addRange(range);
+
+  assert_true(isLocked(container_1), "1");
+  assert_false(isLocked(container_2), "2");
+  assert_false(isLocked(container_3), "3");
+  assert_false(isLocked(container_4), "4");
+  assert_true(isLocked(container_5), "5");
+
+  selection.extend(child_2, 1);
+
+  assert_true(isLocked(container_1), "1");
+  assert_false(isLocked(container_2), "2");
+  assert_true(isLocked(container_3), "3");
+  assert_true(isLocked(container_4), "4");
+  assert_true(isLocked(container_5), "5");
+}, "Range shrunk to cover fewer elements: ");
+
+test(() => {
+  resetSelection();
+  const range = document.createRange();
+  range.setStart(child_3, 0);
+  range.setEnd(child_3, 0);
+  selection.addRange(range);
+  selection.extend(child_2, 0);
+
+  assert_true(isLocked(container_1), "1");
+  assert_false(isLocked(container_2), "2");
+  assert_false(isLocked(container_3), "3");
+  assert_true(isLocked(container_4), "4");
+  assert_true(isLocked(container_5), "5");
+
+  selection.extend(child_4, 0);
+
+  assert_true(isLocked(container_1), "1");
+  assert_true(isLocked(container_2), "2");
+  assert_false(isLocked(container_3), "3");
+  assert_false(isLocked(container_4), "4");
+  assert_true(isLocked(container_5), "5");
+}, "Range flipped from back to front: ");
+
+test(() => {
+  resetSelection();
+  const range = document.createRange();
+  range.setStart(child_3, 0);
+  range.setEnd(child_4, 0);
+  selection.addRange(range);
+
+  assert_true(isLocked(container_1), "1");
+  assert_true(isLocked(container_2), "2");
+  assert_false(isLocked(container_3), "3");
+  assert_false(isLocked(container_4), "4");
+  assert_true(isLocked(container_5), "5");
+
+  selection.extend(child_2, 0);
+
+  assert_true(isLocked(container_1), "1");
+  assert_false(isLocked(container_2), "2");
+  assert_false(isLocked(container_3), "3");
+  assert_true(isLocked(container_4), "4");
+  assert_true(isLocked(container_5), "5");
+}, "Range flipped from front to back: ");
+
+test(() => {
+  resetSelection();
+  const range = document.createRange();
+  range.setStart(child_1, 0);
+  range.setEnd(child_1, 0);
+  selection.addRange(range);
+
+  let state = 0;
+  const states = [2, 4, 3, 5, 1];
+  for (let i = 0; i < 10; ++i) {
+    const id = states[state];
+    selection.extend(document.getElementById(`child_${id}`), 1);
+
+    for (let check_id = 1; check_id <= 5; ++check_id) {
+      if (check_id <= id) {
+        assert_false(
+          isLocked(document.getElementById(`container_${check_id}`)),
+          `test_${i}, container_${check_id}`);
+      } else {
+        assert_true(
+          isLocked(document.getElementById(`container_${check_id}`)),
+          `test_${i}, container_${check_id}`);
+      }
+    }
+    state = (state + 1) % states.length;
+  }
+}, "Range goes back and forth: ");
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-072.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-072.html
new file mode 100644
index 0000000000..9fc8b11ceb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-072.html
@@ -0,0 +1,86 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: nested forced layouts</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="nested content-visibility items are all processed when layout is forced">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+body, html {
+  padding: 0;
+  margin: 0;
+}
+.spacer {
+  height: 3000px;
+}
+.target {
+  width: 12px;
+  height: 34px;
+
+  position: relative;
+  left: 5px;
+  top: 7px;
+}
+
+.auto {
+  content-visibility: auto;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div class=spacer></div>
+<div class=auto>
+  <div class=auto>
+    <div class=target id=one></div>
+  </div>
+</div>
+
+<div class=auto>
+  <div class=hidden>
+    <div class=target id=two></div>
+  </div>
+</div>
+
+<div class=hidden>
+  <div class=auto>
+    <div class=target id=three></div>
+  </div>
+</div>
+
+<div class=hidden>
+  <div class=hidden>
+    <div class=target id=four></div>
+  </div>
+</div>
+
+<div class=hidden>
+  <div class=hidden>
+    <div class=hidden>
+      <div class=hidden>
+        <div class=hidden>
+          <div class=target id=five></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+const ids = ["one", "two", "three", "four", "five"];
+for (let i = 0; i < ids.length; ++i) {
+  test(() => {
+    const r = document.getElementById(ids[i]).getBoundingClientRect();
+    assert_equals(r.x, 5, "x");
+    assert_equals(r.y, 3007, "y");
+    assert_equals(r.width, 12, "width");
+    assert_equals(r.height, 34, "y");
+  }, `${ids[i]}.getBoundingClientRect(): `);
+}
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-073.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-073.html
new file mode 100644
index 0000000000..555479b880
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-073.html
@@ -0,0 +1,44 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: switching to inline starts painting</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="inline-container-with-child-ref.html">
+<meta name="assert" content="content-visibility has no effect on non-atomic inlines">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#container {
+  content-visibility: hidden;
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+.inline {
+  display: inline;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: green;
+}
+</style>
+
+<p>Test passes if you can see PASS and a green box below.
+<div id=container>
+  PASS
+  <div id=child></div>
+</div>
+
+<script>
+function runTest() {
+  const container = document.getElementById("container");
+  container.classList.add("inline");
+  takeScreenshot();
+}
+
+window.onload = () => requestAnimationFrame(runTest);
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-074-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-074-ref.html
new file mode 100644
index 0000000000..82a6c263fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-074-ref.html
@@ -0,0 +1,35 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: toggling auto with composited descedant (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+#a { will-change: transform; }
+#b { height: 15000px; }
+#c {
+  width: 800px;
+  height: 600px;
+}
+#d {
+  will-change: transform;
+  top: 0px;
+  width: 500px;
+  height: 500px;
+  background: green;
+}
+.contain {
+  contain: layout style paint;
+}
+
+</style>
+
+<div id="a">
+</div>
+<div id="b">
+  <div id="c" class=contain>
+    <div id="d"></div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-074.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-074.html
new file mode 100644
index 0000000000..ff6381ce3d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-074.html
@@ -0,0 +1,69 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: toggling auto with composited descedant</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-074-ref.html">
+<meta name="assert" content="after toggling content-visibility auto a few times, composited descedant is visible.">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#a { will-change: transform; }
+#b { height: 15000px; }
+#c {
+  width: 800px;
+  height: 600px;
+}
+#d {
+  will-change: transform;
+  top: 0px;
+  width: 500px;
+  height: 500px;
+  background: green;
+}
+.auto {
+  content-visibility: auto;
+}
+
+</style>
+
+<div id="a">
+</div>
+<div id="b">
+  <div id="c" class=auto>
+    <div id="d"></div>
+    </div>
+  </div>
+</div>
+
+<script>
+function runTest(step) {
+  if (step % 2 == 0) {
+    requestAnimationFrame(() => runTest(step + 1));
+    return;
+  }
+
+  switch(step) {
+    case 1:
+      document.getElementById("c").classList.remove("auto");
+      break;
+    case 3:
+      document.getElementById("c").classList.add("auto");
+      break;
+    case 5:
+      document.getElementById("c").classList.remove("auto");
+      break;
+    case 7:
+      document.getElementById("c").classList.add("auto");
+      break;
+    case 9:
+      takeScreenshot();
+      return;
+  }
+  requestAnimationFrame(() => runTest(step + 1));
+}
+
+window.onload = () => requestAnimationFrame(() => runTest(0));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-075-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-075-ref.html
new file mode 100644
index 0000000000..11fbd76252
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-075-ref.html
@@ -0,0 +1,37 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: auto + scrollIntoView/fragment nav when size estimate is off (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.small_child {
+  height: 1000px;
+}
+.large_child {
+  height: 20000px;
+  position: relative;
+}
+#target {
+  position: absolute;
+  bottom: 0;
+}
+</style>
+
+<div class=auto><div class=small_child></div></div>
+<div class=auto><div class=small_child></div></div>
+<div class=auto><div class=large_child><div id=target>PASS</div></div></div>
+<div class=auto><div class=large_child></div></div>
+<div class=auto><div class=small_child></div></div>
+
+<script>
+function runReference() {
+  target.scrollIntoView();
+  takeScreenshot();
+}
+
+window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runReference));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-075.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-075.html
new file mode 100644
index 0000000000..665cb92305
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-075.html
@@ -0,0 +1,41 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: auto + scrollIntoView when size estimate is off</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-075-ref.html">
+<meta name="assert" content="With content-visibility: auto, scrollIntoView targets the right element">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.auto {
+  content-visibility: auto;
+  contain-intrinsic-size: 1px 1000px;
+}
+.child {
+  height: 20000px;
+  position: relative;
+}
+#target {
+  position: absolute;
+  bottom: 0;
+}
+</style>
+
+<div class=auto><div class=child></div></div>
+<div class=auto><div class=child></div></div>
+<div class=auto><div class=child><div id=target>PASS</div></div></div>
+<div class=auto><div class=child></div></div>
+<div class=auto><div class=child></div></div>
+
+<script>
+function runTest() {
+  target.scrollIntoView();
+  // Double rAF to ensure that rendering has "settled".
+  requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+}
+
+window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-076.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-076.html
new file mode 100644
index 0000000000..4ceff631b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-076.html
@@ -0,0 +1,41 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: auto + fragment nav when size estimate is off</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-075-ref.html">
+<meta name="assert" content="With content-visibility: auto, fragment navigation targets the right element">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.auto {
+  content-visibility: auto;
+  contain-intrinsic-size: 1px 1000px;
+}
+.child {
+  height: 20000px;
+  position: relative;
+}
+#target {
+  position: absolute;
+  bottom: 0;
+}
+</style>
+
+<div class=auto><div class=child></div></div>
+<div class=auto><div class=child></div></div>
+<div class=auto><div class=child><div id=target>PASS</div></div></div>
+<div class=auto><div class=child></div></div>
+<div class=auto><div class=child></div></div>
+
+<script>
+function runTest() {
+  window.location.href += "#target";
+  // Double rAF to ensure that rendering has "settled".
+  requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+}
+
+window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-077.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-077.html
new file mode 100644
index 0000000000..9f2c69e9cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-077.html
@@ -0,0 +1,27 @@
+<!doctype HTML>
+<meta charset="utf8">
+<title>CSS Content Visibility: content-visibility is animatable.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility is animatable">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+@keyframes cv {
+  from { content-visibility: auto }
+  to { content-visibility: hidden }
+}
+
+#container { animation: cv 1s; }
+</style>
+
+<div id=container></div>
+
+<script>
+test(() => {
+  const computedStyle = getComputedStyle(container);
+  assert_equals(computedStyle.contentVisibility, "auto");
+}, "Content-visibility is animatable");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-078-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-078-ref.html
new file mode 100644
index 0000000000..1aed12f92e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-078-ref.html
@@ -0,0 +1,29 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: positioned movement update moves hidden container (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+#target {
+  top: 50px;
+  left: 100px;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+#t2 {
+  top: 150px;
+  left: 100px;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: orange;
+}
+</style>
+
+<p>Test passes if the blue and orange boxes are vertically aligned with each other.
+<div id=target></div>
+<div id=t2></div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-078.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-078.html
new file mode 100644
index 0000000000..27e300cf11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-078.html
@@ -0,0 +1,43 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: positioned movement update moves hidden container</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-078-ref.html">
+<meta name="assert" content="when locked, position updates still apply">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.hidden { content-visibility: hidden; }
+#target {
+  top: 50px;
+  left: 0;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+#t2 {
+  top: 150px;
+  left: 100px;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: orange;
+}
+</style>
+
+<p>Test passes if the blue and orange boxes are vertically aligned with each other.
+<div id=target class=hidden>FAIL</div>
+<div id=t2 class=hidden>FAIL</div>
+
+<script>
+function runTest() {
+  target.style = "left: 100px;";
+  takeScreenshot();
+}
+
+window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-079-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-079-ref.html
new file mode 100644
index 0000000000..83a2206be2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-079-ref.html
@@ -0,0 +1,9 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: auto in overflow hidden paints (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<p>Test passes if you see the word “PASS” below.
+<div>PASS</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-079.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-079.html
new file mode 100644
index 0000000000..2fef671f0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-079.html
@@ -0,0 +1,17 @@
+<!doctype HTML>
+<meta charset="utf8">
+<title>CSS Content Visibility: auto in overflow hidden paints</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-079-ref.html">
+<meta name="assert" content="content-visibility auto element paints in an overflow hidden element that is not sized">
+
+<style>
+.auto { content-visibility: auto; }
+.overflow { overflow: hidden; }
+</style>
+
+<p>Test passes if you see the word “PASS” below.
+<div class=overflow>
+  <div class=auto>PASS</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-080.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-080.html
new file mode 100644
index 0000000000..6ee1c2a962
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-080.html
@@ -0,0 +1,32 @@
+<!doctype HTML>
+<html id=html>
+<meta charset="utf8">
+<title>Content Visibility: caret position with html hidden</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="caretRangeFromPoint works even if html has content-visibility hidden">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<meter></meter>
+<iframe></iframe>
+<style>
+* {
+  all: initial;
+  content-visibility: hidden;
+}
+</style>
+
+<script>
+test((t) => {
+  t.add_cleanup(() => { document.getElementsByTagName('style')[0].remove(); });
+  const range = document.caretRangeFromPoint();
+  assert_not_equals(range, null, "range exists");
+  assert_equals(range.startContainer, html, "startContainer is html");
+  assert_equals(range.startOffset, 0, "startOffset is zero");
+  assert_equals(range.endContainer, html, "endContainer is html");
+  assert_equals(range.endOffset, 0, "endOffset is zero");
+}, "Caret range from point");
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-081.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-081.html
new file mode 100644
index 0000000000..b5f10cb6c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-081.html
@@ -0,0 +1,55 @@
+<!doctype HTML>
+<html id=html>
+<meta charset="utf8">
+<title>Content Visibility: scroll position restoration</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="if an scroller is hidden via content-visibility and then shown again, its scroll offset should be restored">
+<meta name="viewport" content="width=device-width">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/helper.js"></script>
+
+<style>
+.scroller {
+  width: 100px;
+  height: 500px;
+  overflow-y: scroll;
+}
+.spacer { height: 3000px; }
+.hidden { content-visibility: hidden; }
+</style>
+
+<div id=target class=scroller>
+  <div class=spacer></div>
+</div>
+</style>
+
+<script>
+function removeHiddenAndScheduleTest(t) {
+  target.classList.remove("hidden");
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      testScrollTop(t);
+    });
+  });
+}
+
+function testScrollTop(t) {
+  t.step(() => assert_equals(target.scrollTop, 2000));
+  t.done();
+}
+
+async_test((t) => {
+  target.scrollTop = 2000;
+  target.classList.add("hidden");
+
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      removeHiddenAndScheduleTest(t);
+    });
+  });
+}, "Scroll offset is restored when content-visibility hidden is removed");
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-082.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-082.html
new file mode 100644
index 0000000000..3313ca0f65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-082.html
@@ -0,0 +1,32 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: focus selects content-visibility element</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-focus-ref.html">
+<meta name="assert" content="The elements with content-visibility are still focusable">
+
+<style>
+#container {
+  content-visibility: hidden;
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: lightgreen;
+}
+</style>
+
+<p>Test passes if the light blue box below has focus.
+<div id=container tabindex=0>
+  <div id=child></div>
+</div>
+
+<script>
+onload = () => container.focus();
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-083.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-083.html
new file mode 100644
index 0000000000..488465f02b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-083.html
@@ -0,0 +1,42 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: anchor links prevented on hidden</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-and-container-ref.html">
+<meta name="assert" content="anchor link scroll is prevented when the target is hidden">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  height: 150px;
+  background: red;
+  content-visibility: hidden;
+}
+
+#target {
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div class="spacer">Test passes if there is no red.</div>
+<div id="container"><div id="target"></div></div>
+
+<script>
+function runTest() {
+  location.href += "#target";
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => { requestAnimationFrame(runTest); };
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-084.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-084.html
new file mode 100644
index 0000000000..742b1d5189
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-084.html
@@ -0,0 +1,50 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: anchor links prevented on hidden</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-and-container-ref.html">
+<meta name="assert" content="anchor link scroll is prevented when the target is hidden">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  height: 150px;
+  background: red;
+}
+
+.hidden {
+  content-visibility: hidden;
+}
+
+#target {
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div class="spacer">Test passes if there is no red.</div>
+<div id="container"><div id="target"></div></div>
+
+<script>
+function tryToScroll() {
+  location.href += "#target";
+  requestAnimationFrame(takeScreenshot);
+}
+
+function runTest() {
+  container.classList.add("hidden");
+  requestAnimationFrame(tryToScroll);
+}
+
+window.onload = () => { requestAnimationFrame(runTest); };
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-applied-to-th-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-applied-to-th-crash.html
new file mode 100644
index 0000000000..cde696e2f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-applied-to-th-crash.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+    <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+    <meta name="assert" content="content-visiblity: auto on a <th> element should not cause a crash.">
+    <style>
+        TR {
+          content-visibility: auto;
+        }
+        * {
+            inset-block-end: 21%;
+        }
+    </style>
+</head>
+<body>
+    <table>
+    <th>
+    <sub>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-in-iframe-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-in-iframe-ref.html
new file mode 100644
index 0000000000..03a2875b75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-in-iframe-ref.html
@@ -0,0 +1,25 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: auto container in an iframe (reference)</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<iframe id="frame" srcdoc='
+  <style>
+  #container {
+    width: 200px;
+    height: 200px;
+  }
+  #child {
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+  </style>
+  <div id="container">
+    <div id="child"></div>
+  </div>
+  hello
+'></iframe>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-in-iframe.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-in-iframe.html
new file mode 100644
index 0000000000..ba02cac668
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-in-iframe.html
@@ -0,0 +1,28 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: auto container in an iframe</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-auto-in-iframe-ref.html">
+<meta name="assert" content="content-visibility: auto shows on screen iframe contents">
+
+<iframe id="frame" srcdoc='
+  <style>
+  #container {
+    width: 200px;
+    height: 200px;
+    content-visibility: auto;
+  }
+  #child {
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+  </style>
+  <div id="container">
+    <div id="child"></div>
+  </div>
+  hello
+'></iframe>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-intrinsic-width.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-intrinsic-width.html
new file mode 100644
index 0000000000..bd90fff514
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-intrinsic-width.html
@@ -0,0 +1,25 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: Elements with content-visibility: auto and intrinsic width should render correctly</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="Elements with content-visibility: auto and intrinsic width should render correctly">
+
+<style>
+#container {
+  content-visibility: auto;
+  width: max-content;
+  background: lightblue;
+}
+
+#child {
+  width: 150px;
+  height: 150px;
+}
+</style>
+
+<div id="container">
+    <div id="child"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-nested-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-nested-ref.html
new file mode 100644
index 0000000000..bc00c86b8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-nested-ref.html
@@ -0,0 +1,10 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: content in nested `content-visibility: auto` elements is considered relevant</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<div style="border:solid">
+    <div>content with content-visibility: auto</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-nested.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-nested.html
new file mode 100644
index 0000000000..9fc7c03b3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-nested.html
@@ -0,0 +1,28 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: content in nested `content-visibility: auto` elements is considered relevant</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-auto-nested-ref.html">
+<meta name="assert" content="content in nested `content-visibility: auto` elements is considered relevant">
+
+<script src="/common/reftest-wait.js"></script>
+<script src="../resources/utils.js"></script>
+
+<style>
+div {
+    content-visibility: auto;
+}
+</style>
+
+<script>
+function runTest() {
+  requestAnimationFrame(takeScreenshot);
+}
+window.onload = () => { requestAnimationFrame(runTest); };
+</script>
+
+<div style="border:solid">
+    <div>content with content-visibility: auto</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-selection-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-selection-crash.html
new file mode 100644
index 0000000000..4cfe62eaca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-selection-crash.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+    <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+    <meta name="assert" content="Changes to selection that result in no selection do not cause a crash.">
+    <style>
+        * {
+            content-visibility: auto;
+        }
+    </style>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+          document.documentElement.convertPointFromNode({}, marquee, {})
+          textarea.setSelectionRange(0, 0, 'forward')
+          input.setAttribute('type', 'number')
+          document.documentElement.getBoundingClientRect()
+        })
+    </script>
+</head>
+<body>
+    <marquee id='marquee'></marquee>
+    <textarea id='textarea'></textarea>
+    <input id='input'></input>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-state-changed-first-observation.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-state-changed-first-observation.html
new file mode 100644
index 0000000000..1c51851488
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-state-changed-first-observation.html
@@ -0,0 +1,65 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: ContentVisibilityAutoStateChange event.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="ContentVisibilityAutoStateChange fires once when element is inserted">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+.spacer {
+  height: 10000px;
+}
+</style>
+
+<div id=topdiv></div>
+<div class=spacer></div>
+<div id=bottomdiv></div>
+
+<script>
+promise_test(t => new Promise(async (resolve, reject) => {
+  await new Promise((waited, _) => {
+    requestAnimationFrame(() => requestAnimationFrame(waited));
+  });
+
+  let observed = false;
+  let div = document.createElement("div");
+  div.addEventListener("contentvisibilityautostatechange", (e) => {
+    if (observed)
+      reject("already observed");
+    if (e.skipped)
+      reject("unexpected skipped");
+    observed = true;
+    // Wait a couple of frames to ensure no other signal comes in
+    requestAnimationFrame(() => requestAnimationFrame(resolve));
+  });
+
+  div.style.contentVisibility = "auto";
+  topdiv.appendChild(div);
+}), "ContentVisibilityAutoStateChange fires once when added (not skipped)");
+
+promise_test(t => new Promise(async (resolve, reject) => {
+  await new Promise((waited, _) => {
+    requestAnimationFrame(() => requestAnimationFrame(waited));
+  });
+
+  let observed = false;
+  let div = document.createElement("div");
+  div.addEventListener("contentvisibilityautostatechange", (e) => {
+    if (observed)
+      reject("already observed");
+    if (!e.skipped)
+      reject("unexpected not skipped");
+    observed = true;
+    // Wait a couple of frames to ensure no other signal comes in
+    requestAnimationFrame(() => requestAnimationFrame(resolve));
+  });
+
+  div.style.contentVisibility = "auto";
+  bottomdiv.appendChild(div);
+}), "ContentVisibilityAutoStateChange fires once when added (skipped)");
+</script>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-state-changed-removed.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-state-changed-removed.html
new file mode 100644
index 0000000000..ae1c946fa3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-state-changed-removed.html
@@ -0,0 +1,41 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: ContentVisibilityAutoStateChange event.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="ContentVisibilityAutoStateChange does not fire on disconnected element">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+.spacer {
+  height: 10000px;
+}
+#bottomdiv {
+  content-visibility: auto;
+}
+</style>
+
+<div class=spacer></div>
+<div id=bottomdiv></div>
+
+<script>
+promise_test(t => new Promise(async (resolve, reject) => {
+  await new Promise((waited, _) => {
+    requestAnimationFrame(() => requestAnimationFrame(waited));
+  });
+
+  let observed = false;
+  bottomdiv.addEventListener("contentvisibilityautostatechange", () => {
+    reject("unexpected signal")
+  });
+
+  bottomdiv.remove()
+  requestAnimationFrame(() => requestAnimationFrame(resolve));
+
+}), "ContentVisibilityAutoStateChange does not fire on disconnected element");
+
+</script>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-state-changed.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-state-changed.html
new file mode 100644
index 0000000000..65b501de1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-auto-state-changed.html
@@ -0,0 +1,98 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: ContentVisibilityAutoStateChange event.</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="timeout" content="long">
+<meta name="assert" content="ContentVisibilityAutoStateChange fires when things enter/exit viewport">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/common/utils.js"></script>
+<script src="/scroll-to-text-fragment/stash.js"></script>
+
+<style>
+.spacer {
+  height: 3000px;
+}
+.auto { content-visibility: auto; }
+</style>
+
+<div id=upper></div>
+<div class=spacer></div>
+<div id=middle></div>
+<div class=spacer></div>
+<div id=lower></div>
+
+<script>
+promise_test(t => new Promise(async (resolve, reject) => {
+  let shouldSkip = false;
+  const listener = (e) => {
+    if (!e.skipped)
+      resolve();
+  };
+
+  upper.addEventListener("contentvisibilityautostatechange", listener);
+  t.add_cleanup(() => upper.removeEventListener("contentvisibilityautostatechange", listener));
+  upper.classList.add("auto");
+}), "ContentVisibilityAutoStateChange fires when relevant element gains `content-visibility:auto`");
+
+promise_test(t => new Promise(async (resolve, reject) => {
+  let shouldSkip = false;
+  const listener = (e) => {
+    if (e.skipped)
+      resolve();
+    else
+      reject();
+  };
+
+  lower.addEventListener("contentvisibilityautostatechange", listener);
+  t.add_cleanup(() => lower.removeEventListener("contentvisibilityautostatechange", listener));
+  lower.classList.add("auto");
+}), "ContentVisibilityAutoStateChange fires when not relevant element gains `content-visibility:auto`");
+
+promise_test(t => new Promise(async (resolve, reject) => {
+  await new Promise((waited, _) => {
+    requestAnimationFrame(() => requestAnimationFrame(waited));
+  });
+
+  const listener = (e) => {
+    if (e.skipped)
+      resolve();
+  };
+
+  upper.addEventListener("contentvisibilityautostatechange", listener);
+  t.add_cleanup(() => upper.removeEventListener("contentvisibilityautostatechange", listener));
+
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    middle.scrollIntoView();
+  }));
+}), "ContentVisibilityAutoStateChange fires when skipped");
+
+promise_test(t => new Promise(async (resolve, reject) => {
+  await new Promise((waited, _) => {
+    requestAnimationFrame(() => requestAnimationFrame(waited));
+  });
+
+  const listener = (e) => {
+    if (!e.skipped)
+      resolve();
+    else
+      reject();
+  }
+
+  lower.addEventListener("contentvisibilityautostatechange", listener);
+  t.add_cleanup(() => {
+    lower.removeEventListener("contentvisibilityautostatechange", listener);
+  });
+
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    lower.scrollIntoView();
+  }));
+}), "ContentVisibilityAutoStateChange fires when not skipped");
+
+</script>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-canvas-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-canvas-ref.html
new file mode 100644
index 0000000000..dbedcf18ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-canvas-ref.html
@@ -0,0 +1,17 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hidden canvas (reference)</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+div {
+  width: 200px;
+  height: 200px;
+  background: green;
+  border: 1px solid black;
+}
+</style>
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-canvas.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-canvas.html
new file mode 100644
index 0000000000..fe46948952
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-canvas.html
@@ -0,0 +1,43 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: hidden canvas</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-canvas-ref.html">
+<meta name="assert" content="content-visibility hidden canvas element does not paint replaced content">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+canvas {
+  width: 200px;
+  height: 200px;
+  background: green;
+  border: 1px solid black;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<canvas id="canvas">
+</canvas>
+
+<script>
+async function runTest() {
+  var context = canvas.getContext("2d");
+  context.fillStyle = "red";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+
+  canvas.classList.add("hidden");
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(runTest);
+  });
+};
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-continuations-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-continuations-crash.html
new file mode 100644
index 0000000000..e20d26fcee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-continuations-crash.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="help" href="https://crbug.com/1197492">
+<map>
+  <ul></ul>
+  <progress></progress>
+  <iframe></iframe>
+</map>
+<style>
+body, map, ul, progress {
+    content-visibility: auto;
+    height: 0vw;
+  }
+</style>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-fieldset-size-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-fieldset-size-ref.html
new file mode 100644
index 0000000000..7958810b40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-fieldset-size-ref.html
@@ -0,0 +1,14 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: fieldset hiding content</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+fieldset {
+    background: green;
+}
+</style>
+
+<fieldset></fieldset>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-fieldset-size.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-fieldset-size.html
new file mode 100644
index 0000000000..830bf851ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-fieldset-size.html
@@ -0,0 +1,17 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: fieldset hiding content</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-fieldset-size-ref.html">
+<meta name="assert" content="A fieldset hiding content with content-visibility should be equivalent to an empty fieldset">
+
+<style>
+fieldset {
+    background: green;
+    content-visibility: hidden
+}
+</style>
+
+<fieldset><legend>Hidden legend content</legend>Hidden fieldset content</fieldset>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-forced-layout-client-rects.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-forced-layout-client-rects.html
new file mode 100644
index 0000000000..60e6849892
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-forced-layout-client-rects.html
@@ -0,0 +1,105 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: nested forced layouts</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="nested content-visibility items are all processed when layout is forced">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+body, html {
+  padding: 0;
+  margin: 0;
+}
+.spacer {
+  height: 3000px;
+}
+.target {
+  width: 12px;
+  height: 34px;
+
+  position: relative;
+  left: 5px;
+  top: 7px;
+}
+
+.hidden {
+  content-visibility: hidden;
+}
+
+.will-hide {
+  contain: style;
+  contain: size;
+  contain: layout;
+  contain: paint;
+}
+</style>
+
+<div class=spacer></div>
+
+<div class="will-hide">
+    <div id=one>A line of a certain length...</div>
+</div>
+
+<div class="will-hide">
+    <div class=target id=two></div>
+</div>
+
+<div class="will-hide">
+    <div class=target id=three></div>
+</div>
+
+<div class="will-hide">
+  <div class="will-hide">
+    <div class=target id=four></div>
+  </div>
+</div>
+
+<div class="will-hide">
+  <div class="will-hide">
+    <div class="will-hide">
+      <div class="will-hide">
+        <div class="will-hide">
+          <div class=target id=five></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+function hideContent() {
+  document
+        .querySelectorAll('.will-hide')
+        .forEach(content => content.classList.add("hidden"));
+}
+
+function showContent() {
+  document
+        .querySelectorAll('.will-hide')
+        .forEach(content => content.classList.remove("hidden"));
+}
+
+const ids = ["one", "two", "three", "four", "five"];
+for (let i = 0; i < ids.length; ++i) {
+  test(() => {
+    const expectedRect = document.getElementById(ids[i]).getClientRects()[0];
+    const expectedBoundingRect = document.getElementById(ids[i]).getBoundingClientRect();
+    hideContent();
+
+    const rect = document.getElementById(ids[i]).getClientRects()[0];
+    assert_equals(rect.width, expectedRect.width, `width for "${ids[i]}"`);
+    assert_equals(rect.height, expectedRect.height, `height for "${ids[i]}`);
+
+    const boundingRect = document.getElementById(ids[i]).getClientRects()[0];
+    assert_equals(boundingRect.width, expectedBoundingRect.width, `width for "${ids[i]}"`);
+    assert_equals(boundingRect.height, expectedBoundingRect.height, `height for "${ids[i]}`);
+
+    showContent();
+  }, `${ids[i]}.getBoundingClientRect(): `);
+}
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-form-controls-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-form-controls-crash.html
new file mode 100644
index 0000000000..6c9634dc1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-form-controls-crash.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="help" href="https://crbug.com/1143620">
+<style>
+input, select, textarea {
+  content-visibility: auto;
+}
+</style>
+<input type="button">
+<input type="checkbox">
+<input type="color">
+<input type="date">
+<input type="datetime">
+<input type="datetime-local">
+<input type="email">
+<input type="file">
+<input type="hidden">
+<input type="image">
+<input type="month">
+<input type="number">
+<input type="password">
+<input type="radio">
+<input type="range">
+<input type="reset">
+<input type="search">
+<input type="submit">
+<input type="tel">
+<input type="text">
+<input type="time">
+<input type="url">
+<input type="week">
+<select><option>Option1</option></select>
+<select multiple><option>Option1</option></select>
+<textarea></textarea>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-hit-test-contents-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-hit-test-contents-crash.html
new file mode 100644
index 0000000000..737d2af5d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-hit-test-contents-crash.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<link rel=author name="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel=assert content="Hit testing around hidden elements should not crash regardless of contents">
+
+<style>
+.box { width: 100px; height: 100px; border: 1px solid black; }
+.hidden { content-visibility: hidden }
+</style>
+
+<div id=container class="box hidden">
+  content
+  <dialog id=dialog>
+    dialog
+    <div id=inner></div>
+  </dialog>
+</div>
+text
+
+<script>
+function runTest() {
+  inner.getBoundingClientRect();
+  document.elementFromPoint(20, 109);
+  document.elementFromPoint(20, 20);
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-img.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-img.html
new file mode 100644
index 0000000000..94981aa264
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-img.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1247417">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+<div class="hidden" id="container1"></div>
+<div class="hidden" id="container2"></div>
+<div class="hidden" id="container3"></div>
+<div class="hidden" id="container4"></div>
+
+<script>
+promise_test(async () => {
+  const img1 = document.createElement('img');
+  container1.appendChild(img1);
+  const img1Load = new Promise(resolve => img1.onload = resolve);
+  img1.src = 'resources/dice.png';
+  await img1Load;
+  assert_not_equals(img1.height, 0, 'height');
+
+  const img2 = document.createElement('img');
+  container2.appendChild(img2);
+  const img2Load = new Promise(resolve => img2.onload = resolve);
+  img2.src = 'resources/dice.png';
+  await img2Load;
+  assert_not_equals(img2.width, 0, 'width');
+
+  const img3 = document.createElement('img');
+  container3.appendChild(img3);
+  const img3Load = new Promise(resolve => img3.onload = resolve);
+  img3.src = 'resources/dice.png';
+  await img3Load;
+  assert_not_equals(img3.x, 0, 'x');
+
+  const img4 = document.createElement('img');
+  container4.appendChild(img4);
+  const img4Load = new Promise(resolve => img4.onload = resolve);
+  img4.src = 'resources/dice.png';
+  await img4Load;
+  assert_not_equals(img4.y, 0, 'y');
+
+}, `c-v:hidden <img> layout APIs shouldn't return zero when accessed from script.`);
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-in-svg-000-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-in-svg-000-crash.html
new file mode 100644
index 0000000000..d1084f7216
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-in-svg-000-crash.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://crbug.com/1247196">
+<meta name="assert" content="Clip path with content-visibility does not cause an assert">
+
+<svg width="138">
+  <defs>
+    <clipPath id="snowglobe_clipPath">
+      <circle cx="34" />
+    </clipPath>
+  </defs>
+  <circle />
+  <g class="group-snow" clip-path="url(#snowglobe_clipPath)">
+    <g class="snowContainer">
+      <circle class="snow" />
+    </g>
+  </g>
+</svg>
+<script type="text/javascript">
+onload = () => {
+  var test0 = document.getElementById("snowglobe_clipPath");
+  test0.style.setProperty("content-visibility", "auto ", "important");
+  test0.innerHTML = "";
+  test0.offsetHeight;
+
+  requestAnimationFrame(() => document.documentElement.classList.remove('test-wait'));
+};
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-input-image.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-input-image.html
new file mode 100644
index 0000000000..7d603eaf58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-input-image.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<link rel="author" href="mailto:jarhar@chromium.org">
+<link rel="help" href="http://crbug.com/1247417">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div style="content-visibility:hidden" id=container1></div>
+<div style="content-visibility:hidden" id=container2></div>
+
+<script>
+promise_test(async () => {
+  const image1 = document.createElement('input');
+  image1.type = 'image';
+  const image1Load = new Promise(resolve => {
+    image1.addEventListener('load', resolve);
+  });
+  image1.src = 'resources/dice.png';
+  container1.appendChild(image1);
+  await image1Load;
+  assert_not_equals(image1.width, 0, 'width');
+
+  const image2 = document.createElement('input');
+  image2.type = 'image';
+  const image2Load = new Promise(resolve => {
+    image2.addEventListener('load', resolve);
+  });
+  image2.src = 'resources/dice.png';
+  container2.appendChild(image2);
+  await image2Load;
+  assert_not_equals(image2.height, 0, 'height');
+
+}, `<input type=image> should return nonzero values for width and height in a c-v:hidden subtree.`);
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-interpolation.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-interpolation.html
new file mode 100644
index 0000000000..9e5551a6f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-interpolation.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/6429">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+const alwaysVisible = [
+  {at: -1, expect: 'visible'},
+  {at: 0, expect: 'visible'},
+  {at: 0.1, expect: 'visible'},
+  {at: 0.9, expect: 'visible'},
+  {at: 1, expect: 'visible'},
+  {at: 1.5, expect: 'visible'},
+];
+const alwaysHidden = [
+  {at: -1, expect: 'hidden'},
+  {at: 0, expect: 'hidden'},
+  {at: 0.1, expect: 'hidden'},
+  {at: 0.9, expect: 'hidden'},
+  {at: 1, expect: 'hidden'},
+  {at: 1.5, expect: 'hidden'},
+];
+
+test_interpolation({
+  property: 'content-visibility',
+  from: 'visible',
+  to: 'hidden',
+  // transition:all is not supposed to allow content-visibility to be transitioned.
+  'CSS Transitions with transition: all': alwaysHidden,
+}, [
+  {at: -1, expect: 'visible'},
+  {at: 0, expect: 'visible'},
+  {at: 0.1, expect: 'visible'},
+  {at: 0.9, expect: 'visible'},
+  {at: 1, expect: 'hidden'},
+  {at: 1.5, expect: 'hidden'},
+]);
+
+test_interpolation({
+  property: 'content-visibility',
+  from: 'hidden',
+  to: 'visible',
+  // transition:all is not supposed to allow content-visibility to be transitioned.
+  'CSS Transitions with transition: all': alwaysVisible,
+}, [
+  {at: -1, expect: 'hidden'},
+  {at: 0, expect: 'hidden'},
+  {at: 0.1, expect: 'visible'},
+  {at: 0.9, expect: 'visible'},
+  {at: 1, expect: 'visible'},
+  {at: 1.5, expect: 'visible'},
+]);
+
+test_no_interpolation({
+  property: 'content-visibility',
+  from: 'auto',
+  to: 'visible'
+});
+
+test_interpolation({
+  property: 'content-visibility',
+  from: 'visible',
+  to: 'visible'
+}, [
+  {at: -1, expect: 'visible'},
+  {at: 0, expect: 'visible'},
+  {at: 0.5, expect: 'visible'},
+  {at: 1, expect: 'visible'},
+  {at: 1.5, expect: 'visible'},
+]);
+
+test_interpolation({
+  property: 'content-visibility',
+  from: 'hidden',
+  to: 'hidden'
+}, [
+  {at: -1, expect: 'hidden'},
+  {at: 0, expect: 'hidden'},
+  {at: 0.5, expect: 'hidden'},
+  {at: 1, expect: 'hidden'},
+  {at: 1.5, expect: 'hidden'},
+]);
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-output-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-output-crash.html
new file mode 100644
index 0000000000..6c7c7d2b1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-output-crash.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="help" href="https://crbug.com/1316517">
+<meta name="assert" content="Ensure content-visibility: hidden doesn't apply to <output> elements">
+<style>
+output {
+ content-visibility: hidden;
+}
+</style>
+<output>
+  <iframe></iframe>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-resize-observer-no-error-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-resize-observer-no-error-ref.html
new file mode 100644
index 0000000000..228eebfaa6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-resize-observer-no-error-ref.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<meta charset="utf8">
+<title>Content Visibility: resize observer interaction (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+div {
+  min-height: 50px;
+  background: blue;
+}
+</style>
+
+<span>There should be no red color on this page.</span>
+<span><div></div></span>
+<div></div>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-resize-observer-no-error.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-resize-observer-no-error.html
new file mode 100644
index 0000000000..f323e60603
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-resize-observer-no-error.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf8">
+<title>Content Visibility: resize observer interaction</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-resize-observer-no-error-ref.html">
+<meta name="assert" content="the test doesn't cause resize observer to produce an error">
+
+<script>
+addEventListener('error', () => {
+  document.documentElement.style.background = "red";
+});
+</script>
+
+<style>
+div {
+  contain-intrinsic-size: auto 200px;
+  content-visibility: auto;
+  min-height: 50px;
+  background: blue;
+}
+</style>
+
+<span>There should be no red color on this page.</span>
+<span><div></div></span>
+<div></div>
+
+<script>
+new ResizeObserver(() => {});
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-selection-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-selection-crash.html
new file mode 100644
index 0000000000..78b610b72e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-selection-crash.html
@@ -0,0 +1,20 @@
+<style>
+* { content-visibility: auto; }
+</style>
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  document.documentElement.setAttribute('contenteditable', true)
+  let a = document.createElement('map')
+  let b = document.createElement('h1')
+  let c = document.createElement('kbd')
+  b.appendChild(c)
+  a.appendChild(b)
+  document.documentElement.appendChild(a)
+  let d = new Range()
+  let f = document.getSelection()
+  f.addRange(d)
+  d.setStart(c, 0)
+  f.addRange(d)
+  f.removeRange(d)
+})
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-svg.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-svg.html
new file mode 100644
index 0000000000..568149ba7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-svg.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link rel="author" href="mailto:jarhar@chromium.org">
+<link rel="help" href="http://crbug.com/1247417">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div style="content-visibility:hidden">
+  <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+    <g id="group_text_1">
+      <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
+      <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">Hello World Again!</text>
+    </g>
+  </svg>
+</div>
+
+<script>
+  test(() => {
+    const groupElement = document.getElementById('group_text_1');
+    const bbox = groupElement.getBBox();
+    assert_not_equals(bbox.width, 0, 'width');
+    assert_not_equals(bbox.height, 0, 'height');
+    assert_not_equals(bbox.x, 0, 'x');
+    assert_not_equals(bbox.y, 0, 'y');
+  }, `getBBox() should return nonzero values in a c-v:hidden subtree.`);
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-video-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-video-ref.html
new file mode 100644
index 0000000000..5e1e9bdde8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-video-ref.html
@@ -0,0 +1,17 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: hidden video (reference)</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+div {
+  width: 200px;
+  height: 200px;
+  background: green;
+  border: 1px solid black;
+}
+</style>
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-video.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-video.html
new file mode 100644
index 0000000000..bed5954fe4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-video.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Content Visibility: hidden video</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-visibility-video-ref.html">
+<meta name="assert" content="content-visibility hidden video element does not paint replaced content">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+video {
+  width: 200px;
+  height: 200px;
+  background: green;
+  border: 1px solid black;
+}
+.hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<body>
+  <video id="video" poster="../support/blue-100x100.png" src="../support/white.webm" controls></video>
+</body>
+
+<script>
+async function runTest() {
+  video.classList.add("hidden");
+  video.play();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(runTest);
+  });
+};
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-000.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-000.html
new file mode 100644
index 0000000000..61856611f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-000.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: dialog doesn't show when hidden</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="top layer dialogs don't render when in skipped subtrees">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.box { width: 150px; height: 150px; background: lightblue }
+.hidden { content-visibility: hidden }
+</style>
+
+<div class="box hidden">
+Fail
+<dialog id=dialog>Fail<div id=inner></div></dialog>
+</div>
+
+<script>
+function runTest() {
+  dialog.showModal();
+  takeScreenshot();
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-001.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-001.html
new file mode 100644
index 0000000000..43242eb2cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-001.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: dialog doesn't show when hidden after render</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="top layer dialogs don't render when in skipped subtrees">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.box { width: 150px; height: 150px; background: lightblue }
+.hidden { content-visibility: hidden }
+</style>
+
+<div id=container class=box>
+Fail
+<dialog id=dialog>Fail<div id=inner></div></dialog>
+</div>
+
+<script>
+function runTest() {
+  container.classList.add("hidden");
+  dialog.showModal();
+  takeScreenshot();
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-002.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-002.html
new file mode 100644
index 0000000000..f54c639d7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-002.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: dialog doesn't show when hidden after render</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="top layer dialogs don't render when in skipped subtrees">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.box { width: 150px; height: 150px; background: lightblue }
+.hidden { content-visibility: hidden }
+</style>
+
+<div id=container class=box>
+content
+<dialog id=dialog>dialog<div id=inner></div></dialog>
+</div>
+
+<script>
+function runTest() {
+  container.classList.add("hidden");
+  dialog.showModal();
+  inner.getBoundingClientRect();
+
+  takeScreenshot();
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html
new file mode 100644
index 0000000000..7fb1f20b7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-003.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: dialog shows when rendered</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="content-with-top-layer-ref.html">
+<meta name="assert" content="top layer dialogs start rendering when c-v is removed">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.box { width: 100px; height: 100px; border: 1px solid black; }
+.hidden { content-visibility: hidden }
+#dialog { outline: none; }
+</style>
+
+<div id=container class=box>
+This test passes if you can see “PASS” in a white box.
+<dialog id=dialog>PASS<div id=inner></div></dialog>
+</div>
+text
+
+<script>
+function unhide() {
+  container.classList.remove("hidden");
+  takeScreenshot();
+}
+
+function runTest() {
+  container.classList.add("hidden");
+  dialog.showModal();
+  requestAnimationFrame(unhide);
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-004.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-004.html
new file mode 100644
index 0000000000..e21b11e92d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-004.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: dialog shows under c-v auto</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-with-top-layer-ref.html">
+<meta name="assert" content="top layer dialogs render under c-v auto">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.box { width: 100px; height: 100px; border: 1px solid black; }
+.auto { content-visibility: auto }
+.spacer { width: 10px; height: 3000px; background: lightblue; }
+</style>
+
+<div class=spacer></div>
+<div id=container class="box auto">
+content
+<dialog id=dialog>PASS<div id=inner></div></dialog>
+</div>
+
+<script>
+function runTest() {
+  dialog.showModal();
+  takeScreenshot();
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-005.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-005.html
new file mode 100644
index 0000000000..5283aea197
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-005.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: dialog shows under c-v auto</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="spacer-with-top-layer-ref.html">
+<meta name="assert" content="top layer dialogs render under c-v auto">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.box { width: 100px; height: 100px; border: 1px solid black; }
+.auto { content-visibility: auto }
+.spacer { width: 10px; height: 3000px; background: lightblue; }
+</style>
+
+<div class=spacer></div>
+<div id=container class="box">
+content
+<dialog id=dialog><div id=inner class="auto">PASS</div></dialog>
+</div>
+
+<script>
+function runTest() {
+  dialog.showModal();
+  takeScreenshot();
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-006.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-006.html
new file mode 100644
index 0000000000..36a79532a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-006.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS Content Visibility: offscreen c-v auto content is relevant when in top layer</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="offscreen c-v auto content is relevant when in top layer">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+#inner {
+    content-visibility: auto;
+    contain-intrinsic-size: 100px 100px;
+}
+</style>
+
+<dialog id="dialog">
+    <div id="spacer" style="height: 100000px;"></div>
+    <div id="inner">
+        <div style="height: 200px; width: 200px;">content</div>
+    </div>
+</dialog>
+
+<script>
+test(() => {
+    dialog.show();
+
+    assert_equals(inner.getBoundingClientRect().height, 100);
+
+    dialog.close();
+    dialog.showModal();
+
+    // Even though the element with `content-visibility: auto` has an ancestor
+    // in the top layer, this element is not in the top layer list (although
+    // it's in the top layer stacking context). This means it should not be
+    // relevant to the user, because it is nevertheless not onscreen.
+    assert_equals(inner.getBoundingClientRect().height, 100);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-hide-after-addition.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-hide-after-addition.html
new file mode 100644
index 0000000000..54f632ffbd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-with-top-layer-hide-after-addition.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: dialog doesn't show when hidden after showModal()</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="top layer dialogs don't render when in skipped subtrees">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.box { width: 150px; height: 150px; background: lightblue }
+.hidden { content-visibility: hidden }
+</style>
+
+<div id=container class=box>
+FAIL
+<dialog id=dialog>FAIL<div id=inner></div></dialog>
+</div>
+
+<script>
+function runTest() {
+  dialog.showModal();
+  inner.getBoundingClientRect();
+
+  container.classList.add("hidden");
+
+  takeScreenshot();
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/content-with-top-layer-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/content-with-top-layer-ref.html
new file mode 100644
index 0000000000..eadc5f65d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/content-with-top-layer-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS Content Visibility: dialog shows when rendered (ref)</title>
+
+<style>
+.box { width: 100px; height: 100px; border: 1px solid black; }
+dialog { outline: none; }
+</style>
+
+<div id=container class=box>
+This test passes if you can see “PASS” in a white box.
+<dialog id=dialog>PASS<div id=inner></div></dialog>
+</div>
+text
+
+<script>
+dialog.showModal();
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/contentvisibility-nestedslot-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/contentvisibility-nestedslot-crash.html
new file mode 100644
index 0000000000..fe6d79a694
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/contentvisibility-nestedslot-crash.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1208573">
+
+<div style="content-visibility:hidden">hidden</div>
+
+<div id=host>
+  <template shadowrootmode=open>
+    <div>nested slots:</div>
+    <slot name=parent>
+      <slot name=child></slot>
+    </slot>
+  </template>
+  <div slot=parent>lightdom slot=parent</div>
+  <div slot=child>lightdom slot=child</div>
+</div>
+
+<script>
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const div = document.createElement('div');
+      div.textContent = 'new lightdom child';
+      host.appendChild(div);
+
+      requestAnimationFrame(() => {
+        document.documentElement.classList.remove('test-wait');
+      });
+    });
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/crashtests/content-visibility-transition-finished-001.html b/testing/web-platform/tests/css/css-contain/content-visibility/crashtests/content-visibility-transition-finished-001.html
new file mode 100644
index 0000000000..ef7fb001ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/crashtests/content-visibility-transition-finished-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<meta charset="utf-8">
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1822907">
+<style>
+  #inner {
+    /* Extremely short so that we can just do a double-rAF and
+     * expect that this transition will have completed: */
+    transition: opacity 0.01s;
+  }
+</style>
+<script>
+  function setup() {
+    // Flush style, in case the document hasn't been styled yet:
+    let origOpacity = getComputedStyle(inner).opacity;
+
+    // Trigger the (extremely short) transition, and proceed to next step
+    // when it finishes.
+    inner.addEventListener("transitionend", handleTransitionEnd);
+    inner.style.opacity = "0.8";
+  }
+  function handleTransitionEnd(e) {
+    // Hide & unhide the subtree that contained the transition:
+    foo.style.contentVisibility = "hidden";
+    document.documentElement.offsetHeight; // flush layout
+    foo.style.contentVisibility = "";
+
+    // Double-rAF to see if we crash when animations are resampled.
+    requestAnimationFrame(() => { requestAnimationFrame(finish) });
+  }
+  function finish() {
+    // If we get here, we've succeeded; hooray!
+    document.documentElement.removeAttribute("class");
+  }
+</script>
+<body onload="setup()">
+  <div id="foo">
+    Hello
+    <div id="inner">Inner</div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/crashtests/first-line-and-inline-block.html b/testing/web-platform/tests/css/css-contain/content-visibility/crashtests/first-line-and-inline-block.html
new file mode 100644
index 0000000000..6d6c6605ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/crashtests/first-line-and-inline-block.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+div, span {
+  content-visibility: auto;
+  contain-intrinsic-width: auto 100vw;
+}
+div::first-line {
+  color: blue;
+}
+</style>
+<div>
+  <span style="display: inline-block">foo</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/detach-locked-slot-children-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/detach-locked-slot-children-crash.html
new file mode 100644
index 0000000000..409a9697b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/detach-locked-slot-children-crash.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html class="reftest-wait">
+<link rel="help" href="https://crbug.com/1284278">
+<body dir="auto">
+  <p>Pass if no crash.</p>
+  <details id="details">
+    <img id="img" alt="alt"></img>
+    <marquee id="marquee"></marquee>
+  </details>
+</body>
+<script>
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    marquee.appendChild(details.firstChild);
+    img.srcset = "dummy";
+    img.alt = "dummy";
+    document.documentElement.classList.remove("reftest-wait");
+  }));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/document-element-computed-style.html b/testing/web-platform/tests/css/css-contain/content-visibility/document-element-computed-style.html
new file mode 100644
index 0000000000..22d00d0584
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/document-element-computed-style.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html style="display:none">
+
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1251931">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div style="content-visibility:hidden"></div>
+
+<script>
+test(() => {
+  document.documentElement.offsetTop;
+  document.documentElement.style.display = "block";
+  assert_equals(getComputedStyle(document.documentElement).color, 'rgb(0, 0, 0)');
+}, `Verifies that ComputedStyle gets updated when the documentElement's style is dirtied in the presence of content-visibility.`);
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/dynamic-change-paint-fully-obscuring-child-001.html b/testing/web-platform/tests/css/css-contain/content-visibility/dynamic-change-paint-fully-obscuring-child-001.html
new file mode 100644
index 0000000000..781a11ca40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/dynamic-change-paint-fully-obscuring-child-001.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<title>content-visibility:hidden elements painting with a fully-obscuring child</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Google" href="http://www.google.com/">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1370776">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+
+div { width: 100px; height: 100px; }
+
+.small { height: 50px; }
+
+.hidden { content-visibility: hidden }
+
+.green { background: green; }
+.red { background: red; }
+
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<!--
+  This example shows the bug because the child would fully obscure the
+  parent if the parent were not content-visibility: hidden.
+
+  If the child has class="small", then the bug is not present.
+
+-->
+<div class="green">
+  <div class="red"></div>
+</div>
+
+<script>
+
+document.documentElement.addEventListener("TestRendered", function(event) {
+  for (let elt of document.querySelectorAll("body > div")) {
+    elt.classList.add("hidden");
+  }
+  document.documentElement.classList.remove("reftest-wait");
+});
+
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/element-reassigned-to-skipped-slot.html b/testing/web-platform/tests/css/css-contain/content-visibility/element-reassigned-to-skipped-slot.html
new file mode 100644
index 0000000000..d71ee9eef0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/element-reassigned-to-skipped-slot.html
@@ -0,0 +1,68 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: element reslotting</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="element is correctly removed when slot assignment takes it into a skipped slot">
+
+<script src="/common/reftest-wait.js"></script>
+
+<script>
+window.customElements.define("my-element", class extends HTMLElement {
+  connectedCallback() {
+      if (this.shadowRoot) {
+        this.computeEdges_();
+        return;
+      }
+
+      this.attachShadow({ mode: 'open' }).innerHTML = `
+        <style>
+          slot[name=locked] {
+            display: block;
+            content-visibility: hidden;
+          }
+        </style>
+        <slot name=unlocked></slot>
+        <slot name=locked></slot>
+      `;
+  }
+});
+</script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+
+div {
+  width: 50px;
+  height: 50px;
+}
+.composited { will-change: transform; }
+#one { background: pink; }
+#two { background: red; }
+</style>
+
+<div id=container>
+  <my-element>
+    <div id=one slot=unlocked>FAIL</div>
+    <div id=two slot=locked>FAIL</div>
+  </my-element>
+</div>
+
+<script>
+// Ensure everything is loaded and rendered.
+onload = () =>
+  requestAnimationFrame(() =>
+  requestAnimationFrame(() =>
+  requestAnimationFrame(() => {
+    // Reslot the element and composite the other one.
+    one.slot = "locked";
+    two.classList.add("composited");
+    requestAnimationFrame(takeScreenshot);
+})));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/element-reassigned-to-slot-in-skipped-subtree.html b/testing/web-platform/tests/css/css-contain/content-visibility/element-reassigned-to-slot-in-skipped-subtree.html
new file mode 100644
index 0000000000..df6b64d7bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/element-reassigned-to-slot-in-skipped-subtree.html
@@ -0,0 +1,70 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>CSS Content Visibility: element reslotting</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="container-ref.html">
+<meta name="assert" content="element is correctly removed when slot assignment takes it into a skipped slot">
+
+<script src="/common/reftest-wait.js"></script>
+
+<script>
+window.customElements.define("my-element", class extends HTMLElement {
+  connectedCallback() {
+      if (this.shadowRoot) {
+        this.computeEdges_();
+        return;
+      }
+
+      this.attachShadow({ mode: 'open' }).innerHTML = `
+        <style>
+          #locked {
+            display: block;
+            content-visibility: hidden;
+          }
+        </style>
+        <slot name=unlocked></slot>
+        <div id=locked>
+          <slot name=locked></slot>
+        </div>
+      `;
+  }
+});
+</script>
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+
+div {
+  width: 50px;
+  height: 50px;
+}
+.composited { will-change: transform; }
+#one { background: pink; }
+#two { background: red; }
+</style>
+
+<div id=container>
+  <my-element>
+    <div id=one slot=unlocked>FAIL</div>
+    <div id=two slot=locked>FAIL</div>
+  </my-element>
+</div>
+
+<script>
+// Ensure everything is loaded and rendered.
+onload = () =>
+  requestAnimationFrame(() =>
+  requestAnimationFrame(() =>
+  requestAnimationFrame(() => {
+    // Reslot the element and composite the other one.
+    one.slot = "locked";
+    two.classList.add("composited");
+    requestAnimationFrame(takeScreenshot);
+})));
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/hidden-execcommand-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/hidden-execcommand-crash.html
new file mode 100644
index 0000000000..67e297e652
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/hidden-execcommand-crash.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1280134">
+
+<html contenteditable=true>
+  X<div style="content-visibility:hidden">Y</div>Z
+<script>
+document.execCommand("selectall");
+document.execCommand("fontSize", false, 6);
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/hidden-pseudo-element-removed-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/hidden-pseudo-element-removed-crash.html
new file mode 100644
index 0000000000..62e38f214b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/hidden-pseudo-element-removed-crash.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<meta name="assert" content="Removing elements under hidden subtrees doesn't crash">
+
+<p id="parent"><q><svg><marker display="list-item"><hr><object id="inner">
+<style>
+q {
+  content-visibility: hidden;
+}
+</style>
+<script>
+  onload = () => {
+    document.getElementById("parent").hidden = true;
+    var test = document.getElementById("inner").border;
+    document.getElementById("parent").textContent = undefined;
+
+    requestAnimationFrame(() => document.documentElement.classList.remove('test-wait'));
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/inheritance.html b/testing/web-platform/tests/css/css-contain/content-visibility/inheritance.html
new file mode 100644
index 0000000000..e1ae8164de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/inheritance.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Content Visibility: content-visibility inheritance</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility does not inherit">
+<meta name="assert" content="content-visibility has initial value 'visible'">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script src="/css/support/inheritance-testcommon.js"></script>
+</head>
+<body>
+<div id="container">
+<div id="target"></div>
+</div>
+<script>
+assert_not_inherited("content-visibility", "visible", "auto");
+</script>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/inline-container-with-child-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/inline-container-with-child-ref.html
new file mode 100644
index 0000000000..0230dba853
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/inline-container-with-child-ref.html
@@ -0,0 +1,27 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: container with child and text (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+  display: inline;
+}
+#child {
+  width: 50px;
+  height: 50px;
+  background: green;
+}
+</style>
+
+<p>Test passes if you can see PASS and a green box below.
+<div id=container>
+  PASS
+  <div id=child></div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/meter-selection-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/meter-selection-crash.html
new file mode 100644
index 0000000000..9edca97568
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/meter-selection-crash.html
@@ -0,0 +1,21 @@
+<!doctype HTML>
+<link rel=author href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="meter, iframe, and selection API should not crash">
+
+<style>
+* {
+  all: initial;
+  content-visibility: hidden;
+}
+</style>
+
+<meter></meter><iframe id="frame"></iframe>
+<script>
+function runTest() {
+  var range_beadc = window.getSelection();
+  var elem1 = document.getElementById("frame");
+  range_beadc.setBaseAndExtent(elem1, 0, document.getElementById("none"), 0);
+}
+onload = runTest;
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/parsing/content-visibility-computed.html b/testing/web-platform/tests/css/css-contain/content-visibility/parsing/content-visibility-computed.html
new file mode 100644
index 0000000000..6e08deebea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/parsing/content-visibility-computed.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Content Visibility: content-visibility with computed values</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility supports the full grammar 'visible | auto | hidden'.">
+<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>
+<div id=scratch></div>
+<script>
+
+test_computed_value("content-visibility", "visible");
+test_computed_value("content-visibility", "auto");
+test_computed_value("content-visibility", "hidden");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/parsing/content-visibility-invalid.html b/testing/web-platform/tests/css/css-contain/content-visibility/parsing/content-visibility-invalid.html
new file mode 100644
index 0000000000..610e219e1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/parsing/content-visibility-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Content Visibility: content-visibility with invalid values</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility supports the full grammar 'visible | auto | hidden'.">
+<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("content-visibility", "visible auto");
+test_invalid_value("content-visibility", "foo-bar");
+test_invalid_value("content-visibility", "foo bar baz");
+test_invalid_value("content-visibility", "hidden visible");
+test_invalid_value("content-visibility", "invisible invisible invisible");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/parsing/content-visibility-valid.html b/testing/web-platform/tests/css/css-contain/content-visibility/parsing/content-visibility-valid.html
new file mode 100644
index 0000000000..a0525695de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/parsing/content-visibility-valid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Content Visibility Test: content-visibility with valid values</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<meta name="assert" content="content-visibility supports the full grammar 'visible | auto | hidden'.">
+<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("content-visibility", "visible");
+test_valid_value("content-visibility", "auto");
+test_valid_value("content-visibility", "hidden");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/positioned-container-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/positioned-container-ref.html
new file mode 100644
index 0000000000..2ea2c18b0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/positioned-container-ref.html
@@ -0,0 +1,22 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>CSS Content Visibility: positioned container (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+#container {
+  width: 150px;
+  height: 150px;
+  background: lightblue;
+}
+.positioned {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>
+
+<div id=container class=positioned></div>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/resources/circles.svg b/testing/web-platform/tests/css/css-contain/content-visibility/resources/circles.svg
new file mode 100644
index 0000000000..1a9ad7534d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/resources/circles.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="iso-8859-1" ?>
+<svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
+<rect x="0" y="0" width="500" height="300" fill="#fff" />
+
+<g stroke-width="10" transform="translate(-30)">
+    <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>
+    <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>
+    <circle cx="80" cy="120" r="35" fill="#004" stroke="none"/>
+    <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>
+    <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>
+    <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>
+    <circle cx="80" cy="260" r="35" fill="#008" stroke="none"/>
+    <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>
+</g>
+
+<g stroke-width="10" transform="translate(170)">
+    <circle cx="80" cy="50" r="35" fill="#085" stroke="none"/>
+    <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>
+    <circle cx="80" cy="120" r="35" fill="#005" stroke="none"/>
+    <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>
+    <circle cx="80" cy="190" r="35" fill="#689" stroke="none"/>
+    <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>
+    <circle cx="80" cy="260" r="35" fill="#609" stroke="none"/>
+    <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>
+</g>
+
+<g stroke-width="10" transform="translate(370)">
+    <circle cx="80" cy="50" r="35" fill="#084" stroke="none"/>
+    <circle cx="80" cy="50" r="20" fill="#080" stroke="#FF0"/>
+    <circle cx="80" cy="120" r="35" fill="#084" stroke="none"/>
+    <circle cx="80" cy="120" r="20" fill="#080" stroke="#FF0"/>
+    <circle cx="80" cy="190" r="35" fill="#088" stroke="none"/>
+    <circle cx="80" cy="190" r="20" fill="#080" stroke="#FF0"/>
+    <circle cx="80" cy="260" r="35" fill="#088" stroke="none"/>
+    <circle cx="80" cy="260" r="20" fill="#080" stroke="#FF0"/>
+</g>
+</svg>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/resources/dice.png b/testing/web-platform/tests/css/css-contain/content-visibility/resources/dice.png
new file mode 100644
index 0000000000..f18b814176
Binary files /dev/null and b/testing/web-platform/tests/css/css-contain/content-visibility/resources/dice.png differ
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/resources/frame.html b/testing/web-platform/tests/css/css-contain/content-visibility/resources/frame.html
new file mode 100644
index 0000000000..14f48b99a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/resources/frame.html
@@ -0,0 +1,8 @@
+<!doctype HTML>
+<style>
+div {
+  background: lightgreen;
+}
+</style>
+<div>dolor sit amet</div>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/resources/slot-content-visibility.html b/testing/web-platform/tests/css/css-contain/content-visibility/resources/slot-content-visibility.html
new file mode 100644
index 0000000000..f41c337965
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/resources/slot-content-visibility.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+
+>
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+  a
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/resources/text-fragment-target-auto.html b/testing/web-platform/tests/css/css-contain/content-visibility/resources/text-fragment-target-auto.html
new file mode 100644
index 0000000000..53a22f5fd8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/resources/text-fragment-target-auto.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<title>Text fragment navigation helper.</title>
+
+<script src="/scroll-to-text-fragment/stash.js"></script>
+<script>
+function isInView(element) {
+  let rect = element.getBoundingClientRect();
+  return rect.top >= 0 && rect.top <= window.innerHeight
+      && rect.left >= 0 && rect.left <= window.innerWidth;
+}
+function checkScroll() {
+  let position = 'unknown';
+  if (window.scrollY == 0)
+    position = 'top';
+  else if(isInView(document.getElementById("text")))
+    position = 'text';
+  else if(isInView(document.getElementById("text2")))
+    position = 'text2';
+  else if(isInView(document.getElementById("text3")))
+    position = 'text3';
+
+  const target = document.querySelector(":target");
+  let results = {
+    scrollPosition: position,
+    href: window.location.href,
+    target: target ? target.id : 'undefined'
+  };
+  let key = (new URL(document.location)).searchParams.get("key");
+  stashResultsThenClose(key, results);
+}
+function doubleRafCheckScroll() {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      checkScroll();
+    });
+  });
+}
+</script>
+
+<style>
+.spacer {
+  height: 10000px;
+}
+.auto {
+  content-visibility: auto;
+}
+</style>
+
+<body onload="doubleRafCheckScroll()">
+<div class=spacer></div>
+<div class=auto>
+  <div id=text>hiddentext</div>
+</div>
+<div class=spacer></div>
+<div id=text2and3ancestor>
+  <div class=auto>
+    <div id=text2>start</div>
+  </div>
+  <div class=spacer></div>
+  <div class=auto>
+    <div id=text3>end</div>
+  </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-target-with-contents-hidden-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-target-with-contents-hidden-ref.html
new file mode 100644
index 0000000000..1b554d7468
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-target-with-contents-hidden-ref.html
@@ -0,0 +1,34 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: scrollIntoView should scroll when target has content-visibility: hidden</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#target {
+  width: 150px;
+  height: 150px;
+  background: lightgreen;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="target"></div>
+
+<script>
+function runTest() {
+  document.getElementById("target").scrollIntoView();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => { requestAnimationFrame(runTest); };
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-target-with-contents-hidden.html b/testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-target-with-contents-hidden.html
new file mode 100644
index 0000000000..42c8e43c8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-target-with-contents-hidden.html
@@ -0,0 +1,37 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: scrollIntoView should scroll when target has content-visibility: hidden</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="scrollIntoView-target-with-contents-hidden-ref.html">
+<meta name="assert" content="scrollIntoView works properly when used on target with content-visibility: hidden">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#target {
+  width: 150px;
+  height: 150px;
+  background: lightgreen;
+  content-visibility: hidden;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="target">FAIL</div>
+
+<script>
+function runTest() {
+  document.getElementById("target").scrollIntoView();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => { requestAnimationFrame(runTest); };
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-with-focus-target-with-contents-hidden-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-with-focus-target-with-contents-hidden-ref.html
new file mode 100644
index 0000000000..8c45c7de51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-with-focus-target-with-contents-hidden-ref.html
@@ -0,0 +1,34 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: scrollIntoView should scroll when target has content-visibility: hidden</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#target {
+  width: 150px;
+  height: 150px;
+  background: lightgreen;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="target" tabindex="0"></div>
+
+<script>
+function runTest() {
+  document.getElementById("target").focus();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => { requestAnimationFrame(runTest); };
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-with-focus-target-with-contents-hidden.html b/testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-with-focus-target-with-contents-hidden.html
new file mode 100644
index 0000000000..454d1bafa7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/scrollIntoView-with-focus-target-with-contents-hidden.html
@@ -0,0 +1,37 @@
+<!doctype HTML>
+<html class="reftest-wait">
+<meta charset="utf8">
+<title>Content Visibility: scrollIntoView triggered by focus() should scroll when target has content-visibility: hidden</title>
+<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+<link rel="match" href="scrollIntoView-with-focus-target-with-contents-hidden-ref.html">
+<meta name="assert" content="scrollIntoView triggered by focus() works properly when used on target with content-visibility: hidden">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#target {
+  width: 150px;
+  height: 150px;
+  background: lightgreen;
+  content-visibility: hidden;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="target" tabindex="0">FAIL</div>
+
+<script>
+function runTest() {
+  document.getElementById("target").focus();
+  requestAnimationFrame(takeScreenshot);
+}
+
+window.onload = () => { requestAnimationFrame(runTest); };
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-1-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-1-crash.html
new file mode 100644
index 0000000000..da5e51c6d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-1-crash.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221036">
+
+>
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+  a
+<script type="text/javascript">
+document.execCommand("selectall");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-10-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-10-crash.html
new file mode 100644
index 0000000000..a8d86a3e7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-10-crash.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221036">
+
+>
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+  a
+<script type="text/javascript">
+  const range = new Range();
+  range.setStartBefore(document.body.firstChild);
+  range.setEndAfter(document.body.lastChild);
+  range.getBoundingClientRect();
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-11-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-11-crash.html
new file mode 100644
index 0000000000..bf64ac5c5b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-11-crash.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221036">
+
+>
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+  <div style="content-visibility: hidden">a</div>
+<script type="text/javascript">
+  const range = new Range();
+  range.setStartBefore(document.body.firstChild);
+  range.setEndAfter(document.body.lastChild);
+  range.getBoundingClientRect();
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-12-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-12-crash.html
new file mode 100644
index 0000000000..51bdfd3f62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-12-crash.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221036">
+
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+  a
+</div>
+<iframe src="resources/slot-content-visibility.html"></iframe>
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+  a
+</div>
+<iframe src="resources/slot-content-visibility.html"></iframe>
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+  a
+</div>
+
+<script>
+  const range = new Range();
+  range.setStartBefore(document.body.firstChild);
+  range.setEndAfter(document.body.lastChild);
+  range.getBoundingClientRect();
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-13-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-13-crash.html
new file mode 100644
index 0000000000..3bbe97ce1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-13-crash.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1250391">
+
+<script>
+  function go() {
+    const range = document.createRange();
+    range.setEnd(document.querySelector('textarea'), 0);
+    document.querySelector('progress').getBoundingClientRect();
+    range.getBoundingClientRect();
+  }
+</script>
+
+<body onload='go()'>
+  <progress>
+    <textarea>hello</textarea>
+  </progress>
+  <div style="content-visibility:hidden"></div>
+</body>
+
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-14-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-14-crash.html
new file mode 100644
index 0000000000..8e2937312c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-14-crash.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1250772">
+
+<script>
+window.onload = () => {
+  window.getSelection().selectAllChildren(document.body);
+  id6.remove();
+};
+</script>
+
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility:hidden; display:block"></slot>
+  </template>
+  <div id='id6'>
+    <template shadowrootmode=open>
+      <slot></slot>
+    </template>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-15-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-15-crash.html
new file mode 100644
index 0000000000..d9b950a00c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-15-crash.html
@@ -0,0 +1,13 @@
+<script>
+window.onload = () => {
+  window.getSelection().addRange(document.createRange());
+  window.getSelection().modify('extend','right','paragraph')
+}
+</script>
+
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility:hidden; display:block"></slot>
+  </template>
+  <meter></meter>
+</div>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-16-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-16-crash.html
new file mode 100644
index 0000000000..74fdff2bf2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-16-crash.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1251931">
+
+<div>
+  <template shadowrootmode=open></template>
+  <span id="outside"></span>
+</div>
+<div style="content-visibility:hidden"></div>
+<script>
+  getComputedStyle(outside).color;
+  outside.style.color = "green";
+  getComputedStyle(outside).color;
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-17-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-17-crash.html
new file mode 100644
index 0000000000..64e9550e11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-17-crash.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1251931">
+
+<style>
+  .a + .b { color: green }
+</style>
+<div id="host">
+  <div>
+    <div>
+      <div id="a"></div><div id="b" class="b"></div>
+    </div>
+  </div>
+</div>
+<div style="content-visibility:hidden"></div>
+<script>
+  host.attachShadow({mode:"open"});
+  document.body.offsetTop;
+  a.className = "a";
+  getComputedStyle(b).color;
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-18-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-18-crash.html
new file mode 100644
index 0000000000..0860c37e49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-18-crash.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1267276">
+
+<table>foo</table>
+<details open=true>
+  <dialog open=true>
+    <table>
+      <tr></tr>
+    </table>
+  </dialog>
+</details>
+
+<script>
+  const dialog = document.querySelector('dialog');
+  dialog.close();
+  dialog.showModal();
+  const cell = document.querySelector('tr').insertCell();
+  document.querySelector('details').appendChild(cell);
+  document.body.attachShadow({mode: 'closed'});
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-19-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-19-crash.html
new file mode 100644
index 0000000000..33b9f39b5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-19-crash.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1266891">
+
+<details id=details open="true">hello world</details>
+
+<script>
+  document.execCommand("selectAll");
+  details.open = false;
+  document.execCommand(false);
+  document.body.attachShadow({mode: 'open'});
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-2-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-2-crash.html
new file mode 100644
index 0000000000..c4d0c804a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-2-crash.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221821">
+
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+<link rel=stylesheet href="/fonts/ahem.css">
+<span style="columns: 1 46px">
+<style>
+* {}
+</style>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-20-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-20-crash.html
new file mode 100644
index 0000000000..a128f6a59d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-20-crash.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1268837">
+
+<style>
+summary {
+  margin: 1px 1px 1px -1px;
+}
+* {
+  max-height: 0vh;
+}
+</style>
+
+<script>
+function jsfuzzer() {
+  document.documentElement.appendChild(document.querySelector('details'));
+  document.execCommand("selectAll");
+  document.querySelector('li').replaceChild(
+    document.querySelector('q'),
+    document.querySelector('div'));
+  document.caretRangeFromPoint(127,487);
+}
+</script>
+
+<body onload=jsfuzzer()>
+
+<li>
+  <div></div>
+  <details>
+    <summary></summary>
+    <q></q>
+  </details>
+</li>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-21-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-21-crash.html
new file mode 100644
index 0000000000..196f0b4a90
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-21-crash.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1269743">
+
+<script>
+  const selection = window.getSelection();
+  document.execCommand("SelectAll");
+  document.documentElement.innerHTML = '<map><rt></rt><b></b></map><article>foo</article><details></details>';
+  const range = selection.getRangeAt(0);
+  const details = document.querySelector('details');
+  range.insertNode(details)
+  selection.modify('extend', 'forward', 'paragraph')
+  selection.collapseToEnd()
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-22-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-22-crash.html
new file mode 100644
index 0000000000..c8b4935ef6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-22-crash.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1318401">
+<details>
+  <details style="column-count:5" open>
+    <select size="2">
+      <option selected>text</option>
+    </select>
+  </details>
+</details>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-3-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-3-crash.html
new file mode 100644
index 0000000000..8ae5872862
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-3-crash.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221821">
+
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+<span autofocus>
+<link rel=stylesheet href="/fonts/ahem.css">
+<body hidden>
+<span style="columns: 4294967236 46px; ">
+<style>
+* {}
+</style>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-4-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-4-crash.html
new file mode 100644
index 0000000000..d3816a5e94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-4-crash.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221767">
+
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+a
+<meter>a
+<script>
+document.execCommand("selectall");
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-5-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-5-crash.html
new file mode 100644
index 0000000000..2d3a9865af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-5-crash.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221121">
+
+<style>
+</style>
+<style>
+</style>
+<style>
+</style>
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+<embed id="I7" class= accesskey="h">
+<meter class="C8">a
+<script>
+  document.head.appendChild(document.createElement("style"));
+  const styleSheet = document.styleSheets[document.styleSheets.length - 1];
+  styleSheet.insertRule(":root{}");
+  const styleSheet0 = document.styleSheets[0];
+  const test2 = document.getElementById("I7");
+  test2.className += "fuzzClass5";
+  styleSheet0.insertRule('.C8 {}');
+  try {
+    test2.style.setProperty();
+  } catch(e) {}
+  document.styleSheets[3].disabled = true;
+  test2.style['border-right-color-value'] = '';
+  styleSheet0.insertRule('.foo { color: blue }', styleSheet0.cssRules.length);
+  document.execCommand("false");
+  document.designMode = "on";
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-6-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-6-crash.html
new file mode 100644
index 0000000000..077a47d3f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-6-crash.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221890">
+
+<a autofocus="autofocus">
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+</a>
+<svg>
+<clipPath id="svgvar00002">
+</div>
+<svg clip-path="url(#svgvar00002)">
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-7-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-7-crash.html
new file mode 100644
index 0000000000..e206bdf43b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-7-crash.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221508">
+
+<script>
+function showmodal() {
+ dialog.showModal();
+}
+</script>
+
+<body onload=showmodal()>
+  <div>
+    <template shadowrootmode=open>
+      <slot style="content-visibility: hidden; display:block"></slot>
+    </template>
+    <dialog id=dialog></dialog>
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-8-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-8-crash.html
new file mode 100644
index 0000000000..eb6acc8526
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-8-crash.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1222408">
+
+<div id=details>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+</div>
+
+<div id="clear-left">
+<div>X</div>
+<script>
+document.head.appendChild(document.createElement("style"));
+var styleSheet = document.styleSheets[document.styleSheets.length-1];
+styleSheet.insertRule(":root{}"); styleSheet.disabled=false;
+var styleSheet0 = document.styleSheets[0];
+var test0=document.getElementById("clear-left");
+var test5=test0.appendChild(details);
+var test6=test5.appendChild(document.createElement("figure"));
+var test7=test5.appendChild(document.createElement("cite"));
+requestAnimationFrame(function() {
+  styleSheet0.insertRule('p:checked, #clear-left:before {-ms-transform:perspective(45in) rotateX(90deg); -ms-flex-wrap:wrap; }',styleSheet0.cssRules.length);
+  document.execCommand(null);
+  styleSheet0.insertRule('hgroup:link, #clear-left:link {-webkit-animation-name:test; padding-bottom:$grid-padding; }',styleSheet0.cssRules.length);
+  test6.style.setProperty('font-Weight','bold');
+});
+window.scrollTo();
+test7.style.transform = 'scale(1)';
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-9-crash.html b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-9-crash.html
new file mode 100644
index 0000000000..74e214dc1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/slot-content-visibility-9-crash.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1221036">
+
+>
+<div>
+  <template shadowrootmode=open>
+    <slot style="content-visibility: hidden; display: block"></slot>
+  </template>
+  a
+<script type="text/javascript">
+  const range = new Range();
+  range.setStartBefore(document.body.firstChild);
+  range.setEndAfter(document.body.lastChild);
+  range.getClientRects();
+</script>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/spacer-and-container-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/spacer-and-container-ref.html
new file mode 100644
index 0000000000..a2d5f14471
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/spacer-and-container-ref.html
@@ -0,0 +1,23 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: spacer and a container (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+.spacer {
+  width: 150px;
+  height: 3000px;
+  background: lightblue;
+}
+#container {
+  contain: style layout;
+  width: 150px;
+  height: 150px;
+}
+</style>
+
+<div class="spacer">Test passes if there is no red.</div>
+<div id="container"></div>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/spacer-and-container-scrolled-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/spacer-and-container-scrolled-ref.html
new file mode 100644
index 0000000000..a3f8079595
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/spacer-and-container-scrolled-ref.html
@@ -0,0 +1,27 @@
+<!doctype HTML>
+<html>
+<meta charset="utf8">
+<title>Content Visibility: spacer and a container, scrolled to container (reference)</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility">
+
+<style>
+.spacer {
+  width: 150px;
+  height: 300vh;
+  background: lightblue;
+}
+#container {
+  width: 150px;
+  height: 150px;
+  background: green;
+}
+</style>
+
+<div class="spacer"></div>
+<div id="container">Test passes if this is on screen.</div>
+
+<script>
+onload = () => container.scrollIntoView();
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-contain/content-visibility/spacer-with-top-layer-ref.html b/testing/web-platform/tests/css/css-contain/content-visibility/spacer-with-top-layer-ref.html
new file mode 100644
index 0000000000..e274b0fcaa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/content-visibility/spacer-with-top-layer-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf8">
+<title>CSS Content Visibility: dialog shows under c-v auto (ref)</title>
+
+<style>
+.box { width: 100px; height: 100px; border: 1px solid black; }
+.spacer { width: 10px; height: 3000px; background: lightblue; }
+</style>
+
+<div class=spacer></div>
+<div id=container class=box>
+content
+<dialog id=dialog>PASS<div id=inner></div></dialog>
+</div>
+
+<script>
+dialog.showModal();
+</script>
-- 
cgit v1.2.3