| <!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> |