OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 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> |
4 </head> | 43 </head> |
5 <body style="position:fixed; left:150px;"> | 44 <body> |
6 <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/d
etail?id=31286">31286</a>. css rendering bug : fixed-position-element and 'left'
.</h3> | 45 <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issu
es/detail?id=31286">31286</a>. css rendering bug : fixed-position-element and 'l
eft'.</h3> |
7 <h4>If fixed position inline element does not have left and/or right position th
en it should render as normal flow.</h4> | 46 <p>If fixed position inline element does not have left and/or right position
then it should render as normal flow.</p> |
8 | 47 |
9 <h5> | 48 <h5>Case 1: fixed text box (blue) should be just after relative text box (gr
een).</h5> |
10 Case 1 : fixed text box should be just after relative text box. | 49 <div class="container"> |
11 <br/> | 50 <div class="main relative green" style="left: 100px;"> |
| 51 relative |
| 52 <span class="fixed blue"> |
| 53 fixed |
| 54 </span> |
| 55 </div> |
| 56 </div> |
12 | 57 |
13 <div style="position:relative; left:100px; background:green; width:400px;"> | 58 <h5>Case 2: fixed text box (blue) should be just before relative text box (g
reen).</h5> |
14 relative | 59 <div class="container"> |
15 <span style="position:fixed; background:red;"> | 60 <div class="main relative green rtl" style="left: 100px;"> |
16 fixed | 61 relative |
17 </span> | 62 <span class="fixed blue"> |
18 </span> | 63 fixed |
19 </div> | 64 </span> |
| 65 </div> |
| 66 </div> |
20 | 67 |
21 Case 2 : fixed text box should be just before relative text box. | 68 <h5>Case 3: fixed text box (blue) should be just after relative text box (gr
een).</h5> |
22 <br/> | 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> |
23 | 77 |
24 <div style="position:relative; left:100px; background:green; direction:rtl; widt
h:400px;"> | 78 <h5>Case 4: fixed text box (blue) should be just before relative text box (g
reen).</h5> |
25 relative | 79 <div class="container"> |
26 <span style="position:fixed; background:red;"> | 80 <div class="main relative green rtl" style="right: 100px;"> |
27 fixed | 81 relative |
28 </span> | 82 <span class="fixed blue"> |
29 </span> | 83 fixed |
30 </div> | 84 </span> |
| 85 </div> |
| 86 </div> |
31 | 87 |
32 Case 3 : fixed text box should be just after relative text box. | 88 <h5>Case 5: fixed text box (blue) should be just after relative2 text box (g
reen).</h5> |
33 <br/> | 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> |
34 | 100 |
35 <div style="position:relative; right:100px; background:green; width:400px;"> | 101 <h5>Case 6: fixed text box (blue) should be after relative text box (grey) i
n some distance and before the other relative2 text box (green) in some distance
.</h5> |
36 relative | 102 <div class="container"> |
37 <span style="position:fixed; background:red;"> | 103 <div class="main relative grey rtl" style="left: 100px;"> |
38 fixed | 104 relative |
39 </span> | 105 <span class="relative green" style="left: 100px;"> |
40 </span> | 106 relative2 |
41 </div> | 107 <span class="fixed blue"> |
| 108 fixed |
| 109 </span> |
| 110 </span> |
| 111 </div> |
| 112 </div> |
42 | 113 |
43 Case 4 : fixed text box should be just before relative text box. | 114 <h5>Case 7: fixed text box (blue) should be just after relative2 text box (g
reen).</h5> |
44 <br/> | 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> |
45 | 126 |
46 <div style="position:relative; right:100px; background:green; direction:rtl; wid
th:400px;"> | 127 <h5>Case 8: fixed text box (blue) should be before relative2 text box (green
) in some distance.</h5> |
47 relative | 128 <div class="container"> |
48 <span style="position:fixed; background:red;"> | 129 <div class="main relative grey rtl" style="left: 100px;"> |
49 fixed | 130 relative |
50 </span> | 131 <span class="relative green" style="right: 100px;"> |
51 </span> | 132 relative2 |
52 </div> | 133 <span class="fixed blue"> |
| 134 fixed |
| 135 </span> |
| 136 </span> |
| 137 </div> |
| 138 </div> |
53 | 139 |
54 Case 5 : fixed text box should be just after relative2 text box. | 140 <h5>Case 9: fixed text box (blue) should be just after relative2 text box (g
reen).</h5> |
55 <br/> | 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> |
56 | 152 |
57 <div style="position:relative; left:100px; background:gray; width:400px;"> | 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> |
58 relative | 154 <div class="container"> |
59 <span style="position:relative; left:100px; background:green;"> | 155 <div class="main relative grey rtl" style="right: 100px;"> |
60 relative2 | 156 relative |
61 <span style="position:fixed; background:red;"> | 157 <span class="relative green" style="left: 100px;"> |
62 fixed | 158 relative2 |
63 </span> | 159 <span class="fixed blue"> |
64 </span> | 160 fixed |
65 </div> | 161 </span> |
| 162 </span> |
| 163 </div> |
| 164 </div> |
66 | 165 |
67 Case 6 : fixed text box should be after relative text box in some distance and b
efore relative2 in some distance. | 166 <h5>Case 11: fixed text box (blue) should be just after relative2 text box (
green).</h5> |
68 <br/> | 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> |
69 | 178 |
70 <div style="position:relative; left:100px; background:gray; direction:rtl; width
:400px;"> | 179 <h5>Case 12: fixed text box (blue) should be before relative2 text box (gree
n) in some distance.</h5> |
71 relative | 180 <div class="container"> |
72 <span style="position:relative; left:100px; background:green;"> | 181 <div class="main relative grey rtl" style="right: 100px;"> |
73 relative2 | 182 relative |
74 <span style="position:fixed; background:red;"> | 183 <span class="relative green" style="right: 100px;"> |
75 fixed | 184 relative2 |
76 </span> | 185 <span class="fixed blue"> |
77 </span> | 186 fixed |
78 </div> | 187 </span> |
| 188 </span> |
| 189 </div> |
| 190 </div> |
79 | 191 |
80 Case 7 : fixed text box should be just after relative2 text box. | 192 </body> |
81 <br/> | 193 </html> |
82 | |
83 <div style="position:relative; left:100px; background:gray; width:400px;"> | |
84 relative | |
85 <span style="position:relative; right:100px; background:green;"> | |
86 relative2 | |
87 <span style="position:fixed; background:red;"> | |
88 fixed | |
89 </span> | |
90 </span> | |
91 </div> | |
92 | |
93 Case 8 : fixed text box should be before relative2 text box in some distance. | |
94 <br/> | |
95 | |
96 <div style="position:relative; left:100px; background:gray; direction:rtl; width
:400px;"> | |
97 relative | |
98 <span style="position:relative; right:100px; background:green;"> | |
99 relative2 | |
100 <span style="position:fixed; background:red;"> | |
101 fixed | |
102 </span> | |
103 </span> | |
104 </div> | |
105 | |
106 Case 9 : fixed text box should be just after relative2 text box. | |
107 <br/> | |
108 | |
109 <div style="position:relative; right:100px; background:gray; width:400px;"> | |
110 relative | |
111 <span style="position:relative; left:100px; background:green;"> | |
112 relative2 | |
113 <span style="position:fixed; background:red;"> | |
114 fixed | |
115 </span> | |
116 </span> | |
117 </div> | |
118 | |
119 Case 10 : fixed text box should be after relative text box in some distance and
before relative2 in some distance. | |
120 <br/> | |
121 | |
122 <div style="position:relative; right:100px; background:gray; direction:rtl; widt
h:400px;"> | |
123 relative | |
124 <span style="position:relative; left:100px; background:green;"> | |
125 relative2 | |
126 <span style="position:fixed; background:red;"> | |
127 fixed | |
128 </span> | |
129 </span> | |
130 </div> | |
131 | |
132 Case 11 : fixed text box should be just after relative2 text box. | |
133 <br/> | |
134 | |
135 <div style="position:relative; right:100px; background:gray; width:400px;"> | |
136 relative | |
137 <span style="position:relative; right:100px; background:green;"> | |
138 relative2 | |
139 <span style="position:fixed; background:red;"> | |
140 fixed | |
141 </span> | |
142 </span> | |
143 </div> | |
144 | |
145 Case 12 : fixed text box should be before relative2 text box in some distance. | |
146 <br/> | |
147 | |
148 <div style="position:relative; right:100px; background:gray; direction:rtl; widt
h:400px;"> | |
149 relative | |
150 <span style="position:relative; right:100px; background:green;"> | |
151 relative2 | |
152 <span style="position:fixed; background:red;"> | |
153 fixed | |
154 </span> | |
155 </span> | |
156 </div> | |
157 | |
158 </h5> | |
OLD | NEW |