third_party/WebKit/LayoutTests/compositing/geometry/layer-due-to-layer-children-deep-switch.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     }
  44
  45   </style>
  46   <script type="text/javascript" charset="utf-8">
  47     if (window.testRunner) {
  48         testRunner.dumpAsText();
  49         testRunner.waitUntilDone();
  50     }
  51     var text = "";
  52     function showTree(which)
  53     {
  54         setTimeout(function() {
  55             if (window.testRunner) {
  56                 text += "\n" + which + " dump layer tree:\n";
  57                 text += window.internals.layerTreeAsText(document);
  58                 document.getElementById('layers').innerText = text;
  59             }
  60         }, 0);
  61     }
  62
  63     function doTest()
  64     {
  65         if (window.testRunner)
  66             //document.getElementById('layers').innerText = "";
  67         showTree("First");
  68
  69         //Put child in compositing mode
  70         setTimeout(function() {
  71             document.getElementById("greatgrandchild").style.webkitTransform = "perspective(400)  translate3D(-30px, 30px, 100px) rotateY(60deg)";
  72             showTree("Second");
  73
  74             // Take it back out of compositing mode
  75             setTimeout(function() {
  76                 document.getElementById("greatgrandchild").style.webkitTransform = "";
  77                 showTree("Third");
  78
  79                 setTimeout(function() {
  80                     testRunner.notifyDone();
  81                 }, 0);
  82             }, 100);
  83         }, 100);
  84     }
  85
  86     window.addEventListener('load', doTest, false);
  87   </script>
  88 </head>
  89
  90 <body>
  91
  92   <!-- Normally we skip making a compositing layer on a parent, even if its children are composited -->
  93   <!-- But if the parent has a 2D transform it should get a compositing layer -->
  94   <!-- Here we test that the entire hierarchy gets layers when some elements are transformed and others arent -->
  95   <!-- Should see a box containing a blue box containing a rotated yellow box containing a green box in perspective -->
  96   <div id="parent">
  97       This content is in the parent
  98       <div id="child">
  99           <div id="grandchild">
 100               <div id="greatgrandchild">
 101                   Box should switch between perspective and flat
 102               </div>
 103           </div>
 104       </div>
 105   </div>
 106
 107   <pre id="layers">Layer tree goes here in DRT</pre>
 108 </body>
 109 </html>
 110