src/third_party/WebKit/LayoutTests/compositing/child-transform-with-anchor-point.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style>
   5       body {
   6           overflow: hidden;
   7       }
   8
   9       #perspective {
  10           -webkit-perspective: 1000px;
  11           position: absolute;
  12           width: 600px;
  13           left: -600px;
  14       }
  15
  16       #transformed {
  17           transform: rotateY(90deg);
  18           -webkit-transform-origin: right;
  19           background: green;
  20           height: 800px;
  21       }
  22
  23       #absolute {
  24           /* This could be relative too, it just needs to be out of flow. */
  25           position: absolute;
  26       }
  27
  28       #container {
  29           position: relative;
  30           overflow: hidden;
  31           width: 800px;
  32           height: 600px;
  33       }
  34     </style>
  35     <script>
  36       if (window.testRunner)
  37         testRunner.dumpAsTextWithPixelResults();
  38
  39
  40       function doTest() {
  41         var transformed = document.getElementById("transformed");
  42
  43         if (window.internals)
  44           window.internals.forceCompositingUpdate(document);
  45
  46         // Request a recomposite of the layer.
  47         transformed.style.opacity = 0.9;
  48         document.body.offsetTop;
  49         transformed.style.opacity = 1.0;
  50
  51         if (window.internals)
  52           window.internals.forceCompositingUpdate(document);
  53       }
  54
  55       window.onload = doTest;
  56     </script>
  57   </style>
  58   </head>
  59   <body>
  60     <!-- The green rectangle should be visible. -->
  61     <div id="container">
  62         <div id="perspective">
  63             <div id="transformed"></div>
  64             <div id="absolute"></div>
  65         </div>
  66     </div>
  67   </body>
  68 </html>
  69