1 <!DOCTYPE html>
2 <html><!-- Submitted from TestTWF Paris --><head>
3 <meta charset="utf-8">
4 <title>CSS Test: Multi-column element via column-count: [integer]</title>
5 <link href="mailto:info@anselm-hannemann.com" rel="author" title="Anselm Hannemann">
6 <link href="mailto:howcome@opera.com" rel="author" title="Håkon Wium Lie">
7 <link href="http://www.w3.org/TR/css3-multicol/#columns" rel="help">
8 <link href="reference/multicol-basic-ref.htm" rel="match">
9 <meta content="ahem" name="flags">
10 <link href="http://fantasai.inkedblade.net/contact" rel="reviewer" title="Elika J Etemad">
11
12 <style type="text/css">
13 .multicol-wrapper>*{
14 font-family: Ahem;
15 }
16
17 div.multicol-wrapper{
18 border: thin solid black;
19 display: inline-block;
20 margin: 1em auto;
21 width: 360px;
22 }
23
24 .multicol-basic-ref{
25 background: yellow;
26 width: 360px;
27 column-count: 3;
28 column-gap: 0;
29 column-rule: none;
30 }
31
32 .multicol-basic-ref-item{
33 background: #000;
34 }
35
36 .item-1{
37 background: purple;
38 color: purple;
39 }
40
41 .item-2{
42 background: orange;
43 color: orange;
44 }
45
46 .item-3{
47 background: blue;
48 color: blue;
49 }
50 </style>
51 </head>
52 <body>
53 <p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p>
54 <div class="multicol-wrapper">
55 <div class="multicol-basic-ref">
56 <span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
57 <span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
58 <span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span>
59 </div>
60 </div>
61
62
63 </body></html>