src/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-top-overflow-scroll-by-fragment.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script>
   5     function done()
   6     {
   7       if (window.testRunner)
   8           window.testRunner.notifyDone();
   9     }
  10
  11     if (window.location.hash == '') {
  12         if (window.testRunner)
  13             window.testRunner.waitUntilDone();
  14         window.onhashchange = done;
  15         location = '#hash';
  16     }
  17 </script>
  18 <style>
  19     .group {
  20         display: inline-block;
  21         position: relative;
  22         width: 150px;
  23         height: 500px;
  24     }
  25
  26     #overflow {
  27         width: 600px;
  28         height: 550px;
  29         overflow: hidden; /* Still scrollable with JS */
  30         border: 1px solid black;
  31         position: relative;
  32     }
  33
  34     .spacer {
  35         float: left;
  36         width: 10px;
  37         height: 500px;
  38     }
  39     .container {
  40         width: 100px;
  41         height: 400px;
  42         outline: 2px solid black;
  43     }
  44
  45     .box {
  46         width: 100px;
  47         height: 200px;
  48     }
  49
  50     .hash {
  51         width: 600px;
  52         height: 10px;
  53         background-color: gray;
  54         position: absolute;
  55         border: 0px;
  56     }
  57
  58     .sticky {
  59         position: sticky;
  60         top: 100px;
  61         background-color: green;
  62     }
  63
  64     .indicator {
  65         position: absolute;
  66         top: 0;
  67         left: 0;
  68         background-color: red;
  69     }
  70 </style>
  71 </head>
  72 <body>
  73     <div id="overflow">
  74         <div class="spacer"></div>
  75         <div class="group">
  76             <div class="indicator box" style="top: 200px;"></div>
  77             <div class="container">
  78                 <div class="sticky box"></div>
  79             </div>
  80         </div>
  81
  82         <div class="group" style="top: 100px">
  83             <div class="indicator box" style="top: 120px;"></div>
  84             <div class="container">
  85                 <div class="sticky box"></div>
  86             </div>
  87         </div>
  88
  89         <div class="group" style="top: 240px">
  90             <div class="indicator box" style="top: 0;"></div>
  91             <div class="container">
  92                 <div class="sticky box"></div>
  93             </div>
  94         </div>
  95         <div id="hash" class="hash" style="top: 119px;">
  96         </div>
  97     </div>
  98     <div style="position: absolute; top: 560px;">
  99     This test checks that sticky positioning when scrolled by fragment.
 100     There should be no red.
 101     </div>
 102 </body>
 103 </html>
 104