::view-transition-group dynamic styles doesn't compute the transform.

https://bugs.webkit.org/show_bug.cgi?id=269692
<rdar://123213197>

Reviewed by Tim Nguyen.

The dynamically computed style for :root::view-transition-group(transitionName)
should include 'a transform that would map capturedElement’s new element's
border box from the snapshot containing block origin to its current visual
position.'

* Source/WebCore/css/ComputedStyleExtractor.cpp:
(WebCore::ComputedStyleExtractor::matrixTransformValue):
(WebCore::transformOperationAsCSSValue):
(WebCore::computedTransform):
(WebCore::matrixTransformValue): Deleted.
* Source/WebCore/css/ComputedStyleExtractor.h:
* Source/WebCore/dom/ViewTransition.cpp:
(WebCore::ViewTransition::copyElementBaseProperties):

Canonical link: https://commits.webkit.org/275080@main

Source/WebCore/css/ComputedStyleExtractor.cpp

@@ -736,7 +736,7 @@ static LayoutRect sizingBox(RenderObject& renderer)
     return box->style().boxSizing() == BoxSizing::BorderBox ? box->borderBoxRect() : box->computedCSSContentBoxRect();
 }
 
-static Ref<CSSFunctionValue> matrixTransformValue(const TransformationMatrix& transform, const RenderStyle& style)
+Ref<CSSFunctionValue> ComputedStyleExtractor::matrixTransformValue(const TransformationMatrix& transform, const RenderStyle& style)
 {
     auto zoom = style.effectiveZoom();
     if (transform.isAffine()) {
@@ -849,7 +849,7 @@ RefPtr<CSSFunctionValue> transformOperationAsCSSValue(const TransformOperation&
     case TransformOperation::Type::Matrix3D: {
         TransformationMatrix transform;
         operation.apply(transform, { });
-        return matrixTransformValue(transform, style);
+        return ComputedStyleExtractor::matrixTransformValue(transform, style);
     }
     case TransformOperation::Type::Identity:
     case TransformOperation::Type::None:
@@ -868,7 +868,7 @@ static Ref<CSSValue> computedTransform(RenderElement* renderer, const RenderStyl
     if (renderer) {
         TransformationMatrix transform;
         style.applyTransform(transform, TransformOperationData(renderer->transformReferenceBoxRect(style), renderer), { });
-        return CSSTransformListValue::create(matrixTransformValue(transform, style));
+        return CSSTransformListValue::create(ComputedStyleExtractor::matrixTransformValue(transform, style));
     }
 
     // https://w3c.github.io/csswg-drafts/css-transforms-1/#serialization-of-the-computed-value

Source/WebCore/css/ComputedStyleExtractor.h

@@ -40,6 +40,7 @@ class RenderStyle;
 class ShadowData;
 class StyleColor;
 class StylePropertyShorthand;
+class TransformationMatrix;
 class TransformOperation;
 
 struct PropertyValue;
@@ -81,6 +82,7 @@ class ComputedStyleExtractor {
     static Ref<CSSValue> valueForFilter(const RenderStyle&, const FilterOperations&, AdjustPixelValuesForComputedStyle = AdjustPixelValuesForComputedStyle::Yes);
 
     static Ref<CSSPrimitiveValue> currentColorOrValidColor(const RenderStyle&, const StyleColor&);
+    static Ref<CSSFunctionValue> matrixTransformValue(const TransformationMatrix&, const RenderStyle&);
 
     static bool updateStyleIfNeededForProperty(Element&, CSSPropertyID);
 

Source/WebCore/dom/ViewTransition.cpp

@@ -26,6 +26,7 @@
 #include "config.h"
 #include "ViewTransition.h"
 
+#include "CSSTransformListValue.h"
 #include "CheckVisibilityOptions.h"
 #include "ComputedStyleExtractor.h"
 #include "Document.h"
@@ -409,7 +410,6 @@ void ViewTransition::clearViewTransition()
 
 Ref<MutableStyleProperties> ViewTransition::copyElementBaseProperties(Element& element)
 {
-    // FIXME: Transform - ComputedStyleExtractor.cpp::matrixTransformValue
     ComputedStyleExtractor styleExtractor(&element);
 
     CSSPropertyID transitionProperties[] = {
@@ -425,7 +425,28 @@ Ref<MutableStyleProperties> ViewTransition::copyElementBaseProperties(Element& e
         CSSPropertyHeight,
     };
 
-    return styleExtractor.copyProperties(transitionProperties);
+    Ref<MutableStyleProperties> props = styleExtractor.copyProperties(transitionProperties);
+
+    TransformationMatrix transform;
+    auto* renderer = element.renderer();
+    RenderElement* container = nullptr;
+    while (renderer && !renderer->isRenderView()) {
+        container = renderer->container();
+        if (!container)
+            break;
+        LayoutSize containerOffset = renderer->offsetFromContainer(*container, LayoutPoint());
+        TransformationMatrix localTransform;
+        renderer->getTransformFromContainer(nullptr, containerOffset, localTransform);
+        transform.multiply(localTransform);
+        renderer = container;
+    }
+
+    if (element.renderer()) {
+        Ref<CSSValue> transformListValue = CSSTransformListValue::create(ComputedStyleExtractor::matrixTransformValue(transform, element.renderer()->style()));
+        props->setProperty(CSSPropertyTransform, WTFMove(transformListValue));
+    }
+
+    return props;
 }
 
 // https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles