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' and column-rule</title>
5 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-02 -->
6 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules" title="4. Column gaps and rules">
7 <link rel="match" href="reference/multicol-rule-004-ref.htm">
8 <meta name="flags" content="ahem">
9 <meta name="assert" content="This test checks that when 'column-fill: balance' distributes equally inline content into column boxes in a way that does not completely fill column boxes, then column-rule must nevertheless still be painted entirely, that is for the whole length of column boxes, even though the whole inline content may not fill the whole length of the column boxes.">
10 <style type="text/css">
11 body {margin: 8px;}
12
13 p
14 {
15 line-height: 1.25em;
16 margin: 1em 0em;
17 }
18
19 strong {line-height: 1;}
20
21 div#red-overlapped-reference
22 {
23 background-color: red;
24 height: 100px;
25 width: 100px;
26 }
27
28 div#test-overlapping-green
29 {
30 bottom: 100px;
31 color: transparent;
32 font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */
33 height: 5em;
34 position: relative;
35 right: 80px;
36 width: 13em;
37
38 column-count: 2;
39 column-fill: balance;
40 column-gap: 5em;
41 column-rule: green solid 5em;
42 }
43 </style>
44 </head>
45
46 <body>
47
48 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
49
50 <div id="red-overlapped-reference"></div>
51
52 <div id="test-overlapping-green">LEFT Colm RIGH Colm</div>
53
54 </body>
55 </html>