|
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-family:monospace; font-size:16px; padding:0; margin:0; |
|
13 } |
|
14 |
|
15 .colset { |
|
16 -moz-column-count: 2; |
|
17 -moz-column-gap: 0px; |
|
18 -moz-column-rule: 1px solid black; |
|
19 margin-bottom:1em; |
|
20 width:30ch; |
|
21 } |
|
22 .colset.lvl2 { |
|
23 -moz-column-rule: 1px solid blue; |
|
24 } |
|
25 .colset.lvl3 { |
|
26 -moz-column-rule: 1px solid red; |
|
27 } |
|
28 p { margin: 0; } |
|
29 .non-balancing { |
|
30 -moz-column-count: 1; |
|
31 } |
|
32 .fixed-height.lvl2 { |
|
33 -moz-column-count: 2; |
|
34 } |
|
35 .fixed-height { |
|
36 -moz-column-count: 1; |
|
37 height:3em; |
|
38 } |
|
39 </style> |
|
40 </head> |
|
41 <body> |
|
42 <div class="colset"> |
|
43 <p>one one one one one</p> |
|
44 <div class="colset non-balancing lvl2"> |
|
45 <p>two two two two<br>two</p> |
|
46 </div> |
|
47 </div> |
|
48 <div class="colset"> |
|
49 <p>one one one one one<br>one</p> |
|
50 <div class="colset fixed-height lvl2"> |
|
51 <p>two two two two two</p> |
|
52 </div> |
|
53 </div> |
|
54 <div class="colset"> |
|
55 <p>one<br>one</p> |
|
56 <div class="colset lvl2"> |
|
57 <p>two</p> |
|
58 <div class="colset fixed-height lvl3"> |
|
59 <p>three three three three three three</p> |
|
60 </div> |
|
61 </div> |
|
62 </div> |
|
63 </body> |
|
64 </html> |