| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 | 5 |
| 6 div { | 6 div { |
| 7 position: absolute; | 7 position: absolute; |
| 8 height: 90px; | 8 height: 90px; |
| 9 width: 90px; | 9 width: 90px; |
| 10 background: blue; | 10 background: blue; |
| 11 } | 11 } |
| 12 | 12 |
| 13 #div1 { | 13 #div1 { |
| 14 z-index: 4; | 14 z-index: 4; |
| 15 left: 100px; | 15 left: 100px; |
| 16 top: 200px; | 16 top: 200px; |
| 17 offset-path: path('m 0 0 h 400'); | 17 offset-path: path('m 0 0 h 400'); |
| 18 transform-origin: 0px 0px; |
| 18 } | 19 } |
| 19 | 20 |
| 20 #div2 { | 21 #div2 { |
| 21 z-index: 3; | 22 z-index: 3; |
| 22 left: 100px; | 23 left: 100px; |
| 23 top: 300px; | 24 top: 300px; |
| 25 transform-origin: 0px 0px; |
| 24 } | 26 } |
| 25 | 27 |
| 26 </style> | 28 </style> |
| 27 </head> | 29 </head> |
| 28 <body> | 30 <body> |
| 29 <p> | 31 <p> |
| 30 Tests that motion path animations stop an existing fill-forwards transform anima
tion from being composited. | 32 Tests that motion path animations stop an existing fill-forwards transform anima
tion from being composited. |
| 31 <p> | 33 <p> |
| 32 The two squares should equivalently move from left to right, pause and move back
to left. They need not be perfectly in time. | 34 The two squares should equivalently move from left to right, pause and move back
to left. They need not be perfectly in time. |
| 33 | 35 |
| 34 <div id="div1"></div> | 36 <div id="div1"></div> |
| 35 <div id="div2"></div> | 37 <div id="div2"></div> |
| 36 | 38 |
| 37 <script> | 39 <script> |
| 38 var div1 = document.getElementById('div1'); | 40 var div1 = document.getElementById('div1'); |
| 39 var div2 = document.getElementById('div2'); | 41 var div2 = document.getElementById('div2'); |
| 40 | 42 |
| 41 function startAnimations() { | 43 function startAnimations() { |
| 42 div1.animate([ | 44 div1.animate([ |
| 43 {motionOffset: '0%'}, | 45 {offsetDistance: '0%'}, |
| 44 {motionOffset: '100%'} | 46 {offsetDistance: '100%'} |
| 45 ], { | 47 ], { |
| 46 duration: 1000, | 48 duration: 1000, |
| 47 delay: 1000, | 49 delay: 1000, |
| 48 fill: 'forwards' | 50 fill: 'forwards' |
| 49 }); | 51 }); |
| 50 div1.animate([ | 52 div1.animate([ |
| 51 {transform: 'translate(0px)'}, | 53 {transform: 'translate(0px)'}, |
| 52 {transform: 'translate(-400px)'} | 54 {transform: 'translate(-400px)'} |
| 53 ], { | 55 ], { |
| 54 duration: 1000, | 56 duration: 1000, |
| 55 delay: 3000, | 57 delay: 3000, |
| 56 fill: 'forwards' | 58 fill: 'forwards' |
| 57 }); | 59 }); |
| 58 | 60 |
| 59 div2.animate([ | 61 div2.animate([ |
| 60 {transform: 'translate(0px)'}, | 62 {transform: 'translate(0px)'}, |
| 61 {transform: 'translate(400px)'} | 63 {transform: 'translate(400px)'} |
| 62 ], { | 64 ], { |
| 63 duration: 1000, | 65 duration: 1000, |
| 64 delay: 1000, | 66 delay: 1000, |
| 65 fill: 'forwards' | 67 fill: 'forwards' |
| 66 }); | 68 }); |
| 67 setTimeout(function() { | 69 setTimeout(function() { |
| 68 div2.style.motionPath = 'path("m 0 0 h -400")'; | 70 div2.style.offsetPath = 'path("m 0 0 h -400")'; |
| 69 div2.style.motionRotation = '0deg'; | 71 div2.style.offsetRotate = '0deg'; |
| 70 div2.animate([ | 72 div2.animate([ |
| 71 {motionOffset: '0%'}, | 73 {offsetDistance: '0%'}, |
| 72 {motionOffset: '100%'} | 74 {offsetDistance: '100%'} |
| 73 ], { | 75 ], { |
| 74 duration: 1000, | 76 duration: 1000, |
| 75 fill: 'forwards' | 77 fill: 'forwards' |
| 76 }); | 78 }); |
| 77 }, 3000); | 79 }, 3000); |
| 78 } | 80 } |
| 79 | 81 |
| 80 requestAnimationFrame(startAnimations); | 82 requestAnimationFrame(startAnimations); |
| 81 | 83 |
| 82 </script> | 84 </script> |
| 83 | 85 |
| 84 </body> | 86 </body> |
| 85 </html> | 87 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2841863005:
CSS Motion Path: delete implementation of motion-offset property (Closed)
