third_party/WebKit/LayoutTests/compositing/geometry/fixed-position.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Position fixed</title>
   8   <script src="../resources/mock_scrollbars.js"></script>
   9   <style type="text/css" media="screen">
  10     ::-webkit-scrollbar {
  11       width: 0px;
  12       height: 0px;
  13     }
  14     body {
  15       height: 1000px;
  16       width: 1000px;
  17     }
  18     #fixed {
  19       position: fixed;
  20       top: 0;
  21       left: 0;
  22       height: 100px;
  23       width: 100px;
  24       opacity: 0.8; /* makes this a compositing layer without assigning a transform */
  25       background-color: orange;
  26     }
  27
  28     .box {
  29       height: 50px;
  30       width: 50px;
  31       background-color: green;
  32     }
  33
  34     .compositing {
  35       transform: translateZ(0);
  36     }
  37
  38     p {
  39       position: absolute;
  40       left: 50px;
  41       top: 150px;
  42     }
  43   </style>
  44   <script type="text/javascript" charset="utf-8">
  45     window.addEventListener('load', function() {
  46       window.scrollBy(50, 50);
  47     }, false);
  48   </script>
  49 </head>
  50 <body>
  51
  52 <p>You should see a green square in the top left corner of an orange box.</p>
  53 <div id="fixed">
  54   <div class="compositing box">
  55   </div>
  56 </div>
  57
  58 </body>
  59 </html>