blob: 4e9d1dea033c8d286310448cfedee7a5d0936970 [file] [log] [blame]
enne@google.com7cbb9be2011-06-21 23:52:04 +00001<html>
2<head>
3<style>
4 #container {
5 -webkit-transform: translate(-10px, 0px);
6 }
7
8 #indicator {
9 position: absolute;
10 left: 15px;
11 top: 0px;
12 height: 256px;
13 width: 256px;
14 background-color: red;
15 }
16
17 #green {
18 position: absolute;
19 left: 0px;
20 top: 0px;
21 width: 300px;
22 height: 300px;
23 background-color: green;
24 }
25
26 #composited {
27 position: absolute;
28 left: 400px;
29 -webkit-transform:translateZ(0);
30 }
31
32 #layertree {
33 position: absolute;
34 left: 10000px;
35 top: 0px;
36 }
37
38 body {
39 overflow: hidden;
40 }
41
42</style>
43
44<script>
rniwa@webkit.org18904132012-06-11 18:29:22 +000045 if (window.testRunner) {
46 testRunner.dumpAsText(true);
enne@google.com7cbb9be2011-06-21 23:52:04 +000047 window.addEventListener('load', function() {
simon.fraser@apple.comf1aba122012-10-08 21:55:10 +000048 document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
enne@google.com7cbb9be2011-06-21 23:52:04 +000049 }, false);
50 }
51</script>
52
53<body>
54 <div id="container">
55 <!-- This red square should not be visible -->
56 <div id="indicator"></div>
57 <div id="composited"></div>
58 </div>
59
60 <!-- This green square should render completely on top of the red one -->
61 <div id="green"></div>
62
63 <pre id="layertree"></pre>
64</body>
65</html>