Chromium Code Reviews| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <style> | |
| 3 div { | |
| 4 width: 100px; | |
| 5 height: 100px; | |
| 6 border: solid; | |
| 7 margin: 50px; | |
| 8 position: absolute; | |
| 9 will-change: transform; | |
| 10 transform-origin: 0 0; | |
| 11 } | |
| 12 | |
| 13 #test { | |
| 14 border-color: green; | |
| 15 | |
| 16 animation-name: anim; | |
| 17 animation-duration: 2e10s; | |
| 18 animation-delay: -1e10s; | |
| 19 animation-fill-mode: forwards; | |
| 20 animation-timing-function: linear; | |
| 21 } | |
| 22 | |
| 23 @keyframes anim { | |
| 24 0% { | |
| 25 transform: skew(0deg, 0deg); | |
| 26 } | |
| 27 100% { | |
| 28 transform: skew(-90deg, 90deg); | |
|
alancutter (OOO until 2018)
2015/09/03 04:25:14
The from and to keyframes can both be skew(-45deg,
| |
| 29 } | |
| 30 } | |
| 31 | |
| 32 #expected { | |
| 33 border-color: red; | |
| 34 transform: skew(-45deg, 45deg); | |
|
alancutter (OOO until 2018)
2015/09/03 04:25:14
Perhaps if the -expected.html was also running a c
| |
| 35 } | |
| 36 </style> | |
| 37 | |
| 38 The green test div should transform to cover the red target. | |
| 39 <div id="expected"></div> | |
| 40 <div id="test"></div> | |
| OLD | NEW |