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 multicolumns and vertical margin (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-14 -->
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="match" href="reference/multicol-nested-margin-002-ref.htm">
9 <meta name="flags" content="ahem">
10 <meta name="assert" content="This test checks that when an inner nested multi-column element is preceded by a soft column break (caused by an unforced column-break), then the used margin-top of such inner nested multi-column element is '0'.">
11
12 <!--
13 More info:
14 Re: [css3-multicol] vertical margins rendering in nested multi-columns
15 http://lists.w3.org/Archives/Public/www-style/2013Aug/0146.html
16 -->
17
18 <style type="text/css">
19 body {margin: 0;}
20
21 body > div
22 {
23 background-color: yellow;
24 font: 1.25em/1 Ahem;
25 width: 41em;
26 /*
27 This test requires a viewport width of 820px
28 */
29 }
30
31 div
32 {
33 color: yellow;
34 font: inherit;
35 orphans: 1;
36 widows: 1;
37
38 column-count: 3;
39 column-gap: 1em;
40 }
41
42 div div {margin: 0em 1em;}
43
44 div div:last-child
45 {
46 color: blue;
47 margin: 1em;
48 }
49
50 /*
51
52 N == 3;
53
54 W == max(0, (available-width - ((N - 1) * column-gap)) / N);
55 W == max(0, (41em - ((3 - 1) * 1em)) / 3);
56 W == max(0, (41em - (2 * 1em)) / 3);
57 W == max(0, (41em - 2em) / 3);
58 W == max(0, 39em / 3);
59 W == max(0, 13em);
60 W == 13em;
61
62 The height of column rule depends on number of line boxes in
63 each outer column box which depends on number of line boxes
64 in each inner column box. So:
65
66 13em : width of each outer column box
67 -
68 2em : horizontal margin of each div inside
69 =======
70 11em : width of each inner multi-column elements
71
72 N == 3;
73
74 W == max(0, (available-width - ((N - 1) * column-gap)) / N);
75 W == max(0, (11em - ((3 - 1) * 1em)) / 3);
76 W == max(0, (11em - (2 * 1em)) / 3);
77 W == max(0, (11em - 2em) / 3);
78 W == max(0, 9em / 3);
79 W == max(0, 3em);
80 W == 3em;
81
82 So, each duo of 'a', 'm' and 'x' should fill one and only 1
83 line box. There are 15 'a' duos and 15 'm' duos; therefore,
84 the 3 inner column boxes of each first 2 inner
85 multi-column elements should use 5 line boxes.
86
87 The 1st column box of last inner multi-column
88 (the blue one with 'x' duos) should have 'x1',
89 'x2' and 'x3' duos filling 3 line boxes.
90
91 The 2nd column box of last inner multi-column should
92 have 'x4', 'x5' and 'x6' duos filling 3 line boxes.
93
94 The 3rd column box of the last inner multi-column should
95 have 'x7' and 'x8' duos filling 2 line boxes.
96 */
97
98 </style>
99 </head>
100 <body>
101
102 <div>
103
104 <div> a1 a2 a3 a4 a5 a6 a7 a8 a9 a0 a1 a2 a3 a4 a5 </div>
105
106 <div> m1 m2 m3 m4 m5 m6 m7 m8 m9 m0 m1 m2 m3 m4 m5 </div>
107
108 <div> x1 x2 x3 x4 x5 x6 x7 x8 </div>
109
110 </div>
111
112 </body>
113 </html>