| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <meta charset="UTF-8"> | |
| 3 <style> | |
| 4 .parent { | |
| 5 offset-rotation: 30deg; | |
| 6 } | |
| 7 .target { | |
| 8 width: 80px; | |
| 9 height: 80px; | |
| 10 display: inline-block; | |
| 11 background-color: black; | |
| 12 margin-right: 5px; | |
| 13 offset-rotation: 10deg; | |
| 14 } | |
| 15 .expected { | |
| 16 background-color: green; | |
| 17 margin-right: 15px; | |
| 18 } | |
| 19 </style> | |
| 20 <body> | |
| 21 <script src="resources/interpolation-test.js"></script> | |
| 22 <script> | |
| 23 assertInterpolation({ | |
| 24 property: 'offset-rotation', | |
| 25 from: neutralKeyframe, | |
| 26 to: '20deg', | |
| 27 }, [ | |
| 28 {at: -0.3, is: '7deg'}, | |
| 29 {at: 0, is: '10deg'}, | |
| 30 {at: 0.3, is: '13deg'}, | |
| 31 {at: 0.6, is: '16deg'}, | |
| 32 {at: 1, is: '20deg'}, | |
| 33 {at: 1.5, is: '25deg'}, | |
| 34 ]); | |
| 35 | |
| 36 assertNoInterpolation({ | |
| 37 property: 'offset-rotation', | |
| 38 from: 'initial', | |
| 39 to: '20deg', | |
| 40 }); | |
| 41 | |
| 42 assertInterpolation({ | |
| 43 property: 'offset-rotation', | |
| 44 from: 'inherit', | |
| 45 to: '20deg', | |
| 46 }, [ | |
| 47 {at: -0.3, is: '33deg'}, | |
| 48 {at: 0, is: '30deg'}, | |
| 49 {at: 0.3, is: '27deg'}, | |
| 50 {at: 0.6, is: '24deg'}, | |
| 51 {at: 1, is: '20deg'}, | |
| 52 {at: 1.5, is: '15deg'}, | |
| 53 ]); | |
| 54 | |
| 55 assertNoInterpolation({ | |
| 56 property: 'offset-rotation', | |
| 57 from: 'unset', | |
| 58 to: '20deg', | |
| 59 }); | |
| 60 | |
| 61 assertInterpolation({ | |
| 62 property: 'offset-rotation', | |
| 63 from: '10deg', | |
| 64 to: '50deg' | |
| 65 }, [ | |
| 66 {at: -0.3, is: '-2deg'}, | |
| 67 {at: 0, is: '10deg'}, | |
| 68 {at: 0.3, is: '22deg'}, | |
| 69 {at: 0.6, is: '34deg'}, | |
| 70 {at: 1, is: '50deg'}, | |
| 71 {at: 1.5, is: '70deg'}, | |
| 72 ]); | |
| 73 assertInterpolation({ | |
| 74 property: 'offset-rotation', | |
| 75 from: 'auto 10deg', | |
| 76 to: 'auto 50deg' | |
| 77 }, [ | |
| 78 {at: -0.3, is: 'auto -2deg'}, | |
| 79 {at: 0, is: 'auto 10deg'}, | |
| 80 {at: 0.3, is: 'auto 22deg'}, | |
| 81 {at: 0.6, is: 'auto 34deg'}, | |
| 82 {at: 1, is: 'auto 50deg'}, | |
| 83 {at: 1.5, is: 'auto 70deg'}, | |
| 84 ]); | |
| 85 assertInterpolation({ | |
| 86 property: 'offset-rotation', | |
| 87 from: 'reverse -170deg', | |
| 88 to: 'reverse -130deg' | |
| 89 }, [ | |
| 90 {at: -0.3, is: 'auto -2deg'}, | |
| 91 {at: 0, is: 'auto 10deg'}, | |
| 92 {at: 0.3, is: 'auto 22deg'}, | |
| 93 {at: 0.6, is: 'auto 34deg'}, | |
| 94 {at: 1, is: 'auto 50deg'}, | |
| 95 {at: 1.5, is: 'auto 70deg'}, | |
| 96 ]); | |
| 97 assertInterpolation({ | |
| 98 property: 'offset-rotation', | |
| 99 from: 'auto 10deg', | |
| 100 to: 'reverse -130deg' | |
| 101 }, [ | |
| 102 {at: -0.3, is: 'auto -2deg'}, | |
| 103 {at: 0, is: 'auto 10deg'}, | |
| 104 {at: 0.3, is: 'auto 22deg'}, | |
| 105 {at: 0.6, is: 'auto 34deg'}, | |
| 106 {at: 1, is: 'auto 50deg'}, | |
| 107 {at: 1.5, is: 'auto 70deg'}, | |
| 108 ]); | |
| 109 assertInterpolation({ | |
| 110 property: 'offset-rotation', | |
| 111 from: 'reverse -170deg', | |
| 112 to: 'auto 50deg' | |
| 113 }, [ | |
| 114 {at: -0.3, is: 'auto -2deg'}, | |
| 115 {at: 0, is: 'auto 10deg'}, | |
| 116 {at: 0.3, is: 'auto 22deg'}, | |
| 117 {at: 0.6, is: 'auto 34deg'}, | |
| 118 {at: 1, is: 'auto 50deg'}, | |
| 119 {at: 1.5, is: 'auto 70deg'}, | |
| 120 ]); | |
| 121 assertNoInterpolation({ | |
| 122 property: 'offset-rotation', | |
| 123 from: 'auto 200deg', | |
| 124 to: '300deg' | |
| 125 }); | |
| 126 assertNoInterpolation({ | |
| 127 property: 'offset-rotation', | |
| 128 from: '300deg', | |
| 129 to: 'reverse 20deg' | |
| 130 }); | |
| 131 </script> | |
| 132 </body> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2842933003:
CSS Motion Path: delete implementation of offset-rotation property (Closed)
