Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / compositing / geometry / layer-due-to-layer-children-deep.html
bloba538ad8108c9fa1828f220987c8d35114e15ee7b
1 <!DOCTYPE html>
3 <html>
4 <head>
5 <style type="text/css" media="screen">
6 body {
7 position: relative;
9 #parent {
10 position: relative;
11 width: 300px;
12 height: 250px;
13 padding: 20px;
14 border: 1px solid black;
15 transform: translate(0px, 0px);
18 #child {
19 position: relative;
20 left: 10px;
21 width: 250px;
22 height: 220px;
23 background-color: blue;
24 transform: translate(0px, 0px);
27 #grandchild {
28 position: relative;
29 top: 10px;
30 left: 10px;
31 width: 200px;
32 height: 200px;
33 background-color: yellow;
34 transform: rotate(30deg);
37 #greatgrandchild {
38 position: relative;
39 left: 100px;
40 width: 250px;
41 height: 100px;
42 background-color: green;
43 transform: perspective(400px) translate3D(-30px, 30px, 100px) rotateY(60deg);
46 </style>
47 <script type="text/javascript" charset="utf-8">
48 if (window.testRunner)
49 testRunner.waitUntilDone();
51 function doTest()
53 if (window.testRunner)
54 testRunner.notifyDone();
57 window.addEventListener('load', doTest, false);
58 </script>
59 </head>
61 <body>
63 <!-- Normally we skip making a compositing layer on a parent, even if its children are composited -->
64 <!-- But if the parent has a 2D transform it should get a compositing layer -->
65 <!-- Here we test that the entire hierarchy gets layers when some elements are transformed and others arent -->
66 <!-- Should see a box containing a blue box containing a rotated yellow box containing a green box in perspective -->
67 <div id="parent">
68 This content is in the parent
69 <div id="child">
70 <div id="grandchild">
71 <div id="greatgrandchild">
72 Box should have perspective
73 </div>
74 </div>
75 </div>
76 </div>
77 </body>
78 </html>