third_party/WebKit/LayoutTests/svg/custom/resources-css-scaled.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4
   5 <!-- Test for https://bugs.webkit.org/show_bug.cgi?id=111587 -->
   6 <!-- Passes if all circles are drawn at high resolution, without pixelation -->
   7
   8 <div style="position: relative; left: 27px; transform: scale(5); -webkit-transform-origin: 0 0; width: 100px;">
   9 <div style="transform: scale(2); -webkit-transform-origin: 0 0; width: 50px;">
  10   <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
  11     <defs>
  12       <pattern id="pattern" width="10" height="10" patternUnits="userSpaceOnUse">
  13         <circle cx="5" cy="5" r="5" fill="green"/>
  14       </pattern>
  15
  16       <mask id="mask">
  17         <circle cx="5" cy="5" r="5" fill="white"/>
  18       </mask>
  19
  20       <clipPath id="clip">
  21         <circle cx="5" cy="5" r="5"/>
  22         <!-- multiple shapes to force mask-based clipping -->
  23         <circle cx="5" cy="5" r="5"/>
  24       </clipPath>
  25
  26       <filter id="filter">
  27         <feOffset dx="0" dy="0"/>
  28       </filter>
  29     </defs>
  30
  31     <circle cx="5" cy="5" r="5" fill="green"/>
  32
  33     <g transform="translate(30)">
  34       <rect width="10" height="10" fill="url(#pattern)"></rect>
  35     </g>
  36
  37     <g transform="translate(15 15)">
  38       <rect width="10" height="10" fill="green" mask="url(#mask)"/>
  39     </g>
  40
  41     <g transform="translate(0 30)">
  42       <rect width="10" height="10" fill="green" clip-path="url(#clip)"/>
  43     </g>
  44
  45     <g transform="translate(30 30)">
  46       <circle cx="5" cy="5" r="5" fill="green" filter="url(#filter)"/>
  47     </g>
  48   </svg>
  49 </div>
  50 </div>
  51 </body>
  52 </html>