third_party/WebKit/LayoutTests/fast/overflow/position-fixed-transform-clipping.html

   1 <!DOCTYPE>
   2
   3 <html>
   4 <head>
   5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6   <title>Position fixed with transform clipping</title>
   7
   8   <style type="text/css" media="screen">
   9     body {
  10       height: 2000px;
  11       margin: 0;
  12     }
  13     .container {
  14       position: fixed;
  15       width: 400px;
  16       height: 50px;
  17       border: 2px solid black;
  18       overflow: hidden;
  19     }
  20
  21     .box {
  22       width: 100%;
  23       height: 100%;
  24       background-color: green;
  25       transform: translate(0, 0);
  26     }
  27     p {
  28       position: absolute;
  29       top: 100px;
  30     }
  31   </style>
  32   <script type="text/javascript" charset="utf-8">
  33     window.addEventListener('load', function() {
  34       window.scrollBy(0, 25);
  35     }, false);
  36   </script>
  37 </head>
  38 <body>
  39
  40   <p><a href="https://bugs.webkit.org/show_bug.cgi?id=29346">https://bugs.webkit.org/show_bug.cgi?id=29346</a><br>
  41     Green box should fill the black border.</p>
  42   <div class="container">
  43     <div class="box">
  44     </div>
  45   </div>
  46
  47 </body>
  48 </html>