layout/reftests/bugs/427129-table-caption-ref.html@141e0f1194b1
layout/reftests/bugs/427129-table-caption-ref.html
Wed, 31 Dec 2014 07:16:47 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 07:16:47 +0100
- branch
- TOR_BUG_9701
- changeset 3
- 141e0f1194b1
- permissions
- -rw-r--r--
Revert simplistic fix pending revisit of Mozilla integration attempt.
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: 4px; margin: 1px 50px;
15 padding-top: 0.1px; /* needed for some reason (XXX WHY?) */
16 }
18 div.pushed { height: 2px; }
19 div.t { background: blue; height: 1px; width: 100px; }
20 div.caption { background: purple; height: 1px; width: 100px; }
21 div.side { display: inline-block; vertical-align: top; }
23 </style>
24 </head>
25 <body>
27 <!--
29 WARNING: Both this test and the reference are constructed to test
30 our current behavior, which is far from optimal in a number of cases.
31 Fixing the test to test better behavior is encouraged when such
32 behavior is implemented.
34 To test the behavior under resizing, every test in this page is
35 repeated three times, once in a container one pixel above the
36 transition width, once at the transition width (just fitting), and
37 once in a container a pixel below the transition width.
39 -->
41 <div style="width: 405px">
42 <div class="contain">
43 <div class="t" style="margin-left: 56px"></div>
44 <div class="caption" style="margin-left: 116px"></div>
45 </div>
46 </div>
48 <div style="width: 404px">
49 <div class="contain">
50 <div class="t" style="margin-left: 56px"></div>
51 <div class="caption" style="margin-left: 116px"></div>
52 </div>
53 </div>
55 <div style="width: 403px">
56 <div class="contain">
57 <div class="pushed"></div>
58 <div class="t" style="margin-left: 55px"></div>
59 <div class="caption" style="margin-left: 115px"></div>
60 </div>
61 </div>
63 <div style="width: 405px">
64 <div class="contain">
65 <div class="caption" style="margin-left: 116px"></div>
66 <div class="t" style="margin-left: 56px"></div>
67 </div>
68 </div>
70 <div style="width: 404px">
71 <div class="contain">
72 <div class="caption" style="margin-left: 116px"></div>
73 <div class="t" style="margin-left: 56px"></div>
74 </div>
75 </div>
77 <div style="width: 403px">
78 <div class="contain">
79 <div class="pushed"></div>
80 <div class="caption" style="margin-left: 116px"></div>
81 <div class="t" style="margin-left: 56px"></div>
82 </div>
83 </div>
85 <div style="width: 406px">
86 <div class="contain">
87 <div class="t" style="margin-left: 57px"></div>
88 <div class="caption" style="margin-left: 117px"></div>
89 </div>
90 </div>
92 <div style="width: 405px">
93 <div class="contain">
94 <div class="t" style="margin-left: 57px"></div>
95 <div class="caption" style="margin-left: 117px"></div>
96 </div>
97 </div>
99 <div style="width: 404px">
100 <div class="contain">
101 <div class="pushed"></div>
102 <div class="t" style="margin-left: 57px"></div>
103 <div class="caption" style="margin-left: 117px"></div>
104 </div>
105 </div>
107 <div style="width: 401px">
108 <div class="contain">
109 <div class="caption" style="margin-left: 112px"></div>
110 <div class="t" style="margin-left: 56px"></div>
111 </div>
112 </div>
114 <div style="width: 400px">
115 <div class="contain">
116 <div class="caption" style="margin-left: 112px"></div>
117 <div class="t" style="margin-left: 56px"></div>
118 </div>
119 </div>
121 <div style="width: 399px">
122 <div class="contain">
123 <div class="pushed"></div>
124 <div class="caption" style="margin-left: 112px"></div>
125 <div class="t" style="margin-left: 56px"></div>
126 </div>
127 </div>
129 <div style="width: 401px">
130 <div class="contain">
131 <div class="t" style="margin-left: 56px"></div>
132 <div class="caption" style="margin-left: 112px"></div>
133 </div>
134 </div>
136 <div style="width: 400px">
137 <div class="contain">
138 <div class="t" style="margin-left: 56px"></div>
139 <div class="caption" style="margin-left: 112px"></div>
140 </div>
141 </div>
143 <div style="width: 399px">
144 <div class="contain">
145 <div class="pushed"></div>
146 <div class="t" style="margin-left: 55px"></div>
147 <div class="caption" style="margin-left: 111px"></div>
148 </div>
149 </div>
151 <div style="width: 400px">
152 <div class="contain">
153 <div class="t" style="margin-left: 56px"></div>
154 <div class="caption" style="margin-left: 111px"></div>
155 </div>
156 </div>
158 <div style="width: 399px">
159 <div class="contain">
160 <div class="t" style="margin-left: 56px"></div>
161 <div class="caption" style="margin-left: 111px"></div>
162 </div>
163 </div>
165 <div style="width: 398px">
166 <div class="contain">
167 <div class="pushed"></div>
168 <div class="t" style="margin-left: 56px"></div>
169 <div class="caption" style="margin-left: 111px"></div>
170 </div>
171 </div>
173 <div style="width: 400px">
174 <div class="contain">
175 <div class="caption" style="margin-left: 111px"></div>
176 <div class="t" style="margin-left: 56px"></div>
177 </div>
178 </div>
180 <div style="width: 399px">
181 <div class="contain">
182 <div class="caption" style="margin-left: 111px"></div>
183 <div class="t" style="margin-left: 56px"></div>
184 </div>
185 </div>
187 <div style="width: 398px">
188 <div class="contain">
189 <div class="pushed"></div>
190 <div class="caption" style="margin-left: 110px"></div>
191 <div class="t" style="margin-left: 55px"></div>
192 </div>
193 </div>
195 <div style="width: 402px">
196 <div class="contain">
197 <div class="t" style="margin-left: 57px"></div>
198 <div class="caption" style="margin-left: 113px"></div>
199 </div>
200 </div>
202 <div style="width: 401px">
203 <div class="contain">
204 <div class="t" style="margin-left: 57px"></div>
205 <div class="caption" style="margin-left: 113px"></div>
206 </div>
207 </div>
209 <div style="width: 400px">
210 <div class="contain">
211 <div class="pushed"></div>
212 <div class="t" style="margin-left: 57px"></div>
213 <div class="caption" style="margin-left: 113px"></div>
214 </div>
215 </div>
217 <div style="width: 402px">
218 <div class="contain">
219 <div class="caption" style="margin-left: 113px"></div>
220 <div class="t" style="margin-left: 56px"></div>
221 </div>
222 </div>
224 <div style="width: 401px">
225 <div class="contain">
226 <div class="caption" style="margin-left: 113px"></div>
227 <div class="t" style="margin-left: 56px"></div>
228 </div>
229 </div>
231 <div style="width: 400px">
232 <div class="contain">
233 <div class="pushed"></div>
234 <div class="caption" style="margin-left: 113px"></div>
235 <div class="t" style="margin-left: 56px"></div>
236 </div>
237 </div>
239 <div style="width: 656px">
240 <div class="contain">
241 <div class="side caption" style="margin-left: 155px"></div
242 ><div class="side t" style="margin-left: 100px"></div>
243 </div>
244 </div>
246 <div style="width: 655px">
247 <div class="contain">
248 <div class="side caption" style="margin-left: 155px"></div
249 ><div class="side t" style="margin-left: 100px"></div>
250 </div>
251 </div>
253 <div style="width: 654px">
254 <div class="contain">
255 <div class="pushed"></div>
256 <div class="side caption" style="margin-left: 155px"></div
257 ><div class="side t" style="margin-left: 100px"></div>
258 </div>
259 </div>
261 <div style="width: 657px">
262 <div class="contain">
263 <div class="side caption" style="margin-left: 156px"></div
264 ><div class="side t" style="margin-left: 100px"></div>
265 </div>
266 </div>
268 <div style="width: 656px">
269 <div class="contain">
270 <div class="side caption" style="margin-left: 156px"></div
271 ><div class="side t" style="margin-left: 100px"></div>
272 </div>
273 </div>
275 <div style="width: 655px">
276 <div class="contain">
277 <div class="pushed"></div>
278 <div class="side caption" style="margin-left: 156px"></div
279 ><div class="side t" style="margin-left: 100px"></div>
280 </div>
281 </div>
283 <div style="width: 658px">
284 <div class="contain">
285 <div class="side caption" style="margin-left: 157px"></div
286 ><div class="side t" style="margin-left: 100px"></div>
287 </div>
288 </div>
290 <div style="width: 657px">
291 <div class="contain">
292 <div class="side caption" style="margin-left: 157px"></div
293 ><div class="side t" style="margin-left: 100px"></div>
294 </div>
295 </div>
297 <div style="width: 656px">
298 <div class="contain">
299 <div class="pushed"></div>
300 <div class="side caption" style="margin-left: 157px"></div
301 ><div class="side t" style="margin-left: 100px"></div>
302 </div>
303 </div>
305 <div style="width: 657px">
306 <div class="contain">
307 <div class="side t" style="margin-left: 56px"></div
308 ><div class="side caption" style="margin-left: 100px"></div>
309 </div>
310 </div>
312 <div style="width: 656px">
313 <div class="contain">
314 <div class="side t" style="margin-left: 56px"></div
315 ><div class="side caption" style="margin-left: 100px"></div>
316 </div>
317 </div>
319 <div style="width: 655px">
320 <div class="contain">
321 <div class="pushed"></div>
322 <div class="side t" style="margin-left: 55px"></div
323 ><div class="side caption" style="margin-left: 100px"></div>
324 </div>
325 </div>
327 <div style="width: 657px">
328 <div class="contain">
329 <div class="side t" style="margin-left: 56px"></div
330 ><div class="side caption" style="margin-left: 100px"></div>
331 </div>
332 </div>
334 <div style="width: 656px">
335 <div class="contain">
336 <div class="side t" style="margin-left: 56px"></div
337 ><div class="side caption" style="margin-left: 100px"></div>
338 </div>
339 </div>
341 <div style="width: 655px">
342 <div class="contain">
343 <div class="pushed"></div>
344 <div class="side t" style="margin-left: 56px"></div
345 ><div class="side caption" style="margin-left: 100px"></div>
346 </div>
347 </div>
349 <div style="width: 658px">
350 <div class="contain">
351 <div class="side t" style="margin-left: 57px"></div
352 ><div class="side caption" style="margin-left: 100px"></div>
353 </div>
354 </div>
356 <div style="width: 657px">
357 <div class="contain">
358 <div class="side t" style="margin-left: 57px"></div
359 ><div class="side caption" style="margin-left: 100px"></div>
360 </div>
361 </div>
363 <div style="width: 656px">
364 <div class="contain">
365 <div class="pushed"></div>
366 <div class="side t" style="margin-left: 57px"></div
367 ><div class="side caption" style="margin-left: 100px"></div>
368 </div>
369 </div>
371 <div style="width: 425px">
372 <div class="contain rtl">
373 <div class="t" style="margin-left: 152px"></div>
374 <div class="caption" style="margin-left: 72px"></div>
375 </div>
376 </div>
378 <div style="width: 424px">
379 <div class="contain rtl">
380 <div class="t" style="margin-left: 151px"></div>
381 <div class="caption" style="margin-left: 71px"></div>
382 </div>
383 </div>
385 <div style="width: 423px">
386 <div class="contain rtl">
387 <div class="pushed"></div>
388 <div class="t" style="margin-left: 151px"></div>
389 <div class="caption" style="margin-left: 71px"></div>
390 </div>
391 </div>
393 <div style="width: 425px">
394 <div class="contain rtl">
395 <div class="caption" style="margin-left: 72px"></div>
396 <div class="t" style="margin-left: 152px"></div>
397 </div>
398 </div>
400 <div style="width: 424px">
401 <div class="contain rtl">
402 <div class="caption" style="margin-left: 71px"></div>
403 <div class="t" style="margin-left: 151px"></div>
404 </div>
405 </div>
407 <div style="width: 423px">
408 <div class="contain rtl">
409 <div class="pushed"></div>
410 <div class="caption" style="margin-left: 70px"></div>
411 <div class="t" style="margin-left: 150px"></div>
412 </div>
413 </div>
415 <div style="width: 426px">
416 <div class="contain rtl">
417 <div class="t" style="margin-left: 152px"></div>
418 <div class="caption" style="margin-left: 72px"></div>
419 </div>
420 </div>
422 <div style="width: 425px">
423 <div class="contain rtl">
424 <div class="t" style="margin-left: 151px"></div>
425 <div class="caption" style="margin-left: 71px"></div>
426 </div>
427 </div>
429 <div style="width: 424px">
430 <div class="contain rtl">
431 <div class="pushed"></div>
432 <div class="t" style="margin-left: 150px"></div>
433 <div class="caption" style="margin-left: 70px"></div>
434 </div>
435 </div>
437 <div style="width: 418px">
438 <div class="contain rtl">
439 <div class="caption" style="margin-left: 72px"></div>
440 <div class="t" style="margin-left: 145px"></div>
441 </div>
442 </div>
444 <div style="width: 417px">
445 <div class="contain rtl">
446 <div class="caption" style="margin-left: 71px"></div>
447 <div class="t" style="margin-left: 144px"></div>
448 </div>
449 </div>
451 <div style="width: 416px">
452 <div class="contain rtl">
453 <div class="pushed"></div>
454 <div class="caption" style="margin-left: 70px"></div>
455 <div class="t" style="margin-left: 143px"></div>
456 </div>
457 </div>
459 <div style="width: 418px">
460 <div class="contain rtl">
461 <div class="t" style="margin-left: 145px"></div>
462 <div class="caption" style="margin-left: 72px"></div>
463 </div>
464 </div>
466 <div style="width: 417px">
467 <div class="contain rtl">
468 <div class="t" style="margin-left: 144px"></div>
469 <div class="caption" style="margin-left: 71px"></div>
470 </div>
471 </div>
473 <div style="width: 416px">
474 <div class="contain rtl">
475 <div class="pushed"></div>
476 <div class="t" style="margin-left: 144px"></div>
477 <div class="caption" style="margin-left: 71px"></div>
478 </div>
479 </div>
481 <div style="width: 417px">
482 <div class="contain rtl">
483 <div class="t" style="margin-left: 144px"></div>
484 <div class="caption" style="margin-left: 72px"></div>
485 </div>
486 </div>
488 <div style="width: 416px">
489 <div class="contain rtl">
490 <div class="t" style="margin-left: 143px"></div>
491 <div class="caption" style="margin-left: 71px"></div>
492 </div>
493 </div>
495 <div style="width: 415px">
496 <div class="contain rtl">
497 <div class="pushed"></div>
498 <div class="t" style="margin-left: 142px"></div>
499 <div class="caption" style="margin-left: 70px"></div>
500 </div>
501 </div>
503 <div style="width: 417px">
504 <div class="contain rtl">
505 <div class="caption" style="margin-left: 72px"></div>
506 <div class="t" style="margin-left: 144px"></div>
507 </div>
508 </div>
510 <div style="width: 416px">
511 <div class="contain rtl">
512 <div class="caption" style="margin-left: 71px"></div>
513 <div class="t" style="margin-left: 143px"></div>
514 </div>
515 </div>
517 <div style="width: 415px">
518 <div class="contain rtl">
519 <div class="pushed"></div>
520 <div class="caption" style="margin-left: 71px"></div>
521 <div class="t" style="margin-left: 143px"></div>
522 </div>
523 </div>
525 <div style="width: 419px">
526 <div class="contain rtl">
527 <div class="t" style="margin-left: 145px"></div>
528 <div class="caption" style="margin-left: 72px"></div>
529 </div>
530 </div>
532 <div style="width: 418px">
533 <div class="contain rtl">
534 <div class="t" style="margin-left: 144px"></div>
535 <div class="caption" style="margin-left: 71px"></div>
536 </div>
537 </div>
539 <div style="width: 417px">
540 <div class="contain rtl">
541 <div class="pushed"></div>
542 <div class="t" style="margin-left: 143px"></div>
543 <div class="caption" style="margin-left: 70px"></div>
544 </div>
545 </div>
547 <div style="width: 419px">
548 <div class="contain rtl">
549 <div class="caption" style="margin-left: 72px"></div>
550 <div class="t" style="margin-left: 146px"></div>
551 </div>
552 </div>
554 <div style="width: 418px">
555 <div class="contain rtl">
556 <div class="caption" style="margin-left: 71px"></div>
557 <div class="t" style="margin-left: 145px"></div>
558 </div>
559 </div>
561 <div style="width: 417px">
562 <div class="contain rtl">
563 <div class="pushed"></div>
564 <div class="caption" style="margin-left: 70px"></div>
565 <div class="t" style="margin-left: 144px"></div>
566 </div>
567 </div>
569 <div style="width: 673px">
570 <div class="contain rtl">
571 <!-- margins showing up in the wrong places? -->
572 <div class="side caption" style="margin-left: 201px"></div
573 ><div class="side t" style="margin-left: 72px"></div>
574 </div>
575 </div>
577 <div style="width: 672px">
578 <div class="contain rtl">
579 <!-- margins showing up in the wrong places? -->
580 <div class="side caption" style="margin-left: 200px"></div
581 ><div class="side t" style="margin-left: 72px"></div>
582 </div>
583 </div>
585 <div style="width: 671px">
586 <div class="contain rtl">
587 <div class="pushed"></div>
588 <!-- margins showing up in the wrong places? -->
589 <div class="side caption" style="margin-left: 199px"></div
590 ><div class="side t" style="margin-left: 72px"></div>
591 </div>
592 </div>
594 <div style="width: 674px">
595 <div class="contain rtl">
596 <!-- margins showing up in the wrong places? -->
597 <div class="side caption" style="margin-left: 201px"></div
598 ><div class="side t" style="margin-left: 73px"></div>
599 </div>
600 </div>
602 <div style="width: 673px">
603 <div class="contain rtl">
604 <!-- margins showing up in the wrong places? -->
605 <div class="side caption" style="margin-left: 200px"></div
606 ><div class="side t" style="margin-left: 73px"></div>
607 </div>
608 </div>
610 <div style="width: 672px">
611 <div class="contain rtl">
612 <div class="pushed"></div>
613 <!-- margins showing up in the wrong places? -->
614 <div class="side caption" style="margin-left: 199px"></div
615 ><div class="side t" style="margin-left: 73px"></div>
616 </div>
617 </div>
619 <div style="width: 675px">
620 <div class="contain rtl">
621 <!-- margins showing up in the wrong places? -->
622 <div class="side caption" style="margin-left: 201px"></div
623 ><div class="side t" style="margin-left: 74px"></div>
624 </div>
625 </div>
627 <div style="width: 674px">
628 <div class="contain rtl">
629 <!-- margins showing up in the wrong places? -->
630 <div class="side caption" style="margin-left: 200px"></div
631 ><div class="side t" style="margin-left: 74px"></div>
632 </div>
633 </div>
635 <div style="width: 673px">
636 <div class="contain rtl">
637 <div class="pushed"></div>
638 <!-- margins showing up in the wrong places? -->
639 <div class="side caption" style="margin-left: 199px"></div
640 ><div class="side t" style="margin-left: 74px"></div>
641 </div>
642 </div>
644 <div style="width: 674px">
645 <div class="contain rtl">
646 <div class="side t" style="margin-left: 101px"></div
647 ><div class="side caption" style="margin-left: 100px"></div>
648 </div>
649 </div>
651 <div style="width: 673px">
652 <div class="contain rtl">
653 <div class="side t" style="margin-left: 100px"></div
654 ><div class="side caption" style="margin-left: 100px"></div>
655 </div>
656 </div>
658 <div style="width: 672px">
659 <div class="contain rtl">
660 <div class="pushed"></div>
661 <div class="side t" style="margin-left: 100px"></div
662 ><div class="side caption" style="margin-left: 100px"></div>
663 </div>
664 </div>
666 <div style="width: 674px">
667 <div class="contain rtl">
668 <div class="side t" style="margin-left: 101px"></div
669 ><div class="side caption" style="margin-left: 100px"></div>
670 </div>
671 </div>
673 <div style="width: 673px">
674 <div class="contain rtl">
675 <div class="side t" style="margin-left: 100px"></div
676 ><div class="side caption" style="margin-left: 100px"></div>
677 </div>
678 </div>
680 <div style="width: 672px">
681 <div class="contain rtl">
682 <div class="pushed"></div>
683 <div class="side t" style="margin-left: 99px"></div
684 ><div class="side caption" style="margin-left: 100px"></div>
685 </div>
686 </div>
688 <div style="width: 675px">
689 <div class="contain rtl">
690 <div class="side t" style="margin-left: 101px"></div
691 ><div class="side caption" style="margin-left: 100px"></div>
692 </div>
693 </div>
695 <div style="width: 674px">
696 <div class="contain rtl">
697 <div class="side t" style="margin-left: 100px"></div
698 ><div class="side caption" style="margin-left: 100px"></div>
699 </div>
700 </div>
702 <div style="width: 673px">
703 <div class="contain rtl">
704 <div class="pushed"></div>
705 <div class="side t" style="margin-left: 99px"></div
706 ><div class="side caption" style="margin-left: 100px"></div>
707 </div>
708 </div>
710 </body>
711 </html>
