OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <head> | |
3 <style> | |
4 div { border:5px solid maroon; -webkit-column-count:2; width:750px; margin: 1em
0 } | |
5 h2 { -webkit-column-span: all; background-color:#eeeeee } | |
6 </style> | |
7 </head> | |
8 <body> | |
9 <div style="display:none"><h2 id="base">This is a spanning element.</h2></div> | |
10 | |
11 <div id="one"> | |
12 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
13 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
14 | |
15 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
16 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
17 | |
18 | |
19 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
20 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
21 | |
22 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. | |
23 </div> | |
24 | |
25 <script> | |
26 var one = document.getElementById('one'); | |
27 one.insertBefore(document.getElementById('base').cloneNode(true), one.firstChild
); | |
28 </script> | |
29 | |
30 <div id="two"> | |
31 | |
32 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
33 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
34 | |
35 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
36 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
37 | |
38 | |
39 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
40 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
41 | |
42 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. | |
43 </div> | |
44 | |
45 <script> | |
46 var two = document.getElementById('two'); | |
47 two.appendChild(document.getElementById('base').cloneNode(true)); | |
48 </script> | |
49 | |
50 <div id="three"> | |
51 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim a
c mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem.
Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis v
el orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nulla
m bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis,
interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
52 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
53 | |
54 | |
55 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. | |
56 </p> | |
57 <p id="before"> | |
58 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
59 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
60 | |
61 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
62 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
63 </p> | |
64 </div> | |
65 | |
66 <script> | |
67 var three = document.getElementById('three'); | |
68 three.insertBefore(document.getElementById('base').cloneNode(true), document.get
ElementById('before')); | |
69 </script> | |
70 | |
71 <div id="four"> | |
72 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
73 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
74 | |
75 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. | |
76 | |
77 <span id="beforetwo"> | |
78 Lorem</span> ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius en
im ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus s
em. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae fel
is vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. N
ullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium qu
is, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
79 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
80 | |
81 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim a
c mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem.
Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis v
el orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nulla
m bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis,
interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
82 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
83 </p> | |
84 </div> | |
85 | |
86 <script> | |
87 var four = document.getElementById('four'); | |
88 four.insertBefore(document.getElementById('base').cloneNode(true), document.getE
lementById('beforetwo')); | |
89 </script> | |
90 | |
91 <div id="five"> | |
92 <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius eni
m ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus se
m. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae feli
s vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nu
llam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium qui
s, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
93 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
94 | |
95 <span style="display:block">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Nulla varius enim ac mi.</span> | |
96 | |
97 Lorem</span> ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius en
im ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus s
em. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae fel
is vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. N
ullam bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium qu
is, interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
98 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
99 | |
100 <p id="beforethree">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nu
lla varius enim ac mi. Curabitur sollicitudin felis quis lectus. Quisque adipisc
ing rhoncus sem. Proin nulla purus, vulputate vel, varius ut, euismod et, nisi.
Sed vitae felis vel orci sagittis aliquam. Cras convallis adipiscing sem. Nam no
nummy enim. Nullam bibendum lobortis neque. Vestibulum velit orci, tempus euismo
d, pretium quis, interdum vitae, nulla. Phasellus eget ante et tortor condimentu
m vestibulum. | |
101 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
102 </p> | |
103 </div> | |
104 | |
105 <script> | |
106 var five = document.getElementById('five'); | |
107 five.insertBefore(document.getElementById('base').cloneNode(true), document.getE
lementById('beforethree')); | |
108 </script> | |
109 | |
110 <div id="six"> | |
111 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim a
c mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem.
Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis v
el orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nulla
m bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis,
interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
112 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
113 | |
114 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim a
c mi. | |
115 | |
116 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim a
c mi. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem.
Proin nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis v
el orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nulla
m bibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis,
interdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | |
117 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. | |
118 </p> | |
119 | |
120 <span id="beforefour">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<span style="display:block">Nulla varius enim ac mi.</span> Curabitur sollicitud
in felis quis lectus. Quisque adipiscing rhoncus sem. Proin nulla purus, vulputa
te vel, varius ut, euismod et, nisi. Sed vitae felis vel orci sagittis aliquam.
Cras convallis adipiscing sem. Nam nonummy enim. Nullam bibendum lobortis neque.
Vestibulum velit orci, tempus euismod, pretium quis, interdum vitae, nulla. Pha
sellus eget ante et tortor condimentum vestibulum. | |
121 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit.</span> | |
122 | |
123 </div> | |
124 | |
125 <script> | |
126 var six = document.getElementById('six'); | |
127 six.insertBefore(document.getElementById('base').cloneNode(true), document.getEl
ementById('beforefour')); | |
128 | |
129 // FIXME: This is only necessary because we don't always clean up the anonymous
block span renderers crbug.com/305036 | |
130 document.body.offsetHeight; | |
131 | |
132 spanners = document.getElementsByTagName('h2'); | |
133 for (i = 0; i < spanners.length; i++) { | |
134 spanners[i].style.display = 'none'; | |
135 } | |
136 </script> | |
137 | |
138 </body> | |
139 </html> | |
OLD | NEW |