Fri, 16 Jan 2015 18:13:44 +0100
Integrate suggestion from review to improve consistency with existing code.
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 masking of transformed HTML elements</title>
8 <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769103 -->
9 <style type="text/css">
11 * { margin: 0; border: 0; padding: 0;}
13 div {
14 position: absolute;
15 left: 50px;
16 top: 50px;
17 width: 150px;
18 height: 150px;
19 transform: scale(2,2);
20 transform-origin: 0 0;
21 }
23 </style>
24 </head>
25 <body bgcolor="lime">
27 <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350"
28 style="display:block; position:absolute;">
29 <mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
30 <circle cx="0.5" cy="0.5" r="0.48" fill="white"/>
31 </mask>
32 <mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
33 <circle cx="0.5" cy="0.5" r="0.50" fill="white"/>
34 </mask>
35 <circle cx="200" cy="200" r="147" fill="red"/>
36 </svg>
38 <div style="background: red; mask: url(#mask1);"/>
39 <div style="background: lime; mask: url(#mask2);"/>
41 </body>
42 </html>