[webkit-changes] [294392] trunk

Wed, 18 May 2022 05:59:45 -0700

Title: [294392] trunk
Revision
294392
Author
grao...@webkit.org
Date
2022-05-18 05:59:08 -0700 (Wed, 18 May 2022)

Log Message

[web-animations] ensure that animations using offset properties correctly 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

Modified Paths

Added Paths

Diff

Added: trunk/LayoutTests/webanimations/offset-anchor-animation-yields-compositing-expected.txt (0 => 294392)


--- trunk/LayoutTests/webanimations/offset-anchor-animation-yields-compositing-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/webanimations/offset-anchor-animation-yields-compositing-expected.txt	2022-05-18 12:59:08 UTC (rev 294392)
@@ -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])
+        )
+      )
+    )
+  )
+)
+

Added: trunk/LayoutTests/webanimations/offset-anchor-animation-yields-compositing.html (0 => 294392)


--- trunk/LayoutTests/webanimations/offset-anchor-animation-yields-compositing.html	                        (rev 0)
+++ trunk/LayoutTests/webanimations/offset-anchor-animation-yields-compositing.html	2022-05-18 12:59:08 UTC (rev 294392)
@@ -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>

Added: trunk/LayoutTests/webanimations/offset-distance-animation-yields-compositing-expected.txt (0 => 294392)


--- trunk/LayoutTests/webanimations/offset-distance-animation-yields-compositing-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/webanimations/offset-distance-animation-yields-compositing-expected.txt	2022-05-18 12:59:08 UTC (rev 294392)
@@ -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])
+        )
+      )
+    )
+  )
+)
+

Added: trunk/LayoutTests/webanimations/offset-distance-animation-yields-compositing.html (0 => 294392)


--- trunk/LayoutTests/webanimations/offset-distance-animation-yields-compositing.html	                        (rev 0)
+++ trunk/LayoutTests/webanimations/offset-distance-animation-yields-compositing.html	2022-05-18 12:59:08 UTC (rev 294392)
@@ -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>

Added: trunk/LayoutTests/webanimations/offset-path-animation-yields-compositing-expected.txt (0 => 294392)


--- trunk/LayoutTests/webanimations/offset-path-animation-yields-compositing-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/webanimations/offset-path-animation-yields-compositing-expected.txt	2022-05-18 12:59:08 UTC (rev 294392)
@@ -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])
+        )
+      )
+    )
+  )
+)
+

Added: trunk/LayoutTests/webanimations/offset-path-animation-yields-compositing.html (0 => 294392)


--- trunk/LayoutTests/webanimations/offset-path-animation-yields-compositing.html	                        (rev 0)
+++ trunk/LayoutTests/webanimations/offset-path-animation-yields-compositing.html	2022-05-18 12:59:08 UTC (rev 294392)
@@ -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>

Added: trunk/LayoutTests/webanimations/offset-position-animation-yields-compositing-expected.txt (0 => 294392)


--- trunk/LayoutTests/webanimations/offset-position-animation-yields-compositing-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/webanimations/offset-position-animation-yields-compositing-expected.txt	2022-05-18 12:59:08 UTC (rev 294392)
@@ -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])
+        )
+      )
+    )
+  )
+)
+

Added: trunk/LayoutTests/webanimations/offset-position-animation-yields-compositing.html (0 => 294392)


--- trunk/LayoutTests/webanimations/offset-position-animation-yields-compositing.html	                        (rev 0)
+++ trunk/LayoutTests/webanimations/offset-position-animation-yields-compositing.html	2022-05-18 12:59:08 UTC (rev 294392)
@@ -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>

Added: trunk/LayoutTests/webanimations/offset-rotate-animation-yields-compositing-expected.txt (0 => 294392)


--- trunk/LayoutTests/webanimations/offset-rotate-animation-yields-compositing-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/webanimations/offset-rotate-animation-yields-compositing-expected.txt	2022-05-18 12:59:08 UTC (rev 294392)
@@ -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])
+        )
+      )
+    )
+  )
+)
+

Added: trunk/LayoutTests/webanimations/offset-rotate-animation-yields-compositing.html (0 => 294392)


--- trunk/LayoutTests/webanimations/offset-rotate-animation-yields-compositing.html	                        (rev 0)
+++ trunk/LayoutTests/webanimations/offset-rotate-animation-yields-compositing.html	2022-05-18 12:59:08 UTC (rev 294392)
@@ -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>

Added: trunk/LayoutTests/webanimations/offset-shorthand-animation-yields-compositing-expected.txt (0 => 294392)


--- trunk/LayoutTests/webanimations/offset-shorthand-animation-yields-compositing-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/webanimations/offset-shorthand-animation-yields-compositing-expected.txt	2022-05-18 12:59:08 UTC (rev 294392)
@@ -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])
+        )
+      )
+    )
+  )
+)
+

Added: trunk/LayoutTests/webanimations/offset-shorthand-animation-yields-compositing.html (0 => 294392)


--- trunk/LayoutTests/webanimations/offset-shorthand-animation-yields-compositing.html	                        (rev 0)
+++ trunk/LayoutTests/webanimations/offset-shorthand-animation-yields-compositing.html	2022-05-18 12:59:08 UTC (rev 294392)
@@ -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>

Modified: trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp (294391 => 294392)


--- trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp	2022-05-18 12:54:37 UTC (rev 294391)
+++ trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp	2022-05-18 12:59:08 UTC (rev 294392)
@@ -3007,7 +3007,12 @@
                 || 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);
         }
     }
 

_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to