Bug 1812122 [wpt PR 38144] - Revert "VT: Remove containment requirement.", a=testonly

Automatic update from web-platform-tests
Revert "VT: Remove containment requirement."

This reverts commit e554cf340761c4b11e0da4d0c98b1b58f9189cbd.

Reason for revert: Decided against this feature for now.

Original change's description:
> VT: Remove containment requirement.
>
> This patch removes the containment requirement from view-transitions.
>
> This is to align with proposed resolution
>  w3c/csswg-drafts#7882
>
> R=​[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}

Change-Id: Id0b58230eb372a96aa1f1dff2e7d84e2f297219f
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4192788
Commit-Queue: Vladimir Levin <[email protected]>
Bot-Commit: Rubber Stamper <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1096273}

--

wpt-commits: 404735f5905970d19b54fc1c4e9f84ef19edaac3
wpt-pr: 38144

Author: vmpstr

testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming-ref.html

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

testing/web-platform/tests/css/css-view-transitions/3d-transform-incoming.html

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

testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing-ref.html

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

testing/web-platform/tests/css/css-view-transitions/3d-transform-outgoing.html

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

testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order-ref.html

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

testing/web-platform/tests/css/css-view-transitions/css-tags-paint-order.html

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

testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-new.html

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

testing/web-platform/tests/css/css-view-transitions/dialog-in-top-layer-during-transition-old.html

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

testing/web-platform/tests/css/css-view-transitions/element-with-overflow.html

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

testing/web-platform/tests/css/css-view-transitions/new-content-element-writing-modes.html

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

testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-fill.html

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

testing/web-platform/tests/css/css-view-transitions/new-content-object-fit-none.html

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

testing/web-platform/tests/css/css-view-transitions/no-containment-on-new-element-mid-transition.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: transition skipped if no containment on new element after animation started</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:[email protected]">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: target;
+  contain: paint;
+}
+
+html::view-transition-group(target) {
+  animation-duration: 300s;
+}
+</style>
+
+<div id=first></div>
+
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition();
+    await transition.updateCallbackDone;
+    await transition.ready;
+
+    transition.finished.then(resolve, reject);
+    first.style.contain = "none";
+  });
+}, "new element becoming uncontained should skip the transition");
+</script>

testing/web-platform/tests/css/css-view-transitions/no-containment-on-new-element.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: transition skipped if no containment on new element</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:[email protected]">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: target;
+  contain: paint;
+}
+</style>
+
+<div id=first></div>
+
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition(() => {
+      first.style.contain = "none";
+    });
+
+    let readyRejected = false;
+    transition.ready.then(reject, () => { readyRejected = true; });
+
+    let updateCallbackDone = false;
+    transition.updateCallbackDone.then(() => { updateCallbackDone = true; }, reject);
+    transition.finished.then(() => {
+      assert_true(readyRejected, "ready not rejected");
+      assert_true(updateCallbackDone, "dom not updated");
+
+      if (window.getComputedStyle(first).contain == "none")
+        resolve();
+      else
+        reject("dom update callback did not run");
+
+    }, reject);
+  });
+}, "uncontained new element should skip the transition");
+</script>

testing/web-platform/tests/css/css-view-transitions/no-containment-on-old-element.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: transition skipped if no containment on old element</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:[email protected]">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  view-transition-name: target;
+}
+</style>
+
+<div id=first></div>
+
+<script>
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  return new Promise(async (resolve, reject) => {
+    let transition = document.startViewTransition(() => {
+      first.style.contain = "paint";
+    });
+
+    let readyRejected = false;
+    transition.ready.then(reject, () => { readyRejected = true; });
+
+    let updateCallbackDone = false;
+    transition.updateCallbackDone.then(() => { updateCallbackDone = true; }, reject);
+    transition.finished.then(() => {
+      assert_true(readyRejected, "ready not rejected");
+      assert_true(updateCallbackDone, "dom not updated");
+
+      if (window.getComputedStyle(first).contain == "paint")
+        resolve();
+      else
+        reject("dom update callback did not run");
+
+    }, reject);
+  });
+}, "uncontained old element should skip the transition");
+</script>

testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-fill.html

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

testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-none.html

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

testing/web-platform/tests/css/css-view-transitions/only-child-group.html

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

testing/web-platform/tests/css/css-view-transitions/only-child-new.html

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

testing/web-platform/tests/css/css-view-transitions/only-child-old.html

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

testing/web-platform/tests/css/css-view-transitions/paused-animation-at-end.html

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

testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos-ref.html

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

testing/web-platform/tests/css/css-view-transitions/scroller-child-abspos.html

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

testing/web-platform/tests/css/css-view-transitions/scroller-child-ref.html

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

testing/web-platform/tests/css/css-view-transitions/scroller-child.html

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

testing/web-platform/tests/css/css-view-transitions/scroller-ref.html

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

testing/web-platform/tests/css/css-view-transitions/scroller.html

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

testing/web-platform/tests/css/css-view-transitions/set-current-time-ref.html

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

testing/web-platform/tests/css/css-view-transitions/set-current-time-transform-ref.html

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

testing/web-platform/tests/css/css-view-transitions/set-current-time-transform.html

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