1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Multi-column Layout Test: 'column-span: all' element with vertical margins and width exceeding available multi-colum width (complex)</title>
5 <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
6 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-19 -->
7 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'">
8 <link rel="match" href="reference/multicol-span-all-margin-bottom-001-ref.htm">
9 <meta name="flags" content="ahem">
10 <style type="text/css">
11 div
12 {
13 background-color: yellow;
14 border: gray solid 1em;
15 color: navy;
16 font: 1.25em/1 Ahem;
17 orphans: 1;
18 widows: 1;
19 width: 8em;
20
21 column-count: 4;
22 column-gap: 0em;
23
24 /*
25
26 N == 4;
27
28 W == 2em;
29
30 */
31 }
32
33 h4
34 {
35 font: inherit;
36 margin: 1em 0;
37 }
38
39 h4#black
40 {
41 background: black;
42 color: black;
43
44 column-span: all;
45 }
46
47 h4#orange
48 {
49 background: orange;
50 color: orange;
51 /*
52 In this test, the glyphs "or" are painted into 1st column box.
53 "Content in the normal flow that extends into column
54 gaps (e.g., long words or images) is clipped in the
55 middle of the column gap."
56 Therefore, the glyphs "ang" are clipped and not painted.
57 */
58 }
59
60 span {color: blue;}
61
62 span + span {color: pink;}
63 </style>
64 </head>
65
66 <body>
67
68 <div>
69 na vy na vy
70 na vy na vy
71 <h4 id="black"> black </h4>
72 <h4 id="orange"> orang </h4>
73 <span> bl ue bl ue </span>
74 <span> Pi nk Pi nk </span>
75 </div>
76
77 </body>
78 </html>