Wed, 31 Dec 2014 07:16:47 +0100
Revert simplistic fix pending revisit of Mozilla integration attempt.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
3 <head>
4 <title>CSS3 Multi-column Layout Test Suite: Overflow Pagination (Interlaced [Simplified])</title>
5 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
6 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/>
7 <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#length-units"/>
8 <style type="text/css">
9 body, html {
10 margin: 0;
11 padding: 0;
12 }
13 .container {
14 height: .5in;
15 }
16 .overflow {
17 border-bottom: solid 4px red;
18 }
19 .following {
20 margin: 0 0 .5in;
21 height: .5in;
22 background: white;
24 font-size: 10pt;
25 line-height: 10pt;
26 color: navy;
27 }
28 .fno1 {
29 margin: 0;
30 border-top: 4px solid blue;
31 }
32 .no1 .overflow {
33 height: 800%;
34 }
35 .no2 .overflow {
36 height: 1200%;
37 }
38 .no3 .overflow {
39 height: 600%;
40 border-bottom-color: blue;
41 }
42 .no4 .overflow {
43 height: 800%;
44 border-bottom-color: blue;
45 }
46 body {
47 height: 2.5in;
48 width: 300pt;
49 -moz-column-width: 100pt;
50 -moz-column-gap: 0;
51 -moz-column-fill: auto;
52 border: solid gray;
53 }
54 </style>
55 </head>
56 <body onload="document.getElementById('tester1').style.height = '9in';
57 document.getElementById('tester1').offsetHeight;
58 document.getElementById('tester2').style.height = '29in';
59 document.getElementById('tester2').offsetHeight;
60 document.getElementById('tester1').style.height = '.5in';
61 document.getElementById('tester1').offsetHeight;
62 document.getElementById('tester2').style.height = '.5in';
63 document.documentElement.className = ''">
64 <div class="container no1">
65 <div class="overflow">
66 </div>
67 </div>
68 <div class="container no2">
69 <div class="overflow">
70 </div>
71 </div>
72 <div class="container no3">
73 <div class="overflow">
74 </div>
75 </div>
76 <div class="following" id="tester1">
77 <p class="fno1">
78 This paragraph must be in the first column.
79 There must be no red on any page.
80 </p>
81 </div>
82 <div class="container no4">
83 <div class="overflow">
84 </div>
85 </div>
86 <p class="following" id="tester2">
87 This paragraph must be in the second column.
88 There must be an unbroken blue line across
89 all three columns.
90 </p>
91 </body>
92 </html>