multicol-rule-style-inset-001

'column-rule-style' inset

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
ahem

Source

 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-rule-style' inset</title>
 5   <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
 6   <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-15 -->
 7   <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crs" title="4.3. 'column-rule-style'">
 8   <link rel="match" href="reference/multicol-rule-style-ridge-001-ref.htm">
 9   <meta name="flags" content="ahem">
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 {color: transparent;}
22 
23   div#reference
24   {
25   border-collapse: collapse;
26   border-left: orange inset 100px;
27   font: 6.25em/1 Ahem;
28   display: table;
29   }
30 
31   div#test
32   {
33   font: 1.25em/1 Ahem; /* equivalent to 20px/1 Ahem */
34   position: relative;
35   right: 40px;
36   top: 0.5em;
37   width: 9em;
38 
39   column-count: 2;
40   column-gap: 5em;
41   column-rule: orange inset 5em;
42   }
43   </style>
44  </head>
45 
46  <body>
47 
48   <p>Test passes if the 2 orange squares are <strong>identical</strong>.</p>
49 
50   <div id="reference">T</div>
51 
52   <div id="test">Le ft Co lu mn Ri gh Co lu mn</div>
53 
54   <!--
55 
56   Expected results
57     column-gap
58     column-rule
59      v=====v
60   *************
61   |Le|     |Ri|
62   |ft|     |gh|
63   |Co|     |Co|
64   |lu|     |lu|
65   |mn|     |mn|
66   *************
67 
68   -->
69 
70  </body>
71 </html>