Diff
Modified: branches/safari-611-branch/LayoutTests/ChangeLog (272263 => 272264)
--- branches/safari-611-branch/LayoutTests/ChangeLog 2021-02-03 01:40:15 UTC (rev 272263)
+++ branches/safari-611-branch/LayoutTests/ChangeLog 2021-02-03 01:40:21 UTC (rev 272264)
@@ -1,5 +1,115 @@
2021-02-02 Alan Coon <[email protected]>
+ Cherry-pick r272004. rdar://problem/73890647
+
+ REGRESSION(r268615): images flicker on apple.com/ios/ios-14
+ https://bugs.webkit.org/show_bug.cgi?id=221054
+ <rdar://problem/72880447>
+
+ Reviewed by Dean Jackson.
+
+ Source/WebCore:
+
+ When we added support for accelerated animations of individual transform properties in r268615 (bug 217842),
+ we made it so that base values of each transform-related property had a non-interpolating animation in the
+ Core Animation animations list that would combine with interpolating animations for that property as additive
+ animations. Prior to any of those animations, we'd reset the combined transform with an identity transform
+ as another non-interpolating animation.
+
+ However, we neglected to consider the case where one of the interpolating animations would not start right
+ away if a positive delay was set. In the case of this apple.com page, the target element would be composited
+ due to a "will-change: transform" style, and a non-animated "transform" was set as well as an animation for
+ the "transform" property with a delay.
+
+ Since we had a "transform" animation, we'd create a Core Animation animations lists as follows:
+
+ 1. non-interpolating, non-additive animation set to the identity matrix
+ 2. interpolating, additive animation with the keyframes set in the CSS animation, with a begin time
+ set to the current time plus the specified delay
+
+ The result of this was that during the animation delay, the static "transform" property was overridden
+ by animation #1 until animation #2 would kick in.
+
+ We now make it so that for each transform-related property, we create a non-interpoloating, additive animation
+ to represent the static value for that property for the duration of any potential delay until the first
+ interpolating animation for this property starts.
+
+ In this example, the Core Animation animations list is now as follows:
+
+ 1. non-interpolating, non-additive animation set to the identity matrix
+ 2. non-interpolating, additive animation set to the static transform value
+ 3. interpolating, additive animation with the keyframes set in the CSS animation, with a begin time
+ set to the current time plus the specified delay
+
+ We implement this with a new lambda function within GraphicsLayerCA::updateAnimations() called
+ addAnimationsForProperty() which adds a non-interpolating animation in two cases:
+
+ 1. if there is no animation for this property at all, making it last forever
+ 2. if all animations have a delay, making it last until the first animation starts
+
+ Tests: webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer.html
+ webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer.html
+ webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer.html
+ webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer.html
+ webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer.html
+
+ * platform/graphics/ca/GraphicsLayerCA.cpp:
+ (WebCore::GraphicsLayerCA::updateAnimations):
+
+ LayoutTests:
+
+ Add a series of tests ensuring that starting an animation for transform-related properties does not clobber the static
+ value for this property. We only run those tests on WK2 because running those in WK1 is flaky as there doesn't seem
+ to be a solid test utility to determine that Core Animation animations have been committed, even with long delays
+ that would make tests run slow.
+
+ * TestExpectations:
+ * platform/ios-wk2/TestExpectations:
+ * platform/mac-wk2/TestExpectations:
+ * webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer.html: Added.
+ * webanimations/resources/wait-until-animations-are-committed.js: Added.
+ * webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer.html: Added.
+ * webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer.html: Added.
+ * webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer.html: Added.
+ * webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer.html: Added.
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@272004 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2021-01-27 Antoine Quint <[email protected]>
+
+ REGRESSION(r268615): images flicker on apple.com/ios/ios-14
+ https://bugs.webkit.org/show_bug.cgi?id=221054
+ <rdar://problem/72880447>
+
+ Reviewed by Dean Jackson.
+
+ Add a series of tests ensuring that starting an animation for transform-related properties does not clobber the static
+ value for this property. We only run those tests on WK2 because running those in WK1 is flaky as there doesn't seem
+ to be a solid test utility to determine that Core Animation animations have been committed, even with long delays
+ that would make tests run slow.
+
+ * TestExpectations:
+ * platform/ios-wk2/TestExpectations:
+ * platform/mac-wk2/TestExpectations:
+ * webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer.html: Added.
+ * webanimations/resources/wait-until-animations-are-committed.js: Added.
+ * webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer.html: Added.
+ * webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer.html: Added.
+ * webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer.html: Added.
+ * webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer.html: Added.
+
+2021-02-02 Alan Coon <[email protected]>
+
Cherry-pick r271861. rdar://problem/73890854
[iOS] Obscured elements should not be focusable using the accessory bar
Modified: branches/safari-611-branch/LayoutTests/TestExpectations (272263 => 272264)
--- branches/safari-611-branch/LayoutTests/TestExpectations 2021-02-03 01:40:15 UTC (rev 272263)
+++ branches/safari-611-branch/LayoutTests/TestExpectations 2021-02-03 01:40:21 UTC (rev 272264)
@@ -4596,3 +4596,10 @@
webkit.org/b/217931 imported/w3c/web-platform-tests/html/semantics/scripting-1/the-script-element/moving-between-documents/move-back-iframe-success-inline-classic.html [ Pass Failure ]
webkit.org/b/220325 http/wpt/css/css-highlight-api/highlight-text-cascade.html [ ImageOnlyFailure ]
+
+# These are only enabled on Cocoa WK2 ports
+webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer.html [ Skip ]
+webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer.html [ Skip ]
+webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer.html [ Skip ]
+webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer.html [ Skip ]
+webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer.html [ Skip ]
Modified: branches/safari-611-branch/LayoutTests/platform/ios-wk2/TestExpectations (272263 => 272264)
--- branches/safari-611-branch/LayoutTests/platform/ios-wk2/TestExpectations 2021-02-03 01:40:15 UTC (rev 272263)
+++ branches/safari-611-branch/LayoutTests/platform/ios-wk2/TestExpectations 2021-02-03 01:40:21 UTC (rev 272264)
@@ -1894,3 +1894,9 @@
webkit.org/b/219403 imported/w3c/web-platform-tests/webrtc/RTCPeerConnection-candidate-in-sdp.https.html [ Pass Failure ]
webkit.org/b/219438 [ Release ] ast/canvas/canvas-overflow-hidden-animation.html [ Pass ImageOnlyFailure ]
+
+webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer.html [ Pass ]
+webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer.html [ Pass ]
+webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer.html [ Pass ]
+webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer.html [ Pass ]
+webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer.html [ Pass ]
Modified: branches/safari-611-branch/LayoutTests/platform/mac-wk2/TestExpectations (272263 => 272264)
--- branches/safari-611-branch/LayoutTests/platform/mac-wk2/TestExpectations 2021-02-03 01:40:15 UTC (rev 272263)
+++ branches/safari-611-branch/LayoutTests/platform/mac-wk2/TestExpectations 2021-02-03 01:40:21 UTC (rev 272264)
@@ -1322,3 +1322,8 @@
webkit.org/b/219516 http/wpt/service-workers/service-worker-spinning-install.https.html [ Pass Failure ]
+webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer.html [ Pass ]
+webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer.html [ Pass ]
+webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer.html [ Pass ]
+webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer.html [ Pass ]
+webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer.html [ Pass ]
Added: branches/safari-611-branch/LayoutTests/webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer-expected.html (0 => 272264)
--- branches/safari-611-branch/LayoutTests/webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer-expected.html (rev 0)
+++ branches/safari-611-branch/LayoutTests/webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer-expected.html 2021-02-03 01:40:21 UTC (rev 272264)
@@ -0,0 +1,30 @@
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+
+ will-change: transform;
+ translate: 100px 100px;
+ rotate: 180deg;
+ scale: 0.5;
+ transform: translate(-50px -50px);
+}
+
+div::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 50%;
+ background-color: gray;
+}
+
+</style>
+<div></div>
+<script src=""
Added: branches/safari-611-branch/LayoutTests/webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer.html (0 => 272264)
--- branches/safari-611-branch/LayoutTests/webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer.html (rev 0)
+++ branches/safari-611-branch/LayoutTests/webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer.html 2021-02-03 01:40:21 UTC (rev 272264)
@@ -0,0 +1,54 @@
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+
+ will-change: transform;
+ translate: 100px 100px;
+ rotate: 180deg;
+ scale: 0.5;
+ transform: translate(-50px -50px);
+
+ animation-name: translate, rotate, scale, transform;
+ animation-delay: 1000s;
+ animation-duration: 1000s;
+}
+
+div::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 50%;
+ background-color: gray;
+}
+
+@keyframes translate {
+ from { translate: 200px 200px }
+ to { scale: 200px 200px }
+}
+
+@keyframes rotate {
+ from { rotate: 90deg }
+ to { rotate: 90deg }
+}
+
+@keyframes scale {
+ from { scale: 2 }
+ to { scale: 2 }
+}
+
+@keyframes transform {
+ from { transform: translate(200px, 200px) }
+ to { transform: translate(200px, 200px) }
+}
+
+</style>
+<div></div>
+<script src=""
Added: branches/safari-611-branch/LayoutTests/webanimations/resources/wait-until-animations-are-committed.js (0 => 272264)
--- branches/safari-611-branch/LayoutTests/webanimations/resources/wait-until-animations-are-committed.js (rev 0)
+++ branches/safari-611-branch/LayoutTests/webanimations/resources/wait-until-animations-are-committed.js 2021-02-03 01:40:21 UTC (rev 272264)
@@ -0,0 +1,15 @@
+
+(async () => {
+ if (!window.testRunner)
+ return;
+
+ testRunner.waitUntilDone();
+
+ const script = document.createElement("script");
+ script.src = ""
+ script.addEventListener("load", async event => {
+ await UIHelper.ensureStablePresentationUpdate();
+ testRunner.notifyDone();
+ });
+ document.body.appendChild(script);
+})();
Added: branches/safari-611-branch/LayoutTests/webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer-expected.html (0 => 272264)
--- branches/safari-611-branch/LayoutTests/webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer-expected.html (rev 0)
+++ branches/safari-611-branch/LayoutTests/webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer-expected.html 2021-02-03 01:40:21 UTC (rev 272264)
@@ -0,0 +1,26 @@
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+
+ will-change: rotate;
+ rotate: 180deg;
+}
+
+div::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 50%;
+ background-color: gray;
+}
+
+</style>
+<div></div>
Added: branches/safari-611-branch/LayoutTests/webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer.html (0 => 272264)
--- branches/safari-611-branch/LayoutTests/webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer.html (rev 0)
+++ branches/safari-611-branch/LayoutTests/webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer.html 2021-02-03 01:40:21 UTC (rev 272264)
@@ -0,0 +1,36 @@
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+
+ will-change: rotate;
+ rotate: 180deg;
+
+ animation-name: rotate;
+ animation-delay: 1000s;
+ animation-duration: 1000s;
+}
+
+div::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 50%;
+ background-color: gray;
+}
+
+@keyframes rotate {
+ from { rotate: 90deg }
+ to { rotate: 90deg }
+}
+
+</style>
+<div></div>
+<script src=""
Added: branches/safari-611-branch/LayoutTests/webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer-expected.html (0 => 272264)
--- branches/safari-611-branch/LayoutTests/webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer-expected.html (rev 0)
+++ branches/safari-611-branch/LayoutTests/webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer-expected.html 2021-02-03 01:40:21 UTC (rev 272264)
@@ -0,0 +1,16 @@
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+
+ will-change: scale;
+ scale: 0.5;
+}
+
+</style>
+<div></div>
Added: branches/safari-611-branch/LayoutTests/webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer.html (0 => 272264)
--- branches/safari-611-branch/LayoutTests/webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer.html (rev 0)
+++ branches/safari-611-branch/LayoutTests/webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer.html 2021-02-03 01:40:21 UTC (rev 272264)
@@ -0,0 +1,26 @@
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+
+ will-change: scale;
+ scale: 0.5;
+
+ animation-name: scale;
+ animation-delay: 1000s;
+ animation-duration: 1000s;
+}
+
+@keyframes scale {
+ from { scale: 2 }
+ to { scale: 2 }
+}
+
+</style>
+<div></div>
+<script src=""
Added: branches/safari-611-branch/LayoutTests/webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer-expected.html (0 => 272264)
--- branches/safari-611-branch/LayoutTests/webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer-expected.html (rev 0)
+++ branches/safari-611-branch/LayoutTests/webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer-expected.html 2021-02-03 01:40:21 UTC (rev 272264)
@@ -0,0 +1,16 @@
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+
+ will-change: transform;
+ transform: translate(100px, 100px);
+}
+
+</style>
+<div></div>
Added: branches/safari-611-branch/LayoutTests/webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer.html (0 => 272264)
--- branches/safari-611-branch/LayoutTests/webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer.html (rev 0)
+++ branches/safari-611-branch/LayoutTests/webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer.html 2021-02-03 01:40:21 UTC (rev 272264)
@@ -0,0 +1,26 @@
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+
+ will-change: transform;
+ transform: translate(100px, 100px);
+
+ animation-name: transform;
+ animation-delay: 1000s;
+ animation-duration: 1000s;
+}
+
+@keyframes transform {
+ from { transform: translate(200px, 200px) }
+ to { transform: translate(200px, 200px) }
+}
+
+</style>
+<div></div>
+<script src=""
Added: branches/safari-611-branch/LayoutTests/webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer-expected.html (0 => 272264)
--- branches/safari-611-branch/LayoutTests/webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer-expected.html (rev 0)
+++ branches/safari-611-branch/LayoutTests/webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer-expected.html 2021-02-03 01:40:21 UTC (rev 272264)
@@ -0,0 +1,16 @@
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+
+ will-change: translate;
+ translate: 100px 100px;
+}
+
+</style>
+<div></div>
Added: branches/safari-611-branch/LayoutTests/webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer.html (0 => 272264)
--- branches/safari-611-branch/LayoutTests/webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer.html (rev 0)
+++ branches/safari-611-branch/LayoutTests/webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer.html 2021-02-03 01:40:21 UTC (rev 272264)
@@ -0,0 +1,26 @@
+<style>
+
+div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: black;
+
+ will-change: translate;
+ translate: 100px 100px;
+
+ animation-name: translate;
+ animation-delay: 1000s;
+ animation-duration: 1000s;
+}
+
+@keyframes translate {
+ from { translate: 200px 200px }
+ to { translate: 200px 200px }
+}
+
+</style>
+<div></div>
+<script src=""
Modified: branches/safari-611-branch/Source/WebCore/ChangeLog (272263 => 272264)
--- branches/safari-611-branch/Source/WebCore/ChangeLog 2021-02-03 01:40:15 UTC (rev 272263)
+++ branches/safari-611-branch/Source/WebCore/ChangeLog 2021-02-03 01:40:21 UTC (rev 272264)
@@ -1,5 +1,141 @@
2021-02-02 Alan Coon <[email protected]>
+ Cherry-pick r272004. rdar://problem/73890647
+
+ REGRESSION(r268615): images flicker on apple.com/ios/ios-14
+ https://bugs.webkit.org/show_bug.cgi?id=221054
+ <rdar://problem/72880447>
+
+ Reviewed by Dean Jackson.
+
+ Source/WebCore:
+
+ When we added support for accelerated animations of individual transform properties in r268615 (bug 217842),
+ we made it so that base values of each transform-related property had a non-interpolating animation in the
+ Core Animation animations list that would combine with interpolating animations for that property as additive
+ animations. Prior to any of those animations, we'd reset the combined transform with an identity transform
+ as another non-interpolating animation.
+
+ However, we neglected to consider the case where one of the interpolating animations would not start right
+ away if a positive delay was set. In the case of this apple.com page, the target element would be composited
+ due to a "will-change: transform" style, and a non-animated "transform" was set as well as an animation for
+ the "transform" property with a delay.
+
+ Since we had a "transform" animation, we'd create a Core Animation animations lists as follows:
+
+ 1. non-interpolating, non-additive animation set to the identity matrix
+ 2. interpolating, additive animation with the keyframes set in the CSS animation, with a begin time
+ set to the current time plus the specified delay
+
+ The result of this was that during the animation delay, the static "transform" property was overridden
+ by animation #1 until animation #2 would kick in.
+
+ We now make it so that for each transform-related property, we create a non-interpoloating, additive animation
+ to represent the static value for that property for the duration of any potential delay until the first
+ interpolating animation for this property starts.
+
+ In this example, the Core Animation animations list is now as follows:
+
+ 1. non-interpolating, non-additive animation set to the identity matrix
+ 2. non-interpolating, additive animation set to the static transform value
+ 3. interpolating, additive animation with the keyframes set in the CSS animation, with a begin time
+ set to the current time plus the specified delay
+
+ We implement this with a new lambda function within GraphicsLayerCA::updateAnimations() called
+ addAnimationsForProperty() which adds a non-interpolating animation in two cases:
+
+ 1. if there is no animation for this property at all, making it last forever
+ 2. if all animations have a delay, making it last until the first animation starts
+
+ Tests: webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer.html
+ webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer.html
+ webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer.html
+ webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer.html
+ webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer.html
+
+ * platform/graphics/ca/GraphicsLayerCA.cpp:
+ (WebCore::GraphicsLayerCA::updateAnimations):
+
+ LayoutTests:
+
+ Add a series of tests ensuring that starting an animation for transform-related properties does not clobber the static
+ value for this property. We only run those tests on WK2 because running those in WK1 is flaky as there doesn't seem
+ to be a solid test utility to determine that Core Animation animations have been committed, even with long delays
+ that would make tests run slow.
+
+ * TestExpectations:
+ * platform/ios-wk2/TestExpectations:
+ * platform/mac-wk2/TestExpectations:
+ * webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer.html: Added.
+ * webanimations/resources/wait-until-animations-are-committed.js: Added.
+ * webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer.html: Added.
+ * webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer.html: Added.
+ * webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer.html: Added.
+ * webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer-expected.html: Added.
+ * webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer.html: Added.
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@272004 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2021-01-27 Antoine Quint <[email protected]>
+
+ REGRESSION(r268615): images flicker on apple.com/ios/ios-14
+ https://bugs.webkit.org/show_bug.cgi?id=221054
+ <rdar://problem/72880447>
+
+ Reviewed by Dean Jackson.
+
+ When we added support for accelerated animations of individual transform properties in r268615 (bug 217842),
+ we made it so that base values of each transform-related property had a non-interpolating animation in the
+ Core Animation animations list that would combine with interpolating animations for that property as additive
+ animations. Prior to any of those animations, we'd reset the combined transform with an identity transform
+ as another non-interpolating animation.
+
+ However, we neglected to consider the case where one of the interpolating animations would not start right
+ away if a positive delay was set. In the case of this apple.com page, the target element would be composited
+ due to a "will-change: transform" style, and a non-animated "transform" was set as well as an animation for
+ the "transform" property with a delay.
+
+ Since we had a "transform" animation, we'd create a Core Animation animations lists as follows:
+
+ 1. non-interpolating, non-additive animation set to the identity matrix
+ 2. interpolating, additive animation with the keyframes set in the CSS animation, with a begin time
+ set to the current time plus the specified delay
+
+ The result of this was that during the animation delay, the static "transform" property was overridden
+ by animation #1 until animation #2 would kick in.
+
+ We now make it so that for each transform-related property, we create a non-interpoloating, additive animation
+ to represent the static value for that property for the duration of any potential delay until the first
+ interpolating animation for this property starts.
+
+ In this example, the Core Animation animations list is now as follows:
+
+ 1. non-interpolating, non-additive animation set to the identity matrix
+ 2. non-interpolating, additive animation set to the static transform value
+ 3. interpolating, additive animation with the keyframes set in the CSS animation, with a begin time
+ set to the current time plus the specified delay
+
+ We implement this with a new lambda function within GraphicsLayerCA::updateAnimations() called
+ addAnimationsForProperty() which adds a non-interpolating animation in two cases:
+
+ 1. if there is no animation for this property at all, making it last forever
+ 2. if all animations have a delay, making it last until the first animation starts
+
+ Tests: webanimations/multiple-transform-properties-and-multiple-transform-properties-animation-with-delay-on-forced-layer.html
+ webanimations/rotate-property-and-rotate-animation-with-delay-on-forced-layer.html
+ webanimations/scale-property-and-scale-animation-with-delay-on-forced-layer.html
+ webanimations/transform-property-and-transform-animation-with-delay-on-forced-layer.html
+ webanimations/translate-property-and-translate-animation-with-delay-on-forced-layer.html
+
+ * platform/graphics/ca/GraphicsLayerCA.cpp:
+ (WebCore::GraphicsLayerCA::updateAnimations):
+
+2021-02-02 Alan Coon <[email protected]>
+
Cherry-pick r271861. rdar://problem/73890854
[iOS] Obscured elements should not be focusable using the accessory bar
Modified: branches/safari-611-branch/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp (272263 => 272264)
--- branches/safari-611-branch/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp 2021-02-03 01:40:15 UTC (rev 272263)
+++ branches/safari-611-branch/Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp 2021-02-03 01:40:21 UTC (rev 272264)
@@ -2896,7 +2896,7 @@
};
enum class TransformationMatrixSource { UseIdentityMatrix, AskClient };
- auto addBaseValueTransformAnimation = [&](AnimatedPropertyID property, TransformationMatrixSource matrixSource = TransformationMatrixSource::AskClient) {
+ auto addBaseValueTransformAnimation = [&](AnimatedPropertyID property, TransformationMatrixSource matrixSource = TransformationMatrixSource::AskClient, Seconds beginTimeOfEarliestPropertyAnimation = 0_s) {
// A base value transform animation can either be set to the identity matrix or to read the underlying
// value from the GraphicsLayerClient. If we didn't explicitly ask for an identity matrix, we can skip
// the addition of this base value transform animation since it will be a no-op.
@@ -2904,16 +2904,21 @@
if (matrixSource == TransformationMatrixSource::AskClient && matrix.isIdentity())
return;
- // A base value transform animation needs to last forever and use the same value for its from and to values.
+ auto delay = beginTimeOfEarliestPropertyAnimation > currentTime ? beginTimeOfEarliestPropertyAnimation - currentTime : 0_s;
+
+ // A base value transform animation needs to last forever and use the same value for its from and to values,
+ // unless we're just filling until an animation for this property starts, in which case it must last for duration
+ // of the delay until that animation.
auto caAnimation = createPlatformCAAnimation(PlatformCAAnimation::Basic, propertyIdToString(property));
- caAnimation->setDuration(Seconds::infinity().seconds());
+ caAnimation->setDuration((delay ? delay : Seconds::infinity()).seconds());
caAnimation->setFromValue(matrix);
caAnimation->setToValue(matrix);
auto animation = LayerPropertyAnimation(WTFMove(caAnimation), "base-transform-" + createCanonicalUUIDString(), property, 0, 0, 0_s);
// To ensure the base value transform is applied along with all the interpolating animations, we set it to have started
- // as early as possible, which combined with the infinite duration ensures it's current for any given CA media time.
- animation.m_beginTime = baseTransformAnimationBeginTime;
+ // as early as possible, which combined with the infinite duration ensures it's current for any given CA media time,
+ // unless we're just filling until an animation for this property starts, in which case it must start now.
+ animation.m_beginTime = delay ? currentTime : baseTransformAnimationBeginTime;
// Additivity will depend on the source of the matrix, if it was explicitly provided as an identity matrix, it
// is the initial base value transform animation and must override the current transform value for this layer.
@@ -2950,6 +2955,9 @@
LayerPropertyAnimation* translateAnimation = nullptr;
LayerPropertyAnimation* scaleAnimation = nullptr;
LayerPropertyAnimation* rotateAnimation = nullptr;
+ Vector<LayerPropertyAnimation*> translateAnimations;
+ Vector<LayerPropertyAnimation*> scaleAnimations;
+ Vector<LayerPropertyAnimation*> rotateAnimations;
Vector<LayerPropertyAnimation*> transformAnimations;
for (auto& animation : m_animations) {
@@ -2987,10 +2995,17 @@
}
}
+ if (translateAnimation)
+ translateAnimations.append(translateAnimation);
+ if (scaleAnimation)
+ scaleAnimations.append(scaleAnimation);
+ if (rotateAnimation)
+ rotateAnimations.append(rotateAnimation);
+
// Now we can apply the transform-related animations, taking care to add them in the right order
// (translate/scale/rotate/transform) and generate non-interpolating base value transform animations
// for each property that is not otherwise interpolated.
- if (translateAnimation || scaleAnimation || rotateAnimation || !transformAnimations.isEmpty()) {
+ if (!translateAnimations.isEmpty() || !scaleAnimations.isEmpty() || !rotateAnimations.isEmpty() || !transformAnimations.isEmpty()) {
// Start with a base identity transform to override the transform applied to the layer and have a
// sound base to add animations on top of with additivity enabled.
addBaseValueTransformAnimation(AnimatedPropertyTransform, TransformationMatrixSource::UseIdentityMatrix);
@@ -2997,45 +3012,55 @@
// Core Animation might require additive animations to be applied in the reverse order.
#if !PLATFORM(WIN) && !HAVE(CA_WHERE_ADDITIVE_TRANSFORMS_ARE_REVERSED)
- if (translateAnimation)
- addAnimation(*translateAnimation);
- else
- addBaseValueTransformAnimation(AnimatedPropertyTranslate);
+ auto addAnimationsForProperty = [&](const Vector<LayerPropertyAnimation*>& animations, AnimatedPropertyID property) {
+ if (animations.isEmpty()) {
+ addBaseValueTransformAnimation(property);
+ return;
+ }
- if (rotateAnimation)
- addAnimation(*rotateAnimation);
- else
- addBaseValueTransformAnimation(AnimatedPropertyRotate);
+ Seconds earliestBeginTime = 0_s;
+ for (auto* animation : animations) {
+ if (auto beginTime = animation->computedBeginTime()) {
+ if (!earliestBeginTime || earliestBeginTime > *beginTime)
+ earliestBeginTime = *beginTime;
+ }
+ }
- if (scaleAnimation)
- addAnimation(*scaleAnimation);
- else
- addBaseValueTransformAnimation(AnimatedPropertyScale);
+ if (earliestBeginTime > currentTime)
+ addBaseValueTransformAnimation(property, TransformationMatrixSource::AskClient, earliestBeginTime);
- for (auto* animation : transformAnimations)
- addAnimation(*animation);
- if (transformAnimations.isEmpty())
- addBaseValueTransformAnimation(AnimatedPropertyTransform);
+ for (auto* animation : animations)
+ addAnimation(*animation);
+ };
+
+ addAnimationsForProperty(translateAnimations, AnimatedPropertyTranslate);
+ addAnimationsForProperty(rotateAnimations, AnimatedPropertyRotate);
+ addAnimationsForProperty(scaleAnimations, AnimatedPropertyScale);
+ addAnimationsForProperty(transformAnimations, AnimatedPropertyTransform);
#else
- for (auto* animation : WTF::makeReversedRange(transformAnimations))
- addAnimation(*animation);
- if (transformAnimations.isEmpty())
- addBaseValueTransformAnimation(AnimatedPropertyTransform);
+ auto addAnimationsForProperty = [&](const Vector<LayerPropertyAnimation*>& animations, AnimatedPropertyID property) {
+ if (animations.isEmpty()) {
+ addBaseValueTransformAnimation(property);
+ return;
+ }
- if (scaleAnimation)
- addAnimation(*scaleAnimation);
- else
- addBaseValueTransformAnimation(AnimatedPropertyScale);
+ Seconds earliestBeginTime = 0_s;
+ for (auto* animation : WTF::makeReversedRange(animations)) {
+ if (auto beginTime = animation->computedBeginTime()) {
+ if (!earliestBeginTime || earliestBeginTime > *beginTime)
+ earliestBeginTime = *beginTime;
+ }
+ addAnimation(*animation);
+ }
- if (rotateAnimation)
- addAnimation(*rotateAnimation);
- else
- addBaseValueTransformAnimation(AnimatedPropertyRotate);
+ if (earliestBeginTime > currentTime)
+ addBaseValueTransformAnimation(property, TransformationMatrixSource::AskClient, earliestBeginTime);
+ };
- if (translateAnimation)
- addAnimation(*translateAnimation);
- else
- addBaseValueTransformAnimation(AnimatedPropertyTranslate);
+ addAnimationsForProperty(transformAnimations, AnimatedPropertyTransform);
+ addAnimationsForProperty(scaleAnimations, AnimatedPropertyScale);
+ addAnimationsForProperty(rotateAnimations, AnimatedPropertyRotate);
+ addAnimationsForProperty(translateAnimations, AnimatedPropertyTranslate);
#endif
}
}
