OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 body { |
| 6 font-size: 10px; |
| 7 } |
| 8 </style> |
| 9 </head> |
| 10 <body> |
| 11 <template id="target-template"> |
| 12 <svg width="200px" height="300px" viewBox="0 0 1500 1000"> |
| 13 <text class="target" x="20, 40, 60" /> |
| 14 </svg> |
| 15 </template> |
| 16 <script src="../svg-attribute-interpolation/resources/interpolation-test.js"></s
cript> |
| 17 <script> |
| 18 'use strict'; |
| 19 assertAttributeInterpolation({ |
| 20 property: 'y', |
| 21 underlying: '1, 1, 1', |
| 22 from: '-1, -2, 1', |
| 23 fromComposite: 'add', |
| 24 to: '4, -7, 6', |
| 25 toComposite: 'add' |
| 26 }, [ |
| 27 {at: -0.4, is: '-2, 1, 0'}, |
| 28 {at: 0, is: '0, -1, 2'}, |
| 29 {at: 0.2, is: '1, -2, 3'}, |
| 30 {at: 0.6, is: '3, -4, 5'}, |
| 31 {at: 1, is: '5, -6, 7'}, |
| 32 {at: 1.4, is: '7, -8, 9'} |
| 33 ]); |
| 34 assertAttributeInterpolation({ |
| 35 property: 'y', |
| 36 underlying: '1em, 1ex, 1rem', |
| 37 from: '-1em, 0ex, 1rem', |
| 38 fromComposite: 'add', |
| 39 to: '4em, 5ex, 6rem', |
| 40 toComposite: 'add' |
| 41 }, [ |
| 42 {at: -0.4, is: '-2em, -1ex, 0rem'}, |
| 43 {at: 0, is: '0em, 1ex, 2rem'}, |
| 44 {at: 0.2, is: '1em, 2ex, 3rem'}, |
| 45 {at: 0.6, is: '3em, 4ex, 5rem'}, |
| 46 {at: 1, is: '5em, 6ex, 7rem'}, |
| 47 {at: 1.4, is: '7em, 8ex, 9rem'} |
| 48 ]); |
| 49 assertAttributeInterpolation({ |
| 50 property: 'y', |
| 51 underlying: '50, 50, 0', |
| 52 from: '50%, 0em, 0', |
| 53 fromComposite: 'add', |
| 54 to: '0em, 50%, 0', |
| 55 toComposite: 'add' |
| 56 }, [ |
| 57 {at: -0.4, is: '750, -150, 0'}, |
| 58 {at: 0, is: '550, 50, 0'}, |
| 59 {at: 0.2, is: '450, 150, 0'}, |
| 60 {at: 0.6, is: '250, 350, 0'}, |
| 61 {at: 1, is: '50, 550, 0'}, |
| 62 {at: 1.4, is: '-150, 750, 0'} |
| 63 ]); |
| 64 |
| 65 assertAttributeInterpolation({ |
| 66 property: 'y', |
| 67 underlying: '1, 1, 1', |
| 68 from: '0, -1, 2', |
| 69 fromComposite: 'replace', |
| 70 to: '4, -7, 6', |
| 71 toComposite: 'add' |
| 72 }, [ |
| 73 {at: -0.4, is: '-2, 1, 0'}, |
| 74 {at: 0, is: '0, -1, 2'}, |
| 75 {at: 0.2, is: '1, -2, 3'}, |
| 76 {at: 0.6, is: '3, -4, 5'}, |
| 77 {at: 1, is: '5, -6, 7'}, |
| 78 {at: 1.4, is: '7, -8, 9'} |
| 79 ]); |
| 80 assertAttributeInterpolation({ |
| 81 property: 'y', |
| 82 underlying: '1em, 1ex, 1rem', |
| 83 from: '0em, 1ex, 2rem', |
| 84 fromComposite: 'replace', |
| 85 to: '4em, 5ex, 6rem', |
| 86 toComposite: 'add' |
| 87 }, [ |
| 88 {at: -0.4, is: '-2em, -1ex, 0rem'}, |
| 89 {at: 0, is: '0em, 1ex, 2rem'}, |
| 90 {at: 0.2, is: '1em, 2ex, 3rem'}, |
| 91 {at: 0.6, is: '3em, 4ex, 5rem'}, |
| 92 {at: 1, is: '5em, 6ex, 7rem'}, |
| 93 {at: 1.4, is: '7em, 8ex, 9rem'} |
| 94 ]); |
| 95 assertAttributeInterpolation({ |
| 96 property: 'y', |
| 97 underlying: '1em, 10%, 0', |
| 98 from: '55%, 5em, 0', |
| 99 fromComposite: 'replace', |
| 100 to: '4em, 45%, 0', |
| 101 toComposite: 'add' |
| 102 }, [ |
| 103 {at: -0.4, is: '750, -150, 0'}, |
| 104 {at: 0, is: '550, 50, 0'}, |
| 105 {at: 0.2, is: '450, 150, 0'}, |
| 106 {at: 0.6, is: '250, 350, 0'}, |
| 107 {at: 1, is: '50, 550, 0'}, |
| 108 {at: 1.4, is: '-150, 750, 0'} |
| 109 ]); |
| 110 |
| 111 assertAttributeInterpolation({ |
| 112 property: 'y', |
| 113 underlying: '0, -1, 2', |
| 114 from: neutralKeyframe, |
| 115 to: '5, -6, 7', |
| 116 toComposite: 'replace' |
| 117 }, [ |
| 118 {at: -0.4, is: '-2, 1, 0'}, |
| 119 {at: 0, is: '0, -1, 2'}, |
| 120 {at: 0.2, is: '1, -2, 3'}, |
| 121 {at: 0.6, is: '3, -4, 5'}, |
| 122 {at: 1, is: '5, -6, 7'}, |
| 123 {at: 1.4, is: '7, -8, 9'} |
| 124 ]); |
| 125 assertAttributeInterpolation({ |
| 126 property: 'y', |
| 127 underlying: '0em, 1ex, 2rem', |
| 128 from: neutralKeyframe, |
| 129 to: '5em, 6ex, 7rem', |
| 130 toComposite: 'replace' |
| 131 }, [ |
| 132 {at: -0.4, is: '-2em, -1ex, 0rem'}, |
| 133 {at: 0, is: '0em, 1ex, 2rem'}, |
| 134 {at: 0.2, is: '1em, 2ex, 3rem'}, |
| 135 {at: 0.6, is: '3em, 4ex, 5rem'}, |
| 136 {at: 1, is: '5em, 6ex, 7rem'}, |
| 137 {at: 1.4, is: '7em, 8ex, 9rem'} |
| 138 ]); |
| 139 assertAttributeInterpolation({ |
| 140 property: 'y', |
| 141 underlying: '55%, 5em, 0', |
| 142 from: neutralKeyframe, |
| 143 to: '5em, 55%, 0', |
| 144 toComposite: 'replace' |
| 145 }, [ |
| 146 {at: -0.4, is: '750, -150, 0'}, |
| 147 {at: 0, is: '550, 50, 0'}, |
| 148 {at: 0.2, is: '450, 150, 0'}, |
| 149 {at: 0.6, is: '250, 350, 0'}, |
| 150 {at: 1, is: '50, 550, 0'}, |
| 151 {at: 1.4, is: '-150, 750, 0'} |
| 152 ]); |
| 153 </script> |
| 154 </body> |
| 155 </html> |
OLD | NEW |