67 lines
1.3 KiB
HTML
67 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<style>
|
|
#box {
|
|
height: 200px;
|
|
width: 200px;
|
|
margin: 20px;
|
|
background-color: blue;
|
|
}
|
|
|
|
.animated {
|
|
-webkit-transition: opacity 200ms;
|
|
}
|
|
</style>
|
|
<script>
|
|
if (window.testRunner) {
|
|
testRunner.waitUntilDone();
|
|
testRunner.dumpAsText();
|
|
}
|
|
|
|
function log(s)
|
|
{
|
|
var results = document.getElementById('results');
|
|
results.innerHTML += s + '<br>';
|
|
}
|
|
|
|
function testTransitions()
|
|
{
|
|
if (window.testRunner) {
|
|
var numAnims = document.getAnimations().length;
|
|
if (numAnims == 0)
|
|
log('No running transitions: PASS');
|
|
else
|
|
log('Still ' + numAnims + ' transitions running: FAIL')
|
|
|
|
testRunner.notifyDone();
|
|
}
|
|
}
|
|
|
|
function removeStyle()
|
|
{
|
|
box.className = '';
|
|
window.setTimeout(testTransitions, 50);
|
|
}
|
|
|
|
function startTransition()
|
|
{
|
|
var box = document.getElementById('box');
|
|
box.className = 'animated';
|
|
window.setTimeout(function() {
|
|
box.style.opacity = '0.5';
|
|
window.setTimeout(removeStyle, 200);
|
|
}, 0);
|
|
}
|
|
|
|
window.addEventListener('load', startTransition, false);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="box"></div>
|
|
|
|
<div id="results"></div>
|
|
</body>
|
|
</html> |