layout/reftests/bugs/1120431-2.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   5     <style>
   6       .container-ext {
   7         padding-left: 180px;
   8         padding-right: 180px;
   9       }
  10
  11       .headline {
  12         line-height: 30px;
  13         text-shadow: 1px 1px rgba(255, 255, 255, 0.3);
  14       }
  15
  16       ul {
  17         list-style: none;
  18       }
  19
  20       .headline-left {
  21         left: 30px;
  22       }
  23
  24       .headline-right {
  25         top: 20px !important;
  26         /*bottom:370px !important;*/
  27         right: 20px;
  28       }
  29
  30       .headline-active {
  31         position: fixed;
  32         top: 100px;
  33       }
  34
  35       .list-author:before,
  36       .list-author:after {
  37         content: "\200e";
  38         display: table;
  39       }
  40       .list-author:after {
  41         clear: both;
  42       }
  43
  44       .list-author-vocal {
  45         float: left;
  46         margin-right: 10px;
  47       }
  48
  49       .ff { position: fixed; }
  50     </style>
  51   </head>
  52   <body>
  53     <div class="container-ext">
  54
  55       <div class="headline headline-left headline-active">
  56           <ul class="list-author">
  57             <li class="list-author-vocal">
  58               A
  59             </li>
  60             <li class="list-author-vocal">
  61               B
  62             </li>
  63             <li class="list-author-vocal">
  64               C
  65             </li>
  66             <li class="list-author-vocal">
  67               D
  68             </li>
  69             <li class="list-author-vocal">
  70               E
  71             </li>
  72           </ul>
  73           <ul class="list-author">
  74             <li class="list-author-vocal">
  75               F
  76             </li>
  77             <li class="list-author-vocal">
  78               G
  79             </li>
  80             <li class="list-author-vocal">
  81               H
  82             </li>
  83             <li class="list-author-vocal">
  84               I
  85             </li>
  86             <li class="list-author-vocal">
  87               J
  88             </li>
  89           </ul>
  90           <ul class="list-author">
  91             <li class="list-author-vocal">
  92               K
  93             </li>
  94             <li class="list-author-vocal">
  95               L
  96             </li>
  97             <li class="list-author-vocal">
  98               M
  99             </li>
 100             <li class="list-author-vocal">
 101               N
 102             </li>
 103             <li class="list-author-vocal">
 104               O
 105             </li>
 106           </ul>
 107           <ul class="list-author">
 108             <li class="list-author-vocal active">
 109               P
 110             </li>
 111             <li class="list-author-vocal">
 112               R
 113             </li>
 114             <li class="list-author-vocal">
 115               S
 116             </li>
 117             <li class="list-author-vocal">
 118               T
 119             </li>
 120             <li class="list-author-vocal">
 121               V
 122             </li>
 123           </ul>
 124           <ul class="list-author">
 125             <li class="list-author-vocal">
 126               W
 127             </li>
 128             <li class="list-author-vocal">
 129               Y
 130             </li>
 131             <li class="list-author-vocal">
 132               Z
 133             </li>
 134           </ul>
 135 <div class="ff" style="left: 69px; top: 115px; width: 3px; height: 3px; background: blue;"></div>
 136 <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
 137 <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
 138 <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
 139 <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
 140 <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
 141 <div class="ff" style="left: 173px; top: 115px; width: 4px; height: 3px; background: blue;"></div>
 142 <div class="ff" style="left: 69px; top: 145px; width: 3px; height: 3px; background: blue;"></div>
 143 <div class="ff" style="left: 69px; top: 161px; width: 3px; height: 3px; background: blue;"></div>
 144 <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
 145 <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
 146 <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
 147 <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
 148 <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
 149 <div class="ff" style="left: 162px; top: 161px; width: 4px; height: 3px; background: blue;"></div>
 150 <div class="ff" style="left: 69px; top: 191px; width: 3px; height: 3px; background: blue;"></div>
 151 <div class="ff" style="left: 69px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
 152 <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
 153 <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
 154 <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
 155 <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
 156 <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
 157 <div class="ff" style="left: 177px; top: 207px; width: 3px; height: 3px; background: blue;"></div>
 158 <div class="ff" style="left: 69px; top: 237px; width: 3px; height: 3px; background: blue;"></div>
 159 <div class="ff" style="left: 69px; top: 253px; width: 3px; height: 3px; background: blue;"></div>
 160 <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
 161 <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
 162 <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
 163 <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
 164 <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
 165 <div class="ff" style="left: 168px; top: 253px; width: 4px; height: 3px; background: blue;"></div>
 166 <div class="ff" style="left: 69px; top: 283px; width: 3px; height: 3px; background: blue;"></div>
 167 <div class="ff" style="left: 69px; top: 299px; width: 3px; height: 3px; background: blue;"></div>
 168 <div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div>
 169 <div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div>
 170 <div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div>
 171 <div class="ff" style="left: 135px; top: 299px; width: 4px; height: 3px; background: blue;"></div>
 172 <div class="ff" style="left: 69px; top: 329px; width: 3px; height: 3px; background: blue;"></div>
 173 <div class="ff" style="left: 69px; top: 345px; width: 3px; height: 3px; background: blue;"></div>
 174 <div class="ff" style="left: 68px; top: 352px; width: 41px; height: 19px; background: blue;"></div>
 175 <div class="ff" style="left: 68px; top: 382px; width: 41px; height: 19px; background: blue;"></div>
 176 <div class="ff" style="left: 68px; top: 412px; width: 41px; height: 19px; background: blue;"></div>
 177 <div class="ff" style="left: 68px; top: 442px; width: 41px; height: 19px; background: blue;"></div>
 178 <div class="ff" style="left: 69px; top: 465px; width: 3px; height: 3px; background: blue;"></div>
 179 <div class="ff" style="left: 69px; top: 469px; width: 3px; height: 3px; background: blue;"></div><!-- only needed after whitespace opt -->
 180 <div class="ff" style="left: 69px; top: 473px; width: 3px; height: 3px; background: blue;"></div><!-- only needed after whitespace opt -->
 181
 182           <ul class="list-author">
 183           <li>
 184             Word
 185           </li>
 186           <li>
 187             Word
 188           </li>
 189           <li>
 190             Word
 191           </li>
 192           <li>
 193             Word
 194           </li>
 195         </ul>
 196       </div> <!-- headline headline-left headline-active -->
 197       <div class="headline headline-right headline-active">
 198         <!--&#x200e;f--><div style="width: 2px; height: 2px; background: white;"></div>
 199       </div>
 200
 201       <div style="position:relative;">
 202         <div style="height: 4000px; background: red;">
 203         </div>
 204       </div>
 205     </div> <!-- container-ext -->
 206   </body>
 207 </html>