Composite multiple independent transform property animations

Previously, individual transform properties were lumped together with transform lists, and only a single transform could be composited. With this patch, we support multiple transforms as long as each affects a different property (transform, translate, rotate, or scale). Bug: 696374 Change-Id: Id4da5da2fceb929bd5ddbffc04f9d63f9b85497a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3016295 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Kevin Ellis <kevers@chromium.org> Cr-Commit-Position: refs/heads/master@{#901495}
web-platform-tests · Jul 14, 2021 · 04ab41d · 04ab41d
1 parent f6d3768
commit 04ab41d
Show file tree

Hide file tree

Showing 2 changed files with 159 additions and 0 deletions.
diff --git a/css/css-transforms/individual-transform/animation/individual-transform-ordering-ref.html b/css/css-transforms/individual-transform/animation/individual-transform-ordering-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Individual transform: combine individual transform properties</title>
+    <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
+    <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
+    <meta name="assert" content="Tests that we combine transforms in the correct order."/>
+    <style>
+      @keyframes anim {
+        to {
+          transform: translate(50px, 50px) rotate(45deg) scale(2, 1);
+        }
+      }
+      .block {
+        display:  inline-block;
+        width: 50px;
+        height: 50px;
+        margin:  50px;
+        padding:  0;
+        transform-origin: 0 0;
+        background:  lime;
+        /* Freeze the animation at the midpoint. */
+        animation-timing-function: cubic-bezier(0, 1, 1, 0);
+        animation-duration:  1000000s;
+        animation-delay:  -500000s;
+        animation-name:  anim;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <div class="block"></div>
+      <div class="block"></div>
+    </div>
+    <div>
+      <div class="block"></div>
+      <div class="block"></div>
+    </div>
+    <div>
+      <div class="block"></div>
+      <div class="block"></div>
+    </div>
+  </body>
+</html>
diff --git a/css/css-transforms/individual-transform/animation/individual-transform-ordering.html b/css/css-transforms/individual-transform/animation/individual-transform-ordering.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Individual transform: combine individual transform properties</title>
+    <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
+    <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
+    <meta name="assert" content="Tests that we combine transforms in the correct order when animating."/>
+    <link rel="match" href="individual-transform-ordering-ref.html">
+    <style>
+      .block {
+        display:  inline-block;
+        width: 50px;
+        height: 50px;
+        margin:  50px;
+        padding:  0;
+        transform-origin: 0 0;
+        background:  lime;
+        /* Freeze the animation at the midpoint. */
+        animation-timing-function: cubic-bezier(0, 1, 1, 0);
+        animation-duration:  1000000s;
+        animation-delay:  -500000s;
+      }
+      @keyframes anim-1 {
+        to {
+          translate: 50px 50px;
+          rotate: 45deg;
+          scale: 2 1;
+        }
+      }
+      #div-1 {
+        animation-name: anim-1;
+      }
+      @keyframes anim-2 {
+        to {
+          rotate: 45deg;
+          scale: 2 1;
+          translate: 50px 50px;
+        }
+      }
+      #div-2 {
+        animation-name:  anim-2;
+      }
+      @keyframes anim-3 {
+        to {
+          transform: scale(2, 1);
+          translate: 50px 50px;
+          rotate: 45deg;
+        }
+      }
+      #div-3 {
+        animation-name:  anim-3;
+      }
+      @keyframes anim-4 {
+        to {
+          transform: rotate(45deg) scale(2, 1);
+          translate: 50px 50px;
+        }
+      }
+      #div-4 {
+        animation-name: anim-4;
+      }
+      @Keyframes anim-5 {
+        to { transform: rotate(45deg); }
+      }
+      @Keyframes anim-6 {
+        from { transform:  none; }
+        to { transform: translate(50px, 50px) rotate(45deg) scale(2, 1); }
+      }
+      /* anim-6 replaces anim-5 since both updating the transform property. */
+      #div-5 {
+        animation-name: anim-5, anim-6;
+      }
+      @keyframes anim-7 {
+        to {
+          rotate: 45deg;
+          scale:  2 2;
+        }
+      }
+      @keyframes anim-8 {
+        from {
+          translate: 0px 0px;
+          scale: 1 1;
+        }
+        to {
+          translate: 50px 50px;
+          scale: 2 1;
+        }
+      }
+      /*
+       * The scale property is overridden in anim-8, but the rotate property
+       * from anim-7 is still relevant and must be applied in the correct order
+       * (after translate but before scale).
+       */
+      #div-6 {
+        animation-name: anim-7, anim-8;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <div id="div-1" class="block"></div>
+      <div id="div-2" class="block"></div>
+    </div>
+    <div>
+      <div id="div-3" class="block"></div>
+      <div id="div-4" class="block"></div>
+    </div>
+    <div>
+      <div id="div-5" class="block"></div>
+      <div id="div-6" class="block"></div>
+    </div>
+  </body>
+</html>