third_party/WebKit/LayoutTests/compositing/overflow-trumps-transform-style.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .box {
   7       height: 100px;
   8       width: 100px;
   9       margin: 10px;
  10       background-color: blue;
  11     }
  12   </style>
  13   <script>
  14     if (window.testRunner)
  15       testRunner.dumpAsText();
  16
  17     function dumpResults()
  18     {
  19       var results = document.getElementById('layers');
  20
  21       // Check the computed value.
  22       results.innerText = window.getComputedStyle(document.getElementById('box1')).webkitTransformStyle + '\n';
  23       results.innerText += window.getComputedStyle(document.getElementById('box2')).webkitTransformStyle + '\n';
  24
  25       if (window.testRunner)
  26         results.innerText += window.internals.layerTreeAsText(document);
  27     }
  28     window.addEventListener('load', dumpResults, false);
  29   </script>
  30 </head>
  31 <body>
  32 <div class="box" id="box1" style="transform: translateZ(1px); -webkit-transform-style: preserve-3d"></div>
  33 <div class="box" id="box2" style="transform: translateZ(1px); -webkit-transform-style: preserve-3d; overflow: hidden"></div>
  34 <pre id="layers">Layer tree goes here in DRT</pre>
  35 </body>
  36 </html>