Index: LayoutTests/animations/timing-properties-do-not-trigger-animation.html |
diff --git a/LayoutTests/animations/timing-properties-do-not-trigger-animation.html b/LayoutTests/animations/timing-properties-do-not-trigger-animation.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..baa2c995a017a05a07244911804c010d0c86f4d2 |
--- /dev/null |
+++ b/LayoutTests/animations/timing-properties-do-not-trigger-animation.html |
@@ -0,0 +1,90 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+ <style type="text/css"> |
+ #target { |
+ height: 50px; |
+ width: 50px; |
+ background-color: red; |
+ } |
+ .animated { |
+ -webkit-animation: test 1ms; |
+ animation: test 1ms; |
+ } |
+ .updated-timing { |
+ -webkit-animation-duration: 2ms; |
+ animation-duration: 2ms; |
+ /* Default is 1 */ |
+ -webkit-animation-iteration-count: 2; |
+ animation-iteration-count: 2; |
+ /* Default is 0 */ |
+ -webkit-animation-delay: 1ms; |
+ animation-delay: 1ms; |
+ /* Default is normal */ |
+ -webkit-animation-direction: reverse; |
+ animation-direction: reverse; |
+ /* Default is none */ |
+ -webkit-animation-fill-mode: forwards; |
+ animation-fill-mode: forwards; |
+ /* Default is ease */ |
+ -webkit-animation-timing-function: linear; |
+ animation-timing-function: linear; |
+ } |
+ @-webkit-keyframes test { |
+ from { -webkit-transform: translateX(100px); } |
+ to { -webkit-transform: translateX(300px); } |
+ } |
+ @keyframes test { |
+ from { -webkit-transform: translateX(100px); } |
+ to { -webkit-transform: translateX(300px); } |
+ } |
+ </style> |
+ <script type="text/javascript"> |
+ if (window.testRunner) { |
+ testRunner.dumpAsText(); |
+ testRunner.waitUntilDone(); |
+ } |
+ |
+ function go() { |
+ var target = document.getElementById('target'); |
+ target.addEventListener('webkitAnimationEnd', updateTiming); |
+ target.classList.add('animated'); |
+ } |
+ |
+ var timeoutId; |
+ function updateTiming(message) { |
+ document.getElementById('result').innerHTML = 'First animation completed<br>'; |
+ var target = document.getElementById('target'); |
+ target.removeEventListener('webkitAnimationEnd', updateTiming); |
+ target.addEventListener('webkitAnimationEnd', failTest); |
+ setTimeout(function() { |
+ target.classList.add('updated-timing'); |
+ }, 0); |
+ timeoutId = setTimeout(passTest, 100); |
+ } |
+ |
+ function failTest() { |
+ clearTimeout(timeoutId); |
+ document.getElementById('result').innerHTML += 'FAIL: Animation restarted'; |
+ if (window.testRunner) { |
+ testRunner.notifyDone(); |
+ } |
+ } |
+ |
+ function passTest() { |
+ document.getElementById('result').innerHTML += 'PASS: Animation did not restart'; |
+ if (window.testRunner) { |
+ testRunner.notifyDone(); |
+ } |
+ } |
+ </script> |
+</head> |
+<body onload="go()"> |
+ <p> |
+ Tests that setting the iteration count, delay, duration, direction, fill |
+ mode or timing function does not trigger an animation. |
+ </p> |
+ <div id="target"></div> |
+ <div id="result"></div> |
+</body> |
+</html> |