28 background-color: lime;
32 background-color: cyan;
36 background-color: silver;
44 display: inline-block;
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>
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>
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>
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>
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>
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;">
85 <span class=
"relative green" style=
"left: 100px;">
86 relative2
<div class=
"inline blue">fixed
</div>
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;">
95 <span class=
"relative green" style=
"left: 100px;">
96 relative2
<div class=
"inline blue">fixed
</div>
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;">
105 <span class=
"relative green" style=
"right: 100px;">
106 relative2
<div class=
"inline blue">fixed
</div>
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;">
115 <span class=
"relative green" style=
"right: 100px;">
116 relative2
<div class=
"inline blue">fixed
</div>
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;">
125 <span class=
"relative green" style=
"left: 100px;">
126 relative2
<div class=
"inline blue">fixed
</div>
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;">
135 <span class=
"relative green" style=
"left: 100px;">
136 relative2
<div class=
"inline blue">fixed
</div>
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;">
145 <span class=
"relative green" style=
"right: 100px;">
146 relative2
<div class=
"inline blue">fixed
</div>
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;">
155 <span class=
"relative green" style=
"right: 100px;">
156 relative2
<div class=
"inline blue">fixed
</div>
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;">
165 <span class=
"relative green" style=
"left: 25%;">
166 relative2
<div class=
"inline blue">fixed
</div>
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;">
175 <span class=
"relative green" style=
"left: 25%;">
176 relative2
<div class=
"inline blue">fixed
</div>