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: multi-column element with child block (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-08 -->
7 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" title="2. The multi-column model">
8 <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2013Aug/0091.html" title="[css3-multicol] Nested multicolumn elements rendering">
9 <link rel="match" href="reference/multicol-height-block-child-001-ref.htm">
10 <meta name="flags" content="ahem">
11 <meta name="assert" content="This test checks that a nested multi-column element's inline content could be clipped horizontally.">
12 <style type="text/css">
13 div
14 {
15 background-color: blue;
16 font: 20px/1 Ahem;
17 height: 8em;
18 width: 14em;
19
20 column-count: 2;
21 column-gap: 2em;
22
23 /*
24
25 N == 2;
26
27 W == 6em;
28
29 H == 8em;
30
31 */
32 }
33
34 div#outer
35 {
36 color: black;
37 column-fill: auto;
38 }
39
40 div#inner
41 {
42 color: orange;
43 column-fill: balance;
44 }
45 </style>
46 </head>
47 <body>
48
49 <div id="outer">
50 bla bla bla bla bla
51
52 <div id="inner">orn orn orn zzz zzz zzz</div>
53
54 </div>
55
56 <!--
57 Both column boxes of div#inner start in the 1st
58 column box of div#outer multi-column element.
59 The first 3 lines boxes of 1st
60 column box of div#inner will be rendered inside the
61 1st column box of div#outer but not its 2nd.
62 Because 1st column box of div#outer is
63 6em wide while the div#inner multi-column element
64 is 14em wide, this makes the first 3 line boxes
65 (with the 'z' trios) of 2nd column box of div#inner
66 clipped.
67
68 Then, at this point, the div#inner multi-column
69 element should be fragmented in order to continue to
70 render the 5 empty line boxes it has into the
71 2nd column box of div#outer. Since those 5 line
72 boxes are empty, we only see the extension it
73 creates horizontally, which is
74 14em - 6em == 8em horizontally and
75 5 lines boxes == 5em tall
76
77
78 Expected results:
79
80 0em 14em 22em
81 v v v
82 0 *********************************************
83 * bla | *
84 * bla | *
85 * bla | *
86 * bla | *
87 5 * bla | *
88 6 * orn |****************
89 7 * orn |
90 8 * orn |
91 *****************************
92
93 -->
94
95 </body>
96 </html>