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: nested multi-columns and constrained dimensions</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-10 -->
7 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm">
8 <link rel="match" href="reference/multicol-nested-005-ref.htm">
9 <!--
10 The original filename of this test was
11 multicol-inherit-005.xht
12 This test also serves as a conversion of
13 multicol-nested-001.xht
14 -->
15 <meta name="flags" content="ahem">
16 <meta name="assert" content="This test checks how the height of column boxes conditions the height of nested column boxes.">
17 <style type="text/css">
18 body > div
19 {
20 column-gap: 1em;
21 font: 1.25em/1 Ahem;
22 width: 41em;
23 }
24
25 /*
26
27 N == 3;
28
29 W == max(0, (available-width - ((N - 1) * column-gap)) / N);
30 W == max(0, (41em - ((3 - 1) * 1em)) / 3);
31 W == max(0, (41em - (2 * 1em)) / 3);
32 W == max(0, (41em - 2em) / 3);
33 W == max(0, 39em / 3);
34 W == max(0, 13em);
35 W == 13em;
36
37 The height of column rule depends on number of line boxes in
38 each outer column box which depends on number of line boxes
39 in each inner column box. So:
40
41 13em : width of each outer column box
42 -
43 2em : horizontal margin of each div inside
44 =======
45 11em : width of each inner multi-column elements
46
47 N == 3;
48
49 W == max(0, (available-width - ((N - 1) * column-gap)) / N);
50 W == max(0, (11em - ((3 - 1) * 1em)) / 3);
51 W == max(0, (11em - (2 * 1em)) / 3);
52 W == max(0, (11em - 2em) / 3);
53 W == max(0, 9em / 3);
54 W == max(0, 3em);
55 W == 3em;
56
57 So, each duo of 'a', 'm' and 'x' should fill one and only 1 line
58 box. There are 8 duos; therefore, the first 2 inner
59 column boxes should use 3 line boxes and the 3rd inner
60 column box should be using 2 line boxes.
61
62 So, the height of the 2 blue column rules should be 60px.
63
64 */
65
66 div
67 {
68 background-color: yellow;
69 color: black;
70 font-size: 1em;
71 margin: 1em;
72 orphans: 1;
73 widows: 1;
74
75 column-count: 3;
76 }
77
78 div > div:first-child {margin-top: 0;}
79 </style>
80 </head>
81
82 <body>
83
84 <div>
85 <div>
86 aa aa
87 aa aa
88 aa aa
89 aa aa
90 </div>
91 <div>
92 mm mm
93 mm mm
94 mm mm
95 mm mm
96 </div>
97 <div>
98 xx xx
99 xx xx
100 xx xx
101 xx xx
102 </div>
103 </div>
104
105 </body>
106 </html>