| <!DOCTYPE html> |
| <body onload="run();"> |
| <svg width="450" height="250"> |
| <defs> |
| <mask id="m1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> |
| <rect width="0.5" height="0.5" fill="white"/> |
| </mask> |
| <mask id="m2a" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> |
| <rect width="0.5" height="0.5" fill="white"/> |
| </mask> |
| <mask id="m2b" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> |
| <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="white"/> |
| </mask> |
| <mask id="m3" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> |
| <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="white"/> |
| </mask> |
| <mask id="m4" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> |
| <rect width="0.5" height="0.5" fill="white"/> |
| </mask> |
| <mask id="m5" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> |
| <rect width="0.5" height="0.5" fill="white"/> |
| </mask> |
| <mask id="m6" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> |
| <rect width="0.5" height="0.5" fill="white"/> |
| </mask> |
| <mask id="m7" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> |
| <rect width="0.5" height="0.5" fill="white"/> |
| </mask> |
| <mask id="m8" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> |
| <rect width="0.5" height="0.5" fill="white"/> |
| </mask> |
| </defs> |
| |
| <rect id="r1" x="50" y="50" width="50" height="50"/> |
| <rect id="r2" x="150" y="50" width="50" height="50" mask="url(#m2a)"/> |
| <rect id="r3" x="250" y="50" width="50" height="50" mask="url(#m3)"/> |
| <rect id="r4" x="350" y="50" width="50" height="50" mask="url(#m4)"/> |
| <rect id="r5" x="50" y="150" width="50" height="50" mask="url(#m5)"/> |
| <rect id="r6" x="150" y="150" width="50" height="50" mask="url(#m6)"/> |
| <rect id="r7" x="250" y="150" width="50" height="50" mask="url(#m7)"/> |
| <rect id="r8" x="350" y="150" width="50" height="50" mask="url(#m8)"/> |
| </svg> |
| <script> |
| function run() { |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| requestAnimationFrame(function() { |
| r1.setAttribute("mask", "url(#m1)"); // change from no mask to some mask |
| r2.setAttribute("mask", "url(#m2b)"); // change from one mask to another |
| r3.removeAttribute("mask"); // change from a mask to no mask |
| r4.setAttribute("fill", "blue"); // change style of mask resource client |
| r5.setAttribute("height", "75"); // change layout of mask resource client |
| m6.setAttribute("x", "0.5"); // change mask attribute |
| m7.firstElementChild.setAttribute("fill", "#808080"); // change style of mask contents |
| m8.firstElementChild.setAttribute("x", "0.5"); // change layout of mask contents |
| testRunner.notifyDone(); |
| }); |
| } |
| } |
| </script> |
