third_party/WebKit/LayoutTests/compositing/geometry/limit-layer-bounds-positioned-transition.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6     body {
   7       position: relative;
   8     }
   9     .container {
  10       position: relative;
  11       width: 100px;
  12       height: 100px;
  13       padding: 20px;
  14       z-index: 0;
  15       border: 1px solid black;
  16     }
  17
  18     .compositing {
  19       position: absolute;
  20       top: 21px;
  21       left: 21px;
  22       width: 100px;
  23       height: 100px;
  24       transform: translateZ(0);
  25     }
  26
  27     #far-left {
  28       position: relative;
  29       left: -1000px;
  30       width: 1200px;
  31       height: 100px;
  32       background-color: green;
  33     }
  34
  35     #far-left.moved {
  36       transform: translateX(200px);
  37     }
  38
  39     .indicator {
  40       position: absolute;
  41       top: 21px;
  42       left: 21px;
  43       width: 100px;
  44       height: 100px;
  45       background-color: red;
  46     }
  47   </style>
  48   <script type="text/javascript" charset="utf-8">
  49     if (window.testRunner) {
  50       testRunner.dumpAsText();
  51       testRunner.waitUntilDone();
  52     }
  53
  54     function doTest()
  55     {
  56       document.getElementById('far-left').className = 'moved';
  57       if (window.testRunner) {
  58         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  59         testRunner.notifyDone();
  60       }
  61     }
  62
  63     window.addEventListener('load', doTest, false);
  64   </script>
  65 </head>
  66
  67 <body>
  68
  69   <!-- Go into compositing. -->
  70   <div class="compositing"></div>
  71
  72   <div class="indicator"></div>
  73
  74   <!-- Test that layers get updated on the addition of a transform -->
  75   <!-- The green layer should extend to the left edge of the page -->
  76   <div class="container">
  77     <div id="far-left">
  78       Text here
  79     </div>
  80   </div>
  81   <pre id="layers">Layer tree goes here in DRT</pre>
  82 </body>
  83 </html>
  84