src/third_party/WebKit/LayoutTests/compositing/geometry/root-layer-update.html

   1 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
   2 <!-- =========================================== kroc camen of camen design ============================================= -->
   3 <head>
   4   <title>camen design - Video for Everybody!</title>
   5   <style type="text/css" media="screen">
   6     body {
   7       width: 600px;
   8       margin: 0 auto;
   9     }
  10
  11     #sidebar {
  12       position: absolute;
  13       height: 100px;
  14       width: 100px;
  15       margin-left: -200px;
  16       padding-left: 200px;
  17       background: gray;
  18     }
  19
  20     #article {
  21       position: relative;
  22       border: 1px solid black;
  23     }
  24
  25     #compositing {
  26       height: 100px;
  27       width: 100px;
  28       background-color: green;
  29       margin: 0 auto;
  30       transform: translateZ(0);
  31     }
  32
  33     #tester {
  34       position: absolute;
  35       top: 1px;
  36       left: 350px;
  37       height: 100px;
  38       width: 100px;
  39       background-color: red;
  40     }
  41   </style>
  42   <script type="text/javascript" charset="utf-8">
  43   if (window.testRunner)
  44     testRunner.waitUntilDone();
  45
  46   function startTest()
  47   {
  48     window.setTimeout(function() {
  49       document.documentElement.style.width = '800px'
  50       window.setTimeout(function() {
  51         if (window.testRunner)
  52           testRunner.notifyDone();
  53       }, 0);
  54     }, 0);
  55   }
  56
  57   window.addEventListener('load', startTest, false);
  58   </script>
  59 </head>
  60 <body>
  61
  62   <div id="tester"></div>
  63   <div id="sidebar"></div>
  64
  65   <div id="article">
  66     <div id="compositing"></div>
  67   </div>
  68   <p><a href="rdar://problem/7026010">rdar://problem/7026010</a><br>
  69     Test for the root layer getting correctly positioned. You should see no red.</p>
  70 </body>
  71 </html>