patterned-svg-under-transformed-html-01.xhtml (1152B)
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>