5a4df443bf1994df0cd4b4be880c0fe20edfd4d9
[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     var blurNode = window.document.getElementById('blur');
22     window.internals.setBackgroundBlurOnNode(blurNode, 2);
23     layoutTestController.notifyDone();
24   }
25
26   if (window.layoutTestController) {
27     if (window.internals) {
28       layoutTestController.waitUntilDone();
29       window.setTimeout(setBlur, 0);
30     }
31     layoutTestController.dumpAsText(true);
32   }
33 </script>
34 </head>
35
36 <body>
37 <!--
38    This verifies that the perspective of the clear layer (with black border) does not influence the blending of the
39    green box behind it. Also verifies that the blur is correctly clipped inside the transformed clear layer.
40 -->
41 <div id="object" class="composited green" style="position:absolute; left:50px; top:50px; width:200px; height:200px;"></div>
42 <div id="blur" style="position:absolute; left:30px; top:30px; width:240px; height:240px; border:1px solid black;"></div>
43 </body>
44 </html>