Attachment 341659 Details for Bug 186127 – Patch

[patch] Patch

bug-186127-20180531141100.patch (text/plain), 5.78 KB, created by Frédéric Wang (:fredw) on 2018-05-31 05:11:01 PDT

(hide)

Description:

Filename:

MIME Type:

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

Created: 2018-05-31 05:11:01 PDT

Size: 5.78 KB

patch

obsolete

>Subversion Revision: 232288
>diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
>index 5f3eeffbe7645760de152ea7dc34aad202a9b6db..1eab3a33c5265494ef439b18c1b078ae87a951dd 100644
>--- a/LayoutTests/imported/w3c/ChangeLog
>+++ b/LayoutTests/imported/w3c/ChangeLog
>@@ -1,3 +1,15 @@
>+2018-05-31  Frederic Wang  <fwang@igalia.com>
>+
>+        [iOS] Tranformation matrix not preserved when pausing complex animation with BÃ©zier timing function
>+        https://bugs.webkit.org/show_bug.cgi?id=186127
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Add a test to visually verify pausing of a complex animation (translation+rotation).
>+
>+        * web-platform-tests/css/css-animations/set-animation-play-state-to-paused-002-expected.html: Added.
>+        * web-platform-tests/css/css-animations/set-animation-play-state-to-paused-002.html: Added.
>+
> 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-002-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-002-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..16bcb212c410485ddb614c733ef9041ea1d1904f
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-002-expected.html
>@@ -0,0 +1,36 @@
>+<!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;
>+      }
>+      #coveringRectLinear, #coveringRectSteps {
>+        position: absolute;
>+        background: lightgreen;
>+        width: 40px;
>+        height: 70px;
>+        left: 80px;
>+        transform-origin: 50% 10%;
>+        transform: translate(36px, 0) rotate(144deg);
>+      }
>+      #coveringRectLinear {
>+        top: 50px;
>+      }
>+      #coveringRectSteps {
>+        top: 150px;
>+      }
>+    </style>
>+  </head>
>+  <body>
>+    <p>This test passes if you see two rotated green rectangles and no red.</p>
>+    <div id="container">
>+      <div id="coveringRectLinear"></div>
>+      <div id="coveringRectSteps"></div>
>+    </div>
>+  </body>
>+</html>
>diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-002.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..210d0274b85948f1a5af6470c422110796b3fdc1
>--- /dev/null
>+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-002.html
>@@ -0,0 +1,95 @@
>+<!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 complex animations stop
>+                                 when animation-play-state is set to paused">
>+    <link rel="match" href="set-animation-play-state-to-paused-002-ref.html">
>+    <style>
>+      #container {
>+        position: absolute;
>+        left: 0;
>+        top: 3em;
>+      }
>+      #lineLinear, #lineSteps  {
>+        position: absolute;
>+        background: red;
>+        width: 10px;
>+        height: 50px;
>+        left: 95px;
>+        transform-origin: 50% 0%;
>+      }
>+      #coveringRectLinear, #coveringRectSteps {
>+        position: absolute;
>+        background: lightgreen;
>+        width: 40px;
>+        height: 70px;
>+        left: 80px;
>+        transform-origin: 50% 10%;
>+        transform: translate(36px, 0) rotate(144deg);
>+      }
>+      #coveringRectLinear, #lineLinear {
>+        top: 50px;
>+      }
>+      #coveringRectSteps, #lineSteps {
>+        top: 150px;
>+      }
>+      #lineLinear {
>+        animation: rotate 2s linear;
>+      }
>+      #lineSteps {
>+        animation: rotate 2s steps(360, end);
>+      }
>+      .pause {
>+        opacity: 0.6;
>+        animation-play-state: paused !important;
>+      }
>+      @keyframes rotate
>+      {
>+        100% {
>+          transform: translate(90px, 0) rotate(360deg);
>+        }
>+      }
>+    </style>
>+    <script>
>+      var start = null;
>+      var animationDuration = 2000;
>+      var coveringRectAngle = 144;
>+      var rectFinalAngle = 360;
>+      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 * coveringRectAngle / rectFinalAngle;
>+        if (progress >= targetProgress) {
>+          document.getElementById("lineLinear").classList.add("pause");
>+          document.getElementById("lineSteps").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 two rotated green rectangles and no red.</p>
>+    <div id="container">
>+      <div id="lineLinear"></div>
>+      <div id="coveringRectLinear"></div>
>+      <div id="lineSteps"></div>
>+      <div id="coveringRectSteps"></div>
>+    </div>
>+  </body>
>+</html>

Actions: View | Formatted Diff | Diff

Attachments on bug 186127: 341645 | 341659 | 342247 | 342666