clipPath-content.svg

Enable keyboard shortcuts

Checkerboard

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait">

  <style>

    @font-face {

      font-family: Ahem;

      src: url(../../fonts/Ahem.ttf);

  </style>

  <defs>

    <clipPath id="c" x="0" y="0" width="600" height="400">

      <text x="20" y="100" style="font: 32px Ahem; white-space: pre">one</text>

    </clipPath>

  </defs>

  <rect x="0" y="0" width="600" height="400" fill="blue" clip-path="url(#c)"/>

  <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges">

    <rect x="20" y="73" width="96" height="32"/>

  </g>

  <script>

    function waitUntilFontLoaded() {

      var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");

      canvas.width = 100;

      canvas.height = 100;

      var ctx = canvas.getContext("2d");

      ctx.font = "100px Ahem";

      ctx.fillText("_", 0, 100);

      var img = ctx.getImageData(50, 50, 1, 1);

      if (img.data[3] == 255) {

        setTimeout(function() {

          document.documentElement.removeAttribute("class");

        }, 1);

      } else {

        setTimeout(waitUntilFontLoaded, 200);

    setTimeout(waitUntilFontLoaded, 200);

  </script>

</svg>