multicol-rule-groove-000

column-rule shorthand with 'groove' border style

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 shorthand with 'groove' 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-groove-000-ref.htm">
 9   <meta name="flags" content="ahem">
10   <style type="text/css">
11   div
12   {
13   background-color: black;
14   color: black;
15   font: 3.125em/1 Ahem;
16   margin-bottom: 0.2em;
17   width: 8.2em;
18   }
19 
20   div#test
21   {
22   columns: 2;
23   column-gap: 0.2em;
24   column-rule: lime groove 0.2em;
25 
26   /*
27 
28   N == 2;
29 
30   W == 200px;
31 
32   */
33 
34   orphans: 1;
35   widows: 1;
36   }
37 
38   span {border-left: lime groove 0.2em;}
39   </style>
40  </head>
41  <body>
42 
43   <p>Test passes if the 2 black stripes with vertical green bars are <strong>identical</strong>.</p>
44 
45   <div id="test">1 <br>2 </div>
46 
47   <div id="reference">1234<span>5678</span></div>
48 
49  </body>
50 </html>