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 block children (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="bookmark" title="[css3-multicol] spanning element with only block children" href="http://lists.w3.org/Archives/Public/www-style/2013Aug/0318.html">
9 <link rel="match" href="reference/multicol-span-all-child-002-ref.htm">
10 <meta name="flags" content="may">
11 <meta name="assert" content="This test checks how spanning elements with block children is rendered inside a multi-column element with a set height which is insufficient for rendering both spanning elements entirely. Since available space (height of 8em) is insufficient to render both spanning elements (4 times 4em plus 2em) entirely inside the multi-column element, then UA may treat 'column-span: all' as 'column-span: none'.">
12 <style type="text/css">
13 html {background-color: white;}
14
15 body
16 {
17 background-color: black;
18 height: 8em;
19 orphans: 1;
20 widows: 1;
21 width: 10em;
22
23 column-count: 2;
24 column-gap: 0em;
25
26 /*
27
28 N == 2;
29
30 W == 5em;
31
32 */
33
34 }
35
36 div, p
37 {
38 font: 1em/1 serif;
39 margin-top: 0em;
40
41 column-span: all;
42 }
43
44 span
45 {
46 color: black;
47 display: block;
48 height: 4em;
49 width: 5em;
50 }
51 </style>
52 </head>
53
54 <body>
55
56 <div>
57 <span>FAIL</span>
58 <span>FAIL</span>
59 <span>FAIL</span>
60 <span>FAIL</span>
61 </div>
62
63 <p>abc deg ghk mno</p>
64
65 <!--
66
67 Expected results:
68
69 ************************
70 |FAIL |FAIL |abc deg
71 | | |ghk mno
72 | | |
73 | | |
74 |FAIL |FAIL |
75 | | |
76 | | |
77 | | |
78 ************************
79
80 The test presumes, postulates that
81 "abc deg" occupies not more than 5em.
82
83 -->
84
85 </body>
86 </html>