Skip to content
Permalink
Browse files
[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
  • Loading branch information
graouts committed May 18, 2022
1 parent 9e64d17 commit c2a43e0b7916684500ca054cabd873c3dccb4bcf
Showing 13 changed files with 210 additions and 1 deletion.
@@ -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])
)
)
)
)
)

@@ -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>
@@ -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])
)
)
)
)
)

@@ -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>
@@ -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])
)
)
)
)
)

@@ -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>
@@ -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])
)
)
)
)
)

@@ -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>
@@ -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])
)
)
)
)
)

@@ -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>
@@ -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])
)
)
)
)
)

@@ -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>
@@ -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);
}
}

0 comments on commit c2a43e0

Please sign in to comment.