From 8c50f0178138db26c794692e0ab593b1f27e1cf8 Mon Sep 17 00:00:00 2001 From: Khushal Date: Sat, 9 Apr 2022 04:28:31 +0000 Subject: [PATCH] blink: Ensure correct intrinsic sizing for transition elements. The intrinsic size of the replaced elements created for DocumentTransition is the post page zoom size of an element. Apply the page zoom factor to ensure this. Also adds tests for the following cases: - An element with a transform. - Using object-view-box to display a subset of the element. R=vmpstr@chromium.org Bug: 1303102 Change-Id: Ib8fb3b391a481dd59bbe4e1c54c06532efd74444 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3579292 Auto-Submit: Khushal Sagar Reviewed-by: Vladimir Levin Commit-Queue: Vladimir Levin Cr-Commit-Position: refs/heads/main@{#990709} --- .../transitions/surface_animation_manager.cc | 16 +++-- .../blink/renderer/core/css/transition.css | 4 ++ .../document_transition_style_tracker.cc | 32 +++++++-- .../document_transition_style_tracker.h | 5 ++ .../layout_document_transition_content.h | 3 +- .../platform/runtime_enabled_features.json5 | 1 + .../blink/web_tests/FlagExpectations/highdpi | 7 +- .../content-with-transform-new-image.html | 60 ++++++++++++++++ .../content-with-transform-old-image.html | 60 ++++++++++++++++ .../content-with-transform-ref.html | 24 +++++++ .../object-view-box-new-image.html | 69 +++++++++++++++++++ .../object-view-box-old-image.html | 69 +++++++++++++++++++ .../object-view-box-ref.html | 25 +++++++ 13 files changed, 355 insertions(+), 20 deletions(-) create mode 100644 third_party/blink/web_tests/wpt_internal/document-transition/content-with-transform-new-image.html create mode 100644 third_party/blink/web_tests/wpt_internal/document-transition/content-with-transform-old-image.html create mode 100644 third_party/blink/web_tests/wpt_internal/document-transition/content-with-transform-ref.html create mode 100644 third_party/blink/web_tests/wpt_internal/document-transition/object-view-box-new-image.html create mode 100644 third_party/blink/web_tests/wpt_internal/document-transition/object-view-box-old-image.html create mode 100644 third_party/blink/web_tests/wpt_internal/document-transition/object-view-box-ref.html diff --git a/components/viz/service/transitions/surface_animation_manager.cc b/components/viz/service/transitions/surface_animation_manager.cc index 782caa2f3a14d0..6877eacd5e4cf1 100644 --- a/components/viz/service/transitions/surface_animation_manager.cc +++ b/components/viz/service/transitions/surface_animation_manager.cc @@ -169,13 +169,15 @@ void ReplaceSharedElementWithRenderPass( target_render_pass->CreateAndAppendSharedQuadState(); *copied_quad_state = *shared_element_quad.shared_quad_state; - copied_quad_state->quad_to_target_transform.PostTranslate( - -shared_pass_output_rect.x(), -shared_pass_output_rect.y()); - copied_quad_state->quad_to_target_transform.PostScale( - shared_element_quad.rect.width() / - static_cast(shared_pass_output_rect.width()), - shared_element_quad.rect.height() / - static_cast(shared_pass_output_rect.height())); + gfx::Transform transform; + transform.Scale(shared_element_quad.rect.width() / + static_cast(shared_pass_output_rect.width()), + shared_element_quad.rect.height() / + static_cast(shared_pass_output_rect.height())); + transform.Translate(-shared_pass_output_rect.x(), + -shared_pass_output_rect.y()); + + copied_quad_state->quad_to_target_transform.PreconcatTransform(transform); auto* render_pass_quad = target_render_pass diff --git a/third_party/blink/renderer/core/css/transition.css b/third_party/blink/renderer/core/css/transition.css index d1dfcc91ab8fbf..0f2f39b321ad72 100644 --- a/third_party/blink/renderer/core/css/transition.css +++ b/third_party/blink/renderer/core/css/transition.css @@ -19,6 +19,10 @@ html::page-transition-container(*) { top: 0; left: 0; will-change: transform; + + /* The transform applied to the container includes any translation necessary + for the original element's transform-origin. */ + transform-origin: top left; } html::page-transition-container(root) { diff --git a/third_party/blink/renderer/core/document_transition/document_transition_style_tracker.cc b/third_party/blink/renderer/core/document_transition/document_transition_style_tracker.cc index 113ac6f4f46f07..48d99165610e16 100644 --- a/third_party/blink/renderer/core/document_transition/document_transition_style_tracker.cc +++ b/third_party/blink/renderer/core/document_transition/document_transition_style_tracker.cc @@ -336,6 +336,7 @@ void DocumentTransitionStyleTracker::CaptureResolved() { element_data->target_element = nullptr; element_data->cached_border_box_size = element_data->border_box_size; element_data->cached_viewport_matrix = element_data->viewport_matrix; + element_data->cached_device_pixel_ratio = element_data->device_pixel_ratio; element_data->effect_node = nullptr; } root_effect_node_ = nullptr; @@ -493,10 +494,10 @@ PseudoElement* DocumentTransitionStyleTracker::CreatePseudoElement( document_->GetLayoutView()->GetLayoutSize(kIncludeScrollbars)); snapshot_id = old_root_snapshot_id_; } else { - // If live data is tracking new elements then use the cached size for + // If live data is tracking new elements then use the cached data for // the pseudo element displaying snapshot of old element. - size = HasLiveNewContent() ? element_data->border_box_size - : element_data->cached_border_box_size; + bool use_cached_data = HasLiveNewContent(); + size = element_data->GetIntrinsicSize(use_cached_data); snapshot_id = element_data->old_snapshot_id; } // Note that we say that this layer is not a live content @@ -523,7 +524,8 @@ PseudoElement* DocumentTransitionStyleTracker::CreatePseudoElement( document_->GetLayoutView()->GetLayoutSize(kIncludeScrollbars)); snapshot_id = new_root_snapshot_id_; } else { - size = element_data->border_box_size; + bool use_cached_data = false; + size = element_data->GetIntrinsicSize(use_cached_data); snapshot_id = element_data->new_snapshot_id; } auto* pseudo_element = @@ -565,9 +567,10 @@ void DocumentTransitionStyleTracker::RunPostPrePaintSteps() { continue; } + float device_pixel_ratio = document_->DevicePixelRatio(); TransformationMatrix viewport_matrix = layout_object->LocalToAbsoluteTransform(); - viewport_matrix.Zoom(1.0 / document_->DevicePixelRatio()); + viewport_matrix.Zoom(1.0 / device_pixel_ratio); // ResizeObserverEntry is created to reuse the logic for parsing object size // for different types of LayoutObjects. @@ -582,12 +585,14 @@ void DocumentTransitionStyleTracker::RunPostPrePaintSteps() { LayoutUnit(entry_size->inlineSize())); if (viewport_matrix == element_data->viewport_matrix && - border_box_size == element_data->border_box_size) { + border_box_size == element_data->border_box_size && + device_pixel_ratio == element_data->device_pixel_ratio) { continue; } element_data->viewport_matrix = viewport_matrix; element_data->border_box_size = border_box_size; + element_data->device_pixel_ratio = device_pixel_ratio; PseudoId live_content_element = HasLiveNewContent() ? kPseudoIdPageTransitionIncomingImage @@ -597,8 +602,10 @@ void DocumentTransitionStyleTracker::RunPostPrePaintSteps() { live_content_element, entry.key)) { // A pseudo element of type |tansition*content| must be created using // DocumentTransitionContentElement. + bool use_cached_data = false; + LayoutSize size = element_data->GetIntrinsicSize(use_cached_data); static_cast(pseudo_element) - ->SetIntrinsicSize(border_box_size); + ->SetIntrinsicSize(size); } needs_style_invalidation = true; @@ -871,4 +878,15 @@ void DocumentTransitionStyleTracker::ElementData::Trace( visitor->Trace(target_element); } +LayoutSize DocumentTransitionStyleTracker::ElementData::GetIntrinsicSize( + bool use_cached_data) { + LayoutSize box_size = + use_cached_data ? cached_border_box_size : border_box_size; + float ratio = + use_cached_data ? cached_device_pixel_ratio : device_pixel_ratio; + + box_size.Scale(ratio); + return box_size; +} + } // namespace blink diff --git a/third_party/blink/renderer/core/document_transition/document_transition_style_tracker.h b/third_party/blink/renderer/core/document_transition/document_transition_style_tracker.h index fe0fffcd430258..85bc1415db65bb 100644 --- a/third_party/blink/renderer/core/document_transition/document_transition_style_tracker.h +++ b/third_party/blink/renderer/core/document_transition/document_transition_style_tracker.h @@ -7,6 +7,7 @@ #include "components/viz/common/shared_element_resource_id.h" #include "third_party/blink/renderer/core/core_export.h" +#include "third_party/blink/renderer/core/dom/document.h" #include "third_party/blink/renderer/core/dom/element.h" #include "third_party/blink/renderer/platform/geometry/layout_size.h" #include "third_party/blink/renderer/platform/graphics/document_transition_shared_element_id.h" @@ -127,6 +128,8 @@ class DocumentTransitionStyleTracker struct ElementData : public GarbageCollected { void Trace(Visitor* visitor) const; + LayoutSize GetIntrinsicSize(bool use_cached_data); + // The element in the current DOM whose state is being tracked and mirrored // into the corresponding container pseudo element. Member target_element; @@ -135,10 +138,12 @@ class DocumentTransitionStyleTracker // |target_element|. This information is mirrored into the UA stylesheet. LayoutSize border_box_size; TransformationMatrix viewport_matrix; + float device_pixel_ratio = 1.f; // Computed info cached before the DOM switches to the new state. LayoutSize cached_border_box_size; TransformationMatrix cached_viewport_matrix; + float cached_device_pixel_ratio = 1.f; // Valid if there is an element in the old DOM generating a snapshot. viz::SharedElementResourceId old_snapshot_id; diff --git a/third_party/blink/renderer/core/layout/layout_document_transition_content.h b/third_party/blink/renderer/core/layout/layout_document_transition_content.h index f8f06256ebc809..8427454ad66b42 100644 --- a/third_party/blink/renderer/core/layout/layout_document_transition_content.h +++ b/third_party/blink/renderer/core/layout/layout_document_transition_content.h @@ -9,6 +9,7 @@ #include "cc/layers/document_transition_content_layer.h" #include "third_party/blink/renderer/core/core_export.h" #include "third_party/blink/renderer/core/document_transition/document_transition_content_element.h" +#include "third_party/blink/renderer/core/layout/layout_object.h" #include "third_party/blink/renderer/core/layout/layout_replaced.h" namespace blink { @@ -26,7 +27,7 @@ class CORE_EXPORT LayoutDocumentTransitionContent : public LayoutReplaced { protected: PaintLayerType LayerTypeRequired() const override; - + void IntrinsicSizeChanged() override { NOT_DESTROYED(); } void PaintReplaced(const PaintInfo&, const PhysicalOffset& paint_offset) const override; diff --git a/third_party/blink/renderer/platform/runtime_enabled_features.json5 b/third_party/blink/renderer/platform/runtime_enabled_features.json5 index d05635edc4c500..1dcf6344db7057 100644 --- a/third_party/blink/renderer/platform/runtime_enabled_features.json5 +++ b/third_party/blink/renderer/platform/runtime_enabled_features.json5 @@ -700,6 +700,7 @@ { name: "CSSObjectViewBoxAndOverflow", status: "experimental", + implied_by: ["DocumentTransition"], }, { name: "CSSOffsetPathRay", diff --git a/third_party/blink/web_tests/FlagExpectations/highdpi b/third_party/blink/web_tests/FlagExpectations/highdpi index 75323d9a30c2e3..1666185405546b 100644 --- a/third_party/blink/web_tests/FlagExpectations/highdpi +++ b/third_party/blink/web_tests/FlagExpectations/highdpi @@ -460,12 +460,9 @@ crbug.com/1295280 virtual/document-transition/wpt_internal/document-transition/c crbug.com/1295280 virtual/document-transition/wpt_internal/document-transition/old-content-captures-opacity.html [ Failure ] crbug.com/1295281 virtual/document-transition/wpt_internal/document-transition/new-content-captures-different-size.html [ Failure ] crbug.com/1295281 virtual/document-transition/wpt_internal/document-transition/old-content-captures-different-size.html [ Failure ] -crbug.com/1295280 virtual/document-transition/wpt_internal/document-transition/content-with-clip.html [ Failure ] crbug.com/1311421 virtual/document-transition/wpt_internal/document-transition/content-with-clip-max-texture-size.html [ Failure ] -crbug.com/1311421 virtual/document-transition/wpt_internal/document-transition/new-content-object-fit-none.html [ Failure ] -crbug.com/1311421 virtual/document-transition/wpt_internal/document-transition/old-content-object-fit-none.html [ Failure ] -crbug.com/1311421 virtual/document-transition/wpt_internal/document-transition/old-content-object-fit-fill.html [ Failure ] -crbug.com/1311421 virtual/document-transition/wpt_internal/document-transition/new-content-object-fit-fill.html [ Failure ] +crbug.com/1295281 virtual/document-transition/wpt_internal/document-transition/old-content-object-fit-fill.html [ Failure ] +crbug.com/1295281 virtual/document-transition/wpt_internal/document-transition/new-content-object-fit-fill.html [ Failure ] crbug.com/1179544 compositing/canvas-with-object-fit-contain-in-composited-layer.html [ Failure ] crbug.com/1179544 compositing/composited-replaced-subpixel-location.html [ Failure ] diff --git a/third_party/blink/web_tests/wpt_internal/document-transition/content-with-transform-new-image.html b/third_party/blink/web_tests/wpt_internal/document-transition/content-with-transform-new-image.html new file mode 100644 index 00000000000000..6d506b9926a4dc --- /dev/null +++ b/third_party/blink/web_tests/wpt_internal/document-transition/content-with-transform-new-image.html @@ -0,0 +1,60 @@ + + +Shared transitions: object-view-box + + + + + + + +
+
Shared
+
Element
+
+ + + + diff --git a/third_party/blink/web_tests/wpt_internal/document-transition/content-with-transform-old-image.html b/third_party/blink/web_tests/wpt_internal/document-transition/content-with-transform-old-image.html new file mode 100644 index 00000000000000..e1090d4020eeed --- /dev/null +++ b/third_party/blink/web_tests/wpt_internal/document-transition/content-with-transform-old-image.html @@ -0,0 +1,60 @@ + + +Shared transitions: object-view-box + + + + + + + +
+
Shared
+
Element
+
+ + + + diff --git a/third_party/blink/web_tests/wpt_internal/document-transition/content-with-transform-ref.html b/third_party/blink/web_tests/wpt_internal/document-transition/content-with-transform-ref.html new file mode 100644 index 00000000000000..210a6b0085e765 --- /dev/null +++ b/third_party/blink/web_tests/wpt_internal/document-transition/content-with-transform-ref.html @@ -0,0 +1,24 @@ + +Shared transitions: object-view-box (ref) + + + +
+
Shared
+
Element
+
+ + diff --git a/third_party/blink/web_tests/wpt_internal/document-transition/object-view-box-new-image.html b/third_party/blink/web_tests/wpt_internal/document-transition/object-view-box-new-image.html new file mode 100644 index 00000000000000..cf1ca41b2f5f21 --- /dev/null +++ b/third_party/blink/web_tests/wpt_internal/document-transition/object-view-box-new-image.html @@ -0,0 +1,69 @@ + + +Shared transitions: object-view-box + + + + + + + +
+
+
SharedElement
+
+ + + + diff --git a/third_party/blink/web_tests/wpt_internal/document-transition/object-view-box-old-image.html b/third_party/blink/web_tests/wpt_internal/document-transition/object-view-box-old-image.html new file mode 100644 index 00000000000000..cb1361b9ecd9a9 --- /dev/null +++ b/third_party/blink/web_tests/wpt_internal/document-transition/object-view-box-old-image.html @@ -0,0 +1,69 @@ + + +Shared transitions: object-view-box + + + + + + + +
+
+
SharedElement
+
+ + + + diff --git a/third_party/blink/web_tests/wpt_internal/document-transition/object-view-box-ref.html b/third_party/blink/web_tests/wpt_internal/document-transition/object-view-box-ref.html new file mode 100644 index 00000000000000..70dd7c29a868e1 --- /dev/null +++ b/third_party/blink/web_tests/wpt_internal/document-transition/object-view-box-ref.html @@ -0,0 +1,25 @@ + +Shared transitions: object-view-box (ref) + + + +
+
SharedElement
+
+