[web-animations] ensure that animations using offset properties corre…

…ctly run on a composited layer

https://bugs.webkit.org/show_bug.cgi?id=236709
<rdar://problem/89029756>

Reviewed by Dean Jackson.

Add all the CSS properties related to the CSS Motion Path feature to
RenderLayerCompositor::requiresCompositingForAnimation() in order to
ensure that an element's renderer is composited when one of those
properties is animated.

Tests: webanimations/offset-anchor-animation-yields-compositing.html
       webanimations/offset-distance-animation-yields-compositing.html
       webanimations/offset-path-animation-yields-compositing.html
       webanimations/offset-position-animation-yields-compositing.html
       webanimations/offset-rotate-animation-yields-compositing.html
       webanimations/offset-shorthand-animation-yields-compositing.html

* Source/WebCore/rendering/RenderLayerCompositor.cpp:
(WebCore::RenderLayerCompositor::requiresCompositingForAnimation const):
* LayoutTests/webanimations/offset-anchor-animation-yields-compositing-expected.txt: Added.
* LayoutTests/webanimations/offset-anchor-animation-yields-compositing.html: Added.
* LayoutTests/webanimations/offset-distance-animation-yields-compositing-expected.txt: Added.
* LayoutTests/webanimations/offset-distance-animation-yields-compositing.html: Added.
* LayoutTests/webanimations/offset-path-animation-yields-compositing-expected.txt: Added.
* LayoutTests/webanimations/offset-path-animation-yields-compositing.html: Added.
* LayoutTests/webanimations/offset-position-animation-yields-compositing-expected.txt: Added.
* LayoutTests/webanimations/offset-position-animation-yields-compositing.html: Added.
* LayoutTests/webanimations/offset-rotate-animation-yields-compositing-expected.txt: Added.
* LayoutTests/webanimations/offset-rotate-animation-yields-compositing.html: Added.
* LayoutTests/webanimations/offset-shorthand-animation-yields-compositing-expected.txt: Added.
* LayoutTests/webanimations/offset-shorthand-animation-yields-compositing.html: Added.

Canonical link: https://commits.webkit.org/250687@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@294392 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/webanimations/offset-anchor-animation-yields-compositing-expected.txt

@@ -0,0 +1,19 @@
+(GraphicsLayer
+  (anchor 0.00 0.00)
+  (bounds 800.00 600.00)
+  (children 1
+    (GraphicsLayer
+      (bounds 800.00 600.00)
+      (contentsOpaque 1)
+      (children 1
+        (GraphicsLayer
+          (position 8.00 8.00)
+          (bounds 100.00 100.00)
+          (contentsOpaque 1)
+          (transform [1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 1.00 0.00] [10.00 10.00 0.00 1.00])
+        )
+      )
+    )
+  )
+)
+

LayoutTests/webanimations/offset-anchor-animation-yields-compositing.html

@@ -0,0 +1,15 @@
+<pre id="results"></pre>
+<div id="target" style="width: 100px; height: 100px; background-color: black; offset-path: path('M10,10 H50')"></div>
+<script>
+
+testRunner.waitUntilDone();
+testRunner.dumpAsText();
+
+document.getElementById("target").animate({
+    offsetAnchor: ["0 0", "100% 100%"]
+}, 1000 * 60).ready.then(() => {
+    document.getElementById("results").innerText = internals.layerTreeAsText(document);
+    testRunner.notifyDone();
+});
+
+</script>

LayoutTests/webanimations/offset-distance-animation-yields-compositing-expected.txt

@@ -0,0 +1,19 @@
+(GraphicsLayer
+  (anchor 0.00 0.00)
+  (bounds 800.00 600.00)
+  (children 1
+    (GraphicsLayer
+      (bounds 800.00 600.00)
+      (contentsOpaque 1)
+      (children 1
+        (GraphicsLayer
+          (position 8.00 8.00)
+          (bounds 100.00 100.00)
+          (contentsOpaque 1)
+          (transform [1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 1.00 0.00] [-40.00 -40.00 0.00 1.00])
+        )
+      )
+    )
+  )
+)
+

LayoutTests/webanimations/offset-distance-animation-yields-compositing.html

@@ -0,0 +1,15 @@
+<pre id="results"></pre>
+<div id="target" style="width: 100px; height: 100px; background-color: black; offset-path: path('M10,10 H50')"></div>
+<script>
+
+testRunner.waitUntilDone();
+testRunner.dumpAsText();
+
+document.getElementById("target").animate({
+    offsetDistance: ["0", "100%"]
+}, 1000 * 60).ready.then(() => {
+    document.getElementById("results").innerText = internals.layerTreeAsText(document);
+    testRunner.notifyDone();
+});
+
+</script>

LayoutTests/webanimations/offset-path-animation-yields-compositing-expected.txt

@@ -0,0 +1,19 @@
+(GraphicsLayer
+  (anchor 0.00 0.00)
+  (bounds 800.00 600.00)
+  (children 1
+    (GraphicsLayer
+      (bounds 800.00 600.00)
+      (contentsOpaque 1)
+      (children 1
+        (GraphicsLayer
+          (position 8.00 8.00)
+          (bounds 100.00 100.00)
+          (contentsOpaque 1)
+          (transform [1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 1.00 0.00] [-40.00 -40.00 0.00 1.00])
+        )
+      )
+    )
+  )
+)
+

LayoutTests/webanimations/offset-path-animation-yields-compositing.html

@@ -0,0 +1,15 @@
+<pre id="results"></pre>
+<div id="target" style="width: 100px; height: 100px; background-color: black;"></div>
+<script>
+
+testRunner.waitUntilDone();
+testRunner.dumpAsText();
+
+document.getElementById("target").animate({
+    offsetPath: ["path('M10,10 H50')", "path('M10,10 H100')"]
+}, 1000 * 60).ready.then(() => {
+    document.getElementById("results").innerText = internals.layerTreeAsText(document);
+    testRunner.notifyDone();
+});
+
+</script>

LayoutTests/webanimations/offset-position-animation-yields-compositing-expected.txt

@@ -0,0 +1,19 @@
+(GraphicsLayer
+  (anchor 0.00 0.00)
+  (bounds 800.00 600.00)
+  (children 1
+    (GraphicsLayer
+      (bounds 800.00 600.00)
+      (contentsOpaque 1)
+      (children 1
+        (GraphicsLayer
+          (position 8.00 8.00)
+          (bounds 100.00 100.00)
+          (contentsOpaque 1)
+          (transform [1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 1.00 0.00] [-40.00 -40.00 0.00 1.00])
+        )
+      )
+    )
+  )
+)
+

LayoutTests/webanimations/offset-position-animation-yields-compositing.html

@@ -0,0 +1,15 @@
+<pre id="results"></pre>
+<div id="target" style="width: 100px; height: 100px; background-color: black; offset-path: path('M10,10 H50')"></div>
+<script>
+
+testRunner.waitUntilDone();
+testRunner.dumpAsText();
+
+document.getElementById("target").animate({
+    offsetPosition: ["0 0", "100% 100%"]
+}, 1000 * 60).ready.then(() => {
+    document.getElementById("results").innerText = internals.layerTreeAsText(document);
+    testRunner.notifyDone();
+});
+
+</script>

LayoutTests/webanimations/offset-rotate-animation-yields-compositing-expected.txt

@@ -0,0 +1,19 @@
+(GraphicsLayer
+  (anchor 0.00 0.00)
+  (bounds 800.00 600.00)
+  (children 1
+    (GraphicsLayer
+      (bounds 800.00 600.00)
+      (contentsOpaque 1)
+      (children 1
+        (GraphicsLayer
+          (position 8.00 8.00)
+          (bounds 100.00 100.00)
+          (contentsOpaque 1)
+          (transform [0.71 0.71 0.00 0.00] [-0.71 0.71 0.00 0.00] [0.00 0.00 1.00 0.00] [-40.00 -40.00 0.00 1.00])
+        )
+      )
+    )
+  )
+)
+

LayoutTests/webanimations/offset-rotate-animation-yields-compositing.html

@@ -0,0 +1,15 @@
+<pre id="results"></pre>
+<div id="target" style="width: 100px; height: 100px; background-color: black; offset-path: path('M10,10 H50')"></div>
+<script>
+
+testRunner.waitUntilDone();
+testRunner.dumpAsText();
+
+document.getElementById("target").animate({
+    offsetRotate: ["45deg", "90deg"]
+}, 1000 * 60).ready.then(() => {
+    document.getElementById("results").innerText = internals.layerTreeAsText(document);
+    testRunner.notifyDone();
+});
+
+</script>

LayoutTests/webanimations/offset-shorthand-animation-yields-compositing-expected.txt

@@ -0,0 +1,19 @@
+(GraphicsLayer
+  (anchor 0.00 0.00)
+  (bounds 800.00 600.00)
+  (children 1
+    (GraphicsLayer
+      (bounds 800.00 600.00)
+      (contentsOpaque 1)
+      (children 1
+        (GraphicsLayer
+          (position 8.00 8.00)
+          (bounds 100.00 100.00)
+          (contentsOpaque 1)
+          (transform [1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 1.00 0.00] [-40.00 -40.00 0.00 1.00])
+        )
+      )
+    )
+  )
+)
+

LayoutTests/webanimations/offset-shorthand-animation-yields-compositing.html

@@ -0,0 +1,15 @@
+<pre id="results"></pre>
+<div id="target" style="width: 100px; height: 100px; background-color: black;"></div>
+<script>
+
+testRunner.waitUntilDone();
+testRunner.dumpAsText();
+
+document.getElementById("target").animate({
+    cssOffset: ["path('M10,10 H50')", "path('M10,10 H100')"]
+}, 1000 * 60).ready.then(() => {
+    document.getElementById("results").innerText = internals.layerTreeAsText(document);
+    testRunner.notifyDone();
+});
+
+</script>

Source/WebCore/rendering/RenderLayerCompositor.cpp

@@ -3007,7 +3007,12 @@ bool RenderLayerCompositor::requiresCompositingForAnimation(RenderLayerModelObje
                 || effectsStack->isCurrentlyAffectingProperty(CSSPropertyTranslate)
                 || effectsStack->isCurrentlyAffectingProperty(CSSPropertyScale)
                 || effectsStack->isCurrentlyAffectingProperty(CSSPropertyRotate)
-                || effectsStack->isCurrentlyAffectingProperty(CSSPropertyTransform);
+                || effectsStack->isCurrentlyAffectingProperty(CSSPropertyTransform)
+                || effectsStack->isCurrentlyAffectingProperty(CSSPropertyOffsetAnchor)
+                || effectsStack->isCurrentlyAffectingProperty(CSSPropertyOffsetDistance)
+                || effectsStack->isCurrentlyAffectingProperty(CSSPropertyOffsetPath)
+                || effectsStack->isCurrentlyAffectingProperty(CSSPropertyOffsetPosition)
+                || effectsStack->isCurrentlyAffectingProperty(CSSPropertyOffsetRotate);
         }
     }