<!DOCTYPE HTML>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<svg height="300" width="300">
<defs>
<filter height="100px" width="100px" y="-1" x="-1" id="filter">
<feOffset dy="2" dx="2" in="SourceGraphic" result="offOut"></feOffset>
</filter>
</defs>
<rect x="50" y="20" width="20" height="20" fill="red"></rect>
<rect filter="url(#filter)" width="100" height="100" fill="green"></rect>
<rect id="invalidate" x="20" y="20" width="20" height="20" fill="red"></rect>
</svg>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
runAfterLayoutAndPaint(function() {
document.getElementById('invalidate').setAttribute('fill', 'green');
runAfterLayoutAndPaint(function() {
if (window.testRunner)
testRunner.notifyDone();
});
});
</script>