Compute accurate regions for touch-action
[WebKit-https.git] / LayoutTests / compositing / preserve-3d-toggle.html
1 <!DOCTYPE html>
2
3 <!--
4 Check that removing the preserve-3d attribute from a layer has the intended
5 effect. See https://bugs.webkit.org/show_bug.cgi?id=95732.
6
7 Passing criteria: green box shown without any visible red.
8 -->
9
10 <html>
11 <head>
12   <style type="text/css" media="screen">
13     body {
14       -webkit-perspective: 400px;
15     }
16
17     .transformed-container {
18       -webkit-transform-style: preserve-3d;
19       -webkit-transform: rotateX(90deg);
20     }
21
22     .reverse-transformed-child {
23       -webkit-transform: rotateX(-90deg);
24     }
25
26     .box {
27       width: 100px;
28       height: 100px;
29     }
30
31     .indicator {
32       background: red;
33     }
34
35     .test {
36       position: absolute;
37       -webkit-transform: translateZ(0);
38       background: green;
39     }
40   </style>
41
42   <script type="text/javascript">
43     function doTest() {
44       if (window.testRunner) {
45           window.testRunner.dumpAsText(true);
46           window.testRunner.waitUntilDone();
47       }
48       window.setTimeout(function() {
49           document.getElementById('container').style.webkitTransformStyle = 'flat';
50           if (window.testRunner)
51               window.testRunner.notifyDone();
52       }, 0);
53     }
54     window.addEventListener('load', doTest);
55   </script>
56 </head>
57
58 <body>
59   <div class="test box"></div>
60   <div id="container" class="transformed-container box">
61     <div class="reverse-transformed-child indicator box"></div>
62   </div>
63 </body>
64 </html>