diff options
Diffstat (limited to 'Source/WebCore/manual-tests/animation/transitions-and-paused-animations.html')
-rw-r--r-- | Source/WebCore/manual-tests/animation/transitions-and-paused-animations.html | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/Source/WebCore/manual-tests/animation/transitions-and-paused-animations.html b/Source/WebCore/manual-tests/animation/transitions-and-paused-animations.html new file mode 100644 index 0000000..388d837 --- /dev/null +++ b/Source/WebCore/manual-tests/animation/transitions-and-paused-animations.html @@ -0,0 +1,71 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" + "http://www.w3.org/TR/html4/loose.dtd"> + +<html lang="en"> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Transitions and paused animations</title> + <style type="text/css" media="screen"> + + .container { + height: 200px; + width: 200px; + border: 1px solid black; + -webkit-transition: -webkit-transform 0.5s; + } + + .moved { + -webkit-transform: translateX(100px); + + } + .box { + position: relative; + height: 100px; + width: 100px; + margin: 50px; + background-color: blue; + -webkit-transform: translateZ(0); + -webkit-animation: fade 1s infinite linear alternate; + } + + .moved .box { + -webkit-animation-play-state: paused; + } + + @-webkit-keyframes fade { + from { -webkit-transform: rotate(-20deg); } + to { -webkit-transform: rotate(20deg); } + } + </style> + <script type="text/javascript" charset="utf-8"> + + function runTest() + { + var box = document.querySelectorAll('.box')[0]; + var container = document.querySelectorAll('.container')[0]; + + window.setTimeout(function() { + container.className = 'container'; + }, 250); + + window.setTimeout(function() { + container.className = 'container moved'; + }, 1500); + + window.setTimeout(function() { + container.className = 'container'; + }, 3000); + } + + window.addEventListener('load', runTest, false) + </script> +</head> +<body> + +<p>Box should animate smoothly left, then right then left again, and not jump at the end.</p> +<div class="container moved"> + <div class="box"></div> +</div> + +</body> +</html> |