Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / compositing / perpendicular-layer-sorting.html
blob9cf87267028c1329394db7bfbc87fbc0fe3cf171
1 <!DOCTYPE>
2 <html>
3 <head>
4 <title>Perpendicular layer sorting</title>
6 <style type="text/css" media="screen">
7 #container {
8 position: relative;
9 height: 300px;
10 width: 300px;
11 margin: 50px 100px;
12 -webkit-perspective: 500;
15 #parent {
16 margin: 10px;
17 width: 280px;
18 height: 280px;
19 background-color: purple;
20 -webkit-transform-style: preserve-3d;
21 transform: rotateY(20deg);
24 #parent > div {
25 position: absolute;
26 top: 40px;
27 left: 40px;
28 width: 200px;
29 height: 400px;
30 padding: 10px;
31 background-color: green;
32 transform: translateY(50px) translateZ(10px) rotateX(90deg);
34 </style>
35 <script type="text/javascript" charset="utf-8">
36 if (window.testRunner)
37 testRunner.dumpAsTextWithPixelResults();
38 </script>
39 </head>
40 <body>
41 <!-- The green layer should not overlap the purple layer -->
42 <div id="container">
43 <div id="parent">
44 <div></div>
45 </div>
46 </div>
48 </body>
49 </html>