VT: Remove containment requirement.

This patch removes the containment requirement from view-transitions.

This is to align with proposed resolution
 w3c/csswg-drafts#7882

[email protected], [email protected]

Fixed: 1409491
Change-Id: Iad0eb54c8d2de503f209a58a9f438e586fcd6a36
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4188811
Reviewed-by: David Bokan 
Reviewed-by: Khushal Sagar 
Commit-Queue: Vladimir Levin 
Cr-Commit-Position: refs/heads/main@{#1096187}

Author: vmpstr

third_party/blink/renderer/core/view_transition/view_transition_style_tracker.cc

@@ -45,9 +45,6 @@
 namespace blink {
 namespace {
 
-const char* kContainmentNotSatisfied =
-    "Aborting transition. Element must contain paint or layout for "
-    "view-transition-name : ";
 const char* kDuplicateTagBaseError =
     "Unexpected duplicate view-transition-name: ";
 
@@ -65,11 +62,6 @@ const String& AnimationUAStyles() {
   return kAnimationUAStyles;
 }
 
-bool SatisfiesContainment(const LayoutObject& object) {
-  return object.ShouldApplyPaintContainment() ||
-         object.ShouldApplyLayoutContainment();
-}
-
 absl::optional ComputeInsetDifference(PhysicalRect reference_rect,
                                               const LayoutRect& target_rect,
                                               float device_pixel_ratio) {
@@ -346,25 +338,6 @@ bool ViewTransitionStyleTracker::FlattenAndVerifyElements(
     VectorOf& elements,
     VectorOf& transition_names,
     absl::optional& root_data) {
-  for (const auto& element : ViewTransitionSupplement::From(*document_)
-                                 ->ElementsWithViewTransitionName()) {
-    DCHECK(element->ComputedStyleRef().ViewTransitionName());
-
-    // Ignore elements which are not rendered.
-    if (!element->GetLayoutObject())
-      continue;
-
-    // Skip the transition if containment is not satisfied.
-    if (!element->IsDocumentElement() &&
-        !SatisfiesContainment(*element->GetLayoutObject())) {
-      StringBuilder message;
-      message.Append(kContainmentNotSatisfied);
-      message.Append(element->ComputedStyleRef().ViewTransitionName());
-      AddConsoleError(message.ReleaseString());
-      return false;
-    }
-  }
-
   // We need to flatten the data first, and sort it by ordering which reflects
   // the setElement ordering.
   struct FlatData : public GarbageCollected {
@@ -812,11 +785,9 @@ bool ViewTransitionStyleTracker::RunPostPrePaintSteps() {
 
     DCHECK_NE(element_data->target_element, document_->documentElement());
     auto* layout_object = element_data->target_element->GetLayoutObject();
-    if (!layout_object || !SatisfiesContainment(*layout_object)) {
-      StringBuilder message;
-      message.Append(kContainmentNotSatisfied);
-      message.Append(entry.key);
-      AddConsoleError(message.ReleaseString());
+    // TODO(khushalsagar): Verify that skipping a transition when things become
+    // display none is aligned with spec.
+    if (!layout_object) {
       return false;
     }
 

third_party/blink/web_tests/external/wpt/css/css-view-transitions/3d-transform-incoming-ref.html

@@ -15,7 +15,6 @@
   background: blue;
 }
 .shared {
-  contain: layout;
   width: 100px;
   height: 100px;
 }

third_party/blink/web_tests/external/wpt/css/css-view-transitions/3d-transform-incoming.html

@@ -25,7 +25,6 @@
 }
 .shared {
   view-transition-name: shared;
-  contain: layout;
   width: 100px;
   height: 100px;
 }
@@ -34,7 +33,6 @@
   width: 10px;
   height: 10px;
   background: red;
-  contain: layout;
 }
 
 ::view-transition-group(hidden) { animation-duration: 300s; }

third_party/blink/web_tests/external/wpt/css/css-view-transitions/3d-transform-outgoing-ref.html

@@ -9,7 +9,6 @@
   background: green;
 }
 .shared {
-  contain: layout;
   width: 100px;
   height: 100px;
 }

third_party/blink/web_tests/external/wpt/css/css-view-transitions/3d-transform-outgoing.html

@@ -26,7 +26,6 @@
 }
 .shared {
   view-transition-name: shared;
-  contain: layout;
   width: 100px;
   height: 100px;
 }
@@ -35,7 +34,6 @@
   width: 10px;
   height: 10px;
   background: red;
-  contain: layout;
 }
 
 ::view-transition-group(hidden) { animation-duration: 300s; }

third_party/blink/web_tests/external/wpt/css/css-view-transitions/css-tags-paint-order-ref.html

@@ -5,7 +5,6 @@
 
 <style>
 div {
-  contain: layout;
   position: absolute;
   top: 50px;
   width: 100px;

third_party/blink/web_tests/external/wpt/css/css-view-transitions/css-tags-paint-order.html

@@ -7,7 +7,6 @@
 
 <script src="/common/reftest-wait.js">script>
 <style>
-div { contain: layout; }
 #one {
   background: green;
   width: 100px;

third_party/blink/web_tests/external/wpt/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html

@@ -17,7 +17,6 @@
   padding: 0;
 
   view-transition-name: dialog;
-  contain: layout;
 }
 
 #target::backdrop {
@@ -26,7 +25,6 @@
   background: grey;
 
   view-transition-name: backdrop;
-  contain: layout;
 }
 
 .hidden {

third_party/blink/web_tests/external/wpt/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html

@@ -17,7 +17,6 @@
   padding: 0;
 
   view-transition-name: dialog;
-  contain: layout;
 }
 
 #target::backdrop {
@@ -26,7 +25,6 @@
   background: grey;
 
   view-transition-name: backdrop;
-  contain: layout;
 }
 
 .hidden {

third_party/blink/web_tests/external/wpt/css/css-view-transitions/element-with-overflow.html

@@ -12,14 +12,12 @@
     height: 10px;
     view-transition-name: hidden;
     background: green;
-    contain: layout;
   }
 
   .target {
     width: 100px;
     height: 100px;
     background: lightblue;
-    contain: layout;
     view-transition-name: target;
   }
   .inner {

third_party/blink/web_tests/external/wpt/css/css-view-transitions/new-content-element-writing-modes.html

@@ -27,9 +27,6 @@
   contain: paint;
   border: 1px solid black;
 }
-.source {
-  contain: layout;
-}
 #target {
   background: red;
   position: absolute;

third_party/blink/web_tests/external/wpt/css/css-view-transitions/new-content-object-fit-fill.html

@@ -29,7 +29,6 @@
   width: 10px;
   height: 10px;
   view-transition-name: hidden;
-  contain: layout;
 }
 
 html::view-transition-group(target) {

third_party/blink/web_tests/external/wpt/css/css-view-transitions/new-content-object-fit-none.html

@@ -21,7 +21,6 @@
   width: 10px;
   height: 10px;
   view-transition-name: hidden;
-  contain: layout;
 }
 
 html::view-transition-group(target) {

third_party/blink/web_tests/external/wpt/css/css-view-transitions/no-containment-on-new-element-mid-transition.html

@@ -29,7 +29,6 @@
   width: 10px;
   height: 10px;
   view-transition-name: hidden;
-  contain: layout;
 }
 
 html::view-transition-group(target) {

third_party/blink/web_tests/external/wpt/css/css-view-transitions/no-containment-on-new-element-mid-transition.html.ini

@@ -21,7 +21,6 @@
   width: 10px;
   height: 10px;
   view-transition-name: hidden;
-  contain: layout;
 }
 
 html::view-transition-group(target) {

third_party/blink/web_tests/external/wpt/css/css-view-transitions/no-containment-on-new-element.html

@@ -28,9 +28,6 @@
   color: red;
 }
 
-div {
-  contain: layout;
-}
 style>
 <div id="target">div>
 <div id="target2">div>

third_party/blink/web_tests/external/wpt/css/css-view-transitions/no-containment-on-new-element.html.ini

@@ -28,10 +28,6 @@
   color: red;
 }
 
-#target {
-  contain: layout;
-}
-
 style>
 <div id="target">div>
 

third_party/blink/web_tests/external/wpt/css/css-view-transitions/no-containment-on-old-element.html

@@ -28,10 +28,6 @@
   color: red;
 }
 
-#target {
-  contain: layout;
-}
-
 style>
 <div id="target">div>