src/third_party/WebKit/LayoutTests/compositing/layer-creation/no-compositing-for-preserve-3d.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .box {
   7       position: relative;
   8       height: 100px;
   9       width: 100px;
  10       margin: 10px;
  11       left: 0;
  12       top: 0;
  13       background-color: silver;
  14     }
  15
  16     .preserve3d {
  17       width: 300px;
  18       border: 1px solid black;
  19       padding: 20px;
  20       margin: 10px;
  21       -webkit-transform-style: preserve-3d;
  22     }
  23   </style>
  24
  25   <script>
  26   if (window.testRunner)
  27     testRunner.dumpAsText();
  28
  29   function dumpLayers()
  30   {
  31     var layersResult = document.getElementById('layers');
  32     if (window.testRunner)
  33       layersResult.innerText = window.internals.layerTreeAsText(document);
  34
  35   }
  36   window.addEventListener('load', dumpLayers, false)
  37   </script>
  38
  39 </head>
  40 <body>
  41
  42   <div class="preserve3d">
  43     This layer should not be composited.
  44     <div class="box"></div>
  45     </div>
  46   </div>
  47
  48   <div class="preserve3d">
  49     This layer should not be composited.
  50     <div class="box" style="transform: rotate(10deg)"></div>
  51     </div>
  52   </div>
  53
  54   <div class="preserve3d">
  55     This layer should be composited.
  56     <div class="box" style="transform: rotateY(10deg)"></div>
  57   </div>
  58 <pre id="layers">Layer tree goes here in DRT</pre>
  59
  60 </body>
  61 </html>