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>