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