<svg id="svg" width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="mask">
      <rect width="25%" height="25%" fill="white"/>
    </mask>

    <clipPath id="clip">
      <rect x="27%" width="25%" height="25%"/>
    </clipPath>

    <pattern id="pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="800" height="800">
      <rect x="54%" width="25%" height="25%" fill="green"/>
    </pattern>
  </defs>

  <rect width="25%" height="25%" fill="red"/>
  <rect width="800" height="800" fill="green" mask="url(#mask)"/>

  <rect x="27%" width="25%" height="25%" fill="red"/>
  <rect width="800" height="800" fill="green" clip-path="url(#clip)"/>

  <rect x="54%" width="25%" height="25%" fill="red"/>
  <rect width="800" height="800" fill="url(#pattern)"/>

  <script>
    var delay=250;
    if (window.testRunner) {
      delay=0;
      testRunner.waitUntilDone();
    }

    setTimeout(function() {
      document.getElementById('svg').setAttribute('width', '400');
      document.getElementById('svg').setAttribute('height', '400');

      if (window.testRunner)
        testRunner.notifyDone();
    }, delay);
  </script>
</svg>