resources-css-scaled.html | Explore in Territory

<!DOCTYPE html>
<html>
<body>

<!-- Test for https://bugs.webkit.org/show_bug.cgi?id=111587 -->
<!-- Passes if all circles are drawn at high resolution, without pixelation -->

<div style="position: relative; left: 27px; transform: scale(5); -webkit-transform-origin: 0 0; width: 100px;">
<div style="transform: scale(2); -webkit-transform-origin: 0 0; width: 50px;">
  <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="pattern" width="10" height="10" patternUnits="userSpaceOnUse">
        <circle cx="5" cy="5" r="5" fill="green"/>
      </pattern>

      <mask id="mask">
        <circle cx="5" cy="5" r="5" fill="white"/>
      </mask>

      <clipPath id="clip">
        <circle cx="5" cy="5" r="5"/>
        <!-- multiple shapes to force mask-based clipping -->
        <circle cx="5" cy="5" r="5"/>
      </clipPath>

      <filter id="filter">
        <feOffset dx="0" dy="0"/>
      </filter>
    </defs>

    <circle cx="5" cy="5" r="5" fill="green"/>

    <g transform="translate(30)">
      <rect width="10" height="10" fill="url(#pattern)"></rect>
    </g>

    <g transform="translate(15 15)">
      <rect width="10" height="10" fill="green" mask="url(#mask)"/>
    </g>

    <g transform="translate(0 30)">
      <rect width="10" height="10" fill="green" clip-path="url(#clip)"/>
    </g>

    <g transform="translate(30 30)">
      <circle cx="5" cy="5" r="5" fill="green" filter="url(#filter)"/>
    </g>
  </svg>
</div>
</div>
</body>
</html>
chromium/third_party/blink/web_tests/svg/custom/resources-css-scaled.html
