Layout Test platform/chromium/compositing/filters/background-filter-blur-outsets...
[WebKit-https.git] / LayoutTests / platform / chromium / compositing / filters / background-filter-blur-off-axis.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   body {
12     -webkit-perspective: 200px;
13   }
14   #blur {
15     -webkit-transform-style: preserve-3d;
16     -webkit-transform: rotateZ(-15deg) rotateY(90deg) rotateX(45deg) translate(70px, 60px);
17   }
18 </style>
19 <script type="text/javascript">
20   function setBlur() {
21     layoutTestController.display(); // Force compositor to start.
22     var blurNode = window.document.getElementById('blur');
23     window.internals.setBackgroundBlurOnNode(blurNode, 2);
24   }
25
26   if (window.layoutTestController) {
27     layoutTestController.dumpAsText(true);
28     if (window.internals)
29       window.onload = setBlur;
30   }
31 </script>
32 </head>
33
34 <body>
35 <!--
36    This verifies that the perspective of the clear layer (with black border) does not influence the blending of the
37    green box behind it. Also verifies that the blur is correctly clipped inside the transformed clear layer.
38 -->
39 <div id="object" class="composited green" style="position:absolute; left:50px; top:50px; width:200px; height:200px;"></div>
40 <div id="blur" style="position:absolute; left:30px; top:30px; width:240px; height:240px; border:1px solid black;"></div>
41 </body>
42 </html>