VT: Make transitioning elements be "grouping"

In VT we resolved that the elements participating in a transition should flatten 3d transforms (behave like having a grouping property). We're storing whether the element is participating in the transition on the computed style (except for LayoutView), so this patch just adds a check for that condition. Change-Id: I5e54a53ed517fc6b16ab9076f314a046f5b8d40a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4366938 Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Commit-Queue: Vladimir Levin <vmpstr@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1124177}
web-platform-tests · Mar 30, 2023 · 16914b8 · 16914b8
1 parent 883193c
commit 16914b8
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 0 deletions.
diff --git a/css/css-view-transitions/element-is-grouping-during-animation-ref.html b/css/css-view-transitions/element-is-grouping-during-animation-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: element remains grouping during transition</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+.parent {
+  top: 0;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  background: green;
+}
+body {
+  perspective: 1000px;
+  height: 500px;
+  background: pink
+}
+</style>
+
+<div class=parent></div>
+
diff --git a/css/css-view-transitions/element-is-grouping-during-animation.html b/css/css-view-transitions/element-is-grouping-during-animation.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: view transition element remains grouping during animation</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="element-is-grouping-during-animation-ref.html">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.parent {
+  top: 0;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  background: red;
+  transform-style: preserve-3d;
+}
+.named {
+  view-transition-name: target;
+}
+
+.child {
+  background: green;
+  width: 100px;
+  height: 100px;
+  top: 0;
+  left: 0;
+  position: absolute;
+  transform: translateZ(-500px);
+}
+
+body {
+  perspective: 1000px;
+  height: 500px;
+}
+
+::view-transition-group(root) {
+  animation-duration: 500s;
+  opacity: 0;
+}
+::view-transition-group(target) {
+  animation-duration: 0s;
+}
+::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+::view-transition {
+  background: pink;
+}
+</style>
+
+<div id=target class="parent named"><div class=child></div></div>
+
+<script>
+function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(() => {
+    requestAnimationFrame(() => {
+      target.classList.remove("named");
+      requestAnimationFrame(takeScreenshot);
+    });
+  });
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>
diff --git a/css/css-view-transitions/element-stops-grouping-after-animation-ref.html b/css/css-view-transitions/element-stops-grouping-after-animation-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<title>View transitions: element remains grouping during transition</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+
+<style>
+.parent {
+  top: 0;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  background: blue;
+  transform-style: preserve-3d;
+}
+.child {
+  background: green;
+  width: 100px;
+  height: 100px;
+  top: 0;
+  left: 0;
+  position: absolute;
+  transform: translateZ(-500px);
+}
+body {
+  perspective: 1000px;
+  height: 500px;
+}
+</style>
+
+<div class=parent><div class=child></div></div>
+
diff --git a/css/css-view-transitions/element-stops-grouping-after-animation.html b/css/css-view-transitions/element-stops-grouping-after-animation.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transitions: view transition element remains grouping during animation</title>
+<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
+<link rel="author" href="mailto:vmpstr@chromium.org">
+<link rel="match" href="element-stops-grouping-after-animation-ref.html">
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+.parent {
+  top: 0;
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  background: blue;
+  transform-style: preserve-3d;
+}
+.named {
+  view-transition-name: target;
+}
+
+.child {
+  background: green;
+  width: 100px;
+  height: 100px;
+  top: 0;
+  left: 0;
+  position: absolute;
+  transform: translateZ(-500px);
+}
+
+body {
+  perspective: 1000px;
+  height: 500px;
+}
+
+::view-transition-group(root) {
+  animation-duration: 50ms;
+  opacity: 0;
+}
+::view-transition-group(target) {
+  animation-duration: 0s;
+}
+::view-transition-new(target) {
+  animation: unset;
+  opacity: 1;
+}
+::view-transition-old(target) {
+  animation: unset;
+  opacity: 0;
+}
+
+::view-transition {
+  background: pink;
+}
+</style>
+
+<div id=target class="parent named"><div class=child></div></div>
+
+<script>
+function runTest() {
+  let transition = document.startViewTransition();
+  transition.ready.then(() => {
+    requestAnimationFrame(() => {
+      target.classList.remove("named");
+    });
+  });
+  transition.finished.then(takeScreenshot);
+}
+
+onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
+</script>