|
1 <!-- |
|
2 Any copyright is dedicated to the Public Domain. |
|
3 http://creativecommons.org/publicdomain/zero/1.0/ |
|
4 --> |
|
5 <html xmlns="http://www.w3.org/1999/xhtml"> |
|
6 <head> |
|
7 <title>Test SVG patterning under transformed HTML elements</title> |
|
8 <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769970 --> |
|
9 <style type="text/css"> |
|
10 |
|
11 * { margin: 0; border: 0; padding: 0;} |
|
12 |
|
13 svg { |
|
14 display: block; |
|
15 position: absolute; |
|
16 } |
|
17 |
|
18 .scaled { |
|
19 left: 1px; |
|
20 top: 1px; |
|
21 width: 3px; |
|
22 height: 3px; |
|
23 transform: scale(100,100); |
|
24 transform-origin: 0 0; |
|
25 } |
|
26 |
|
27 </style> |
|
28 </head> |
|
29 <body bgcolor="lime"> |
|
30 |
|
31 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> |
|
32 <circle cx="151" cy="151" r="148" fill="red"/> |
|
33 </svg> |
|
34 |
|
35 <svg xmlns="http://www.w3.org/2000/svg" class="scaled"> |
|
36 <pattern id="redDot" width="1" height="1"> |
|
37 <circle cx="1.5" cy="1.5" r="1.48" fill="red"/> |
|
38 </pattern> |
|
39 <pattern id="limeDot" width="1" height="1"> |
|
40 <circle cx="1.5" cy="1.5" r="1.5" fill="lime"/> |
|
41 </pattern> |
|
42 <rect width="100%" height="100%" fill="url(#redDot)"/> |
|
43 <rect width="100%" height="100%" fill="url(#limeDot)"/> |
|
44 </svg> |
|
45 |
|
46 </body> |
|
47 </html> |