multicol-rule-inset-000

column-rule shorthand with 'inset' border style

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
ahem
Assertion
'border-style' values of column-rule are interpreted as in the collapsing border model in which case 'inset' value is drawn the same as 'ridge'.

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 shorthand with 'inset' border style</title>
 5   <link rel="author" title="Hakon Wium Lie" href="mailto:howcome@opera.com">
 6   <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-08-27 -->
 7   <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-rule" title="4.5 'column-rule'">
 8   <link rel="match" href="reference/multicol-rule-ridge-000-ref.htm">
 9   <meta name="flags" content="ahem">
10   <meta name="assert" content="'border-style' values of column-rule are interpreted as in the collapsing border model in which case 'inset' value is drawn the same as 'ridge'.">
11   <style type="text/css">
12   div
13   {
14   background-color: black;
15   color: black;
16   font: 3.125em/1 Ahem;
17   margin-bottom: 0.2em;
18   width: 8.2em;
19   }
20 
21   div#test
22   {
23   columns: 2;
24   column-gap: 0.2em;
25   column-rule: lime inset 0.2em;
26 
27   /*
28 
29   N == 2;
30 
31   W == 200px;
32 
33   */
34 
35   orphans: 1;
36   widows: 1;
37   }
38 
39   span {border-left: lime ridge 0.2em;}
40   </style>
41  </head>
42  <body>
43 
44   <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
45 
46   <div id="test">1 <br>2 </div>
47 
48   <div id="reference">1234<span>5678</span></div>
49 
50  </body>
51 </html>