Attachment 341650 Details for Bug 170784 – Patch

[patch] Patch

bug-170784-20180531102149.patch (text/plain), 9.31 KB, created by Frédéric Wang (:fredw) on 2018-05-31 01:21:51 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Frédéric Wang (:fredw)

Created: 2018-05-31 01:21:51 PDT

Size: 9.31 KB

patch

obsolete

>Subversion Revision: 232288
>diff --git a/Source/WebKit/ChangeLog b/Source/WebKit/ChangeLog
>index 4f7edf0a844bd35c5f9c428be8e5819816c2e6bb..26a96da227600b10a0f4c16e521b565491b44e05 100644
>--- a/Source/WebKit/ChangeLog
>+++ b/Source/WebKit/ChangeLog
>@@ -1,3 +1,18 @@
>+2018-05-31  Frederic Wang  <fwang@igalia.com>
>+
>+        [iOS] Animations with BÃ©zier timing function not suspended on UI process when animation-play-state is set to "paused"
>+        https://bugs.webkit.org/show_bug.cgi?id=170784
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        In order to pause a running animation, GraphicsLayerCA::pauseCAAnimationOnLayer calls
>+        PlatformCALayer::addAnimationForKey, assuming it will replace the current animation.
>+        This patch fixes PlatformCALayerRemote::addAnimationForKey to ensure this assumption holds.
>+
>+        * WebProcess/WebPage/RemoteLayerTree/PlatformCALayerRemote.cpp:
>+        (WebKit::PlatformCALayerRemote::addAnimationForKey): If the animation was already sent to
>+        the UI process, make sure it is properly updated.
>+
> 2018-05-29  Tim Horton  <timothy_horton@apple.com>
> 
>         Fix the build
>diff --git a/Source/WebKit/WebProcess/WebPage/RemoteLayerTree/PlatformCALayerRemote.cpp b/Source/WebKit/WebProcess/WebPage/RemoteLayerTree/PlatformCALayerRemote.cpp
>index 53968fcdb38ccdf4266746f3f1712c09eaadeee8..312399cd98667fe4a2e4b84f1c948866486070e4 100644
>--- a/Source/WebKit/WebProcess/WebPage/RemoteLayerTree/PlatformCALayerRemote.cpp
>+++ b/Source/WebKit/WebProcess/WebPage/RemoteLayerTree/PlatformCALayerRemote.cpp
>@@ -328,16 +328,23 @@ void PlatformCALayerRemote::adoptSublayers(PlatformCALayer& source)
> void PlatformCALayerRemote::addAnimationForKey(const String& key, PlatformCAAnimation& animation)
> {
>     auto addResult = m_animations.set(key, &animation);
>-    if (addResult.isNewEntry)
>-        m_properties.addedAnimations.append(std::pair<String, PlatformCAAnimationRemote::Properties>(key, downcast<PlatformCAAnimationRemote>(animation).properties()));
>-    else {
>+    bool appendToAddedAnimations = true;
>+    if (!addResult.isNewEntry) {
>+        // There is already an animation for this key. Verify whether it is pending to be sent to
>+        // the UI process and update the key accordingly.
>         for (auto& keyAnimationPair : m_properties.addedAnimations) {
>             if (keyAnimationPair.first == key) {
>                 keyAnimationPair.second = downcast<PlatformCAAnimationRemote>(animation).properties();
>+                appendToAddedAnimations = false;
>                 break;
>             }
>         }
>+        // The animation has already been received by the UI Process so it must be replaced.
>+        if (appendToAddedAnimations)
>+            m_properties.keyPathsOfAnimationsToRemove.add(key);
>     }
>+    if (appendToAddedAnimations)
>+        m_properties.addedAnimations.append(std::pair<String, PlatformCAAnimationRemote::Properties>(key, downcast<PlatformCAAnimationRemote>(animation).properties()));
>     
>     m_properties.notePropertiesChanged(RemoteLayerTreeTransaction::AnimationsChanged);
> 
>diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
>index 5f3eeffbe7645760de152ea7dc34aad202a9b6db..efdf88559efd45a7bf125b5d62c79410c250048e 100644
>--- a/LayoutTests/imported/w3c/ChangeLog
>+++ b/LayoutTests/imported/w3c/ChangeLog
>@@ -1,3 +1,16 @@
>+2018-05-31  Frederic Wang  <fwang@igalia.com>
>+
>+        [iOS] Animations with BÃ©zier timing function not suspended on UI process when animation-play-state is set to "paused"
>+        https://bugs.webkit.org/show_bug.cgi?id=170784
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Import a WPT test to visually check pausing of transform animations.
>+
>+        * web-platform-tests/css/css-animations/set-animation-play-state-to-paused-001-expected.html: Added.
>+        * web-platform-tests/css/css-animations/set-animation-play-state-to-paused-001.html: Added.
>+        * web-platform-tests/css/css-animations/w3c-import.log:
>+
> 2018-05-29  Frederic Wang  <fwang@igalia.com>
> 
>         Import WPT tests for CSS animations
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-001-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-001-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..9dc0594a885566f507477be998538d8b479defa7
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-001-expected.html
>@@ -0,0 +1,29 @@
>+<!DOCTYPE html>
>+<html>
>+  <head>
>+    <meta charset="utf-8">
>+    <title>Dynamically set animation-play-state to paused (reference)</title>
>+    <style>
>+      #container {
>+        position: absolute;
>+        left: 0;
>+        top: 3em;
>+      }
>+      #coveringRect {
>+        position: absolute;
>+        background: lightgreen;
>+        width: 150px;
>+        height: 250px;
>+        left: -75px;
>+        top: 0px;
>+        transform: translate(150px);
>+      }
>+    </style>
>+  </head>
>+  <body>
>+    <p>This test passes if you see a green rectangle and no red.</p>
>+    <div id="container">
>+      <div id="coveringRect"></div>
>+    </div>
>+  </body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-001.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..d8fad5a644ac7287252cfd656f42e2815f7d55d0
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-001.html
>@@ -0,0 +1,88 @@
>+<!DOCTYPE html>
>+<html class="reftest-wait">
>+  <head>
>+    <meta charset="utf-8">
>+    <title>Dynamically set animation-play-state to paused</title>
>+    <link rel="author" title="Igalia S.L." href="https://www.igalia.com/">
>+    <link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-play-state">
>+    <meta name="assert" content="Visually check that transform animations stop
>+                                 when animation-play-state is set to paused">
>+    <link rel="match" href="set-animation-play-state-to-paused-001-ref.html">
>+    <style>
>+      #container {
>+        position: absolute;
>+        left: 0;
>+        top: 3em;
>+      }
>+      #squareLinear, #squareSteps  {
>+        width: 100px;
>+        height: 100px;
>+        background: red;
>+        position: absolute;
>+        left: -50px;
>+      }
>+      #squareLinear {
>+        top: 0px;
>+        animation: move 2s linear;
>+      }
>+      #squareSteps {
>+        top: 150px;
>+        animation: move 2s steps(1000, end);
>+      }
>+      #coveringRect {
>+        position: absolute;
>+        background: lightgreen;
>+        width: 150px;
>+        height: 250px;
>+        left: -75px;
>+        top: 0px;
>+        transform: translate(150px);
>+      }
>+      .pause {
>+        opacity: 0.6;
>+        animation-play-state: paused !important;
>+      }
>+      @keyframes move
>+      {
>+        100% {
>+          transform: translate(500px);
>+        }
>+      }
>+    </style>
>+    <script>
>+      var start = null;
>+      var animationDuration = 2000;
>+      var coveringRectShift = 150;
>+      var rectFinalShift = 500;
>+      function step(timestamp) {
>+        if (!start) start = timestamp;
>+        var progress = timestamp - start;
>+        // Pause the animations when the squares pass under the covering rect.
>+        var targetProgress = animationDuration * coveringRectShift / rectFinalShift;
>+        if (progress > targetProgress) {
>+          document.getElementById("squareLinear").classList.add("pause");
>+          document.getElementById("squareSteps").classList.add("pause");
>+        }
>+
>+        // Wait a bit so that the squares pass the covering rect if the
>+        // animation fails to be paused.
>+        var delta = 200;
>+        if (progress < targetProgress + delta)
>+          window.requestAnimationFrame(step)
>+        else
>+          document.documentElement.classList.remove("reftest-wait");
>+      }
>+      function runTest() {
>+        window.requestAnimationFrame(step);
>+      }
>+    </script>
>+  </head>
>+  <body onload="runTest()">
>+    <p>This test passes if you see a green rectangle and no red.</p>
>+    <div id="container">
>+      <div id="squareLinear"></div>
>+      <div id="squareSteps"></div>
>+      <div id="coveringRect"></div>
>+    </div>
>+  </body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/w3c-import.log
>index b07c2e4e2d301ca5a82f99e7021d6dd29c2051f6..6c222361d56ff2f1f5df87394c4f2b3e59f30490 100644
>--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/w3c-import.log
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/w3c-import.log
>@@ -29,3 +29,5 @@ List of files:
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-pseudoelement.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animationevent-types.html
> /LayoutTests/imported/w3c/web-platform-tests/css/css-animations/pending-style-changes-001.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-001-expected.html
>+/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-001.html

Actions: View | Formatted Diff | Diff

Attachments on bug 170784: 340559 | 340560 | 341453 | 341454 | 341646 | 341650 | 342245 | 342414 | 342422 | 344170