Bug 1465868 [wpt PR 11279] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=186127, a=testonly
authorFrédéric Wang <fred.wang@free.fr>
Wed, 06 Jun 2018 17:28:40 +0000
changeset 422256 e6eb185dc9380d952593e55bc2702f91fdaee5a0
parent 422255 3382201cda5a252b81d66f98f2e38810a54bc97d
child 422257 6ab7379d79666849a17e5c17c4ff56cec14c9df9
push id34122
push userebalazs@mozilla.com
push dateMon, 11 Jun 2018 09:37:00 +0000
treeherdermozilla-central@9941eb8c3b29 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1465868, 11279, 186127
milestone62.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1465868 [wpt PR 11279] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=186127, a=testonly Automatic update from web-platform-testsWebKit export of https://bugs.webkit.org/show_bug.cgi?id=186127 (#11279) -- wpt-commits: 57fea798e1e933e1d5291608d9d12da661185bcb wpt-pr: 11279
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-animations/set-animation-play-state-to-paused-002-ref.html
testing/web-platform/tests/css/css-animations/set-animation-play-state-to-paused-002.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -102098,16 +102098,28 @@
       [
        "/css/css-animations/animation-common-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-animations/set-animation-play-state-to-paused-002.html": [
+    [
+     "/css/css-animations/set-animation-play-state-to-paused-002.html",
+     [
+      [
+       "/css/css-animations/set-animation-play-state-to-paused-002-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-backgrounds/background-334.html": [
     [
      "/css/css-backgrounds/background-334.html",
      [
       [
        "/css/css-backgrounds/reference/background-334-ref.xht",
        "=="
       ]
@@ -238383,16 +238395,21 @@
      {}
     ]
    ],
    "css/css-animations/animationevent-interface.js": [
     [
      {}
     ]
    ],
+   "css/css-animations/set-animation-play-state-to-paused-002-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/css-animations/support/testcommon.js": [
     [
      {}
     ]
    ],
    "css/css-backgrounds/OWNERS": [
     [
      {}
@@ -496660,16 +496677,24 @@
   "css/css-animations/event-order.tentative.html": [
    "0115580619b629e47ae0f2635cc84e1e80442a8f",
    "testharness"
   ],
   "css/css-animations/pending-style-changes-001.html": [
    "5f2bf4b6712dd230109be62407cd31800451a271",
    "testharness"
   ],
+  "css/css-animations/set-animation-play-state-to-paused-002-ref.html": [
+   "8156c889e4af141b1bdf3df52626c4337b20c611",
+   "support"
+  ],
+  "css/css-animations/set-animation-play-state-to-paused-002.html": [
+   "bd0740fea0d8b0fae749539c9702d3929b0a8093",
+   "reftest"
+  ],
   "css/css-animations/support/testcommon.js": [
    "3e2b733b29fca0963c95c0d069b7a518db266004",
    "support"
   ],
   "css/css-backgrounds/OWNERS": [
    "656d9f4e3a66f8cb955910171b9997140e4bbd8e",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/set-animation-play-state-to-paused-002-ref.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>
new file mode 100644
--- /dev/null
+++ b/testing/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>