| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <script src="../resources/testharness.js"></script> | |
| 3 <script src="../resources/testharnessreport.js"></script> | |
| 4 <body></body> | |
| 5 <script> | |
| 6 function assertAnimationEffect({keyframes, expect}) { | |
| 7 var target = document.createElement('target'); | |
| 8 document.body.appendChild(target); | |
| 9 var animation = target.animate(keyframes, {duration: 1, fill: 'forwards'}); | |
| 10 animation.pause(); | |
| 11 for (var {at, is} of expect) { | |
| 12 animation.currentTime = at; | |
| 13 for (var property in is) | |
| 14 assert_equals(getComputedStyle(target)[property], is[property], `${propert
y} is ${is[property]} at ${at}`); | |
| 15 } | |
| 16 target.remove(); | |
| 17 } | |
| 18 | |
| 19 function createIterable(iterations) { | |
| 20 return { | |
| 21 [Symbol.iterator]() { | |
| 22 var i = 0; | |
| 23 return {next: () => iterations[i++]}; | |
| 24 }, | |
| 25 }; | |
| 26 } | |
| 27 | |
| 28 test(() => { | |
| 29 assertAnimationEffect({ | |
| 30 keyframes: createIterable([ | |
| 31 {done: false, value: {left: '100px'}}, | |
| 32 {done: false, value: {left: '300px'}}, | |
| 33 {done: false, value: {left: '200px'}}, | |
| 34 {done: true}, | |
| 35 ]), | |
| 36 expect: [ | |
| 37 {at: 0, is: {left: '100px'}}, | |
| 38 {at: 0.25, is: {left: '200px'}}, | |
| 39 {at: 0.5, is: {left: '300px'}}, | |
| 40 {at: 0.75, is: {left: '250px'}}, | |
| 41 {at: 1, is: {left: '200px'}}, | |
| 42 ], | |
| 43 }); | |
| 44 }, 'Custom iterator with basic keyframes.'); | |
| 45 | |
| 46 test(() => { | |
| 47 assertAnimationEffect({ | |
| 48 keyframes: { | |
| 49 left: createIterable([ | |
| 50 {done: false, value: '100px'}, | |
| 51 {done: false, value: '300px'}, | |
| 52 {done: false, value: '200px'}, | |
| 53 {done: true}, | |
| 54 ]), | |
| 55 }, | |
| 56 expect: [ | |
| 57 {at: 0, is: {left: '100px'}}, | |
| 58 {at: 0.25, is: {left: '200px'}}, | |
| 59 {at: 0.5, is: {left: '300px'}}, | |
| 60 {at: 0.75, is: {left: '250px'}}, | |
| 61 {at: 1, is: {left: '200px'}}, | |
| 62 ], | |
| 63 }); | |
| 64 }, 'Custom iterator in property indexed keyframes.'); | |
| 65 | |
| 66 test(() => { | |
| 67 var keyframes = createIterable([ | |
| 68 {done: false, value: {left: '100px'}}, | |
| 69 {done: false, value: {left: '300px'}}, | |
| 70 {done: false, value: {left: '200px'}}, | |
| 71 {done: true}, | |
| 72 ]); | |
| 73 keyframes.easing = 'ease-in-out'; | |
| 74 keyframes.offset = '0.1'; | |
| 75 assertAnimationEffect({ | |
| 76 keyframes, | |
| 77 expect: [ | |
| 78 {at: 0, is: {left: '100px'}}, | |
| 79 {at: 0.25, is: {left: '200px'}}, | |
| 80 {at: 0.5, is: {left: '300px'}}, | |
| 81 {at: 0.75, is: {left: '250px'}}, | |
| 82 {at: 1, is: {left: '200px'}}, | |
| 83 ], | |
| 84 }); | |
| 85 }, 'easing and offset are ignored on iterable objects.'); | |
| 86 | |
| 87 test(() => { | |
| 88 assertAnimationEffect({ | |
| 89 keyframes: createIterable([ | |
| 90 {done: false, value: {left: '100px', top: '200px'}}, | |
| 91 {done: false, value: {left: '300px'}}, | |
| 92 {done: false, value: {left: '200px', top: '100px'}}, | |
| 93 {done: true}, | |
| 94 ]), | |
| 95 expect: [ | |
| 96 {at: 0, is: {left: '100px', top: '200px'}}, | |
| 97 {at: 0.25, is: {left: '200px', top: '175px'}}, | |
| 98 {at: 0.5, is: {left: '300px', top: '150px'}}, | |
| 99 {at: 0.75, is: {left: '250px', top: '125px'}}, | |
| 100 {at: 1, is: {left: '200px', top: '100px'}}, | |
| 101 ], | |
| 102 }); | |
| 103 }, 'Custom iterator with multiple properties specified.'); | |
| 104 | |
| 105 test(() => { | |
| 106 assertAnimationEffect({ | |
| 107 keyframes: createIterable([ | |
| 108 {done: false, value: {left: '100px'}}, | |
| 109 {done: false, value: {left: '250px', offset: 0.75}}, | |
| 110 {done: false, value: {left: '200px'}}, | |
| 111 {done: true}, | |
| 112 ]), | |
| 113 expect: [ | |
| 114 {at: 0, is: {left: '100px'}}, | |
| 115 {at: 0.25, is: {left: '150px'}}, | |
| 116 {at: 0.5, is: {left: '200px'}}, | |
| 117 {at: 0.75, is: {left: '250px'}}, | |
| 118 {at: 1, is: {left: '200px'}}, | |
| 119 ], | |
| 120 }); | |
| 121 }, 'Custom iterator with offset specified.'); | |
| 122 | |
| 123 test(() => { | |
| 124 assert_throws({name: 'TypeError'}, () => { | |
| 125 assertAnimationEffect({ | |
| 126 keyframes: createIterable([ | |
| 127 {done: false, value: {left: '100px'}}, | |
| 128 {done: false, value: 1234}, | |
| 129 {done: false, value: {left: '200px'}}, | |
| 130 {done: true}, | |
| 131 ]), | |
| 132 expect: [], | |
| 133 }); | |
| 134 }); | |
| 135 }, 'Custom iterator with non object keyframe should throw.'); | |
| 136 | |
| 137 test(() => { | |
| 138 assert_throws({name: 'TypeError'}, () => { | |
| 139 assertAnimationEffect({ | |
| 140 keyframes: createIterable([ | |
| 141 {done: false, value: {left: ['100px', '200px']}}, | |
| 142 {done: true}, | |
| 143 ]), | |
| 144 expect: [], | |
| 145 }); | |
| 146 }); | |
| 147 }, 'Custom iterator with value list in keyframe should throw.'); | |
| 148 | |
| 149 test(() => { | |
| 150 assert_throws({name: 'TypeError'}, () => { | |
| 151 assertAnimationEffect({ | |
| 152 keyframes: { | |
| 153 left: createIterable([ | |
| 154 {done: false, value: {toString: null}}, | |
| 155 {done: true}, | |
| 156 ]), | |
| 157 }, | |
| 158 expect: [], | |
| 159 }); | |
| 160 }); | |
| 161 }, 'Custom iterator in property indexed keyframes with null toString method shou
ld throw.'); | |
| 162 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2976613002:
Move Web Animations API tests to subdirectory (Closed)
