<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="runRepaintAndPixelTest()">
<script xlink:href="../../../resources/run-after-layout-and-paint.js"></script>
<script xlink:href="../resources/text-based-repaint.js"/>
<script>
window.testIsAsync = true;
function draw(x, y) {
var maskrect = document.getElementById("maskRect");
maskrect.setAttribute("transform", "translate(" + x + "," + y + ")");
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute("x", x);
rect.setAttribute("y", y);
rect.setAttribute("width", 453);
rect.setAttribute("height", 299);
rect.setAttribute("fill", "green");
rect.setAttribute("mask", "url(#mask)");
var root = document.getElementById("root");
while (root.firstChild) {
root.removeChild(root.firstChild);
}
root.appendChild(rect);
}
function repaintTest() {
draw(150, 50);
runAfterLayoutAndPaint(function() {
draw(50, 50);
finishRepaintTest();
});
}
</script>
<defs>
<mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<rect id="maskRect" x="50" y="50" width="460" height="316" fill="white" />
</mask>
</defs>
<g id="root">
<rect x="50" y="50" width="453" height="299" fill="green" mask="url(#mask)"/>
</g>
</svg>