src/third_party/WebKit/LayoutTests/compositing/geometry/layer-due-to-layer-children-deep.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: 300px;
  12       height: 250px;
  13       padding: 20px;
  14       border: 1px solid black;
  15       transform: translate(0px, 0px);
  16     }
  17
  18     #child {
  19       position: relative;
  20       left: 10px;
  21       width: 250px;
  22       height: 220px;
  23       background-color: blue;
  24       transform: translate(0px, 0px);
  25     }
  26
  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);
  35     }
  36
  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);
  44     }
  45
  46   </style>
  47   <script type="text/javascript" charset="utf-8">
  48     if (window.testRunner)
  49       testRunner.waitUntilDone();
  50
  51     function doTest()
  52     {
  53       if (window.testRunner)
  54         testRunner.notifyDone();
  55     }
  56
  57     window.addEventListener('load', doTest, false);
  58   </script>
  59 </head>
  60
  61 <body>
  62
  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>
  79