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 |