blob: c13f460a8354247b5142278931b0a6c1fa396622 [file] [log] [blame]
<!DOCTYPE html>
<head>
<title>Test of -webkit-animation-play-state</title>
<style>
.target {
height: 100px;
width: 100px;
-webkit-animation-duration: 40ms;
-webkit-animation-timing-function: linear;
}
#translate {
background-color: blue;
-webkit-animation-name: "move1";
}
@-webkit-keyframes "move1" {
from { -webkit-transform: translateX(100px); }
to { -webkit-transform: translateX(200px); }
}
#left {
position: relative;
background-color: red;
-webkit-animation-name: "move2";
}
@-webkit-keyframes "move2" {
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();
}
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 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 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();
}
}
document.addEventListener('webkitAnimationStart', start, false);
</script>
</head>
<body>
<p>
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>