<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>