Chromium Code Reviews Chromium Code Reviews
Issue 2692383004:
Support animating CSS property "order" (Closed)
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <body> | |
| 3 <style> | |
| 4 .parent { | |
| 5 order: 30; | |
| 6 } | |
| 7 .target { | |
| 8 order: 10; | |
| 9 } | |
| 10 </style> | |
| 11 <script src="resources/interpolation-test.js"></script> | |
| 12 <script> | |
| 13 assertInterpolation({ | |
| 14 property: 'order', | |
| 15 from: neutralKeyframe, | |
| 16 to: '20', | |
| 17 }, [ | |
| 18 {at: -3, is: '-20'}, | |
| 19 {at: -0.5, is: '5'}, | |
| 20 {at: 0, is: '10'}, | |
| 21 {at: 0.3, is: '13'}, | |
| 22 {at: 0.6, is: '16'}, | |
| 23 {at: 1, is: '20'}, | |
| 24 {at: 1.5, is: '25'}, | |
| 25 ]); | |
| 26 | |
| 27 assertInterpolation({ | |
| 28 property: 'order', | |
| 29 from: 'initial', | |
| 30 to: '20', | |
| 31 }, [ | |
| 32 {at: -3, is: '-60'}, | |
| 33 {at: -0.5, is: '-10'}, | |
| 34 {at: 0, is: '0'}, | |
| 35 {at: 0.3, is: '6'}, | |
| 36 {at: 0.6, is: '12'}, | |
| 37 {at: 1, is: '20'}, | |
| 38 {at: 1.5, is: '30'}, | |
| 39 ]); | |
| 40 | |
| 41 assertInterpolation({ | |
| 42 property: 'order', | |
| 43 from: 'inherit', | |
| 44 to: '20', | |
| 45 }, [ | |
| 46 {at: -3, is: '60'}, | |
| 47 {at: -0.5, is: '35'}, | |
| 48 {at: 0, is: '30'}, | |
| 49 {at: 0.3, is: '27'}, | |
| 50 {at: 0.6, is: '24'}, | |
| 51 {at: 1, is: '20'}, | |
| 52 {at: 1.5, is: '15'}, | |
| 53 ]); | |
| 54 | |
| 55 assertInterpolation({ | |
| 56 property: 'order', | |
| 57 from: 'unset', | |
| 58 to: '20', | |
| 59 }, [ | |
| 60 {at: -3, is: '-60'}, | |
| 61 {at: -0.5, is: '-10'}, | |
| 62 {at: 0, is: '0'}, | |
| 63 {at: 0.3, is: '6'}, | |
| 64 {at: 0.6, is: '12'}, | |
| 65 {at: 1, is: '20'}, | |
| 66 {at: 1.5, is: '30'}, | |
| 67 ]); | |
| 68 | |
| 69 assertInterpolation({ | |
| 70 property: 'order', | |
| 71 from: '10', | |
| 72 to: '20' | |
| 73 }, [ | |
| 74 {at: -3.0, is: '-20'}, | |
| 75 {at: -0.5, is: '5'}, | |
| 76 {at: 0, is: '10'}, | |
| 77 {at: 0.3, is: '13'}, | |
| 78 {at: 0.6, is: '16'}, | |
| 79 {at: 1, is: '20'}, | |
| 80 {at: 1.5, is: '25'} | |
| 81 ]); | |
| 82 | |
| 83 assertInterpolation({ | |
| 84 property: 'order', | |
| 85 from: '2', | |
| 86 to: '4' | |
| 87 }, [ | |
| 88 {at: -3.0, is: '-4'}, | |
| 89 {at: -0.5, is: '1'}, | |
| 90 {at: 0, is: '2'}, | |
| 91 {at: 0.3, is: '3'}, | |
| 92 {at: 0.6, is: '3'}, | |
| 93 {at: 1, is: '4'}, | |
| 94 {at: 1.5, is: '5'} | |
| 95 ]); | |
| 96 </script> | |
| OLD | NEW |
