| 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 var keyframes = createIterable([ | |
| 48 {done: false, value: {left: '100px'}}, | |
| 49 {done: false, value: {left: '300px'}}, | |
| 50 {done: false, value: {left: '200px'}}, | |
| 51 {done: true}, | |
| 52 ]); | |
| 53 keyframes.easing = 'ease-in-out'; | |
| 54 keyframes.offset = '0.1'; | |
| 55 assertAnimationEffect({ | |
| 56 keyframes, | |
| 57 expect: [ | |
| 58 {at: 0, is: {left: '100px'}}, | |
| 59 {at: 0.25, is: {left: '200px'}}, | |
| 60 {at: 0.5, is: {left: '300px'}}, | |
| 61 {at: 0.75, is: {left: '250px'}}, | |
| 62 {at: 1, is: {left: '200px'}}, | |
| 63 ], | |
| 64 }); | |
| 65 }, 'easing and offset are ignored on iterable objects.'); | |
| 66 | |
| 67 test(() => { | |
| 68 assertAnimationEffect({ | |
| 69 keyframes: createIterable([ | |
| 70 {done: false, value: {left: '100px', top: '200px'}}, | |
| 71 {done: false, value: {left: '300px'}}, | |
| 72 {done: false, value: {left: '200px', top: '100px'}}, | |
| 73 {done: true}, | |
| 74 ]), | |
| 75 expect: [ | |
| 76 {at: 0, is: {left: '100px', top: '200px'}}, | |
| 77 {at: 0.25, is: {left: '200px', top: '175px'}}, | |
| 78 {at: 0.5, is: {left: '300px', top: '150px'}}, | |
| 79 {at: 0.75, is: {left: '250px', top: '125px'}}, | |
| 80 {at: 1, is: {left: '200px', top: '100px'}}, | |
| 81 ], | |
| 82 }); | |
| 83 }, 'Custom iterator with multiple properties specified.'); | |
| 84 | |
| 85 test(() => { | |
| 86 assertAnimationEffect({ | |
| 87 keyframes: createIterable([ | |
| 88 {done: false, value: {left: '100px'}}, | |
| 89 {done: false, value: {left: '250px', offset: 0.75}}, | |
| 90 {done: false, value: {left: '200px'}}, | |
| 91 {done: true}, | |
| 92 ]), | |
| 93 expect: [ | |
| 94 {at: 0, is: {left: '100px'}}, | |
| 95 {at: 0.25, is: {left: '150px'}}, | |
| 96 {at: 0.5, is: {left: '200px'}}, | |
| 97 {at: 0.75, is: {left: '250px'}}, | |
| 98 {at: 1, is: {left: '200px'}}, | |
| 99 ], | |
| 100 }); | |
| 101 }, 'Custom iterator with offset specified.'); | |
| 102 | |
| 103 test(() => { | |
| 104 assert_throws({name: 'TypeError'}, () => { | |
| 105 assertAnimationEffect({ | |
| 106 keyframes: createIterable([ | |
| 107 {done: false, value: {left: '100px'}}, | |
| 108 {done: false, value: 1234}, | |
| 109 {done: false, value: {left: '200px'}}, | |
| 110 {done: true}, | |
| 111 ]), | |
| 112 expect: [], | |
| 113 }); | |
| 114 }); | |
| 115 }, 'Custom iterator with non object keyframe should throw.'); | |
| 116 | |
| 117 test(() => { | |
| 118 assert_throws({name: 'TypeError'}, () => { | |
| 119 assertAnimationEffect({ | |
| 120 keyframes: createIterable([ | |
| 121 {done: false, value: {left: ['100px', '200px']}}, | |
| 122 {done: true}, | |
| 123 ]), | |
| 124 expect: [], | |
| 125 }); | |
| 126 }); | |
| 127 }, 'Custom iterator with value list in keyframe should throw.'); | |
| 128 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2142733002:
Modified iterable keyframes test to use KeyframeEffect constructor and (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master