transformed-text-fill-pattern.html | Explore in Territory

<html><body><svg width="1000" height="600" xmlns="http://www.w3.org/2000/svg">
 <!-- The pattern needs to scale with the text in the same way it scales with rectangles. -->
 <defs>
   <pattern id="hatch" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
     <g style="fill:none; stroke:black; stroke-width:1">
       <path d="M0,0 l10,10"/>
       <path d="M10,0 l-10,10"/>
     </g>
   </pattern>
   <style type="text/css"><![CDATA[
    @font-face {
        font-family: Ahem;
        src: url(../../resources/Ahem.ttf);
    }
    .ahemblock {
        font-family: Ahem;
        font-size: 30px;
    }
    ]]>
   </style>
   <!-- Masking away the micro-gaps between the Ahem characters that may occur due to rounding
        which causes this test to fail on platforms that run reftests with zero tolerance. -->
   <clipPath id="clipHack">
     <rect x="3" y="0" width="24" height="600"></rect>
     <rect x="33" y="10" width="24" height="600"></rect>
     <rect x="63" y="0" width="24" height="600"></rect>
     <rect x="93" y="0" width="24" height="600"></rect>
     <rect x="123" y="0" width="24" height="600"></rect>
     <!-- This only works as a ref-test when clipping is a applied as a mask. Adding an empty text
          node in order to force mask-based clipping. -->
     <text></text>
   </clipPath>
 </defs>
 <g transform="scale(4)" clip-path="url(#clipHack)">
  <text class="ahemblock"  y="50" fill="url(#hatch)">AAAAA</text>
 </g>
 <g transform="scale(6)" clip-path="url(#clipHack)">
  <text class="ahemblock" y="90" x="0" fill="url(#hatch)">AAAAA</text>
 </g>
</svg>
</body>
</html>
chromium/third_party/blink/web_tests/svg/transforms/transformed-text-fill-pattern.html
