Attachment 342247 Details for Bug 186127 – Patch

[patch] Patch

0001-iOS-Tranformation-matrix-not-preserved-when-pausing-.patch (text/plain), 5.77 KB, created by Frédéric Wang (:fredw) on 2018-06-08 02:42:07 PDT

(hide)

Description:

Filename:

MIME Type:

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

Created: 2018-06-08 02:42:07 PDT

Size: 5.77 KB

patch

obsolete

>From 95d0e04e589629df29dd402bcec647f6bba5f194 Mon Sep 17 00:00:00 2001
>From: Frederic Wang <fwang@igalia.com>
>Date: Fri, 8 Jun 2018 11:37:20 +0200
>Subject: [PATCH xserver] =?UTF-8?q?[iOS]=20Tranformation=20matrix=20not=20?=
> =?UTF-8?q?preserved=20when=20pausing=20complex=20animation=20with=20B?=
> =?UTF-8?q?=C3=A9zier=20timing=20function?=
>MIME-Version: 1.0
>Content-Type: text/plain; charset=UTF-8
>Content-Transfer-Encoding: 8bit
>
>---
> ...ion-play-state-to-paused-002-expected.html |  37 +++++++
> ...et-animation-play-state-to-paused-002.html | 103 ++++++++++++++++++
> 2 files changed, 140 insertions(+)
> create mode 100644 LayoutTests/http/wpt/css/css-animations/set-animation-play-state-to-paused-002-expected.html
> create mode 100644 LayoutTests/http/wpt/css/css-animations/set-animation-play-state-to-paused-002.html
>
>diff --git a/LayoutTests/http/wpt/css/css-animations/set-animation-play-state-to-paused-002-expected.html b/LayoutTests/http/wpt/css/css-animations/set-animation-play-state-to-paused-002-expected.html
>new file mode 100644
>index 00000000000..b81066c1830
>--- /dev/null
>+++ b/LayoutTests/http/wpt/css/css-animations/set-animation-play-state-to-paused-002-expected.html
>@@ -0,0 +1,37 @@
>+<!DOCTYPE html>
>+<html>
>+  <head>
>+    <meta charset="utf-8">
>+    <title>Dynamically set animation-play-state to paused (reference)</title>
>+    <style>
>+      #containerLinear, #containerSteps {
>+        position: absolute;
>+        left: 100px;
>+      }
>+      #containerLinear {
>+        top: 100px;
>+      }
>+      #containerSteps {
>+        top: 200px;
>+      }
>+      #coveringRectLinear, #coveringRectSteps {
>+        position: absolute;
>+        background: lightgreen;
>+        left: -20px;
>+        width: 40px;
>+        top: -50px;
>+        height: 100px;
>+        transform: translate(45px, 0) rotate(90deg);
>+      }
>+    </style>
>+  </head>
>+  <body>
>+    <p>This test passes if you see two green rectangles and no red.</p>
>+    <div id="containerLinear">
>+      <div id="coveringRectLinear"></div>
>+    </div>
>+    <div id="containerSteps">
>+      <div id="coveringRectSteps"></div>
>+    </div>
>+  </body>
>+</html>
>diff --git a/LayoutTests/http/wpt/css/css-animations/set-animation-play-state-to-paused-002.html b/LayoutTests/http/wpt/css/css-animations/set-animation-play-state-to-paused-002.html
>new file mode 100644
>index 00000000000..7dbc6129b34
>--- /dev/null
>+++ b/LayoutTests/http/wpt/css/css-animations/set-animation-play-state-to-paused-002.html
>@@ -0,0 +1,103 @@
>+<!DOCTYPE html>
>+<html>
>+  <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>
>+      #containerLinear, #containerSteps {
>+        position: absolute;
>+        left: 100px;
>+      }
>+      #containerLinear {
>+        top: 100px;
>+      }
>+      #containerSteps {
>+        top: 200px;
>+      }
>+      #lineLinear, #lineSteps  {
>+        position: absolute;
>+        background: red;
>+        left: -1px;
>+        width: 2px;
>+        top: -40px;
>+        height: 80px;
>+      }
>+      #coveringRectLinear, #coveringRectSteps {
>+        position: absolute;
>+        background: lightgreen;
>+        left: -20px;
>+        width: 40px;
>+        top: -50px;
>+        height: 100px;
>+        transform: translate(45px, 0) rotate(90deg);
>+      }
>+      #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(180px, 0) rotate(360deg);
>+        }
>+      }
>+    </style>
>+    <script>
>+      var start = null;
>+      var animationDuration = 2000;
>+      function shift(id)
>+      {
>+        var transform = window.getComputedStyle(document.getElementById(id)).transform;
>+        if (transform === "none")
>+          return 0;
>+        // See https://drafts.csswg.org/css-transforms-2/#serialization-of-the-computed-value
>+        return parseFloat(transform.split(/,\s*/)[4]);
>+      }
>+      function step(timestamp) {
>+        // For each line, pause the animation as soon as it passes under the covering rect.
>+        var timeError = 100;
>+        var maxShift = 180;
>+        var epsilon = maxShift * timeError / animationDuration;
>+        ["Linear", "Steps"].forEach((id) => {
>+          if (Math.abs(shift(`coveringRect${id}`) - shift(`line${id}`)) < epsilon)
>+            document.getElementById(`line${id}`).classList.add("pause");
>+        });
>+
>+        // Stop the reftest after the time when the animations would have stop.
>+        // If pausing failed for some reason, the lines will be visible.
>+        if (!start) start = timestamp;
>+        if (timestamp - start < animationDuration)
>+          window.requestAnimationFrame(step);
>+        else if (window.testRunner)
>+          testRunner.notifyDone();
>+      }
>+      function runTest() {
>+        if (window.testRunner)
>+          testRunner.waitUntilDone();
>+        window.requestAnimationFrame(step);
>+      }
>+    </script>
>+  </head>
>+  <body onload="runTest()">
>+    <p>This test passes if you see two green rectangles and no red.</p>
>+    <div id="containerLinear">
>+      <div id="lineLinear"></div>
>+      <div id="coveringRectLinear"></div>
>+    </div>
>+    <div id="containerSteps">
>+      <div id="lineSteps"></div>
>+      <div id="coveringRectSteps"></div>
>+    </div>
>+  </body>
>+</html>
>-- 
>2.17.0
>

Actions: View | Formatted Diff | Diff

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