[view-transitions] Implement "update pseudo-element styles" algorithm.

https://bugs.webkit.org/show_bug.cgi?id=265224 rdar://118703293> Reviewed by Tim Nguyen. Implements the basic outline of capturing the computed style from both the old and new elements, and using these to generate a style rule for the selector ':root::view-transition-group(transitionName)'. Adds a mostly empty RenderViewTransitionOld class that we will use for the replaced snapshot content, but just acts as a placeholder for the intrinsic size right now. With these changes, the size of the transitioned element now gets applied correctly to the :view-transition-new/old renderers, and styles targetting them (like background color) correctly get applied and rendered. The next step is to implement the 'capture the image' algorithm for new and old (likely splitting RenderViewTransformNew as a separate class), so that we also include the replaced content. * Source/WebCore/Sources.txt: * Source/WebCore/WebCore.xcodeproj/project.pbxproj: * Source/WebCore/dom/ViewTransition.cpp: (WebCore::ViewTransition::captureOldState): (WebCore::ViewTransition::handleTransitionFrame): (WebCore::ViewTransition::copyElementBaseProperties): (WebCore::ViewTransition::updatePseudoElementStyles): * Source/WebCore/dom/ViewTransition.h: (WebCore::OrderedNamedElementsMap::map const): (WebCore::OrderedNamedElementsMap::find const): * Source/WebCore/rendering/RenderObject.h: (WebCore::RenderObject::isRenderViewTransitionOld const): * Source/WebCore/rendering/RenderViewTransitionOld.cpp: Added. (WebCore::RenderViewTransitionOld::RenderViewTransitionOld): (WebCore::RenderViewTransitionOld::setImage): * Source/WebCore/rendering/RenderViewTransitionOld.h: Added. * Source/WebCore/rendering/updating/RenderTreeUpdaterViewTransition.cpp: (WebCore::RenderTreeUpdater::ViewTransition::buildPseudoElementGroup): (WebCore::RenderTreeUpdater::ViewTransition::updatePseudoElementGroup): * Source/WebCore/style/ElementRuleCollector.cpp: (WebCore::Style::ElementRuleCollector::ElementRuleCollector): (WebCore::Style::ElementRuleCollector::matchUARules): * Source/WebCore/style/ElementRuleCollector.h: * Source/WebCore/style/StyleResolver.cpp: (WebCore::Style::Resolver::applyMatchedProperties): (WebCore::Style::Resolver::setViewTransitionGroupStyles): * Source/WebCore/style/StyleResolver.h: * Source/WebCore/style/StyleScope.cpp: (WebCore::Style::Scope::createDocumentResolver): * Source/WebCore/style/StyleScope.h: * Source/WebCore/style/StyleScopeRuleSets.cpp: (WebCore::Style::ScopeRuleSets::dynamicViewTransitionsStyle const): * Source/WebCore/style/StyleScopeRuleSets.h: (WebCore::Style::ScopeRuleSets::setDynamicViewTransitionsStyle): Canonical link: https://commits.webkit.org/274817@main
WebKit · Feb 16, 2024 · 810e27d · 810e27d
1 parent be619ad
commit 810e27d
Show file tree

Hide file tree

Showing 17 changed files with 273 additions and 15 deletions.
diff --git a/Source/WebCore/Sources.txt b/Source/WebCore/Sources.txt
@@ -2694,6 +2694,7 @@ rendering/RenderTreeMutationDisallowedScope.cpp
 rendering/RenderVTTCue.cpp
 rendering/RenderVideo.cpp
 rendering/RenderView.cpp
+rendering/RenderViewTransitionCapture.cpp
 rendering/RenderWidget.cpp
 rendering/StyledMarkedText.cpp
 rendering/TableLayout.cpp

diff --git a/Source/WebCore/WebCore.xcodeproj/project.pbxproj b/Source/WebCore/WebCore.xcodeproj/project.pbxproj
@@ -4218,6 +4218,7 @@
 		A7D6B3490F61104500FF9FD1 /* WorkerFontLoadRequest.h in Headers */ = {isa = PBXBuildFile; fileRef = A7D6B3470F61104500FF9FD1 /* WorkerFontLoadRequest.h */; settings = {ATTRIBUTES = (Private, ); }; };
 		A7D8E64A28C80F2A0019F92F /* GraphicsClient.h in Headers */ = {isa = PBXBuildFile; fileRef = A7D8E64928C80F2A0019F92F /* GraphicsClient.h */; settings = {ATTRIBUTES = (Private, ); }; };
 		A7DBF8DE1276919C006B6008 /* TextCheckingHelper.h in Headers */ = {isa = PBXBuildFile; fileRef = A7DBF8DC1276919C006B6008 /* TextCheckingHelper.h */; settings = {ATTRIBUTES = (Private, ); }; };
+		A7F49C132B7D49B800C71519 /* RenderViewTransitionCapture.h in Headers */ = {isa = PBXBuildFile; fileRef = A7F49C122B7D49A000C71519 /* RenderViewTransitionCapture.h */; settings = {ATTRIBUTES = (Private, ); }; };
 		A80E6CE60A1989CA007FB8C5 /* CSSPrimitiveValue.h in Headers */ = {isa = PBXBuildFile; fileRef = A80E6CBC0A1989CA007FB8C5 /* CSSPrimitiveValue.h */; settings = {ATTRIBUTES = (Private, ); }; };
 		A80E6CE80A1989CA007FB8C5 /* CSSShadowValue.h in Headers */ = {isa = PBXBuildFile; fileRef = A80E6CBE0A1989CA007FB8C5 /* CSSShadowValue.h */; };
 		A80E6CE90A1989CA007FB8C5 /* CSSValueList.h in Headers */ = {isa = PBXBuildFile; fileRef = A80E6CBF0A1989CA007FB8C5 /* CSSValueList.h */; settings = {ATTRIBUTES = (Private, ); }; };
@@ -16164,6 +16165,8 @@
 		A7D8E64928C80F2A0019F92F /* GraphicsClient.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = GraphicsClient.h; sourceTree = "<group>"; };
 		A7DBF8DB1276919C006B6008 /* TextCheckingHelper.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = TextCheckingHelper.cpp; sourceTree = "<group>"; };
 		A7DBF8DC1276919C006B6008 /* TextCheckingHelper.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = TextCheckingHelper.h; sourceTree = "<group>"; };
+		A7F49C122B7D49A000C71519 /* RenderViewTransitionCapture.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RenderViewTransitionCapture.h; sourceTree = "<group>"; };
+		A7F49C142B7D500F00C71519 /* RenderViewTransitionCapture.cpp */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; path = RenderViewTransitionCapture.cpp; sourceTree = "<group>"; };
 		A7FF1A86291C4AD100A7DE24 /* GraphicsLayerAsyncContentsDisplayDelegateCocoa.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GraphicsLayerAsyncContentsDisplayDelegateCocoa.h; sourceTree = "<group>"; };
 		A7FF1A87291C4AD200A7DE24 /* GraphicsLayerAsyncContentsDisplayDelegateCocoa.mm */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.objcpp; path = GraphicsLayerAsyncContentsDisplayDelegateCocoa.mm; sourceTree = "<group>"; };
 		A80A38FD0E50CC8200A25EBC /* PatternCG.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = PatternCG.cpp; sourceTree = "<group>"; };
@@ -36417,6 +36420,8 @@
 				E4B41E340CBFB60900AF2ECE /* RenderVideo.h */,
 				BCEA4828097D93020094C9E4 /* RenderView.cpp */,
 				BCEA4829097D93020094C9E4 /* RenderView.h */,
+				A7F49C142B7D500F00C71519 /* RenderViewTransitionCapture.cpp */,
+				A7F49C122B7D49A000C71519 /* RenderViewTransitionCapture.h */,
 				BE20507B18A458B10080647E /* RenderVTTCue.cpp */,
 				BE20507C18A458B10080647E /* RenderVTTCue.h */,
 				A871DFE10A15376B00B12A68 /* RenderWidget.cpp */,
@@ -41698,6 +41703,7 @@
 				E47C39311FE6E10200BBBC6B /* RenderTreeUpdaterGeneratedContent.h in Headers */,
 				E44614520CD68A3500FADA75 /* RenderVideo.h in Headers */,
 				BCEA4868097D93020094C9E4 /* RenderView.h in Headers */,
+				A7F49C132B7D49B800C71519 /* RenderViewTransitionCapture.h in Headers */,
 				BE20507E18A458C20080647E /* RenderVTTCue.h in Headers */,
 				A871DFE40A15376B00B12A68 /* RenderWidget.h in Headers */,
 				A89CCC530F44E98100B5DA10 /* ReplaceNodeWithSpanCommand.h in Headers */,

diff --git a/Source/WebCore/dom/ViewTransition.cpp b/Source/WebCore/dom/ViewTransition.cpp
@@ -27,10 +27,14 @@
 #include "ViewTransition.h"
 
 #include "CheckVisibilityOptions.h"
+#include "ComputedStyleExtractor.h"
 #include "Document.h"
 #include "JSDOMPromise.h"
 #include "JSDOMPromiseDeferred.h"
 #include "PseudoElementRequest.h"
+#include "RenderBox.h"
+#include "StyleResolver.h"
+#include "StyleScope.h"
 #include "Styleable.h"
 #include "TypedElementDescendantIteratorInlines.h"
 
@@ -273,6 +277,12 @@ ExceptionOr<void> ViewTransition::captureOldState()
     for (auto& element : captureElements) {
         // FIXME: Fill in the rest of CapturedElement.
         CapturedElement capture;
+
+        CheckedPtr renderBox = dynamicDowncast<RenderBox>(element->renderer());
+        if (renderBox)
+            capture.oldSize = renderBox->size();
+        capture.oldProperties = copyElementBaseProperties(element.get());
+
         auto transitionName = element->computedStyle()->viewTransitionName();
         m_namedElements.add(transitionName->name, capture);
     }
@@ -365,7 +375,7 @@ void ViewTransition::handleTransitionFrame()
     }
 
     // FIXME: If transition’s initial snapshot containing block size is not equal to the snapshot containing block size, then skip the view transition for transition, and return.
-    // FIXME: Update pseudo-element styles for transition.
+    updatePseudoElementStyles();
 }
 
 // https://drafts.csswg.org/css-view-transitions/#clear-view-transition-algorithm
@@ -391,9 +401,55 @@ void ViewTransition::clearViewTransition()
 
     protectedDocument()->setHasViewTransitionPseudoElementTree(false);
     protectedDocument()->setActiveViewTransition(nullptr);
+    protectedDocument()->styleScope().clearViewTransitionStyles();
 
     if (RefPtr documentElement = protectedDocument()->documentElement())
         documentElement->invalidateStyleInternal();
 }
 
+Ref<MutableStyleProperties> ViewTransition::copyElementBaseProperties(Element& element)
+{
+    // FIXME: Transform - ComputedStyleExtractor.cpp::matrixTransformValue
+    ComputedStyleExtractor styleExtractor(&element);
+
+    CSSPropertyID transitionProperties[] = {
+        CSSPropertyWritingMode,
+        CSSPropertyDirection,
+        CSSPropertyTextOrientation,
+        CSSPropertyMixBlendMode,
+        CSSPropertyBackdropFilter,
+#if ENABLE(DARK_MODE_CSS)
+        CSSPropertyColorScheme,
+#endif
+        CSSPropertyWidth,
+        CSSPropertyHeight,
+    };
+
+    return styleExtractor.copyProperties(transitionProperties);
+}
+
+// https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles
+void ViewTransition::updatePseudoElementStyles()
+{
+    auto& resolver = protectedDocument()->styleScope().resolver();
+
+    for (auto& iter : m_namedElements.map()) {
+        RefPtr<MutableStyleProperties> properties;
+        if (iter.value->newElement)
+            properties = copyElementBaseProperties(*iter.value->newElement);
+        else
+            properties = iter.value->oldProperties;
+
+        if (properties) {
+            if (!iter.value->groupStyleProperties) {
+                iter.value->groupStyleProperties = properties;
+                resolver.setViewTransitionGroupStyles(iter.key, *properties);
+            } else
+                iter.value->groupStyleProperties->mergeAndOverrideOnConflict(*properties);
+        }
+    }
+
+    protectedDocument()->styleScope().didChangeStyleSheetContents();
+}
+
 }
diff --git a/Source/WebCore/dom/ViewTransition.h b/Source/WebCore/dom/ViewTransition.h
@@ -29,6 +29,7 @@
 #include "Element.h"
 #include "ExceptionOr.h"
 #include "JSValueInWrappedObject.h"
+#include "MutableStyleProperties.h"
 #include "ViewTransitionUpdateCallback.h"
 #include <wtf/CheckedRef.h>
 #include <wtf/Ref.h>
@@ -52,18 +53,16 @@ struct CapturedElement {
 public:
     // FIXME: Add the following:
     // old image (2d bitmap)
-    // old width / height
+    LayoutSize oldSize;
+    RefPtr<MutableStyleProperties> oldProperties;
     // old transform
-    // old writing mode
-    // old direction
-    // old text-orientation
-    // old mix-blend-mode
     WeakPtr<Element, WeakPtrImplWithEventTargetData> newElement;
 
+    RefPtr<MutableStyleProperties> groupStyleProperties;
+
     // FIXME: Also handle these:
     // group keyframes
     // group animation name rule
-    // group styles rule
     // image pair isolation rule
     // image animation name rule
 };
@@ -92,6 +91,16 @@ struct OrderedNamedElementsMap {
         return m_keys;
     }
 
+    auto& map() const
+    {
+        return m_map;
+    }
+
+    auto& map()
+    {
+        return m_map;
+    }
+
     bool isEmpty() const
     {
         return m_keys.isEmpty();
@@ -104,6 +113,13 @@ struct OrderedNamedElementsMap {
         return nullptr;
     }
 
+    const CapturedElement* find(const AtomString& key) const
+    {
+        if (auto it = m_map.find(key); it != m_map.end())
+            return &it->value;
+        return nullptr;
+    }
+
 private:
     ListHashSet<AtomString> m_keys;
     HashMap<AtomString, UniqueRef<CapturedElement>> m_map;
@@ -138,6 +154,10 @@ class ViewTransition : public RefCounted<ViewTransition>, public CanMakeWeakPtr<
 private:
     ViewTransition(Document&, RefPtr<ViewTransitionUpdateCallback>&&);
 
+    Ref<MutableStyleProperties> copyElementBaseProperties(Element&);
+
+    void updatePseudoElementStyles();
+
     WeakPtr<Document, WeakPtrImplWithEventTargetData> m_document;
 
     OrderedNamedElementsMap m_namedElements;

diff --git a/Source/WebCore/rendering/RenderObject.h b/Source/WebCore/rendering/RenderObject.h
@@ -169,6 +169,7 @@ class RenderObject : public CachedImageClient, public CanMakeCheckedPtr {
         VTTCue,
         Video,
         View,
+        ViewTransitionCapture,
 #if ENABLE(MATHML)
         MathMLBlock,
         MathMLFenced,
@@ -254,6 +255,7 @@ class RenderObject : public CachedImageClient, public CanMakeCheckedPtr {
         IsImage = 1 << 0,
         IsMedia = 1 << 1,
         IsWidget = 1 << 2,
+        IsViewTransitionCapture = 1 << 3,
     };
 
     enum class SVGModelObjectFlag : uint8_t {
@@ -474,6 +476,7 @@ class RenderObject : public CachedImageClient, public CanMakeCheckedPtr {
     bool isRenderSearchField() const { return type() == Type::SearchField; }
     bool isRenderTextControlInnerBlock() const { return type() == Type::TextControlInnerBlock; }
     bool isRenderVideo() const { return type() == Type::Video; }
+    bool isRenderViewTransitionCapture() const { return isRenderReplaced() && m_typeSpecificFlags.replacedFlags().contains(ReplacedFlag::IsViewTransitionCapture); }
     bool isRenderWidget() const { return isRenderReplaced() && m_typeSpecificFlags.replacedFlags().contains(ReplacedFlag::IsWidget); }
     bool isRenderHTMLCanvas() const { return type() == Type::HTMLCanvas; }
 #if ENABLE(ATTACHMENT_ELEMENT)

diff --git a/Source/WebCore/rendering/RenderViewTransitionCapture.cpp b/Source/WebCore/rendering/RenderViewTransitionCapture.cpp
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2024 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#include "config.h"
+#include "RenderViewTransitionCapture.h"
+
+#include "RenderBoxModelObjectInlines.h"
+
+namespace WebCore {
+
+WTF_MAKE_ISO_ALLOCATED_IMPL(RenderViewTransitionCapture);
+
+RenderViewTransitionCapture::RenderViewTransitionCapture(Type type, Document& document, RenderStyle&& style)
+    : RenderReplaced(type, document, WTFMove(style), { }, ReplacedFlag::IsViewTransitionCapture)
+{ }
+
+void RenderViewTransitionCapture::setImage(const LayoutSize& size)
+{
+    setIntrinsicSize(size);
+}
+
+} // namespace WebCore
diff --git a/Source/WebCore/rendering/RenderViewTransitionCapture.h b/Source/WebCore/rendering/RenderViewTransitionCapture.h
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2024 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#pragma once
+
+#include "RenderReplaced.h"
+
+namespace WebCore {
+
+class RenderViewTransitionCapture : public RenderReplaced {
+    WTF_MAKE_ISO_ALLOCATED(RenderViewTransitionCapture);
+public:
+    RenderViewTransitionCapture(Type, Document&, RenderStyle&&);
+
+    // FIXME: This should be setting the actual image, as well as the instrinsic
+    // size
+    void setImage(const LayoutSize&);
+
+private:
+    ASCIILiteral renderName() const override { return style().pseudoElementType() == PseudoId::ViewTransitionNew ? "RenderViewTransitionNew"_s : "RenderViewTransitionOld"_s; }
+
+};
+
+} // namespace WebCore
+
+SPECIALIZE_TYPE_TRAITS_RENDER_OBJECT(RenderViewTransitionCapture, isRenderViewTransitionCapture())
diff --git a/Source/WebCore/rendering/updating/RenderTreeUpdaterViewTransition.cpp b/Source/WebCore/rendering/updating/RenderTreeUpdaterViewTransition.cpp
@@ -32,6 +32,7 @@
 #include "RenderStyleInlines.h"
 #include "RenderTreeUpdater.h"
 #include "RenderView.h"
+#include "RenderViewTransitionCapture.h"
 #include "StyleTreeResolver.h"
 #include "ViewTransition.h"
 
@@ -115,12 +116,22 @@ void RenderTreeUpdater::ViewTransition::buildPseudoElementGroup(const AtomString
 {
     Ref document = documentElementRenderer.document();
     auto& documentElementStyle = documentElementRenderer.style();
-    auto createRendererIfNeeded = [&](const AtomString& name, PseudoId pseudoId) -> RenderPtr<RenderBlockFlow> {
+    auto createRendererIfNeeded = [&](const AtomString& name, PseudoId pseudoId) -> RenderPtr<RenderBox> {
         auto style = documentElementRenderer.getCachedPseudoStyle({ pseudoId, name }, &documentElementStyle);
         if (!style || style->display() == DisplayType::None)
             return nullptr;
         auto newStyle = RenderStyle::clone(*style);
-        auto renderer = WebCore::createRenderer<RenderBlockFlow>(RenderObject::Type::BlockFlow, document, WTFMove(newStyle));
+        RenderPtr<RenderBox> renderer;
+        if (pseudoId == PseudoId::ViewTransitionOld || pseudoId == PseudoId::ViewTransitionNew) {
+            RenderPtr<RenderViewTransitionCapture> rendererViewTransition = WebCore::createRenderer<RenderViewTransitionCapture>(RenderObject::Type::ViewTransitionCapture, document, WTFMove(newStyle));
+
+            if (const auto* capturedElement = document->activeViewTransition()->namedElements().find(name))
+                rendererViewTransition->setImage(capturedElement->oldSize);
+
+            renderer = WTFMove(rendererViewTransition);
+        } else
+            renderer = WebCore::createRenderer<RenderBlockFlow>(RenderObject::Type::BlockFlow, document, WTFMove(newStyle));
+
         renderer->initializeStyle();
         return renderer;
     };
@@ -151,12 +162,22 @@ void RenderTreeUpdater::ViewTransition::updatePseudoElementGroup(const RenderSty
     auto newGroupStyle = RenderStyle::clone(groupStyle);
     group.setStyle(WTFMove(newGroupStyle));
 
-    auto createRendererIfNeeded = [&](PseudoId pseudoId) -> RenderPtr<RenderBlockFlow> {
+    auto createRendererIfNeeded = [&](PseudoId pseudoId) -> RenderPtr<RenderBox> {
         auto style = documentElementRenderer.getCachedPseudoStyle({ pseudoId, name }, &documentElementStyle);
         if (!style || style->display() == DisplayType::None)
             return nullptr;
         auto newStyle = RenderStyle::clone(*style);
-        auto renderer = WebCore::createRenderer<RenderBlockFlow>(RenderObject::Type::BlockFlow, documentElementRenderer.document(), WTFMove(newStyle));
+        RenderPtr<RenderBox> renderer;
+        if (pseudoId == PseudoId::ViewTransitionOld || pseudoId == PseudoId::ViewTransitionNew) {
+            RenderPtr<RenderViewTransitionCapture> rendererViewTransition = WebCore::createRenderer<RenderViewTransitionCapture>(RenderObject::Type::ViewTransitionCapture, documentElementRenderer.document(), WTFMove(newStyle));
+
+            if (const auto* capturedElement = documentElementRenderer.document().activeViewTransition()->namedElements().find(name))
+                rendererViewTransition->setImage(capturedElement->oldSize);
+
+            renderer = WTFMove(rendererViewTransition);
+        } else
+            renderer = WebCore::createRenderer<RenderBlockFlow>(RenderObject::Type::BlockFlow, documentElementRenderer.document(), WTFMove(newStyle));
+
         renderer->initializeStyle();
         return renderer;
     };
@@ -203,8 +224,8 @@ void RenderTreeUpdater::ViewTransition::updatePseudoElementGroup(const RenderSty
     SingleThreadWeakPtr<RenderObject> viewTransitionOld;
     SingleThreadWeakPtr<RenderObject> viewTransitionNew;
 
-    RenderPtr<RenderBlockFlow> newViewTransitionOld;
-    RenderPtr<RenderBlockFlow> newViewTransitionNew;
+    RenderPtr<RenderBox> newViewTransitionOld;
+    RenderPtr<RenderBox> newViewTransitionNew;
     if (imagePairFirstChild->style().pseudoElementType() == PseudoId::ViewTransitionOld) {
         viewTransitionOld = imagePairFirstChild;
         shouldDeleteViewTransitionOld = updateRenderer(*viewTransitionOld);