blob: 696d0bb0baeacab5933f8e1b2c1f543c7f727d01 [file] [log] [blame]
<!DOCTYPE html>
<!-- This is a regression test for http://crbug.com/415106. It exercises partially repainting an element with background-image and a CSS filter to ensure that the background-image is not clipped at record time, and is instead clipped (correctly) at playback time (to accommodate filter outsets).-->
<!-- You should see a 50x50 green box over a blurred background, with no white 100x100 box bleeding into the background image.-->
<html>
<head>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
function runTest() {
function shrinkBox() {
var box = document.getElementsByClassName("box")[0];
box.style.width = "50px";
box.style.height = "50px";
}
runAfterLayoutAndPaint(shrinkBox, true);
}
</script>
<style>
.bg {
position: absolute;
left: 200px;
top: 0px;
width: 400px;
height: 300px;
background-image: url(resources/reference.png);
filter: blur(8px);
}
.box {
position: absolute;
left: 300px;
top: 50px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body onload="runTest()">
<div class="bg"></div>
<div class="box"></div>
</body>
</html>