2a9ec3faf6b2e1326c2d893393cd0706efcc31be
[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     var blurNode = window.document.getElementById('blur');
15     window.internals.setBackgroundBlurOnNode(blurNode, 2);
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
29 <body>
30 <!--
31    The green box is entirely behind a layer with background blur, so it should appear blurred on its edges.
32   -->
33 <div class="composited green" style="position:absolute; left:50px; top:50px; width:200px; height:200px;"></div>
34 <div id="blur" style="position:absolute; left:30px; top:30px; width:240px; height:240px; border:1px solid white;"></div>
35 </body>
36 </html>