third_party/WebKit/LayoutTests/compositing/backgrounds/fixed-background-on-descendant.html

   1 <!DOCTYPE html>
   2 <style>
   3     body {
   4         height: 2000px;
   5         width: 2000px;
   6         overflow: hidden;
   7     }
   8
   9     .box {
  10         width: 300px;
  11         height: 300px;
  12         margin: 20px;
  13         position: relative;
  14     }
  15
  16     body > .box {
  17         border: 1px solid black;
  18         float: left;
  19     }
  20     .child {
  21         position: absolute;
  22         top: 50px;
  23         left: 50px;
  24         height: 200px;
  25         width: 200px;
  26         margin-left: 10px;
  27         background-image: url('../resources/alpha-blocks.png');
  28         background-size: 500px 300px;
  29         background-repeat: no-repeat;
  30         background-attachment: fixed;
  31         border: 4px solid gray;
  32     }
  33
  34     .composited {
  35         transform: translateZ(0);
  36     }
  37 </style>
  38 <script>
  39     function doTest()
  40     {
  41         window.scrollTo(35, 45);
  42     }
  43     window.addEventListener('load', doTest, false);
  44 </script>
  45 <div class="composited box">
  46     <div class="child box"></div>
  47 </div>
  48
  49 <div class="composited box">
  50     <div class="child box"></div>
  51 </div>