| 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>
|
|
|