src/third_party/WebKit/LayoutTests/compositing/geometry/layer-due-to-layer-children.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6     body {
   7       position: relative;
   8     }
   9     .parent {
  10       position: relative;
  11       width: 200px;
  12       height: 150px;
  13       padding: 20px;
  14       border: 1px solid black;
  15       transform: translate(0px, 0px);
  16     }
  17
  18     .child {
  19       position: relative;
  20       left: 100px;
  21       width: 250px;
  22       height: 100px;
  23       background-color: green;
  24       transform: perspective(600px)  translate3D(-50px, 10px, 100px) rotateY(45deg);
  25     }
  26
  27   </style>
  28   <script type="text/javascript" charset="utf-8">
  29     if (window.testRunner)
  30       testRunner.waitUntilDone();
  31
  32     function doTest()
  33     {
  34       if (window.testRunner)
  35         testRunner.notifyDone();
  36     }
  37
  38     window.addEventListener('load', doTest, false);
  39   </script>
  40 </head>
  41
  42 <body>
  43
  44   <!-- Normally we skip making a compositing layer on a parent, even if its children are composited -->
  45   <!-- But if the parent has a 2D transform it should get a compositing layer -->
  46   <!-- Should see a green box in perspective. Layer tree should show nested layers-->
  47   <div id="parent" class="parent">
  48       This content is in the parent
  49       <div id="child" class="child">
  50           Box should have perspective
  51       </div>
  52   </div>
  53 </body>
  54 </html>
  55