third_party/WebKit/LayoutTests/svg/as-background-image/svg-transformed-background.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 #circle {
   6   position: absolute;
   7   left: 10px;
   8   top: 40px;
   9   width: 40px;
  10   height: 20px;
  11   background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='10' fill='green' /></svg>");
  12   transform:scale(5);
  13   transform-origin:0 0;
  14   transform:scale(5);
  15   -webkit-transform-origin:0 0;
  16 }
  17 #ellipse {
  18   position: absolute;
  19   left: 210px;
  20   top: 40px;
  21   width: 80px;
  22   height: 10px;
  23   background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='10'><ellipse cx='20' cy='5' rx='20' ry='5' fill='green' /></svg>");
  24   transform:scale(2.5, 10);
  25   transform-origin:0 0;
  26   transform:scale(2.5, 10);
  27   -webkit-transform-origin:0 0;
  28 }
  29 </style>
  30 </head>
  31 <body>
  32 Test for WK110295: This test passes if there are four green circles with sharp edges.<br/>
  33 <div id="circle"></div>
  34 <div id="ellipse"></div>
  35 </body>
  36 </html>
  37