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-count' and inherit</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/#cc" title="3.2 'column-count'">
8 <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'">
9 <link rel="match" href="reference/multicol-inherit-002-ref.htm">
10 <meta name="flags" content="ahem">
11 <meta name="assert" content="This test checks that 'column-count' can be inherited by setting it with the CSS-wide keyword 'inherit'.">
12 <style type="text/css">
13 body > div
14 {
15 background-color: blue;
16 column-count: 3;
17 column-gap: 1em;
18 font: 1.25em/1 Ahem;
19 width: 32em;
20
21 /*
22 N == 3;
23
24 32em
25 - 2em : 2 column gaps
26 ==========
27 30em : available width of the 3 inner multi-column elements
28
29 So, W == 10em;
30
31 30em
32 - 6em : 3 mult by 2em: horizontal margin of 3 inner multi-column elements
33 - 6em : 3 mult by 2em: horizontal column-gaps of all 3 inner multi-column elements
34 ==========
35 18em : 6em for each of the 3 column boxes without their own horizontal margins
36 So, each column boxes of inner multi-column elements is 2em wide.
37 */
38 }
39
40 div
41 {
42 color: black;
43 margin: 1em;
44 orphans: 1;
45 widows: 1;
46 }
47
48 div > div
49 {
50 background-color: yellow;
51 column-count: inherit;
52 column-gap: 1em;
53 }
54
55 div > div:first-child {margin-top: 0;}
56 </style>
57 </head>
58 <body>
59
60 <div>
61 <div>
62 aa aa
63 aa aa
64 aa aa
65 aa aa
66 </div>
67 <div>
68 mm mm
69 mm mm
70 mm mm
71 mm mm
72 </div>
73 <div>
74 xx xx
75 xx xx
76 xx xx
77 xx xx
78 </div>
79 </div>
80
81 </body>
82 </html>