|
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 clipPath clipping of transformed HTML elements</title> |
|
8 <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773197 --> |
|
9 <style type="text/css"> |
|
10 |
|
11 * { margin: 0; border: 0; padding: 0;} |
|
12 |
|
13 div { |
|
14 position: absolute; |
|
15 left: 1px; |
|
16 top: 1px; |
|
17 width: 3px; |
|
18 height: 3px; |
|
19 transform: scale(100,100); |
|
20 transform-origin: 0 0; |
|
21 } |
|
22 |
|
23 </style> |
|
24 </head> |
|
25 <body bgcolor="lime"> |
|
26 |
|
27 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" |
|
28 style="display:block; position:absolute;"> |
|
29 <clipPath id="cp1" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox"> |
|
30 <circle cx="0.5" cy="0.5" r="0.01" fill="white"/> |
|
31 <circle cx="0.5" cy="0.5" r="0.48" fill="white"/> |
|
32 </clipPath> |
|
33 <clipPath id="cp2" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox"> |
|
34 <circle cx="0.5" cy="0.5" r="0.01" fill="white"/> |
|
35 <circle cx="0.5" cy="0.5" r="0.50" fill="white"/> |
|
36 </clipPath> |
|
37 <circle cx="150" cy="150" r="147" fill="red"/> |
|
38 </svg> |
|
39 |
|
40 <div style="background: red; clip-path: url(#cp1);"/> |
|
41 <div style="background: lime; clip-path: url(#cp2);"/> |
|
42 |
|
43 </body> |
|
44 </html> |