|
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-fill: auto; |
|
31 } |
|
32 .fixed-height { |
|
33 height:3em; |
|
34 } |
|
35 </style> |
|
36 </head> |
|
37 <body> |
|
38 <div class="colset"> |
|
39 <p>one one one one one</p> |
|
40 <div class="colset non-balancing lvl2"> |
|
41 <p>two two two two two</p> |
|
42 </div> |
|
43 </div> |
|
44 <div class="colset"> |
|
45 <p>one one one one one<br>one</p> |
|
46 <div class="colset fixed-height lvl2"> |
|
47 <p>two two two two two</p> |
|
48 </div> |
|
49 </div> |
|
50 <div class="colset"> |
|
51 <p>one<br>one</p> |
|
52 <div class="colset lvl2"> |
|
53 <p>two</p> |
|
54 <div class="colset fixed-height lvl3"> |
|
55 <p>three three three three three three</p> |
|
56 </div> |
|
57 </div> |
|
58 </div> |
|
59 </body> |
|
60 </html> |