f8793f25690c8416b2ae6567e5408142e007d8c5
[WebKit-https.git] / LayoutTests / platform / chromium / compositing / filters / background-filter-blur-outsets.html
1 <!DOCTYPE html>
2 <html><head>
3 <title>Background filter blur outsets test.</title>
4 <style type="text/css">
5   .composited {
6     -webkit-transform: translateZ(0);
7   }
8   .green-border {
9     border: 10px solid green;
10   }
11 </style>
12 <script type="text/javascript">
13   function setBlur() {
14     var blurNode = window.document.getElementById('blur');
15     window.internals.setBackgroundBlurOnNode(blurNode, 10);
16     layoutTestController.notifyDone();
17   }
18
19   if (window.layoutTestController) {
20     if (window.internals) {
21       window.setTimeout(setBlur, 0);
22       layoutTestController.waitUntilDone();
23     }
24     layoutTestController.dumpAsText(true);
25   }
26 </script>
27 </head>
28 <body>
29 <!--
30    The green border is outside the layer with background blur, but the background blur should use pixels from outside
31    its layer borders, up to the radius of the blur effect. So the border should be blurred underneath the top layer
32    causing the inside of the border to be blurred.
33   -->
34 <div class="composited green-border" style="position:absolute; left:50px; top:50px; width:200px; height:200px;"></div>
35 <div id="blur" style="position:absolute; left:59px; top:59px; width:200px; height:200px; border:1px solid black;"></div>
36 </body>
37 </html>