Layout Test platform/chromium/compositing/filters/background-filter-blur-outsets...
[WebKit-https.git] / LayoutTests / platform / chromium / compositing / filters / background-filter-blur.html
1 <!DOCTYPE html>
2 <html><head>
3 <title>Background filter blur test.</title>
4 <style type="text/css">
5   .composited {
6     -webkit-transform: translateZ(0);
7   }
8   .green {
9     background-color: green;
10   }
11 </style>
12 <script type="text/javascript">
13   function setBlur() {
14     layoutTestController.display(); // Force compositor to start.
15     var blurNode = window.document.getElementById('blur');
16     window.internals.setBackgroundBlurOnNode(blurNode, 2);
17   }
18
19   if (window.layoutTestController) {
20     layoutTestController.dumpAsText(true);
21     if (window.internals)
22       window.onload = setBlur;
23   }
24 </script>
25 </head>
26
27 <body>
28 <!--
29    The green box is entirely behind a layer with background blur, so it should appear blurred on its edges.
30   -->
31 <div class="composited green" style="position:absolute; left:50px; top:50px; width:200px; height:200px;"></div>
32 <div id="blur" style="position:absolute; left:30px; top:30px; width:240px; height:240px; border:1px solid white;"></div>
33 </body>
34 </html>