1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <!--
5 This test's original filename was multicol-inherit-004.xht
6 and it has been modified and is now
7 multicol-nested-column-rule-001.xht
8 -->
9 <title>CSS Multi-column Layout Test: nested multi-columns and column-rule position</title>
10 <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
11 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-09 -->
12 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pseudo-algorithm" title="3.4 Pseudo-algorithm">
13 <link rel="match" href="reference/multicol-nested-column-rule-001-ref.htm">
14 <meta name="flags" content="ahem">
15 <meta name="assert" content="This test checks how the height of column boxes conditions the height of column rule.">
16 <style type="text/css">
17 body > div
18 {
19 column-rule: blue solid 1em;
20 font: 1.25em/1 Ahem;
21 width: 42em;
22 }
23
24 /*
25
26 N == 3;
27
28 W == max(0, (available-width - ((N - 1) * column-gap)) / N);
29 W == max(0, (42em - ((3 - 1) * 3em)) / 3);
30 W == max(0, (42em - (2 * 3em)) / 3);
31 W == max(0, (42em - 6em) / 3);
32 W == max(0, 36em / 3);
33 W == max(0, 12em);
34 W == 12em;
35
36 So, the first column-rule should be at:
37
38 1.0em : margin-left of outer div
39 12.0em : width of 1st column box
40 1.0em : (3.0em / 2) - (1.0em / 2) : left edge of 1st column-rule
41 =========
42 14.0em
43
44 The 2nd column-rule should be at:
45
46 1.0em : margin-left of outer div
47 12.0em : width of 1st column box
48 3.0em : first column-gap
49 12.0em : width of 2nd column box
50 1.0em : (3.0em / 2) - (1.0em / 2) : left edge of 2nd column-rule
51 =========
52 29.0em
53
54 The height of column rule depends on number of line boxes in
55 each outer column box which depends on number of line boxes
56 in each inner column box. So:
57
58 12em : width of each outer column box
59 -
60 2em : horizontal margin of each div inside
61 =======
62 10em : width of each inner multi-column elements
63
64 N == 3;
65
66 W == max(0, (available-width - ((N - 1) * column-gap)) / N);
67 W == max(0, (10em - ((3 - 1) * 3em)) / 3);
68 W == max(0, (10em - (2 * 3em)) / 3);
69 W == max(0, (10em - 6em) / 3);
70 W == max(0, 4em / 3);
71 W == max(0, 1.33333em);
72 W == 1.33333em;
73
74 So, each duo of 'a', 'm' and 'x' should fill one and only 1 line
75 box. There are 8 duos; therefore, the first 2 inner
76 column boxes should use 3 line boxes and the 3rd inner
77 column box should be using 2 line boxes.
78
79 So, the height of the 2 blue column rules should be 60px.
80
81 */
82
83 div
84 {
85 background-color: white;
86 color: white;
87 font-size: 1em;
88 margin: 0em 1em;
89 orphans: 1;
90 widows: 1;
91
92 column-count: 3;
93 column-gap: 3em;
94 }
95 </style>
96 </head>
97
98 <body>
99
100 <div>
101 <div>
102 aa aa
103 aa aa
104 aa aa
105 aa aa
106 </div>
107 <div>
108 mm mm
109 mm mm
110 mm mm
111 mm mm
112 </div>
113 <div>
114 xx xx
115 xx xx
116 xx xx
117 xx xx
118 </div>
119 </div>
120
121 </body>
122 </html>