79 lines
1.9 KiB
HTML
79 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<style>
|
|
#box {
|
|
position: relative;
|
|
height: 100px;
|
|
width: 100px;
|
|
background-color: blue;
|
|
-webkit-transition-property: left;
|
|
-webkit-transition-duration: 2s;
|
|
-webkit-transition-timing-function: linear;
|
|
}
|
|
</style>
|
|
<script>
|
|
if (window.testRunner) {
|
|
testRunner.dumpAsText();
|
|
testRunner.waitUntilDone();
|
|
}
|
|
|
|
result = "PASS";
|
|
|
|
function isEqual(actual, desired, tolerance)
|
|
{
|
|
var diff = Math.abs(actual - desired);
|
|
return diff <= tolerance;
|
|
}
|
|
|
|
function snapshot(expected, tolerance)
|
|
{
|
|
if (result != "PASS")
|
|
return;
|
|
|
|
var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
|
|
if (!isEqual(left, expected, tolerance))
|
|
result = "FAIL(was:"+left+", expected:"+expected+")";
|
|
}
|
|
|
|
function reset()
|
|
{
|
|
document.getElementById('box').style.webkitTransitionDuration = "0s";
|
|
document.getElementById('box').style.left = "0px";
|
|
}
|
|
|
|
function startTransition()
|
|
{
|
|
document.getElementById('box').style.left = "400px";
|
|
}
|
|
|
|
function start()
|
|
{
|
|
setTimeout("startTransition()", 0);
|
|
setTimeout("snapshot(100, 80)", 500);
|
|
setTimeout("reset()", 600);
|
|
setTimeout("snapshot(0, 0)", 700);
|
|
|
|
window.setTimeout(function() {
|
|
document.getElementById('result').innerHTML = result;
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
}, 800);
|
|
}
|
|
|
|
window.addEventListener('load', start, false)
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<p>
|
|
This tests changing a transitioning property while running and resetting its duration to 0.
|
|
The box should start moving left and after 500ms snap back to 0</p>
|
|
<div id="box">
|
|
</div>
|
|
<div id="result">
|
|
</div>
|
|
</body>
|
|
</html>
|