third_party/WebKit/LayoutTests/compositing/layout-width-change.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4   <title>Layout width change</title>
   5
   6   <style type="text/css" media="screen">
   7   .container {
   8     position: absolute;
   9     width: 400px;
  10     height: 1500px;
  11   }
  12
  13   .panel {
  14     position: absolute;
  15     top: 0px;
  16     left: 0px;
  17     width: 1000px;
  18     height: 200px;
  19     background-color: #bbb;
  20   }
  21
  22   .composited {
  23     transform: translateZ(0);
  24   }
  25   </style>
  26   <script type="text/javascript" charset="utf-8">
  27     if (window.testRunner) {
  28         testRunner.waitUntilDone();
  29         testRunner.dumpAsTextWithPixelResults();
  30     }
  31     function doTest()
  32     {
  33       var container = document.getElementById("container");
  34       var panel = document.getElementById("panel");
  35
  36       // Delay is needed after switching between compositing and non-compositing
  37       // mode to allow for another render to happen.
  38       window.setTimeout(function() {
  39          panel.className += " composited"
  40          container.style.height = "300";
  41          if (window.testRunner) {
  42             window.setTimeout(function() {
  43                 testRunner.notifyDone();
  44             }, 20);
  45          }
  46       }, 20);
  47     }
  48
  49     window.addEventListener('load', doTest, false);
  50     </script>
  51 </head>
  52 <body>
  53
  54   <p>There should be no white gap at the right hand side of the box.</p>
  55   <div id="container" class="container">
  56     <div id="panel" class="panel">
  57     </div>
  58   </div>
  59
  60 </body>
  61 </html>