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