| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <meta charset="UTF-8"> | 2 <meta charset="UTF-8"> |
| 3 <style> | 3 <style> |
| 4 .container { | 4 .container { |
| 5 display: inline-block; | 5 display: inline-block; |
| 6 border: 2px solid black; | 6 border: 2px solid black; |
| 7 } | 7 } |
| 8 .target { | 8 .target { |
| 9 width: 120px; | 9 width: 120px; |
| 10 height: 120px; | 10 height: 120px; |
| (...skipping 11 matching lines...) Expand all Loading... |
| 22 </div> | 22 </div> |
| 23 </template> | 23 </template> |
| 24 <script src="resources/interpolation-test.js"></script> | 24 <script src="resources/interpolation-test.js"></script> |
| 25 <script> | 25 <script> |
| 26 // Test equal number of position values as background images. | 26 // Test equal number of position values as background images. |
| 27 assertInterpolation({ | 27 assertInterpolation({ |
| 28 property: '-webkit-mask-position', | 28 property: '-webkit-mask-position', |
| 29 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', | 29 from: '0px 0px, 0px 0px, 0px 0px, 0px 0px', |
| 30 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', | 30 to: '80px 80px, 80px 80px, 80px 80px, 80px 80px', |
| 31 }, [ | 31 }, [ |
| 32 {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, | 32 {at: -0.25, is: 'left -20px top -20px, left -20px top -20px, left -20px top -2
0px, left -20px top -20px'}, |
| 33 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, | 33 {at: 0, is: 'left 0px top 0px, left 0px top 0px, left 0px top
0px, left 0px top 0px'}, |
| 34 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, | 34 {at: 0.25, is: 'left 20px top 20px, left 20px top 20px, left 20px top 2
0px, left 20px top 20px'}, |
| 35 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, | 35 {at: 0.5, is: 'left 40px top 40px, left 40px top 40px, left 40px top 4
0px, left 40px top 40px'}, |
| 36 {at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, | 36 {at: 0.75, is: 'left 60px top 60px, left 60px top 60px, left 60px top 6
0px, left 60px top 60px'}, |
| 37 {at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, | 37 {at: 1, is: 'left 80px top 80px, left 80px top 80px, left 80px top 8
0px, left 80px top 80px'}, |
| 38 {at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, | 38 {at: 1.25, is: 'left 100px top 100px, left 100px top 100px, left 100px top 10
0px, left 100px top 100px'}, |
| 39 ]); | 39 ]); |
| 40 | 40 |
| 41 // Test single position value repeated over background images. | 41 // Test single position value repeated over background images. |
| 42 assertInterpolation({ | 42 assertInterpolation({ |
| 43 property: '-webkit-mask-position', | 43 property: '-webkit-mask-position', |
| 44 from: 'top 0px left 0px', | 44 from: 'top 0px left 0px', |
| 45 to: 'left 80px top 80px', | 45 to: 'left 80px top 80px', |
| 46 }, [ | 46 }, [ |
| 47 {at: -0.25, is: '-20px -20px, -20px -20px, -20px -20px, -20px -20px'}, | 47 {at: -0.25, is: 'left -20px top -20px, left -20px top -20px, left -20px top -2
0px, left -20px top -20px'}, |
| 48 {at: 0, is: ' 0px 0px, 0px 0px, 0px 0px, 0px 0px'}, | 48 {at: 0, is: 'left 0px top 0px, left 0px top 0px, left 0px top
0px, left 0px top 0px'}, |
| 49 {at: 0.25, is: ' 20px 20px, 20px 20px, 20px 20px, 20px 20px'}, | 49 {at: 0.25, is: 'left 20px top 20px, left 20px top 20px, left 20px top 2
0px, left 20px top 20px'}, |
| 50 {at: 0.5, is: ' 40px 40px, 40px 40px, 40px 40px, 40px 40px'}, | 50 {at: 0.5, is: 'left 40px top 40px, left 40px top 40px, left 40px top 4
0px, left 40px top 40px'}, |
| 51 {at: 0.75, is: ' 60px 60px, 60px 60px, 60px 60px, 60px 60px'}, | 51 {at: 0.75, is: 'left 60px top 60px, left 60px top 60px, left 60px top 6
0px, left 60px top 60px'}, |
| 52 {at: 1, is: ' 80px 80px, 80px 80px, 80px 80px, 80px 80px'}, | 52 {at: 1, is: 'left 80px top 80px, left 80px top 80px, left 80px top 8
0px, left 80px top 80px'}, |
| 53 {at: 1.25, is: '100px 100px, 100px 100px, 100px 100px, 100px 100px'}, | 53 {at: 1.25, is: 'left 100px top 100px, left 100px top 100px, left 100px top 10
0px, left 100px top 100px'}, |
| 54 ]); | 54 ]); |
| 55 | 55 |
| 56 // Test mismatched numbers of position values. | 56 // Test mismatched numbers of position values. |
| 57 assertInterpolation({ | 57 assertInterpolation({ |
| 58 property: '-webkit-mask-position', | 58 property: '-webkit-mask-position', |
| 59 from: '0px 0px, 80px 0px', | 59 from: '0px 0px, 80px 0px', |
| 60 to: '40px 40px, 80px 80px, 0px 80px', | 60 to: '40px 40px, 80px 80px, 0px 80px', |
| 61 }, [ | 61 }, [ |
| 62 {at: -0.25, is: '-10px -10px, 80px -20px, 0px -20px, 90px -10px'}, | 62 {at: -0.25, is: 'left -10px top -10px, left 80px top -20px, left 0px top -20px
, left 90px top -10px'}, |
| 63 {at: 0, is: ' 0px 0px, 80px 0px, 0px 0px, 80px 0px'}, | 63 {at: 0, is: 'left 0px top 0px, left 80px top 0px, left 0px top 0px
, left 80px top 0px'}, |
| 64 {at: 0.25, is: ' 10px 10px, 80px 20px, 0px 20px, 70px 10px'}, | 64 {at: 0.25, is: 'left 10px top 10px, left 80px top 20px, left 0px top 20px
, left 70px top 10px'}, |
| 65 {at: 0.5, is: ' 20px 20px, 80px 40px, 0px 40px, 60px 20px'}, | 65 {at: 0.5, is: 'left 20px top 20px, left 80px top 40px, left 0px top 40px
, left 60px top 20px'}, |
| 66 {at: 0.75, is: ' 30px 30px, 80px 60px, 0px 60px, 50px 30px'}, | 66 {at: 0.75, is: 'left 30px top 30px, left 80px top 60px, left 0px top 60px
, left 50px top 30px'}, |
| 67 {at: 1, is: ' 40px 40px, 80px 80px, 0px 80px, 40px 40px'}, | 67 {at: 1, is: 'left 40px top 40px, left 80px top 80px, left 0px top 80px
, left 40px top 40px'}, |
| 68 {at: 1.25, is: ' 50px 50px, 80px 100px, 0px 100px, 30px 50px'}, | 68 {at: 1.25, is: 'left 50px top 50px, left 80px top 100px, left 0px top 100px
, left 30px top 50px'}, |
| 69 ]); | 69 ]); |
| 70 </script> | 70 </script> |
| 71 </body> | 71 </body> |
| OLD | NEW |