|
1 <!-- |
|
2 Any copyright is dedicated to the Public Domain. |
|
3 http://creativecommons.org/licenses/publicdomain/ |
|
4 --> |
|
5 <!DOCTYPE html> |
|
6 <html lang="en-US"> |
|
7 <head> |
|
8 <title>Testing nested balancing column sets</title> |
|
9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=822053"> |
|
10 <style type="text/css"> |
|
11 html,body { |
|
12 color:black; background-color:white; font-size:16px; padding:0; margin:0; |
|
13 } |
|
14 |
|
15 .colset { |
|
16 -moz-column-count: 2; |
|
17 -moz-column-gap: 1px; |
|
18 -moz-column-rule: 1px solid black; |
|
19 border: solid silver; |
|
20 margin-bottom:1em; |
|
21 width:30ch; |
|
22 } |
|
23 p { margin: 0; } |
|
24 |
|
25 /* balancing column sets deeper than level 2 should only use 1 column */ |
|
26 .colset .colset .colset, |
|
27 .colset .colset .colset .colset { |
|
28 -moz-column-count: 1; |
|
29 } |
|
30 </style> |
|
31 </head> |
|
32 <body> |
|
33 <div class="colset"> |
|
34 <p>one one one one one</p> |
|
35 <div class="colset"> |
|
36 <p>two two two two two</p> |
|
37 </div> |
|
38 </div> |
|
39 <div class="colset"> |
|
40 <p>one one one one one</p> |
|
41 <div class="colset"> |
|
42 <p>two two two two two</p> |
|
43 <div class="colset"> |
|
44 <p>three three three three three</p> |
|
45 </div> |
|
46 </div> |
|
47 </div> |
|
48 <div class="colset"> |
|
49 <p>one one one one one</p> |
|
50 <div class="colset"> |
|
51 <p>two two two two two</p> |
|
52 <div class="colset"> |
|
53 <p>three three</p> |
|
54 <div class="colset"> |
|
55 <p>four four four four four</p> |
|
56 </div> |
|
57 </div> |
|
58 </div> |
|
59 </div> |
|
60 </body> |
|
61 </html> |