From ceb296e07684bec41be18e72b9b101e62e7db0c9 Mon Sep 17 00:00:00 2001
From: Kevin Ellis <kevers@google.com>
Date: Mon, 6 Jun 2022 07:41:54 -0700
Subject: [PATCH] Enable compositing multiple transform properties.

Bug: 696374
Change-Id: Idcd0982147f2f6d748b11ecf4584fd7f00821f90
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3677382
Reviewed-by: Robert Flack <flackr@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: David Baron <dbaron@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1011015}
---
 .../individual-transform-combine-ref.html     |  35 ++++++
 .../individual-transform-combine.html         | 100 +++++++++++++++
 .../individual-transform-ordering-ref.html    |  44 +++++++
 .../individual-transform-ordering.html        | 114 ++++++++++++++++++
 4 files changed, 293 insertions(+)
 create mode 100644 css/css-transforms/individual-transform/animation/individual-transform-combine-ref.html
 create mode 100644 css/css-transforms/individual-transform/animation/individual-transform-combine.html
 create mode 100644 css/css-transforms/individual-transform/animation/individual-transform-ordering-ref.html
 create mode 100644 css/css-transforms/individual-transform/animation/individual-transform-ordering.html
diff --git a/css/css-transforms/individual-transform/animation/individual-transform-combine-ref.html b/css/css-transforms/individual-transform/animation/individual-transform-combine-ref.html
new file mode 100644
index 00000000000000..7c8eb206a9fb7f
--- /dev/null
+++ b/css/css-transforms/individual-transform/animation/individual-transform-combine-ref.html
@@ -0,0 +1,35 @@
+<!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">
+    <style>
+      .block {
+        display:  inline-block;
+        width: 50px;
+        height: 50px;
+        margin:  50px;
+        padding:  0;
+        transform-origin: center center;
+        background:  lime;
+        transform: rotate(90deg) scale(2, 1);
+      }
+    </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-combine.html b/css/css-transforms/individual-transform/animation/individual-transform-combine.html
new file mode 100644
index 00000000000000..9551a3a726a1c2
--- /dev/null
+++ b/css/css-transforms/individual-transform/animation/individual-transform-combine.html
@@ -0,0 +1,100 @@
+<!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 animated transformations with the underlying style correctly."/>
+    <link rel="match" href="individual-transform-combine-ref.html">
+    <style>
+      .block {
+        display:  inline-block;
+        width: 50px;
+        height: 50px;
+        margin:  50px;
+        padding:  0;
+        transform-origin: center center;
+        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 { rotate: 180deg; }
+      }
+      #div-1 {
+        scale:  2 1;
+        animation-name: anim-1;
+      }
+
+      @keyframes anim-2 {
+        from { scale: 1 1; }
+        to { scale: 3 1; }
+      }
+      #div-2 {
+        /* The scale property is replaced in the animation. */
+        scale: 1 3;
+        rotate: 90deg;
+        animation-name:  anim-2;
+      }
+
+      @keyframes anim-3 {
+        to { rotate: 180deg; }
+      }
+      #div-3 {
+        transform: scale(2, 1);
+        animation-name:  anim-3;
+      }
+
+      @keyframes anim-4 {
+        to { transform: scale(7, 1); }
+      }
+      #div-4 {
+        rotate:  90deg;
+        /* As transform is a separate property from scale, the two scales are
+           chained together. */
+        scale:  0.5 1;
+        animation-name: anim-4;
+      }
+
+      /* transform origin tests */
+
+      @keyframes anim-5 {
+        to { rotate: 180deg; translate: 100px -50px; }
+      }
+      #div-5 {
+        transform-origin: top left;
+        scale:  2 1;
+        animation-name: anim-5;
+      }
+
+      @keyframes anim-6 {
+        to { rotate: 180deg; translate: -100px 50px; }
+      }
+      #div-6 {
+        transform-origin: bottom right;
+        scale:  2 1;
+        animation-name: anim-6;
+      }
+
+    </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>
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
new file mode 100644
index 00000000000000..b7dce51e8bab9e
--- /dev/null
+++ b/css/css-transforms/individual-transform/animation/individual-transform-ordering-ref.html
@@ -0,0 +1,44 @@
+<!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">
+    <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
new file mode 100644
index 00000000000000..9d127f163bc2b8
--- /dev/null
+++ 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>
