third_party/WebKit/LayoutTests/fast/css/css-properties-position-relative-as-parent-fixed-expected.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
  43         .inline {
  44             display: inline-block;
  45             position: relative;
  46         }
  47     </style>
  48 </head>
  49 <body>
  50     <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>
  51     <p>If fixed position inline element does not have left and/or right position then it should render as normal flow.</p>
  52
  53     <h5>Case 1: fixed text box (blue) should be just after relative text box (green).</h5>
  54     <div class="container">
  55         <div class="main relative green" style="left: 100px;">
  56             relative<div class="inline blue">fixed</div>
  57         </div>
  58     </div>
  59
  60     <h5>Case 2: fixed text box (blue) should be just before relative text box (green).</h5>
  61     <div class="container">
  62         <div class="main relative green rtl" style="left: 100px;">
  63             relative<div class="inline blue">fixed</div>
  64         </div>
  65     </div>
  66
  67     <h5>Case 3: fixed text box (blue) should be just after relative text box (green).</h5>
  68     <div class="container">
  69         <div class="main relative green" style="right: 100px;">
  70             relative<div class="inline blue">fixed</div>
  71         </div>
  72     </div>
  73
  74     <h5>Case 4: fixed text box (blue) should be just before relative text box (green).</h5>
  75     <div class="container">
  76         <div class="main relative green rtl" style="right: 100px;">
  77             relative<div class="inline blue">fixed</div>
  78         </div>
  79     </div>
  80
  81     <h5>Case 5: fixed text box (blue) should be just after relative2 text box (green).</h5>
  82     <div class="container">
  83         <div class="main relative grey" style="left: 100px;">
  84             relative
  85             <span class="relative green" style="left: 100px;">
  86                 relative2<div class="inline blue">fixed</div>
  87             </span>
  88         </div>
  89     </div>
  90
  91     <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>
  92     <div class="container">
  93         <div class="main relative grey rtl" style="left: 100px;">
  94             relative
  95             <span class="relative green" style="left: 100px;">
  96                 relative2<div class="inline blue">fixed</div>
  97             </span>
  98         </div>
  99     </div>
 100
 101     <h5>Case 7: fixed text box (blue) should be just after relative2 text box (green).</h5>
 102     <div class="container">
 103         <div class="main relative grey" style="left: 100px;">
 104             relative
 105             <span class="relative green" style="right: 100px;">
 106                 relative2<div class="inline blue">fixed</div>
 107             </span>
 108         </div>
 109     </div>
 110
 111     <h5>Case 8: fixed text box (blue) should be before relative2 text box (green) in some distance.</h5>
 112     <div class="container">
 113         <div class="main relative grey rtl" style="left: 100px;">
 114             relative
 115             <span class="relative green" style="right: 100px;">
 116                 relative2<div class="inline blue">fixed</div>
 117             </span>
 118         </div>
 119     </div>
 120
 121     <h5>Case 9: fixed text box (blue) should be just after relative2 text box (green).</h5>
 122     <div class="container">
 123         <div class="main relative grey" style="right: 100px;">
 124             relative
 125             <span class="relative green" style="left: 100px;">
 126                 relative2<div class="inline blue">fixed</div>
 127             </span>
 128         </div>
 129     </div>
 130
 131     <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>
 132     <div class="container">
 133         <div class="main relative grey rtl" style="right: 100px;">
 134             relative
 135             <span class="relative green" style="left: 100px;">
 136                 relative2<div class="inline blue">fixed</div>
 137             </span>
 138         </div>
 139     </div>
 140
 141     <h5>Case 11: fixed text box (blue) should be just after relative2 text box (green).</h5>
 142     <div class="container">
 143         <div class="main relative grey" style="right: 100px;">
 144             relative
 145             <span class="relative green" style="right: 100px;">
 146                 relative2<div class="inline blue">fixed</div>
 147             </span>
 148         </div>
 149     </div>
 150
 151     <h5>Case 12: fixed text box (blue) should be before relative2 text box (green) in some distance.</h5>
 152     <div class="container">
 153         <div class="main relative grey rtl" style="right: 100px;">
 154             relative
 155             <span class="relative green" style="right: 100px;">
 156                 relative2<div class="inline blue">fixed</div>
 157             </span>
 158         </div>
 159     </div>
 160
 161     <h5>Case 13: fixed text box (blue) should be just after relative2 text box (green).</h5>
 162     <div class="container">
 163         <div class="main relative grey" style="left: 100px;">
 164             relative
 165             <span class="relative green" style="left: 25%;">
 166                 relative2<div class="inline blue">fixed</div>
 167             </span>
 168         </div>
 169     </div>
 170
 171     <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>
 172     <div class="container">
 173         <div class="main relative grey rtl" style="left: 100px;">
 174             relative
 175             <span class="relative green" style="left: 25%;">
 176                 relative2<div class="inline blue">fixed</div>
 177             </span>
 178         </div>
 179     </div>
 180
 181 </body>
 182 </html>