| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <title>Test of animation-direction</title> |
| 3 <script src="../resources/testharness.js"></script> |
| 4 <script src="../resources/testharnessreport.js"></script> |
| 5 <style> |
| 6 #target { |
| 7 animation-direction: alternate-reverse; |
| 8 animation-duration: 2s; |
| 9 animation-iteration-count: 2; |
| 10 animation-name: move; |
| 11 animation-play-state: paused; |
| 12 animation-timing-function: linear; |
| 13 animation-fill-mode: both; |
| 2 | 14 |
| 3 <html> | 15 |
| 4 <head> | 16 background-color: red; |
| 5 <style type="text/css" media="screen"> | |
| 6 | |
| 7 #container { | |
| 8 position: relative; | |
| 9 border: 1px solid black; | |
| 10 height: 100px; | 17 height: 100px; |
| 11 width: 500px; | 18 left: 500px; |
| 19 position: absolute; |
| 20 width: 100px; |
| 12 } | 21 } |
| 13 | 22 @keyframes move { |
| 14 #box { | 23 from { left: 0px; } |
| 15 position: absolute; | 24 to { left: 400px; } |
| 16 height: 100px; | |
| 17 width: 100px; | |
| 18 background-color: blue; | |
| 19 animation-name: move; | |
| 20 animation-duration: 2s; | |
| 21 animation-direction: alternate-reverse; | |
| 22 animation-iteration-count: 2; | |
| 23 animation-timing-function: linear; | |
| 24 animation-fill-mode: forwards; | |
| 25 } | 25 } |
| 26 | 26 |
| 27 @keyframes move { | 27 </style> |
| 28 0% { | 28 <div id="target"></div> |
| 29 left: 0; | 29 <script> |
| 30 } | 30 'use strict'; |
| 31 100% { | 31 test(function() { |
| 32 left: 400px; | 32 target.style.animationDelay = '1s'; |
| 33 } | 33 assert_equals(getComputedStyle(target).left, '400px'); |
| 34 } | |
| 35 | |
| 36 </style> | |
| 37 <script src="resources/animation-test-helpers.js" type="text/javascript" chars
et="utf-8"></script> | |
| 38 <script type="text/javascript" charset="utf-8"> | |
| 39 | 34 |
| 40 const expectedValues = [ | 35 target.style.animationDelay = '-0.5s'; |
| 41 // [time, element-id, property, expected-value, tolerance] | 36 assert_equals(getComputedStyle(target).left, '300px'); |
| 42 [1.0, "box", "left", 200, 20], | |
| 43 [2.0, "box", "left", 0, 20], | |
| 44 | 37 |
| 45 [3.0, "box", "left", 200, 20], | 38 target.style.animationDelay = '-1s'; |
| 46 [4.0, "box", "left", 400, 20], | 39 assert_equals(getComputedStyle(target).left, '200px'); |
| 47 ]; | |
| 48 | |
| 49 runAnimationTest(expectedValues); | |
| 50 </script> | |
| 51 </head> | |
| 52 <body> | |
| 53 | 40 |
| 54 <!-- Test animation-direction: alternate-reverse --> | 41 target.style.animationDelay = '-2s'; |
| 55 <div id="container"> | 42 assert_equals(getComputedStyle(target).left, '0px'); |
| 56 <div id="box"></div> | |
| 57 </div> | |
| 58 | 43 |
| 59 <div id="result"></div> | 44 target.style.animationDelay = '-2.5s'; |
| 45 assert_equals(getComputedStyle(target).left, '100px'); |
| 60 | 46 |
| 61 </body> | 47 target.style.animationDelay = '-3s'; |
| 62 </html> | 48 assert_equals(getComputedStyle(target).left, '200px'); |
| 49 |
| 50 target.style.animationDelay = '-4s'; |
| 51 assert_equals(getComputedStyle(target).left, '400px'); |
| 52 |
| 53 target.style.animationDelay = '-5s'; |
| 54 assert_equals(getComputedStyle(target).left, '400px'); |
| 55 }, "animation-direction alternate-reverse plays backwards, then forwards"); |
| 56 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2573413002:
CSS Animations: More layout tests use testharness.js (Closed)
