<!DOCTYPE html>
<style>
#box {
width: 90px;
height: 90px;
background-color: green;
filter: drop-shadow(250px 50px 10px red);
}
#positioned {
position: absolute;
top: 100px;
left: 100px;
width: 50px;
height: 50px;
background-color: blue;
}
</style>
<!--
Tests paint invalidation of positioned object when its ancestor changes filter.
Passes if the all drop shadows change to green.
-->
<div id="box">
<div id="positioned"></div>
</div>
<script src="../resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
box.style.filter = 'drop-shadow(300px 100px 10px green)';
}
runRepaintAndPixelTest();
</script>