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: auto' (basic)</title>
5 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-01 -->
6 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#cf" title="7.1 'column-fill'">
7 <link rel="match" href="reference/multicol-fill-auto-003-ref.htm">
8 <meta name="flags" content="ahem">
9 <meta name="assert" content="This test checks if inline content fills column boxes sequentially when 'column-fill' is set to 'auto'.">
10 <style type="text/css">
11 div
12 {
13 background-image: url("support/red20x20.png");
14 background-repeat: no-repeat;
15 background-position: 2em 4em;
16 border: green solid 1em;
17 color: green;
18 font: 1.25em/1 Ahem;
19 height: 6em;
20 width: 21em;
21
22 column-count: 2;
23 column-fill: auto;
24 column-gap: 1em;
25 column-rule: yellow solid 1em;
26 }
27 </style>
28 </head>
29
30 <body>
31
32 <p>Test passes if there is <strong>no red</strong>.</p>
33
34 <div>1234567890 12 4567 90 123 56 890 123 56789 1 34567 90 12 4567 90
35 123 56 890 123 56</div>
36
37 <!--
38
39 Expected result:
40
41 ************ ************
42 |1234567890| |123 56 890|
43 |12 4567 90| |123 56 |
44 |123 56 890| | |
45 |123 56789 | | |
46 |1 34567 90| | |
47 |12 4567 90| | |
48 ************ ************
49
50 The digits are the green squares, the white squares
51 are the blank white spaces. The yellow vertical stripe
52 represent both the column-gap and the column-rule.
53 The "3" glyph at line 5 of 1st column box should be
54 overlapping the red square.
55
56 -->
57
58 </body>
59 </html>