third_party/WebKit/LayoutTests/svg/custom/masking-clipping-hidpi.svg

   1 <svg xmlns="http://www.w3.org/2000/svg" onload="startTest()">
   2     <script>
   3     function startTest() {
   4         if (!window.testRunner)
   5             return;
   6
   7         testRunner.waitUntilDone();
   8         testRunner.setBackingScaleFactor(2, finishTest);
   9     }
  10
  11     function finishTest() {
  12         setTimeout(function () { testRunner.notifyDone(); }, 0);
  13     }
  14     </script>
  15     <style>
  16         text {
  17             -webkit-font-smoothing: antialiased;
  18         }
  19     </style>
  20
  21     <defs>
  22         <mask id="textMask">
  23             <rect width='100%' height='100%' fill='white'/>
  24             <text width='100%' height='100%' x='0' y='12'>This text should be sharp.</text>
  25         </mask>
  26     </defs>
  27     <rect width='200' height='100' fill='black'/>
  28     <rect width='200' height='100' fill='white' mask="url(#textMask)"/>
  29
  30     <defs>
  31         <linearGradient id="blackGradient" x1="0%" y1="0%" x2="100%" y2="0%">
  32             <stop offset="0%" style="stop-color:rgb(0,0,0);"/>
  33             <stop offset="100%" style="stop-color:rgb(0,0,0);"/>
  34         </linearGradient>
  35     </defs>
  36     <text x='0' y='36' fill="url(#blackGradient)">This text and the circles should also be sharp.</text>
  37
  38     <defs>
  39         <clipPath id="circleClipPath" clipPathUnits="objectBoundingBox">
  40             <circle cx="0.25" cy="0.25" r="0.20"/>
  41             <circle cx="0.25" cy="0.75" r="0.20"/>
  42         </clipPath>
  43     </defs>
  44     <rect x="0" y="60" width="100" height="100" clip-path="url(#circleClipPath)"/>
  45
  46     <defs>
  47         <pattern id="Pattern" width="1" height="1">
  48             <circle cx="25" cy="25" r="20" fill="url(#blackGradient)"/>
  49         </pattern>
  50     </defs>
  51     <rect fill="url(#Pattern)" x="0" y="162" width="200" height="200"/>
  52 </svg>