From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../3d-transform-incoming-ref.html                 |  28 ++++
 .../3d-transform-incoming.html                     |  63 ++++++++
 .../3d-transform-outgoing-ref.html                 |  20 +++
 .../3d-transform-outgoing.html                     |  64 ++++++++
 .../css/css-view-transitions/WEB_FEATURES.yml      |   3 +
 .../animating-new-content-ref.html                 |  28 ++++
 .../animating-new-content-subset-ref.html          |  28 ++++
 .../animating-new-content-subset.html              |  80 ++++++++++
 .../animating-new-content.html                     |  75 +++++++++
 .../backdrop-filter-animated-ref.html              |  22 +++
 .../backdrop-filter-animated.html                  |  54 +++++++
 .../backdrop-filter-captured-ref.html              |  22 +++
 .../backdrop-filter-captured.html                  |  39 +++++
 .../block-with-overflowing-text-ref.html           |  21 +++
 .../block-with-overflowing-text.html               |  60 ++++++++
 .../break-inside-avoid-child-ref.html              |  26 ++++
 .../break-inside-avoid-child.html                  |  63 ++++++++
 .../capture-with-offscreen-child-ref.html          |  18 +++
 ...apture-with-offscreen-child-translated-ref.html |  29 ++++
 .../capture-with-offscreen-child-translated.html   |  51 ++++++
 .../capture-with-offscreen-child.html              |  47 ++++++
 .../capture-with-opacity-zero-child.html           |  45 ++++++
 .../capture-with-visibility-hidden-child-ref.html  |  26 ++++
 .../capture-with-visibility-hidden-child.html      |  44 ++++++
 ...ture-with-visibility-mixed-descendants-ref.html |  37 +++++
 .../capture-with-visibility-mixed-descendants.html |  56 +++++++
 .../class-specificity-ref.html                     |  17 ++
 .../css-view-transitions/class-specificity.html    |  54 +++++++
 .../content-object-fit-fill-ref.html               |  32 ++++
 .../content-object-fit-none-ref.html               |  22 +++
 .../content-smaller-than-box-size-ref.html         |  23 +++
 .../content-smaller-than-box-size.html             |  55 +++++++
 ...content-visibility-auto-shared-element-ref.html |  34 ++++
 .../content-visibility-auto-shared-element.html    |  81 ++++++++++
 ...with-child-with-transparent-background-ref.html |  64 ++++++++
 ...ent-with-child-with-transparent-background.html |  77 ++++++++++
 .../content-with-clip-ref.html                     |  31 ++++
 .../content-with-clip-root-ref.html                |  36 +++++
 .../content-with-clip-root.html                    |  79 ++++++++++
 .../css-view-transitions/content-with-clip.html    |  76 +++++++++
 .../content-with-inline-child-ref.html             |  32 ++++
 .../content-with-inline-child.html                 |  71 +++++++++
 .../content-with-object-view-box-ref.html          |  16 ++
 .../content-with-overflow-ref.html                 |  28 ++++
 .../content-with-overflow-zoomed-ref.html          |  33 ++++
 .../content-with-transform-new-image.html          |  59 +++++++
 .../content-with-transform-old-image.html          |  60 ++++++++
 .../content-with-transform-ref.html                |  24 +++
 .../content-with-transparent-background-ref.html   |  44 ++++++
 .../content-with-transparent-background.html       |  66 ++++++++
 .../css-tags-paint-order-ref.html                  |  33 ++++
 .../css-tags-paint-order-with-entry-ref.html       |  40 +++++
 .../css-tags-paint-order-with-entry.html           | 111 +++++++++++++
 .../css-view-transitions/css-tags-paint-order.html |  92 +++++++++++
 .../css-tags-shared-element-ref.html               |  28 ++++
 .../css-tags-shared-element.html                   |  79 ++++++++++
 .../dialog-in-rtl-iframe-ref.html                  |  19 +++
 .../css-view-transitions/dialog-in-rtl-iframe.html |  36 +++++
 .../dialog-in-top-layer-during-transition-new.html |  70 +++++++++
 .../dialog-in-top-layer-during-transition-old.html |  71 +++++++++
 .../dialog-in-top-layer-during-transition-ref.html |  28 ++++
 .../document-element-detached-crash.html           |  25 +++
 .../duplicate-tag-rejects-capture.html             |  48 ++++++
 .../duplicate-tag-rejects-start.html               |  50 ++++++
 .../element-is-grouping-during-animation-ref.html  |  23 +++
 .../element-is-grouping-during-animation.html      |  74 +++++++++
 ...element-stops-grouping-after-animation-ref.html |  32 ++++
 .../element-stops-grouping-after-animation.html    |  74 +++++++++
 .../element-with-overflow-ref.html                 |  41 +++++
 .../element-with-overflow.html                     |  70 +++++++++
 .../css-view-transitions/event-pseudo-name.html    |  70 +++++++++
 ...ransition-with-anonymous-layout-object-ref.html |  20 +++
 ...it-transition-with-anonymous-layout-object.html |  64 ++++++++
 .../css-view-transitions/far-away-capture-ref.html |  31 ++++
 .../css/css-view-transitions/far-away-capture.html |  84 ++++++++++
 .../css-view-transitions/fractional-box-new.html   |  35 +++++
 .../css-view-transitions/fractional-box-old.html   |  35 +++++
 .../css-view-transitions/fractional-box-ref.html   |  19 +++
 .../fractional-box-with-overflow-children-new.html |  52 +++++++
 .../fractional-box-with-overflow-children-old.html |  52 +++++++
 .../fractional-box-with-overflow-children-ref.html |  33 ++++
 .../fractional-box-with-shadow-new.html            |  36 +++++
 .../fractional-box-with-shadow-old.html            |  36 +++++
 .../fractional-box-with-shadow-ref.html            |  20 +++
 .../fractional-translation-from-position-ref.html  |  28 ++++
 .../fractional-translation-from-position.html      |  55 +++++++
 .../fractional-translation-from-transform-ref.html |  29 ++++
 .../fractional-translation-from-transform.html     |  57 +++++++
 .../fragmented-at-start-ignored-ref.html           |  34 ++++
 .../fragmented-at-start-ignored.html               |  58 +++++++
 .../fragmented-during-transition-skips-ref.html    |  32 ++++
 .../fragmented-during-transition-skips.html        |  64 ++++++++
 .../get-computed-style-crash.html                  |  16 ++
 .../group-animation-for-root-transition.html       |  47 ++++++
 .../hit-test-unpainted-element-from-point.html     |  79 ++++++++++
 .../hit-test-unpainted-element-ref.html            |  17 ++
 .../hit-test-unpainted-element.html                |  69 +++++++++
 .../hit-test-unrelated-element-ref.html            |  27 ++++
 .../hit-test-unrelated-element.html                |  80 ++++++++++
 .../iframe-new-has-scrollbar-ref.html              |  19 +++
 .../iframe-new-has-scrollbar.html                  |  39 +++++
 .../iframe-old-has-scrollbar-ref.html              |  19 +++
 .../iframe-old-has-scrollbar.html                  |  38 +++++
 ...iframe-transition-destroyed-document-crash.html |  27 ++++
 .../iframe-transition-ref.html                     |  22 +++
 .../iframe-transition.sub.html                     |  21 +++
 .../inline-child-with-filter-ref.html              |  29 ++++
 .../inline-child-with-filter.html                  |  54 +++++++
 .../inline-element-size-ref.html                   |  19 +++
 .../css-view-transitions/inline-element-size.html  |  35 +++++
 ...line-with-offset-from-containing-block-ref.html |  27 ++++
 .../inline-with-offset-from-containing-block.html  |  49 ++++++
 .../input-targets-root-while-render-blocked.html   | 105 +++++++++++++
 .../intrinsic-aspect-ratio-ref.html                |  31 ++++
 .../css/css-view-transitions/japanese-tag-ref.html |  25 +++
 .../css/css-view-transitions/japanese-tag.html     |  95 ++++++++++++
 .../list-style-position-style-change-crash.html    |  20 +++
 ...-on-top-of-viewport-partially-onscreen-new.html |  76 +++++++++
 ...-on-top-of-viewport-partially-onscreen-old.html |  76 +++++++++
 ...-on-top-of-viewport-partially-onscreen-ref.html |  38 +++++
 ...ssive-element-below-viewport-offscreen-new.html |  91 +++++++++++
 ...ssive-element-below-viewport-offscreen-old.html |  91 +++++++++++
 ...ssive-element-below-viewport-offscreen-ref.html |  46 ++++++
 ...ment-below-viewport-partially-onscreen-new.html |  74 +++++++++
 ...ment-below-viewport-partially-onscreen-old.html |  74 +++++++++
 ...ment-below-viewport-partially-onscreen-ref.html |  46 ++++++
 ...ive-element-left-of-viewport-offscreen-new.html |  96 ++++++++++++
 ...ive-element-left-of-viewport-offscreen-old.html |  96 ++++++++++++
 ...ive-element-left-of-viewport-offscreen-ref.html |  47 ++++++
 ...nt-left-of-viewport-partially-onscreen-new.html |  80 ++++++++++
 ...nt-left-of-viewport-partially-onscreen-old.html |  80 ++++++++++
 ...nt-left-of-viewport-partially-onscreen-ref.html |  53 +++++++
 ...e-element-on-top-of-viewport-offscreen-new.html |  92 +++++++++++
 ...e-element-on-top-of-viewport-offscreen-old.html |  92 +++++++++++
 ...e-element-on-top-of-viewport-offscreen-ref.html |  43 ++++++
 ...-on-top-of-viewport-partially-onscreen-new.html |  76 +++++++++
 ...-on-top-of-viewport-partially-onscreen-old.html |  76 +++++++++
 ...-on-top-of-viewport-partially-onscreen-ref.html |  49 ++++++
 ...nd-left-of-viewport-partially-onscreen-new.html |  80 ++++++++++
 ...nd-left-of-viewport-partially-onscreen-old.html |  80 ++++++++++
 ...nd-left-of-viewport-partially-onscreen-ref.html |  42 +++++
 ...ve-element-right-of-viewport-offscreen-new.html |  95 ++++++++++++
 ...ve-element-right-of-viewport-offscreen-old.html |  95 ++++++++++++
 ...ve-element-right-of-viewport-offscreen-ref.html |  50 ++++++
 ...t-right-of-viewport-partially-onscreen-new.html |  78 ++++++++++
 ...t-right-of-viewport-partially-onscreen-old.html |  78 ++++++++++
 ...t-right-of-viewport-partially-onscreen-ref.html |  50 ++++++
 .../mix-blend-mode-only-on-transition.html         |  67 ++++++++
 .../modify-style-via-cssom-ref.html                |  16 ++
 .../modify-style-via-cssom.html                    |  53 +++++++
 ...h-overflowing-text-and-box-decorations-ref.html |  28 ++++
 ...-with-overflowing-text-and-box-decorations.html |  67 ++++++++
 .../named-element-with-fix-pos-child-new.html      |  45 ++++++
 .../named-element-with-fix-pos-child-old.html      |  45 ++++++
 .../named-element-with-fix-pos-child-ref.html      |  25 +++
 .../new-and-old-sizes-match-ref.html               |  48 ++++++
 .../new-and-old-sizes-match.html                   |  50 ++++++
 .../new-content-captures-clip-path-ref.html        |  23 +++
 .../new-content-captures-clip-path.html            |  48 ++++++
 .../new-content-captures-different-size-ref.html   |  36 +++++
 .../new-content-captures-different-size.html       |  64 ++++++++
 .../new-content-captures-opacity-ref.html          |  24 +++
 .../new-content-captures-opacity.html              |  47 ++++++
 .../new-content-captures-positioned-spans-ref.html |  15 ++
 .../new-content-captures-positioned-spans.html     |  37 +++++
 .../new-content-captures-root-ref.html             |  20 +++
 .../new-content-captures-root.html                 |  53 +++++++
 .../new-content-captures-spans-ref.html            |  13 ++
 .../new-content-captures-spans.html                |  34 ++++
 .../new-content-changes-overflow-ref.html          |  27 ++++
 .../new-content-changes-overflow.html              |  53 +++++++
 .../new-content-container-writing-modes-ref.html   |  23 +++
 .../new-content-container-writing-modes.html       |  89 +++++++++++
 .../new-content-element-writing-modes-ref.html     |  24 +++
 .../new-content-element-writing-modes.html         |  91 +++++++++++
 .../new-content-from-root-display-none-ref.html    |  22 +++
 .../new-content-from-root-display-none.html        |  49 ++++++
 .../new-content-has-scrollbars-ref.html            |  27 ++++
 .../new-content-has-scrollbars.html                |  62 ++++++++
 .../new-content-intrinsic-aspect-ratio.html        |  67 ++++++++
 .../new-content-is-empty-div-ref.html              |  19 +++
 .../new-content-is-empty-div.html                  |  61 ++++++++
 .../new-content-is-inline-ref.html                 |  79 ++++++++++
 .../new-content-is-inline.html                     | 148 ++++++++++++++++++
 .../new-content-object-fit-fill.html               |  76 +++++++++
 .../new-content-object-fit-none.html               |  69 +++++++++
 .../new-content-object-view-box-clip-path-ref.html |  46 ++++++
 ...nt-object-view-box-clip-path-reference-ref.html |  57 +++++++
 ...ontent-object-view-box-clip-path-reference.html |  93 +++++++++++
 .../new-content-object-view-box-clip-path.html     |  82 ++++++++++
 ...ntent-object-view-box-overflow-clipped-ref.html |  38 +++++
 ...w-content-object-view-box-overflow-clipped.html |  67 ++++++++
 .../new-content-object-view-box-overflow-ref.html  |  38 +++++
 .../new-content-object-view-box-overflow.html      |  67 ++++++++
 .../new-content-scaling-ref.html                   |  21 +++
 .../css-view-transitions/new-content-scaling.html  |  63 ++++++++
 .../new-content-with-object-view-box.html          |  42 +++++
 .../new-content-with-overflow-zoomed.html          |  56 +++++++
 .../new-content-with-overflow.html                 |  51 ++++++
 .../new-element-on-start-ref.html                  |  19 +++
 .../css-view-transitions/new-element-on-start.html |  64 ++++++++
 .../new-root-vertical-writing-mode-ref.html        |  22 +++
 .../new-root-vertical-writing-mode.html            |  73 +++++++++
 .../no-crash-set-exception.html                    |  41 +++++
 ...no-crash-view-transition-in-massive-iframe.html |  22 +++
 .../no-css-animation-while-render-blocked.html     |  59 +++++++
 .../no-raf-while-render-blocked.html               |  48 ++++++
 .../css-view-transitions/no-root-capture-ref.html  |  28 ++++
 .../css/css-view-transitions/no-root-capture.html  |  54 +++++++
 .../css-view-transitions/nothing-captured-ref.html |  28 ++++
 .../css/css-view-transitions/nothing-captured.html |  47 ++++++
 .../object-view-box-new-image.html                 |  70 +++++++++
 .../object-view-box-old-image.html                 |  72 +++++++++
 .../css-view-transitions/object-view-box-ref.html  |  25 +++
 ...lement-modified-before-coming-onscreen-ref.html |  20 +++
 ...en-element-modified-before-coming-onscreen.html |  73 +++++++++
 .../old-content-captures-clip-path-ref.html        |  22 +++
 .../old-content-captures-clip-path.html            |  47 ++++++
 .../old-content-captures-different-size-ref.html   |  35 +++++
 .../old-content-captures-different-size.html       |  64 ++++++++
 .../old-content-captures-opacity-ref.html          |  24 +++
 .../old-content-captures-opacity.html              |  48 ++++++
 .../old-content-captures-root-ref.html             |  19 +++
 .../old-content-captures-root.html                 |  51 ++++++
 .../old-content-container-writing-modes-ref.html   |  24 +++
 .../old-content-container-writing-modes.html       |  94 +++++++++++
 .../old-content-element-writing-modes-ref.html     |  25 +++
 .../old-content-element-writing-modes.html         |  95 ++++++++++++
 .../old-content-has-scrollbars-ref.html            |  30 ++++
 .../old-content-has-scrollbars.html                |  60 ++++++++
 .../old-content-intrinsic-aspect-ratio.html        |  67 ++++++++
 .../old-content-is-empty-div-ref.html              |  19 +++
 .../old-content-is-empty-div.html                  |  60 ++++++++
 .../old-content-is-inline-ref.html                 |  77 ++++++++++
 .../old-content-is-inline.html                     | 148 ++++++++++++++++++
 .../old-content-object-fit-fill.html               |  76 +++++++++
 .../old-content-object-fit-none.html               |  69 +++++++++
 .../old-content-object-view-box-clip-path-ref.html |  46 ++++++
 ...nt-object-view-box-clip-path-reference-ref.html |  57 +++++++
 ...ontent-object-view-box-clip-path-reference.html |  94 +++++++++++
 .../old-content-object-view-box-clip-path.html     |  83 ++++++++++
 .../old-content-object-view-box-overflow-ref.html  |  38 +++++
 .../old-content-object-view-box-overflow.html      |  66 ++++++++
 .../old-content-with-object-view-box.html          |  42 +++++
 .../old-content-with-overflow-zoomed.html          |  56 +++++++
 .../old-content-with-overflow.html                 |  51 ++++++
 .../old-root-vertical-writing-mode-ref.html        |  24 +++
 .../old-root-vertical-writing-mode.html            |  76 +++++++++
 .../css/css-view-transitions/only-child-group.html | 117 ++++++++++++++
 .../only-child-image-pair.html                     |  50 ++++++
 .../css/css-view-transitions/only-child-new.html   | 171 +++++++++++++++++++++
 .../only-child-no-transition.html                  |  39 +++++
 .../css/css-view-transitions/only-child-old.html   | 171 +++++++++++++++++++++
 ...child-on-root-element-with-view-transition.html |  47 ++++++
 .../only-child-view-transition.html                |  34 ++++
 .../pseudo-elements-invalid-with-classes.html      |  32 ++++
 .../parsing/pseudo-elements-invalid.html           |  69 +++++++++
 .../pseudo-elements-valid-with-classes.html        |  33 ++++
 .../parsing/pseudo-elements-valid.html             |  32 ++++
 .../parsing/view-transition-class-computed.html    |  29 ++++
 .../parsing/view-transition-class-invalid.html     |  24 +++
 .../parsing/view-transition-class-valid.html       |  23 +++
 .../parsing/view-transition-name-computed.html     |  27 ++++
 .../parsing/view-transition-name-invalid.html      |  29 ++++
 .../parsing/view-transition-name-valid.html        |  21 +++
 .../paused-animation-at-end.html                   |  44 ++++++
 ...puted-style-stays-in-sync-with-new-element.html |  42 +++++
 .../pseudo-get-computed-style.html                 | 112 ++++++++++++++
 .../pseudo-rendering-invalidation-ref.html         |  31 ++++
 .../pseudo-rendering-invalidation.html             | 126 +++++++++++++++
 .../pseudo-with-classes-entry.html                 |  54 +++++++
 .../pseudo-with-classes-exit.html                  |  54 +++++++
 .../pseudo-with-classes-match-ident.html           |  41 +++++
 ...seudo-with-classes-match-multiple-wildcard.html |  41 +++++
 .../pseudo-with-classes-match-multiple.html        |  41 +++++
 .../pseudo-with-classes-match-wildard.html         |  41 +++++
 .../pseudo-with-classes-mismatch-ident.html        |  46 ++++++
 .../pseudo-with-classes-mismatch-partial.html      |  45 ++++++
 .../pseudo-with-classes-mismatch-wildcard.html     |  46 ++++++
 .../pseudo-with-classes-multiple-vt-classes.html   |  41 +++++
 ...do-with-classes-new-with-class-old-without.html |  46 ++++++
 ...do-with-classes-old-with-class-new-without.html |  51 ++++++
 .../pseudo-with-classes-ref.html                   |  15 ++
 .../pseudo-with-classes-view-transition-group.html |  37 +++++
 ...do-with-classes-view-transition-image-pair.html |  37 +++++
 .../ready_resolves_after_dom_before_raf.html       |  51 ++++++
 .../root-captured-as-different-tag-ref.html        |  19 +++
 .../root-captured-as-different-tag.html            |  56 +++++++
 .../root-element-cv-hidden-crash.html              |  11 ++
 .../root-element-display-none-crash.html           |  23 +++
 ...ement-display-none-during-transition-crash.html |  30 ++++
 .../root-scrollbar-with-fixed-background-ref.html  |  33 ++++
 .../root-scrollbar-with-fixed-background.html      |  67 ++++++++
 .../root-style-change-during-animation-ref.html    |  20 +++
 .../root-style-change-during-animation.html        |  65 ++++++++
 .../root-to-shared-animation-end-ref.html          |  26 ++++
 .../root-to-shared-animation-end.html              |  53 +++++++
 .../root-to-shared-animation-incoming-ref.html     |  13 ++
 .../root-to-shared-animation-incoming.html         |  44 ++++++
 .../root-to-shared-animation-start-ref.html        |  21 +++
 .../root-to-shared-animation-start.html            |  44 ++++++
 .../rotated-cat-off-top-edge-ref.html              |  16 ++
 .../rotated-cat-off-top-edge.html                  |  32 ++++
 .../rtl-with-scrollbar-ref.html                    |  40 +++++
 .../css-view-transitions/rtl-with-scrollbar.html   |  72 +++++++++
 .../scroller-child-abspos-ref.html                 |  39 +++++
 .../scroller-child-abspos.html                     |  62 ++++++++
 .../css-view-transitions/scroller-child-ref.html   |  37 +++++
 .../css/css-view-transitions/scroller-child.html   |  60 ++++++++
 .../css/css-view-transitions/scroller-ref.html     |  30 ++++
 .../tests/css/css-view-transitions/scroller.html   |  53 +++++++
 .../css-view-transitions/set-current-time-ref.html |  14 ++
 .../set-current-time-transform-ref.html            |  39 +++++
 .../set-current-time-transform.html                |  62 ++++++++
 .../css/css-view-transitions/set-current-time.html |  49 ++++++
 .../set-universal-specificity-ref.html             |  17 ++
 .../set-universal-specificity.html                 |  45 ++++++
 .../shared-transition-author-style.manual.html     |  94 +++++++++++
 .../shared-transition-half.manual.html             |  60 ++++++++
 .../shared-transition-shapes.manual.html           |  80 ++++++++++
 .../snapshot-containing-block-absolute-ref.html    |  51 ++++++
 .../snapshot-containing-block-absolute.html        |  72 +++++++++
 ...aining-block-includes-scrollbar-gutter-ref.html |  34 ++++
 ...containing-block-includes-scrollbar-gutter.html |  48 ++++++
 .../snapshot-containing-block-static-ref.html      |  37 +++++
 .../snapshot-containing-block-static.html          |  66 ++++++++
 ...h-overflowing-text-and-box-decorations-ref.html |  20 +++
 ...-with-overflowing-text-and-box-decorations.html |  59 +++++++
 .../span-with-overflowing-text-hidden-ref.html     |  23 +++
 .../span-with-overflowing-text-hidden.html         |  61 ++++++++
 .../span-with-overflowing-text-ref.html            |  18 +++
 .../span-with-overflowing-text.html                |  57 +++++++
 .../css-view-transitions/style-inheritance.html    |  56 +++++++
 .../tests/css/css-view-transitions/support/cat.png | Bin 0 -> 1883 bytes
 .../support/dialog-in-rtl-iframe-child.html        |  49 ++++++
 .../css-view-transitions/support/frame-helper.html |  25 +++
 .../support/iframe-scrollbar-child.html            |  44 ++++++
 .../support/transition-in-empty-iframe-child.html  |  45 ++++++
 .../synchronous-callback-skipped-before-run.html   |  37 +++++
 ...transform-origin-view-transition-group-ref.html |  20 +++
 .../transform-origin-view-transition-group.html    |  58 +++++++
 .../transition-in-empty-iframe-ref.html            |  28 ++++
 .../transition-in-empty-iframe.html                |  47 ++++++
 ...transition-skipped-after-animation-started.html |  37 +++++
 .../transition-skipped-from-invalid-callback.html  |  46 ++++++
 .../unset-and-initial-view-transition-name.html    |  50 ++++++
 ...ransition-name-is-backdrop-filter-root-ref.html |  37 +++++
 ...ew-transition-name-is-backdrop-filter-root.html |  37 +++++
 .../view-transition-name-is-grouping-ref.html      |  22 +++
 .../view-transition-name-is-grouping.html          |  35 +++++
 .../view-transition-name-on-document-root-ref.html |  51 ++++++
 .../view-transition-name-on-document-root.html     |  44 ++++++
 .../view-transition-name-on-removed-element.html   |  36 +++++
 ...transition-name-removed-mid-transition-ref.html |  32 ++++
 ...iew-transition-name-removed-mid-transition.html |  50 ++++++
 .../web-animation-pseudo-incorrect-name.html       |  39 +++++
 .../web-animations-api-ref.html                    |  26 ++++
 .../css-view-transitions/web-animations-api.html   |  58 +++++++
 ...ndow-resize-aborts-transition-before-ready.html |  60 ++++++++
 .../window-resize-aborts-transition.html           |  76 +++++++++
 .../writing-mode-container-resize-ref.html         |  24 +++
 .../writing-mode-container-resize.html             |  52 +++++++
 362 files changed, 17600 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/WEB_FEATURES.yml
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/animating-new-content-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/animating-new-content-subset-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/animating-new-content-subset.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/animating-new-content.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/backdrop-filter-animated-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/backdrop-filter-animated.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/backdrop-filter-captured-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/backdrop-filter-captured.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child-translated-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child-translated.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/capture-with-opacity-zero-child.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-hidden-child-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-hidden-child.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/class-specificity-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/class-specificity.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-object-fit-fill-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-object-fit-none-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-clip-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-clip-root-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-clip-root.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-clip.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-inline-child-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-inline-child.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-object-view-box-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-overflow-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-overflow-zoomed-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-transform-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/document-element-detached-crash.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/duplicate-tag-rejects-capture.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/duplicate-tag-rejects-start.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/element-is-grouping-during-animation-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/element-is-grouping-during-animation.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/element-stops-grouping-after-animation-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/element-stops-grouping-after-animation.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/element-with-overflow-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/element-with-overflow.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/exit-transition-with-anonymous-layout-object-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/exit-transition-with-anonymous-layout-object.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/far-away-capture-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/far-away-capture.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fractional-box-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fractional-box-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fractional-box-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fractional-box-with-shadow-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fractional-box-with-shadow-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fractional-box-with-shadow-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-position-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-position.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-transform-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-transform.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fragmented-at-start-ignored-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fragmented-at-start-ignored.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fragmented-during-transition-skips-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/fragmented-during-transition-skips.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/get-computed-style-crash.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/group-animation-for-root-transition.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-from-point.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/iframe-transition-destroyed-document-crash.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/iframe-transition-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/inline-child-with-filter-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/inline-child-with-filter.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/inline-element-size-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/inline-element-size.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/input-targets-root-while-render-blocked.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/intrinsic-aspect-ratio-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/japanese-tag-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/japanese-tag.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/list-style-position-style-change-crash.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/mix-blend-mode-only-on-transition.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-captures-root-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-captures-root.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-intrinsic-aspect-ratio.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-is-inline-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-is-inline.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-none.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-scaling-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-with-object-view-box.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow-zoomed.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-element-on-start-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-element-on-start.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/no-crash-set-exception.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/no-crash-view-transition-in-massive-iframe.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/no-css-animation-while-render-blocked.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/no-raf-while-render-blocked.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/no-root-capture-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/no-root-capture.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/nothing-captured-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/nothing-captured.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/object-view-box-new-image.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/object-view-box-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-captures-root-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-intrinsic-aspect-ratio.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-is-inline-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-is-inline.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-none.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-with-object-view-box.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow-zoomed.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/only-child-group.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/only-child-image-pair.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/only-child-new.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/only-child-no-transition.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/only-child-old.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/only-child-on-root-element-with-view-transition.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/only-child-view-transition.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-invalid-with-classes.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-valid-with-classes.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-valid.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-class-computed.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-class-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-class-valid.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-name-computed.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-name-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-name-valid.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/paused-animation-at-end.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-computed-style-stays-in-sync-with-new-element.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-get-computed-style.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-entry.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-exit.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-ident.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-multiple-wildcard.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-multiple.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildard.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-mismatch-ident.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-mismatch-partial.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-mismatch-wildcard.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-multiple-vt-classes.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-new-with-class-old-without.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-old-with-class-new-without.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-view-transition-group.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-view-transition-image-pair.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/ready_resolves_after_dom_before_raf.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-element-cv-hidden-crash.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-element-display-none-crash.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/scroller-child-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/scroller-child.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/scroller-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/scroller.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/set-current-time-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/set-current-time-transform-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/set-current-time-transform.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/set-current-time.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/set-universal-specificity-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/set-universal-specificity.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/shared-transition-author-style.manual.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/shared-transition-half.manual.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/shared-transition-shapes.manual.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-hidden-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-hidden.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/style-inheritance.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/support/cat.png
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/support/dialog-in-rtl-iframe-child.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/support/frame-helper.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/support/iframe-scrollbar-child.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/support/transition-in-empty-iframe-child.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/synchronous-callback-skipped-before-run.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/transform-origin-view-transition-group-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/transform-origin-view-transition-group.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/transition-skipped-after-animation-started.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/transition-skipped-from-invalid-callback.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/unset-and-initial-view-transition-name.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-backdrop-filter-root-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-backdrop-filter-root.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-grouping-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-grouping.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-removed-element.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/web-animation-pseudo-incorrect-name.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/web-animations-api-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/web-animations-api.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition-before-ready.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/writing-mode-container-resize-ref.html
 create mode 100644 testing/web-platform/tests/css/css-view-transitions/writing-mode-container-resize.html

(limited to 'testing/web-platform/tests/css/css-view-transitions')

diff --git a/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming-ref.html b/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming-ref.html
new file mode 100644
index 0000000000..c690ee2b9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>View transitions: 3d transform ref</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+div { box-sizing: border-box; will-change: transform }
+.wrap_perspective {
+  perspective: 100px;
+  width: max-content;
+  transform: translate(200px);
+}
+.rotatex {
+  transform-style: preserve-3d;
+  transform: rotateX(20deg);
+  background: blue;
+}
+.shared {
+  width: 100px;
+  height: 100px;
+  view-transition-name: shared;
+}
+body { background: pink }
+
+</style>
+
+<div class="wrap_perspective"><div class="rotatex shared"></div></div>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html b/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html
new file mode 100644
index 0000000000..24ab886025
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: 3d transform</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="3d-transform-incoming-ref.html">
+<meta name=fuzzy content="3d-transform-incoming-ref.html:0-255;0-515">
+<script src="/common/reftest-wait.js"></script>
+<style>
+div { box-sizing: border-box; will-change: transform }
+.rotate3d {
+  transform: translate(20px, 100px) rotate3d(1, 1, 1, 45deg);
+  background: blue;
+}
+
+.wrap_perspective {
+  perspective: 100px;
+  width: max-content;
+  transform: translate(200px);
+}
+.rotatex {
+  transform-style: preserve-3d;
+  transform: rotateX(20deg);
+  background: green;
+}
+.shared {
+  view-transition-name: shared;
+  width: 100px;
+  height: 100px;
+}
+#hidden {
+  view-transition-name: hidden;
+  width: 10px;
+  height: 10px;
+  background: red;
+}
+
+::view-transition-group(hidden) { animation-duration: 300s; }
+::view-transition-image-pair(hidden) { visibility: hidden; }
+::view-transition-group(root) { visibility: hidden; }
+::view-transition { background: pink; }
+::view-transition-group(*) { animation-delay: 300s; }
+::view-transition-new(*) { animation: unset; opacity: 1; }
+::view-transition-old(*) { animation: unset; opacity: 0; }
+</style>
+
+<div id=wrapper class=wrap_perspective><div id=target class="shared rotatex"></div></div>
+<div id=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition(() => {
+    wrapper.classList.toggle("wrap_perspective");
+    target.classList.toggle("rotatex");
+    target.classList.toggle("rotate3d");
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing-ref.html b/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing-ref.html
new file mode 100644
index 0000000000..393943e396
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>View transitions: 3d transform ref</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+div { box-sizing: border-box; will-change: transform }
+.rotate3d {
+  transform: translate(20px, 100px) rotate3d(1, 1, 1, 45deg);
+  background: green;
+}
+.shared {
+  width: 100px;
+  height: 100px;
+}
+body { background: pink }
+
+</style>
+
+<div class="rotate3d shared"></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html b/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html
new file mode 100644
index 0000000000..746b93afd4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: 3d transform</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="3d-transform-outgoing-ref.html">
+<meta name=fuzzy content="3d-transform-outgoing-ref.html:0-255;0-1200">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div { box-sizing: border-box; will-change: transform }
+.rotate3d {
+  transform: translate(20px, 100px) rotate3d(1, 1, 1, 45deg);
+  background: blue;
+}
+
+.wrap_perspective {
+  perspective: 100px;
+  width: max-content;
+  transform: translate(200px);
+}
+.rotatex {
+  transform-style: preserve-3d;
+  transform: rotateX(20deg);
+  background: green;
+}
+.shared {
+  view-transition-name: shared;
+  width: 100px;
+  height: 100px;
+}
+#hidden {
+  view-transition-name: hidden;
+  width: 10px;
+  height: 10px;
+  background: red;
+}
+
+::view-transition-group(hidden) { animation-duration: 300s; }
+::view-transition-image-pair(hidden) { visibility: hidden; }
+::view-transition-group(root) { visibility: hidden; }
+::view-transition { background: pink; }
+::view-transition-group(*) { animation-duration: 0s; }
+::view-transition-new(*) { animation: unset; opacity: 0; }
+::view-transition-old(*) { animation: unset; opacity: 1; }
+</style>
+
+<div id=wrapper class=wrap_perspective><div id=target class="shared rotatex"></div></div>
+<div id=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition(() => {
+    wrapper.classList.toggle("wrap_perspective");
+    target.classList.toggle("rotatex");
+    target.classList.toggle("rotate3d");
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-view-transitions/WEB_FEATURES.yml
new file mode 100644
index 0000000000..e1df1b8c67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: view-transitions
+  files: "**"
diff --git a/testing/web-platform/tests/css/css-view-transitions/animating-new-content-ref.html b/testing/web-platform/tests/css/css-view-transitions/animating-new-content-ref.html
new file mode 100644
index 0000000000..eae9e2c471
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/animating-new-content-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: animations in the new element show up in the images (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+#target {
+  width:100px;
+  height:100px;
+  background: grey;
+  will-change: transform;
+}
+
+.child {
+  width: 50px;
+  height: 50px;
+  will-change: transform;
+  background: green;
+}
+</style>
+
+<div id="target">
+  <div class="child">
+    I'm the inner composited child.
+  </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/animating-new-content-subset-ref.html b/testing/web-platform/tests/css/css-view-transitions/animating-new-content-subset-ref.html
new file mode 100644
index 0000000000..eee7f19529
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/animating-new-content-subset-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: animations in the new element show up in the images if it partially changes (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+#target {
+  width:100px;
+  height:100px;
+  background: blue;
+  will-change: transform;
+}
+
+.child {
+  width: 50px;
+  height: 50px;
+  will-change: transform;
+  background: grey;
+}
+</style>
+
+<div id="target">
+  <div class="child">
+    I'm the inner composited child.
+  </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/animating-new-content-subset.html b/testing/web-platform/tests/css/css-view-transitions/animating-new-content-subset.html
new file mode 100644
index 0000000000..d5a342c572
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/animating-new-content-subset.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: animations in the new element show up in the images if it partially changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="animating-new-content-subset-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+#target {
+  width:100px;
+  height:100px;
+  background: blue;
+  view-transition-name: target;
+  will-change: transform;
+}
+
+.child {
+  width: 50px;
+  height: 50px;
+  will-change: transform;
+  background: green;
+}
+
+.hidden {
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; visibility: hidden;}
+
+html::view-transition-group(target) {
+  animation: unset;
+}
+
+html::view-transition-image-pair(target) {
+  isolation: unset;
+}
+html::view-transition-old(target), html::view-transition-new(target) {
+  animation: unset;
+  mix-blend-mode: normal;
+}
+
+html::view-transition-old(target) {
+  opacity: 0;
+}
+
+html::view-transition-new(target) {
+  opacity: 1;
+}
+</style>
+
+<div id="target">
+  <div class="child" id="child">
+    I'm the inner composited child.
+  </div>
+</div>
+<div class="hidden"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(async () => {
+    await waitForAtLeastOneFrame();
+    await waitForAtLeastOneFrame();
+    child.style.background = "grey";
+
+    await waitForAtLeastOneFrame();
+    await waitForAtLeastOneFrame();
+    takeScreenshot();
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/animating-new-content.html b/testing/web-platform/tests/css/css-view-transitions/animating-new-content.html
new file mode 100644
index 0000000000..9bfcb51a91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/animating-new-content.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: animations in the new element show up in the images</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="animating-new-content-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+#target {
+  width:100px;
+  height:100px;
+  background: blue;
+  view-transition-name: target;
+  will-change: transform;
+}
+
+.child {
+  width: 50px;
+  height: 50px;
+  will-change: transform;
+  background: green;
+}
+
+.hidden {
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(target) {
+  animation: unset;
+}
+
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+</style>
+
+<div id="target">
+  <div class="child">
+    I'm the inner composited child.
+  </div>
+</div>
+<div class="hidden"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(async () => {
+    await waitForAtLeastOneFrame();
+    await waitForAtLeastOneFrame();
+    target.style.background = "grey";
+
+    await waitForAtLeastOneFrame();
+    await waitForAtLeastOneFrame();
+    takeScreenshot();
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-animated-ref.html b/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-animated-ref.html
new file mode 100644
index 0000000000..d3f1dffacd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-animated-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>View transitions: capture with backdrop filter on the element (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+#target {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  backdrop-filter: grayscale(0.5);
+}
+</style>
+
+<div class=box></div>
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-animated.html b/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-animated.html
new file mode 100644
index 0000000000..3a5f0665b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-animated.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View transitions: captured backdrop filter on the element animates</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="backdrop-filter-animated-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+#target {
+  view-transition-name: target;
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  backdrop-filter: grayscale(1);
+}
+#target.after {
+  backdrop-filter: grayscale(0);
+}
+
+html::view-transition-group(*) {
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-play-state: paused;
+}
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+</style>
+<div class=box></div>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition(() => target.classList.add("after"));
+  transition.ready.then(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      document.getAnimations().forEach((animation) => {
+        animation.currentTime = 500;
+      });
+      requestAnimationFrame(takeScreenshot);
+    }));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-captured-ref.html b/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-captured-ref.html
new file mode 100644
index 0000000000..4defa6b90d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-captured-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>View transitions: capture with backdrop filter on the element (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+#target {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  backdrop-filter: grayscale(1);
+}
+</style>
+
+<div class=box></div>
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-captured.html b/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-captured.html
new file mode 100644
index 0000000000..d42a197a30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/backdrop-filter-captured.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View transitions: capture with backdrop filter on the element</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="backdrop-filter-captured-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+#target {
+  view-transition-name: target;
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  backdrop-filter: grayscale(1);
+}
+
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+</style>
+<div class=box></div>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text-ref.html b/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text-ref.html
new file mode 100644
index 0000000000..8d9c430fcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: block with overflowing text is rendered correctly (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+#target {
+  text-shadow: red -20px -50px;
+  position: relative;
+  top: 100px;
+  left: 100px;
+}
+
+body {
+  background: pink;
+}
+</style>
+
+<div id="target">This text should render correctly</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html b/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html
new file mode 100644
index 0000000000..b3f8f42cfd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/block-with-overflowing-text.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: block with overflowing text is rendered correctly</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="block-with-overflowing-text-ref.html">
+<meta name="fuzzy" content="block-with-overflowing-text-ref.html:maxDifference=0-2;totalPixels=0-1200">
+
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+#target {
+  text-shadow: red -20px -50px;
+  position: relative;
+  top: 100px;
+  left: 100px;
+  view-transition-name: target;
+}
+
+.hidden {
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { visibility: hidden; }
+
+html::view-transition-group(target) {
+  animation: unset;
+}
+
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+
+html::view-transition {
+  background: pink;
+}
+</style>
+
+<div id="target">This text should render correctly</div>
+<div class="hidden"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child-ref.html b/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child-ref.html
new file mode 100644
index 0000000000..859abdfb5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>View transitions: break-inside: avoid child (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+.columns {
+  columns: 2;
+  contain: layout;
+  border: 1px solid black;
+}
+
+.inner {
+  break-inside: avoid;
+  position: relative;
+  top: 300px;
+  left: 0;
+  background: lightblue;
+  width: 300px;
+  height: 300px;
+}
+</style>
+
+<div class="columns">
+  <div class="inner"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child.html b/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child.html
new file mode 100644
index 0000000000..7b2a83c776
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/break-inside-avoid-child.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: break-inside: avoid child</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="break-inside-avoid-child-ref.html">
+<meta name="fuzzy" content="break-inside-avoid-child-ref.html:0-5;0-1600">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.old {
+  position: relative;
+  top: 300px;
+  left: 0;
+  background: lightblue;
+}
+.new {
+  position: relative;
+  top: 0;
+  left: 0;
+  background: green;
+}
+.columns {
+  columns: 2;
+  contain: layout;
+  border: 1px solid black;
+  view-transition-name: target;
+}
+
+.inner {
+  break-inside: avoid;
+  width: 300px;
+  height: 300px;
+}
+
+html::view-transition-group(root) { animation-duration: 300s; }
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+}
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 0;
+}
+</style>
+
+<div class="columns">
+  <div id="inner" class="inner old"></div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  let transition = document.startViewTransition(() => {
+    inner.classList.replace("old", "new");
+  });
+  transition.ready.then(() => requestAnimationFrame(takeScreenshot));
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child-ref.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child-ref.html
new file mode 100644
index 0000000000..b8ebf1d0e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<title>View transitions: offscreen child (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+body {
+  background: pink;
+}
+.target {
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+</style>
+
+<div class=target></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child-translated-ref.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child-translated-ref.html
new file mode 100644
index 0000000000..d724d0b7f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child-translated-ref.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+<title>View transitions: offscreen child (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+body {
+  background: pink;
+}
+
+.invisible {
+  position: absolute;
+  top: 100px;
+  width: 50px;
+  height: 50px;
+  background: green;
+}
+.target {
+  position: relative;
+  top: 200px;
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+</style>
+
+<div class=target></div>
+<div class=invisible></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child-translated.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child-translated.html
new file mode 100644
index 0000000000..925bb8dbc4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child-translated.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html class=reftest-wait>
+<title>View transitions: offscreen child</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="capture-with-offscreen-child-translated-ref.html">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+  background: blue;
+}
+.invisible {
+  position: absolute;
+  top: -100px;
+  width: 50px;
+  height: 50px;
+  background: green;
+}
+
+::view-transition-group(target) {
+  animation: unset;
+  top: 200px;
+}
+
+::view-transition-group(root) {
+  visibility: hidden;
+  animation-duration: 500s;
+}
+::view-transition {
+  background: pink;
+}
+</style>
+
+<div class=target>
+  <div class=invisible></div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  const transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child.html
new file mode 100644
index 0000000000..8588968d8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-offscreen-child.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html class=reftest-wait>
+<title>View transitions: offscreen child</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="capture-with-offscreen-child-ref.html">
+<meta name="fuzzy" content="capture-with-offscreen-child-ref.html:0-5;0-200">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+  background: blue;
+}
+.invisible {
+  position: absolute;
+  top: -100px;
+  width: 50px;
+  height: 50px;
+  background: green;
+}
+
+::view-transition-group(root) {
+  visibility: hidden;
+  animation-duration: 500s;
+}
+::view-transition {
+  background: pink;
+}
+</style>
+
+<div class=target>
+  <div class=invisible></div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  const transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-opacity-zero-child.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-opacity-zero-child.html
new file mode 100644
index 0000000000..888d0d1720
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-opacity-zero-child.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html class=reftest-wait>
+<title>View transitions: visibility hidden child</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="capture-with-visibility-hidden-child-ref.html">
+<meta name="fuzzy" content="capture-with-visibility-hidden-child-ref.html:0-5;0-300">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+  background: blue;
+}
+.invisible {
+  width: 500px;
+  height: 500px;
+  opacity: 0;
+}
+
+::view-transition-group(root) {
+  visibility: hidden;
+  animation-duration: 500s;
+}
+::view-transition {
+  background: pink;
+}
+</style>
+
+<div class=target>
+  <div class=invisible></div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  const transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-hidden-child-ref.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-hidden-child-ref.html
new file mode 100644
index 0000000000..10067cc521
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-hidden-child-ref.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html>
+<title>View transitions: visibility hidden child (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+body {
+  background: pink;
+}
+.target {
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+  background: blue;
+}
+.invisible {
+  width: 500px;
+  height: 500px;
+  visibility: hidden;
+}
+</style>
+
+<div class=target>
+  <div class=invisible></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-hidden-child.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-hidden-child.html
new file mode 100644
index 0000000000..2d17612499
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-hidden-child.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html class=reftest-wait>
+<title>View transitions: visibility hidden child</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="capture-with-visibility-hidden-child-ref.html">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+  background: blue;
+}
+.invisible {
+  width: 500px;
+  height: 500px;
+  visibility: hidden;
+}
+
+::view-transition-group(root) {
+  visibility: hidden;
+  animation-duration: 500s;
+}
+::view-transition {
+  background: pink;
+}
+</style>
+
+<div class=target>
+  <div class=invisible></div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  const transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants-ref.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants-ref.html
new file mode 100644
index 0000000000..c47b31e4d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants-ref.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<title>View transitions: visibility hidden/visible descendants (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+body {
+  background: pink;
+}
+.target {
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+  background: blue;
+}
+.invisible {
+  top: 200px;
+  left: 200px;
+  width: 500px;
+  height: 500px;
+  position: relative;
+  background: red;
+  visibility: hidden;
+}
+.visible {
+  background: green;
+  width: 10px;
+  height: 10px;
+  visibility: visible;
+}
+
+</style>
+
+<div class=target>
+  <div class=invisible><div class=visible></div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html
new file mode 100644
index 0000000000..462d267b94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/capture-with-visibility-mixed-descendants.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html class=reftest-wait>
+<title>View transitions: visibility hidden/visible descendants</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="capture-with-visibility-mixed-descendants-ref.html">
+<meta name=fuzzy content="capture-with-visibility-mixed-descendants-ref.html:0-5;0-500">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+  background: blue;
+}
+.invisible {
+  top: 200px;
+  left: 200px;
+  width: 500px;
+  height: 500px;
+  position: relative;
+  background: red;
+  visibility: hidden;
+}
+.visible {
+  background: green;
+  width: 10px;
+  height: 10px;
+  visibility: visible;
+}
+
+::view-transition-group(root) {
+  visibility: hidden;
+  animation-duration: 500s;
+}
+::view-transition {
+  background: pink;
+}
+</style>
+
+<div class=target>
+  <div class=invisible><div class=visible></div></div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  const transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/class-specificity-ref.html b/testing/web-platform/tests/css/css-view-transitions/class-specificity-ref.html
new file mode 100644
index 0000000000..5c882ada04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/class-specificity-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>View transitions: class specificity (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+body {
+  background: pink;
+}
+div {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  background: blue;
+  border: 10px solid green;
+}
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/class-specificity.html b/testing/web-platform/tests/css/css-view-transitions/class-specificity.html
new file mode 100644
index 0000000000..55de2ec388
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/class-specificity.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: class specificity</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="class-specificity-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#shared {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: shared;
+  view-transition-class: sharedclass1 sharedclass2;
+}
+
+/* We're verifying what we capture, so just display the old contents for 5 minutes.  */
+html::view-transition { background: pink; }
+html::view-transition-group(shared) { animation-duration: 300s; }
+
+html::view-transition-old(shared) {
+  animation: unset;
+  opacity: 1;
+  border: 10px solid red;
+}
+html::view-transition-old(*.sharedclass1.sharedclass2) {
+  border: 10px solid yellow;
+}
+
+html::view-transition-old(*.sharedclass1) {
+  border: 10px solid green;
+}
+
+html::view-transition-old(*) {
+  border: 10px solid orange;
+}
+
+html::view-transition-new(shared) { animation: unset; opacity: 0; }
+
+html::view-transition-old(root) { animation: unset; opacity: 0; }
+html::view-transition-new(root) { animation: unset; opacity: 0 }
+</style>
+<div id=shared></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-object-fit-fill-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-object-fit-fill-ref.html
new file mode 100644
index 0000000000..b86e0a95a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-object-fit-fill-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>View transitions: display content in a pseudo with object-fit: none (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+#container {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  overflow: hidden;
+}
+#content {
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  transform-origin: top left;
+  transform: scale(0.5);
+}
+#inner {
+  width: 10px;
+  height: 10px;
+  background: green;
+  top: 5px;
+  left: 10px;
+}
+
+html { background: lightpink; }
+</style>
+
+<div id=container><div id=content><div id=inner></div></div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-object-fit-none-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-object-fit-none-ref.html
new file mode 100644
index 0000000000..8bd63e9a88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-object-fit-none-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>View transitions: display content in a pseudo with object-fit: none (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+#container {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+#content {
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+}
+
+html { background: lightpink; }
+</style>
+
+<div id=container><div id=content>This is text</div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size-ref.html
new file mode 100644
index 0000000000..381a311cc4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>View transitions: element with content less than box size (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+}
+#inner {
+  width: 10px;
+  height: 10px;
+  background: blue;
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+</style>
+
+<div id=target>
+  <div id=inner></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size.html b/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size.html
new file mode 100644
index 0000000000..d2b8f63ca0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-smaller-than-box-size.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: element with content less than box size</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="content-smaller-than-box-size-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+div { contain: paint; }
+#target {
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+}
+#inner {
+  width: 10px;
+  height: 10px;
+  background: blue;
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+
+.hidden {
+  background: pink;
+  width: 10px;
+  height: 10px;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div id=target>
+  <div id=inner></div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(takeScreenshot);
+  });
+}
+onload = () => requestAnimationFrame(runTest);
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element-ref.html
new file mode 100644
index 0000000000..f4a34967ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: offscreen content</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+body { background: pink }
+.flex {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.box {
+  width: 100px;
+  height: 500px;
+  contain: paint;
+  background: green;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+.vis-hidden {
+  visibility: hidden;
+}
+.cv-hidden {
+  content-visibility: hidden;
+}
+</style>
+
+<div class=flex>
+ <div class="box vis-hidden">ancestor c-v</div>
+ <div class="box cv-hidden">self c-v</div>
+ <div class="box cv-hidden">descendant c-v</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element.html b/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element.html
new file mode 100644
index 0000000000..11b4957fbc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-visibility-auto-shared-element.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: offscreen content with content-visibility auto</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="content-visibility-auto-shared-element-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+body {
+  overflow: hidden;
+}
+.flex {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.box {
+  width: 100px;
+  height: 500px;
+  contain: paint;
+}
+.shared {
+  background: green;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+.spacer {
+  height: 3000px;
+}
+#hidden {
+  width: 10px;
+  height: 10px;
+  background: red;
+  contain: paint;
+  view-transition-name: hidden;
+}
+.locked {
+  content-visibility: auto;
+  contain-intrinsic-size: 500px;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { visibility: hidden; }
+
+html::view-transition-group(*) { animation-duration: 0s; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+html::view-transition-group(root) { display: none; }
+html::view-transition { background: pink }
+
+</style>
+
+<div class=flex>
+ <div id=dst1 class=box></div>
+ <div id=dst2 class=box></div>
+ <div id=dst3 class=box></div>
+</div>
+<div id=hidden></div>
+<div class=spacer></div>
+<div id=content>
+ <div id=lockme><div id=src1 class="box shared" style="view-transition-name: one">ancestor c-v</div></div>
+ <div id=src2 class="box shared locked" style="view-transition-name: two">self c-v</div>
+ <div id=src3 class="box shared" style="view-transition-name: three"><div class=locked>descendant c-v</div></div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  lockme.classList.add("locked");
+  document.startViewTransition(() => {
+    content.remove();
+    dst1.style = "view-transition-name: one";
+    dst2.style = "view-transition-name: two";
+    dst3.style = "view-transition-name: three";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background-ref.html
new file mode 100644
index 0000000000..7b8c15b87f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: element with child with transparent background (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.shared {
+  width: 50px;
+  height: 50px;
+  background: grey;
+  position: fixed;
+  top: 25px;
+  left: 25px;
+  view-transition-name: target;
+}
+.target {
+  width: 100px;
+  height: 100px;
+  background: rgba(0,0,0,0);
+  will-change: opacity;
+  position: relative;
+  top: 50px;
+  left: 50px;
+}
+
+.embedded {
+  width: 25%;
+  height: 50%;
+  position: absolute;
+  top: 0px;
+  will-change: opacity;
+}
+
+#one{
+  left: 25%;
+  background: lightblue;
+}
+#two {
+  left: 50%;
+  background: lightgreen;
+}
+
+.hidden {
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(shared) { animation: unset; }
+html::view-transition-old(shared) { animation: unset; opacity: 1; }
+html::view-transition-new(shared) { animation: unset; opacity: 0; }
+
+</style>
+<div class="shared">
+  <div class="target">
+    <div class="embedded" id="one"></div>
+    <div class="embedded" id="two"></div>
+  </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background.html b/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background.html
new file mode 100644
index 0000000000..6c447aa1a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-child-with-transparent-background.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: element with child with transparent background</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="content-with-child-with-transparent-background-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.shared {
+  width: 50px;
+  height: 50px;
+  background: grey;
+  position: fixed;
+  top: 25px;
+  left: 25px;
+  view-transition-name: shared;
+}
+.target {
+  width: 100px;
+  height: 100px;
+  background: rgba(0,0,0,0);
+  will-change: opacity;
+  position: relative;
+  top: 50px;
+  left: 50px;
+}
+
+.embedded {
+  width: 25%;
+  height: 50%;
+  position: absolute;
+  top: 0px;
+  will-change: opacity;
+}
+
+#one{
+  left: 25%;
+  background: lightblue;
+}
+#two {
+  left: 50%;
+  background: lightgreen;
+}
+
+.hidden {
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(shared) { animation: unset; }
+html::view-transition-old(shared) { animation: unset; opacity: 1; }
+html::view-transition-new(shared) { animation: unset; opacity: 0; }
+
+</style>
+<div class="shared">
+  <div class="target">
+    <div class="embedded" id="one"></div>
+    <div class="embedded" id="two"></div>
+  </div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().ready.then(requestAnimationFrame(takeScreenshot));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-clip-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-clip-ref.html
new file mode 100644
index 0000000000..a322301686
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-clip-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>View transitions: element with clip (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.target {
+  contain: paint;
+  width: 100px;
+  height: 100vh;
+  display: inline-block;
+}
+
+.embedded {
+  width: 100%;
+  height: 50%;
+}
+
+body {
+  height: 150vh;
+  background: pink;
+}
+</style>
+<div id="target1" class="target">
+  <div class="embedded" style="background: green;"></div>
+  <div class="embedded" style="background: blue"></div>
+</div>
+<div id="target2" class="target">
+  <div class="embedded" style="background: green;"></div>
+  <div class="embedded" style="background: blue"></div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root-ref.html
new file mode 100644
index 0000000000..f81a96370e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>View transitions: element with clip (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.container {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: -50vh;
+  left: 0px;
+  overflow: auto;
+}
+.target {
+  contain: paint;
+  width: 100px;
+  height: 100vh;
+  display: inline-block;
+}
+
+.embedded {
+  width: 100%;
+  height: 50%;
+}
+
+body {
+  margin: 0px;
+  height: 150vh;
+}
+</style>
+<div id="container">
+<div id="target1" class="target">
+  <div class="embedded" style="background: green;"></div>
+</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root.html b/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root.html
new file mode 100644
index 0000000000..5acd847734
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-clip-root.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: root element with clip</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="content-with-clip-root-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  contain: paint;
+  width: 100px;
+  height: 100vh;
+  position: relative;
+  top: 50vh;
+  display: inline-block;
+}
+
+.embedded {
+  width: 100%;
+  height: 50%;
+}
+
+.hidden {
+  contain: paint;
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+body {
+  margin: 0px;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(target2) {
+  opacity: 0;
+}
+
+html::view-transition-group(root) {
+  top: -50vh;
+  bottom: 50vh;
+}
+
+html::view-transition-old(root) { animation: unset; opacity: 0; height: 100%; }
+html::view-transition-new(root) { animation: unset; opacity: 1; height: 100%; }
+
+</style>
+
+<div id="target1" class="target">
+  <div class="embedded" style="background: green;"></div>
+  <div class="embedded" style="background: blue"></div>
+</div>
+<div id="target2" class="target">
+  <div class="embedded" style="background: green;"></div>
+  <div class="embedded" style="background: blue"></div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    // Add a shared element to ensure its bounds don't expand the root snapshot
+    // size.
+    target2.style = "view-transition-name: target2";
+
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-clip.html b/testing/web-platform/tests/css/css-view-transitions/content-with-clip.html
new file mode 100644
index 0000000000..28bfa86875
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-clip.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: element with clip</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="content-with-clip-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  contain: paint;
+  width: 100px;
+  height: 100vh;
+  position: relative;
+  top: 50vh;
+  display: inline-block;
+}
+
+.embedded {
+  width: 100%;
+  height: 50%;
+}
+
+.hidden {
+  contain: paint;
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+/* Makes sure the viewport height is consistent for scrollbars to align */
+body {
+  height: 150vh;
+}
+
+html::view-transition {
+  background: pink;
+  height: 100%;
+}
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(target1), html::view-transition-group(target2) {
+  position: absolute;
+  top: -50vh;
+}
+html::view-transition-old(target1) { animation: unset; opacity: 1; }
+html::view-transition-new(target2) { animation: unset; opacity: 1; }
+html::view-transition-group(root) { display: none }
+
+</style>
+
+<div id="target1" class="target" style="view-transition-name: target1">
+  <div class="embedded" style="background: green;"></div>
+  <div class="embedded" style="background: blue"></div>
+</div>
+<div id="target2" class="target">
+  <div class="embedded" style="background: green;"></div>
+  <div class="embedded" style="background: blue"></div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition(() => {
+    target1.style = "";
+    target2.style = "view-transition-name: target2";
+  });
+  transition.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child-ref.html
new file mode 100644
index 0000000000..4bb87f316f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>View transitions: element with inline child (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="author" href="mailto:bokan@chromium.org">
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  overflow-clip-margin: 500px;
+  contain: paint;
+  view-transition-name: target;
+  background-color: grey;
+}
+
+#child {
+  position: relative;
+  left: 100px;
+  top: 100px;
+  color: lightgreen;
+  background-color: darkgreen;
+}
+
+#innerchild {
+  position: relative;
+  left: 100px;
+}
+</style>
+
+<div id="target" style="font: 25px/1 Ahem">
+  <span id="child">INLINE<br><span id="innerchild">BOX</span></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child.html b/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child.html
new file mode 100644
index 0000000000..f1a5ca79af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-inline-child.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: element with inline child</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="author" href="mailto:bokan@chromium.org">
+<link rel="match" href="content-with-inline-child-ref.html">
+<meta name="flags" content="ahem">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+
+#target {
+  width: 100px;
+  height: 100px;
+  overflow-clip-margin: 500px;
+  contain: paint;
+  view-transition-name: target;
+  background-color: grey;
+}
+
+#child {
+  position: relative;
+  left: 100px;
+  top: 100px;
+  color: lightgreen;
+  background-color: darkgreen;
+}
+
+#innerchild {
+  position: relative;
+  left: 100px;
+}
+
+html::view-transition-new(root) {
+  opacity: 0;
+}
+html::view-transition-old(root) {
+  opacity: 0;
+}
+
+html::view-transition-old(target) {
+  animation-duration: 3s;
+  animation-timing-function: steps(1, end);
+  opacity: 1;
+}
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div id="target" style="font: 25px/1 Ahem">
+  <span id="child">INLINE<br><span id="innerchild">BOX</span></span>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    // Remove the target to ensure the ref is compared against the snapshot.
+    document.getElementById("target").remove();
+
+    requestAnimationFrame(
+      () => requestAnimationFrame(
+      () => requestAnimationFrame(
+      () => requestAnimationFrame(takeScreenshot))));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-object-view-box-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-object-view-box-ref.html
new file mode 100644
index 0000000000..7aa2014397
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-object-view-box-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>View transitions: capture elements with object view box on the pseudo (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+body { background: pink }
+#target {
+  position: relative;
+  top: 93.75px;
+  left: 71px;
+  background: green;
+  width: 143px;
+  height: 125px;
+}
+</style>
+<div id=target></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-ref.html
new file mode 100644
index 0000000000..a24e30ede9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>View transitions: shared element with overflow (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  background: blue;
+  overflow-clip-margin: 50px;
+  view-transition-name: target;
+}
+.child {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  background: green;
+}
+body { background: lightpink; }
+</style>
+
+<div class=target>
+  <div class=child>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-zoomed-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-zoomed-ref.html
new file mode 100644
index 0000000000..a9d873957a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-overflow-zoomed-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>View transitions: shared element with overflow (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target {
+  width: 80px;
+  height: 80px;
+  contain: paint;
+  background: blue;
+  overflow-clip-margin: 50px;
+  view-transition-name: target;
+  zoom: 1.5;
+  border: 2px solid black;
+}
+.child {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  background: green;
+  zoom: 1.2;
+}
+body { background: lightpink; }
+</style>
+
+<div class=ancestor>
+  <div class=target>
+    <div class=child>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html
new file mode 100644
index 0000000000..9baf9563d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-new-image.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: object-view-box</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="content-with-transform-ref.html">
+<meta name="fuzzy" content="content-with-transform-ref.html:0-1;0-500">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  transform: scale(2.0, 3.0);
+  view-transition-name: target;
+}
+
+.embedded {
+  width: 100px;
+  height: 50px;
+}
+
+.hidden {
+  contain: paint;
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div id="target" class="target">
+  <div class="embedded" style="background: green;">Shared</div>
+  <div class="embedded" style="background: blue">Element</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition(() => {
+    requestAnimationFrame(() =>  requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(runTest);
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html
new file mode 100644
index 0000000000..e3bd7fff1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-old-image.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long">
+<html class=reftest-wait>
+<title>View transitions: object-view-box</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="content-with-transform-ref.html">
+<meta name="fuzzy" content="content-with-transform-ref.html:0-1;0-400">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  transform: scale(2.0, 3.0);
+  view-transition-name: target;
+}
+
+.embedded {
+  width: 100px;
+  height: 50px;
+}
+
+.hidden {
+  contain: paint;
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+}
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div id="target" class="target">
+  <div class="embedded" style="background: green;">Shared</div>
+  <div class="embedded" style="background: blue">Element</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() =>  requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(runTest);
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transform-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-ref.html
new file mode 100644
index 0000000000..568e040c1e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transform-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>View transitions: object-view-box (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.target {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  transform: scale(2.0, 3.0);
+}
+
+.embedded {
+  width: 100px;
+  height: 50px;
+}
+
+</style>
+<div id="target" class="target">
+  <div class="embedded" style="background: green;">Shared</div>
+  <div class="embedded" style="background: blue">Element</div>
+</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background-ref.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background-ref.html
new file mode 100644
index 0000000000..7349d131d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<title>View transitions: element with transparent background (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+  position: fixed;
+  top: 25px;
+  left: 25px;
+  background: rgba(0,0,0,0);
+}
+
+.embedded {
+  width: 25%;
+  height: 50%;
+  position: absolute;
+  top: 0px;
+  will-change: opacity;
+}
+
+#one{
+  left: 25%;
+  background: lightblue;
+}
+#two {
+  left: 50%;
+  background: lightgreen;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(target) { animation: unset; }
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+<div class="target">
+  <div class="embedded" id="one"></div>
+  <div class="embedded" id="two"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background.html b/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background.html
new file mode 100644
index 0000000000..b961a095e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/content-with-transparent-background.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: element with transparent background</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="content-with-transparent-background-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+  position: fixed;
+  top: 25px;
+  left: 25px;
+  background: rgba(0,0,0,0);
+}
+
+.embedded {
+  width: 25%;
+  height: 50%;
+  position: absolute;
+  top: 0px;
+  will-change: opacity;
+}
+
+#one{
+  left: 25%;
+  background: lightblue;
+}
+#two {
+  left: 50%;
+  background: lightgreen;
+}
+
+.hidden {
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(target) { animation: unset; }
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+<div class="target">
+  <div class="embedded" id="one"></div>
+  <div class="embedded" id="two"></div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().ready.then(requestAnimationFrame(takeScreenshot));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-ref.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-ref.html
new file mode 100644
index 0000000000..780d5fbd45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>View transitions: css tags generate pseudo elements in paint order (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+div {
+  position: absolute;
+  top: 50px;
+  width: 100px;
+  height: 100px;
+}
+#one {
+  background: green;
+  left: 50px;
+  z-index: 1;
+}
+#two {
+  background: yellow;
+  left: 125px;
+  z-index: -1;
+}
+#three {
+  background: blue;
+  left: 200px;
+  z-index: 0;
+}
+body { background: lightpink; }
+</style>
+
+<div id=one></div>
+<div id=two></div>
+<div id=three></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry-ref.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry-ref.html
new file mode 100644
index 0000000000..e7f62c2346
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>View transitions: css tags generate pseudo elements in paint order (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+div {
+  contain: paint;
+  position: absolute;
+  top: 50px;
+  width: 100px;
+  height: 100px;
+}
+#one {
+  background: green;
+  left: 50px;
+  z-index: 1;
+}
+#two {
+  background: yellow;
+  left: 125px;
+  z-index: -1;
+}
+#three {
+  background: blue;
+  left: 200px;
+  z-index: 0;
+}
+#four {
+  background: lightgreen;
+  left: 275px;
+  z-index: 0;
+}
+body { background: lightpink; }
+</style>
+
+<div id=one></div>
+<div id=two></div>
+<div id=three></div>
+<div id=four></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html
new file mode 100644
index 0000000000..703b64f5c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-with-entry.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: css tags generate pseudo elements in paint order</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="css-tags-paint-order-with-entry-ref.html">
+<meta name="fuzzy" content="css-tags-paint-order-with-entry-ref.html:0-120;0-300">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+div { contain: paint; }
+#one {
+  background: green;
+  width: 100px;
+  height: 100px;
+  position: relative;
+  z-index: 1;
+  view-transition-name: one;
+}
+#two {
+  background: yellow;
+  width: 100px;
+  height: 100px;
+  view-transition-name: two;
+}
+#three {
+  background: blue;
+  width: 100px;
+  height: 100px;
+  view-transition-name: three;
+}
+#four {
+  position: absolute;
+  background: lightgreen;
+  width: 100px;
+  height: 100px;
+  top: 50px;
+  left: 275px;
+  view-transition-name: four;
+}
+
+.hidden {
+  background: pink;
+  width: 10px;
+  height: 10px;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(one) {
+  animation: unset;
+  transform: unset;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+}
+html::view-transition-group(two) {
+  animation: unset;
+  transform: unset;
+  position: absolute;
+  top: 50px;
+  left: 125px;
+}
+html::view-transition-group(three) {
+  animation: unset;
+  transform: unset;
+  position: absolute;
+  top: 50px;
+  left: 200px;
+}
+html::view-transition-new(four) {
+  animation: unset;
+  opacity: 1;
+}
+
+html::view-transition-new(one),
+html::view-transition-new(two),
+html::view-transition-new(three) { animation: unset; opacity: 0; }
+
+html::view-transition-old(one),
+html::view-transition-old(two),
+html::view-transition-old(three) { animation: unset; opacity: 1; }
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+
+</style>
+
+<div id=one></div>
+<div id=two></div>
+<div id=three></div>
+
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    const f = document.createElement("div");
+    f.id = "four";
+    document.body.appendChild(f);
+
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order.html
new file mode 100644
index 0000000000..c0e8769b47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: css tags generate pseudo elements in paint order</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="css-tags-paint-order-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+#one {
+  background: green;
+  width: 100px;
+  height: 100px;
+  position: relative;
+  z-index: 1;
+  view-transition-name: one;
+}
+#two {
+  background: yellow;
+  width: 100px;
+  height: 100px;
+  view-transition-name: two;
+}
+#three {
+  background: blue;
+  width: 100px;
+  height: 100px;
+  view-transition-name: three;
+}
+
+.hidden {
+  background: pink;
+  width: 10px;
+  height: 10px;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(one) {
+  animation: unset;
+  transform: unset;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+}
+html::view-transition-group(two) {
+  animation: unset;
+  transform: unset;
+  position: absolute;
+  top: 50px;
+  left: 125px;
+}
+html::view-transition-group(three) {
+  animation: unset;
+  transform: unset;
+  position: absolute;
+  top: 50px;
+  left: 200px;
+}
+
+html::view-transition-new(one),
+html::view-transition-new(two),
+html::view-transition-new(three) { animation: unset; opacity: 0; }
+
+html::view-transition-old(one),
+html::view-transition-old(two),
+html::view-transition-old(three) { animation: unset; opacity: 1; }
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+
+</style>
+
+<div id=one></div>
+<div id=two></div>
+<div id=three></div>
+
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element-ref.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element-ref.html
new file mode 100644
index 0000000000..23fa74dd5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>View transitions: use css tags for shared elements (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+div { contain: paint; }
+#left {
+  background: blue;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+}
+#right {
+  width: 50px;
+  height: 50px;
+  background: green;
+  position: absolute;
+  top: 50px;
+  left: 250px;
+}
+body { background: lightpink; }
+</style>
+
+<div id=left></div>
+<div id=right></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element.html b/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element.html
new file mode 100644
index 0000000000..33bbae70fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/css-tags-shared-element.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: use css tags for shared elements</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="css-tags-shared-element-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+div { contain: paint; }
+#left {
+  background: green;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+}
+#right {
+  width: 50px;
+  height: 50px;
+  background: blue;
+  position: absolute;
+  top: 50px;
+  left: 250px;
+}
+.left-tag {
+  view-transition-name: left-element;
+}
+.right-tag {
+  view-transition-name: right-element;
+}
+
+.hidden {
+  background: pink;
+  width: 10px;
+  height: 10px;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(left-element),
+html::view-transition-group(right-element) { animation-duration: 0s; }
+
+html::view-transition-new(left-element),
+html::view-transition-new(right-element) { animation: unset; opacity: 0; }
+
+html::view-transition-old(left-element),
+html::view-transition-old(right-element) { animation: unset; opacity: 1; }
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+
+</style>
+
+<div id=left class="left-tag"></div>
+<div id=right class="right-tag"></div>
+
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    left.classList.remove("left-tag");
+    left.classList.add("right-tag");
+
+    right.classList.remove("right-tag");
+    right.classList.add("left-tag");
+
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe-ref.html
new file mode 100644
index 0000000000..44ed0947ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>View transitions: Dialog element in RTL scrollable iframe</title>
+  <link rel="help" href="https://github.com/WICG/view-transitions">
+  <link rel="author" href="mailto:bokan@chromium.org">
+  <style>
+    iframe {
+      width: 50vw;
+      height: 50vh;
+    }
+  </style>
+</head>
+
+<body>
+  <iframe src="support/dialog-in-rtl-iframe-child.html?show">
+  </iframe>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html
new file mode 100644
index 0000000000..b9c0f7e25c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-rtl-iframe.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<head>
+  <title>View transitions: Dialog element in RTL scrollable iframe</title>
+  <link rel="help" href="https://github.com/WICG/view-transitions">
+  <link rel="author" href="mailto:bokan@chromium.org">
+  <link rel="match" href="dialog-in-rtl-iframe-ref.html">
+  <meta name=fuzzy content="dialog-in-rtl-iframe-ref.html:0-80;0-500">
+  <script src="/common/reftest-wait.js"></script>
+  <style>
+    iframe {
+      width: 50vw;
+      height: 50vh;
+    }
+  </style>
+  <script>
+    failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+    onload = () => {
+      requestAnimationFrame(()=>{requestAnimationFrame(()=> {
+        frames[0].window.startTransition();
+        frames[0].window.transition.ready.then(() => {
+          requestAnimationFrame(()=>{requestAnimationFrame(()=> {
+            takeScreenshot();
+          })});
+        });
+      })});
+    }
+  </script>
+</head>
+
+<body>
+  <iframe src="support/dialog-in-rtl-iframe-child.html">
+  </iframe>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html
new file mode 100644
index 0000000000..91c2277366
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: element in top layer during transition</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="dialog-in-top-layer-during-transition-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  background: lightblue;
+
+  border: unset;
+  margin: 0;
+  padding: 0;
+
+  view-transition-name: dialog;
+  outline: none;
+}
+
+#target::backdrop {
+  width: 100px;
+  height: 100px;
+  background: grey;
+
+  view-transition-name: backdrop;
+}
+
+.hidden {
+  contain: paint;
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(backdrop) {
+  position: fixed;
+  top: 120px;
+  left: 0;
+}
+
+html::view-transition-new(backdrop), html::view-transition-new(dialog) {
+  opacity: 1;
+  animation: unset;
+}
+</style>
+
+<dialog id="target"></dialog>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  const transition = document.startViewTransition(() => {
+    target.showModal();
+    target.style.background = "lightgreen";
+  });
+  await transition.ready;
+  takeScreenshot();
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html
new file mode 100644
index 0000000000..406bdac32b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: element in top layer during transition</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="dialog-in-top-layer-during-transition-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  background: lightgreen;
+
+  border: unset;
+  margin: 0;
+  padding: 0;
+
+  view-transition-name: dialog;
+  outline: none;
+}
+
+#target::backdrop {
+  width: 100px;
+  height: 100px;
+  background: grey;
+
+  view-transition-name: backdrop;
+}
+
+.hidden {
+  contain: paint;
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(backdrop) {
+  position: fixed;
+  top: 120px;
+  left: 0;
+}
+
+html::view-transition-old(backdrop), html::view-transition-old(dialog) {
+  opacity: 1;
+  animation: unset;
+}
+</style>
+
+<dialog id="target"></dialog>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  target.showModal();
+  const transition = document.startViewTransition(() => {
+    target.close();
+    target.style.background = "lightblue";
+  });
+  await transition.ready;
+  takeScreenshot();
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-ref.html b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-ref.html
new file mode 100644
index 0000000000..41467678a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: element in top layer during transition (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+div {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 100px;
+}
+
+.dialog {
+  background: lightgreen;
+}
+
+.backdrop {
+  background: grey;
+  top: 120px;
+}
+
+</style>
+<div class="dialog"></div>
+<div class="backdrop"></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/document-element-detached-crash.html b/testing/web-platform/tests/css/css-view-transitions/document-element-detached-crash.html
new file mode 100644
index 0000000000..cfdf769695
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/document-element-detached-crash.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<title>View transitions: documentElement.remove</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+html {
+  display: none;
+}
+</style>
+
+<script>
+function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => {
+      const html = document.documentElement;
+      html.remove();
+      html.classList.remove('test-wait');
+    });
+  });
+}
+onload = () => requestAnimationFrame(runTest);
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/duplicate-tag-rejects-capture.html b/testing/web-platform/tests/css/css-view-transitions/duplicate-tag-rejects-capture.html
new file mode 100644
index 0000000000..951294babc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/duplicate-tag-rejects-capture.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: duplicate tags in the old DOM skip the transition</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+}
+</style>
+
+<div id=first></div>
+<div id=second></div>
+
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise((resolve, reject) => {
+    first.style = "view-transition-name: target";
+    second.style = "view-transition-name: target";
+    let transition = document.startViewTransition();
+
+    // Ready rejected first since invoking the dom callback is an async task.
+    let readyRejected = false;
+    transition.ready.then(reject, () => {readyRejected = true;});
+
+    // The domUpdate promise resolves (since there is no callback).
+    let updateCallbackDoneResolved = false;
+    transition.updateCallbackDone.then(() => {
+      assert_true(readyRejected, "ready not rejected before updateCallbackDone");
+      updateCallbackDoneResolved = true;
+    }, reject);
+
+    // Finally finish resolves.
+    transition.finished.then(() => {
+      assert_true(updateCallbackDoneResolved, "updateCallbackDone not resolved before finish");
+      resolve();
+    }, reject);
+  });
+}, "Two different elements with the same name in the old DOM should skip the transition");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/duplicate-tag-rejects-start.html b/testing/web-platform/tests/css/css-view-transitions/duplicate-tag-rejects-start.html
new file mode 100644
index 0000000000..6c99d6426c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/duplicate-tag-rejects-start.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: duplicate tags in the new DOM skip the transition</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+}
+</style>
+
+<div id=first></div>
+<div id=second></div>
+
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise((resolve, reject) => {
+    first.style = "view-transition-name: target";
+    let transition = document.startViewTransition(() => {
+      first.style = "view-transition-name: target";
+      second.style = "view-transition-name: target";
+    });
+
+    // First updateCallbackDone resolves since the callback runs successfully.
+    let updateCallbackDoneResolved = false;
+    transition.updateCallbackDone.then(() => { updateCallbackDoneResolved = true; }, reject);
+
+    // Then finished resolves since updateCallbackDone was already resolved.
+    let finishResolved = false;
+    transition.updateCallbackDone.then(() => {
+      assert_true(updateCallbackDoneResolved, "updateCallbackDone not resolved before finish");
+      finishResolved = true;
+    }, reject);
+
+    // Finally ready rejects.
+    transition.ready.then(reject, () => {
+      assert_true(finishResolved, "finish not resolved before ready");
+      resolve();
+    });
+  });
+}, "Two different elements with the same name in the new DOM should skip the transition");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/element-is-grouping-during-animation-ref.html b/testing/web-platform/tests/css/css-view-transitions/element-is-grouping-during-animation-ref.html
new file mode 100644
index 0000000000..38fca3c528
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/element-is-grouping-during-animation-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: element remains grouping during transition</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+.parent {
+  top: 0;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  background: green;
+}
+body {
+  perspective: 1000px;
+  height: 500px;
+  background: pink
+}
+</style>
+
+<div class=parent></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/element-is-grouping-during-animation.html b/testing/web-platform/tests/css/css-view-transitions/element-is-grouping-during-animation.html
new file mode 100644
index 0000000000..b1ef745e0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/element-is-grouping-during-animation.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: view transition element remains grouping during animation</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="element-is-grouping-during-animation-ref.html">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.parent {
+  top: 0;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  background: red;
+  transform-style: preserve-3d;
+}
+.named {
+  view-transition-name: target;
+}
+
+.child {
+  background: green;
+  width: 100px;
+  height: 100px;
+  top: 0;
+  left: 0;
+  position: absolute;
+  transform: translateZ(-500px);
+}
+
+body {
+  perspective: 1000px;
+  height: 500px;
+}
+
+::view-transition-group(root) {
+  animation-duration: 500s;
+  opacity: 0;
+}
+::view-transition-group(target) {
+  animation-duration: 0s;
+}
+::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+::view-transition {
+  background: pink;
+}
+</style>
+
+<div id=target class="parent named"><div class=child></div></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(() => {
+    requestAnimationFrame(() => {
+      target.classList.remove("named");
+      requestAnimationFrame(takeScreenshot);
+    });
+  });
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/element-stops-grouping-after-animation-ref.html b/testing/web-platform/tests/css/css-view-transitions/element-stops-grouping-after-animation-ref.html
new file mode 100644
index 0000000000..ccbb794b00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/element-stops-grouping-after-animation-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: element remains grouping during transition</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+.parent {
+  top: 0;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  background: blue;
+  transform-style: preserve-3d;
+}
+.child {
+  background: green;
+  width: 100px;
+  height: 100px;
+  top: 0;
+  left: 0;
+  position: absolute;
+  transform: translateZ(-500px);
+}
+body {
+  perspective: 1000px;
+  height: 500px;
+}
+</style>
+
+<div class=parent><div class=child></div></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/element-stops-grouping-after-animation.html b/testing/web-platform/tests/css/css-view-transitions/element-stops-grouping-after-animation.html
new file mode 100644
index 0000000000..df7965215e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/element-stops-grouping-after-animation.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: view transition element remains grouping during animation</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="element-stops-grouping-after-animation-ref.html">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.parent {
+  top: 0;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  background: blue;
+  transform-style: preserve-3d;
+}
+.named {
+  view-transition-name: target;
+}
+
+.child {
+  background: green;
+  width: 100px;
+  height: 100px;
+  top: 0;
+  left: 0;
+  position: absolute;
+  transform: translateZ(-500px);
+}
+
+body {
+  perspective: 1000px;
+  height: 500px;
+}
+
+::view-transition-group(root) {
+  animation-duration: 50ms;
+  opacity: 0;
+}
+::view-transition-group(target) {
+  animation-duration: 0s;
+}
+::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+::view-transition {
+  background: pink;
+}
+</style>
+
+<div id=target class="parent named"><div class=child></div></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(() => {
+    requestAnimationFrame(() => {
+      target.classList.remove("named");
+    });
+  });
+  transition.finished.then(takeScreenshot);
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/element-with-overflow-ref.html b/testing/web-platform/tests/css/css-view-transitions/element-with-overflow-ref.html
new file mode 100644
index 0000000000..523c8616a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/element-with-overflow-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: element with overflow ref</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+  .old_target {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100px;
+    height: 100px;
+    background: lightblue;
+    transform: translate(8px, 8px);
+  }
+
+  .new_target {
+    position: fixed;
+    top: 200px;
+    left: 0;
+    width: 100px;
+    height: 100px;
+    background: lightgreen;
+    transform: translate(8px, 8px);
+  }
+
+  .inner {
+    width: 100px;
+    height: 100px;
+    position: relative;
+    top: 50px;
+    left: 50px;
+    border: 5px solid black;
+  }
+</style>
+<div class="old_target">
+  <div class="inner"></div>
+</div>
+<div class="new_target">
+  <div class="inner" style="border:5px solid blue"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/element-with-overflow.html b/testing/web-platform/tests/css/css-view-transitions/element-with-overflow.html
new file mode 100644
index 0000000000..678e0a062e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/element-with-overflow.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: element with overflow</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="element-with-overflow-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+  .hidden {
+    width: 10px;
+    height: 10px;
+    view-transition-name: hidden;
+    background: green;
+  }
+
+  .target {
+    width: 100px;
+    height: 100px;
+    background: lightblue;
+    view-transition-name: target;
+  }
+  .inner {
+    width: 100px;
+    height: 100px;
+    position: relative;
+    top: 50px;
+    left: 50px;
+    border: 5px solid black;
+  }
+
+  html::view-transition-group(hidden) { animation-duration: 300s; }
+  html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+  html::view-transition-new(*), html::view-transition-old(*) {
+    opacity: 1;
+    animation: unset;
+  }
+
+  html::view-transition-old(target) {
+    top: 0px;
+    left: 0px;
+  }
+
+  html::view-transition-new(target) {
+    top: 200px;
+    left: 0px;
+  }
+</style>
+
+<div class="target">
+  <div class="inner"></div>
+</div>
+<div class="hidden"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    document.getElementsByClassName("target")[0].style.background="lightgreen";
+    document.getElementsByClassName("inner")[0].style.border="5px solid blue";
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html b/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html
new file mode 100644
index 0000000000..bccf64915d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/event-pseudo-name.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<title>View transitions: event pseudo name</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="web-animations-api-ref.html">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+:root { view-transition-name: none; }
+#first {
+  background: blue;
+  width: 100px;
+  height: 100px;
+  view-transition-name: shared;
+}
+
+html::view-transition-group(*),
+html::view-transition-image-pair(*),
+html::view-transition-new(*),
+html::view-transition-old(*) {
+  animation-duration: 600s;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+}
+html::view-transition-image-pair(*) {
+  animation: fade-in 600s both;
+}
+
+</style>
+<div id=first></div>
+<script>
+async_test(t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  let groupAnimationCount = 0;
+  let oldAnimationCount = 0;
+  let newAnimationCount = 0;
+  let wrapperAnimationCount = 0;
+
+  document.documentElement.addEventListener("animationstart", (e) => {
+    let pseudo = e.pseudoElement;
+    if (pseudo == "::view-transition-group(shared)") {
+      groupAnimationCount++;
+    } else if (pseudo == "::view-transition-new(shared)") {
+      newAnimationCount++;
+    } else if (pseudo == "::view-transition-old(shared)") {
+      oldAnimationCount++;
+    } else if (pseudo = "::view-transition-image-pair(shared)") {
+      wrapperAnimationCount++;
+    }
+
+    let total =
+      groupAnimationCount + oldAnimationCount + newAnimationCount + wrapperAnimationCount;
+    // Old/new images have 2 animations : opacity and mix-blend-mode.
+    if (total == 6) {
+      t.step(() => assert_equals(groupAnimationCount, 1));
+      t.step(() => assert_equals(wrapperAnimationCount, 1));
+      t.step(() => assert_equals(oldAnimationCount, 2));
+      t.step(() => assert_equals(newAnimationCount, 2));
+      t.done();
+    }
+  });
+  document.startViewTransition();
+}, "verifies pseudo name includes a tag");
+
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/exit-transition-with-anonymous-layout-object-ref.html b/testing/web-platform/tests/css/css-view-transitions/exit-transition-with-anonymous-layout-object-ref.html
new file mode 100644
index 0000000000..10e04ac58a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/exit-transition-with-anonymous-layout-object-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: exit transition with layout objects that don't have a node (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+body {
+  width: 100vw;
+  height: 100vh;
+  background: pink;
+}
+
+#target {
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+</style>
+<div id="target"></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/exit-transition-with-anonymous-layout-object.html b/testing/web-platform/tests/css/css-view-transitions/exit-transition-with-anonymous-layout-object.html
new file mode 100644
index 0000000000..ea2d17b276
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/exit-transition-with-anonymous-layout-object.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: exit transition with layout objects that don't have a node</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="exit-transition-with-anonymous-layout-object-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+body {
+  width: 100vw;
+  height: 100vh;
+}
+
+#target {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: target;
+}
+
+#hidden {
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+fieldset {
+  width: 100px;
+  height: 100px;
+  background: lightgreen;
+  overflow: clip;
+}
+
+html::view-transition { background: pink; }
+html::view-transition-group(root) { visibility: hidden; }
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+}
+</style>
+<div id="target"></div>
+<fieldset id="anonymous">hi</fieldset>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition(() => {
+    target.style.viewTransitionName = "none";
+  });
+  await t.ready;
+  anonymous.style.position = "relative";
+  requestAnimationFrame(() => requestAnimationFrame(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+  ));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/far-away-capture-ref.html b/testing/web-platform/tests/css/css-view-transitions/far-away-capture-ref.html
new file mode 100644
index 0000000000..9e10b9b44e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/far-away-capture-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: offscreen content</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+body { background: pink }
+.flex {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.box {
+  width: 100px;
+  height: 500px;
+  contain: paint;
+  background: green;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+</style>
+
+<div class=flex>
+ <div class=box>500</div>
+ <div class=box>2000</div>
+ <div class=box>3500</div>
+ <div class=box>5000</div>
+ <div class=box>6500</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html b/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html
new file mode 100644
index 0000000000..bfe0b9fb94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/far-away-capture.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: offscreen content</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="far-away-capture-ref.html">
+<meta name="fuzzy" content="far-away-capture-ref.html:0-1;0-5">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.flex {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.box {
+  width: 100px;
+  height: 500px;
+  contain: paint;
+}
+.shared {
+  background: green;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+.spacer {
+  height: 1000px;
+}
+#hidden {
+  width: 10px;
+  height: 10px;
+  background: red;
+  contain: paint;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { visibility: hidden; }
+
+html::view-transition-group(*) { animation-duration: 0s; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+html::view-transition-group(root) { display: none; }
+html::view-transition { background: pink }
+
+</style>
+
+<div class=flex>
+ <div id=dst1 class=box></div>
+ <div id=dst2 class=box></div>
+ <div id=dst3 class=box></div>
+ <div id=dst4 class=box></div>
+ <div id=dst5 class=box></div>
+</div>
+<div id=hidden></div>
+<div id=content>
+ <div id=src1 class="box shared" style="view-transition-name: one">500</div>
+ <div class=spacer></div>
+ <div id=src2 class="box shared" style="view-transition-name: two">2000</div>
+ <div class=spacer></div>
+ <div id=src3 class="box shared" style="view-transition-name: three">3500</div>
+ <div class=spacer></div>
+ <div id=src4 class="box shared" style="view-transition-name: four">5000</div>
+ <div class=spacer></div>
+ <div id=src5 class="box shared" style="view-transition-name: five">6500</div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    content.remove();
+    dst1.style = "view-transition-name: one";
+    dst2.style = "view-transition-name: two";
+    dst3.style = "view-transition-name: three";
+    dst4.style = "view-transition-name: four";
+    dst5.style = "view-transition-name: five";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-box-new.html b/testing/web-platform/tests/css/css-view-transitions/fractional-box-new.html
new file mode 100644
index 0000000000..407636b967
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-box-new.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: fractional box -- new content</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="fractional-box-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  margin: 15px;
+  background: green;
+  width: 100.125px;
+  height: 50.875px;
+}
+.shift {
+  position: relative;
+  left: 0.4px;
+}
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div class="box" style="view-transition-name: one"></div>
+<div class="box shift" style="view-transition-name: two"></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-box-old.html b/testing/web-platform/tests/css/css-view-transitions/fractional-box-old.html
new file mode 100644
index 0000000000..915cd41704
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-box-old.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: fractional box -- old content</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="fractional-box-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  margin: 15px;
+  background: green;
+  width: 100.125px;
+  height: 50.875px;
+}
+.shift {
+  position: relative;
+  left: 0.4px;
+}
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div class="box" style="view-transition-name: one"></div>
+<div class="box shift" style="view-transition-name: two"></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-box-ref.html b/testing/web-platform/tests/css/css-view-transitions/fractional-box-ref.html
new file mode 100644
index 0000000000..e5fb0f80d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-box-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>View transitions: fractional box -- reference</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  margin: 15px;
+  background: green;
+  width: 100.125px;
+  height: 50.875px;
+}
+.shift {
+  position: relative;
+  left: 0.4px;
+}
+body { background: lightpink }
+</style>
+<div class="box"></div>
+<div class="box shift"></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-new.html b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-new.html
new file mode 100644
index 0000000000..e50e6654a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-new.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: fractional box with overflow children -- new content</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="fractional-box-with-overflow-children-ref.html">
+<!-- subpixel differences are ok in this test (in highdpi), but channel difference
+     should not be perceptible -->
+<meta name=fuzzy content="fractional-box-with-overflow-children-ref.html:0-3;0-100">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  position: relative;
+  margin: 15px;
+  background: green;
+  width: 100.125px;
+  height: 50.875px;
+}
+.shift {
+  left: 0.4px;
+}
+.child1 {
+  position: absolute;
+  left: -2px;
+  width: 110px;
+  height: 25px;
+  background: darkgreen;
+}
+.child2 {
+  position: absolute;
+  top: -3px;
+  width: 50px;
+  height: 55px;
+  background: darkgreen;
+}
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div class="box" style="view-transition-name: one"><div class="child1"></div><div class="child2"></div></div>
+<div class="box shift" style="view-transition-name: two"><div class="child1"></div><div class="child2"></div></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-old.html b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-old.html
new file mode 100644
index 0000000000..acf72e20df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-old.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: fractional box with overflow children -- old content</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="fractional-box-with-overflow-children-ref.html">
+<!-- subpixel differences are ok in this test (in highdpi), but channel difference
+     should not be perceptible -->
+<meta name=fuzzy content="fractional-box-with-overflow-children-ref.html:0-3;0-100">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  position: relative;
+  margin: 15px;
+  background: green;
+  width: 100.125px;
+  height: 50.875px;
+}
+.shift {
+  left: 0.4px;
+}
+.child1 {
+  position: absolute;
+  left: -2px;
+  width: 110px;
+  height: 25px;
+  background: darkgreen;
+}
+.child2 {
+  position: absolute;
+  top: -3px;
+  width: 50px;
+  height: 55px;
+  background: darkgreen;
+}
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div class="box" style="view-transition-name: one"><div class="child1"></div><div class="child2"></div></div>
+<div class="box shift" style="view-transition-name: two"><div class="child1"></div><div class="child2"></div></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-ref.html b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-ref.html
new file mode 100644
index 0000000000..8e53dcd266
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-overflow-children-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>View transitions: fractional box with overflow children-- reference</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  position: relative;
+  margin: 15px;
+  background: green;
+  width: 100.125px;
+  height: 50.875px;
+}
+.shift {
+  left: 0.4px;
+}
+.child1 {
+  position: absolute;
+  left: -2px;
+  width: 110px;
+  height: 25px;
+  background: darkgreen;
+}
+.child2 {
+  position: absolute;
+  top: -3px;
+  width: 50px;
+  height: 55px;
+  background: darkgreen;
+}
+body { background: lightpink }
+</style>
+<div class="box"><div class="child1"></div><div class="child2"></div></div>
+<div class="box shift"><div class="child1"></div><div class="child2"></div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-shadow-new.html b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-shadow-new.html
new file mode 100644
index 0000000000..820a48b1b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-shadow-new.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: fractional box with shadow -- new content</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="fractional-box-with-shadow-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  box-shadow: -2px -3px 0 7px darkgreen;
+  margin: 15px;
+  background: green;
+  width: 100.125px;
+  height: 50.875px;
+}
+.shift {
+  position: relative;
+  left: 0.4px;
+}
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div class="box" style="view-transition-name: one"></div>
+<div class="box shift" style="view-transition-name: two"></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-shadow-old.html b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-shadow-old.html
new file mode 100644
index 0000000000..882f8992ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-shadow-old.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: fractional box with shadow -- old content</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="fractional-box-with-shadow-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  box-shadow: -2px -3px 0 7px darkgreen;
+  margin: 15px;
+  background: green;
+  width: 100.125px;
+  height: 50.875px;
+}
+.shift {
+  position: relative;
+  left: 0.4px;
+}
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div class="box" style="view-transition-name: one"></div>
+<div class="box shift" style="view-transition-name: two"></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-shadow-ref.html b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-shadow-ref.html
new file mode 100644
index 0000000000..639641aeb5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-box-with-shadow-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>View transitions: fractional box with shadow -- reference</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  box-shadow: -2px -3px 0 7px darkgreen;
+  margin: 15px;
+  background: green;
+  width: 100.125px;
+  height: 50.875px;
+}
+.shift {
+  position: relative;
+  left: 0.4px;
+}
+body { background: lightpink }
+</style>
+<div class="box"></div>
+<div class="box shift"></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-position-ref.html b/testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-position-ref.html
new file mode 100644
index 0000000000..0674b265ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-position-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: fractional translation from position (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+body {
+  width: 100vw;
+  height: 100vh;
+  background: grey;
+}
+
+#target {
+  width: 100px;
+  height: 100px;
+  position: fixed;
+  top: 100.52px;
+  left: 100.37px;
+
+  view-transition-name: target;
+  contain: layout;
+  will-change: filter;
+}
+</style>
+
+<div id=target>
+  Here is some text which should not be blurry.
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-position.html b/testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-position.html
new file mode 100644
index 0000000000..a09b08cf00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-position.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: fractional translation from position</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="fractional-translation-from-position-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+body {
+  width: 100vw;
+  height: 100vh;
+  background: grey;
+}
+
+#target {
+  width: 100px;
+  height: 100px;
+  position: fixed;
+  top: 100.52px;
+  left: 100.37px;
+
+  view-transition-name: target;
+  contain: layout;
+}
+
+/* Keep the animation running for 30s to screenshot pseudo DOM */
+::view-transition-new(root), ::view-transition-old(root) {
+  animation-duration: 30s;
+}
+
+::view-transition-new(target) {
+  opacity: 1;
+  animation: unset;
+}
+::view-transition-old(target) {
+  opacity: 0;
+  animation: unset;
+}
+</style>
+
+<div id=target>
+  Here is some text which should not be blurry.
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-transform-ref.html b/testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-transform-ref.html
new file mode 100644
index 0000000000..0721fca578
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-transform-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: fractional translation from CSS transform (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+body {
+  width: 100vw;
+  height: 100vh;
+  background: grey;
+}
+
+#target {
+  width: 100px;
+  height: 100px;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  transform: translate(100.52px, 100.37px);
+
+  view-transition-name: target;
+  contain: layout;
+  will-change: transform;
+}
+</style>
+
+<div id=target>
+  Here is some text which should not be blurry.
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-transform.html b/testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-transform.html
new file mode 100644
index 0000000000..7027a90086
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fractional-translation-from-transform.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: fractional translation from CSS transform</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="fractional-translation-from-transform-ref.html">
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-100">
+<script src="/common/reftest-wait.js"></script>
+<style>
+body {
+  width: 100vw;
+  height: 100vh;
+  background: grey;
+}
+
+#target {
+  width: 100px;
+  height: 100px;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  transform: translate(100.52px, 100.37px);
+
+  view-transition-name: target;
+  contain: layout;
+}
+
+/* Keep the animation running for 30s to screenshot pseudo DOM */
+::view-transition-new(root), ::view-transition-old(root) {
+  animation-duration: 30s;
+}
+
+::view-transition-new(target) {
+  opacity: 1;
+  animation: unset;
+}
+::view-transition-old(target) {
+  opacity: 0;
+  animation: unset;
+}
+</style>
+
+<div id=target>
+  Here is some text which should not be blurry.
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/fragmented-at-start-ignored-ref.html b/testing/web-platform/tests/css/css-view-transitions/fragmented-at-start-ignored-ref.html
new file mode 100644
index 0000000000..626e03d012
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fragmented-at-start-ignored-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>View transitions: fragmented elements skipped (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+body { background: pink }
+#spacer {
+  width: 100px;
+  height: 950px;
+  background: lightgreen;
+}
+#container {
+  width: 500px;
+  columns: 2;
+  height: 500px;
+  visibility: hidden;
+}
+#target {
+  width: 200px;
+  height: 200px;
+  background: green;
+}
+#unrelated {
+  width: 100px;
+  height: 100px;
+  background: lightblue;
+}
+</style>
+<div id=container>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+<div id=unrelated></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/fragmented-at-start-ignored.html b/testing/web-platform/tests/css/css-view-transitions/fragmented-at-start-ignored.html
new file mode 100644
index 0000000000..bab52f1567
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fragmented-at-start-ignored.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: fragmented elements skipped</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="fragmented-at-start-ignored-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+#spacer {
+  width: 100px;
+  height: 950px;
+  background: lightgreen;
+}
+#container {
+  width: 500px;
+  columns: 2;
+  height: 500px;
+}
+#target {
+  width: 200px;
+  height: 200px;
+  background: green;
+  view-transition-name: target;
+}
+#unrelated {
+  width: 100px;
+  height: 100px;
+  background: lightblue;
+  view-transition-name: unrelated;
+}
+
+::view-transition {
+  background: pink;
+}
+::view-transition-group(root) {
+  animation-duration: 500s;
+  visibility: hidden;
+}
+::view-transition-group(target) {
+  border: 1px solid black;
+}
+</style>
+<div id=container>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+<div id=unrelated></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTransition() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+
+requestAnimationFrame(() => requestAnimationFrame(runTransition))
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/fragmented-during-transition-skips-ref.html b/testing/web-platform/tests/css/css-view-transitions/fragmented-during-transition-skips-ref.html
new file mode 100644
index 0000000000..269a6a2b9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fragmented-during-transition-skips-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<title>View transitions: fragmented elements skipped</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+#spacer {
+  width: 100px;
+  height: 950px;
+  background: lightgreen;
+}
+#container {
+  width: 500px;
+  height: 500px;
+  columns: 2;
+}
+#target {
+  width: 200px;
+  height: 200px;
+  background: green;
+}
+#unrelated {
+  width: 100px;
+  height: 100px;
+  background: lightblue;
+}
+</style>
+<div id=container>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+<div id=unrelated></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/fragmented-during-transition-skips.html b/testing/web-platform/tests/css/css-view-transitions/fragmented-during-transition-skips.html
new file mode 100644
index 0000000000..dc4164dae5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/fragmented-during-transition-skips.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: fragmented elements skipped</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="fragmented-during-transition-skips-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+#spacer {
+  width: 100px;
+  height: 950px;
+  background: lightgreen;
+}
+#container {
+  width: 500px;
+  height: 500px;
+}
+.fragment {
+  columns: 2;
+}
+#target {
+  width: 200px;
+  height: 200px;
+  background: green;
+  view-transition-name: target;
+}
+#unrelated {
+  width: 100px;
+  height: 100px;
+  background: lightblue;
+  view-transition-name: unrelated;
+}
+
+::view-transition {
+  background: pink;
+}
+::view-transition-group(root) {
+  animation-duration: 500s;
+  visibility: hidden;
+}
+::view-transition-group(target) {
+  border: 1px solid black;
+}
+</style>
+<div id=container>
+  <div id=spacer></div>
+  <div id=target></div>
+</div>
+<div id=unrelated></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTransition() {
+  let t = document.startViewTransition();
+  t.ready.then(() => {
+    requestAnimationFrame(() => container.classList.add("fragment"))
+  });
+  t.finished.then(takeScreenshot);
+}
+
+requestAnimationFrame(() => requestAnimationFrame(runTransition))
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/get-computed-style-crash.html b/testing/web-platform/tests/css/css-view-transitions/get-computed-style-crash.html
new file mode 100644
index 0000000000..38cd5af7f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/get-computed-style-crash.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>getComputedStyle without transition should not crash</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<body onload="start();">
+
+<script>
+async function start() {
+ var el = document.createElement(undefined);
+ document.body.appendChild(el);
+
+ var style = self.getComputedStyle(el, ':view-transition');
+ style.getPropertyValue("--child");
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/group-animation-for-root-transition.html b/testing/web-platform/tests/css/css-view-transitions/group-animation-for-root-transition.html
new file mode 100644
index 0000000000..9c702663e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/group-animation-for-root-transition.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: group pseudo for the root transition has animation</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition();
+    transition.ready.then(() => {
+      let groupAnimationCount = 0;
+      let oldAnimationCount = 0;
+      let newAnimationCount = 0;
+
+      document.getAnimations().forEach((animation) => {
+        let pseudo = animation.effect.pseudoElement;
+        if (pseudo == "::view-transition-group(root)") {
+          groupAnimationCount++;
+        } else if (pseudo == "::view-transition-new(root)") {
+          newAnimationCount++;
+        } else if (pseudo == "::view-transition-old(root)") {
+          oldAnimationCount++;
+        } else {
+          reject();
+        }
+      });
+
+      let total =
+        groupAnimationCount + oldAnimationCount + newAnimationCount;
+      // Old/new images have 2 animations : opacity and mix-blend-mode.
+      if (total == 5) {
+        assert_equals(groupAnimationCount, 1);
+        assert_equals(oldAnimationCount, 2);
+        assert_equals(newAnimationCount, 2);
+        resolve();
+      } else {
+        reject();
+      }
+    });
+  });
+}, "incorrect UA animations for root transition");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-from-point.html b/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-from-point.html
new file mode 100644
index 0000000000..7c9ed911cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-from-point.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<title>View transitions: hit test shared element at the real dom location</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="hit-test-unpainted-element-ref.html">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+html { view-transition-name: none }
+#target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  view-transition-name: shared;
+  position: relative;
+  z-index: 1;
+}
+.before {
+  background: yellow;
+  left: 200px;
+}
+.after {
+  background: green;
+}
+.after:hover {
+  background: red;
+}
+#unrelated {
+  width: 50px;
+  height: 50px;
+  position: relative;
+  top: -50px;
+  background: blue;
+}
+
+html::view-transition {
+  pointer-events: none;
+}
+html::view-transition-group(*) {
+  pointer-events: auto;
+}
+
+html::view-transition-group(shared) {
+  animation-delay: 300s;
+}
+html::view-transition-old(shared) {
+  animation: unset;
+  opacity: 1;
+}
+html::view-transition-new(shared) {
+  display: none;
+}
+</style>
+
+<div id=target class=before></div>
+<div id=unrelated></div>
+
+<script>
+async_test(t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  document.startViewTransition(() => {
+    target.classList.toggle("before");
+    target.classList.toggle("after");
+    requestAnimationFrame(async () => {
+      // Check the old location of the element, we should get body.
+      t.step(() => assert_equals(document.elementFromPoint(20, 20), document.body));
+      // Check the new location of the pseudo element, we should get documentElement,
+      // which is the originating element for the pseudo element.
+      t.step(() => assert_equals(document.elementFromPoint(220, 20), document.documentElement));
+      // Check the spot that used to be covered by the element but now has
+      // unrelated element, which is what we expect to get.
+      t.step(() => assert_equals(document.elementFromPoint(20, 70), unrelated));
+      t.done();
+    });
+  });
+}, "hit test should not hit unpainted element, but does hit pseudo and unrelated elements");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-ref.html b/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-ref.html
new file mode 100644
index 0000000000..dce9f27d90
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>View transitions: hit test shared element at the real dom location (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: relative;
+  background: green;
+  left: 200px;
+}
+</style>
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element.html b/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element.html
new file mode 100644
index 0000000000..68026edfb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/hit-test-unpainted-element.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: hit test shared element at the real dom location</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="hit-test-unpainted-element-ref.html">
+
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+html { view-transition-name: none }
+div {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  view-transition-name: shared;
+}
+.before {
+  position: relative;
+  background: yellow;
+  left: 200px;
+}
+.after {
+  background: green;
+}
+.after:hover {
+  background: red;
+}
+
+html::view-transition-group(shared) {
+  animation-delay: 300s;
+}
+html::view-transition-old(shared) {
+  animation: unset;
+  opacity: 0;
+}
+html::view-transition-new(shared) {
+  animation: unset;
+  opacity: 1;
+}
+</style>
+
+<div id=target class=before></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function mouseMoveToTarget(x, y) {
+  return new test_driver.Actions().pointerMove(x, y).send();
+}
+
+async function runTest() {
+  document.startViewTransition(() => {
+    target.classList.toggle("before");
+    target.classList.toggle("after");
+    // Ensure that we exit the capture phase before doing the rest of the test,
+    // since we want the animating phase to do hit-testing.
+    requestAnimationFrame(async () => {
+      await mouseMoveToTarget(10, 10);
+      requestAnimationFrame(takeScreenshot);
+    });
+  });
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element-ref.html b/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element-ref.html
new file mode 100644
index 0000000000..bca532b22c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>View transitions: hit test shared element at the real dom location (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  background: blue;
+  position: relative;
+  left: 200px;
+}
+#unrelated {
+  width: 100px;
+  height: 100px;
+  background: green;
+  position: relative;
+  top: 200px;
+  left: 200px;
+}
+
+</style>
+
+<div id=target></div>
+<div id=unrelated></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element.html b/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element.html
new file mode 100644
index 0000000000..1b8868280b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/hit-test-unrelated-element.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: hit test shared element at the real dom location</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="hit-test-unrelated-element-ref.html">
+
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+html { view-transition-name: none }
+#target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  background: blue;
+  view-transition-name: shared;
+}
+#target.before {
+  position: relative;
+  left: 200px;
+}
+
+#unrelated {
+  width: 100px;
+  height: 100px;
+  background: red;
+  position: relative;
+  top: 200px;
+  left: 200px;
+}
+#unrelated:hover {
+  background: green;
+}
+
+html::view-transition {
+  pointer-events: none;
+}
+html::view-transition-group(*) {
+  pointer-events: auto;
+}
+
+html::view-transition-group(shared) {
+  animation-delay: 300s;
+}
+html::view-transition-old(shared) {
+  animation: unset;
+  opacity: 0;
+}
+html::view-transition-new(shared) {
+  animation: unset;
+  opacity: 1;
+}
+</style>
+
+<div id=target class=before></div>
+<div id=unrelated></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function mouseMoveToTarget(x, y) {
+  return new test_driver.Actions().pointerMove(x, y).send();
+}
+
+async function runTest() {
+  document.startViewTransition(() => {
+    target.classList.toggle("before");
+    requestAnimationFrame(async () => {
+      await mouseMoveToTarget(210, 310);
+      requestAnimationFrame(takeScreenshot);
+    });
+  });
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar-ref.html
new file mode 100644
index 0000000000..ea895e8484
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>View transitions: iframe transition to scrollbar (ref)</title>
+  <link rel="help" href="https://github.com/WICG/view-transitions">
+  <link rel="author" href="mailto:bokan@chromium.org">
+  <style>
+    iframe {
+      width: 50vw;
+      height: 50vh;
+    }
+  </style>
+</head>
+
+<body>
+  <iframe src="support/iframe-scrollbar-child.html?scrollbar">
+  </iframe>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html b/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html
new file mode 100644
index 0000000000..37a300902a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-new-has-scrollbar.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<head>
+  <title>View transitions: iframe transition to scrollbar</title>
+  <link rel="help" href="https://github.com/WICG/view-transitions">
+  <link rel="author" href="mailto:bokan@chromium.org">
+  <link rel="match" href="iframe-new-has-scrollbar-ref.html">
+  <meta name=fuzzy content="iframe-new-has-scrollbar-ref.html:0-80;0-500">
+  <script src="/common/reftest-wait.js"></script>
+  <style>
+    iframe {
+      width: 50vw;
+      height: 50vh;
+    }
+  </style>
+  <script>
+    failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+    onload = () => {
+      requestAnimationFrame(()=>{requestAnimationFrame(()=> {
+        frames[0].window.startTransition();
+        frames[0].window.transition.ready.then(() => {
+          requestAnimationFrame(()=>{requestAnimationFrame(()=> {
+            // Expect that the scrollbar should appear immediately, even though
+            // the new snapshot isn't visible (since the scrollbar isn't part
+            // of the snapshot).
+            takeScreenshot();
+          })});
+        });
+      })});
+    }
+  </script>
+</head>
+
+<body>
+  <iframe src="support/iframe-scrollbar-child.html">
+  </iframe>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar-ref.html
new file mode 100644
index 0000000000..3bb9bdb88d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>View transitions: iframe transition from scrollbar (ref)</title>
+  <link rel="help" href="https://github.com/WICG/view-transitions">
+  <link rel="author" href="mailto:bokan@chromium.org">
+  <style>
+    iframe {
+      width: 50vw;
+      height: 50vh;
+    }
+  </style>
+</head>
+
+<body>
+  <iframe src="support/iframe-scrollbar-child.html">
+  </iframe>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html b/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html
new file mode 100644
index 0000000000..014a429994
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-old-has-scrollbar.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<head>
+  <title>View transitions: iframe transition from scrollbar</title>
+  <link rel="help" href="https://github.com/WICG/view-transitions">
+  <link rel="author" href="mailto:bokan@chromium.org">
+  <link rel="match" href="iframe-old-has-scrollbar-ref.html">
+  <meta name=fuzzy content="iframe-old-has-scrollbar-ref.html:0-80;0-500">
+  <script src="/common/reftest-wait.js"></script>
+  <style>
+    iframe {
+      width: 50vw;
+      height: 50vh;
+    }
+  </style>
+  <script>
+    failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+    onload = () => {
+      requestAnimationFrame(()=>{requestAnimationFrame(()=> {
+        frames[0].window.startTransition();
+        frames[0].window.transition.ready.then(() => {
+          requestAnimationFrame(()=>{requestAnimationFrame(()=> {
+            // Expect that the scrollbar should disappear immediately since it
+            // isn't part of the snapshot.
+            takeScreenshot();
+          })});
+        });
+      })});
+    }
+  </script>
+</head>
+
+<body>
+  <iframe src="support/iframe-scrollbar-child.html?scrollbar">
+  </iframe>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-transition-destroyed-document-crash.html b/testing/web-platform/tests/css/css-view-transitions/iframe-transition-destroyed-document-crash.html
new file mode 100644
index 0000000000..31f6a10ed6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-transition-destroyed-document-crash.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: crash test</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<script src="/common/reftest-wait.js"></script>
+<html>
+<head>
+<script>
+function eventhandler1() {
+  var var00106 = htmlvar00011.contentDocument;
+  var var00228 = var00106.startViewTransition();
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(takeScreenshot);
+    })
+  });
+}
+
+</script>
+</head>
+<body>
+<iframe id="htmlvar00011" onunload="eventhandler3()" border="0" srcdoc="A#:^;&lt;gV&lt;&gt;8" style=":{,J" referrerpolicy="unsafe-url" background="!xp&gt;" nohref="nohref" nonce="nonce" inputEncoding="s" offsetX="0.3538512271910753">:+j&amp;;&amp;-^&gt;.7xf\jZ1,xb</iframe>
+<style id="htmlvar00014" nonce="nonce" media="screen and (min-width:0px)" onerror="eventhandler1()" onload="eventhandler1()" dir="N5!" updateRangeEnd="0" abbr="4IvGMN[Wxd" symbols="=d##y#)DA4V8ya}KO.cv" frameBorder="^b*]&amp;:|#lB:" search="N">ynFXo*</style>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-transition-ref.html b/testing/web-platform/tests/css/css-view-transitions/iframe-transition-ref.html
new file mode 100644
index 0000000000..49394f35f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-transition-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>View transitions: iframe</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+iframe { width: 500px; height: 500px }
+</style>
+
+<iframe srcdoc="
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+html { height: 50%; }
+</style>
+
+<div></div>
+"></iframe>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html b/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html
new file mode 100644
index 0000000000..93a5cbed66
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/iframe-transition.sub.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: iframe</title>
+<meta name="timeout" content="long">
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="iframe-transition-ref.html">
+<meta name="assert" content="Ensure that iframe root capture is sized and displayed correctly">
+<meta name=fuzzy content="iframe-transition-ref.html:0-200;0-200">
+<script src="/common/reftest-wait.js"></script>
+<style>
+iframe { width: 500px; height: 500px }
+</style>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+addEventListener("message", takeScreenshot);
+</script>
+
+<iframe id=frame src="http://{{domains[www]}}:{{ports[http][0]}}/css/css-view-transitions/support/frame-helper.html"></iframe>
diff --git a/testing/web-platform/tests/css/css-view-transitions/inline-child-with-filter-ref.html b/testing/web-platform/tests/css/css-view-transitions/inline-child-with-filter-ref.html
new file mode 100644
index 0000000000..44a41f1bf9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/inline-child-with-filter-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>View transitions: inline child with filter (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+body { margin : 0; }
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: grey;
+  overflow-clip-margin: 40px;
+  contain: paint;
+  view-transition-name: target;
+}
+
+#child {
+  position: relative;
+  left: 100px;
+  top: 100px;
+  color: lightgreen;
+  background-color: darkgreen;
+  filter: blur(30px);
+}
+</style>
+
+<div id="target">
+  <span id="child">INLINEBOX</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/inline-child-with-filter.html b/testing/web-platform/tests/css/css-view-transitions/inline-child-with-filter.html
new file mode 100644
index 0000000000..2c4a8b85ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/inline-child-with-filter.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: inline child with filter</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="inline-child-with-filter-ref.html">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+body { margin : 0; }
+#target {
+  width: 100px;
+  height: 100px;
+  background-color: grey;
+  overflow-clip-margin: 40px;
+  contain: paint;
+  view-transition-name: target;
+}
+
+#child {
+  position: relative;
+  left: 100px;
+  top: 100px;
+  color: lightgreen;
+  background-color: darkgreen;
+  filter: blur(30px);
+}
+
+html::view-transition-group(root) { animation-duration: 300s; }
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+}
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 0;
+}
+</style>
+
+<div id="target">
+  <span id="child">INLINEBOX</span>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition(async () => {
+    document.getElementById("target").remove();
+  });
+  transition.ready.then(() => requestAnimationFrame(takeScreenshot));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/inline-element-size-ref.html b/testing/web-platform/tests/css/css-view-transitions/inline-element-size-ref.html
new file mode 100644
index 0000000000..177594c870
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/inline-element-size-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: capture elements with display inline (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+body {
+  background: pink;
+}
+#box {
+  background: green;
+}
+
+</style>
+
+<span id=box>BOX</span>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/inline-element-size.html b/testing/web-platform/tests/css/css-view-transitions/inline-element-size.html
new file mode 100644
index 0000000000..c9f0d48942
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/inline-element-size.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View transitions: capture elements with display inline</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="inline-element-size-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#box {
+  background: green;
+  view-transition-name: target;
+}
+
+/* We're verifying what we capture, so just display the old contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-group(target) { background: green; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: pink; }
+</style>
+
+<span id=box>BOX</span>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition();
+  t.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block-ref.html b/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block-ref.html
new file mode 100644
index 0000000000..4a66af4ece
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: inline with offset from containing block (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+  .outer {
+    transform: scale(2);
+    width: 100vw;
+    text-align: center;
+  }
+  .inner {
+    transform: translate(10px);
+    padding: 10px;
+    border: 10px solid black;
+  }
+  body {
+    background: pink;
+  }
+</style>
+
+<div class="outer">
+  <a class="inner">Some text</a>
+</div>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html b/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html
new file mode 100644
index 0000000000..8640899814
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/inline-with-offset-from-containing-block.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: inline with offset from containing block</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="inline-with-offset-from-containing-block-ref.html">
+<meta name="fuzzy" content="inline-with-offset-from-containing-block-ref.html:0-255;0-1400">
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+  .outer {
+    transform: scale(2);
+    width: 100vw;
+    text-align: center;
+  }
+  .inner {
+    padding: 10px;
+    transform: translate(20px);
+    view-transition-name: text;
+  }
+  :root {
+    view-transition-name: none;
+  }
+
+  html::view-transition {
+    background: pink;
+  }
+  html::view-transition-group(text) {
+    border: 10px solid black;
+    margin: -10px 0 0 -10px;
+    animation-play-state: paused;
+  }
+</style>
+
+<div class="outer">
+  <a class="inner">Some text</a>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/input-targets-root-while-render-blocked.html b/testing/web-platform/tests/css/css-view-transitions/input-targets-root-while-render-blocked.html
new file mode 100644
index 0000000000..dbeb39da54
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/input-targets-root-while-render-blocked.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: ensure input targets document root while rendering is suppressed</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7797">
+<link rel="author" href="mailto:bokan@chromium.org">
+
+<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>
+:root {
+  /* Ensure clicks during the transition fall through the pseudo tree root to
+   * real DOM */
+  view-transition-name: none;
+}
+
+::view-transition {
+  /* Ensure clicks during the transition fall through the pseudo tree root to
+   * real DOM */
+  pointer-events: none;
+  width: 0;
+  height: 0;
+}
+
+::view-transition-group(*) {
+  animation-duration: 30s;
+}
+
+#clicktarget {
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+
+#transition {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+  view-transition-name: transitionElement;
+}
+</style>
+
+<div id="clicktarget"></div>
+<div id="transition"></div>
+
+<script>
+const target = document.getElementById("clicktarget");
+
+async function sendAndWaitForClick() {
+  return new Promise(async (resolve) => {
+
+    function eventHandler(ev) {
+      resolve(ev);
+    }
+
+    document.documentElement.addEventListener("click", eventHandler);
+
+    await new test_driver.Actions()
+             .setContext(window)
+             .addPointer("mousePointer1", "mouse")
+             .pointerMove(10, 10, {origin: 'viewport', sourceName: "mousePointer1"})
+             .pointerDown({sourceName: "mousePointer1"})
+             .pointerUp({sourceName: "mousePointer1"})
+             .send();
+
+    document.documentElement.removeEventListener("click", eventHandler);
+  });
+}
+
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  assert_not_equals(target, null, "PRECONDITION: target element is valid");
+
+  // Ensure input is initialized before blocking rendering.
+  await new test_driver.Actions()
+               .setContext(window)
+               .addPointer("mousePointer1", "mouse")
+               .pointerMove(0, 0, {origin: "viewport", sourceName: "mousePointer1"})
+               .send();
+
+  let clickEvent = null;
+
+  let transition = document.startViewTransition(async () => {
+    clickEvent = await sendAndWaitForClick();
+  });
+
+  await transition.ready;
+
+  assert_equals(clickEvent.target, document.documentElement,
+      "Events must target the transition root while render blocked");
+  clickEvent = null;
+
+  clickEvent = await sendAndWaitForClick();
+
+  // This just ensures we're not passing the above check by accident.
+  assert_equals(clickEvent.target, target,
+      "During transition, event should hit real DOM");
+
+}, "Input when rendering suppressed targets root");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/intrinsic-aspect-ratio-ref.html b/testing/web-platform/tests/css/css-view-transitions/intrinsic-aspect-ratio-ref.html
new file mode 100644
index 0000000000..4455ad6172
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/intrinsic-aspect-ratio-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: different width container should keep aspect ratio (by default)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.spacer {
+  /* 10px - border from above and below */
+  height: 6px;
+}
+.smallbox {
+  width: 50px;
+  height: 50px;
+  background: blue;
+}
+.bigbox {
+  width: 200px;
+  height: 200px;
+  background: blue;
+}
+
+body { background: lightpink; }
+</style>
+
+<div style="width: 50px; height: 100px; border: 2px solid black">
+  <div style="height: 50px; background: blue"></div>
+</div>
+<div class=spacer></div>
+<div style="width: 200px; height: 100px; border: 2px solid black">
+  <div style="height: 200px; background: blue"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/japanese-tag-ref.html b/testing/web-platform/tests/css/css-view-transitions/japanese-tag-ref.html
new file mode 100644
index 0000000000..8c57dba658
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/japanese-tag-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>View transitions: shared element writing-modes (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+.tb { writing-mode: horizontal-tb; }
+.lr { writing-mode: vertical-lr; }
+.rl { writing-mode: vertical-rl; }
+.shared {
+  margin: 2px;
+  width: 100px;
+  height: 50px;
+  background: green;
+  contain: paint;
+  border: 1px solid black;
+}
+html { background: lightpink; }
+</style>
+
+<div id=one class="tb shared">T</div>
+<div id=two class="lr shared">T</div>
+<div id=three class="rl shared">T</div>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/japanese-tag.html b/testing/web-platform/tests/css/css-view-transitions/japanese-tag.html
new file mode 100644
index 0000000000..976dcab4fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/japanese-tag.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: shared element writing-modes</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="japanese-tag-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#hidden {
+  width: 100px;
+  height: 100px;
+  background: red;
+  position: absolute;
+  top: 0;
+  left: 0;
+  contain: paint;
+  view-transition-name: 隠れた;
+}
+.tb { writing-mode: horizontal-tb; }
+.lr { writing-mode: vertical-lr; }
+.rl { writing-mode: vertical-rl; }
+.shared {
+  margin: 2px;
+  width: 100px;
+  height: 50px;
+  background: green;
+  contain: paint;
+  border: 1px solid black;
+}
+#target1, #target2, #target3 {
+  background: red;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  width: 100px;
+  height: 500px;
+  contain: paint;
+}
+#one { view-transition-name: 第一; }
+#two { view-transition-name: 第二; }
+#three { view-transition-name: 第三; }
+
+html::view-transition-group(隠れた) { animation-duration: 300s; }
+html::view-transition-image-pair(隠れた) { animation: unset; opacity: 0; }
+
+html::view-transition-group(第一),
+html::view-transition-group(第二),
+html::view-transition-group(第三) {
+  animation-delay: 300s;
+  animation-fill-mode: both;
+}
+
+html::view-transition-new(第一),
+html::view-transition-new(第二),
+html::view-transition-new(第三) { animation: unset; opacity: 0; }
+
+html::view-transition-old(第一),
+html::view-transition-old(第二),
+html::view-transition-old(第三) { animation: unset; opacity: 1; }
+
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+
+</style>
+
+<div id=hidden>Should not be visible</div>
+<div id=target1>Should not be visible</div>
+<div id=target2>Should not be visible</div>
+<div id=target3>Should not be visible</div>
+<div id=one class="shared tb">T</div>
+<div id=two class="shared lr">T</div>
+<div id=three class="shared rl">T</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    one.remove();
+    two.remove();
+    three.remove();
+    hidden.style.left = "200px";
+    target1.style.viewTransitionName = "第一";
+    target2.style.viewTransitionName = "第二";
+    target3.style.viewTransitionName = "第三";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/list-style-position-style-change-crash.html b/testing/web-platform/tests/css/css-view-transitions/list-style-position-style-change-crash.html
new file mode 100644
index 0000000000..5910d5d95a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/list-style-position-style-change-crash.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="test-wait">
+<title>View transitions: list-style-position crash</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+
+<script>
+onload = async () => {
+  let vt = document.startViewTransition();
+  await vt.ready;
+  await new Promise(resolve => requestAnimationFrame(resolve));
+
+  document.documentElement.style.listStylePosition = 'inside';
+  // Force style update.
+  window.scrollX;
+
+  document.documentElement.classList.remove('test-wait');
+}
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html
new file mode 100644
index 0000000000..9a00a62b7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-new.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html">
+<meta name="fuzzy" content="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  position: fixed;
+  inset-block-start: -90px;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html
new file mode 100644
index 0000000000..ed16ac5662
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-old.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html">
+<meta name="fuzzy" content="massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  position: fixed;
+  inset-block-start: -90px;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html
new file mode 100644
index 0000000000..507f9b8c0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-and-on-top-of-viewport-partially-onscreen-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<title>View transitions: massive element below viewport partially onscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target {
+  position: fixed;
+  inset-block-start: -90px;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+</style>
+<body>
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html
new file mode 100644
index 0000000000..b5c0d4e9ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-new.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport and completely offscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-below-viewport-offscreen-ref.html">
+<meta name="fuzzy" content="massive-element-below-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-950">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target_after_bottom_edge {
+  position: fixed;
+  inset-block-start: 20000px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  position: fixed;
+  inset-block-start: 10000px;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's top edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target target_after_bottom_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html
new file mode 100644
index 0000000000..6eeb85af3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-old.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport and completely offscreen (old content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-below-viewport-offscreen-ref.html">
+<meta name="fuzzy" content="massive-element-below-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-445">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target_after_bottom_edge {
+  position: fixed;
+  inset-block-start: 20000px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  position: fixed;
+  inset-block-start: 10000px;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's top edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target target_after_bottom_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-ref.html
new file mode 100644
index 0000000000..05827eb196
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-offscreen-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: massive element below viewport and completely offscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+.target_after_bottom_edge {
+  position: fixed;
+  inset-block-start: 0px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+</style>
+
+<div class="target target_after_bottom_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html
new file mode 100644
index 0000000000..54232ead6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-new.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-below-viewport-partially-onscreen-ref.html">
+<meta name="fuzzy" content="massive-element-below-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html
new file mode 100644
index 0000000000..772720def1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-old.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-below-viewport-partially-onscreen-ref.html">
+<meta name="fuzzy" content="massive-element-below-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-445">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-ref.html
new file mode 100644
index 0000000000..001c135f0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-below-viewport-partially-onscreen-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>View transitions: massive element below viewport partially onscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  visibility: hidden;
+}
+</style>
+<body>
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html
new file mode 100644
index 0000000000..d9d03d1e91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-new.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport and completely offscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-left-of-viewport-offscreen-ref.html">
+<meta name="fuzzy" content="massive-element-left-of-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target_before_block_start_edge {
+  position: fixed;
+  inset-block-start: -40100px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's bottom edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  top: unset;
+  left: unset;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target target_before_block_start_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html
new file mode 100644
index 0000000000..7861e5c3b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-old.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport and completely offscreen (old content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-left-of-viewport-offscreen-ref.html">
+<meta name="fuzzy" content="massive-element-left-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target_before_block_start_edge {
+  position: fixed;
+  inset-block-start: -40100px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's bottom edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  top: unset;
+  left: unset;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target target_before_block_start_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-ref.html
new file mode 100644
index 0000000000..32e688bbdb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-offscreen-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>View transitions: massive element on top of viewport and completely offscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target_at_bottom_edge {
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+</style>
+<body>
+<div class="target target_at_bottom_edge">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html
new file mode 100644
index 0000000000..7c14cef2d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-left-of-viewport-partially-onscreen-ref.html">
+<meta name="fuzzy" content="massive-element-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  scrollblue.scrollIntoView();
+
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html
new file mode 100644
index 0000000000..b586f96de9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport partially onscreen (old content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-left-of-viewport-partially-onscreen-ref.html">
+<meta name="fuzzy" content="massive-element-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  scrollblue.scrollIntoView();
+
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-ref.html
new file mode 100644
index 0000000000..8fa3050535
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<title>View transitions: massive element on top of viewport partially onscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  visibility: hidden;
+}
+</style>
+<body>
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+</body>
+<script>
+  scrollblue.scrollIntoView();
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html
new file mode 100644
index 0000000000..f4a9f833df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-new.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport and completely offscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-on-top-of-viewport-offscreen-ref.html">
+<meta name="fuzzy" content="massive-element-on-top-of-viewport-offscreen-ref.html:maxDifference=0-6;totalPixels=0-920">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target_before_block_start_edge {
+  position: fixed;
+  inset-block-start: -40100px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's bottom edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  top: unset;
+  right: unset;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target target_before_block_start_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html
new file mode 100644
index 0000000000..a2eb0447bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-old.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport and completely offscreen (old content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-on-top-of-viewport-offscreen-ref.html">
+<meta name="fuzzy" content="massive-element-on-top-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target_before_block_start_edge {
+  position: fixed;
+  inset-block-start: -40100px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's bottom edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  top: unset;
+  right: unset;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target target_before_block_start_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-ref.html
new file mode 100644
index 0000000000..e835907738
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-offscreen-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>View transitions: massive element on top of viewport and completely offscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target_at_bottom_edge {
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+</style>
+<body>
+<div class="target target_at_bottom_edge">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html
new file mode 100644
index 0000000000..764a311fc9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-new.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-on-top-of-viewport-partially-onscreen-ref.html">
+<meta name="fuzzy" content="massive-element-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  scrollblue.scrollIntoView();
+
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html
new file mode 100644
index 0000000000..cecefd8f58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-old.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element on top of viewport partially onscreen (old content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-on-top-of-viewport-partially-onscreen-ref.html">
+<meta name="fuzzy" content="massive-element-on-top-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-330">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  scrollblue.scrollIntoView();
+
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-ref.html
new file mode 100644
index 0000000000..9c60e8bf1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-on-top-of-viewport-partially-onscreen-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>View transitions: massive element on top of viewport partially onscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  visibility: hidden;
+}
+</style>
+<body>
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+</body>
+<script>
+  scrollblue.scrollIntoView();
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html
new file mode 100644
index 0000000000..b1bae1c09b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-new.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html">
+<meta name="fuzzy" content="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  position: fixed;
+  inset-block-start: -90px;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html
new file mode 100644
index 0000000000..c878ce881e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-old.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below and on top of viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html">
+<meta name="fuzzy" content="massive-element-right-and-left-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  position: fixed;
+  inset-block-start: -90px;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-ref.html
new file mode 100644
index 0000000000..3516741da0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-and-left-of-viewport-partially-onscreen-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<title>View transitions: massive element below viewport partially onscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  position: fixed;
+  inset-block-start: -90px;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+</style>
+<body>
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html
new file mode 100644
index 0000000000..91b133f2cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-new.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport and completely offscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-right-of-viewport-offscreen-ref.html">
+<meta name="fuzzy" content="massive-element-right-of-viewport-offscreen-ref.html:maxDifference=0-2;totalPixels=0-445">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target_after_bottom_edge {
+  position: fixed;
+  inset-block-start: 20000px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  position: fixed;
+  inset-block-start: 10000px;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's top edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target target_after_bottom_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html
new file mode 100644
index 0000000000..164ff05f93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-old.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport and completely offscreen (old content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-right-of-viewport-offscreen-ref.html">
+<meta name="fuzzy" content="massive-element-right-of-viewport-offscreen-ref.html:maxDifference=0-3;totalPixels=0-445">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target_after_bottom_edge {
+  position: fixed;
+  inset-block-start: 20000px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  position: fixed;
+  inset-block-start: 10000px;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+/* We should capture at least viewport height worth of content from the element's top edge */
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target target_after_bottom_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-ref.html
new file mode 100644
index 0000000000..f29d3ac609
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-offscreen-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: massive element below viewport and completely offscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target_after_bottom_edge {
+  position: fixed;
+  inset-block-start: 0px;
+  inset-inline-start: 0px;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+</style>
+
+<div class="target target_after_bottom_edge" id="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html
new file mode 100644
index 0000000000..b63ed07225
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-new.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-right-of-viewport-partially-onscreen-ref.html">
+<meta name="fuzzy" content="massive-element-right-of-viewport-partially-onscreen-ref.html:maxDifference=0-2;totalPixels=0-330">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html
new file mode 100644
index 0000000000..cf090e0ab4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-old.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: massive element below viewport partially onscreen (new content)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="massive-element-right-of-viewport-partially-onscreen-ref.html">
+<meta name="fuzzy" content="massive-element-right-of-viewport-partially-onscreen-ref.html:maxDifference=0-3;totalPixels=0-445">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(*), html::view-transition-new(*) {
+  object-fit: none;
+}
+
+html::view-transition-old(target) { animation: unset; opacity: 1; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+
+</style>
+
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-ref.html
new file mode 100644
index 0000000000..1df26bb375
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/massive-element-right-of-viewport-partially-onscreen-ref.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>View transitions: massive element below viewport partially onscreen (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+:root {
+  writing-mode: vertical-lr;
+}
+
+.target {
+  contain: paint;
+  inline-size: 100px;
+  block-size: 40000px;
+  view-transition-name: target;
+}
+
+.top {
+  inline-size: 100%;
+  block-size: 100px;
+  background: lightblue;
+}
+
+.middle {
+  inline-size: 100%;
+  block-size: 39800px;
+  background: green;
+}
+
+.bottom {
+  inline-size: 100%;
+  block-size: 100px;
+  background: blue;
+}
+
+.hidden {
+  contain: paint;
+  inline-size: 10px;
+  block-size: 10px;
+  background: grey;
+  visibility: hidden;
+}
+</style>
+<body>
+<div class="target">
+  <div class="top">This text is at the top of the box</div>
+  <div class="middle">This text is in the middle of the box</div>
+  <div id="scrollblue" class="bottom">This text is at the bottom of the box</div>
+</div>
+<div id=hidden class=hidden></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-view-transitions/mix-blend-mode-only-on-transition.html b/testing/web-platform/tests/css/css-view-transitions/mix-blend-mode-only-on-transition.html
new file mode 100644
index 0000000000..4149142cf3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/mix-blend-mode-only-on-transition.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<title>view-transitions: Blend modes are set up only in paired transitions</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+}
+.tagone { view-transition-name: one }
+.tagtwo { view-transition-name: two }
+.tagthree { view-transition-name: three }
+.tagfour { view-transition-name: four }
+.tagfive { view-transition-name: five }
+
+::view-transition-old(four) {
+  animation-name: unset;
+}
+::view-transition-new(five) {
+  animation-name: unset;
+}
+</style>
+
+<div id=first class=tagone></div>
+<div id=second></div>
+<div class=tagthree></div>
+<div class=tagfour></div>
+<div class=tagfive></div>
+
+<script>
+async_test(t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  let transition = document.startViewTransition(() => {
+    first.classList.toggle("tagone");
+    second.classList.toggle("tagtwo");
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(one)").isolation, "auto"));
+        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(one)").mixBlendMode, "normal"));
+
+        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(two)").isolation, "auto"));
+        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(two)").mixBlendMode, "normal"));
+
+        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(three)").isolation, "isolate"));
+        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(three)").mixBlendMode, "plus-lighter"));
+        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(three)").mixBlendMode, "plus-lighter"));
+
+        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(four)").isolation, "isolate"));
+        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(four)").mixBlendMode, "normal"));
+        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(four)").mixBlendMode, "plus-lighter"));
+
+        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(five)").isolation, "isolate"));
+        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(five)").mixBlendMode, "plus-lighter"));
+        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(five)").mixBlendMode, "normal"));
+        t.done();
+      });
+    });
+  });
+}, "Blend modes are set up on paired transitions");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom-ref.html b/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom-ref.html
new file mode 100644
index 0000000000..dd93e0b498
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>View transitions: Modify style via CSSOM (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+#box {
+  width: 100px;
+  height: 100px;
+  background: limegreen;
+}
+#box {
+  transform: translateY(100px);
+}
+
+</style>
+<div id="box"></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom.html b/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom.html
new file mode 100644
index 0000000000..6f026607bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/modify-style-via-cssom.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View transitions: Modify style via CSSOM</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+<link rel="match" href="modify-style-via-cssom-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#box {
+  width: 100px;
+  height: 100px;
+  background: limegreen;
+}
+html::view-transition-group(root) {
+  animation-duration: 300s;
+}
+html::view-transition-new(root) {
+  animation: none;
+  opacity: 0;
+}
+html::view-transition-old(root) {
+  animation: none;
+  opacity: 1;
+}
+</style>
+<div id="box"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function rAF() {
+  return new Promise(resolve => requestAnimationFrame(resolve));
+}
+
+async function runTest() {
+  await document.startViewTransition().ready;
+  await rAF();
+  await rAF();
+
+  // Once the animation is running, ensure modifying style via CSSOM is
+  // effective.
+  const cssSheet = new CSSStyleSheet();
+  cssSheet.replaceSync(`::view-transition-old(root) {
+    transform: translateY(100px);
+  }`);
+  document.adoptedStyleSheets = [cssSheet];
+
+  await rAF();
+  takeScreenshot();
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations-ref.html b/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations-ref.html
new file mode 100644
index 0000000000..ca9efc52d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: span with overflowing text is rendered correctly (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+div {
+  width: 250px;
+  visibility: hidden;
+}
+span {
+  text-shadow: red -2px -5px;
+  border: 2px solid black;
+  box-shadow: 3px 3px red, -1em 0 .4em olive;
+  view-transition-name: target;
+  visibility: visible;
+}
+
+body {
+  background: pink;
+}
+</style>
+
+<div>
+  FILLER FILLER<span>This text should render correctly</span>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations.html b/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations.html
new file mode 100644
index 0000000000..e166b3c9df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/multiline-span-with-overflowing-text-and-box-decorations.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: span with overflowing text is rendered correctly</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="multiline-span-with-overflowing-text-and-box-decorations-ref.html">
+<meta name="fuzzy" content="multiline-span-with-overflowing-text-and-box-decorations-ref.html:maxDifference=0-3;totalPixels=0-4900">
+
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+#wrapper {
+  width: 250px;
+  visibility: hidden;
+}
+span {
+  text-shadow: red -2px -5px;
+  border: 2px solid black;
+  box-shadow: 3px 3px red, -1em 0 .4em olive;
+  view-transition-name: target;
+  visibility: visible;
+}
+
+.hidden {
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { visibility: hidden; }
+
+html::view-transition-group(target) {
+  animation: unset;
+}
+
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+
+html::view-transition {
+  background: pink;
+}
+</style>
+
+<div id="wrapper">
+  FILLER FILLER<span>This text should render correctly</span>
+</div>
+
+<div class="hidden"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-new.html b/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-new.html
new file mode 100644
index 0000000000..8a552b03a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-new.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: element with fixed position descendant</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="named-element-with-fix-pos-child-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: target;
+}
+.child {
+  width: 100px;
+  height: 100px;
+  position: fixed;
+  top: 150px;
+  left: 150px;
+  background: grey;
+}
+
+html::view-transition-group(target) { animation-duration: 300s; }
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+</style>
+
+<div class=target>
+  <div class=child></div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-old.html b/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-old.html
new file mode 100644
index 0000000000..a8211f4200
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-old.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: element with fixed position descendant</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="named-element-with-fix-pos-child-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: target;
+}
+.child {
+  width: 100px;
+  height: 100px;
+  position: fixed;
+  top: 150px;
+  left: 150px;
+  background: grey;
+}
+
+html::view-transition-group(target) { animation-duration: 300s; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+}
+</style>
+
+<div class=target>
+  <div class=child></div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-ref.html b/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-ref.html
new file mode 100644
index 0000000000..a161cd8fc9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/named-element-with-fix-pos-child-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: element with fixed position descendant (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+.child {
+  width: 100px;
+  height: 100px;
+  position: fixed;
+  top: 150px;
+  left: 150px;
+  background: grey;
+}
+</style>
+
+<div class=target>
+  <div class=child></div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match-ref.html
new file mode 100644
index 0000000000..b8c3b34c03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture elements with different size capture</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  overflow-clip-margin: 50px;
+}
+#target {
+  top: 20px;
+  left: 20px;
+  view-transition-name: target;
+}
+.inner_overflow {
+  width: 50px;
+  height: 150px;
+  margin-left: -10px;
+  margin-top: -20px;
+  background: lightgreen;
+  clip-path: inset(1px 1px 1px 1px);
+}
+
+/* We're verifying what we capture, so just display the new contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div id=target class=box><div class=inner_overflow>X</div></div>
+<script>
+failIfNot(document.startViewTransition, "Reference missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html b/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html
new file mode 100644
index 0000000000..78efa9d82f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-and-old-sizes-match.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture elements with different size capture</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-and-old-sizes-match-ref.html">
+<meta name="fuzzy" content="new-and-old-sizes-match-ref.html:0-1;0-300">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  overflow-clip-margin: 50px;
+}
+#target {
+  top: 20px;
+  left: 20px;
+  view-transition-name: target;
+}
+.inner_overflow {
+  width: 50px;
+  height: 150px;
+  margin-left: -10px;
+  margin-top: -20px;
+  background: lightgreen;
+  clip-path: inset(1px 1px 1px 1px);
+}
+
+/* We're verifying what we capture, so just display the new contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div id=target class=box><div class=inner_overflow>X</div></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path-ref.html
new file mode 100644
index 0000000000..1b28bbf29b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>View transitions: capture opacity elements (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  color: red;
+  background: lightgreen;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+}
+#e1 {
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+  top: 20px;
+  left: 20px;
+}
+body { background: lightpink; }
+</style>
+<div id=e1 class=box></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html
new file mode 100644
index 0000000000..4a2dfc78c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-clip-path.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture clip-path elements</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-captures-clip-path-ref.html">
+<meta name="fuzzy" content="new-content-captures-clip-path-ref.html:0-1;0-500">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  color: red;
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+}
+#e1 {
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+  top: 20px;
+  left: 20px;
+  view-transition-name: e1;
+}
+
+div.dst { background: lightgreen; }
+/* We're verifying what we capture, so just display the new contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-image-pair(*) { isolation: isolate; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div id=e1 class=box></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition(() => {
+    e1.classList.add("dst");
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size-ref.html
new file mode 100644
index 0000000000..2a80cf5568
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>View transitions: capture elements with different size capture (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  color: red;
+  background: lightgreen;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+}
+#e1 {
+  clip-path: circle(30%);
+  top: 20px;
+  left: 20px;
+}
+#e2 {
+  clip-path: ellipse(70% 30%);
+  top: 160px;
+  left: 20px;
+}
+#e3 {
+  filter: blur(5px);
+  top: 300px;
+  left: 20px;
+}
+
+body { background: lightpink; }
+</style>
+<div id=e1 class=box>one</div>
+<div id=e2 class=box>two</div>
+<div id=e3 class=box>three</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html
new file mode 100644
index 0000000000..a891dec555
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-different-size.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long">
+<html class=reftest-wait>
+<title>View transitions: capture elements with different size capture</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-captures-different-size-ref.html">
+<meta name=fuzzy content="new-content-captures-different-size-ref.html:0-40;0-30000">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  color: red;
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+}
+#e1 {
+  clip-path: circle(30%);
+  top: 20px;
+  left: 20px;
+  view-transition-name: e1;
+}
+#e2 {
+  clip-path: ellipse(70% 30%);
+  top: 160px;
+  left: 20px;
+  view-transition-name: e2;
+}
+#e3 {
+  filter: blur(5px);
+  top: 300px;
+  left: 20px;
+  view-transition-name: e3;
+}
+
+div.dst { background: lightgreen; }
+/* We're verifying what we capture, so just display the new contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div id=e1 class=box>one</div>
+<div id=e2 class=box>two</div>
+<div id=e3 class=box>three</div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition(() => {
+    e1.classList.add("dst");
+    e2.classList.add("dst");
+    e3.classList.add("dst");
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity-ref.html
new file mode 100644
index 0000000000..deea6d139b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>View transitions: capture opacity elements (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  color: red;
+  background: lightgreen;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+  will-change: opacity;
+}
+#e1 { opacity: 0.75; top: 20px; left: 20px; }
+#e2 { opacity: 0.5; top: 160px; left: 20px; }
+#e3 { opacity: 0.25; top: 300px; left: 20px; }
+body { background: lightpink; }
+</style>
+<div id=e1 class=box></div>
+<div id=e2 class=box></div>
+<div id=e3 class=box></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity.html
new file mode 100644
index 0000000000..ab4efd1f42
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-opacity.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture opacity elements</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-captures-opacity-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  color: red;
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+  will-change: opacity;
+}
+#e1 { opacity: 0.75; top: 20px; left: 20px; view-transition-name: e1; }
+#e2 { opacity: 0.5; top: 160px; left: 20px; view-transition-name: e2; }
+#e3 { opacity: 0.25; top: 300px; left: 20px; view-transition-name: e3; }
+div.dst { background: lightgreen; }
+/* We're verifying what we capture, so just display the new contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div id=e1 class=box></div>
+<div id=e2 class=box></div>
+<div id=e3 class=box></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition(() => {
+    e1.classList.add("dst");
+    e2.classList.add("dst");
+    e3.classList.add("dst");
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans-ref.html
new file mode 100644
index 0000000000..6d906fc6f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>View transitions: capture opacity elements (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+span {
+  background: lightgreen;
+  position: fixed;
+  top: 50px;
+  left: 50px;
+}
+body { background: lightpink; }
+</style>
+<span>This is a span</span>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans.html
new file mode 100644
index 0000000000..b88654cd37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-positioned-spans.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture span elements</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-captures-positioned-spans-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+span {
+  background: lightblue;
+  view-transition-name: span;
+  position: fixed;
+  top: 50px;
+  left: 50px;
+}
+span.dst { background: lightgreen; }
+/* We're verifying what we capture, so just display the new contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<span id=target>This is a span</span>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition(() => {
+    target.classList.add("dst");
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root-ref.html
new file mode 100644
index 0000000000..2f2e5e7694
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>View transitions: capture opacity elements (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  background: lightgreen;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  will-change: transform;
+}
+#e1 {
+  top: 10px;
+  left: 30px;
+}
+</style>
+<div id=e1 class=box></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root.html
new file mode 100644
index 0000000000..84e55de58a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-root.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture root elements</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-captures-root-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  will-change: transform;
+}
+#e1 {
+  top: 10px;
+  left: 30px;
+}
+#shared {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  background: red;
+  view-transition-name: shared;
+}
+
+div.dst { background: lightgreen; }
+/* We're verifying what we capture, so just display the old contents for 5 minutes.  */
+html::view-transition { background: pink; }
+html::view-transition-group(shared) { animation-duration: 300s; }
+html::view-transition-image-pair(shared) { visibility: hidden }
+html::view-transition-old(root) { animation-duration: 0s; opacity: 0 }
+html::view-transition-new(root) { animation-duration: 0s; opacity: 1 }
+</style>
+<body style="background: red">
+<div id=e1 class=box></div>
+<div id=shared></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition(() => {
+    e1.classList.add("dst");
+    document.body.style = "";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans-ref.html
new file mode 100644
index 0000000000..b95233d712
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>View transitions: capture opacity elements (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+span {
+  background: lightgreen;
+  view-transition-name: span;
+}
+body { background: lightpink; }
+</style>
+<span>This is a span</span>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html
new file mode 100644
index 0000000000..843f6752d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-captures-spans.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture span elements</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-captures-spans-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+span {
+  background: lightblue;
+  view-transition-name: span;
+}
+span.dst { background: lightgreen; }
+/* We're verifying what we capture, so just display the new contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<span id=target>This is a span</span>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition(() => {
+    target.classList.add("dst");
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-ref.html
new file mode 100644
index 0000000000..5f75909e82
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>View transitions: capture elements and then change overflow (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+body { background: pink }
+#target {
+  position: relative;
+  background: green;
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+}
+#child {
+  background: blue;
+  position: relative;
+  top: 20px;
+  left: 30px;
+  width: 50px;
+  height: 100px;
+}
+#child.large {
+  height: 200px;
+}
+</style>
+
+<div id=target><div id=child class=large></div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow.html b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow.html
new file mode 100644
index 0000000000..a8e2fa8c6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-changes-overflow.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long">
+<html class=reftest-wait>
+<title>View transitions: capture elements and then change overflow</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-changes-overflow-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#target {
+  position: relative;
+  background: green;
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+}
+#child {
+  background: blue;
+  position: relative;
+  top: 20px;
+  left: 30px;
+  width: 50px;
+  height: 100px;
+}
+#child.large {
+  height: 200px;
+}
+
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: pink; }
+</style>
+
+<div id=target><div id=child></div></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().ready.then(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        child.classList.add("large");
+        requestAnimationFrame(takeScreenshot);
+      });
+    });
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes-ref.html
new file mode 100644
index 0000000000..34e36786f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>View transitions: container of shared element writing-modes (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+.tb { writing-mode: horizontal-tb; }
+.lr { writing-mode: vertical-lr; }
+.rl { writing-mode: vertical-rl; }
+.shared {
+  margin: 2px;
+  width: 100px;
+  height: 50px;
+  background: green;
+  contain: paint;
+  border: 1px solid black;
+}
+html { background: lightpink; }
+</style>
+
+<div class=tb><div id=one class=shared>T</div></div>
+<div class=lr><div id=two class=shared>T</div></div>
+<div class=rl><div id=three class=shared>T</div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes.html b/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes.html
new file mode 100644
index 0000000000..e7ac768e17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-container-writing-modes.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: container of shared element writing-modes</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-container-writing-modes-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#hidden {
+  width: 100px;
+  height: 100px;
+  background: red;
+  position: absolute;
+  top: 0;
+  left: 0;
+  contain: paint;
+  view-transition-name: hidden;
+}
+.tb { writing-mode: horizontal-tb; }
+.lr { writing-mode: vertical-lr; }
+.rl { writing-mode: vertical-rl; }
+.shared {
+  margin: 2px;
+  width: 100px;
+  height: 50px;
+  background: green;
+  contain: paint;
+  border: 1px solid black;
+}
+.source {
+  background: red;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  width: 100px;
+  height: 500px;
+  contain: paint;
+}
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(s1),
+html::view-transition-group(s2),
+html::view-transition-group(s3) { animation-duration: 0s; }
+
+html::view-transition-new(s1),
+html::view-transition-new(s2),
+html::view-transition-new(s3) { animation: unset; opacity: 1; }
+
+html::view-transition-old(s1),
+html::view-transition-old(s2),
+html::view-transition-old(s3) { animation: unset; opacity: 0; }
+
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+
+</style>
+
+<div id=hidden>Should not be visible</div>
+<div id=s1 class=source>Should not be visible</div>
+<div id=s2 class=source>Should not be visible</div>
+<div id=s3 class=source>Should not be visible</div>
+<div class=tb><div id=one class=shared>T</div></div>
+<div class=lr><div id=two class=shared>T</div></div>
+<div class=rl><div id=three class=shared>T</div></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  s1.style = "view-transition-name: s1";
+  s2.style = "view-transition-name: s2";
+  s3.style = "view-transition-name: s3";
+  document.startViewTransition(() => {
+    s1.remove();
+    s2.remove();
+    s3.remove();
+    hidden.style.left = "200px";
+    one.style = "view-transition-name: s1";
+    two.style = "view-transition-name: s2";
+    three.style = "view-transition-name: s3";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes-ref.html
new file mode 100644
index 0000000000..94280ae3af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>View transitions: shared element writing-modes (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+.tb { writing-mode: horizontal-tb; }
+.lr { writing-mode: vertical-lr; }
+.rl { writing-mode: vertical-rl; }
+.shared {
+  margin: 2px;
+  width: 100px;
+  height: 50px;
+  background: green;
+  contain: paint;
+  border: 1px solid black;
+}
+html { background: lightpink; }
+</style>
+
+<div id=one class="tb shared">T</div>
+<div id=two class="lr shared">T</div>
+<div id=three class="rl shared">T</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes.html b/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes.html
new file mode 100644
index 0000000000..d7740d78f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: shared element writing-modes</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-element-writing-modes-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#hidden {
+  width: 100px;
+  height: 100px;
+  background: red;
+  position: absolute;
+  top: 0;
+  left: 0;
+  contain: paint;
+  view-transition-name: hidden;
+}
+.tb { writing-mode: horizontal-tb; }
+.lr { writing-mode: vertical-lr; }
+.rl { writing-mode: vertical-rl; }
+.shared {
+  margin: 2px;
+  width: 100px;
+  height: 50px;
+  background: green;
+  contain: paint;
+  border: 1px solid black;
+}
+#target {
+  background: red;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  width: 100px;
+  height: 500px;
+  contain: paint;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(s1),
+html::view-transition-group(s2),
+html::view-transition-group(s3) { animation-duration: 0s; }
+
+html::view-transition-new(s1),
+html::view-transition-new(s2),
+html::view-transition-new(s3) { animation: unset; opacity: 1; }
+
+html::view-transition-old(s1),
+html::view-transition-old(s2),
+html::view-transition-old(s3) { animation: unset; opacity: 0; }
+
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+
+</style>
+
+<div id=hidden>Should not be visible</div>
+<div id=s1 class=source>Should not be visible</div>
+<div id=s2 class=source>Should not be visible</div>
+<div id=s3 class=source>Should not be visible</div>
+<div id=one class="tb shared">T</div>
+<div id=two class="lr shared">T</div>
+<div id=three class="rl shared">T</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  s1.style = "view-transition-name: s1";
+  s2.style = "view-transition-name: s2";
+  s3.style = "view-transition-name: s3";
+  document.startViewTransition(() => {
+    s1.remove();
+    s2.remove();
+    s3.remove();
+    hidden.style.left = "200px";
+    one.style = "view-transition-name: s1";
+    two.style = "view-transition-name: s2";
+    three.style = "view-transition-name: s3";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none-ref.html
new file mode 100644
index 0000000000..e936a779c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: capture starts with root being display none (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.tb { writing-mode: horizontal-tb; }
+.lr { writing-mode: vertical-lr; }
+.rl { writing-mode: vertical-rl; }
+.shared {
+  margin: 2px;
+  width: 100px;
+  height: 50px;
+  background: green;
+  contain: paint;
+  border: 1px solid black;
+}
+</style>
+
+<div class=tb><div id=one class=shared>T</div></div>
+<div class=lr><div id=two class=shared>T</div></div>
+<div class=rl><div id=three class=shared>T</div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none.html b/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none.html
new file mode 100644
index 0000000000..4d2ad28b17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-from-root-display-none.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class=reftest-wait style="display: none">
+<title>View transitions: capture starts with root being display none</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-from-root-display-none-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.tb { writing-mode: horizontal-tb; }
+.lr { writing-mode: vertical-lr; }
+.rl { writing-mode: vertical-rl; }
+.shared {
+  margin: 2px;
+  width: 100px;
+  height: 50px;
+  background: green;
+  contain: paint;
+  border: 1px solid black;
+}
+
+html::view-transition-group(root) { animation-duration: 500s; }
+html::view-transition-new(root) {
+  animation: unset;
+  opacity: 1;
+}
+html::view-transition-old(root) {
+  animation: unset;
+  opacity: 0;
+}
+
+</style>
+
+<div class=tb><div id=one class=shared>T</div></div>
+<div class=lr><div id=two class=shared>T</div></div>
+<div class=rl><div id=three class=shared>T</div></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition(() => {
+    document.documentElement.style = "";
+  });
+  transition.ready.then(() => requestAnimationFrame(takeScreenshot));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars-ref.html
new file mode 100644
index 0000000000..eddd733014
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>View transitions: incoming viewport has scrollbars (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859">
+<link rel="author" href="mailto:bokan@chromium.org">
+<style>
+  html, body {
+    width: 100%;
+    height: 100%;
+    background-color: lightpink;
+  }
+  body {
+    margin: 50px;
+  }
+  div {
+    background-image:
+      linear-gradient(45deg, #000 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #000 75%),
+      linear-gradient(45deg, transparent 75%, #000 75%),
+      linear-gradient(45deg, #000 25%, lightgreen 25%);
+    background-size: 200px 200px;
+    background-position: 0 0, 0 0, -100px -100px, 100px 100px;
+    width: 200%;
+    height: 200%;
+  }
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html b/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html
new file mode 100644
index 0000000000..4024952b13
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-has-scrollbars.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long">
+<html class=reftest-wait>
+<title>View transitions: incoming viewport has scrollbars</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859">
+<link rel="author" href="mailto:bokan@chromium.org">
+<link rel="match" href="new-content-has-scrollbars-ref.html">
+<meta name=fuzzy content="new-content-has-scrollbars-ref.html:0-40;0-30000">
+<script src="/common/reftest-wait.js"></script>
+<style>
+  html, body {
+    width: 100%;
+    height: 100%;
+    background-color: lightpink;
+  }
+  html {
+    overflow: hidden;
+  }
+  body {
+    /* Margin to make sure background color is correctly drawn into the snapshot. */
+    margin: 50px;
+  }
+  div {
+    /* Draw a checkerboard pattern to make sure the snapshot is captured at the
+     * full size, rather than scaled. */
+    background-image:
+      linear-gradient(45deg, #000 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #000 75%),
+      linear-gradient(45deg, transparent 75%, #000 75%),
+      linear-gradient(45deg, #000 25%, lightgreen 25%);
+    background-size: 200px 200px;
+    background-position: 0 0, 0 0, -100px -100px, 100px 100px;
+    width: 200%;
+    height: 200%;
+  }
+
+  /* We're verifying what we capture, so just display the old contents for 5 minutes.  */
+  html::view-transition-new(root) { animation: unset; opacity: 0; }
+  html::view-transition-old(root) {
+    animation-duration: 300s;
+    animation-timing-function: steps(1, end);
+    opacity: 1;
+  }
+</style>
+
+<div></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+// Ensure a root snapshot captured in the absence of scrollbars is displayed at
+// full size when rendered in the incoming viewport which is inset by
+// scrollbars. The content must not be scaled-to-fit.
+async function runTest() {
+  document.startViewTransition(() => {
+    document.documentElement.style.overflow = "unset";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-intrinsic-aspect-ratio.html b/testing/web-platform/tests/css/css-view-transitions/new-content-intrinsic-aspect-ratio.html
new file mode 100644
index 0000000000..53ec94122f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-intrinsic-aspect-ratio.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: different width container should keep aspect ratio (by default)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="intrinsic-aspect-ratio-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.spacer {
+  height: 10px;
+}
+.box {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  background: blue;
+}
+#target1 {
+  view-transition-name: target1;
+}
+#target2 {
+  view-transition-name: target2;
+}
+#hidden {
+  view-transition-name: hidden;
+  width: 10px;
+  height: 10px;
+  visibility: hidden;
+  contain: paint;
+}
+
+/* We're verifying what we capture, so just display the new contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+
+html::view-transition-group(target1) {
+  animation: unset;
+  width: 50px;
+  border: 2px solid black;
+}
+html::view-transition-group(target2) {
+  animation: unset;
+  width: 200px;
+  border: 2px solid black;
+}
+
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div id=target1 class=box></div>
+<div class=spacer></div>
+<div id=target2 class=box></div>
+<div id=hidden></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div-ref.html
new file mode 100644
index 0000000000..c85028d3bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>View transitions: new content captures an empty div (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  top: 50px;
+  left: 200px;
+  background: green;
+}
+body { background: lightpink; }
+</style>
+<div></div>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div.html b/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div.html
new file mode 100644
index 0000000000..bacc63f194
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-is-empty-div.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: old content captures an empty div</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-is-empty-div-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+div {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  top: 50px;
+}
+#source {
+  left: 50px;
+  background: green;
+}
+#target {
+  left: 200px;
+}
+#hidden {
+  background: red;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+/* The effect of the following should be position at the incoming element
+   but contents of the new element.
+*/
+html::view-transition-group(shared) { animation-duration: 0s; }
+html::view-transition-new(shared) { animation: unset; opacity: 1; }
+html::view-transition-old(shared) { animation: unset; opacity: 1; }
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+
+</style>
+
+<div id=source></div>
+<div id=target></div>
+<div id=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  source.style = "view-transition-name: shared";
+  document.startViewTransition(() => {
+    source.style = "";
+    target.style = "view-transition-name: shared";
+
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline-ref.html
new file mode 100644
index 0000000000..c75cfcc252
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<title>View transitions: New content is an inline element (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:bokan@chromium.org">
+
+<style>
+:root { background-color: rebeccapurple; }
+body { margin: 0; }
+
+.container {
+  position: absolute;
+  left: 100px;
+  width: 400px;
+  height: 100px;
+  background-color: grey;
+}
+
+.container.start {
+  top: 100px;
+}
+
+.container.end {
+  top: 300px;
+}
+
+.container.transitioned {
+  left: 20px;
+  width: 600px;
+  transform: translateY(-50px);
+}
+
+.inline {
+  opacity: 0;
+  background-color: coral;
+  color: rgba(0, 0, 0, 0);
+}
+
+.transitioned .inline {
+  opacity: 1;
+}
+
+#dummyStartInline {
+  position: absolute;
+  left: 100px;
+  top: 100px;
+  width: 600px;
+  /* scale transform applied in script below */
+  transform-origin: top left;
+}
+
+</style>
+
+<div class="container start">
+  <span>FILLER FILLER</span>
+  <span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
+  <p style="margin-top: 50px">START STATE</p>
+</div>
+
+<div class="container end transitioned">
+  <span>FILLER FILLER</span>
+  <span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
+  <p>END STATE</p>
+</div>
+
+<div id="dummyStartInline" class="transitioned">
+  <span style="opacity:0">FILLER FILLER</span>
+  <span class="inline">INLINE INLINE INLINE INLINE</span>
+</div>
+<script>
+  let endWidth = document.getElementById('end').getBoundingClientRect().width;
+  let startWidth = document.getElementById('start').getBoundingClientRect().width;
+  let scale = startWidth / endWidth;
+  /* Default UA CSS scales the image pseudos to match the group in the inline
+     direction. The block direction scales to retain the image's aspect ratio.
+     So have the dummy end line scale to match the start state width and apply
+     the same scale to its height. */
+  document.getElementById('dummyStartInline').style.transform = `scale(${scale})`;
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline.html b/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline.html
new file mode 100644
index 0000000000..46c96acb04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: New content is an inline element.</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:bokan@chromium.org">
+<link rel="match" href="new-content-is-inline-ref.html">
+<meta name="fuzzy" content="new-content-is-inline-ref.html:0-255;0-1000">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+body { margin : 0; }
+.container {
+  position: absolute;
+  left: 100px;
+  width: 400px;
+  height: 100px;
+  background-color: grey;
+}
+
+.container.start {
+  top: 100px;
+  view-transition-name: container-start;
+}
+
+.container.end {
+  top: 300px;
+  view-transition-name: container-end;
+}
+
+.transitioned .container {
+  left: 20px;
+  width: 600px;
+  transform: translateY(-50px);
+}
+
+.inline {
+  background-color: limegreen;
+  /* allow small pixel diff in text */
+  color: rgba(0, 0, 0, 0);
+}
+
+.start .inline {
+  view-transition-name: start;
+}
+
+.end .inline {
+  view-transition-name: end;
+}
+
+.transitioned .inline {
+  background-color: coral;
+}
+
+/* Overlay the page with purple to ensure screenshots taken are of the view
+ * transition. */
+:root {
+  view-transition-name: none;
+}
+::view-transition {
+  background-color: rebeccapurple;
+}
+
+/* This step function keeps the old snapshots in their initial state for half
+ * the duration, then the new snapshots in their final state for the last half
+ * of the duration. */
+html::view-transition-group(*),
+html::view-transition-new(*),
+html::view-transition-old(*) {
+  animation-timing-function: steps(2, jump-none);
+}
+
+/* Set different durations for start and end so the two subtrees can be
+ * differentiated. The test will manually control animation playback so
+ * duration doesn't matter. */
+html::view-transition-group(container-start),
+html::view-transition-group(start),
+html::view-transition-new(container-start),
+html::view-transition-old(container-start) {
+  animation-duration: 2s;
+}
+html::view-transition-group(container-end),
+html::view-transition-group(end),
+html::view-transition-new(container-end),
+html::view-transition-old(container-end) {
+  animation-duration: 3s;
+}
+
+/* Hide the old states for the inlines, they're tested in
+ * old-content-is-inline.html */
+html::view-transition-old(start),
+html::view-transition-old(end) {
+  animation: unset;
+  opacity: 0;
+}
+html::view-transition-new(start),
+html::view-transition-new(end) {
+  animation: unset;
+  opacity: 1;
+}
+
+</style>
+
+<!--
+This subtree will be held at the animation start to test the old content's
+starting position.
+-->
+<div class="container start">
+  <span>FILLER FILLER</span>
+  <span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
+  <p style="margin-top: 50px">START STATE</p>
+</div>
+
+<!--
+This subtree will be held at the animation end to test the old content's
+ending position.
+-->
+<div class="container end">
+  <span>FILLER FILLER</span>
+  <span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
+  <p>END STATE</p>
+</div>
+
+<script>
+if (typeof failIfNot != 'undefined')
+  failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition(() => {
+    document.body.classList.add('transitioned');
+  });
+
+  transition.ready.then(() => {
+    for (const anim of document.getAnimations()) {
+      anim.pause();
+      if (anim.effect.getTiming().duration == 3000) {
+        // This is an animation for the end subtree. Adjust it to the end
+        // (without finishing the animation) so we're displaying the final
+        // position.
+        anim.currentTime = anim.effect.getTiming().duration - 1;
+      }
+    }
+
+    requestAnimationFrame(takeScreenshot);
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html
new file mode 100644
index 0000000000..b891eee16d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: display content in a pseudo with object-fit: fill</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="content-object-fit-fill-ref.html">
+<meta name="fuzzy" content="content-object-fit-fill-ref.html:0-60;0-20">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  view-transition-name: target;
+  background: lightblue;
+}
+#inner {
+  width: 10px;
+  height: 10px;
+  background: green;
+  top: 5px;
+  left: 10px;
+}
+#hidden {
+  background: pink;
+  width: 10px;
+  height: 10px;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 50px;
+  height: 50px;
+}
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+  object-fit: fill;
+}
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+html::view-transition-group(hidden) {
+  animation-duration: 500s;
+  visibility: hidden;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div id=target><div id=inner></div></div>
+<div id=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-none.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-none.html
new file mode 100644
index 0000000000..d4b81b1a0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-none.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: display content in a pseudo with object-fit: none</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="content-object-fit-none-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  view-transition-name: target;
+  background: lightblue;
+}
+#hidden {
+  background: pink;
+  width: 10px;
+  height: 10px;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 50px;
+  height: 50px;
+}
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+  object-fit: none;
+  object-position: 0% 0%;
+}
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+html::view-transition-group(hidden) {
+  animation-duration: 500s;
+  visibility: hidden;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div id=target>This is text</div>
+<div id=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-ref.html
new file mode 100644
index 0000000000..28e22b8ca2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>View transitions: object-view-box with larger overflow (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: relative;
+  top: 50px;
+  left: 50px;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+#one { clip-path: inset(10px 12px 20px 28px); }
+#two { clip-path: inset(10px -12px 20px -28px); }
+body { background: lightpink; }
+</style>
+
+<div id=one class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+<div style="height: 20px;"></div>
+<div id=two class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference-ref.html
new file mode 100644
index 0000000000..b1871141c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<title>View transitions: object-view-box with larger overflow (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: relative;
+  top: 50px;
+  left: 50px;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+#one { clip-path: url(#clip1); }
+#two { clip-path: url(#clip2); }
+body { background: lightpink; }
+</style>
+
+<div id=one class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+<div style="height: 20px;"></div>
+<div id=two class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+
+<svg>
+  <defs>
+    <clipPath id="clip1">
+      <rect x="10" y="20" width="70" height="50" />
+    </clipPath>
+    <clipPath id="clip2">
+      <rect x="-10" y="20" width="130" height="50" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference.html
new file mode 100644
index 0000000000..01a3ed3204
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path-reference.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: object-view-box with larger clip-path</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-object-view-box-clip-path-reference-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  overflow-clip-margin: 1000px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+#one {
+  view-transition-name: target-one;
+  clip-path: url(#clip1);
+}
+#two {
+  view-transition-name: target-two;
+  clip-path: url(#clip2);
+}
+
+html::view-transition-group(target-one),
+html::view-transition-group(target-two) { animation-duration: 300s; }
+html::view-transition-old(target-one),
+html::view-transition-old(target-two) { animation: unset; opacity: 0; height: 100%; }
+html::view-transition-new(target-one),
+html::view-transition-new(target-two) {
+  animation: unset;
+  opacity: 1;
+  /* clip overflow, and verify inner contents only */
+  overflow: hidden;
+  height: 100%;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div id=one class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+<div style="height: 20px;"></div>
+<div id=two class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+
+<svg>
+  <defs>
+    <clipPath id="clip1">
+      <rect x="10" y="20" width="70" height="50" />
+    </clipPath>
+    <clipPath id="clip2">
+      <rect x="-10" y="20" width="130" height="50" />
+    </clipPath>
+  </defs>
+</svg>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path.html
new file mode 100644
index 0000000000..dcd5fec70a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-clip-path.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: object-view-box with larger clip-path</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-object-view-box-clip-path-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  overflow-clip-margin: 1000px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+#one {
+  view-transition-name: target-one;
+  clip-path: inset(10px 12px 20px 28px);
+}
+#two {
+  view-transition-name: target-two;
+  clip-path: inset(10px -12px 20px -28px);
+}
+
+html::view-transition-group(target-one),
+html::view-transition-group(target-two) { animation-duration: 300s; }
+html::view-transition-old(target-one),
+html::view-transition-old(target-two) { animation: unset; opacity: 0; height: 100%; }
+html::view-transition-new(target-one),
+html::view-transition-new(target-two) {
+  animation: unset;
+  opacity: 1;
+  /* clip overflow, and verify inner contents only */
+  overflow: hidden;
+  height: 100%;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div id=one class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+<div style="height: 20px;"></div>
+<div id=two class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped-ref.html
new file mode 100644
index 0000000000..d6016c950e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<title>View transitions: object-view-box with larger overflow (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: relative;
+  top: 50px;
+  left: 50px;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+body { background: lightpink; }
+</style>
+
+<div class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped.html
new file mode 100644
index 0000000000..593901529f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-clipped.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: object-view-box with larger overflow</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-object-view-box-overflow-clipped-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  overflow-clip-margin: 10px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  view-transition-name: target;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+
+html::view-transition-group(target) { animation-duration: 300s; }
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+
+  /* clip overflow, and verify inner contents only */
+  overflow: hidden;
+  height: 100%;
+}
+html::view-transition-old(target) { animation: unset; opacity: 0; height: 100%; }
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-ref.html
new file mode 100644
index 0000000000..d6016c950e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<title>View transitions: object-view-box with larger overflow (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: relative;
+  top: 50px;
+  left: 50px;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+body { background: lightpink; }
+</style>
+
+<div class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow.html b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow.html
new file mode 100644
index 0000000000..2bbea1e1c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-object-view-box-overflow.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: object-view-box with larger overflow</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-object-view-box-overflow-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  overflow-clip-margin: 1000px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  view-transition-name: target;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+
+html::view-transition-group(target) { animation-duration: 300s; }
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+
+  /* clip overflow, and verify inner contents only */
+  overflow: hidden;
+  height: 100%;
+}
+html::view-transition-old(target) { animation: unset; opacity: 0; height: 100%; }
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-scaling-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-content-scaling-ref.html
new file mode 100644
index 0000000000..1ca35f5a42
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-scaling-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>View transitions: display content in a pseudo with proper scaling (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.inner {
+  position: absolute;
+  inset: 4px;
+  background: green;
+}
+.dst {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  border: 1px solid blue;
+  box-sizing: border-box;
+}
+body { background: lightpink; }
+</style>
+
+<div class=dst><div class=inner></div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html b/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html
new file mode 100644
index 0000000000..4ea3c2e04a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-scaling.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: display content in a pseudo with proper scaling</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-content-scaling-ref.html">
+<meta name="fuzzy" content="new-content-scaling-ref.html:maxDifference=0-16;totalPixels=0-400">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.shared {
+  view-transition-name: shared;
+  contain: paint;
+}
+.src {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+.inner {
+  position: absolute;
+  inset: 20px;
+  background: green;
+}
+.dst {
+  position: relative;
+  width: 500px;
+  height: 500px;
+  border: 5px solid blue;
+  box-sizing: border-box;
+}
+
+html::view-transition-group(shared) {
+  animation-delay: 500s;
+}
+
+html::view-transition-new(shared) {
+  animation: unset;
+  opacity: 1;
+}
+html::view-transition-old(shared) {
+  animation: unset;
+  opacity: 0;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div id=target class="shared src"><div class=inner></div></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let t = document.startViewTransition(() => {
+    target.classList.remove("src");
+    target.classList.add("dst");
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-with-object-view-box.html b/testing/web-platform/tests/css/css-view-transitions/new-content-with-object-view-box.html
new file mode 100644
index 0000000000..47917e90f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-with-object-view-box.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long">
+<html class=reftest-wait>
+<title>View transitions: capture elements with object view box on the pseudo</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="content-with-object-view-box-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#target {
+  position: relative;
+  top: 100px;
+  left: 100px;
+  background: green;
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+}
+
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) {
+  object-view-box: inset(5px 10px 15px 20px);
+  /* Set explicit width height so that we can check the object view box math */
+  width: 100px;
+  height: 100px;
+  animation: unset;
+  opacity: 1;
+}
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: pink; }
+</style>
+<div id=target></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow-zoomed.html b/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow-zoomed.html
new file mode 100644
index 0000000000..59170ebf00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow-zoomed.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: shared element with overflow</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="content-with-overflow-zoomed-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  width: 80px;
+  height: 80px;
+  contain: paint;
+  background: blue;
+  overflow-clip-margin: 50px;
+  view-transition-name: target;
+  zoom: 1.5;
+}
+.child {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  background: green;
+  zoom: 1.2;
+}
+
+html::view-transition-group(target) { animation-duration: 300s; }
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+  border: 3px solid black;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div class=ancestor>
+  <div class=target>
+    <div class=child>
+    </div>
+  </div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow.html b/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow.html
new file mode 100644
index 0000000000..e2dc045089
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-content-with-overflow.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: shared element with overflow</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="content-with-overflow-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  background: blue;
+  overflow-clip-margin: 50px;
+  view-transition-name: target;
+}
+.child {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  background: green;
+}
+
+html::view-transition-group(target) { animation-duration: 300s; }
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div class=target>
+  <div class=child>
+  </div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-element-on-start-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-element-on-start-ref.html
new file mode 100644
index 0000000000..b3db1f2e19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-element-on-start-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>View transitions: one element captured for two tags (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  top: 50px;
+  background: black;
+  left: 200px;
+  filter: invert(1);
+}
+body { background: lightpink; }
+</style>
+<div></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-element-on-start.html b/testing/web-platform/tests/css/css-view-transitions/new-element-on-start.html
new file mode 100644
index 0000000000..7e870e9d89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-element-on-start.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: new element tag specified for start phase</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-element-on-start-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  top: 50px;
+}
+
+.before {
+  background: lightblue;
+  left: 50px;
+}
+.after {
+  background: black;
+  left: 200px;
+}
+.hidden {
+  background: red;
+  left: 350px;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { opacity: 0; }
+
+html::view-transition-group(before) { animation-duration: 0s; }
+html::view-transition-image-pair(before) { filter: invert(1); }
+
+html::view-transition-group(after) { animation-duration: 0s; }
+html::view-transition-image-pair(after) { filter: invert(1); }
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+
+</style>
+
+<div id=before class=before></div>
+<div id=after class=after></div>
+
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  hidden.style.viewTransitionName = "hidden";
+  before.style.viewTransitionName = "before";
+  let transition = document.startViewTransition(() => {
+    before.remove();
+    after.style.viewTransitionName = "after";
+  });
+  transition.ready.then(() => requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode-ref.html b/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode-ref.html
new file mode 100644
index 0000000000..f6b817d92b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>View transitions: container of shared element writing-modes (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+html { writing-mode: vertical-lr; }
+.shared {
+  margin: 2px;
+  width: 90px;
+  height: 50px;
+  background: green;
+  contain: paint;
+}
+#two {
+  background: lightblue;
+}
+</style>
+
+<div id=one class=shared>T</div>
+<div id=two class=shared></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode.html b/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode.html
new file mode 100644
index 0000000000..61dc5aca17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/new-root-vertical-writing-mode.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: container of shared element writing-modes</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-root-vertical-writing-mode-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+html { writing-mode: vertical-lr; }
+#hidden {
+  width: 100px;
+  height: 100px;
+  background: red;
+  position: absolute;
+  top: 0;
+  left: 0;
+  contain: paint;
+  view-transition-name: hidden;
+}
+.shared {
+  margin: 2px;
+  width: 90px;
+  height: 50px;
+  background: green;
+  contain: paint;
+}
+#target {
+  background: red;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  width: 100px;
+  height: 500px;
+  contain: paint;
+  view-transition-name: s1;
+}
+#two {
+  background: lightblue;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(s1) { animation-duration: 0s; }
+html::view-transition-new(s1) { animation: unset; opacity: 1; }
+html::view-transition-old(s1) { animation: unset; opacity: 0; }
+
+html::view-transition-new(root) { animation: unset; opacity: 1; }
+html::view-transition-old(root) { animation: unset; opacity: 0; }
+
+</style>
+
+<div id=hidden>Should not be visible</div>
+<div id=target>Should not be visible</div>
+<div id=one class=shared>T</div>
+<div id=two class=shared></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    target.remove();
+    hidden.style.left = "200px";
+    one.style.viewTransitionName = "s1";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/no-crash-set-exception.html b/testing/web-platform/tests/css/css-view-transitions/no-crash-set-exception.html
new file mode 100644
index 0000000000..e1596cf76e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/no-crash-set-exception.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: author styles ignored during prepare</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+  view-transition-name: shared;
+}
+
+html::view-transition,
+html::view-transition-group(shared),
+html::view-transition-image-pair(shared),
+html::view-transition-old(shared),
+html::view-transition-new(shared) {
+  background: blue;
+}
+</style>
+
+<div></div>
+
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise((resolve, reject) => {
+    document.startViewTransition(() => {
+      resolve();
+      throw 'error';
+    });
+  });
+}, "An exception thrown during a transition shouldn't crash.");
+
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/no-crash-view-transition-in-massive-iframe.html b/testing/web-platform/tests/css/css-view-transitions/no-crash-view-transition-in-massive-iframe.html
new file mode 100644
index 0000000000..c004a94dcb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/no-crash-view-transition-in-massive-iframe.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>View transitions: no crash with view-transitions in massive iframe</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:roger.johannesson@xperi.com">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+iframe { width: 40000px; height: 40000px }
+</style>
+
+<iframe></iframe>
+
+<script>
+promise_test(async t => {
+  const iframeDoc = document.getElementsByTagName("iframe")[0].contentDocument;
+  assert_implements(iframeDoc.startViewTransition, "Missing document.startViewTransition in iframe");
+  const transition = iframeDoc.startViewTransition();
+  try { await transition.ready; } catch {}
+}, "startViewTransition in massive iframe shouldn't crash.");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/no-css-animation-while-render-blocked.html b/testing/web-platform/tests/css/css-view-transitions/no-css-animation-while-render-blocked.html
new file mode 100644
index 0000000000..ae9cfda9bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/no-css-animation-while-render-blocked.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long">
+<html>
+<title>View transitions: CSS Animations are paused while render-blocked</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+@keyframes fade {
+  from {
+    opacity: 0;
+  }
+}
+
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+  view-transition-name: target;
+}
+
+.animated {
+  animation: fade 0.5s;
+}
+</style>
+
+<div id=target></div>
+
+<script>
+let renderBlocked = true;
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    requestAnimationFrame(() => {
+      document.startViewTransition(() => {
+        return new Promise(async (inner_resolve) => {
+          step_timeout(() => {
+            renderBlocked = false;
+            inner_resolve();
+          }, 1000);
+        });
+      });
+
+      target.classList.toggle("animated");
+      target.onanimationend = () => {
+        if (renderBlocked)
+          reject();
+        else
+          resolve();
+      };
+    });
+  });
+}, "CSS animation is blocked until prepare callback");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/no-raf-while-render-blocked.html b/testing/web-platform/tests/css/css-view-transitions/no-raf-while-render-blocked.html
new file mode 100644
index 0000000000..52058b7a04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/no-raf-while-render-blocked.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long">
+<html>
+<title>View transitions: rAF is not issued while render-blocked</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+  view-transition-name: target;
+}
+</style>
+
+<div id=target></div>
+
+<script>
+let renderBlocked = true;
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    requestAnimationFrame(() => {
+      document.startViewTransition(() => {
+        return new Promise(async (inner_resolve) => {
+          step_timeout(() => {
+            renderBlocked = false;
+            inner_resolve();
+          }, 1000);
+        });
+      });
+
+      requestAnimationFrame(() => {
+        if (renderBlocked)
+          reject();
+        else
+          resolve();
+      });
+    });
+  });
+}, "rAF is blocked until prepare callback");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/no-root-capture-ref.html b/testing/web-platform/tests/css/css-view-transitions/no-root-capture-ref.html
new file mode 100644
index 0000000000..98ac7c9de9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/no-root-capture-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>View transitions: shared element with overflow (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  background: blue;
+  overflow-clip-margin: 50px;
+  view-transition-name: target;
+}
+.child {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  background: green;
+}
+</style>
+
+This text should appear unmodified, since the root isn't captured.
+<div class=target>
+  <div class=child>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/no-root-capture.html b/testing/web-platform/tests/css/css-view-transitions/no-root-capture.html
new file mode 100644
index 0000000000..9e16d1e447
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/no-root-capture.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: shared element with overflow</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="no-root-capture-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root { view-transition-name: none; }
+.target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  background: blue;
+  overflow-clip-margin: 50px;
+  view-transition-name: target;
+}
+.child {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  background: green;
+}
+
+html::view-transition-group(target) { animation-duration: 300s; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+}
+
+/* None of these should apply, so make everything red if it does */
+html::view-transition-group(root) { animation: unset; opacity: 1; background: red; }
+html::view-transition-image-pair(root) { visibility: hidden }
+</style>
+
+This text should appear unmodified, since the root isn't captured.
+<div class=target>
+  <div class=child>
+  </div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/nothing-captured-ref.html b/testing/web-platform/tests/css/css-view-transitions/nothing-captured-ref.html
new file mode 100644
index 0000000000..98ac7c9de9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/nothing-captured-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>View transitions: shared element with overflow (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  background: blue;
+  overflow-clip-margin: 50px;
+  view-transition-name: target;
+}
+.child {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  background: green;
+}
+</style>
+
+This text should appear unmodified, since the root isn't captured.
+<div class=target>
+  <div class=child>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/nothing-captured.html b/testing/web-platform/tests/css/css-view-transitions/nothing-captured.html
new file mode 100644
index 0000000000..468cb6e199
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/nothing-captured.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: shared element with overflow</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="nothing-captured-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root { view-transition-name: none; }
+.target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  background: blue;
+  overflow-clip-margin: 50px;
+}
+.child {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  background: green;
+}
+
+/* None of these should apply, so make everything red if it does */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-image-pair(*) { visibility: hidden }
+html::view-transition { background: red; }
+</style>
+
+This text should appear unmodified, since the root isn't captured.
+<div class=target>
+  <div class=child>
+  </div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/object-view-box-new-image.html b/testing/web-platform/tests/css/css-view-transitions/object-view-box-new-image.html
new file mode 100644
index 0000000000..3ea7eb96b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/object-view-box-new-image.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: object-view-box</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  transform: scale(2.0, 3.0);
+  position: relative;
+  top: 200px;
+  left: 200px;
+  view-transition-name: target;
+}
+
+.embedded {
+  width: 100%;
+  height: 50%;
+}
+
+.hidden {
+  contain: paint;
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+  height: 100%;
+}
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: none;
+  object-position: 0% 0%;
+  height: 100%;
+  contain: paint;
+}
+
+</style>
+
+<div id="target" class="target">
+  <div class="embedded" style="background: green;"></div>
+  <div class="embedded" style="background: blue">SharedElement</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() =>  requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(runTest);
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html b/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html
new file mode 100644
index 0000000000..7f6f79ba44
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/object-view-box-old-image.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long">
+<html class=reftest-wait>
+<title>View transitions: object-view-box</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="object-view-box-ref.html">
+<meta name="fuzzy" content="object-view-box-ref.html:0-1;0-300">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  transform: scale(2.0, 3.0);
+  position: relative;
+  top: 200px;
+  left: 200px;
+  view-transition-name: target;
+}
+
+.embedded {
+  width: 100%;
+  height: 50%;
+}
+
+.hidden {
+  contain: paint;
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 0;
+  height: 100%;
+}
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+  object-view-box: inset(50px 0px 0px 0px);
+  object-fit: none;
+  object-position: 0% 0%;
+  height: 100%;
+  contain: paint;
+}
+
+</style>
+
+<div id="target" class="target">
+  <div class="embedded" style="background: green;"></div>
+  <div class="embedded" style="background: blue">SharedElement</div>
+</div>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() =>  requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(runTest);
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/object-view-box-ref.html b/testing/web-platform/tests/css/css-view-transitions/object-view-box-ref.html
new file mode 100644
index 0000000000..9ed1e50309
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/object-view-box-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>View transitions: object-view-box (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.target {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  transform: scale(2.0, 3.0);
+  position: relative;
+  top: 200px;
+  left: 200px;
+}
+.content {
+  width: 100px;
+  height: 50px;
+  background: blue;
+}
+
+</style>
+<div class="target">
+  <div class="content">SharedElement</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen-ref.html b/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen-ref.html
new file mode 100644
index 0000000000..171f999554
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: new element is modified while offscren and brought onscreen using pseudo (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+  position: fixed;
+  background: blue;
+  left: 0;
+  top: 0;
+}
+</style>
+
+<div id="target" class="target">
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen.html b/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen.html
new file mode 100644
index 0000000000..77c35ab583
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/offscreen-element-modified-before-coming-onscreen.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: new element is modified while offscren and brought onscreen using pseudo</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="offscreen-element-modified-before-coming-onscreen-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+  position: fixed;
+  background: green;
+  left: 0;
+  top: 200vh;
+}
+
+.hidden {
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+.onscreen::view-transition-group(target) {
+  transform: unset;
+  position: fixed;
+  top: 0;
+  left: 0;
+  animation: unset;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-old(target) { animation: unset; opacity: 0; }
+html::view-transition-new(target) { animation: unset; opacity: 1; }
+
+</style>
+
+<div id=target class=target>
+<div id=hidden class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function bringOnscreenAndScreenshot() {
+  document.documentElement.classList.add("onscreen");
+
+  requestAnimationFrame(() => requestAnimationFrame(() =>
+      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+    ));
+}
+
+async function runTest() {
+  // Start the transition while the element is offscreen.
+  let transition = document.startViewTransition();
+  await transition.ready;
+
+  // Change the element's color while its still offscreen.
+  target.style.background = "blue";
+
+  // Bring the element onscreen and ensure the color change is presented.
+  requestAnimationFrame(() => requestAnimationFrame(() =>
+    requestAnimationFrame(() => requestAnimationFrame(
+      bringOnscreenAndScreenshot))
+  ));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path-ref.html
new file mode 100644
index 0000000000..0d9d498b6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>View transitions: capture clip-path elements (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  color: red;
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+}
+#e1 {
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+  top: 20px;
+  left: 20px;
+}
+body { background: lightpink; }
+</style>
+<div id=e1 class=box></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html
new file mode 100644
index 0000000000..467b19d928
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-clip-path.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture clip-path elements</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="old-content-captures-clip-path-ref.html">
+<meta name="fuzzy" content="old-content-captures-clip-path-ref.html:0-1;0-500">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  color: red;
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+}
+#e1 {
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+  top: 20px;
+  left: 20px;
+  view-transition-name: e1;
+}
+
+div.dst { background: lightgreen; }
+/* We're verifying what we capture, so just display the old contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div id=e1 class=box></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    e1.classList.add("dst");
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size-ref.html
new file mode 100644
index 0000000000..4fbabd48f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>View transitions: capture elements with different size capture (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  color: red;
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+}
+#e1 {
+  clip-path: circle(30%);
+  top: 20px;
+  left: 20px;
+}
+#e2 {
+  clip-path: ellipse(70% 30%);
+  top: 160px;
+  left: 20px;
+}
+#e3 {
+  filter: blur(5px);
+  top: 300px;
+  left: 20px;
+}
+body { background: lightpink; }
+</style>
+<div id=e1 class=box>one</div>
+<div id=e2 class=box>two</div>
+<div id=e3 class=box>three</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html
new file mode 100644
index 0000000000..a8d375f064
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-different-size.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long">
+<html class=reftest-wait>
+<title>View transitions: capture elements with different size capture</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="old-content-captures-different-size-ref.html">
+<meta name=fuzzy content="old-content-captures-different-size-ref.html:0-40;0-30000">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  color: red;
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+}
+#e1 {
+  clip-path: circle(30%);
+  top: 20px;
+  left: 20px;
+  view-transition-name: e1;
+}
+#e2 {
+  clip-path: ellipse(70% 30%);
+  top: 160px;
+  left: 20px;
+  view-transition-name: e2;
+}
+#e3 {
+  filter: blur(5px);
+  top: 300px;
+  left: 20px;
+  view-transition-name: e3;
+}
+
+div.dst { background: lightgreen; }
+/* We're verifying what we capture, so just display the old contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div id=e1 class=box>one</div>
+<div id=e2 class=box>two</div>
+<div id=e3 class=box>three</div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    e1.classList.add("dst");
+    e2.classList.add("dst");
+    e3.classList.add("dst");
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity-ref.html
new file mode 100644
index 0000000000..33f7f5b14a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>View transitions: capture opacity elements (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  color: red;
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+  will-change: opacity;
+}
+#e1 { opacity: 0.75; top: 20px; left: 20px; }
+#e2 { opacity: 0.5; top: 160px; left: 20px; }
+#e3 { opacity: 0.25; top: 300px; left: 20px; }
+body { background: lightpink; }
+</style>
+<div id=e1 class=box>one</div>
+<div id=e2 class=box>two</div>
+<div id=e3 class=box>three</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html
new file mode 100644
index 0000000000..ee3e3e4cde
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-opacity.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture opacity elements</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="old-content-captures-opacity-ref.html">
+<meta name=fuzzy content="old-content-captures-opacity-ref.html:0-1;0-50000">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  color: red;
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+}
+#e1 { opacity: 0.75; top: 20px; left: 20px; view-transition-name: e1; }
+#e2 { opacity: 0.5; top: 160px; left: 20px; view-transition-name: e2; }
+#e3 { opacity: 0.25; top: 300px; left: 20px; view-transition-name: e3; }
+div.dst { background: lightgreen; }
+/* We're verifying what we capture, so just display the old contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+<div id=e1 class=box>one</div>
+<div id=e2 class=box>two</div>
+<div id=e3 class=box>three</div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    e1.classList.add("dst");
+    e2.classList.add("dst");
+    e3.classList.add("dst");
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root-ref.html
new file mode 100644
index 0000000000..92bd70f6f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>View transitions: capture root elements (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+}
+#e1 {
+  top: 20px;
+  left: 20px;
+}
+</style>
+<div id=e1 class=box></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html
new file mode 100644
index 0000000000..96acb9f455
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-captures-root.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture root elements</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="old-content-captures-root-ref.html">
+<meta name="fuzzy" content="old-content-captures-root-ref.html:0-1;0-500">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.box {
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+}
+#e1 {
+  top: 20px;
+  left: 20px;
+}
+#shared {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  background: red;
+  view-transition-name: shared;
+}
+
+div.dst { background: lightgreen; }
+/* We're verifying what we capture, so just display the old contents for 5 minutes.  */
+html::view-transition { background: pink; }
+html::view-transition-group(shared) { animation-duration: 300s; }
+html::view-transition-image-pair(shared) { visibility: hidden }
+html::view-transition-old(root) { animation: unset; opacity: 1 }
+html::view-transition-new(root) { animation: unset; opacity: 0 }
+</style>
+<div id=e1 class=box></div>
+<div id=shared></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    e1.classList.add("dst");
+    document.body.style.background = "red";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes-ref.html
new file mode 100644
index 0000000000..be264399c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>View transitions: container of shared element writing-modes (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+.tb { writing-mode: horizontal-tb; }
+.lr { writing-mode: vertical-lr; }
+.rl { writing-mode: vertical-rl; }
+.shared {
+  margin: 2px;
+  width: 100px;
+  height: 50px;
+  background: green;
+  contain: paint;
+  border: 1px solid black;
+}
+html { background: lightpink; }
+</style>
+
+<div class=tb><div id=one class=shared>T</div></div>
+<div class=lr><div id=two class=shared>T</div></div>
+<div class=rl><div id=three class=shared>T</div></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes.html b/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes.html
new file mode 100644
index 0000000000..9896c27152
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-container-writing-modes.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: container of shared element writing-modes</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="old-content-container-writing-modes-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#hidden {
+  width: 100px;
+  height: 100px;
+  background: red;
+  position: absolute;
+  top: 0;
+  left: 0;
+  contain: paint;
+  view-transition-name: hidden;
+}
+.tb { writing-mode: horizontal-tb; }
+.lr { writing-mode: vertical-lr; }
+.rl { writing-mode: vertical-rl; }
+.shared {
+  margin: 2px;
+  width: 100px;
+  height: 50px;
+  background: green;
+  contain: paint;
+  border: 1px solid black;
+}
+#target1, #target2, #target3 {
+  background: red;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  width: 100px;
+  height: 500px;
+  contain: paint;
+}
+#one { view-transition-name: s1; }
+#two { view-transition-name: s2; }
+#three { view-transition-name: s3; }
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(s1),
+html::view-transition-group(s2),
+html::view-transition-group(s3) {
+  animation-delay: 300s;
+  animation-fill-mode: both;
+}
+
+html::view-transition-new(s1),
+html::view-transition-new(s2),
+html::view-transition-new(s3) { animation: unset; opacity: 0; }
+
+html::view-transition-old(s1),
+html::view-transition-old(s2),
+html::view-transition-old(s3) { animation: unset; opacity: 1; }
+
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+
+</style>
+
+<div id=hidden>Should not be visible</div>
+<div id=target1>Should not be visible</div>
+<div id=target2>Should not be visible</div>
+<div id=target3>Should not be visible</div>
+<div class=tb><div id=one class=shared>T</div></div>
+<div class=lr><div id=two class=shared>T</div></div>
+<div class=rl><div id=three class=shared>T</div></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    one.remove();
+    two.remove();
+    three.remove();
+    hidden.style.left = "200px";
+    target1.style.viewTransitionName = "s1";
+    target2.style.viewTransitionName = "s2";
+    target3.style.viewTransitionName = "s3";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes-ref.html
new file mode 100644
index 0000000000..8c57dba658
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>View transitions: shared element writing-modes (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+.tb { writing-mode: horizontal-tb; }
+.lr { writing-mode: vertical-lr; }
+.rl { writing-mode: vertical-rl; }
+.shared {
+  margin: 2px;
+  width: 100px;
+  height: 50px;
+  background: green;
+  contain: paint;
+  border: 1px solid black;
+}
+html { background: lightpink; }
+</style>
+
+<div id=one class="tb shared">T</div>
+<div id=two class="lr shared">T</div>
+<div id=three class="rl shared">T</div>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes.html b/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes.html
new file mode 100644
index 0000000000..5029c6aaaa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-element-writing-modes.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: shared element writing-modes</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="old-content-element-writing-modes-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#hidden {
+  width: 100px;
+  height: 100px;
+  background: red;
+  position: absolute;
+  top: 0;
+  left: 0;
+  contain: paint;
+  view-transition-name: hidden;
+}
+.tb { writing-mode: horizontal-tb; }
+.lr { writing-mode: vertical-lr; }
+.rl { writing-mode: vertical-rl; }
+.shared {
+  margin: 2px;
+  width: 100px;
+  height: 50px;
+  background: green;
+  contain: paint;
+  border: 1px solid black;
+}
+#target1, #target2, #target3 {
+  background: red;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  width: 100px;
+  height: 500px;
+  contain: paint;
+}
+#one { view-transition-name: s1; }
+#two { view-transition-name: s2; }
+#three { view-transition-name: s3; }
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(s1),
+html::view-transition-group(s2),
+html::view-transition-group(s3) {
+  animation-delay: 300s;
+  animation-fill-mode: both;
+}
+
+html::view-transition-new(s1),
+html::view-transition-new(s2),
+html::view-transition-new(s3) { animation: unset; opacity: 0; }
+
+html::view-transition-old(s1),
+html::view-transition-old(s2),
+html::view-transition-old(s3) { animation: unset; opacity: 1; }
+
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+
+</style>
+
+<div id=hidden>Should not be visible</div>
+<div id=target1>Should not be visible</div>
+<div id=target2>Should not be visible</div>
+<div id=target3>Should not be visible</div>
+<div id=one class="shared tb">T</div>
+<div id=two class="shared lr">T</div>
+<div id=three class="shared rl">T</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    one.remove();
+    two.remove();
+    three.remove();
+    hidden.style.left = "200px";
+    target1.style.viewTransitionName = "s1";
+    target2.style.viewTransitionName = "s2";
+    target3.style.viewTransitionName = "s3";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars-ref.html
new file mode 100644
index 0000000000..b349e80700
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>View transitions: outgoing viewport has scrollbars (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859">
+<link rel="author" href="mailto:bokan@chromium.org">
+<style>
+  html, body {
+    width: 100%;
+    height: 100%;
+    background-color: lightpink;
+  }
+  html {
+    overflow: hidden;
+  }
+  body {
+    margin: 50px;
+  }
+  div {
+    background-image:
+      linear-gradient(45deg, #000 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #000 75%),
+      linear-gradient(45deg, transparent 75%, #000 75%),
+      linear-gradient(45deg, #000 25%, lightgreen 25%);
+    background-size: 200px 200px;
+    background-position: 0 0, 0 0, -100px -100px, 100px 100px;
+    width: 200%;
+    height: 200%;
+  }
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html b/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html
new file mode 100644
index 0000000000..781ff7c125
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-has-scrollbars.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long">
+<html class=reftest-wait>
+<title>View transitions: outgoing viewport has scrollbars</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859">
+<link rel="author" href="mailto:bokan@chromium.org">
+<link rel="match" href="old-content-has-scrollbars-ref.html">
+<meta name=fuzzy content="old-content-has-scrollbars-ref.html:0-40;0-30000">
+<script src="/common/reftest-wait.js"></script>
+<style>
+  html, body {
+    width: 100%;
+    height: 100%;
+    background-color: lightpink;
+  }
+  body {
+    /* Margin to make sure background color is correctly drawn into the snapshot. */
+    margin: 50px;
+  }
+  div {
+    /* Draw a checkerboard pattern to make sure the snapshot is captured at the
+     * full size, rather than scaled. */
+    background-image:
+      linear-gradient(45deg, #000 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #000 75%),
+      linear-gradient(45deg, transparent 75%, #000 75%),
+      linear-gradient(45deg, #000 25%, lightgreen 25%);
+    background-size: 200px 200px;
+    background-position: 0 0, 0 0, -100px -100px, 100px 100px;
+    width: 200%;
+    height: 200%;
+  }
+
+  /* We're verifying what we capture, so just display the old contents for 5 minutes.  */
+  html::view-transition-new(root) { animation: unset; opacity: 0; }
+  html::view-transition-old(root) {
+    animation-duration: 300s;
+    animation-timing-function: steps(1, end);
+    opacity: 1;
+  }
+</style>
+
+<div></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+// Ensure a root snapshot captured on a page with scrollbars uses the full
+// viewport size (including scrollbars). Areas obscured by scrollbars should be
+// filled with background and content; the snapshot should not be scaled-to-fit.
+async function runTest() {
+  document.startViewTransition(() => {
+    document.querySelector('div').remove();
+    document.documentElement.style.overflow = "hidden";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-intrinsic-aspect-ratio.html b/testing/web-platform/tests/css/css-view-transitions/old-content-intrinsic-aspect-ratio.html
new file mode 100644
index 0000000000..b46a778217
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-intrinsic-aspect-ratio.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: different width container should keep aspect ratio (by default)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="intrinsic-aspect-ratio-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.spacer {
+  height: 10px;
+}
+.box {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  background: blue;
+}
+#target1 {
+  view-transition-name: target1;
+}
+#target2 {
+  view-transition-name: target2;
+}
+#hidden {
+  view-transition-name: hidden;
+  width: 10px;
+  height: 10px;
+  visibility: hidden;
+  contain: paint;
+}
+
+/* We're verifying what we capture, so just display the new contents for 5 minutes.  */
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+
+html::view-transition-group(target1) {
+  animation: unset;
+  width: 50px;
+  border: 2px solid black;
+}
+html::view-transition-group(target2) {
+  animation: unset;
+  width: 200px;
+  border: 2px solid black;
+}
+
+/* hide the root so we show transition background to ensure we're in a transition */
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div id=target1 class=box></div>
+<div class=spacer></div>
+<div id=target2 class=box></div>
+<div id=hidden></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div-ref.html
new file mode 100644
index 0000000000..b4b17ee780
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>View transitions: old content captures an empty div (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  background: green;
+}
+body { background: lightpink; }
+</style>
+<div></div>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div.html b/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div.html
new file mode 100644
index 0000000000..137060c1dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-is-empty-div.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: old content captures an empty div</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="old-content-is-empty-div-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+div {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  top: 50px;
+}
+#empty {
+  left: 50px;
+}
+#target {
+  left: 200px;
+  background: green;
+}
+#hidden {
+  background: red;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+/* The effect of the following should be position at the outgoing element
+   but contents of the new element.
+*/
+html::view-transition-group(shared) { animation-delay: 100s; }
+html::view-transition-new(shared) { animation: unset; opacity: 1; }
+html::view-transition-old(shared) { animation: unset; opacity: 1; }
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+
+</style>
+
+<div id=empty></div>
+<div id=target></div>
+<div id=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  empty.style.viewTransitionName = "shared";
+  document.startViewTransition(() => {
+    empty.style.viewTransitionName = "";
+    target.style.viewTransitionName = "shared";
+
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline-ref.html
new file mode 100644
index 0000000000..5459d1d482
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline-ref.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<title>View transitions: Old content is an inline element (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:bokan@chromium.org">
+
+<style>
+:root { background-color: rebeccapurple; }
+body { margin: 0; }
+
+.container {
+  position: absolute;
+  left: 100px;
+  width: 400px;
+  height: 100px;
+  background-color: grey;
+}
+
+.container.start {
+  top: 100px;
+}
+
+.container.end {
+  top: 300px;
+}
+
+.container.transitioned {
+  left: 20px;
+  width: 600px;
+  transform: translateY(-50px);
+}
+
+.inline {
+  background-color: limegreen;
+  color: rgba(0, 0, 0, 0);
+}
+
+.transitioned .inline {
+  opacity: 0;
+}
+
+#dummyEndInline {
+  position: absolute;
+  left: 20px;
+  top: 250px;
+  /* scale transform applied in script below */
+  transform-origin: top left;
+}
+
+</style>
+
+<div class="container start">
+  <span>FILLER FILLER</span>
+  <span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
+  <p>START STATE</p>
+</div>
+
+<div class="container end transitioned">
+  <span>FILLER FILLER</span>
+  <span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
+  <p>END STATE</p>
+</div>
+
+<div id="dummyEndInline">
+  <span style="opacity:0">FILLER FILLER</span>
+  <span class="inline">INLINE INLINE INLINE INLINE</span>
+</div>
+<script>
+  let endWidth = document.getElementById('end').getBoundingClientRect().width;
+  let startWidth = document.getElementById('start').getBoundingClientRect().width;
+  let scale = endWidth / startWidth;
+  /* Default UA CSS scales the image pseudos to match the group in the inline
+     direction. The block direction scales to retain the image's aspect ratio.
+     So have the dummy end line scale to match the end state width and apply the
+     same scale to its height. */
+  document.getElementById('dummyEndInline').style.transform = `scale(${scale})`;
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline.html b/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline.html
new file mode 100644
index 0000000000..70ff67c0e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-is-inline.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: Old content is an inline element.</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:bokan@chromium.org">
+<link rel="match" href="old-content-is-inline-ref.html">
+<meta name="fuzzy" content="old-content-is-inline-ref.html:0-255;0-500">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+body { margin : 0; }
+.container {
+  position: absolute;
+  left: 100px;
+  width: 400px;
+  height: 100px;
+  background-color: grey;
+}
+
+.container.start {
+  top: 100px;
+  view-transition-name: container-start;
+}
+
+.container.end {
+  top: 300px;
+  view-transition-name: container-end;
+}
+
+.transitioned .container {
+  left: 20px;
+  width: 600px;
+  transform: translateY(-50px);
+}
+
+.inline {
+  background-color: limegreen;
+  /* allow small pixel diff in text */
+  color: rgba(0, 0, 0, 0);
+}
+
+.start .inline {
+  view-transition-name: start;
+}
+
+.end .inline {
+  view-transition-name: end;
+}
+
+.transitioned .inline {
+  background-color: coral;
+}
+
+/* Overlay the page with purple to ensure screenshots taken are of the view
+ * transition. */
+:root {
+  view-transition-name: none;
+}
+::view-transition {
+  background-color: rebeccapurple;
+}
+
+/* This step function keeps the old snapshots in their initial state for half
+ * the duration, then the new snapshots in their final state for the last half
+ * of the duration. */
+html::view-transition-group(*),
+html::view-transition-new(*),
+html::view-transition-old(*) {
+  animation-timing-function: steps(2, jump-none);
+}
+
+/* Set different durations for start and end so the two subtrees can be
+ * differentiated. The test will manually control animation playback so
+ * duration doesn't matter. */
+html::view-transition-group(container-start),
+html::view-transition-group(start),
+html::view-transition-new(container-start),
+html::view-transition-old(container-start) {
+  animation-duration: 2s;
+}
+html::view-transition-group(container-end),
+html::view-transition-group(end),
+html::view-transition-new(container-end),
+html::view-transition-old(container-end) {
+  animation-duration: 3s;
+}
+
+/* Hide the new states for the inlines, they're tested in
+ * new-content-is-inline.html */
+html::view-transition-new(start),
+html::view-transition-new(end) {
+  animation: unset;
+  opacity: 0;
+}
+html::view-transition-old(start),
+html::view-transition-old(end) {
+  animation: unset;
+  opacity: 1;
+}
+
+</style>
+
+<!--
+This subtree will be held at the animation start to test the old content's
+starting position.
+-->
+<div class="container start">
+  <span>FILLER FILLER</span>
+  <span id="start" class="inline">INLINE INLINE INLINE INLINE</span>
+  <p>START STATE</p>
+</div>
+
+<!--
+This subtree will be held at the animation end to test the old content's
+ending position.
+-->
+<div class="container end">
+  <span>FILLER FILLER</span>
+  <span id="end" class="inline">INLINE INLINE INLINE INLINE</span>
+  <p>END STATE</p>
+</div>
+
+<script>
+if (typeof failIfNot != 'undefined')
+  failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition(() => {
+    document.body.classList.add('transitioned');
+  });
+
+  transition.ready.then(() => {
+    for (const anim of document.getAnimations()) {
+      anim.pause();
+      if (anim.effect.getTiming().duration == 3000) {
+        // This is an animation for the end subtree. Adjust it to the end
+        // (without finishing the animation) so we're displaying the final
+        // position.
+        anim.currentTime = anim.effect.getTiming().duration - 1;
+      }
+    }
+
+    requestAnimationFrame(takeScreenshot);
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html
new file mode 100644
index 0000000000..9ad8b14843
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: display content in a pseudo with object-fit: fill</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="content-object-fit-fill-ref.html">
+<meta name="fuzzy" content="content-object-fit-fill-ref.html:0-60;0-20">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  view-transition-name: target;
+  background: lightblue;
+}
+#inner {
+  width: 10px;
+  height: 10px;
+  background: green;
+  top: 5px;
+  left: 10px;
+}
+#hidden {
+  background: pink;
+  width: 10px;
+  height: 10px;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 50px;
+  height: 50px;
+}
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 0;
+}
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+  object-fit: fill;
+}
+
+html::view-transition-group(hidden) {
+  animation-duration: 500s;
+  visibility: hidden;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div id=target><div id=inner></div></div>
+<div id=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-none.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-none.html
new file mode 100644
index 0000000000..1275aece7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-none.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: display content in a pseudo with object-fit: none</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="content-object-fit-none-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  view-transition-name: target;
+  background: lightblue;
+}
+#hidden {
+  background: pink;
+  width: 10px;
+  height: 10px;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(target) {
+  animation: unset;
+  transform: unset;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 50px;
+  height: 50px;
+}
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 0;
+}
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+  object-fit: none;
+  object-position: 0% 0%;
+}
+
+html::view-transition-group(hidden) {
+  animation-duration: 500s;
+  visibility: hidden;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div id=target>This is text</div>
+<div id=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-ref.html
new file mode 100644
index 0000000000..28e22b8ca2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>View transitions: object-view-box with larger overflow (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: relative;
+  top: 50px;
+  left: 50px;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+#one { clip-path: inset(10px 12px 20px 28px); }
+#two { clip-path: inset(10px -12px 20px -28px); }
+body { background: lightpink; }
+</style>
+
+<div id=one class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+<div style="height: 20px;"></div>
+<div id=two class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference-ref.html
new file mode 100644
index 0000000000..b1871141c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<title>View transitions: object-view-box with larger overflow (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: relative;
+  top: 50px;
+  left: 50px;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+#one { clip-path: url(#clip1); }
+#two { clip-path: url(#clip2); }
+body { background: lightpink; }
+</style>
+
+<div id=one class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+<div style="height: 20px;"></div>
+<div id=two class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+
+<svg>
+  <defs>
+    <clipPath id="clip1">
+      <rect x="10" y="20" width="70" height="50" />
+    </clipPath>
+    <clipPath id="clip2">
+      <rect x="-10" y="20" width="130" height="50" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html
new file mode 100644
index 0000000000..14a1ee83d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path-reference.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: object-view-box with larger clip-path</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="old-content-object-view-box-clip-path-reference-ref.html">
+<meta name="fuzzy" content="old-content-object-view-box-clip-path-reference-ref.html:0-1;0-100">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  overflow-clip-margin: 1000px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+#one {
+  view-transition-name: target-one;
+  clip-path: url(#clip1);
+}
+#two {
+  view-transition-name: target-two;
+  clip-path: url(#clip2)
+}
+
+html::view-transition-group(target-one),
+html::view-transition-group(target-two) { animation-duration: 300s; }
+html::view-transition-new(target-one),
+html::view-transition-new(target-two) { animation: unset; opacity: 0; height: 100%; }
+html::view-transition-old(target-one),
+html::view-transition-old(target-two) {
+  animation: unset;
+  opacity: 1;
+  /* clip overflow, and verify inner contents only */
+  overflow: hidden;
+  height: 100%;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div id=one class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+<div style="height: 20px;"></div>
+<div id=two class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+
+<svg>
+  <defs>
+    <clipPath id="clip1">
+      <rect x="10" y="20" width="70" height="50" />
+    </clipPath>
+    <clipPath id="clip2">
+      <rect x="-10" y="20" width="130" height="50" />
+    </clipPath>
+  </defs>
+</svg>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html
new file mode 100644
index 0000000000..dff57c68f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-clip-path.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: object-view-box with larger clip-path</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="old-content-object-view-box-clip-path-ref.html">
+<meta name="fuzzy" content="old-content-object-view-box-clip-path-ref.html:0-1;0-30">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  overflow-clip-margin: 1000px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+#one {
+  view-transition-name: target-one;
+  clip-path: inset(10px 12px 20px 28px);
+}
+#two {
+  view-transition-name: target-two;
+  clip-path: inset(10px -12px 20px -28px);
+}
+
+html::view-transition-group(target-one),
+html::view-transition-group(target-two) { animation-duration: 300s; }
+html::view-transition-new(target-one),
+html::view-transition-new(target-two) { animation: unset; opacity: 0; height: 100%; }
+html::view-transition-old(target-one),
+html::view-transition-old(target-two) {
+  animation: unset;
+  opacity: 1;
+  /* clip overflow, and verify inner contents only */
+  overflow: hidden;
+  height: 100%;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div id=one class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+<div style="height: 20px;"></div>
+<div id=two class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow-ref.html
new file mode 100644
index 0000000000..d6016c950e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<title>View transitions: object-view-box with larger overflow (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: relative;
+  top: 50px;
+  left: 50px;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+body { background: lightpink; }
+</style>
+
+<div class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow.html b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow.html
new file mode 100644
index 0000000000..ff9bb4e7d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-object-view-box-overflow.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: object-view-box with larger overflow</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="old-content-object-view-box-overflow-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  color: red;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  overflow-clip-margin: 1000px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  view-transition-name: target;
+}
+.child {
+  width: 123px;
+  height: 150px;
+  background: lightblue;
+  position: relative;
+  top: -10px;
+  left: -20px;
+}
+.grandchild {
+  width: 25px;
+  height: 25px;
+  position: relative;
+  top: 20px;
+  left: 40px;
+  background: green;
+}
+
+html::view-transition-group(target) { animation-duration: 300s; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+  /* clip overflow, and verify inner contents only */
+  overflow: hidden;
+  height: 100%;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div class=target>
+  <div class=child>
+    <div class=grandchild></div>
+  </div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-with-object-view-box.html b/testing/web-platform/tests/css/css-view-transitions/old-content-with-object-view-box.html
new file mode 100644
index 0000000000..f24c8e60d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-with-object-view-box.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta name="timeout" content="long">
+<html class=reftest-wait>
+<title>View transitions: capture elements with object view box on the pseudo</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="content-with-object-view-box-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#target {
+  position: relative;
+  top: 100px;
+  left: 100px;
+  background: green;
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+}
+
+html::view-transition-group(*) { animation-duration: 300s; }
+html::view-transition-old(*) {
+  object-view-box: inset(5px 10px 15px 20px);
+  /* Need to specify explicit dimensions since view box changes intrinsic size */
+  width: 100px;
+  height: 100px;
+  animation: unset;
+  opacity: 1;
+}
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: pink; }
+</style>
+<div id=target></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow-zoomed.html b/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow-zoomed.html
new file mode 100644
index 0000000000..10257b761f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow-zoomed.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: shared element with overflow</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="content-with-overflow-zoomed-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  width: 80px;
+  height: 80px;
+  contain: paint;
+  background: blue;
+  overflow-clip-margin: 50px;
+  view-transition-name: target;
+  zoom: 1.5;
+}
+.child {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  background: green;
+  zoom: 1.2;
+}
+
+html::view-transition-group(target) { animation-duration: 300s; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+  border: 3px solid black;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div class=ancestor>
+  <div class=target>
+    <div class=child>
+    </div>
+  </div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow.html b/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow.html
new file mode 100644
index 0000000000..6ed31d375c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: shared element with overflow</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="content-with-overflow-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  background: blue;
+  overflow-clip-margin: 50px;
+  view-transition-name: target;
+}
+.child {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  background: green;
+}
+
+html::view-transition-group(target) { animation-duration: 300s; }
+html::view-transition-new(target) { animation: unset; opacity: 0; }
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+}
+
+html::view-transition-group(root) { animation: unset; opacity: 0; }
+html::view-transition { background: lightpink; }
+</style>
+
+<div class=target>
+  <div class=child>
+  </div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() =>
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode-ref.html b/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode-ref.html
new file mode 100644
index 0000000000..bb4f2df0f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>View transitions: container of shared element writing-modes (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+html { writing-mode: vertical-lr; }
+.shared {
+  margin: 2px;
+  width: 90px;
+  height: 50px;
+  background: green;
+  contain: paint;
+}
+#two {
+  background: lightblue;
+  will-change: transform;
+}
+</style>
+
+<div id=one class=shared>T</div>
+<div id=two class=shared></div>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode.html b/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode.html
new file mode 100644
index 0000000000..5f4425f64d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/old-root-vertical-writing-mode.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: container of shared element writing-modes</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="new-root-vertical-writing-mode-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+html { writing-mode: vertical-lr; }
+#hidden {
+  width: 100px;
+  height: 100px;
+  background: red;
+  position: absolute;
+  top: 0;
+  left: 0;
+  contain: paint;
+  view-transition-name: hidden;
+}
+.shared {
+  margin: 2px;
+  width: 90px;
+  height: 50px;
+  background: green;
+  contain: paint;
+}
+#target {
+  background: red;
+  position: absolute;
+  top: 50px;
+  left: 50px;
+  width: 100px;
+  height: 500px;
+  contain: paint;
+}
+#one { view-transition-name: s1; }
+#two {
+  background: lightblue;
+  will-change: transform;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(s1) { animation-delay: 100s; animation-fill-mode: both; }
+html::view-transition-new(s1) { animation: unset; opacity: 0; }
+html::view-transition-old(s1) { animation: unset; opacity: 1; }
+
+html::view-transition-new(root) { animation: unset; opacity: 0; }
+html::view-transition-old(root) { animation: unset; opacity: 1; }
+
+</style>
+
+<div id=hidden>Should not be visible</div>
+<div id=target style="display: none">Should not be visible</div>
+<div id=one class=shared>T</div>
+<div id=two class=shared></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    one.remove();
+    target.style = "";
+    target.style.viewTransitionName = "s1";
+    hidden.style.left = "200px";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
+
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-group.html b/testing/web-platform/tests/css/css-view-transitions/only-child-group.html
new file mode 100644
index 0000000000..05275a3448
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/only-child-group.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html class="reftest-wait foo">
+<title>View transitions: ensure :only-child is supported on view-transition-group</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+::view-transition {
+  background-color: black;
+}
+html:only-child {
+  background-color: black;
+}
+:root:only-child {
+  background-color: black;
+}
+:only-child {
+  background-color: black;
+}
+.foo:only-child {
+  background-color: black;
+}
+
+::view-transition-group(root) {
+  background-color: blue;
+}
+::view-transition-group(target) {
+  background-color: blue;
+}
+::view-transition-group(*) {
+  color: blue;
+}
+
+::view-transition-group(root):only-child {
+  background-color: red;
+}
+::view-transition-group(target):only-child {
+  background-color: red;
+}
+::view-transition-group(*):only-child {
+  color: red;
+}
+
+</style>
+<div id="target"></div>
+<div id="target2"></div>
+
+<script>
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition();
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-group(root)");
+      if (style.backgroundColor == "rgb(255, 0, 0)" && style.color == "rgb(255, 0, 0)")
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should match because ::view-transition-group is generated for root element only");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    target.style.viewTransitionName = "target";
+    let transition = document.startViewTransition();
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-group(root)");
+      if (style.backgroundColor == "rgb(0, 0, 255)" && style.color == "rgb(0, 0, 255)")
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should not match because ::view-transition-group is generated for multiple elements");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    document.documentElement.style.viewTransitionName = "none";
+    target.style.viewTransitionName = "target";
+    let transition = document.startViewTransition();
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-group(target)");
+      if (style.backgroundColor == "rgb(255, 0, 0)" && style.color == "rgb(255, 0, 0)")
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should match because ::view-transition-group is generated for sub element only");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    document.documentElement.style.viewTransitionName = "none";
+    target.style.viewTransitionName = "target";
+    target2.style.viewTransitionName = "target2";
+    let transition = document.startViewTransition();
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-group(target)");
+      if (style.backgroundColor == "rgb(0, 0, 255)" && style.color == "rgb(0, 0, 255)")
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should not match because ::view-transition-group is generated for multiple sub elements");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-image-pair.html b/testing/web-platform/tests/css/css-view-transitions/only-child-image-pair.html
new file mode 100644
index 0000000000..288d496346
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/only-child-image-pair.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html class="reftest-wait foo">
+<title>View transitions: ensure :only-child is supported on view-transition-image-pair</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+::view-transition {
+  background-color: black;
+}
+html:only-child {
+  background-color: black;
+}
+:root:only-child {
+  background-color: black;
+}
+:only-child {
+  background-color: black;
+}
+.foo:only-child {
+  background-color: black;
+}
+
+::view-transition-image-pair(root):only-child {
+  background-color: red;
+}
+::view-transition-image-pair(*):only-child {
+  color: red;
+}
+</style>
+
+<script>
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition();
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-image-pair(root)");
+      if (style.backgroundColor == "rgb(255, 0, 0)" && style.color == "rgb(255, 0, 0)")
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should always match for ::view-transition-image-pair");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-new.html b/testing/web-platform/tests/css/css-view-transitions/only-child-new.html
new file mode 100644
index 0000000000..9f36528219
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/only-child-new.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html class="reftest-wait foo">
+<title>View transitions: ensure :only-child is supported on view-transition-new</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+::view-transition {
+  background-color: black;
+}
+html:only-child {
+  background-color: black;
+}
+:root:only-child {
+  background-color: black;
+}
+:only-child {
+  background-color: black;
+}
+.foo:only-child {
+  background-color: black;
+}
+
+::view-transition-new(root) {
+  background-color: blue;
+}
+::view-transition-new(target) {
+  background-color: blue;
+}
+::view-transition-new(*) {
+  color: blue;
+}
+
+::view-transition-new(root):only-child {
+  background-color: red;
+}
+::view-transition-new(target):only-child {
+  background-color: red;
+}
+::view-transition-new(*):only-child {
+  color: red;
+}
+
+</style>
+<div id="target"></div>
+
+<script>
+let matchedColor = "rgb(255, 0, 0)";
+let notMatchedColor = "rgb(0, 0, 255)";
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    document.documentElement.style.viewTransitionName = "none";
+    target.style.viewTransitionName = "none";
+    let transition = document.startViewTransition(() => {
+      document.documentElement.style.viewTransitionName = "root";
+    });
+
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-new(root)");
+      if (style.backgroundColor == matchedColor && style.color == matchedColor)
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should match because ::view-transition-old is not generated (none to root)");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    document.documentElement.style.viewTransitionName = "root";
+    target.style.viewTransitionName = "none";
+    let transition = document.startViewTransition();
+
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-new(root)");
+      if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should not match because ::view-transition-old is generated (root to root)");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    document.documentElement.style.viewTransitionName = "none";
+    target.style.viewTransitionName = "root";
+    let transition = document.startViewTransition(() => {
+       document.documentElement.style.viewTransitionName = "root";
+       target.style.viewTransitionName = "none";
+    });
+
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-new(root)");
+      if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should not match because ::view-transition-old is generated (element to root)");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    target.style.viewTransitionName = "none";
+    document.documentElement.style.viewTransitionName = "none";
+    let transition = document.startViewTransition(() => {
+      target.style.viewTransitionName = "target";
+    });
+
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-new(target)");
+      if (style.backgroundColor == matchedColor && style.color == matchedColor)
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should match because ::view-transition-old is not generated (none to element)");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    target.style.viewTransitionName = "none";
+    document.documentElement.style.viewTransitionName = "root";
+    let transition = document.startViewTransition(() => {
+      document.documentElement.style.viewTransitionName = "none";
+      target.style.viewTransitionName = "element";
+    });
+
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-new(root)");
+      if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should not match because ::view-transition-old is generated (root to element)");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    target.style.viewTransitionName = "target";
+    document.documentElement.style.viewTransitionName = "none";
+    let transition = document.startViewTransition();
+
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-new(target)");
+      if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should not match because ::view-transition-old is generated (element to element)");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-no-transition.html b/testing/web-platform/tests/css/css-view-transitions/only-child-no-transition.html
new file mode 100644
index 0000000000..7dc2bf1217
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/only-child-no-transition.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: :only-child style queries without transition shouldn't crash</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+::view-transition:only-child,
+::view-transition-group(*):only-child,
+::view-transition-image-pair(*):only-child,
+::view-transition-old(*):only-child,
+::view-transition-new(*):only-child {
+  background-color: blue;
+}
+</style>
+
+<script>
+promise_test(() => {
+  return new Promise(async (resolve, reject) => {
+    let elements = [
+      "view-transition",
+      "view-transition-group(foo)",
+      "view-transition-image-pair(foo)",
+      "view-transition-old(foo)",
+      "view-transition-old(foo)"
+    ];
+
+    for (let i = 0; i < elements.length; i++) {
+      let style = window.getComputedStyle(document.documentElement, elements[i]);
+      if (style.backgroundColor == "rgb(0, 0, 255")
+        reject();
+    }
+    resolve();
+  });
+}, ":only-child style queries without transition shouldn't crash");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-old.html b/testing/web-platform/tests/css/css-view-transitions/only-child-old.html
new file mode 100644
index 0000000000..7a55af7397
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/only-child-old.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html class="reftest-wait foo">
+<title>View transitions: ensure :only-child is supported on view-transition-old</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+::view-transition {
+  background-color: black;
+}
+html:only-child {
+  background-color: black;
+}
+:root:only-child {
+  background-color: black;
+}
+:only-child {
+  background-color: black;
+}
+.foo:only-child {
+  background-color: black;
+}
+
+::view-transition-old(root) {
+  background-color: blue;
+}
+::view-transition-old(target) {
+  background-color: blue;
+}
+::view-transition-old(*) {
+  color: blue;
+}
+
+::view-transition-old(root):only-child {
+  background-color: red;
+}
+::view-transition-old(target):only-child {
+  background-color: red;
+}
+::view-transition-old(*):only-child {
+  color: red;
+}
+
+</style>
+<div id="target"></div>
+
+<script>
+let matchedColor = "rgb(255, 0, 0)";
+let notMatchedColor = "rgb(0, 0, 255)";
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    document.documentElement.style.viewTransitionName = "root";
+    target.style.viewTransitionName = "none";
+    let transition = document.startViewTransition(() => {
+      document.documentElement.style.viewTransitionName = "none";
+    });
+
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-old(root)");
+      if (style.backgroundColor == matchedColor && style.color == matchedColor)
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should match because ::view-transition-new is not generated (root to none)");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    document.documentElement.style.viewTransitionName = "root";
+    target.style.viewTransitionName = "none";
+    let transition = document.startViewTransition();
+
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-old(root)");
+      if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should not match because ::view-transition-new is generated (root to root)");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    document.documentElement.style.viewTransitionName = "root";
+    target.style.viewTransitionName = "none";
+    let transition = document.startViewTransition(() => {
+      document.documentElement.style.viewTransitionName = "none";
+      target.style.viewTransitionName = "root";
+    });
+
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-old(root)");
+      if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should not match because ::view-transition-new is generated (root to element)");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    target.style.viewTransitionName = "target";
+    document.documentElement.style.viewTransitionName = "none";
+    let transition = document.startViewTransition(() => {
+      target.style.viewTransitionName = "none";
+    });
+
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-old(target)");
+      if (style.backgroundColor == matchedColor && style.color == matchedColor)
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should match because ::view-transition-new is not generated (element to none)");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    target.style.viewTransitionName = "root";
+    document.documentElement.style.viewTransitionName = "none";
+    let transition = document.startViewTransition(() => {
+      document.documentElement.style.viewTransitionName = "root";
+      target.style.viewTransitionName = "none";
+    });
+
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-old(root)");
+      if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should not match because ::view-transition-new is generated (element to root)");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    target.style.viewTransitionName = "target";
+    document.documentElement.style.viewTransitionName = "none";
+    let transition = document.startViewTransition();
+
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, ":view-transition-old(target)");
+      if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
+        resolve();
+      else
+        reject(style.backgroundColor + " and " + style.color);
+    });
+  });
+}, ":only-child should not match because ::view-transition-new is generated (element to element)");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-on-root-element-with-view-transition.html b/testing/web-platform/tests/css/css-view-transitions/only-child-on-root-element-with-view-transition.html
new file mode 100644
index 0000000000..8b81c35ff6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/only-child-on-root-element-with-view-transition.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class="reftest-wait foo">
+<title>View transitions: ensure :only-child is supported on view-transition</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+::view-transition {
+  background-color: red;
+}
+
+html:only-child {
+  background-color: blue;
+}
+
+:root:only-child {
+  background-color: blue;
+}
+
+:only-child {
+  background-color: blue;
+}
+
+.foo:only-child {
+  background-color: blue;
+}
+</style>
+
+<script>
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition();
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, "::view-transition");
+      if (style.backgroundColor == "rgb(255, 0, 0)")
+        resolve();
+      else
+        reject(style.backgroundColor);
+    });
+  });
+}, ":only-child is not supported on view-transition");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/only-child-view-transition.html b/testing/web-platform/tests/css/css-view-transitions/only-child-view-transition.html
new file mode 100644
index 0000000000..2089e9225e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/only-child-view-transition.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: ensure :only-child is supported on view-transition</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+::view-transition {
+  background-color: red;
+}
+::view-transition:only-child {
+  background-color: blue;
+}
+</style>
+
+<script>
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition();
+    transition.ready.then(() => {
+      let style = getComputedStyle(
+        document.documentElement, "::view-transition");
+      if (style.backgroundColor == "rgb(255, 0, 0)")
+        resolve();
+      else
+        reject(style.backgroundColor);
+    });
+  });
+}, ":only-child is not supported on view-transition");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-invalid-with-classes.html b/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-invalid-with-classes.html
new file mode 100644
index 0000000000..66443c5cd7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-invalid-with-classes.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test pseudo elements parsing of invalid selectors with classes</title>
+<link rel="author" href="https://github.com/noamr">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+const functionPseudoElements = [
+    "::view-transition-group",
+    "::view-transition-image-pair",
+    "::view-transition-old",
+    "::view-transition-new",
+];
+
+function test_invalid_selector_combinations(pseudo) {
+    test_invalid_selector(`${pseudo}.a`);
+    test_invalid_selector(`${pseudo} div`);
+    test_invalid_selector(`${pseudo}:hover`);
+    test_invalid_selector(`:not(${pseudo})`);
+    test_invalid_selector(`:has(${pseudo})`);
+}
+
+for (const fn of functionPseudoElements) {
+  test_invalid_selector(`${fn}(*.*)`);
+  test_invalid_selector(`${fn}(*. cls)`);
+  test_invalid_selector(`${fn}(*.cls. c)`);
+  test_invalid_selector(`${fn}(*.cls>cls)`);
+  test_invalid_selector(`${fn}(*.cls.foo.*)`);
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-invalid.html b/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-invalid.html
new file mode 100644
index 0000000000..5a2624d09d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-invalid.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test pseudo elements parsing of invalid selectors</title>
+<link rel="author" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+const functionPseudoElements = [
+    "::view-transition-group",
+    "::view-transition-image-pair",
+    "::view-transition-old",
+    "::view-transition-new",
+];
+
+function test_invalid_selector_combinations(pseudo) {
+    test_invalid_selector(`${pseudo}.a`);
+    test_invalid_selector(`${pseudo} div`);
+    test_invalid_selector(`${pseudo}:hover`);
+    test_invalid_selector(`:not(${pseudo})`);
+    test_invalid_selector(`:has(${pseudo})`);
+}
+
+test_invalid_selector_combinations("::view-transition");
+test_invalid_selector("::view-transition(*)");
+test_invalid_selector("::view-transition(valid)");
+test_invalid_selector("::view-transition(root)");
+
+for (const fn of functionPseudoElements) {
+    for (const validArgument of ["*", "valid", "root"]) {
+        test_invalid_selector_combinations(`${fn}(${validArgument})`);
+    }
+
+    // Test function without argument.
+    test_invalid_selector(fn);
+    test_invalid_selector_combinations(fn);
+
+    // Test function with empty argument.
+    test_invalid_selector(`${fn}()`);
+    test_invalid_selector_combinations(`${fn}()`);
+
+    // Test function with keywords excluded from <custom-ident>.
+    test_invalid_selector(`${fn}(default)`);
+    test_invalid_selector_combinations(`${fn}(default)`);
+    test_invalid_selector(`${fn}(unset)`);
+    test_invalid_selector_combinations(`${fn}(unset)`);
+    test_invalid_selector(`${fn}(initial)`);
+    test_invalid_selector_combinations(`${fn}(initial)`);
+    test_invalid_selector(`${fn}(inherit)`);
+    test_invalid_selector_combinations(`${fn}(inherit)`);
+    test_invalid_selector(`${fn}(revert)`);
+    test_invalid_selector_combinations(`${fn}(revert)`);
+    test_invalid_selector(`${fn}(revert-layer)`);
+    test_invalid_selector_combinations(`${fn}(revert-layer)`);
+
+    // Test function with multiple arguments.
+    test_invalid_selector(`${fn}(foo, bar)`);
+    test_invalid_selector_combinations(`${fn}(foo, bar)`);
+    test_invalid_selector(`${fn}(foo bar)`);
+    test_invalid_selector_combinations(`${fn}(foo bar)`);
+
+    // Test function with selector arguments.
+    test_invalid_selector(`${fn}(.foo)`);
+    test_invalid_selector_combinations(`${fn}(.foo)`);
+    test_invalid_selector(`${fn}(#bar)`);
+    test_invalid_selector_combinations(`${fn}(#bar)`);
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-valid-with-classes.html b/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-valid-with-classes.html
new file mode 100644
index 0000000000..8ddf2e28d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-valid-with-classes.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test pseudo elements parsing of valid selectors including classes</title>
+<link rel="author" href="https://github.com/nrosenthal">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+const functionPseudoElements = [
+    "::view-transition-group",
+    "::view-transition-image-pair",
+    "::view-transition-old",
+    "::view-transition-new",
+];
+
+function test_valid_selector_combinations(pseudo) {
+    test_valid_selector(pseudo);
+    test_valid_selector(`:root${pseudo}`);
+    test_valid_selector(`.a${pseudo}`);
+    test_valid_selector(`div ${pseudo}`);
+}
+
+test_valid_selector_combinations("::view-transition");
+
+for (const functionName of functionPseudoElements) {
+    for (const validArgument of
+        ["*.class", "*.class.class", "dashed-ident.someclass", "dash-id.dash-id", "foo.bar.baz"]) {
+        test_valid_selector_combinations(`${functionName}(${validArgument})`);
+        test_valid_selector_combinations(`${functionName}(${validArgument}):only-child`);
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-valid.html b/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-valid.html
new file mode 100644
index 0000000000..1a0e5b82d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/parsing/pseudo-elements-valid.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Test pseudo elements parsing of valid selectors</title>
+<link rel="author" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script>
+const functionPseudoElements = [
+    "::view-transition-group",
+    "::view-transition-image-pair",
+    "::view-transition-old",
+    "::view-transition-new",
+];
+
+function test_valid_selector_combinations(pseudo) {
+    test_valid_selector(pseudo);
+    test_valid_selector(`:root${pseudo}`);
+    test_valid_selector(`.a${pseudo}`);
+    test_valid_selector(`div ${pseudo}`);
+}
+
+test_valid_selector_combinations("::view-transition");
+
+for (const functionName of functionPseudoElements) {
+    for (const validArgument of ["*", "root", "dashed-ident"]) {
+        test_valid_selector_combinations(`${functionName}(${validArgument})`);
+        test_valid_selector_combinations(`${functionName}(${validArgument}):only-child`);
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-class-computed.html b/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-class-computed.html
new file mode 100644
index 0000000000..74151c46da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-class-computed.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS View Transitions: view-transition-class with computed values</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<meta name="assert" content="view-transition-class supports custom keywords.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id=target></div>
+<script>
+test_computed_value("view-transition-class", "none");
+test_computed_value("view-transition-class", "foo");
+test_computed_value("view-transition-class", "bar");
+test_computed_value("view-transition-class", "baz");
+test_computed_value("view-transition-class", "foo bar");
+test_computed_value("view-transition-class", "foo bar baz");
+test_computed_value("view-transition-class", "unset", "none");
+test_computed_value("view-transition-class", "initial", "none");
+test_computed_value("view-transition-class", "inherit", "none");
+test_computed_value("view-transition-class", "revert", "none");
+test_computed_value("view-transition-class", "revert-layer", "none");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-class-invalid.html b/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-class-invalid.html
new file mode 100644
index 0000000000..9d41589bf2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-class-invalid.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS View Transitions Test: view-transition-class with invalid values</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<meta name="assert" content="view-transition-class does not support invalid values">
+<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("view-transition-class", "default"); // `default` isn't allowed by the `<custom-ident>` syntax.
+test_invalid_value("view-transition-class", "foo none");
+test_invalid_value("view-transition-class", "#fff");
+test_invalid_value("view-transition-class", "12px");
+test_invalid_value("view-transition-class", "foo 12px");
+test_invalid_value("view-transition-class", "12em");
+test_invalid_value("view-transition-class", "12%");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-class-valid.html b/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-class-valid.html
new file mode 100644
index 0000000000..480f40ca16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-class-valid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS View Transitions Test: view-transition-class with valid values</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<meta name="assert" content="view-transition-class supports custom tags">
+<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("view-transition-class", "none");
+test_valid_value("view-transition-class", "foo");
+test_valid_value("view-transition-class", "bar");
+test_valid_value("view-transition-class", "baz");
+test_valid_value("view-transition-class", "foo bar");
+test_valid_value("view-transition-class", "foo bar baz");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-name-computed.html b/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-name-computed.html
new file mode 100644
index 0000000000..5b05667f74
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-name-computed.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS View Transitions: view-transition-name with computed values</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<meta name="assert" content="view-transition-name supports custom keywords.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id=target></div>
+<script>
+test_computed_value("view-transition-name", "none");
+test_computed_value("view-transition-name", "foo");
+test_computed_value("view-transition-name", "bar");
+test_computed_value("view-transition-name", "baz");
+test_computed_value("view-transition-name", "unset", "none");
+test_computed_value("view-transition-name", "initial", "none");
+test_computed_value("view-transition-name", "inherit", "none");
+test_computed_value("view-transition-name", "revert", "none");
+test_computed_value("view-transition-name", "revert-layer", "none");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-name-invalid.html b/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-name-invalid.html
new file mode 100644
index 0000000000..00cd411d6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-name-invalid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS View Transitions Test: view-transition-name with invalid values</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<meta name="assert" content="view-transition-name does not support invalid values">
+<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("view-transition-name", "auto"); // `auto` is excluded.
+test_invalid_value("view-transition-name", "default"); // `default` isn't allowed by the `<custom-ident>` syntax.
+test_invalid_value("view-transition-name", "none none");
+test_invalid_value("view-transition-name", `"none"`);
+test_invalid_value("view-transition-name", `"foo"`);
+test_invalid_value("view-transition-name", "foo foo");
+test_invalid_value("view-transition-name", "bar bar");
+test_invalid_value("view-transition-name", "baz baz");
+test_invalid_value("view-transition-name", "#fff");
+test_invalid_value("view-transition-name", "12px");
+test_invalid_value("view-transition-name", "12em");
+test_invalid_value("view-transition-name", "12%");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-name-valid.html b/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-name-valid.html
new file mode 100644
index 0000000000..2fd384449f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/parsing/view-transition-name-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS View Transitions Test: view-transition-name with valid values</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<meta name="assert" content="view-transition-name supports custom tags">
+<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("view-transition-name", "none");
+test_valid_value("view-transition-name", "foo");
+test_valid_value("view-transition-name", "bar");
+test_valid_value("view-transition-name", "baz");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/paused-animation-at-end.html b/testing/web-platform/tests/css/css-view-transitions/paused-animation-at-end.html
new file mode 100644
index 0000000000..ae9176ea26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/paused-animation-at-end.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<title>View transitions: pause animation and set current time to the end</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+:root { view-transition-name: unset; }
+#target {
+  width: 100px;
+  height: 100px;
+  view-transition-name: target;
+}
+.one {
+  background: blue;
+}
+.two {
+  background: green;
+}
+</style>
+
+<div id=target class=one></div>
+
+<script>
+promise_test(async (t) => {
+  return new Promise((resolve, reject) => {
+    let transition = document.startViewTransition(() => {
+      target.classList.replace("one", "two");
+    });
+
+    transition.finished.then(() => reject("transition unexpectedly finished"));
+    transition.ready.then(() => {
+      document.getAnimations().forEach((animation) => {
+        animation.pause();
+        animation.currentTime = 1000;
+      });
+      step_timeout(resolve, 500);
+    });
+  });
+}, "view transition is not over if animations are paused");
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-computed-style-stays-in-sync-with-new-element.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-computed-style-stays-in-sync-with-new-element.html
new file mode 100644
index 0000000000..0a34a4b73f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-computed-style-stays-in-sync-with-new-element.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: computed style on pseudo-element stays in sync with the DOM element</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: target;
+  contain: paint;
+}
+</style>
+
+<div id=first></div>
+
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition();
+    await transition.updateCallbackDone;
+    await transition.ready;
+
+    let viewbox = window.getComputedStyle(
+      document.documentElement, "::view-transition-new(target)").objectViewBox;
+    assert_equals(viewbox, "none", "incorrect viewbox " + viewbox);
+
+    first.style.filter = "blur(5px)";
+    viewbox = window.getComputedStyle(
+      document.documentElement, "::view-transition-new(target)").objectViewBox;
+    assert_equals(viewbox, "none", "incorrect viewbox " + viewbox);
+
+    transition.finished.then(resolve, reject);
+  });
+}, "computed style on pseudo-element stays in sync with the DOM element");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-get-computed-style.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-get-computed-style.html
new file mode 100644
index 0000000000..2481a71313
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-get-computed-style.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: check pseudo element's display property</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+  view-transition-name: target;
+  mix-blend-mode: multiply;
+  text-orientation: upright;
+  color-scheme: dark light;
+}
+::view-transition-image-pair(target) {
+  position: fixed;
+}
+</style>
+
+<div id=target></div>
+
+<script>
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition(() => {
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition").position, "fixed", ":view-transition");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").position, "absolute", "container(target)");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").mixBlendMode, "multiply", "container(target)");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").textOrientation, "upright", "container(target)");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").colorScheme, "dark light", "container(target)");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(target)").position, "absolute", "wrapper(target)");
+
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(target)").position, "absolute", "outgoing(target)");
+
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").position, "absolute", "container(root)");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").mixBlendMode, "normal", "container(root)");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(root)").position, "absolute", "wrapper(root)");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(root)").position, "absolute", "outgoing(root)");
+
+      requestAnimationFrame(() => {
+        assert_equals(getComputedStyle(document.documentElement, ":view-transition").position, "fixed", "raf :view-transition");
+        assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").position, "absolute", "raf container(target)");
+        assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").mixBlendMode, "multiply", "raf container(target)");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").textOrientation, "upright", "raf container(target)");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").colorScheme, "dark light", "raf container(target)");
+        assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(target)").position, "fixed", "raf wrapper(target)");
+
+        assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(target)").position, "absolute", "raf outgoing(target)");
+
+        assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").position, "absolute", "raf container(root)");
+        assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").mixBlendMode, "normal", "raf container(root)");
+        assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(root)").position, "absolute", "raf wrapper(root)");
+        assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(root)").position, "absolute", "raf outgoing(root)");
+      });
+    });
+    await transition.finished;
+    resolve();
+  });
+}, "position property of pseudo elements");
+
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition(() => {
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition").position, "fixed");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").position, "absolute");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(target)").position, "absolute");
+
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(target)").position, "absolute");
+
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").position, "absolute");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(root)").position, "absolute");
+      assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(root)").position, "absolute");
+
+      target.remove();
+    });
+
+    await transition.ready;
+
+    assert_equals(getComputedStyle(document.documentElement, ":view-transition").position, "fixed");
+    assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").position, "absolute");
+    assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").mixBlendMode, "multiply");
+    assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").textOrientation, "upright");
+    assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").colorScheme, "dark light");
+    assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(target)").position, "fixed");
+
+    assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(target)").position, "absolute");
+    assert_equals(getComputedStyle(document.documentElement, ":view-transition-new(target)").position, "absolute");
+
+    assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(root)").position, "absolute");
+    assert_equals(getComputedStyle(document.documentElement, ":view-transition-image-pair(root)").position, "absolute");
+    assert_equals(getComputedStyle(document.documentElement, ":view-transition-old(root)").position, "absolute");
+    assert_equals(getComputedStyle(document.documentElement, ":view-transition-new(root)").position, "absolute");
+
+    assert_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").position, "absolute");
+
+    await transition.finished;
+
+    // With custom ua sheets not applying to non-existing pseudo, the value should be the default (not absolute)
+    assert_not_equals(getComputedStyle(document.documentElement, ":view-transition-group(target)").position, "absolute");
+
+    resolve();
+  });
+}, "properties of pseudo elements outside of transition");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation-ref.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation-ref.html
new file mode 100644
index 0000000000..f622f94b5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: invalidating VT pseudo elements renders correctly (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+
+<style>
+:root {
+  background-color: limegreen;
+}
+
+div {
+  position: absolute;
+  left: 0px;
+  top: 600px;
+  width: 100px;
+  height: 100px;
+
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+
+  background: darkseagreen;
+}
+</style>
+
+<div style="left: 0px; top: 100px;">Group</div>
+<div style="left: 150px; top: 100px;">Image-Pair</div>
+<div style="left: 0px; top: 250px;">Old</div>
+<div style="left: 150px; top: 250px;">New</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html
new file mode 100644
index 0000000000..55a9d5d373
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-rendering-invalidation.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: invalidating VT pseudo elements renders correctly</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+<link rel="match" href="pseudo-rendering-invalidation-ref.html">
+<meta name="fuzzy" content="pseudo-rendering-invalidation-ref.html:0-20;0-300">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  view-transition-name: none;
+  background-color: red;
+}
+
+div {
+  position: absolute;
+  left: 0px;
+  top: 600px;
+  width: 100px;
+  height: 100px;
+
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+
+  background: darkseagreen;
+}
+
+::view-transition-group(*) {
+  animation-duration: 50s;
+}
+
+::view-transition {
+  background-color: limegreen;
+}
+
+::view-transition-new(new) {
+  animation: none;
+  opacity: 1;
+}
+::view-transition-old(new) {
+  animation: none;
+  opacity: 0;
+}
+
+::view-transition-new(old) {
+  animation: none;
+  opacity: 0;
+}
+::view-transition-old(old) {
+  animation: none;
+  opacity: 1;
+}
+
+.invalidateRoot::view-transition {
+  /* Making view-transition `display: none` will abort the transition. Changing
+     it to position: static (at least in Chrome) will cause it to rebuild its
+     layout tree. */
+  position: static;
+}
+
+.invalidateGroup::view-transition-group(group) {
+  display: none;
+}
+
+.invalidateImagePair::view-transition-image-pair(imagepair) {
+  display: none;
+}
+
+.invalidateNew::view-transition-new(new) {
+  display: none;
+}
+
+.invalidateOld::view-transition-old(old) {
+  display: none;
+}
+
+</style>
+
+<div style="left: 0px; top: 100px; view-transition-name:group;">Group</div>
+<div style="left: 150px; top: 100px; view-transition-name:imagepair;">Image-Pair</div>
+<div style="left: 0px; top: 250px; view-transition-name:old;">Old</div>
+<div style="left: 150px; top: 250px; view-transition-name:new;">New</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function rAF() {
+  return new Promise(resolve => requestAnimationFrame(resolve));
+}
+
+async function performInvalidations() {
+  await rAF();
+  await rAF();
+
+  const docClassList = document.documentElement.classList;
+  const classNames = [
+      'invalidateRoot',       // Invalidates ::view-transition
+      'invalidateGroup',      // Invalidates ::view-transition-group
+      'invalidateImagePair',  // Invalidates ::view-transition-image-pair
+      'invalidateOld',        // Invalidates ::view-transition-old
+      'invalidateNew'         // Invalidates ::view-transition-new
+  ];
+
+  for (let className of classNames) {
+    document.documentElement.classList.add(className);
+    await rAF();
+    document.documentElement.classList.remove(className);
+    await rAF();
+  }
+}
+
+// This test ensures each of the view-transition pseudos is able to be
+// individually recreated after becoming display: none.
+async function runTest() {
+  let transition = document.startViewTransition();
+  await transition.ready;
+  await performInvalidations();
+  takeScreenshot();
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-entry.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-entry.html
new file mode 100644
index 0000000000..44f95dccbf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-entry.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: entry animation should consider view-transition-class from new state</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+#target {
+  background: green;
+}
+
+#target.new-state {
+  view-transition-class: cls;
+  view-transition-name: target;
+}
+
+@keyframes jump {
+  from { opacity: 1;}
+  to { opacity: 1;}
+}
+
+::view-transition-group(*),
+::view-transition-image-pair(*),
+::view-transition-new(*) {
+  animation-name: jump;
+  animation-timing-function: step-start;
+  animation-duration: 1s;
+}
+
+::view-transition-new(*.cls) {
+  left: 100px;
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition(() => {
+    document.getElementById("target").classList.add("new-state");
+  }).ready.then(takeScreenshot);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-exit.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-exit.html
new file mode 100644
index 0000000000..c687461f18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-exit.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: exit animation should consider view-transition-class from old state</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+#target {
+  background: green;
+}
+
+#target:not(.new-state) {
+  view-transition-class: cls;
+  view-transition-name: target;
+}
+
+@keyframes jump {
+  from { opacity: 1;}
+  to { opacity: 1;}
+}
+
+::view-transition-group(*),
+::view-transition-image-pair(*),
+::view-transition-old(*) {
+  animation-name: jump;
+  animation-timing-function: step-start;
+  animation-duration: 1s;
+}
+
+::view-transition-old(*.cls) {
+  left: 100px;
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition(() => {
+    document.getElementById("target").classList.add("new-state");
+  }).ready.then(takeScreenshot);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-ident.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-ident.html
new file mode 100644
index 0000000000..1418a90bc4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-ident.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: selector should match ident.class</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+#target {
+  background: green;
+  view-transition-name: target;
+  view-transition-class: cls;
+}
+
+::view-transition-group(*) {
+  animation-duration: 1s;
+}
+
+::view-transition-new(target.cls),
+::view-transition-old(target.cls) {
+  left: 100px;
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition().ready.then(takeScreenshot);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-multiple-wildcard.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-multiple-wildcard.html
new file mode 100644
index 0000000000..53eaacfe79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-multiple-wildcard.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: selector should match with wildcard and multiple classes</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+#target {
+  background: green;
+  view-transition-name: target;
+  view-transition-class: cls some-div;
+}
+
+::view-transition-group(*) {
+  animation-duration: 1s;
+}
+
+::view-transition-new(*.cls.some-div),
+::view-transition-old(*.cls.some-div) {
+  left: 100px;
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition().ready.then(takeScreenshot);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-multiple.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-multiple.html
new file mode 100644
index 0000000000..1ab69340b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-multiple.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: selector should match with multiple classes</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  view-transition-class: cls some-div;
+}
+
+#target {
+  background: green;
+  view-transition-name: target;
+}
+
+::view-transition-group(*) {
+  animation-duration: 1s;
+}
+
+::view-transition-new(target.cls.some-div),
+::view-transition-old(target.cls.some-div) {
+  left: 100px;
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition().ready.then(takeScreenshot);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildard.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildard.html
new file mode 100644
index 0000000000..13490d5878
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-match-wildard.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: selector should match with wildcard</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+#target {
+  background: green;
+  view-transition-name: target;
+  view-transition-class: cls;
+}
+
+::view-transition-group(*) {
+  animation-duration: 1s;
+}
+
+::view-transition-new(*.cls),
+::view-transition-old(*.cls) {
+  left: 100px;
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition().ready.then(takeScreenshot);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-mismatch-ident.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-mismatch-ident.html
new file mode 100644
index 0000000000..97db64fca2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-mismatch-ident.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: selector should not match different ident</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+#target {
+  background: green;
+  view-transition-name: target;
+  view-transition-class: cls;
+}
+
+::view-transition-group(*) {
+  animation-duration: 1s;
+}
+
+::view-transition-new(*),
+::view-transition-old(*) {
+  left: 100px;
+}
+
+::view-transition-new(target.other),
+::view-transition-old(target.other) {
+  left: 0;
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition().ready.then(takeScreenshot);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-mismatch-partial.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-mismatch-partial.html
new file mode 100644
index 0000000000..9d9838036b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-mismatch-partial.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: selector should not match if only some classes match</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+#target {
+  background: green;
+  view-transition-name: target;
+  view-transition-class: cls;
+}
+
+::view-transition-group(*) {
+  animation-duration: 1s;
+}
+
+::view-transition-new(*),
+::view-transition-old(*) {
+  left: 100px;
+}
+::view-transition-new(target.cls.other),
+::view-transition-old(target.cls.other) {
+  left: 0;
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition().ready.then(takeScreenshot);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-mismatch-wildcard.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-mismatch-wildcard.html
new file mode 100644
index 0000000000..722e413045
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-mismatch-wildcard.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: selector should not match if only some classes match (with *)</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+#target {
+  background: green;
+  view-transition-name: target;
+  view-transition-class: cls;
+}
+
+::view-transition-group(*) {
+  animation-duration: 1s;
+}
+
+::view-transition-new(*),
+::view-transition-old(*) {
+  left: 100px;
+}
+
+::view-transition-new(*.other),
+::view-transition-old(*.other) {
+  left: 0;
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition().ready.then(takeScreenshot);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-multiple-vt-classes.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-multiple-vt-classes.html
new file mode 100644
index 0000000000..d7ca0a0493
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-multiple-vt-classes.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: selector should match when view-transition-class has multiple idents</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  view-transition-class: cls some-div;
+}
+
+#target {
+  background: green;
+  view-transition-name: target;
+}
+
+::view-transition-group(*) {
+  animation-duration: 1s;
+}
+
+::view-transition-new(target.cls),
+::view-transition-old(target.cls) {
+  left: 100px;
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition().ready.then(takeScreenshot);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-new-with-class-old-without.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-new-with-class-old-without.html
new file mode 100644
index 0000000000..5aedc33b3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-new-with-class-old-without.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: view-transition-class should apply if applied only in new state</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+#target {
+  background: green;
+  view-transition-name: target;
+}
+
+#target.new-state {
+  view-transition-class: cls;
+}
+
+::view-transition-group(*) {
+  animation-duration: 1s;
+}
+
+::view-transition-new(*.cls),
+::view-transition-old(*.cls) {
+  left: 100px;
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition(() => {
+    document.getElementById("target").classList.add("new-state");
+  }).ready.then(takeScreenshot);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-old-with-class-new-without.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-old-with-class-new-without.html
new file mode 100644
index 0000000000..6c153253e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-old-with-class-new-without.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: view-transition-class should not apply if applied only in old state</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+}
+
+#target {
+  background: green;
+  view-transition-name: target;
+}
+
+#target:not(.new-state) {
+  view-transition-class: cls;
+}
+
+::view-transition-group(*) {
+  animation-duration: 1s;
+}
+
+::view-transition-new(*),
+::view-transition-old(*) {
+  left: 100px;
+}
+
+::view-transition-new(*.cls),
+::view-transition-old(*.cls) {
+  left: 0;
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition(() => {
+    document.querySelector("#target").classList.add("new-state");
+  }).ready.then(takeScreenshot);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-ref.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-ref.html
new file mode 100644
index 0000000000..89b3a8a78e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: reference expectation</title>
+<style>
+div {
+  position: relative;
+  left: 100px;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<body>
+<div></div>
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-view-transition-group.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-view-transition-group.html
new file mode 100644
index 0000000000..3e4dbb303c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-view-transition-group.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: group selectors should respect classes</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  background: green;
+  view-transition-name: target;
+  view-transition-class: cls;
+}
+
+:root::view-transition-group(*) {
+  animation-duration: 1s;
+}
+
+:root::view-transition-group(target.cls) {
+  left: 100px;
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition().ready.then(requestAnimationFrame(() => takeScreenshot()));
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-view-transition-image-pair.html b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-view-transition-image-pair.html
new file mode 100644
index 0000000000..8f0f2ef2a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/pseudo-with-classes-view-transition-image-pair.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: group selectors should respect classes</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:nrosenthal@chromium.org">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  background: green;
+  view-transition-name: target;
+  view-transition-class: cls;
+}
+
+::view-transition-group(*) {
+  animation-duration: 1s;
+}
+
+::view-transition-image-pair(target.cls) {
+  transform: translateX(100px);
+}
+
+</style>
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+window.addEventListener("load", () => {
+  document.startViewTransition().ready.then(requestAnimationFrame(() => takeScreenshot()));
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/ready_resolves_after_dom_before_raf.html b/testing/web-platform/tests/css/css-view-transitions/ready_resolves_after_dom_before_raf.html
new file mode 100644
index 0000000000..adf3dc6c16
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/ready_resolves_after_dom_before_raf.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: promise resolution ordering</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+  view-transition-name: target;
+}
+.green {
+  background: green;
+}
+</style>
+
+<div id=target></div>
+
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise((resolve, reject) => {
+    let dom_change_ran = false;
+    let transition = document.startViewTransition(() => {
+      target.classList.add("green");
+      dom_change_ran = true;
+    });
+
+    let dom_updated_resolved = false;
+    transition.updateCallbackDone.then(() => {
+      if (!dom_change_ran)
+        reject();
+      // If there's a rAF before ready resolves, we fail.
+      requestAnimationFrame(reject);
+      dom_updated_resolved = true;
+    });
+
+    transition.ready.then(() => {
+      if (!dom_updated_resolved)
+        reject();
+      resolve();
+    });
+  });
+}, "updateCallbackDone resolves, then ready resolves with no rAF in between");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag-ref.html
new file mode 100644
index 0000000000..92bd70f6f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>View transitions: capture root elements (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.box {
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+}
+#e1 {
+  top: 20px;
+  left: 20px;
+}
+</style>
+<div id=e1 class=box></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html b/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html
new file mode 100644
index 0000000000..4264db8169
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-captured-as-different-tag.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture root elements</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="old-content-captures-root-ref.html">
+<meta name="fuzzy" content="old-content-captures-root-ref.html:0-1;0-500">
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root { view-transition-name: another-root; }
+.box {
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  position: absolute;
+  font-size: 30pt;
+}
+#e1 {
+  top: 20px;
+  left: 20px;
+}
+#shared {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  background: red;
+  view-transition-name: shared;
+}
+
+div.dst { background: lightgreen; }
+/* We're verifying what we capture, so just display the old contents for 5 minutes.  */
+html::view-transition { background: pink; }
+html::view-transition-group(shared) { animation-duration: 300s; }
+html::view-transition-image-pair(shared) { visibility: hidden }
+html::view-transition-old(another-root) { animation: unset; opacity: 1 }
+html::view-transition-new(another-root) { animation: unset; opacity: 0 }
+
+/* This shouldn't apply, so just make it red. */
+html::view-transition-group(root) { animation: unset; opacity: 1; background: red; }
+html::view-transition-image-pair(root) { visibility: hidden; }
+</style>
+<div id=e1 class=box></div>
+<div id=shared></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    e1.classList.add("dst");
+    document.body.style.background = "red";
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-element-cv-hidden-crash.html b/testing/web-platform/tests/css/css-view-transitions/root-element-cv-hidden-crash.html
new file mode 100644
index 0000000000..890194b7c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-element-cv-hidden-crash.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>View transitions: content-visibility:hidden on root element crash</title>
+<link rel="help" href="https://crbug.com/1429947">
+<style>
+  html {
+    content-visibility: hidden;
+  }
+</style>
+<script>
+  document.startViewTransition();
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-crash.html b/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-crash.html
new file mode 100644
index 0000000000..fc55719c7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-crash.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: html display none</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+html {
+  display: none;
+}
+</style>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().finished.then(takeScreenshot, takeScreenshot);
+
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html b/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html
new file mode 100644
index 0000000000..19f4143aa6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-element-display-none-during-transition-crash.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: entry animation from root display none</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.hidden {
+  display: none;
+}
+::view-transition-group(*) {
+  animation-duration: 500s
+}
+</style>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  transition = document.startViewTransition();
+  transition.ready.then(
+    requestAnimationFrame(() => {
+      document.documentElement.classList.toggle("hidden");
+    }));
+  transition.finished.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background-ref.html
new file mode 100644
index 0000000000..a4010b5f2f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html >
+<title>View transitions: capture root element with scrollbar (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+#container {
+  background: lightblue;
+}
+#first {
+  width: 10px;
+  background: linear-gradient(green, blue);
+  height: 1000px;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+  filter: invert(1);
+}
+</style>
+
+  <div id=container>
+   <div id=first></div>
+  </div>
+
+<script>
+  function scrollContainer() {
+    document.documentElement.scrollTop = 500;
+  }
+
+  onload = scrollContainer();
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html
new file mode 100644
index 0000000000..c657fa19fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-scrollbar-with-fixed-background.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html class=reftest-wait style="background: lightblue;">
+<title>When the root element has scrollbars, these should be excluded in snapshot</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="root-scrollbar-with-fixed-background-ref.html">
+
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#hide {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 10px;
+  height: 10px;
+  background: red;
+  contain: paint;
+  view-transition-name: hide;
+}
+#first {
+  width: 10px;
+  background: linear-gradient(green, blue);
+  height: 1000px;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+
+/* Set a no-op animation to screenshot the pseudo transition DOM. */
+html::view-transition-group(hide) {
+  animation-duration: 300s;
+  opacity: 0;
+}
+html::view-transition-new(*) {
+  animation: unset;
+  filter: invert(1);
+  height: 100%;
+}
+html::view-transition-old(*) {
+  animation: unset;
+  opacity: 0;
+  height: 100%;
+}
+</style>
+
+<div id=hide></div>
+<div id=first></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  await waitForAtLeastOneFrame();
+
+  document.documentElement.scrollTop = 500;
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+
+onload = () => requestAnimationFrame(runTest);
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation-ref.html
new file mode 100644
index 0000000000..c180c384f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: root element style changes during transition</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  background: green;
+}
+
+body {
+  background: grey;
+}
+</style>
+
+<div id=target></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation.html b/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation.html
new file mode 100644
index 0000000000..d1d291124b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-style-change-during-animation.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: root element style changes during transition</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="root-style-change-during-animation-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#target {
+  width: 100px;
+  height: 100px;
+  contain: paint;
+  background: blue;
+  view-transition-name: target;
+}
+
+#hidden {
+  background: pink;
+  width: 10px;
+  height: 10px;
+  view-transition-name: hidden;
+  contain: paint;
+}
+
+html::view-transition {
+  background: grey;
+}
+
+html::view-transition-group(hidden) {
+  animation-duration: 500s;
+  visibility: hidden;
+}
+
+html::view-transition-group(root) {
+  visibility: hidden;
+}
+
+.test::view-transition-group(target) {
+  background: green;
+}
+.test::view-transition-image-pair(target) {
+  visibility: hidden;
+}
+</style>
+
+<div id=target></div>
+<div id=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function flipClass() {
+  document.documentElement.classList.add("test");
+  requestAnimationFrame(takeScreenshot);
+}
+
+async function runTest() {
+  document.startViewTransition(() => {
+    hidden.style.width="20px";
+    requestAnimationFrame(() => requestAnimationFrame(flipClass));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end-ref.html
new file mode 100644
index 0000000000..24b50fa65e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<title>Root to shared animation test (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+body, html { padding: 0; margin: 0 }
+body {
+  background: yellow;
+}
+.background {
+  background: lightgreen;
+  width: 400px;
+  height: 300px;
+}
+.item {
+  background: blue;
+  width: 200px;
+  height: 200px;
+}
+</style>
+
+<div class=background>
+  <div class=item></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end.html
new file mode 100644
index 0000000000..6ba07bd9e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-end.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="root-to-shared-animation-end-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+body, html { padding: 0; margin: 0 }
+body {
+  background: lightgreen;
+}
+#box {
+  width: 400px;
+  height: 400px;
+  background: blue;
+  contain: paint;
+}
+.hidden {
+  contain: paint;
+  width: 10px;
+  height: 10px;
+  background: red;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { visibility: hidden; }
+
+html::view-transition-group(root) { animation-duration: 0s; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+</style>
+
+<div id=box></div>
+<div class=hidden></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    document.documentElement.style.viewTransitionName = "none";
+    document.body.style.background = "yellow";
+    box.style.viewTransitionName = "root";
+
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html
new file mode 100644
index 0000000000..3075d2480c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<title>Root to shared animation test (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+body {
+  background: blue;
+  padding: 0;
+  margin: 0;
+}
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming.html
new file mode 100644
index 0000000000..0620e911cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-incoming.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="root-to-shared-animation-incoming-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+body {
+  background: lightgreen;
+  padding: 0;
+  margin: 0;
+}
+#box {
+  width: 100px;
+  height: 120px;
+  background: blue;
+  contain: paint;
+}
+
+html::view-transition-group(*) { animation-delay: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 1; }
+html::view-transition-old(*) { animation: unset; opacity: 0; }
+</style>
+
+<div id=box></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    document.documentElement.style.viewTransitionName = "none";
+    box.style.viewTransitionName = "root";
+    // We should not see the "live" body at all.
+    document.body.style.background = "red";
+
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start-ref.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start-ref.html
new file mode 100644
index 0000000000..d04ab3f767
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<title>Root to shared animation test (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+body {
+  background: lightgreen;
+  padding: 0;
+  margin: 0;
+}
+#box {
+  width: 100px;
+  height: 120px;
+  background: blue;
+  contain: paint;
+}
+</style>
+
+<div id=box></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start.html b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start.html
new file mode 100644
index 0000000000..0a1cb9617e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/root-to-shared-animation-start.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="root-to-shared-animation-start-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+body {
+  background: lightgreen;
+  padding: 0;
+  margin: 0;
+}
+#box {
+  width: 100px;
+  height: 120px;
+  background: blue;
+  contain: paint;
+}
+
+html::view-transition-group(*) { animation-delay: 300s; }
+html::view-transition-new(*) { animation: unset; opacity: 0; }
+html::view-transition-old(*) { animation: unset; opacity: 1; }
+</style>
+
+<div id=box></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    document.documentElement.style.viewTransitionName = "none";
+    box.style.viewTransitionName = "root";
+    // We should not see the "live" body at all.
+    document.body.style.background = "red";
+
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge-ref.html b/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge-ref.html
new file mode 100644
index 0000000000..8380b71fb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: rotated img element with border radius off the top edge (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+.target {
+  transform: rotate(330deg) translate3d(110px, 10px, 10px);
+  border-radius: 0.375rem;
+  width: 400px;
+  height: 400px;
+}
+</style>
+<body>
+<img class="target" src="support/cat.png">
diff --git a/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge.html b/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge.html
new file mode 100644
index 0000000000..c7179b7a01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/rotated-cat-off-top-edge.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>View transitions: rotated img element with border radius off the top edge</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="rotated-cat-off-top-edge-ref.html">
+<meta name="fuzzy" content="rotated-cat-off-top-edge-ref.html:0-5;0-1500">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  transform: rotate(330deg) translate3d(110px, 10px, 10px);
+  border-radius: 0.375rem;
+  width: 400px;
+  height: 400px;
+}
+::view-transition-group(root) {
+  animation-duration: 500s;
+}
+</style>
+<body>
+<img class="target" src="support/cat.png">
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar-ref.html b/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar-ref.html
new file mode 100644
index 0000000000..c429136a2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html dir="rtl">
+<head>
+  <title>Transition is correctly positioned on RTL page (ref)</title>
+  <link rel="help" href="https://github.com/WICG/view-transitions">
+  <link rel="author" href="mailto:bokan@chromium.org">
+
+  <style>
+  #target {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+    width: 100px;
+    height: 200px;
+    background: dodgerblue;
+  }
+
+  #inroot {
+    position: absolute;
+    top: 300px;
+    left: 200px;
+    width: 100px;
+    height: 200px;
+    background: rebeccapurple;
+  }
+
+  body {
+    margin: 0px;
+    padding: 0px;
+    /* add overflow for scrollbar */
+    height: 200vh;
+  }
+  </style>
+</head>
+
+</body>
+  <div id=target></div>
+  <div id="inroot"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar.html b/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar.html
new file mode 100644
index 0000000000..de2570605a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/rtl-with-scrollbar.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html dir="rtl" class=reftest-wait>
+<title>Transition is correctly positioned on RTL page</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+<link rel="match" href="rtl-with-scrollbar-ref.html">
+
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#target {
+  position: absolute;
+  top: 100px;
+  left: 100px;
+  width: 100px;
+  height: 200px;
+  background: dodgerblue;
+  contain: paint;
+  view-transition-name: target;
+}
+
+#inroot {
+  position: absolute;
+  top: 300px;
+  left: 200px;
+  width: 100px;
+  height: 200px;
+  background: rebeccapurple;
+  contain: paint;
+}
+
+body {
+  margin: 0px;
+  padding: 0px;
+  /* add overflow for scrollbar */
+  height: 200vh;
+}
+
+/* Show the old snapshot for 300s */
+html::view-transition-group(*) {
+  animation-duration: 300s;
+  opacity: 1;
+}
+html::view-transition-new(*) {
+  animation: unset;
+  opacity: 0;
+}
+html::view-transition-old(*) {
+  animation: unset;
+  opacity: 1;
+}
+</style>
+
+<div id=target></div>
+<div id="inroot"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  await waitForAtLeastOneFrame();
+
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+
+onload = () => requestAnimationFrame(runTest);
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos-ref.html b/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos-ref.html
new file mode 100644
index 0000000000..ed118e633f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<title>View transitions: scroller child element (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+#target {
+  width: 200px;
+  height: 200px;
+  background: yellow;
+}
+#scroller {
+  overflow: scroll;
+  width: 100px;
+  height: 100px;
+  background: blue;
+  isolation: isolate;
+}
+
+#child {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  top: 200px;
+}
+</style>
+
+<div id="target">
+  <div id="scroller">
+    <div id="child"></div>
+  </div>
+</div>
+
+<script>
+onload = () => { scroller.scrollTop = 300; };
+</script>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos.html b/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos.html
new file mode 100644
index 0000000000..3b94ffa7bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: scroller child element</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="scroller-child-abspos-ref.html">
+<meta name="fuzzy" content="scroller-child-abspos-ref.html:0-5;0-800">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#target {
+  view-transition-name: target;
+  width: 200px;
+  height: 200px;
+  background: yellow;
+}
+#scroller {
+  overflow: scroll;
+  width: 100px;
+  height: 100px;
+  background: blue;
+  isolation: isolate;
+}
+
+#child {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: green;
+  top: 200px;
+}
+
+html::view-transition-group(root) { animation-duration: 300s; }
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+}
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 0;
+}
+</style>
+
+<div id="target">
+  <div id="scroller">
+    <div id="child"></div>
+  </div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  scroller.scrollTop = 300;
+
+  let transition = document.startViewTransition();
+  transition.ready.then(() => requestAnimationFrame(takeScreenshot));
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/scroller-child-ref.html b/testing/web-platform/tests/css/css-view-transitions/scroller-child-ref.html
new file mode 100644
index 0000000000..4ff2b2c5ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/scroller-child-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>View transitions: scroller child element (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+#target {
+  width: 500px;
+  height: 500px;
+  background: yellow;
+}
+#scroller {
+  overflow: scroll;
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+
+#child {
+  position: relative;
+  width: 2000px;
+  height: 2000px;
+  background: green;
+}
+</style>
+
+<div id="target">
+  <div id="scroller">
+    <div id="child"></div>
+  </div>
+</div>
+
+<script>
+onload = () => { scroller.scrollTop = 300; };
+</script>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/scroller-child.html b/testing/web-platform/tests/css/css-view-transitions/scroller-child.html
new file mode 100644
index 0000000000..5cb2f03e70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/scroller-child.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: scroller child element</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="scroller-child-ref.html">
+<meta name="fuzzy" content="scroller-child-ref.html:0-5;0-800">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#target {
+  view-transition-name: target;
+  width: 500px;
+  height: 500px;
+  background: yellow;
+}
+#scroller {
+  overflow: scroll;
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+
+#child {
+  position: relative;
+  width: 2000px;
+  height: 2000px;
+  background: green;
+}
+
+html::view-transition-group(root) { animation-duration: 300s; }
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+}
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 0;
+}
+</style>
+
+<div id="target">
+  <div id="scroller">
+    <div id="child"></div>
+  </div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  scroller.scrollTop = 300;
+
+  let transition = document.startViewTransition();
+  transition.ready.then(() => requestAnimationFrame(takeScreenshot));
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/scroller-ref.html b/testing/web-platform/tests/css/css-view-transitions/scroller-ref.html
new file mode 100644
index 0000000000..27a2329ee0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/scroller-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>View transitions: scroller element (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+#scroller {
+  overflow: scroll;
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+
+#child {
+  position: relative;
+  width: 1000px;
+  height: 1000px;
+  background: green;
+}
+</style>
+
+<div id="scroller">
+  <div id="child"></div>
+</div>
+
+<script>
+onload = () => { scroller.scrollTop = 300; };
+</script>
+
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/scroller.html b/testing/web-platform/tests/css/css-view-transitions/scroller.html
new file mode 100644
index 0000000000..e61d13b316
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/scroller.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: scroller element</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="scroller-ref.html">
+<meta name="fuzzy" content="scroller-ref.html:0-5;0-10">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#scroller {
+  overflow: scroll;
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: target;
+}
+
+#child {
+  position: relative;
+  width: 1000px;
+  height: 1000px;
+  background: green;
+}
+
+html::view-transition-group(root) { animation-duration: 300s; }
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+}
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 0;
+}
+</style>
+
+<div id="scroller">
+  <div id="child"></div>
+</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  scroller.scrollTop = 300;
+
+  let transition = document.startViewTransition();
+  transition.ready.then(() => requestAnimationFrame(takeScreenshot));
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/set-current-time-ref.html b/testing/web-platform/tests/css/css-view-transitions/set-current-time-ref.html
new file mode 100644
index 0000000000..9cf41ec116
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/set-current-time-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>View transitions: set current time (reference)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+.target {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  opacity: 0.5;
+}
+</style>
+
+<div class=target></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/set-current-time-transform-ref.html b/testing/web-platform/tests/css/css-view-transitions/set-current-time-transform-ref.html
new file mode 100644
index 0000000000..556d3f544e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/set-current-time-transform-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: set current time</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<script src="/common/reftest-wait.js"></script>
+<style>
+@keyframes move {
+  from {
+    transform: translate(500px);
+  }
+}
+#target {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: target;
+  position: relative;
+  left: 100px;
+
+  animation-name: move;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-play-state: paused;
+}
+</style>
+
+<div id=target></div>
+
+<script>
+function runReference() {
+  document.getAnimations().forEach((animation) => {
+    animation.currentTime = 500;
+  });
+  takeScreenshot();
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runReference));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/set-current-time-transform.html b/testing/web-platform/tests/css/css-view-transitions/set-current-time-transform.html
new file mode 100644
index 0000000000..0c7ac64f1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/set-current-time-transform.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: set current time</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="set-current-time-transform-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root { view-transition-name: unset; }
+#target {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: target;
+  position: relative;
+}
+.left {
+  left: 0;
+}
+.right {
+  left: 100px;
+}
+
+html::view-transition-group(*) {
+  animation: unset;
+}
+html::view-transition-old(*) {
+  animation: unset;
+  opacity: 0;
+}
+@keyframes move {
+  from {
+    transform: translate(500px);
+  }
+}
+html::view-transition-new(target) {
+  animation-name: move;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-play-state: paused;
+}
+</style>
+
+<div id=target class=left></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition(() => target.classList.replace("left", "right"));
+  transition.ready.then(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      document.getAnimations().forEach((animation) => {
+        animation.currentTime = 500;
+      });
+      requestAnimationFrame(takeScreenshot);
+    }));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/set-current-time.html b/testing/web-platform/tests/css/css-view-transitions/set-current-time.html
new file mode 100644
index 0000000000..f7e802d79b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/set-current-time.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: set current time</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="set-current-time-ref.html">
+<meta name="fuzzy" content="set-current-time-ref.html:0-2;0-40000">
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root { view-transition-name: unset; }
+.target {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: target;
+}
+
+html::view-transition-group(*) {
+  animation: unset;
+}
+html::view-transition-old(*) {
+  animation: unset;
+}
+html::view-transition-new(target) {
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-play-state: paused;
+}
+</style>
+
+<div id=target></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition(() => target.classList.add("target"));
+  transition.ready.then(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      document.getAnimations().forEach((animation) => {
+        animation.currentTime = 500;
+      });
+      requestAnimationFrame(takeScreenshot);
+    }));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity-ref.html b/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity-ref.html
new file mode 100644
index 0000000000..4bf2164c7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>View transitions: universal specificity (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+body {
+  background: pink;
+}
+div {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  background: blue;
+  border: 10px solid black;
+}
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity.html b/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity.html
new file mode 100644
index 0000000000..ec50b1e407
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/set-universal-specificity.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: universal specificity</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="set-universal-specificity-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+#shared {
+  contain: paint;
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: shared;
+}
+
+/* We're verifying what we capture, so just display the old contents for 5 minutes.  */
+html::view-transition { background: pink; }
+html::view-transition-group(shared) { animation-duration: 300s; }
+
+html::view-transition-old(shared) {
+  animation: unset;
+  opacity: 1;
+  border: 10px solid black;
+}
+html::view-transition-old(*) {
+  border: 10px solid red;
+}
+
+html::view-transition-new(shared) { animation: unset; opacity: 0; }
+
+html::view-transition-old(root) { animation: unset; opacity: 0; }
+html::view-transition-new(root) { animation: unset; opacity: 0 }
+</style>
+<div id=shared></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/shared-transition-author-style.manual.html b/testing/web-platform/tests/css/css-view-transitions/shared-transition-author-style.manual.html
new file mode 100644
index 0000000000..d757c8cf0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/shared-transition-author-style.manual.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions of different elements and shapes</title>
+<link rel="help" href="https://github.com/vmpstr/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+body {
+  background: lightpink;
+  overflow: hidden;
+}
+
+input {
+  position: absolute;
+  left: 8px;
+  top: 8px;
+  z-index: 10;
+}
+
+.top {
+  top: 0px;
+  background: green;
+}
+.bottom {
+  bottom: 0px;
+  background: blue;
+}
+
+div {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  height: 40vh;
+  contain: paint;
+}
+</style>
+
+<input id=toggle type=button value="Toggle!"></input>
+<div id=target class=top>
+The div should alternate being at the bottom and at the top.
+The color at the top is green and bottom is blue.
+During the animation, the div has an (x, y) offset and its
+content is a blend of green and blue. There is also a grey
+background with a slight offset from the top.
+</div>
+
+<script>
+let classes = ["top", "bottom"]
+let i = 0;
+
+let transitionStyle =
+  `html::view-transition {
+    top: 50px;
+  }
+
+  html::view-transition-group(root) {
+    background-color: grey;
+  }
+
+  html::view-transition-group(target) {
+    left: 50px;
+  }
+
+  html::view-transition-old(target) {
+    opacity: 0.5;
+    animation-name: none;
+  }
+
+  html::view-transition-new(target) {
+    opacity: 0.5;
+  }
+  `
+
+let pseudoStyle = document.createElement('style');
+pseudoStyle.appendChild(document.createTextNode(transitionStyle));
+
+async function runAnimation() {
+  target.style.viewTransitionName = "target";
+  let t = document.startViewTransition(() => {
+    target.classList.remove(classes[i]);
+    i = (i + 1) % classes.length;
+    target.classList.add(classes[i]);
+
+    document.head.appendChild(pseudoStyle);
+  });
+  await t.finished;
+  document.head.removeChild(pseudoStyle)
+}
+
+function init() {
+  toggle.addEventListener("click", runAnimation);
+}
+onload = init;
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/shared-transition-half.manual.html b/testing/web-platform/tests/css/css-view-transitions/shared-transition-half.manual.html
new file mode 100644
index 0000000000..130348cc20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/shared-transition-half.manual.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions of different elements and shapes</title>
+<link rel="help" href="https://github.com/vmpstr/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+body {
+  background: lightpink;
+  overflow: hidden;
+}
+
+input {
+  position: absolute;
+  left: 8px;
+  top: 8px;
+  z-index: 10;
+}
+
+.top {
+  top: 0px;
+}
+.bottom {
+  bottom: 0px;
+}
+
+div {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  height: 40vh;
+  background: green;
+  contain: paint;
+}
+</style>
+
+<input id=toggle type=button value="Toggle!"></input>
+<div id=target class=top>
+The green div should alternate being at the bottom and at the top.
+Other than green and pink background no other colors should appear.
+</div>
+
+<script>
+let classes = ["top", "bottom"]
+let i = 0;
+async function runAnimation() {
+  target.style.viewTransitionName = "target";
+  let t = document.startViewTransition(() => {
+    target.classList.remove(classes[i]);
+    i = (i + 1) % classes.length;
+    target.classList.add(classes[i]);
+  });
+  await t.finished;
+}
+
+function init() {
+  toggle.addEventListener("click", runAnimation);
+}
+onload = init;
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/shared-transition-shapes.manual.html b/testing/web-platform/tests/css/css-view-transitions/shared-transition-shapes.manual.html
new file mode 100644
index 0000000000..1f666cfe9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/shared-transition-shapes.manual.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions of different elements and shapes</title>
+<link rel="help" href="https://github.com/vmpstr/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+body {
+  background: lightpink;
+}
+
+#container {
+  width: max-content;
+  position: relative;
+}
+
+.left {
+  left: 50px;
+}
+.right {
+  left: 550px;
+}
+
+div {
+  margin: 10px;
+  contain: paint;
+}
+
+.square {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+.rounded {
+  width: 100px;
+  height: 100px;
+  background: green;
+  border-radius: 20%;
+}
+.translucent {
+  opacity: 0.5;
+}
+.text {
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<input id=toggle type=button value="Toggle!"></input>
+<span>Same shape should move right and left</span>
+<div id=container class=left>
+  <div id=e1 class=square></div>
+  <div id=e2 class=rounded></div>
+  <div id=e3 class="square translucent"></div>
+  <div id=e4 class="rounded translucent"></div>
+  <div id=e5 class=text>Lorem Ipsum</div>
+</div>
+
+<script>
+let classes = ["left", "right"]
+let i = 0;
+async function runAnimation() {
+  e1.style.viewTransitionName = "e1";
+  e2.style.viewTransitionName = "e2";
+  e3.style.viewTransitionName = "e3";
+  e4.style.viewTransitionName = "e4";
+  e5.style.viewTransitionName = "e5";
+  let t = document.startViewTransition(() => {
+    container.classList.remove(classes[i]);
+    i = (i + 1) % classes.length;
+    container.classList.add(classes[i]);
+  });
+  await t.finished;
+}
+
+function init() {
+  toggle.addEventListener("click", runAnimation);
+}
+onload = init;
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute-ref.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute-ref.html
new file mode 100644
index 0000000000..3d307ce3c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: use snapshot containing block for absolute position (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+
+<style>
+:root {
+  background-color: red;
+}
+
+body {
+  height: 400vh;
+}
+
+#target {
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  width: 100px;
+  height: 100px;
+
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+
+  background: darkseagreen;
+}
+
+#view-transition {
+  position: absolute;
+  left: 20px;
+  top: 640px;
+  width: 700px;
+  height: 500px;
+  background-color: limegreen;
+}
+
+</style>
+
+<div id="view-transition">
+  <div id="target">TARGET</div>
+</div>
+
+<script>
+onload = () => {
+  const scrollTargetY = 600;
+  window.scrollTo(0, scrollTargetY);
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html
new file mode 100644
index 0000000000..ef986cd75c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: use snapshot containing block for absolute position</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+<link rel="match" href="snapshot-containing-block-absolute-ref.html">
+<meta name="fuzzy" content="snapshot-containing-block-absolute-ref.html:0-20;0-100">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  view-transition-name: none;
+  background-color: red;
+}
+
+body {
+  height: 400vh;
+}
+
+#target {
+  position: absolute;
+  left: 0px;
+  top: 600px;
+  width: 100px;
+  height: 100px;
+
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+
+  background: darkseagreen;
+  view-transition-name: target;
+}
+
+::view-transition-group(target) {
+  animation-duration: 50s;
+  top: unset;
+  left: unset;
+  right: 0px;
+  bottom: 0px;
+}
+
+::view-transition {
+  position: absolute;
+  left: 20px;
+  top: 40px;
+  width: 700px;
+  height: 500px;
+  background-color: limegreen;
+}
+
+</style>
+
+<div id="target">TARGET</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  // Start the view transition at a scroll offset so that the snapshot
+  // containing block differs from the initial containing block. Scroll so that
+  // the target is at 0,0 so its transition group has an identity transform.
+  const scrollTargetY = document.getElementById('target').offsetTop;
+  window.scrollTo(0, scrollTargetY);
+  let transition = document.startViewTransition();
+  await transition.ready;
+  takeScreenshot();
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter-ref.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter-ref.html
new file mode 100644
index 0000000000..8a74bd2164
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: snapshot containing block includes scrollbar gutters (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+<style>
+:root {
+  scrollbar-gutter: stable both-edges
+}
+#view-transition-mock {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: palegreen;
+}
+#target {
+  position: absolute;
+  top: 100px;
+  left: 0px;
+  width: 200px;
+  height: 200px;
+  background-color: limegreen;
+}
+</style>
+<div id="view-transition-mock">
+<!--
+    This box should be a scrollbar's width from the left edge and
+    exactly aligned with the light green background.
+-->
+  <div id="target">
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html
new file mode 100644
index 0000000000..6e9bf568f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: snapshot containing block includes scrollbar gutters</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+<link rel="match" href="snapshot-containing-block-includes-scrollbar-gutter-ref.html">
+<meta name="fuzzy" content="snapshot-containing-block-includes-scrollbar-gutter-ref.html:0-20;0-100">
+<script src="/common/reftest-wait.js"></script>
+<style>
+  :root {
+    scrollbar-gutter: stable both-edges;
+    /* unset so ::view-transition is visible. */
+    view-transition-name: none;
+  }
+  ::view-transition {
+    background-color: palegreen;
+  }
+  #target {
+    position: absolute;
+    top: 100px;
+    left: 0px;
+    width: 200px;
+    height: 200px;
+    background-color: limegreen;
+    view-transition-name: target;
+  }
+  ::view-transition-group(target) {
+    animation-duration: 300s;
+  }
+</style>
+<!--
+  This box should be a scrollbar's width from the left edge and
+  exactly aligned with the light green background.
+-->
+<div id="target">
+</div>
+<script>
+  failIfNot(document.startViewTransition,
+      "Missing document.startViewTransition");
+
+  async function runTest() {
+    let transition = document.startViewTransition();
+    await transition.ready;
+    takeScreenshot();
+  }
+
+  onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static-ref.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static-ref.html
new file mode 100644
index 0000000000..8ed60934ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: use snapshot containing block for static position (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+
+<style>
+body {
+  height: 400vh;
+  background-color: limegreen;
+}
+
+div {
+  position: absolute;
+  left: 200px;
+  top: 600px;
+  width: 100px;
+  height: 100px;
+
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+
+  background: darkseagreen;
+}
+
+</style>
+
+<div id="target">TARGET</div>
+
+<script>
+onload = () => {
+  const scrollTargetY = document.getElementById('target').offsetTop - 100;
+  window.scrollTo(0, scrollTargetY);
+};
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html
new file mode 100644
index 0000000000..5e03480c27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: use snapshot containing block for static position</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+<link rel="match" href="snapshot-containing-block-static-ref.html">
+<meta name="fuzzy" content="snapshot-containing-block-static-ref.html:0-20;0-100">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+:root {
+  view-transition-name: none;
+  background-color: red;
+}
+
+body {
+  height: 400vh;
+}
+
+div {
+  position: absolute;
+  left: 200px;
+  top: 600px;
+  width: 100px;
+  height: 100px;
+
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+
+  background: darkseagreen;
+  view-transition-name: target;
+}
+
+::view-transition-group(target) {
+  animation-duration: 50s;
+}
+
+::view-transition {
+  position: static;
+  display: block;
+  height: 100%;
+  width: 100%;
+  background-color: limegreen;
+}
+
+</style>
+
+<div id="target">TARGET</div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  // Start the view transition at a scroll offset so that the snapshot
+  // containing block differs from the initial containing block.
+  const scrollTargetY = document.getElementById('target').offsetTop - 100;
+  window.scrollTo(0, scrollTargetY);
+  let transition = document.startViewTransition();
+  await transition.ready;
+  takeScreenshot();
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations-ref.html b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations-ref.html
new file mode 100644
index 0000000000..e0a75e730f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: span with overflowing text is rendered correctly (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+span {
+  text-shadow: red -2px -5px;
+  border: 2px solid black;
+  box-shadow: 3px 3px red, -1em 0 .4em olive;
+}
+
+body {
+  background: pink;
+}
+</style>
+
+<span>This text should render correctly</span>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html
new file mode 100644
index 0000000000..a2bf59ecb0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-and-box-decorations.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: span with overflowing text is rendered correctly</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="span-with-overflowing-text-and-box-decorations-ref.html">
+<meta name="fuzzy" content="span-with-overflowing-text-and-box-decorations-ref.html:maxDifference=0-3;totalPixels=0-4900">
+
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+span {
+  text-shadow: red -2px -5px;
+  border: 2px solid black;
+  box-shadow: 3px 3px red, -1em 0 .4em olive;
+  view-transition-name: target;
+}
+
+.hidden {
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { visibility: hidden; }
+
+html::view-transition-group(target) {
+  animation: unset;
+}
+
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+
+html::view-transition {
+  background: pink;
+}
+</style>
+
+<span>This text should render correctly</span>
+<div class="hidden"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-hidden-ref.html b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-hidden-ref.html
new file mode 100644
index 0000000000..1d27e470ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-hidden-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: span with overflowing text is rendered correctly (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+div {
+  background: grey;
+}
+span {
+  text-shadow: red 2px 5px;
+  visibility: hidden;
+}
+
+body {
+  background: pink;
+}
+</style>
+
+<div>
+  <span>This text should render correctly</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-hidden.html b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-hidden.html
new file mode 100644
index 0000000000..65b1497c70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-hidden.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: span with overflowing text is rendered correctly</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="span-with-overflowing-text-hidden-ref.html">
+
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+#target {
+  view-transition-name: target;
+  background: grey;
+}
+.hidden {
+  view-transition-name: hidden;
+}
+span {
+  text-shadow: red 2px 5px;
+  visibility: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { visibility: hidden; }
+
+html::view-transition-group(target) {
+  animation: unset;
+}
+
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+
+html::view-transition {
+  background: pink;
+}
+</style>
+
+<div id ="target">
+  <span>This text should render correctly</span>
+</div>
+<div class="hidden"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-ref.html b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-ref.html
new file mode 100644
index 0000000000..4ec4d4ccf8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: span with overflowing text is rendered correctly (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+span {
+  text-shadow: red -2px -5px;
+}
+
+body {
+  background: pink;
+}
+</style>
+
+<span>This text should render correctly</span>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text.html b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text.html
new file mode 100644
index 0000000000..f3f0f534e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/span-with-overflowing-text.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: span with overflowing text is rendered correctly</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="span-with-overflowing-text-ref.html">
+<meta name="fuzzy" content="span-with-overflowing-text-ref.html:maxDifference=0-3;totalPixels=0-1100">
+
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+span {
+  text-shadow: red -2px -5px;
+  view-transition-name: target;
+}
+
+.hidden {
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+html::view-transition-group(root) { visibility: hidden; }
+
+html::view-transition-group(target) {
+  animation: unset;
+}
+
+html::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+html::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+
+html::view-transition {
+  background: pink;
+}
+</style>
+
+<span>This text should render correctly</span>
+<div class="hidden"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(takeScreenshot);
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/style-inheritance.html b/testing/web-platform/tests/css/css-view-transitions/style-inheritance.html
new file mode 100644
index 0000000000..d0cef9be63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/style-inheritance.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: ensure correct style inheritance for pseudo tree</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+::view-transition {
+  background-color: red;
+}
+
+::view-transition-group(*) {
+  background-color: inherit;
+  color: blue;
+  animation-duration: 0.321s;
+}
+
+::view-transition-image-pair(*) {
+  color: inherit;
+  overflow-x: clip;
+}
+
+::view-transition-old(*), ::view-transition-new(*) {
+  overflow-x: inherit;
+}
+</style>
+
+<script>
+promise_test(() => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition();
+    transition.ready.then(() => {
+      assert_equals(getComputedStyle(document.documentElement, "::view-transition").backgroundColor, "rgb(255, 0, 0)", "::view-transition");
+
+      assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").backgroundColor, "rgb(255, 0, 0)", "group");
+      assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").color, "rgb(0, 0, 255)", "group");
+      assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").animationDuration, "0.321s", "group");
+
+      assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").color, "rgb(0, 0, 255)", "wrapper");
+      assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").overflowX, "clip", "wrapper");
+      assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").animationDuration, "0.321s", "wrapper");
+
+      assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").overflowX, "clip", "outgoing");
+      assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").animationDuration, "0.321s", "outgoing");
+      assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").overflowX, "clip", "incoming");
+      assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").animationDuration, "0.321s", "incoming");
+    });
+    await transition.finished;
+    resolve();
+  });
+}, "style inheritance of pseudo elements");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/support/cat.png b/testing/web-platform/tests/css/css-view-transitions/support/cat.png
new file mode 100644
index 0000000000..85dd732481
Binary files /dev/null and b/testing/web-platform/tests/css/css-view-transitions/support/cat.png differ
diff --git a/testing/web-platform/tests/css/css-view-transitions/support/dialog-in-rtl-iframe-child.html b/testing/web-platform/tests/css/css-view-transitions/support/dialog-in-rtl-iframe-child.html
new file mode 100644
index 0000000000..7b40a8fd5b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/support/dialog-in-rtl-iframe-child.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html dir="rtl">
+  <head>
+    <style>
+      body {
+        /* We need a background due to https://crbug.com/1414158. */
+        background-color: white;
+        height: 200vh;
+      }
+
+      ::view-transition-new(*) {
+        animation: unset;
+        opacity: 1;
+      }
+      ::view-transition-old(*) {
+        animation-duration: 30s;
+        opacity: 0;
+      }
+
+      dialog {
+        width: 50dvw;
+        height: 50dvh;
+        box-sizing: border-box;
+        background-color: limegreen;
+        border: 1px solid black;
+      }
+
+    </style>
+    <script>
+      function show() {
+        document.getElementById('dialog').showModal();
+      }
+      function startTransition() {
+        window.transition = document.startViewTransition(() => {
+          show();
+        });
+      }
+
+      const params = new URLSearchParams(window.location.search);
+      if (params.has('show')) {
+        addEventListener('load', show);
+      }
+    </script>
+  </head>
+  <body>
+    <dialog id="dialog">
+    </dialog>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/support/frame-helper.html b/testing/web-platform/tests/css/css-view-transitions/support/frame-helper.html
new file mode 100644
index 0000000000..3d2e7b52d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/support/frame-helper.html
@@ -0,0 +1,25 @@
+<!doctype html>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+html { height: 50%; }
+::view-transition-group(*) { animation-duration: 500s }
+</style>
+
+<div></div>
+
+<script>
+function run() {
+  document.startViewTransition(() => {
+    requestAnimationFrame(() => requestAnimationFrame(() => {
+      window.parent.postMessage({}, "*");
+    }));
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(run));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/support/iframe-scrollbar-child.html b/testing/web-platform/tests/css/css-view-transitions/support/iframe-scrollbar-child.html
new file mode 100644
index 0000000000..dfd0fb40d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/support/iframe-scrollbar-child.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body.scrollable {
+        width: 200lvw;
+        height: 200lvh;
+      }
+
+      div {
+        width: 200px;
+        height: 200px;
+        background-color: skyblue;
+      }
+
+      ::view-transition-new(*) {
+        animation-duration: 30s;
+        opacity: 0;
+      }
+      ::view-transition-old(*) {
+        animation: unset;
+        opacity: 1;
+      }
+      */
+    </style>
+    <script>
+      function startTransition() {
+        window.transition = document.startViewTransition(() => {
+          document.body.classList.toggle('scrollable');
+        });
+      }
+
+      onload = () => {
+        const params = new URLSearchParams(window.location.search);
+        if (params.has('scrollbar')) {
+          document.body.classList.add('scrollable');
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/support/transition-in-empty-iframe-child.html b/testing/web-platform/tests/css/css-view-transitions/support/transition-in-empty-iframe-child.html
new file mode 100644
index 0000000000..4eca06a0a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/support/transition-in-empty-iframe-child.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      ::view-transition-new(*) {
+        animation: unset;
+        opacity: 1;
+      }
+      ::view-transition-old(*) {
+        animation-duration: 30s;
+        opacity: 0;
+      }
+
+      div {
+        width: 50vw;
+        height: 50vh;
+        background-color: limegreen;
+        border: 1px solid black;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+    </style>
+    <script>
+      function newState() {
+        document.querySelector('.hidden').classList.remove('hidden');
+      }
+
+      function startTransition() {
+        window.transition = document.startViewTransition(newState);
+      }
+
+      const params = new URLSearchParams(window.location.search);
+      if (params.has('ref')) {
+        addEventListener('load', newState);
+      }
+    </script>
+  </head>
+  <body>
+    <div class="hidden">
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/synchronous-callback-skipped-before-run.html b/testing/web-platform/tests/css/css-view-transitions/synchronous-callback-skipped-before-run.html
new file mode 100644
index 0000000000..d6023a7fd2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/synchronous-callback-skipped-before-run.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: skipTransition() invoked before a synchronous updateDOM callback is invoked</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+}
+</style>
+
+<div id=first></div>
+
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition(() => {
+      first.style.viewTransitionName = "target";
+    });
+    transition.skipTransition();
+    await transition.finished;
+
+    if (window.getComputedStyle(first).viewTransitionName == "target")
+      resolve();
+    else
+      reject();
+  });
+}, "finished promise should be resolved if skipTransition() is invoked before a synchronous updateCallbackDone callback is dispatched");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/transform-origin-view-transition-group-ref.html b/testing/web-platform/tests/css/css-view-transitions/transform-origin-view-transition-group-ref.html
new file mode 100644
index 0000000000..e38cbb0ffe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/transform-origin-view-transition-group-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: validates that transform-origin value is default for view-transition-group (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<style>
+.target {
+  width: 100px;
+  height: 150px;
+  background: green;
+  position: fixed;
+  top: 200px;
+  left: 200px;
+  transform: rotate(90deg);
+  view-transition-name: target;
+  clip-path: inset(1px 1px 1px 1px);
+}
+</style>
+
+<div class="target"></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/transform-origin-view-transition-group.html b/testing/web-platform/tests/css/css-view-transitions/transform-origin-view-transition-group.html
new file mode 100644
index 0000000000..17a8218b76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/transform-origin-view-transition-group.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: validates that transform-origin value is default for view-transition-group</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="transform-origin-view-transition-group-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  width: 100px;
+  height: 150px;
+  background: green;
+  view-transition-name: target;
+}
+
+.hidden {
+  contain: paint;
+  width: 10px;
+  height: 10px;
+  background: grey;
+  view-transition-name: hidden;
+}
+
+html::view-transition-group(hidden) { animation-duration: 300s; }
+html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
+
+html::view-transition-group(target) {
+  animation: unset;
+  transform: rotate(90deg);
+  top: 200px;
+  left: 200px;
+  /* The edges have minor pixel differences due to blending in highdpi */
+  clip-path: inset(1px 1px 1px 1px);
+}
+
+html::view-transition-old(target) {
+  opacity: 1;
+  animation: unset;
+}
+html::view-transition-new(target) {
+  opacity: 0;
+  animation: unset;
+}
+</style>
+
+<div class="target"></div>
+<div class="hidden"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  document.startViewTransition().ready.then(
+    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe-ref.html b/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe-ref.html
new file mode 100644
index 0000000000..6747612285
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>View transitions: Transition from an empty iframe (ref)</title>
+  <link rel="help" href="https://github.com/WICG/view-transitions">
+  <link rel="author" href="mailto:bokan@chromium.org">
+  <style>
+    iframe {
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      width: 50vw;
+      height: 50vh;
+    }
+    div {
+      background-color: skyblue;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+
+<body>
+  <iframe src="support/transition-in-empty-iframe-child.html?ref">
+  </iframe>
+  <div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html b/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html
new file mode 100644
index 0000000000..869967a57e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/transition-in-empty-iframe.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<head>
+  <title>View transitions: Transition from an empty iframe</title>
+  <link rel="help" href="https://github.com/WICG/view-transitions">
+  <link rel="author" href="mailto:bokan@chromium.org">
+  <link rel="match" href="transition-in-empty-iframe-ref.html">
+  <meta name=fuzzy content="transition-in-empty-iframe-ref.html:0-80;0-1000">
+  <script src="/common/reftest-wait.js"></script>
+  <style>
+    iframe {
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      width: 50vw;
+      height: 50vh;
+    }
+    /* This div overlaps with the iframe, because the iframe is empty it should
+     * be visible behind the iframe. */
+    div {
+      background-color: skyblue;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+  <script>
+    failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+    onload = () => {
+      requestAnimationFrame(()=>{requestAnimationFrame(()=> {
+        frames[0].window.startTransition();
+        frames[0].window.transition.ready.then(() => {
+          requestAnimationFrame(()=>{requestAnimationFrame(()=> {
+            takeScreenshot();
+          })});
+        });
+      })});
+    }
+  </script>
+</head>
+
+<body>
+  <iframe src="support/transition-in-empty-iframe-child.html">
+  </iframe>
+  <div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/transition-skipped-after-animation-started.html b/testing/web-platform/tests/css/css-view-transitions/transition-skipped-after-animation-started.html
new file mode 100644
index 0000000000..56c477a55f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/transition-skipped-after-animation-started.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: skipTransition() after animations have started running should resolve finished promise</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+  view-transition-name: target;
+}
+
+::view-transition-group(target) {
+  animation-duration: 300s;
+}
+</style>
+
+<div id=first></div>
+
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition();
+    await transition.ready;
+    transition.skipTransition();
+    await transition.finished;
+    resolve();
+  });
+}, "skipTransition() after animations have started running should resolve finished promise");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/transition-skipped-from-invalid-callback.html b/testing/web-platform/tests/css/css-view-transitions/transition-skipped-from-invalid-callback.html
new file mode 100644
index 0000000000..cf3853cd57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/transition-skipped-from-invalid-callback.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: transition skipped in animation phase</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+  view-transition-name: target;
+}
+
+::view-transition-group(target) {
+  animation-duration: 300s;
+}
+</style>
+
+<div id=first></div>
+
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition(() => {
+      let foo = bar;
+    });
+
+    let readyRejected = false;
+    transition.ready.then(reject, () => { readyRejected = true; });
+
+    let domUpdateRejected = false;
+    transition.updateCallbackDone.then(reject, () => { domUpdateRejected = true; });
+    transition.finished.then(reject, () => {
+      assert_true(readyRejected, "ready not rejected");
+      assert_true(domUpdateRejected, "dom update not rejected");
+      resolve();
+    });
+  });
+}, "transition skipped because callback has invalid syntax");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/unset-and-initial-view-transition-name.html b/testing/web-platform/tests/css/css-view-transitions/unset-and-initial-view-transition-name.html
new file mode 100644
index 0000000000..2715a5bb33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/unset-and-initial-view-transition-name.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: validates that view-transition-name: unset or initial are ignored</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+#first {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+  view-transition-name: target;
+}
+#second {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: unset;
+}
+#third {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: initial;
+}
+</style>
+
+<div id=first></div>
+<div id=second></div>
+<div id=third></div>
+
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition();
+    await transition.updateCallbackDone;
+
+    // Elements with view-transition-name: initial and unset don't have
+    // containment. Because they are ignored they don't cause the transition to
+    // be skipped.
+    await transition.ready;
+    transition.finished.then(resolve, reject);
+  });
+}, "validates that view-transition-name: unset or initial are ignored");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-backdrop-filter-root-ref.html b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-backdrop-filter-root-ref.html
new file mode 100644
index 0000000000..32aaf55412
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-backdrop-filter-root-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: view-transition-name non-none value is a backdrop filter root (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+.background {
+  background: cyan;
+  width: 200px;
+  height: 200px;
+}
+.shared {
+  background: blue;
+  position: relative;
+  left: 50px;
+  top: 50px;
+  width: 100px;
+  height: 100px;
+  will-change: opacity;
+}
+.filter {
+  backdrop-filter: invert(1);
+  position: relative;
+  left: -50px;
+  top: 30px;
+  width: 200px;
+  height: 40px;
+}
+</style>
+
+<div class=background>
+  <div class=shared>
+    <div class=filter></div>
+  </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-backdrop-filter-root.html b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-backdrop-filter-root.html
new file mode 100644
index 0000000000..c4f4d38313
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-backdrop-filter-root.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: view-transition-name non-none value is a backdrop filter root</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="view-transition-name-is-backdrop-filter-root-ref.html">
+
+<style>
+.background {
+  background: cyan;
+  width: 200px;
+  height: 200px;
+}
+.shared {
+  background: blue;
+  position: relative;
+  left: 50px;
+  top: 50px;
+  width: 100px;
+  height: 100px;
+  view-transition-name: shared;
+}
+.filter {
+  backdrop-filter: invert(1);
+  position: relative;
+  left: -50px;
+  top: 30px;
+  width: 200px;
+  height: 40px;
+}
+</style>
+
+<div class=background>
+  <div class=shared>
+    <div class=filter></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-grouping-ref.html b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-grouping-ref.html
new file mode 100644
index 0000000000..add20600f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-grouping-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: view-transition-name non-none value is a grouping value (ref)</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+.parent {
+  top: 0;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  background: green;
+}
+body {
+  perspective: 1000px;
+  height: 500px;
+}
+</style>
+
+<div class=parent></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-grouping.html b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-grouping.html
new file mode 100644
index 0000000000..95739351f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-is-grouping.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: view-transition-name non-none value is a grouping value</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="view-transition-name-is-grouping-ref.html">
+
+<style>
+.parent {
+  top: 0;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  background: red;
+  transform-style: preserve-3d;
+  view-transition-name: target;
+}
+
+.child {
+  background: green;
+  width: 100px;
+  height: 100px;
+  top: 0;
+  left: 0;
+  position: absolute;
+  transform: translateZ(-500px);
+}
+
+body {
+  perspective: 1000px;
+  height: 500px;
+}
+</style>
+
+<div class=parent><div class=child></div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root-ref.html b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root-ref.html
new file mode 100644
index 0000000000..cc0250bc59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: view-transition-name is limited to document root (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<head>
+<style>
+html {
+  view-transition-name: none;
+}
+
+:root {
+  view-transition-name: root;
+}
+
+.foo {
+  position: fixed;
+  left: 0;
+  top: 0;
+  background: red;
+  width: 100px;
+  height: 100px;
+  z-index: 1000;
+}
+
+.bar {
+  position: fixed;
+  left: 50px;
+  top: 50px;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+</style>
+</head>
+<body>
+<script>
+const extraHTML = document.createElement('html');
+
+const foo = document.createElement('div');
+foo.className = 'foo';
+
+const bar = document.createElement('div');
+bar.className = 'bar';
+
+extraHTML.append(foo);
+document.body.append(extraHTML, bar);
+</script>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root.html b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root.html
new file mode 100644
index 0000000000..afd5d56f61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-document-root.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: view-transition-name is limited to document root</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="view-transition-name-on-document-root-ref.html">
+<head>
+<style>
+.foo {
+  position: fixed;
+  left: 0;
+  top: 0;
+  background: red;
+  width: 100px;
+  height: 100px;
+  z-index: 1000;
+}
+
+.bar {
+  position: fixed;
+  left: 50px;
+  top: 50px;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+</style>
+</head>
+<body>
+<script>
+const extraHTML = document.createElement('html');
+
+const foo = document.createElement('div');
+foo.className = 'foo';
+
+const bar = document.createElement('div');
+bar.className = 'bar';
+
+extraHTML.append(foo);
+document.body.append(extraHTML, bar);
+</script>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-removed-element.html b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-removed-element.html
new file mode 100644
index 0000000000..36beb30828
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-on-removed-element.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: ensures view-transition-name is not tracked on element removed by script</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+#first {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: first;
+}
+</style>
+<body>
+  <div>
+    <div id=first></div>
+  </div>
+</body>
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    // Remove an uncontained element. Because this element is not visited when
+    // discovering named elements, the transition is not skipped.
+    first.remove();
+
+    let transition = document.startViewTransition();
+    await transition.ready;
+    transition.finished.then(resolve, reject);
+  });
+}, "view-transition-name on an element removed by script should not be visited when discovering named elements");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition-ref.html b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition-ref.html
new file mode 100644
index 0000000000..9ec14f60cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: view-transition-name removed mid transition (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<style>
+.foo {
+  position: fixed;
+  left: 0;
+  top: 0;
+  background: red;
+  width: 100px;
+  height: 100px;
+  z-index: 1000;
+}
+
+.bar {
+  position: fixed;
+  left: 50px;
+  top: 50px;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div class="target" id="target">
+  <div class="foo"></div>
+</div>
+<div class="bar"></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition.html b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition.html
new file mode 100644
index 0000000000..b18df68511
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/view-transition-name-removed-mid-transition.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: view-transition-name removed mid transition</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="view-transition-name-removed-mid-transition-ref.html">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+.target {
+  view-transition-name:foo;
+}
+
+.foo {
+  position: fixed;
+  left: 0;
+  top: 0;
+  background: red;
+  width: 100px;
+  height: 100px;
+  z-index: 1000;
+}
+
+.bar {
+  position: fixed;
+  left: 50px;
+  top: 50px;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div class="target" id="target">
+  <div class="foo"></div>
+</div>
+<div class="bar"></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+async function runTest() {
+  let transition = document.startViewTransition();
+  await transition.ready;
+  target.style.viewTransitionName = "none";
+  await transition.finished;
+  takeScreenshot();
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/web-animation-pseudo-incorrect-name.html b/testing/web-platform/tests/css/css-view-transitions/web-animation-pseudo-incorrect-name.html
new file mode 100644
index 0000000000..e8d14f1bb0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/web-animation-pseudo-incorrect-name.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: creating animation for non-existant view transition pseudo</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: target;
+  contain: paint;
+}
+</style>
+
+<div id=first></div>
+
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition();
+    await transition.ready;
+
+    let animation = document.documentElement.animate(
+        { transform: ['translate(100px)', 'translate(200px)'] },
+        {duration: 100, pseudoElement: '::view-transition-group(bad-target)', fill: "forwards"});
+
+    requestAnimationFrame(() => {
+      animation.currentTime = 200;
+      requestAnimationFrame(() => requestAnimationFrame(resolve));
+    });
+  });
+}, "animation created with incorrect name");
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/web-animations-api-ref.html b/testing/web-platform/tests/css/css-view-transitions/web-animations-api-ref.html
new file mode 100644
index 0000000000..ab66e7d16d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/web-animations-api-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>View transitions: one element captured for two tags (ref)</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<style>
+div {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+#first {
+  background: blue;
+  width: 100px;
+  height: 100px;
+  transform: translate(100px);
+}
+#second {
+  background: green;
+  width: 100px;
+  height: 100px;
+  transform: translate(150px);
+}
+</style>
+<div id=first></div>
+<div id=second></div>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html b/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html
new file mode 100644
index 0000000000..6d8395ebb7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/web-animations-api.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: capture opacity elements</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:khushalsagar@chromium.org">
+<link rel="match" href="web-animations-api-ref.html">
+<meta name="fuzzy" content="web-animations-api-ref.html:0-2;0-500">
+
+<script src="/common/reftest-wait.js"></script>
+<style>
+#first {
+  background: blue;
+  width: 100px;
+  height: 100px;
+  contain:  paint;
+}
+#second {
+  background: green;
+  width: 100px;
+  height: 100px;
+  contain: paint;
+}
+
+/* Unset all animations since the test drives it using WA-API */
+html::view-transition-group(*),
+html::view-transition-image-pair(*),
+html::view-transition-new(*),
+html::view-transition-old(*) {
+  animation: unset;
+}
+
+html::view-transition-group(root){
+  opacity: 0;
+}
+
+</style>
+<div id=first></div>
+<div id=second></div>
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function setAnimation() {
+  document.documentElement.animate({ transform: ['translate(100px)', 'translate(100px)'] }, { duration: 10000, pseudoElement: '::view-transition-group(first)'});
+  document.documentElement.animate({ transform: ['translate(150px)', 'translate(150px)'] }, { duration: 10000, pseudoElement: '::view-transition-group(second)'});
+  requestAnimationFrame(takeScreenshot);
+}
+
+async function runTest() {
+  first.style.viewTransitionName = "first";
+  document.startViewTransition(() => {
+    first.style.viewTransitionName = "";
+    second.style.viewTransitionName = "second";
+    requestAnimationFrame(setAnimation);
+  });
+}
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
+
diff --git a/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition-before-ready.html b/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition-before-ready.html
new file mode 100644
index 0000000000..6caadeba89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition-before-ready.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<title>
+View transitions: Resizing viewport before animating rejects the ready promise.
+</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+
+<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>
+function pollForResize(win) {
+  const initial_width = win.innerWidth;
+  return new Promise(resolve => {
+    const interval_id = win.setInterval(() => {
+      if (win.innerWidth != initial_width) {
+        win.clearInterval(interval_id);
+        resolve();
+      }
+    }, 100);
+  });
+}
+
+promise_test(async t => {
+  assert_implements(
+      document.startViewTransition, 'Missing document.startViewTransition');
+
+  let popup_win;
+
+  // Open a popup window that we'll use to start a transition
+  await test_driver.bless('Open a popup in a new window', () => {
+      popup_win = window.open('about:blank', 'popup', 'width=300,height=300');
+  });
+
+  // Resize the window while the update callback is running (i.e. before
+  // capturing the new state).
+  let transition = popup_win.document.startViewTransition(async () => {
+    // resizeTo is asynchonous so we want to wait until it takes effect
+    // before proceeding to capture the new state. Needs to poll for a
+    // changed size since rAFs are currently blocked (and thus, so is
+    // `resize` event).
+    const popup_resize = pollForResize(popup_win);
+    popup_win.resizeTo(popup_win.innerWidth/2, popup_win.innerHeight/2);
+    await popup_resize;
+  });
+
+  // Since the window was resized before capturing the new state, the
+  // transition must be skipped and the ready promise rejected.
+
+  let did_finish = false;
+  transition.finished.then(() => { did_finish = true; });
+
+  await promise_rejects_dom(t, 'InvalidStateError', popup_win.DOMException,
+      transition.ready, 'Resize must must reject `ready`.');
+
+  assert_true(did_finish, 'Transition must be skipped.');
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition.html b/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition.html
new file mode 100644
index 0000000000..e2424cad8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>View transitions: Resizing viewport skips the transition</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+
+<script src="/common/rendering-utils.js"></script>
+<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>
+function waitForAtLeastOneFrame(win) {
+  return new Promise(resolve => {
+    win.requestAnimationFrame(() => {
+      win.requestAnimationFrame(() => {
+        resolve();
+      });
+    });
+  });
+}
+
+let popupWin;
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+
+  return new Promise(async (resolve, reject) => {
+    await waitForAtLeastOneFrame(window);
+
+    // Open a popup window that we'll use to start a transition
+    await test_driver.bless('Open a popup in a new window', () => {
+        popupWin = window.open('about:blank', 'popup', 'width=300,height=300');
+    });
+    let popupDoc = popupWin.document;
+    popupDoc.documentElement.innerHTML = `
+      <style>
+        html {background-color: red;}
+        html.new {background-color: limegreen;}
+
+        /* Set a no-op animation to show the old snapshot indefinitely. */
+        html::view-transition-group(*) {animation-duration: 10s;}
+        html::view-transition-new(*) {animation: unset;opacity: 0;}
+        html::view-transition-old(*) {animation-duration: 10s;opacity: 1;}
+      </style>`;
+
+    // Start a transition inside the popup.
+    let transition = popupDoc.startViewTransition(() => {
+      popupDoc.documentElement.classList.add('new');
+    });
+
+    let finishResolved = false;
+    transition.finished.then(() => {
+      finishResolved = true;
+    });
+
+    // Wait for the transition to start animating.
+    await transition.ready;
+    await waitForAtLeastOneFrame(popupWin);
+    await waitForAtLeastOneFrame(popupWin);
+
+    // Resize the popup window.
+    popupWin.resizeTo(popupWin.innerWidth/2, popupWin.innerHeight/2);
+
+    await waitForAtLeastOneFrame(popupWin);
+
+    // `finish` should have resolved as resizing the transition after capture
+    // should cause it to skip.
+    assert_true(finishResolved, "Transition must be finished by the window resize");
+    resolve();
+  });
+});
+</script>
+</head>
+</html>
diff --git a/testing/web-platform/tests/css/css-view-transitions/writing-mode-container-resize-ref.html b/testing/web-platform/tests/css/css-view-transitions/writing-mode-container-resize-ref.html
new file mode 100644
index 0000000000..3f8835ef94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/writing-mode-container-resize-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: writing mode on a container (ref)</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+#target {
+  background: lightblue;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+}
+#container {
+  width: 100px;
+  height: 50px;
+  border: 1px solid black;
+}
+body {
+  writing-mode: vertical-lr;
+  background: pink;
+}
+</style>
+
+<div id=container><div id=target></div></div>
diff --git a/testing/web-platform/tests/css/css-view-transitions/writing-mode-container-resize.html b/testing/web-platform/tests/css/css-view-transitions/writing-mode-container-resize.html
new file mode 100644
index 0000000000..d440cf6eeb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/writing-mode-container-resize.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: writing mode on a container</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="writing-mode-container-resize-ref.html">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+#target {
+  view-transition-name: target;
+  background: lightblue;
+  width: 100px;
+  height: 100px;
+}
+.vertical {
+  writing-mode: vertical-lr;
+}
+::view-transition-group(root) {
+  visibility: hidden;
+  animation-duration: 500s;
+}
+::view-transition-old(target) {
+  animation: unset;
+  opacity: 1;
+}
+::view-transition-new(target) {
+  animation: unset;
+  opacity: 0;
+}
+::view-transition-group(target) {
+  height: 50px;
+  border: 1px solid black;
+  animation: unset;
+}
+::view-transition {
+  background: pink;
+}
+</style>
+
+<div id=target class=vertical></div>
+
+<script>
+failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+function runTest() {
+  const transition = document.startViewTransition(() => target.remove());
+  transition.ready.then(takeScreenshot);
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
-- 
cgit v1.2.3