third_party/WebKit/LayoutTests/css3/blending/svg-isolation-add-clipper-text.html

   1 <!DOCTYPE HTML>
   2 <html>
   3     <script>
   4         if (window.testRunner)
   5             window.testRunner.waitUntilDone();
   6         function addIsolation() {
   7             var isolator = document.getElementById('isolator');
   8             isolator.setAttribute('clip-path', 'url(#Clipper)');
   9             if (window.testRunner)
  10                 window.testRunner.notifyDone();
  11         }
  12         window.addEventListener('load', function () {
  13             window.setTimeout(addIsolation, 10);
  14         }, false);
  15     </script>
  16     <body>
  17         <p>The test passes if you see a green square.</p>
  18         <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="60px">
  19             <defs>
  20                 <clipPath id="Clipper">
  21                     <text x="0" y="45" font-size="60" font-weight="bold">Clipping text!</text>
  22                 </clipPath>
  23             </defs>
  24             <g id="isolator">
  25                 <rect x="0" y="0" width="400" height="60" style="fill: green; mix-blend-mode: difference;"/>
  26             </g>
  27         </svg>
  28     </body>
  29 </html>