OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <style> | 2 <style> |
3 div { | 3 div { |
4 width: 100px; | 4 width: 100px; |
5 height: 100px; | 5 height: 100px; |
6 position: absolute; | 6 position: absolute; |
7 transform-origin: 0% 0%; | 7 transform-origin: 0% 0%; |
8 offset-anchor: 0% 0%; | 8 offset-anchor: 0% 0%; |
9 } | 9 } |
10 | 10 |
11 /* Note the order of the scaling operation affects the path coordinates */ | 11 /* Note the order of the scaling operation affects the path coordinates */ |
12 #target { | 12 #target { |
13 background-color: red; | 13 background-color: red; |
14 translate: 200px 10px; | 14 translate: 200px 10px; |
15 rotate: 90deg; | 15 rotate: 90deg; |
16 scale: 1 2; | 16 scale: 1 2; |
17 motion: path("m 0 0 v -20 h 20") 0rad 100%; | 17 offset: path("m 0 0 v -20 h 20") 100% 0rad; |
18 } | 18 } |
19 #expected { | 19 #expected { |
20 background-color: green; | 20 background-color: green; |
21 transform: translate(240px, 30px) rotate(90deg) scale(1, 2); | 21 transform: translate(240px, 30px) rotate(90deg) scale(1, 2); |
22 } | 22 } |
23 </style> | 23 </style> |
24 | 24 |
25 <p>There should be no red color boxes</p> | 25 <p>There should be no red color boxes</p> |
26 <div id="target"></div> | 26 <div id="target"></div> |
27 <div id="expected"></div> | 27 <div id="expected"></div> |
OLD | NEW |