layout/generic/crashtests/724978.xhtml@6474c204b198
layout/generic/crashtests/724978.xhtml
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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>Multi-column Layout: AbsPos Pagination (Interlaced Dynamic Height)</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 html {
10 background: white;
11 }
13 .container {
14 background: red;
15 height: 24pt;
16 position: relative;
17 -moz-column-count: 2;
18 -moz-column-gap: 0;
19 }
20 .overflow {
21 width: 10pt;
22 border-bottom: lime 8px solid;
23 top: 0;
24 }
25 .following {
26 position: relative;
27 background: white;
28 width: 100pt;
29 }
30 #colset {
31 padding-top: 1px;
32 width: 300pt;
33 height: 2in;
34 -moz-column-count: 3;
35 -moz-column-gap: 0;
36 border: silver 2pt;
37 border-style: none solid;
38 }
39 #redline {
40 width: 303pt;
41 border-top: 8px solid red;
42 margin-top: -1in;
43 position: relative;
44 z-index: -1;
45 }
47 .ocontainer {
48 height: 0;
49 position: relative;
50 -moz-column-count: 2;
51 -moz-column-gap: 0;
52 }
53 .o1 { /* 3rd col */
54 height: 10in;
55 }
56 .a1 { /* 1st col */
57 position: absolute;
58 height: 2in;
59 width: 33pt;
60 }
61 .a2 { /* 2nd col */
62 position: absolute;
63 height: 6in;
64 width: 25pt;
65 margin-left: 25pt;
66 }
67 .a3 { /* 3rd col */
68 position: absolute;
69 height: 10in;
70 margin-left: 10pt;
71 }
72 .a4 { /* 2nd col */
73 width: 25pt;
74 height: 6in;
75 }
77 .b1 { /* 3rd col */
78 position: absolute;
79 height: 672pt;
80 margin-left: 20pt;
81 }
82 .b2 { /* 2nd col */
83 position: absolute;
84 height: 384pt;
85 width: 25pt;
86 margin-left: 50pt;
87 }
88 .b3 { /* 3rd col */
89 position: absolute;
90 height: 672pt;
91 margin-left: 30pt;
92 }
93 .b4 { /* 1st col, but no border */
94 position: absolute;
95 height: 96pt;
96 border-bottom: none;
97 }
98 .b4 .child1 { /* 1st col */
99 position: absolute;
100 height: 200%;
101 width: 33pt;
102 margin-left: 33pt;
103 }
104 .b4 .child2 { /* 3rd col */
105 height: 672pt;
106 margin-left: 40pt;
108 }
109 .b5 { /* 1st col */
110 position: absolute;
111 height: 96pt;
112 width: 34pt;
113 margin-left: 66pt;
114 }
115 .b6 { /* 3rd col */
116 height: 672pt;
117 margin-left: 50pt;
118 }
120 .c1 { /* 3rd col */
121 position: absolute;
122 height: 6in;
123 margin-left: 60pt;
124 }
125 .c2 { /* 2nd col */
126 position: absolute;
127 height: 2in;
128 width: 25pt;
129 margin-left: 75pt;
130 }
131 .c3 { /* 3rd col */
132 position: absolute;
133 height: 6in;
134 margin-left: 70pt;
135 }
136 .c4 { /* 3rd col */
137 height: 6in;
138 width: 20pt;
139 margin-left: 80pt;
140 }
142 .f1 {
143 margin-top: -48pt;
144 height: 96pt;
145 margin-bottom: 96pt;
146 }
147 .f2 {
148 margin-top: -24pt;
149 height: 48pt;
150 }
152 .centerline {
153 margin: 0 auto;
154 top: 0;
155 left: 0;
156 right: 0;
157 position: absolute;
158 width: 8px;
159 height: 6in;
160 background: aqua;
161 }
163 #dynamo {
164 background: transparent;
165 border-bottom: 8px solid orange;
166 z-index: 10;
167 height: 384pt;
168 }
170 </style>
171 </head>
172 <body onload="document.getElementById('dynamo').style.height = '96pt';
173 document.getElementById('dynamo').offsetHeight;
174 document.getElementById('dynamo').style.height = '672pt';
175 document.getElementById('dynamo').offsetHeight;
176 document.getElementById('dynamo').style.height = '96pt';
177 document.getElementById('dynamo').offsetHeight;
178 document.getElementById('dynamo').style.height = '384pt';
179 document.getElementById('dynamo').offsetHeight;
180 document.getElementById('dynamo').style.height = '3000pt';
181 document.getElementById('dynamo').offsetHeight;
182 document.getElementById('dynamo').style.height = '96pt';
183 document.getElementById('dynamo').offsetHeight;
184 document.getElementById('dynamo').style.height = '384pt';
185 document.getElementById('dynamo').offsetHeight;
186 document.getElementById('dynamo').style.height = '672pt';
187 document.getElementById('dynamo').offsetHeight;
188 document.getElementById('dynamo').style.height = '384pt';
189 document.getElementById('dynamo').offsetHeight;
190 document.getElementById('dynamo').style.height = '96pt';
191 document.getElementById('dynamo').offsetHeight;
192 document.getElementById('dynamo').style.height = '384pt';
193 document.documentElement.className = ''
194 ">
195 <div id="colset">
196 <div>
197 <div class="ocontainer">
198 <div class="centerline"></div>
199 <div class="overflow o1"></div>
200 </div>
201 <div class="container">
202 <div class="overflow a1"></div>
203 <div class="overflow a2"></div>
204 <div class="overflow a3"></div>
205 <div class="overflow a4"></div>
206 </div>
207 <div class="ocontainer">
208 <div id="dynamo" class="centerline"></div>
209 </div>
210 <div class="container">
211 <div class="overflow b1"></div>
212 <div class="overflow b2"></div>
213 <div class="overflow b3"></div>
214 <div class="overflow b4">
215 <div class="overflow child1"></div>
216 <div class="overflow child2"></div>
217 </div>
218 <div class="overflow b5"></div>
219 <div class="overflow b6"></div>
220 </div>
221 </div>
222 <p class="following f1">
223 </p>
224 <div class="container">
225 <div class="overflow c1"></div>
226 <div class="overflow c2"></div>
227 <div class="overflow c3"></div>
228 <div class="overflow c4"></div>
229 </div>
230 <div class="following f2"></div>
231 </div>
232 <div id="redline"></div>
233 </body>
234 </html>
