Chromium Code Reviews Chromium Code Reviews
Issue 38303003:
Try again to deflake animations/play-state.html (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| Index: LayoutTests/animations/play-state.html |
| diff --git a/LayoutTests/animations/play-state.html b/LayoutTests/animations/play-state.html |
| index fdc4a306136c02295fcb5f91ba69c713c55e3b4e..730ae8c919dc9e226eaa9a8d94ec993be7a9613c 100644 |
| --- a/LayoutTests/animations/play-state.html |
| +++ b/LayoutTests/animations/play-state.html |
| @@ -2,76 +2,96 @@ |
| <head> |
| <title>Test of -webkit-animation-play-state</title> |
| <style> |
| - #box1 { |
| + .target { |
| height: 100px; |
| width: 100px; |
| - background-color: blue; |
| - margin: 0; |
| - -webkit-animation-duration: 2s; |
| + -webkit-animation-duration: 40ms; |
| -webkit-animation-timing-function: linear; |
| + } |
| + #translate { |
| + background-color: blue; |
| -webkit-animation-name: "move1"; |
| - -webkit-animation-play-state: running; |
| } |
| @-webkit-keyframes "move1" { |
| - from { -webkit-transform: translateX(0); } |
| - to { -webkit-transform: translateX(100px); } |
| + from { -webkit-transform: translateX(100px); } |
| + to { -webkit-transform: translateX(200px); } |
| } |
| - #box2 { |
| - position:absolute; |
| - top: 260px; |
| - height: 100px; |
| - width: 100px; |
| + #left { |
| + position: relative; |
| background-color: red; |
| - -webkit-animation-duration: 2s; |
| - -webkit-animation-timing-function: linear; |
| -webkit-animation-name: "move2"; |
| } |
| @-webkit-keyframes "move2" { |
| - from { left: 0; } |
| - to { left: 100px; } |
| + from { left: 100px; } |
| + to { left: 200px; } |
| + } |
| + .paused { |
| + -webkit-animation-play-state: paused; |
| } |
| </style> |
| <script src="resources/animation-test-helpers.js" type="text/javascript"></script> |
| <script type="text/javascript"> |
| + if (window.testRunner) { |
| + testRunner.dumpAsText(); |
| + testRunner.waitUntilDone(); |
| + } |
| - const expectedValues = [ |
| - // [time, element-id, property, expected-value, tolerance] |
| - [0.5, "box1", "webkitTransform", [1,0,0,1,25,0], 24], |
| - [1.1, "box1", "webkitTransform", [1,0,0,1,50,0], 5], |
| - [1.5, "box1", "webkitTransform", [1,0,0,1,50,0], 5], |
| - [2.5, "box1", "webkitTransform", [1,0,0,1,75,0], 24], |
| - [0.5, "box2", "left", 25, 24], |
| - [1.1, "box2", "left", 50, 5], |
| - [1.5, "box2", "left", 50, 5], |
| - [2.5, "box2", "left", 75, 24], |
| - ]; |
| + function log(message) { |
| + var div = document.createElement('div'); |
| + div.textContent = message; |
| + document.body.appendChild(div); |
| + } |
| + |
| + function logPassFail(expected, actual, id, description) { |
| + var didPass = expected === actual; |
| + log((didPass ? 'PASS' : 'FAIL') + ': Element \'' + id + '\' had ' + (didPass ? 'correct' : 'incorrect') + ' style ' + description); |
| + } |
| + |
| + function togglePaused() { |
| + var targets = document.getElementsByClassName('target'); |
| + for (var i = 0; i < targets.length; ++i) { |
| + targets[i].classList.toggle('paused'); |
| + } |
| + } |
| + |
| + var start = function() { |
| + document.removeEventListener('webkitAnimationStart', start, false); |
| + setTimeout(pause, 20); |
| + } |
| + |
| + var transform; |
| + var left; |
| + function pause() { |
| + togglePaused(); |
| + transform = getComputedStyle(document.getElementById('translate')).webkitTransform; |
| + left = getComputedStyle(document.getElementById('left')).left; |
| + setTimeout(resume, 20); |
| + } |
| - function stop() |
| - { |
| - document.getElementById("box1").style.webkitAnimationPlayState = "paused"; |
| - document.getElementById("box2").style.webkitAnimationPlayState = "paused"; |
| + function resume() { |
| + logPassFail(transform, getComputedStyle(document.getElementById('translate')).webkitTransform, 'translate', 'when paused'); |
| + logPassFail(left, getComputedStyle(document.getElementById('left')).left, 'left', 'when paused'); |
| + togglePaused(); |
| + setTimeout(end, 60); |
|
dstockwell
2013/10/24 00:35:02
60 is still quite short, should we just wait for t
Steve Block
2013/10/24 00:41:45
Using the end event actually makes it more flaky,
|
| } |
| - function start() |
| - { |
| - document.getElementById("box1").style.webkitAnimationPlayState = "running"; |
| - document.getElementById("box2").style.webkitAnimationPlayState = "running"; |
| + function end() { |
| + logPassFail('none', getComputedStyle(document.getElementById('translate')).webkitTransform, 'translate', 'at end'); |
| + logPassFail('auto', getComputedStyle(document.getElementById('left')).left, 'left', 'at end'); |
| + if (window.testRunner) { |
| + testRunner.notifyDone(); |
| + } |
| } |
| - setTimeout(stop, 1000); |
| - setTimeout(start, 2000); |
| - runAnimationTest(expectedValues, null, null, true); |
| + document.addEventListener('webkitAnimationStart', start, false); |
| </script> |
| </head> |
| <body> |
| <p> |
| -This tests the operation of -webkit-animation-play-state. After 2 second the box should stop and after one |
| -more second it should start again. We test it both while in motion and when stopped. |
| -<div id="box1"> |
| -</div> |
| -<div id="box2"> |
| -</div> |
| -<div id="result"> |
| -</div> |
| + This tests the operation of -webkit-animation-play-state. We test style |
| + while the animations are paused and once unpaused. |
| +</p> |
| +<div class="target" id="translate">transform</div> |
| +<div class="target" id="left">left</div> |
| </body> |
| </html> |
