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-fill: balance with set height (basic)</title>
5 <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
6 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-25 -->
7 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'">
8 <link rel="match" href="reference/multicol-fill-001-ref.htm">
9 <meta name="flags" content="ahem">
10 <meta name="assert" content="This test checks that content is balanced into all columns of a multi-column element with a set height thanks to 'column-fill: balance'.">
11 <style type="text/css">
12 div#test, table#reference
13 {
14 background-color: yellow;
15 color: lime;
16 font: 1.25em/1 Ahem;
17 height: 5em;
18 margin: 1em 0em;
19 width: 20em;
20 }
21
22 div#test
23 {
24 columns: 2;
25 column-fill: balance;
26 column-gap: 0em;
27
28 /*
29
30 N == 2;
31
32 W == 10em;
33
34 */
35 }
36
37 table
38 {
39 border-spacing: 0em;
40 table-layout: fixed;
41 }
42
43 td
44 {
45 padding: 0em;
46 vertical-align: top;
47 }
48 </style>
49 </head>
50 <body>
51
52 <p>Test passes if the 2 rectangles are <strong>identical</strong>.</p>
53
54 <div id="test">A<br>B<br>C<br>D<br>E<br>F</div>
55
56 <table id="reference">
57 <tr>
58 <td>G<br>H<br>I</td>
59 <td>J<br>K<br>L</td>
60 </tr>
61 </table>
62
63 </body>
64 </html>