patterned-svg-under-transformed-html-02.xhtml (1145B)
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: 50px; 20 top: 50px; 21 width: 150px; 22 height: 150px; 23 transform: scale(2,2); 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="350" height="350"> 32 <circle cx="200" cy="200" r="147" 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="75" cy="75" r="74" fill="red"/> 38 </pattern> 39 <pattern id="limeDot" width="1" height="1"> 40 <circle cx="75" cy="75" r="75" 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>