Index: LayoutTests/animations/play-state.html |
diff --git a/LayoutTests/animations/play-state.html b/LayoutTests/animations/play-state.html |
index fdc4a306136c02295fcb5f91ba69c713c55e3b4e..c13f460a8354247b5142278931b0a6c1fa396622 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, 100); |
} |
- 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> |