third_party/WebKit/LayoutTests/compositing/geometry/limit-layer-bounds-transformed.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: 200px;
  12       height: 100px;
  13       padding: 20px;
  14       z-index: 0;
  15       border: 1px solid black;
  16       transform: translate(100px, 0);
  17     }
  18
  19     .compositing {
  20       position: absolute;
  21       top: 21px;
  22       left: 121px;
  23       width: 100px;
  24       height: 100px;
  25       transform: translateZ(0);
  26     }
  27
  28     .far-left {
  29       position: relative;
  30       left: -1000px;
  31       width: 1200px;
  32       height: 100px;
  33       background-color: green;
  34     }
  35
  36     .indicator {
  37       position: absolute;
  38       top: 21px;
  39       left: 121px;
  40       width: 200px;
  41       height: 100px;
  42       background-color: red;
  43     }
  44   </style>
  45   <script type="text/javascript" charset="utf-8">
  46     if (window.testRunner) {
  47       testRunner.dumpAsText();
  48       testRunner.waitUntilDone();
  49     }
  50
  51     function doTest()
  52     {
  53       if (window.testRunner) {
  54         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  55         testRunner.notifyDone();
  56       }
  57     }
  58
  59     window.addEventListener('load', doTest, false);
  60   </script>
  61 </head>
  62
  63 <body>
  64
  65   <!-- Go into compositing. -->
  66   <div class="compositing"></div>
  67
  68   <div class="indicator"></div>
  69
  70   <!-- Test clipping to viewport with some intermediate layers. -->
  71   <!-- Green box should extend to the left edge. No red visible. -->
  72   <div class="container">
  73     <div class="far-left">
  74       Text here
  75     </div>
  76   </div>
  77
  78   <pre id="layers">Layer tree goes here in DRT</pre>
  79 </body>
  80 </html>
  81