| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <title>Test of animation-direction timing functions</title> | |
| 3 <script src="../resources/testharness.js"></script> | |
| 4 <script src="../resources/testharnessreport.js"></script> | |
| 5 <style> | |
| 6 .box { | |
| 7 animation-duration: 2s; | |
| 8 animation-iteration-count: 4; | |
| 9 animation-name: move1; | |
| 10 animation-timing-function: ease; /* ease is good for testing because it is
not symmetric */ | |
| 11 background-color: blue; | |
| 12 color: white; | |
| 13 height: 50px; | |
| 14 left: 20px; | |
| 15 margin-bottom: 10px; | |
| 16 position: relative; | |
| 17 top: 10px; | |
| 18 width: 250px; | |
| 19 } | |
| 20 | |
| 21 .normal { | |
| 22 animation-direction: normal; | |
| 23 } | |
| 24 | |
| 25 .alternate { | |
| 26 animation-direction: alternate; | |
| 27 } | |
| 28 | |
| 29 .reverse { | |
| 30 animation-direction: reverse; | |
| 31 } | |
| 32 | |
| 33 .alternate-reverse { | |
| 34 animation-direction: alternate-reverse; | |
| 35 } | |
| 36 | |
| 37 @keyframes move1 { | |
| 38 from { left: 0px; } | |
| 39 to { left: 200px; } | |
| 40 } | |
| 41 </style> | |
| 42 <div id="box1" class="box normal">normal</div> | |
| 43 <div id="box2" class="box alternate">alternate</div> | |
| 44 <div id="box3" class="box reverse">reverse</div> | |
| 45 <div id="box4" class="box alternate-reverse">alternate-reverse</div> | |
| 46 <script> | |
| 47 'use strict'; | |
| 48 | |
| 49 function computedLeft(element) { | |
| 50 return Number(getComputedStyle(element).left.slice(0, -2)); | |
| 51 } | |
| 52 | |
| 53 test(function() { | |
| 54 const epsilon = 0.002; | |
| 55 | |
| 56 box1.style.animationDelay = '-0.2s'; | |
| 57 assert_approx_equals(computedLeft(box1), 18.6525, epsilon, 'early box1'); | |
| 58 | |
| 59 box2.style.animationDelay = '-0.2s'; | |
| 60 assert_approx_equals(computedLeft(box2), 18.6525, epsilon, 'early box2'); | |
| 61 | |
| 62 box3.style.animationDelay = '-0.2s'; | |
| 63 assert_approx_equals(computedLeft(box3), 198.864, epsilon, 'early box3'); | |
| 64 | |
| 65 box4.style.animationDelay = '-0.2s'; | |
| 66 assert_approx_equals(computedLeft(box4), 198.864, epsilon, 'early box4'); | |
| 67 | |
| 68 | |
| 69 box1.style.animationDelay = '-2.2s'; | |
| 70 assert_approx_equals(computedLeft(box1), 18.6525, epsilon, 'late box1'); | |
| 71 | |
| 72 box2.style.animationDelay = '-2.2s'; | |
| 73 assert_approx_equals(computedLeft(box2), 198.864, epsilon, 'late box2'); | |
| 74 | |
| 75 box3.style.animationDelay = '-2.2s'; | |
| 76 assert_approx_equals(computedLeft(box3), 198.864, epsilon, 'late box3'); | |
| 77 | |
| 78 box4.style.animationDelay = '-2.2s'; | |
| 79 assert_approx_equals(computedLeft(box4), 18.6525, epsilon, 'late box4'); | |
| 80 }, "animation-direction works with timing functions"); | |
| 81 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2975723002:
Move direction and fill tests to subdirectory (Closed)
