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 <[email protected]>
Reviewed-by: Khushal Sagar <[email protected]>
Commit-Queue: Vladimir Levin <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1096187}

Author: vmpstr

css/css-view-transitions/3d-transform-incoming-ref.html

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

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; }

css/css-view-transitions/3d-transform-outgoing-ref.html

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

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; }

css/css-view-transitions/css-tags-paint-order-ref.html

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

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;

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 {

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 {

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 {

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;

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) {

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) {

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) {

css/css-view-transitions/no-containment-on-new-element.html

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

css/css-view-transitions/no-containment-on-old-element.html

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

css/css-view-transitions/old-content-object-fit-fill.html

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

css/css-view-transitions/old-content-object-fit-none.html

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

css/css-view-transitions/only-child-group.html

@@ -11,7 +11,6 @@
 #target {
   width: 100px;
   height: 100px;
-  contain: layout;
   view-transition-name: target;
 }
 .one {

css/css-view-transitions/only-child-new.html

@@ -5,7 +5,6 @@
 
 <style>
 #target {
-  contain: layout;
   width: 200px;
   height: 200px;
   background: yellow;

css/css-view-transitions/only-child-old.html

@@ -9,7 +9,6 @@
 
 <style>
 #target {
-  contain: layout;
   view-transition-name: target;
   width: 200px;
   height: 200px;

css/css-view-transitions/paused-animation-at-end.html

@@ -5,7 +5,6 @@
 
 <style>
 #target {
-  contain: layout;
   width: 500px;
   height: 500px;
   background: yellow;

css/css-view-transitions/scroller-child-abspos-ref.html

@@ -9,7 +9,6 @@
 
 <style>
 #target {
-  contain: layout;
   view-transition-name: target;
   width: 500px;
   height: 500px;

css/css-view-transitions/scroller-child-abspos.html

@@ -9,7 +9,6 @@
   width: 100px;
   height: 100px;
   background: blue;
-  contain: layout;
 }
 
 #child {

css/css-view-transitions/scroller-child-ref.html

@@ -13,7 +13,6 @@
   width: 100px;
   height: 100px;
   background: blue;
-  contain: layout;
   view-transition-name: target;
 }
 

css/css-view-transitions/scroller-child.html

@@ -6,7 +6,6 @@
 .target {
   width: 100px;
   height: 100px;
-  contain: layout;
   background: blue;
   opacity: 0.5;
 }

css/css-view-transitions/scroller-ref.html

@@ -13,7 +13,6 @@
 #target {
   width: 100px;
   height: 100px;
-  contain: layout;
   background: blue;
   view-transition-name: target;
   position: relative;

css/css-view-transitions/scroller.html

@@ -10,7 +10,6 @@
 #target {
   width: 100px;
   height: 100px;
-  contain: layout;
   background: blue;
   view-transition-name: target;
   position: relative;