| <!DOCTYPE html> |
| <body onload="run();"> |
| <svg width="450" height="350"> |
| <defs> |
| <pattern id="p1" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"> |
| <rect width="0.25" height="0.25"/> |
| <rect x="0.25" y="0.25" width="0.25" height="0.25"/> |
| </pattern> |
| <pattern id="p2a" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"> |
| <rect width="0.25" height="0.25"/> |
| <rect x="0.25" y="0.25" width="0.25" height="0.25"/> |
| </pattern> |
| <pattern id="p2b" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"> |
| <rect width="0.25" height="0.25"/> |
| <rect x="0.25" y="0.25" width="0.25" height="0.25"/> |
| </pattern> |
| <pattern id="p3" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"> |
| <rect width="0.25" height="0.25"/> |
| <rect x="0.25" y="0.25" width="0.25" height="0.25"/> |
| </pattern> |
| <pattern id="p4" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"> |
| <rect width="0.25" height="0.25"/> |
| <rect x="0.25" y="0.25" width="0.25" height="0.25"/> |
| </pattern> |
| <pattern id="p5" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"> |
| <rect width="0.25" height="0.25"/> |
| <rect x="0.25" y="0.25" width="0.25" height="0.25"/> |
| </pattern> |
| <pattern id="p6" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"> |
| <rect width="0.25" height="0.25"/> |
| <rect x="0.25" y="0.25" width="0.25" height="0.25"/> |
| </pattern> |
| <pattern id="p7" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"> |
| <rect width="0.25" height="0.25"/> |
| <rect x="0.25" y="0.25" width="0.25" height="0.25"/> |
| </pattern> |
| <pattern id="p8" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"> |
| <rect width="0.25" height="0.25"/> |
| <rect x="0.25" y="0.25" width="0.25" height="0.25"/> |
| </pattern> |
| <pattern id="p9a" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"/> |
| <pattern id="p9b" xlink:href="#p9a"> |
| <rect width="0.25" height="0.25"/> |
| <rect x="0.25" y="0.25" width="0.25" height="0.25"/> |
| </pattern> |
| <pattern id="p10a" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"/> |
| <pattern id="p10b" x="0" y="0" width="0.25" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"/> |
| <pattern id="p10c" xlink:href="#p10a"> |
| <rect width="0.25" height="0.25"/> |
| <rect x="0.25" y="0.25" width="0.25" height="0.25"/> |
| </pattern> |
| </defs> |
| |
| <rect id="r1" x="50" y="50" width="50" height="50"/> |
| <rect id="r2" x="150" y="50" width="50" height="50" fill="url(#p2a)"/> |
| <rect id="r3" x="250" y="50" width="50" height="50" fill="url(#p3)"/> |
| <rect id="r4" x="350" y="50" width="50" height="50" fill="url(#p4)"/> |
| <rect id="r5" x="50" y="150" width="50" height="50" fill="url(#p5)"/> |
| <rect id="r6" x="150" y="150" width="50" height="50" fill="url(#p6)"/> |
| <rect id="r7" x="250" y="150" width="50" height="50" fill="url(#p7)"/> |
| <rect id="r8" x="350" y="150" width="50" height="50" fill="url(#p8)"/> |
| <rect id="r9" x="50" y="250" width="50" height="50" fill="url(#p9b)"/> |
| <rect id="r10" x="150" y="250" width="50" height="50" fill="url(#p10c)"/> |
| </svg> |
| <script> |
| function run() { |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| requestAnimationFrame(function() { |
| r1.setAttribute("fill", "url(#p1)"); // change from no pattern to some pattern |
| r2.setAttribute("fill", "url(#p2b)"); // change from one pattern to another |
| r3.removeAttribute("fill"); // change from a pattern to no pattern |
| r4.setAttribute("fill-opacity", "0.5"); // change style of pattern resource client |
| r5.setAttribute("width", "75"); // change layout of pattern resource client |
| p6.setAttribute("width", "0.25"); // change pattern attribute |
| p7.firstElementChild.setAttribute("fill", "blue"); // change style of pattern contents |
| p8.firstElementChild.setAttribute("width", "0.5"); // change other attribute of pattern contents |
| p9a.setAttribute("width", "0.25"); // change attribute on linked pattern |
| p10c.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#p10b"); // change xlink:href on pattern |
| testRunner.notifyDone(); |
| }); |
| } |
| } |
| </script> |
