third_party/WebKit/LayoutTests/compositing/layer-creation/rotate3d-overlap.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     .box {
   6       position: relative;
   7       width: 100px;
   8       height: 100px;
   9       background-color: blue;
  10       margin: 20px;
  11       box-shadow: 0 0 3px black; /* make the compositing layers a little bigger */
  12     }
  13
  14     .container {
  15       display: inline-block;
  16     }
  17
  18     .translateZ {
  19       transform: translateZ(0);
  20     }
  21
  22     .rotate15 {
  23       transform: rotate3d(0, 0, 1, 15deg);
  24     }
  25
  26     .rotate45 {
  27       transform: rotate3d(0, 0, 1, 45deg);
  28     }
  29   </style>
  30   <script type="text/javascript" charset="utf-8">
  31    if (window.testRunner)
  32      testRunner.dumpAsText();
  33
  34    function doTest()
  35    {
  36        if (window.testRunner) {
  37          document.getElementById('results').innerText = window.internals.layerTreeAsText(document);
  38          testRunner.notifyDone();
  39        }
  40    }
  41
  42    window.addEventListener('load', doTest, false);
  43   </script>
  44 </head>
  45 <body>
  46   <div class="container">
  47     <div class="box translateZ"></div>
  48     <!-- The second box should not be composited. -->
  49     <div class="box"></div>
  50   </div>
  51
  52   <div class="container">
  53     <div class="composited box rotate15"></div>
  54     <!-- The second box should not be composited. -->
  55     <div class="box"></div>
  56   </div>
  57
  58   <div class="container">
  59     <div class="composited box rotate45"></div>
  60     <!-- The second box should be composited. -->
  61     <div class="box"></div>
  62   </div>
  63
  64   <pre id="results">Layer tree goes here in DRT.</pre>
  65 </body>
  66 </html>