third_party/WebKit/LayoutTests/svg/transforms/transformed-text-fill-pattern.html

   1 <html><body><svg width="1000" height="600" xmlns="http://www.w3.org/2000/svg">
   2  <!-- The pattern needs to scale with the text in the same way it scales with rectangles. -->
   3  <defs>
   4    <pattern id="hatch" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10">
   5      <g style="fill:none; stroke:black; stroke-width:1">
   6        <path d="M0,0 l10,10"/>
   7        <path d="M10,0 l-10,10"/>
   8      </g>
   9    </pattern>
  10    <style type="text/css"><![CDATA[
  11     @font-face {
  12         font-family: Ahem;
  13         src: url(../../resources/Ahem.ttf);
  14     }
  15     .ahemblock {
  16         font-family: Ahem;
  17         font-size: 30px;
  18     }
  19     ]]>
  20    </style>
  21    <!-- Masking away the micro-gaps between the Ahem characters that may occur due to rounding
  22         which causes this test to fail on platforms that run reftests with zero tolerance. -->
  23    <clipPath id="clipHack">
  24      <rect x="3" y="0" width="24" height="600"></rect>
  25      <rect x="33" y="10" width="24" height="600"></rect>
  26      <rect x="63" y="0" width="24" height="600"></rect>
  27      <rect x="93" y="0" width="24" height="600"></rect>
  28      <rect x="123" y="0" width="24" height="600"></rect>
  29      <!-- This only works as a ref-test when clipping is a applied as a mask. Adding an empty text
  30           node in order to force mask-based clipping. -->
  31      <text></text>
  32    </clipPath>
  33  </defs>
  34  <g transform="scale(4)" clip-path="url(#clipHack)">
  35   <text class="ahemblock"  y="50" fill="url(#hatch)">AAAAA</text>
  36  </g>
  37  <g transform="scale(6)" clip-path="url(#clipHack)">
  38   <text class="ahemblock" y="90" x="0" fill="url(#hatch)">AAAAA</text>
  39  </g>
  40 </svg>
  41 </body>
  42 </html>