OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 #circle { | 5 #circle { |
6 position: absolute; | 6 position: absolute; |
7 left: 10px; | 7 left: 10px; |
8 top: 40px; | 8 top: 40px; |
9 width: 40px; | 9 width: 40px; |
10 height: 20px; | 10 height: 20px; |
11 background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/sv
g' width='20' height='20'><circle cx='10' cy='10' r='10' fill='green' /></svg>")
; | 11 background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/sv
g' width='20' height='20'><circle cx='10' cy='10' r='10' fill='green' /></svg>")
; |
12 transform:scale(5); | 12 transform:scale(5); |
13 transform-origin:0 0; | 13 transform-origin:0 0; |
14 -webkit-transform:scale(5); | 14 transform:scale(5); |
15 -webkit-transform-origin:0 0; | 15 -webkit-transform-origin:0 0; |
16 } | 16 } |
17 #ellipse { | 17 #ellipse { |
18 position: absolute; | 18 position: absolute; |
19 left: 210px; | 19 left: 210px; |
20 top: 40px; | 20 top: 40px; |
21 width: 80px; | 21 width: 80px; |
22 height: 10px; | 22 height: 10px; |
23 background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/sv
g' width='40' height='10'><ellipse cx='20' cy='5' rx='20' ry='5' fill='green' />
</svg>"); | 23 background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/sv
g' width='40' height='10'><ellipse cx='20' cy='5' rx='20' ry='5' fill='green' />
</svg>"); |
24 transform:scale(2.5, 10); | 24 transform:scale(2.5, 10); |
25 transform-origin:0 0; | 25 transform-origin:0 0; |
26 -webkit-transform:scale(2.5, 10); | 26 transform:scale(2.5, 10); |
27 -webkit-transform-origin:0 0; | 27 -webkit-transform-origin:0 0; |
28 } | 28 } |
29 </style> | 29 </style> |
30 </head> | 30 </head> |
31 <body> | 31 <body> |
32 Test for WK110295: This test passes if there are four green circles with sharp e
dges.<br/> | 32 Test for WK110295: This test passes if there are four green circles with sharp e
dges.<br/> |
33 <div id="circle"></div> | 33 <div id="circle"></div> |
34 <div id="ellipse"></div> | 34 <div id="ellipse"></div> |
35 </body> | 35 </body> |
36 </html> | 36 </html> |
37 | 37 |
OLD | NEW |