third_party/WebKit/LayoutTests/fast/css/css-properties-position-relative-as-parent-fixed.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style>
   5         h5 {
   6             margin: 0;
   7         }
   8
   9         .container {
  10             position: relative;
  11             left: 150px;
  12             font-size: 0.8em;
  13         }
  14
  15         .main {
  16             width: 400px;
  17         }
  18
  19         .relative {
  20             position: relative;
  21         }
  22
  23         .fixed {
  24             position: fixed;
  25         }
  26
  27         .green {
  28             background-color: lime;
  29         }
  30
  31         .blue {
  32             background-color: cyan;
  33         }
  34
  35         .grey {
  36             background-color: silver;
  37         }
  38
  39         .rtl {
  40             direction: rtl;
  41         }
  42     </style>
  43 </head>
  44 <body>
  45     <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/detail?id=31286">31286</a>. css rendering bug : fixed-position-element and 'left'.</h3>
  46     <p>If fixed position inline element does not have left and/or right position then it should render as normal flow.</p>
  47
  48     <h5>Case 1: fixed text box (blue) should be just after relative text box (green).</h5>
  49     <div class="container">
  50         <div class="main relative green" style="left: 100px;">
  51             relative
  52             <span class="fixed blue">
  53                 fixed
  54             </span>
  55         </div>
  56     </div>
  57
  58     <h5>Case 2: fixed text box (blue) should be just before relative text box (green).</h5>
  59     <div class="container">
  60         <div class="main relative green rtl" style="left: 100px;">
  61             relative
  62             <span class="fixed blue">
  63                 fixed
  64             </span>
  65         </div>
  66     </div>
  67
  68     <h5>Case 3: fixed text box (blue) should be just after relative text box (green).</h5>
  69     <div class="container">
  70         <div class="main relative green" style="right: 100px;">
  71             relative
  72             <span class="fixed blue">
  73                 fixed
  74             </span>
  75         </div>
  76     </div>
  77
  78     <h5>Case 4: fixed text box (blue) should be just before relative text box (green).</h5>
  79     <div class="container">
  80         <div class="main relative green rtl" style="right: 100px;">
  81             relative
  82             <span class="fixed blue">
  83                 fixed
  84             </span>
  85         </div>
  86     </div>
  87
  88     <h5>Case 5: fixed text box (blue) should be just after relative2 text box (green).</h5>
  89     <div class="container">
  90         <div class="main relative grey" style="left: 100px;">
  91             relative
  92             <span class="relative green" style="left: 100px;">
  93                 relative2
  94                 <span class="fixed blue">
  95                     fixed
  96                 </span>
  97             </span>
  98         </div>
  99     </div>
 100
 101     <h5>Case 6: fixed text box (blue) should be after relative text box (grey) in some distance and before the other relative2 text box (green) in some distance.</h5>
 102     <div class="container">
 103         <div class="main relative grey rtl" style="left: 100px;">
 104             relative
 105             <span class="relative green" style="left: 100px;">
 106                 relative2
 107                 <span class="fixed blue">
 108                     fixed
 109                 </span>
 110             </span>
 111         </div>
 112     </div>
 113
 114     <h5>Case 7: fixed text box (blue) should be just after relative2 text box (green).</h5>
 115     <div class="container">
 116         <div class="main relative grey" style="left: 100px;">
 117             relative
 118             <span class="relative green" style="right: 100px;">
 119                 relative2
 120                 <span class="fixed blue">
 121                     fixed
 122                 </span>
 123             </span>
 124         </div>
 125     </div>
 126
 127     <h5>Case 8: fixed text box (blue) should be before relative2 text box (green) in some distance.</h5>
 128     <div class="container">
 129         <div class="main relative grey rtl" style="left: 100px;">
 130             relative
 131             <span class="relative green" style="right: 100px;">
 132                 relative2
 133                 <span class="fixed blue">
 134                     fixed
 135                 </span>
 136             </span>
 137         </div>
 138     </div>
 139
 140     <h5>Case 9: fixed text box (blue) should be just after relative2 text box (green).</h5>
 141     <div class="container">
 142         <div class="main relative grey" style="right: 100px;">
 143             relative
 144             <span class="relative green" style="left: 100px;">
 145                 relative2
 146                 <span class="fixed blue">
 147                     fixed
 148                 </span>
 149             </span>
 150         </div>
 151     </div>
 152
 153     <h5>Case 10: fixed text box (blue) should be after relative text box (grey) in some distance and before other relative2 text box (green) in some distance.</h5>
 154     <div class="container">
 155         <div class="main relative grey rtl" style="right: 100px;">
 156             relative
 157             <span class="relative green" style="left: 100px;">
 158                 relative2
 159                 <span class="fixed blue">
 160                     fixed
 161                 </span>
 162             </span>
 163         </div>
 164     </div>
 165
 166     <h5>Case 11: fixed text box (blue) should be just after relative2 text box (green).</h5>
 167     <div class="container">
 168         <div class="main relative grey" style="right: 100px;">
 169             relative
 170             <span class="relative green" style="right: 100px;">
 171                 relative2
 172                 <span class="fixed blue">
 173                     fixed
 174                 </span>
 175             </span>
 176         </div>
 177     </div>
 178
 179     <h5>Case 12: fixed text box (blue) should be before relative2 text box (green) in some distance.</h5>
 180     <div class="container">
 181         <div class="main relative grey rtl" style="right: 100px;">
 182             relative
 183             <span class="relative green" style="right: 100px;">
 184                 relative2
 185                 <span class="fixed blue">
 186                     fixed
 187                 </span>
 188             </span>
 189         </div>
 190     </div>
 191
 192     <h5>Case 13: fixed text box (blue) should be just after relative2 text box (green).</h5>
 193     <div class="container">
 194         <div class="main relative grey" style="left: 100px;">
 195             relative
 196             <span class="relative green" style="left: 25%;">
 197                 relative2
 198                 <span class="fixed blue">
 199                     fixed
 200                 </span>
 201             </span>
 202         </div>
 203     </div>
 204
 205     <h5>Case 14: fixed text box (blue) should be after relative text box (grey) in some distance and before the other relative2 text box (green) in some distance.</h5>
 206     <div class="container">
 207         <div class="main relative grey rtl" style="left: 100px;">
 208             relative
 209             <span class="relative green" style="left: 25%;">
 210                 relative2
 211                 <span class="fixed blue">
 212                     fixed
 213                 </span>
 214             </span>
 215         </div>
 216     </div>
 217
 218 </body>
 219 </html>