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