- Revision
- 266789
- Author
- [email protected]
- Date
- 2020-09-09 11:12:16 -0700 (Wed, 09 Sep 2020)
Log Message
REGRESSION (r264856): updating easing on accelerated animation results in incorrect playback
https://bugs.webkit.org/show_bug.cgi?id=215853
<rdar://problem/67815853>
Reviewed by Simon Fraser.
Source/WebCore:
Stop accelerated animations if the timing function has changed in a way that makes it so that it should
no longer play accelerated, but otherwise simply update their timing properties such that may keep
playing.
Test: webanimations/accelerated-animation-easing-update-after-pause.html
webanimations/accelerated-animation-easing-update-steps-after-pause.html
* animation/KeyframeEffect.cpp:
(WebCore::KeyframeEffect::canBeAccelerated const):
(WebCore::KeyframeEffect::updateAcceleratedActions):
(WebCore::KeyframeEffect::animationDidChangeTimingProperties):
* animation/KeyframeEffect.h:
LayoutTests:
Add new tests that check that updating an animation's easing does not stop it.
* platform/win/TestExpectations:
* webanimations/accelerated-animation-easing-update-after-pause-expected.html: Added.
* webanimations/accelerated-animation-easing-update-after-pause.html: Added.
* webanimations/accelerated-animation-easing-update-steps-after-pause-expected.html: Addded.
* webanimations/accelerated-animation-easing-update-steps-after-pause.html: Addded.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (266788 => 266789)
--- trunk/LayoutTests/ChangeLog 2020-09-09 18:00:29 UTC (rev 266788)
+++ trunk/LayoutTests/ChangeLog 2020-09-09 18:12:16 UTC (rev 266789)
@@ -1,3 +1,19 @@
+2020-09-09 Antoine Quint <[email protected]>
+
+ REGRESSION (r264856): updating easing on accelerated animation results in incorrect playback
+ https://bugs.webkit.org/show_bug.cgi?id=215853
+ <rdar://problem/67815853>
+
+ Reviewed by Simon Fraser.
+
+ Add new tests that check that updating an animation's easing does not stop it.
+
+ * platform/win/TestExpectations:
+ * webanimations/accelerated-animation-easing-update-after-pause-expected.html: Added.
+ * webanimations/accelerated-animation-easing-update-after-pause.html: Added.
+ * webanimations/accelerated-animation-easing-update-steps-after-pause-expected.html: Addded.
+ * webanimations/accelerated-animation-easing-update-steps-after-pause.html: Addded.
+
2020-09-09 Hector Lopez <[email protected]>
[ macOS iOS ] imported/w3c/web-platform-tests/css/css-text/line-break/line-break-{strict,normal}-015a.xht are a constant ImageOnlyFailure
Modified: trunk/LayoutTests/platform/win/TestExpectations (266788 => 266789)
--- trunk/LayoutTests/platform/win/TestExpectations 2020-09-09 18:00:29 UTC (rev 266788)
+++ trunk/LayoutTests/platform/win/TestExpectations 2020-09-09 18:12:16 UTC (rev 266789)
@@ -4553,6 +4553,8 @@
webkit.org/b/215827 animations/steps-transform-rendering-updates.html [ Failure ]
webkit.org/b/215930 webanimations/accelerated-css-transition-with-easing-y-axis-above-1.html [ Skip ]
+webkit.org/b/216313 webanimations/accelerated-animation-easing-update-after-pause.html [ Skip ]
+webkit.org/b/216313 webanimations/accelerated-animation-easing-update-steps-after-pause.html [ Skip ]
# This test requires the OS to have a font that supports the Ahom language.
webkit.org/b/216024 fast/text/ahom.html [ ImageOnlyFailure ]
Added: trunk/LayoutTests/webanimations/accelerated-animation-easing-update-after-pause-expected.html (0 => 266789)
--- trunk/LayoutTests/webanimations/accelerated-animation-easing-update-after-pause-expected.html (rev 0)
+++ trunk/LayoutTests/webanimations/accelerated-animation-easing-update-after-pause-expected.html 2020-09-09 18:12:16 UTC (rev 266789)
@@ -0,0 +1 @@
+<body style="background-color: green"></body>
Added: trunk/LayoutTests/webanimations/accelerated-animation-easing-update-after-pause.html (0 => 266789)
--- trunk/LayoutTests/webanimations/accelerated-animation-easing-update-after-pause.html (rev 0)
+++ trunk/LayoutTests/webanimations/accelerated-animation-easing-update-after-pause.html 2020-09-09 18:12:16 UTC (rev 266789)
@@ -0,0 +1,69 @@
+<style>
+
+body {
+ background-color: green;
+}
+
+div {
+ position: absolute;
+ top: 0;
+ height: 100px;
+}
+
+#test {
+ left: 0;
+ width: 100px;
+ background-color: red;
+}
+
+#reference {
+ left: -1px;
+ width: 102px;
+ background-color: green;
+}
+
+</style>
+
+<div id="test"></div>
+<div id="reference"></div>
+
+<script src=""
+<script>
+
+(async () => {
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ const keyframes = { "transform": "translateX(700px)" };
+ const easing = "cubic-bezier(0,1,0,1)";
+ const duration = 10000;
+
+ // Create two animations, a test which will change easing during playback and a reference which
+ // will use the test animation's changed playback throughout its entire duration. The two animations
+ // should be in sync and the animated elements overlap, ensuring no red is visible after the update.
+ const test = document.getElementById("test").animate(keyframes, { easing: "linear", duration });
+ document.getElementById("reference").animate(keyframes, { easing, duration });
+
+ // Wait for the animations to be ready and then a frame before pausing them.
+ await Promise.all(document.getAnimations().map(animation => animation.ready));
+ await UIHelper.ensurePresentationUpdate();
+ await UIHelper.renderingUpdate();
+ for (let animation of document.getAnimations())
+ animation.pause();
+
+ // Update the easing on the test animation to match the reference animation.
+ test.effect.updateTiming({ easing });
+
+ // Wait a frame and resume the animations.
+ await UIHelper.renderingUpdate();
+ for (let animation of document.getAnimations())
+ animation.play();
+
+ // Wait a frame and compare the rendering.
+ await UIHelper.ensurePresentationUpdate();
+ await UIHelper.renderingUpdate();
+ if (window.testRunner)
+ testRunner.notifyDone();
+})();
+
+</script>
Added: trunk/LayoutTests/webanimations/accelerated-animation-easing-update-steps-after-pause-expected.html (0 => 266789)
--- trunk/LayoutTests/webanimations/accelerated-animation-easing-update-steps-after-pause-expected.html (rev 0)
+++ trunk/LayoutTests/webanimations/accelerated-animation-easing-update-steps-after-pause-expected.html 2020-09-09 18:12:16 UTC (rev 266789)
@@ -0,0 +1 @@
+<body style="background-color: green"></body>
Added: trunk/LayoutTests/webanimations/accelerated-animation-easing-update-steps-after-pause.html (0 => 266789)
--- trunk/LayoutTests/webanimations/accelerated-animation-easing-update-steps-after-pause.html (rev 0)
+++ trunk/LayoutTests/webanimations/accelerated-animation-easing-update-steps-after-pause.html 2020-09-09 18:12:16 UTC (rev 266789)
@@ -0,0 +1,69 @@
+<style>
+
+body {
+ background-color: green;
+}
+
+div {
+ position: absolute;
+ top: 0;
+ height: 100px;
+}
+
+#test {
+ left: 0;
+ width: 100px;
+ background-color: red;
+}
+
+#reference {
+ left: -1px;
+ width: 102px;
+ background-color: green;
+}
+
+</style>
+
+<div id="test"></div>
+<div id="reference"></div>
+
+<script src=""
+<script>
+
+(async () => {
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ const keyframes = { "transform": "translateX(700px)" };
+ const easing = "steps(10000)";
+ const duration = 10000;
+
+ // Create two animations, a test which will change easing during playback and a reference which
+ // will use the test animation's changed playback throughout its entire duration. The two animations
+ // should be in sync and the animated elements overlap, ensuring no red is visible after the update.
+ const test = document.getElementById("test").animate(keyframes, { easing: "linear", duration });
+ document.getElementById("reference").animate(keyframes, { easing, duration });
+
+ // Wait for the animations to be ready and then a frame before pausing them.
+ await Promise.all(document.getAnimations().map(animation => animation.ready));
+ await UIHelper.ensurePresentationUpdate();
+ await UIHelper.renderingUpdate();
+ for (let animation of document.getAnimations())
+ animation.pause();
+
+ // Update the easing on the test animation to match the reference animation.
+ test.effect.updateTiming({ easing });
+
+ // Wait a frame and resume the animations.
+ await UIHelper.renderingUpdate();
+ for (let animation of document.getAnimations())
+ animation.play();
+
+ // Wait a frame and compare the rendering.
+ await UIHelper.ensurePresentationUpdate();
+ await UIHelper.renderingUpdate();
+ if (window.testRunner)
+ testRunner.notifyDone();
+})();
+
+</script>
Modified: trunk/Source/WebCore/ChangeLog (266788 => 266789)
--- trunk/Source/WebCore/ChangeLog 2020-09-09 18:00:29 UTC (rev 266788)
+++ trunk/Source/WebCore/ChangeLog 2020-09-09 18:12:16 UTC (rev 266789)
@@ -1,3 +1,24 @@
+2020-09-09 Antoine Quint <[email protected]>
+
+ REGRESSION (r264856): updating easing on accelerated animation results in incorrect playback
+ https://bugs.webkit.org/show_bug.cgi?id=215853
+ <rdar://problem/67815853>
+
+ Reviewed by Simon Fraser.
+
+ Stop accelerated animations if the timing function has changed in a way that makes it so that it should
+ no longer play accelerated, but otherwise simply update their timing properties such that may keep
+ playing.
+
+ Test: webanimations/accelerated-animation-easing-update-after-pause.html
+ webanimations/accelerated-animation-easing-update-steps-after-pause.html
+
+ * animation/KeyframeEffect.cpp:
+ (WebCore::KeyframeEffect::canBeAccelerated const):
+ (WebCore::KeyframeEffect::updateAcceleratedActions):
+ (WebCore::KeyframeEffect::animationDidChangeTimingProperties):
+ * animation/KeyframeEffect.h:
+
2020-09-09 Chris Dumez <[email protected]>
AudioParam.linearRampToValueAtTime() / exponentialRampToValueAtTime() have no effect when there is no preceding event
Modified: trunk/Source/WebCore/animation/KeyframeEffect.cpp (266788 => 266789)
--- trunk/Source/WebCore/animation/KeyframeEffect.cpp 2020-09-09 18:00:29 UTC (rev 266788)
+++ trunk/Source/WebCore/animation/KeyframeEffect.cpp 2020-09-09 18:12:16 UTC (rev 266789)
@@ -1493,9 +1493,14 @@
return nullptr;
}
+bool KeyframeEffect::canBeAccelerated() const
+{
+ return m_acceleratedPropertiesState != AcceleratedProperties::None && !m_someKeyframesUseStepsTimingFunction && !is<StepsTimingFunction>(timingFunction());
+}
+
void KeyframeEffect::updateAcceleratedActions()
{
- if (m_acceleratedPropertiesState == AcceleratedProperties::None || m_someKeyframesUseStepsTimingFunction || is<StepsTimingFunction>(timingFunction()))
+ if (!canBeAccelerated())
return;
auto computedTiming = getComputedTiming();
@@ -1557,13 +1562,11 @@
void KeyframeEffect::animationDidChangeTimingProperties()
{
computeSomeKeyframesUseStepsTimingFunction();
- // The timing function can affect whether the platform can run this as an accelerated animation.
- m_runningAccelerated = RunningAccelerated::NotStarted;
- // There is no need to update the animation if we're not playing already. If updating timing
- // means we're moving into an active lexicalGlobalObject, we'll pick this up in apply().
- if (isAboutToRunAccelerated())
- addPendingAcceleratedAction(AcceleratedAction::UpdateTiming);
+ if (isRunningAccelerated() || isAboutToRunAccelerated())
+ addPendingAcceleratedAction(canBeAccelerated() ? AcceleratedAction::UpdateTiming : AcceleratedAction::Stop);
+ else if (canBeAccelerated())
+ m_runningAccelerated = RunningAccelerated::NotStarted;
}
void KeyframeEffect::animationWasCanceled()
Modified: trunk/Source/WebCore/animation/KeyframeEffect.h (266788 => 266789)
--- trunk/Source/WebCore/animation/KeyframeEffect.h 2020-09-09 18:00:29 UTC (rev 266788)
+++ trunk/Source/WebCore/animation/KeyframeEffect.h 2020-09-09 18:12:16 UTC (rev 266789)
@@ -181,6 +181,7 @@
void didChangeTargetElementOrPseudoElement(Element*);
ExceptionOr<void> processKeyframes(JSC::JSGlobalObject&, JSC::Strong<JSC::JSObject>&&);
void addPendingAcceleratedAction(AcceleratedAction);
+ bool canBeAccelerated() const;
void updateAcceleratedActions();
void setAnimatedPropertiesInStyle(RenderStyle&, double);
TimingFunction* timingFunctionForKeyframeAtIndex(size_t) const;
