| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <body> | 2 <body> |
| 3 <style> | 3 <style> |
| 4 .container { | 4 .container { |
| 5 width: 80px; | 5 width: 80px; |
| 6 height: 80px; | 6 height: 80px; |
| 7 background: black; | 7 background: black; |
| 8 display: inline-block; | 8 display: inline-block; |
| 9 padding: 5px; | 9 padding: 5px; |
| 10 } | 10 } |
| (...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 72 to: 'rect(0px, 100px, 90px, 5px)' | 72 to: 'rect(0px, 100px, 90px, 5px)' |
| 73 }, [ | 73 }, [ |
| 74 {at: -1, is: 'rect(0px, 50px, 70px, 15px)'}, | 74 {at: -1, is: 'rect(0px, 50px, 70px, 15px)'}, |
| 75 {at: 0, is: 'rect(0px, 75px, 80px, 10px)'}, | 75 {at: 0, is: 'rect(0px, 75px, 80px, 10px)'}, |
| 76 {at: 0.25, is: 'rect(0px, 81.25px, 82.5px, 8.75px)'}, | 76 {at: 0.25, is: 'rect(0px, 81.25px, 82.5px, 8.75px)'}, |
| 77 {at: 0.75, is: 'rect(0px, 93.75px, 87.5px, 6.25px)'}, | 77 {at: 0.75, is: 'rect(0px, 93.75px, 87.5px, 6.25px)'}, |
| 78 {at: 1, is: 'rect(0px, 100px, 90px, 5px)'}, | 78 {at: 1, is: 'rect(0px, 100px, 90px, 5px)'}, |
| 79 {at: 2, is: 'rect(0px, 125px, 100px, 0px)'}, | 79 {at: 2, is: 'rect(0px, 125px, 100px, 0px)'}, |
| 80 ]); | 80 ]); |
| 81 | 81 |
| 82 assertInterpolation({ | |
| 83 property: 'clip', | |
| 84 from: 'rect(auto, auto, auto, 10px)', | |
| 85 to: 'rect(20px, 50px, 50px, auto)' | |
| 86 }, [ | |
| 87 {at: -1, is: 'rect(auto, auto, auto, 10px)'}, | |
| 88 {at: 0, is: 'rect(auto, auto, auto, 10px)'}, | |
| 89 {at: 0.25, is: 'rect(auto, auto, auto, 10px)'}, | |
| 90 {at: 0.75, is: 'rect(20px, 50px, 50px, auto)'}, | |
| 91 {at: 1, is: 'rect(20px, 50px, 50px, auto)'}, | |
| 92 {at: 2, is: 'rect(20px, 50px, 50px, auto)'} | |
| 93 ]); | |
| 94 | |
| 95 assertInterpolation({ | |
| 96 property: 'clip', | |
| 97 from: 'rect(auto, 0px, auto, 10px)', | |
| 98 to: 'rect(auto, 50px, 50px, auto)' | |
| 99 }, [ | |
| 100 {at: -1, is: 'rect(auto, -50px, auto, 10px)'}, | |
| 101 {at: 0, is: 'rect(auto, 0px, auto, 10px)'}, | |
| 102 {at: 0.25, is: 'rect(auto, 12.5px, auto, 10px)'}, | |
| 103 {at: 0.75, is: 'rect(auto, 37.5px, 50px, auto)'}, | |
| 104 {at: 1, is: 'rect(auto, 50px, 50px, auto)'}, | |
| 105 {at: 2, is: 'rect(auto, 100px, 50px, auto)'} | |
| 106 ]); | |
| 107 | |
| 108 assertNoInterpolation({ | 82 assertNoInterpolation({ |
| 109 property: 'clip', | 83 property: 'clip', |
| 84 from: 'rect(auto, auto, auto, 10px)', |
| 85 to: 'rect(20px, 50px, 50px, auto)' |
| 86 }); |
| 87 |
| 88 assertNoInterpolation({ |
| 89 property: 'clip', |
| 90 from: 'rect(auto, 0px, auto, 10px)', |
| 91 to: 'rect(auto, 50px, 50px, auto)' |
| 92 }); |
| 93 |
| 94 assertNoInterpolation({ |
| 95 property: 'clip', |
| 110 from: 'auto', | 96 from: 'auto', |
| 111 to: 'rect(0px, 50px, 50px, 0px)' | 97 to: 'rect(0px, 50px, 50px, 0px)' |
| 112 }); | 98 }); |
| 113 | 99 |
| 114 assertNoInterpolation({ | 100 assertNoInterpolation({ |
| 115 property: 'clip', | 101 property: 'clip', |
| 116 from: 'rect(0px, 50px, 50px, 0px)', | 102 from: 'rect(0px, 50px, 50px, 0px)', |
| 117 to: 'auto' | 103 to: 'auto' |
| 118 }); | 104 }); |
| 119 </script> | 105 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1640643002:
Add additive animation support for CSS property clip (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@_propertyInterpolationTypesMapping