Fri, 16 Jan 2015 18:13:44 +0100
Integrate suggestion from review to improve consistency with existing code.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html lang="en-US">
4 <head>
5 <title>Reftest, bug 427129</title>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <meta http-equiv="Content-Style-Type" content="text/css">
8 <style type="text/css">
10 html, body { margin: 0; }
12 .contain {
13 background: aqua; color: black;
14 height: 10px; margin: 2px 50px;
15 padding-top: 0.1px; /* needed for some reason (XXX WHY?) */
16 }
18 .fl, .fr { height: 5px; }
19 .fl { float: left; width: 56px; }
20 .fr { float: right; width: 73px; }
22 .t { overflow: hidden; background: blue; height: 5px; width: 85px;
23 border-left: 1px solid blue; padding-left: 2px;
24 padding-right: 4px; border-right: 8px solid blue; }
26 </style>
27 </head>
28 <body>
30 <div class="contain">
31 <div class="fl"></div>
32 <div class="fr"></div>
33 <div class="t"></div>
34 </div>
36 <div class="contain">
37 <div class="fl"></div>
38 <div class="fr"></div>
39 <div class="t" style="margin-left: 30px"></div>
40 </div>
42 <div class="contain">
43 <div class="fl"></div>
44 <div class="fr"></div>
45 <div class="t" style="margin-left: 56px"></div>
46 </div>
48 <div class="contain">
49 <div class="fl"></div>
50 <div class="fr"></div>
51 <div class="t" style="margin-left: 73px"></div>
52 </div>
54 <div class="contain">
55 <div class="fl"></div>
56 <div class="fr"></div>
57 <div class="t" style="margin-left: 100px"></div>
58 </div>
60 <div class="contain">
61 <div class="fl"></div>
62 <div class="fr"></div>
63 <div class="t" style="margin-left: auto"></div>
64 </div>
66 <div class="contain">
67 <div class="fl"></div>
68 <div class="fr"></div>
69 <div class="t" style="margin-left: auto; margin-right: 30px"></div>
70 </div>
72 <div class="contain">
73 <div class="fl"></div>
74 <div class="fr"></div>
75 <div class="t" style="margin-left: auto; margin-right: 56px"></div>
76 </div>
78 <div class="contain">
79 <div class="fl"></div>
80 <div class="fr"></div>
81 <div class="t" style="margin-left: auto; margin-right: 73px"></div>
82 </div>
84 <div class="contain">
85 <div class="fl"></div>
86 <div class="fr"></div>
87 <div class="t" style="margin-left: auto; margin-right: 100px"></div>
88 </div>
90 <!-- Remember that the extra end-edge margin gets ignored -->
91 <div style="width: 300px">
92 <div class="contain">
93 <div class="fl"></div>
94 <div class="fr"></div>
95 <div class="t" style="width: 56px"></div>
96 </div>
98 <div class="contain">
99 <div class="fl"></div>
100 <div class="fr"></div>
101 <div class="t" style="margin: 0 15px; width: 56px"></div>
102 </div>
104 <div class="contain">
105 <div class="fl"></div>
106 <div class="fr"></div>
107 <div class="t" style="width: 57px"></div>
108 </div>
110 <div class="contain">
111 <div class="fl"></div>
112 <div class="fr"></div>
113 <div class="t" style="margin: 0 15px; width: 57px"></div>
114 </div>
116 <div class="contain">
117 <div class="fl"></div>
118 <div class="fr"></div>
119 <div class="t" style="margin: 0 15px 0 56px; width: 56px"></div>
120 </div>
122 <div class="contain">
123 <div class="fl"></div>
124 <div class="fr"></div>
125 <div class="t" style="margin: 0 15px 0 57px; width: 56px"></div>
126 </div>
128 <div class="contain">
129 <div class="fl"></div>
130 <div class="fr"></div>
131 <div class="t" style="margin: 0 73px 0 15px; width: 56px"></div>
132 </div>
134 <div class="contain">
135 <div class="fl"></div>
136 <div class="fr"></div>
137 <div class="t" style="margin: 0 74px 0 15px; width: 56px"></div>
138 </div>
140 <div class="contain">
141 <div class="fl"></div>
142 <div class="fr"></div>
143 <div class="t" style="width: 28%"></div>
144 </div>
146 <div class="contain">
147 <div class="fl"></div>
148 <div class="fr"></div>
149 <div class="t" style="margin: 0 15px; width: 28%"></div>
150 </div>
152 <div class="contain">
153 <div class="fl"></div>
154 <div class="fr"></div>
155 <div class="t" style="width: 29%"></div>
156 </div>
158 <div class="contain">
159 <div class="fl"></div>
160 <div class="fr"></div>
161 <div class="t" style="margin: 0 15px; width: 29%"></div>
162 </div>
164 <div class="contain">
165 <div class="fl"></div>
166 <div class="fr"></div>
167 <div class="t" style="margin: 0 15px 0 56px; width: 28%"></div>
168 </div>
170 <div class="contain">
171 <div class="fl"></div>
172 <div class="fr"></div>
173 <div class="t" style="margin: 0 15px 0 57px; width: 28%"></div>
174 </div>
176 <div class="contain">
177 <div class="fl"></div>
178 <div class="fr"></div>
179 <div class="t" style="margin: 0 73px 0 15px; width: 28%"></div>
180 </div>
182 <div class="contain">
183 <div class="fl"></div>
184 <div class="fr"></div>
185 <div class="t" style="margin: 0 74px 0 15px; width: 28%"></div>
186 </div>
187 </div>
189 </body>
190 </html>