third_party/WebKit/LayoutTests/transforms/2d/transform-fixed-container.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6     body {
   7       margin: 0;
   8       height: 1000px;
   9     }
  10
  11     .box {
  12       width: 100px;
  13       height: 100px;
  14       outline: 1px solid black;
  15     }
  16
  17     .fixed {
  18       position: fixed;
  19     }
  20
  21     .transformed {
  22       transform: rotate(0);
  23     }
  24
  25     .indicator {
  26       position: absolute;
  27       background-color: red;
  28     }
  29
  30   </style>
  31   <script type="text/javascript" charset="utf-8">
  32     // Scroll on load to test fixed positioning.
  33     window.addEventListener('load', function() {
  34       window.scrollTo(0, 100);
  35     }, false)
  36   </script>
  37 </head>
  38 <body>
  39
  40   <div class="indicator box" style="left: 50px; top: 200px;"></div>
  41   <div class="indicator box" style="left: 250px; top: 200px;"></div>
  42
  43   <div class="transformed box" style="margin: 150px 50px;">
  44     <div class="fixed box" style="background-color: green; margin-top: 50px;">
  45     </div>
  46   </div>
  47
  48   <div class="transformed fixed box" style="left: 250px; top: 50px;">
  49     <div class="transformed box" style="margin-top: 50px; background-color: green;">
  50     </div>
  51   </div>
  52
  53   <p>Tests fixed position elements combined with transforms. You should see no red above.</p>
  54
  55 </body>
  56 </html>