third_party/WebKit/LayoutTests/fast/overflow/clip-rects-fixed-ancestor.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2
   3 <html>
   4
   5         <head>
   6                 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   7                 <title>Safari Fixed &gt; Overflow &gt; Relative Scroll Bug</title>
   8                 <style type="text/css" media="screen"><!--
   9 #fixed1 {
  10         position: fixed;
  11         top: 80px;
  12         left: 300px;
  13         width: 150px; }
  14 #fixed2 {
  15         position: fixed;
  16         top: 80px;
  17         left: 500px;
  18         width: 150px; }
  19 #fixed3 {
  20         position: fixed;
  21         top: 80px;
  22         left: 700px;
  23         width: 150px; }
  24 .overflowHidden {
  25         overflow: hidden; }
  26 .relative {
  27         position: relative; }
  28 .absolute {
  29         position: absolute;
  30         top: 0;
  31         right: 0; }
  32 div {
  33         padding: 5px;
  34         margin: 5px;
  35         border: solid 1px #999; }
  36 body {
  37     height: 1000px; }
  38 --></style>
  39     <script type="text/javascript">
  40         function test()
  41         {
  42             scrollTo(0, 64);
  43         }
  44     </script>
  45         </head>
  46
  47         <body onload="test()">
  48                 <h4>Safari Fixed / Overflow Hidden Scroll Bug</h4>
  49                 <pre>
  50 </pre>
  51                 <pre>
  52 #fixed1 {
  53         position: fixed;
  54         top: 80px;
  55         left: 300px;
  56         width: 150px; }
  57 #fixed2 {
  58         position: fixed;
  59         top: 80px;
  60         left: 500px;
  61         width: 150px; }
  62 #fixed3 {
  63         position: fixed;
  64         top: 80px;
  65         left: 700px;
  66         width: 150px; }
  67 .overflowHidden {
  68         overflow: hidden; }
  69 .relative {
  70         position: relative; }
  71 .absolute {
  72         position: absolute;
  73         top: 0;
  74         right: 0; }
  75 div {
  76         padding: 5px;
  77         margin: 5px;
  78         border: solid 1px #999; }
  79 #veryLarge {
  80         position: relative;
  81         height:1000px;
  82         width:1500px; }
  83
  84
  85 </pre>
  86                 <p>When you scroll this page the following objects will be clipped:</p>
  87                 <p>- (relative objects and overflowHidden objects) inside (overflowHidden objects) inside (fixed objects) will be clipped;</p>
  88                 <p>- (relative objects and overflowHidden objects and absolute objects) inside (fixed/overflowHidden objects) will be clipped;</p>
  89                 <p>Nice effect, but not what we want. Tested in Safari Version 2.0.4 (419.3), and WebKit Nightly Build Mon Nov 20 5:18:23 GMT 2006.</p>
  90                 <div id="fixed1">
  91                         #fixed1
  92                         <div>
  93                                 no style</div>
  94                         <div class="relative">
  95                                 .relative</div>
  96                         <div class="absolute">
  97                                 .absolute</div>
  98                         <div class="overflowHidden">
  99                                 .overflowHidden
 100                                 <div>
 101                                         no style</div>
 102                         </div>
 103                         <div class="overflowHidden">
 104                                 .overflowHidden
 105                                 <div class="relative">
 106                                         .relative</div>
 107                         </div>
 108                         <div class="overflowHidden">
 109                                 .overflowHidden
 110                                 <div class="overflowHidden">
 111                                         .overflowHidden</div>
 112                         </div>
 113                 </div>
 114                 <div id="fixed2" class="overflowHidden">
 115                         #fixed2.overflowHidden
 116                         <div>
 117                                 no style</div>
 118                         <div class="relative">
 119                                 .relative</div>
 120                         <div class="absolute">
 121                                 .absolute</div>
 122                         <div class="overflowHidden">
 123                                 .overflowHidden
 124                                 <div>
 125                                         no style</div>
 126                         </div>
 127                         <div class="overflowHidden">
 128                                 .overflowHidden
 129                                 <div class="relative">
 130                                         .relative</div>
 131                         </div>
 132                         <div class="overflowHidden">
 133                                 .overflowHidden
 134                                 <div class="overflowHidden">
 135                                         .overflowHidden</div>
 136                         </div>
 137                 </div>
 138                 <div id="fixed3">
 139                         #fixed3
 140                         <div class="overflowHidden">
 141                                 .overflowHidden
 142                                 <div>
 143                                         no style</div>
 144                                 <div class="relative">
 145                                         .relative</div>
 146                                 <div class="absolute">
 147                                         .absolute</div>
 148                                 <div class="overflowHidden">
 149                                         .overflowHidden
 150                                         <div>
 151                                                 no style</div>
 152                                 </div>
 153                                 <div class="overflowHidden">
 154                                         .overflowHidden
 155                                         <div class="relative">
 156                                                 .relative</div>
 157                                 </div>
 158                                 <div class="overflowHidden">
 159                                         .overflowHidden
 160                                         <div class="overflowHidden">
 161                                                 .overflowHidden</div>
 162                                 </div>
 163                         </div>
 164                 </div>
 165         </body>
 166
 167 </html>