| author | Fré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 id | 34122 |
| push user | ebalazs@mozilla.com |
| push date | Mon, 11 Jun 2018 09:37:00 +0000 |
| treeherder | mozilla-central@9941eb8c3b29 [default view] [failures only] |
| perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
| reviewers | testonly |
| bugs | 1465868, 11279, 186127 |
| milestone | 62.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
|
--- 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>