<!DOCTYPE html>
<!--
This tests verifies that filters repaint correctly in software mode when the filter property is changed.
You should see 5 green rectangles. First 4 of the rectangles have a blue shadow. There should be no red.
-->
<html>
<head>
<style>
.box {
height: 50px;
width: 50px;
margin-left: 20px;
margin-bottom: 60px;
background-color: green;
}
.software_from_none {
filter: drop-shadow(0px 0px 10px blue);
}
.software_from_none.before {
filter: none;
}
.software_from_software {
filter: drop-shadow(0px 0px 10px blue);
}
.software_from_software.before {
filter: drop-shadow(0px 0px 10px red);
}
.composited_from_software {
/* force a composited layer */
will-change: transform;
filter: drop-shadow(0px 0px 10px blue);
}
.composited_from_software.before {
transform: none;
filter: drop-shadow(0px 0px 10px red);
}
.software_from_composited {
transform: none;
filter: drop-shadow(0px 0px 10px blue);
}
.software_from_composited.before {
/* force a composited layer */
will-change: transform;
filter: drop-shadow(0px 0px 10px red);
}
.none_from_software {
filter: none;
}
.none_from_software.before {
filter: drop-shadow(0px 0px 10px red);
}
</style>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
function repaintTest()
{
runAfterLayoutAndPaint(function() {
var items = document.getElementsByClassName('before');
while (items.length)
items[0].classList.remove("before");
}, true);
}
</script>
</head>
<body onload="repaintTest()">
<div class="box software_from_none before"></div>
<div class="box software_from_software before"></div>
<div class="box composited_from_software before"></div>
<div class="box software_from_composited before"></div>
<div class="box none_from_software before"></div>
</body>
</html>