427129-table-caption.html (6744B)
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"> 9 10 html, body { margin: 0; } 11 12 .rtl { direction: rtl; } 13 14 .contain { 15 background: aqua; color: black; 16 height: 4px; margin: 1px 50px; 17 padding-top: 0.1px; /* needed for some reason (XXX WHY?) */ 18 } 19 20 .fl, .fr { height: 2px; } 21 .fl { float: left; width: 56px; } 22 .fr { float: right; width: 73px; } 23 24 .t { background: blue; height: 1px; width: 100px; border-spacing: 0; } 25 .t caption { background: purple; height: 1px; width: 100px; } 26 .t td { padding: 0; } 27 28 </style> 29 </head> 30 <body> 31 32 <!-- 33 34 WARNING: Both this test and the reference are constructed to test 35 our current behavior, which is far from optimal in a number of cases. 36 Fixing the test to test better behavior is encouraged when such 37 behavior is implemented. In particular: 38 * making the effect of the caption's side margin make sense for 'top' 39 and 'bottom' captions 40 * making 'left' and 'right' captions behave sensibly 41 42 To test the behavior under resizing, every test in this page is 43 repeated three times, once in a container one pixel above the 44 transition width, once at the transition width (just fitting), and 45 once in a container a pixel below the transition width. 46 47 --> 48 49 <div style="width: 405px"> 50 <div class="contain"> 51 <div class="fl"></div> 52 <div class="fr"></div> 53 <table class="t" style="margin: 0 15px 0 55px; caption-side: bottom"> 54 <caption style="margin: 0 15px 0 60px"></caption> 55 <tr><td></td></tr> 56 </table> 57 </div> 58 </div> 59 60 <div style="width: 404px"> 61 <div class="contain"> 62 <div class="fl"></div> 63 <div class="fr"></div> 64 <table class="t" style="margin: 0 15px 0 55px; caption-side: bottom"> 65 <caption style="margin: 0 15px 0 60px"></caption> 66 <tr><td></td></tr> 67 </table> 68 </div> 69 </div> 70 71 <div style="width: 403px"> 72 <div class="contain"> 73 <div class="fl"></div> 74 <div class="fr"></div> 75 <table class="t" style="margin: 0 15px 0 55px; caption-side: bottom"> 76 <caption style="margin: 0 15px 0 60px"></caption> 77 <tr><td></td></tr> 78 </table> 79 </div> 80 </div> 81 82 <div style="width: 405px"> 83 <div class="contain"> 84 <div class="fl"></div> 85 <div class="fr"></div> 86 <table class="t" style="margin: 0 15px 0 56px; caption-side: top"> 87 <caption style="margin: 0 15px 0 60px"></caption> 88 <tr><td></td></tr> 89 </table> 90 </div> 91 </div> 92 93 <div style="width: 404px"> 94 <div class="contain"> 95 <div class="fl"></div> 96 <div class="fr"></div> 97 <table class="t" style="margin: 0 15px 0 56px; caption-side: top"> 98 <caption style="margin: 0 15px 0 60px"></caption> 99 <tr><td></td></tr> 100 </table> 101 </div> 102 </div> 103 104 <div style="width: 403px"> 105 <div class="contain"> 106 <div class="fl"></div> 107 <div class="fr"></div> 108 <table class="t" style="margin: 0 15px 0 56px; caption-side: top"> 109 <caption style="margin: 0 15px 0 60px"></caption> 110 <tr><td></td></tr> 111 </table> 112 </div> 113 </div> 114 115 <div style="width: 406px"> 116 <div class="contain"> 117 <div class="fl"></div> 118 <div class="fr"></div> 119 <table class="t" style="margin: 0 15px 0 57px; caption-side: bottom"> 120 <caption style="margin: 0 15px 0 60px"></caption> 121 <tr><td></td></tr> 122 </table> 123 </div> 124 </div> 125 126 <div style="width: 405px"> 127 <div class="contain"> 128 <div class="fl"></div> 129 <div class="fr"></div> 130 <table class="t" style="margin: 0 15px 0 57px; caption-side: bottom"> 131 <caption style="margin: 0 15px 0 60px"></caption> 132 <tr><td></td></tr> 133 </table> 134 </div> 135 </div> 136 137 <div style="width: 404px"> 138 <div class="contain"> 139 <div class="fl"></div> 140 <div class="fr"></div> 141 <table class="t" style="margin: 0 15px 0 57px; caption-side: bottom"> 142 <caption style="margin: 0 15px 0 60px"></caption> 143 <tr><td></td></tr> 144 </table> 145 </div> 146 </div> 147 148 <div style="width: 425px"> 149 <div class="contain rtl"> 150 <div class="fl"></div> 151 <div class="fr"></div> 152 <table class="t" style="margin: 0 72px 0 15px; caption-side: bottom"> 153 <caption style="margin: 0 80px 0 15px"></caption> 154 <tr><td></td></tr> 155 </table> 156 </div> 157 </div> 158 159 <div style="width: 424px"> 160 <div class="contain rtl"> 161 <div class="fl"></div> 162 <div class="fr"></div> 163 <table class="t" style="margin: 0 72px 0 15px; caption-side: bottom"> 164 <caption style="margin: 0 80px 0 15px"></caption> 165 <tr><td></td></tr> 166 </table> 167 </div> 168 </div> 169 170 <div style="width: 423px"> 171 <div class="contain rtl"> 172 <div class="fl"></div> 173 <div class="fr"></div> 174 <table class="t" style="margin: 0 72px 0 15px; caption-side: bottom"> 175 <caption style="margin: 0 80px 0 15px"></caption> 176 <tr><td></td></tr> 177 </table> 178 </div> 179 </div> 180 181 <div style="width: 425px"> 182 <div class="contain rtl"> 183 <div class="fl"></div> 184 <div class="fr"></div> 185 <table class="t" style="margin: 0 73px 0 15px; caption-side: top"> 186 <caption style="margin: 0 80px 0 15px"></caption> 187 <tr><td></td></tr> 188 </table> 189 </div> 190 </div> 191 192 <div style="width: 424px"> 193 <div class="contain rtl"> 194 <div class="fl"></div> 195 <div class="fr"></div> 196 <table class="t" style="margin: 0 73px 0 15px; caption-side: top"> 197 <caption style="margin: 0 80px 0 15px"></caption> 198 <tr><td></td></tr> 199 </table> 200 </div> 201 </div> 202 203 <div style="width: 423px"> 204 <div class="contain rtl"> 205 <div class="fl"></div> 206 <div class="fr"></div> 207 <table class="t" style="margin: 0 73px 0 15px; caption-side: top"> 208 <caption style="margin: 0 80px 0 15px"></caption> 209 <tr><td></td></tr> 210 </table> 211 </div> 212 </div> 213 214 <div style="width: 426px"> 215 <div class="contain rtl"> 216 <div class="fl"></div> 217 <div class="fr"></div> 218 <table class="t" style="margin: 0 74px 0 15px; caption-side: bottom"> 219 <caption style="margin: 0 80px 0 15px"></caption> 220 <tr><td></td></tr> 221 </table> 222 </div> 223 </div> 224 225 <div style="width: 425px"> 226 <div class="contain rtl"> 227 <div class="fl"></div> 228 <div class="fr"></div> 229 <table class="t" style="margin: 0 74px 0 15px; caption-side: bottom"> 230 <caption style="margin: 0 80px 0 15px"></caption> 231 <tr><td></td></tr> 232 </table> 233 </div> 234 </div> 235 236 <div style="width: 424px"> 237 <div class="contain rtl"> 238 <div class="fl"></div> 239 <div class="fr"></div> 240 <table class="t" style="margin: 0 74px 0 15px; caption-side: bottom"> 241 <caption style="margin: 0 80px 0 15px"></caption> 242 <tr><td></td></tr> 243 </table> 244 </div> 245 </div> 246 247 </body> 248 </html>