| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <meta charset="UTF-8"> | 2 <meta charset="UTF-8"> |
| 3 <style> | 3 <style> |
| 4 .parent { | 4 .parent { |
| 5 -webkit-mask-box-image-source: url(../resources/blue-100.png); | 5 -webkit-mask-box-image-source: url(../resources/blue-100.png); |
| 6 } | 6 } |
| 7 .target { | 7 .target { |
| 8 display: inline-block; | 8 display: inline-block; |
| 9 width: 100px; | 9 width: 100px; |
| 10 height: 100px; | 10 height: 100px; |
| (...skipping 22 matching lines...) Expand all Loading... |
| 33 {at: 0.3, is: '-webkit-cross-fade(' + fromComputed + ', ' + options.to + ',
0.3)'}, | 33 {at: 0.3, is: '-webkit-cross-fade(' + fromComputed + ', ' + options.to + ',
0.3)'}, |
| 34 {at: 0.5, is: '-webkit-cross-fade(' + fromComputed + ', ' + options.to + ',
0.5)'}, | 34 {at: 0.5, is: '-webkit-cross-fade(' + fromComputed + ', ' + options.to + ',
0.5)'}, |
| 35 {at: 0.6, is: '-webkit-cross-fade(' + fromComputed + ', ' + options.to + ',
0.6)'}, | 35 {at: 0.6, is: '-webkit-cross-fade(' + fromComputed + ', ' + options.to + ',
0.6)'}, |
| 36 {at: 1, is: options.to}, | 36 {at: 1, is: options.to}, |
| 37 {at: 1.5, is: options.to}, | 37 {at: 1.5, is: options.to}, |
| 38 ]); | 38 ]); |
| 39 } | 39 } |
| 40 | 40 |
| 41 // neutral | 41 // neutral |
| 42 assertCrossfadeInterpolation({ | 42 assertCrossfadeInterpolation({ |
| 43 from: '', | 43 from: neutralKeyframe, |
| 44 fromComputed: 'url(../resources/stripes-100.png)', | 44 fromComputed: 'url(../resources/stripes-100.png)', |
| 45 to: 'url(../resources/green-100.png)', | 45 to: 'url(../resources/green-100.png)', |
| 46 }); | 46 }); |
| 47 | 47 |
| 48 // initial | 48 // initial |
| 49 assertNoInterpolation({ | 49 assertNoInterpolation({ |
| 50 property: '-webkit-mask-box-image-source', | 50 property: '-webkit-mask-box-image-source', |
| 51 from: 'initial', | 51 from: 'initial', |
| 52 to: 'url(../resources/green-100.png)', | 52 to: 'url(../resources/green-100.png)', |
| 53 }); | 53 }); |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 88 }); | 88 }); |
| 89 | 89 |
| 90 // Gradient to gradient | 90 // Gradient to gradient |
| 91 assertCrossfadeInterpolation({ | 91 assertCrossfadeInterpolation({ |
| 92 property: '-webkit-mask-box-image-source', | 92 property: '-webkit-mask-box-image-source', |
| 93 from: 'linear-gradient(-45deg, red, yellow)', | 93 from: 'linear-gradient(-45deg, red, yellow)', |
| 94 to: 'linear-gradient(45deg, blue, orange)', | 94 to: 'linear-gradient(45deg, blue, orange)', |
| 95 }); | 95 }); |
| 96 </script> | 96 </script> |
| 97 </body> | 97 </body> |
| OLD | NEW |