third_party/WebKit/LayoutTests/compositing/perpendicular-layer-sorting.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4 <title>Perpendicular layer sorting</title>
   5
   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;
  13     }
  14
  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);
  22     }
  23
  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);
  33     }
  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>
  47
  48 </body>
  49 </html>