src/third_party/WebKit/LayoutTests/compositing/overflow/fixed-position-ancestor-clip.html

   1 <!DOCTYPE>
   2
   3 <html>
   4 <head>
   5   <title>Position fixed with transform</title>
   6   <style type="text/css" media="screen">
   7     body {
   8       height: 1000px;
   9       width: 1000px;
  10     }
  11     #fixed {
  12       position: fixed;
  13       width: 100px;
  14       height: 100px;
  15       background-color: red;
  16       overflow: hidden;
  17     }
  18
  19     .box {
  20       width: 100px;
  21       height: 100px;
  22       background-color: green;
  23       transform: translateZ(0);
  24     }
  25
  26     p {
  27       position: absolute;
  28       left: 50px;
  29       top: 150px;
  30     }
  31   </style>
  32   <script type="text/javascript" charset="utf-8">
  33     window.addEventListener('load', function() {
  34       window.scrollBy(50, 50);
  35     }, false);
  36   </script>
  37   <script src="../resources/mock_scrollbars.js"></script>
  38 </head>
  39 <body>
  40
  41   <p>You should see a single green square, with no red.</p>
  42   <div id="fixed">
  43     <div class="box">
  44     </div>
  45   </div>
  46
  47 </body>
  48 </html>