third_party/WebKit/LayoutTests/compositing/preserve-3d-toggle.html

   1 <!DOCTYPE html>
   2
   3 <!--
   4 Check that removing the preserve-3d attribute from a layer has the intended
   5 effect. See https://bugs.webkit.org/show_bug.cgi?id=95732.
   6
   7 Passing criteria: green box shown without any visible red.
   8 -->
   9
  10 <html>
  11 <head>
  12   <style type="text/css" media="screen">
  13     body {
  14       -webkit-perspective: 400px;
  15     }
  16
  17     .transformed-container {
  18       -webkit-transform-style: preserve-3d;
  19       transform: rotateX(90deg);
  20     }
  21
  22     .reverse-transformed-child {
  23       transform: rotateX(-90deg);
  24     }
  25
  26     .box {
  27       width: 100px;
  28       height: 100px;
  29     }
  30
  31     .indicator {
  32       background: red;
  33     }
  34
  35     .test {
  36       position: absolute;
  37       transform: translateZ(0);
  38       background: green;
  39     }
  40   </style>
  41
  42   <script type="text/javascript">
  43     function doTest() {
  44       if (window.testRunner) {
  45           window.testRunner.dumpAsTextWithPixelResults();
  46           window.testRunner.waitUntilDone();
  47       }
  48       window.setTimeout(function() {
  49           document.getElementById('container').style.webkitTransformStyle = 'flat';
  50           if (window.testRunner)
  51               window.testRunner.notifyDone();
  52       }, 0);
  53     }
  54     window.addEventListener('load', doTest);
  55   </script>
  56 </head>
  57
  58 <body>
  59   <div class="test box"></div>
  60   <div id="container" class="transformed-container box">
  61     <div class="reverse-transformed-child indicator box"></div>
  62   </div>
  63 </body>
  64 </html>