third_party/WebKit/LayoutTests/compositing/geometry/layer-due-to-layer-children-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: 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     }
  25
  26   </style>
  27   <script type="text/javascript" charset="utf-8">
  28     if (window.testRunner) {
  29         testRunner.dumpAsText();
  30         testRunner.waitUntilDone();
  31     }
  32     var text = "";
  33     function showTree(which)
  34     {
  35         setTimeout(function() {
  36             if (window.testRunner) {
  37                 text += "\n" + which + " dump layer tree:\n";
  38                 text += window.internals.layerTreeAsText(document);
  39                 document.getElementById('layers').innerText = text;
  40             }
  41         }, 0);
  42     }
  43
  44     function doTest()
  45     {
  46         if (window.testRunner)
  47             //document.getElementById('layers').innerText = "";
  48         showTree("First");
  49
  50         //Put child in compositing mode
  51         setTimeout(function() {
  52             document.getElementById("child").style.webkitTransform = "perspective(600) translate3D(-50px, 10px, 100px) rotateY(45deg)";
  53             showTree("Second");
  54
  55             // Take it back out of compositing mode
  56             setTimeout(function() {
  57                 document.getElementById("child").style.webkitTransform = "";
  58                 showTree("Third");
  59
  60                 setTimeout(function() {
  61                     testRunner.notifyDone();
  62                 }, 0);
  63             }, 100);
  64         }, 100);
  65     }
  66
  67     window.addEventListener('load', doTest, false);
  68   </script>
  69 </head>
  70
  71 <body>
  72
  73   <!-- Normally we skip making a compositing layer on a parent, even if its children are composited -->
  74   <!-- But if the parent has a 2D transform it should get a compositing layer -->
  75   <!-- Should see a green box in perspective. Layer tree should show nested layers-->
  76   <div id="parent" class="parent">
  77       This content is in the parent
  78       <div id="child" class="child">
  79           Box should switch between perspective and flat
  80       </div>
  81   </div>
  82
  83   <pre id="layers">Layer tree goes here in DRT</pre>
  84 </body>
  85 </html>
  86