multicol-basic-002

Multi-column element via column-count: [integer]

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
ahem

Source

 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>