| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <meta charset="UTF-8"> | 2 <meta charset="UTF-8"> |
| 3 <style> | 3 <style> |
| 4 .parent { |
| 5 list-style-image: url(../resources/blue-20.png); |
| 6 } |
| 4 .target { | 7 .target { |
| 5 background-color: black; | 8 background-color: black; |
| 6 width: 100px; | 9 width: 100px; |
| 10 list-style-image: url(../resources/green-20.png); |
| 7 } | 11 } |
| 8 .expected { | 12 .expected { |
| 9 background-color: green; | 13 background-color: green; |
| 10 } | 14 } |
| 11 </style> | 15 </style> |
| 12 <body> | 16 <body> |
| 13 <template id="target-template"> | 17 <template id="target-template"> |
| 14 <ul> | 18 <ul> |
| 15 <li class="target"></li> | 19 <li class="target"></li> |
| 16 </ul> | 20 </ul> |
| 17 </template> | 21 </template> |
| 18 <script src="resources/interpolation-test.js"></script> | 22 <script src="resources/interpolation-test.js"></script> |
| 19 <script> | 23 <script> |
| 24 function assertCrossfadeInterpolation(options) { |
| 25 var fromComputed = options.fromComputed || options.from; |
| 26 assertInterpolation({ |
| 27 property: 'list-style-image', |
| 28 from: options.from, |
| 29 to: options.to, |
| 30 }, [ |
| 31 {at: -0.3, is: fromComputed}, |
| 32 {at: 0, is: fromComputed}, |
| 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)'}, |
| 35 {at: 0.6, is: '-webkit-cross-fade(' + fromComputed + ', ' + options.to + ',
0.6)'}, |
| 36 {at: 1, is: options.to}, |
| 37 {at: 1.5, is: options.to}, |
| 38 ]); |
| 39 } |
| 40 |
| 41 assertCrossfadeInterpolation({ |
| 42 from: '', |
| 43 fromComputed: 'url(../resources/green-20.png)', |
| 44 to: 'url(../resources/stripes-20.png)', |
| 45 }); |
| 46 |
| 47 assertNoInterpolation({ |
| 48 property: 'list-style-image', |
| 49 from: 'initial', |
| 50 to: 'url(../resources/stripes-20.png)', |
| 51 }); |
| 52 |
| 53 assertCrossfadeInterpolation({ |
| 54 from: 'inherit', |
| 55 fromComputed: 'url(../resources/blue-20.png)', |
| 56 to: 'url(../resources/stripes-20.png)', |
| 57 }); |
| 58 |
| 59 assertCrossfadeInterpolation({ |
| 60 from: 'unset', |
| 61 fromComputed: 'url(../resources/blue-20.png)', |
| 62 to: 'url(../resources/stripes-20.png)', |
| 63 }); |
| 64 |
| 20 // Constant image | 65 // Constant image |
| 21 var from = 'url(../resources/stripes-20.png)'; | 66 assertCrossfadeInterpolation({ |
| 22 var to = 'url(../resources/stripes-20.png)'; | 67 from: 'url(../resources/stripes-20.png)', |
| 23 assertInterpolation({ | 68 to: 'url(../resources/stripes-20.png)', |
| 24 property: 'list-style-image', | 69 }); |
| 25 from: from, | |
| 26 to: to | |
| 27 }, [ | |
| 28 {at: -0.3, is: from}, | |
| 29 {at: 0, is: from}, | |
| 30 {at: 0.3, is: '-webkit-cross-fade(url(../resources/stripes-20.png), url(../res
ources/stripes-20.png), 0.3)'}, | |
| 31 {at: 0.6, is: '-webkit-cross-fade(url(../resources/stripes-20.png), url(../res
ources/stripes-20.png), 0.6)'}, | |
| 32 {at: 1, is: to}, | |
| 33 {at: 1.5, is: to}, | |
| 34 ]); | |
| 35 | 70 |
| 36 // None to image | 71 // None to image |
| 37 from = 'none'; | |
| 38 assertNoInterpolation({ | 72 assertNoInterpolation({ |
| 39 property: 'list-style-image', | 73 property: 'list-style-image', |
| 40 from: from, | 74 from: 'none', |
| 41 to: to | 75 to: 'url(../resources/stripes-20.png)', |
| 42 }); | 76 }); |
| 43 | 77 |
| 44 // Image to image | 78 // Image to image |
| 45 from = 'url(../resources/green-20.png)'; | 79 assertCrossfadeInterpolation({ |
| 46 to = 'url(../resources/stripes-20.png)'; | 80 from: 'url(../resources/green-20.png)', |
| 47 assertInterpolation({ | 81 to: 'url(../resources/stripes-20.png)', |
| 48 property: 'list-style-image', | 82 }); |
| 49 from: from, | |
| 50 to: to | |
| 51 }, [ | |
| 52 {at: -0.3, is: from}, | |
| 53 {at: 0, is: from}, | |
| 54 {at: 0.3, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.3)'}, | |
| 55 {at: 0.6, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.6)'}, | |
| 56 {at: 1, is: to}, | |
| 57 {at: 1.5, is: to}, | |
| 58 ]); | |
| 59 | 83 |
| 60 // Image to gradient | 84 // Image to gradient |
| 61 to = 'linear-gradient(45deg, blue, orange)'; | 85 assertCrossfadeInterpolation({ |
| 62 assertInterpolation({ | 86 from: 'url(../resources/green-20.png)', |
| 63 property: 'list-style-image', | 87 to: 'linear-gradient(45deg, blue, orange)', |
| 64 from: from, | 88 }); |
| 65 to: to | |
| 66 }, [ | |
| 67 {at: -0.3, is: from}, | |
| 68 {at: 0, is: from}, | |
| 69 {at: 0.3, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.3)'}, | |
| 70 {at: 0.6, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.6)'}, | |
| 71 {at: 1, is: to}, | |
| 72 {at: 1.5, is: to}, | |
| 73 ]); | |
| 74 | 89 |
| 75 // Gradient to gradient | 90 // Gradient to gradient |
| 76 from = 'linear-gradient(-45deg, red, yellow)'; | 91 assertCrossfadeInterpolation({ |
| 77 assertInterpolation({ | 92 from: 'linear-gradient(-45deg, red, yellow)', |
| 78 property: 'list-style-image', | 93 to: 'linear-gradient(45deg, blue, orange)', |
| 79 from: from, | 94 }); |
| 80 to: to | |
| 81 }, [ | |
| 82 {at: -0.3, is: from}, | |
| 83 {at: 0, is: from}, | |
| 84 {at: 0.3, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.3)'}, | |
| 85 {at: 0.6, is: '-webkit-cross-fade(' + from + ', ' + to + ', 0.6)'}, | |
| 86 {at: 1, is: to}, | |
| 87 {at: 1.5, is: to}, | |
| 88 ]); | |
| 89 </script> | 95 </script> |
| 90 </body> | 96 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1262283002:
Fix 50% flip handling of CSS Animations using CSS wide keywords (Closed)
Base URL: svn://svn.chromium.org/blink/trunk