<!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test SVG patterning under transformed HTML elements</title> <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769970 --> <style type="text/css"> * { margin: 0; border: 0; padding: 0;} svg { display: block; position: absolute; } .scaled { left: 50px; top: 50px; width: 150px; height: 150px; transform: scale(2,2); transform-origin: 0 0; } </style> </head> <body bgcolor="lime"> <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350"> <circle cx="200" cy="200" r="147" fill="red"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="scaled"> <pattern id="redDot" width="1" height="1"> <circle cx="75" cy="75" r="74" fill="red"/> </pattern> <pattern id="limeDot" width="1" height="1"> <circle cx="75" cy="75" r="75" fill="lime"/> </pattern> <rect width="100%" height="100%" fill="url(#redDot)"/> <rect width="100%" height="100%" fill="url(#limeDot)"/> </svg> </body> </html>