multicol-rule-color-inherit-002

column-rule-color: inherit (complex)

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
ahem
Assertion
In this test, div#parent's computed 'column-rule-color' is given by div#parent's 'currentcolor' (a reserved keyword) and not 'red'. Then div.child's 'column-rule-color' take such specified value ('currentcolor') from its parent (due to 'inherit' keyword) and not 'red'. And then, it is applied to div.child's 'column-rule-color'.

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-color: inherit (complex)</title>
  5   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2013-09-03 and 2016-10-02 -->
  6   <link rel="help" href="http://www.w3.org/TR/css3-multicol/#crc" title="4.2. 'column-rule-color'">
  7   <link rel="help" href="http://www.w3.org/TR/css3-values/#common-keywords" title="3.1.1. CSS-wide keywords: 'initial' and 'inherit'">
  8   <link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color" title="5.2. The 'currentcolor' keyword">
  9   <link rel="match" href="reference/multicol-rule-color-inherit-001-ref.htm">
 10   <meta name="flags" content="ahem">
 11   <meta name="assert" content="In this test, div#parent's computed 'column-rule-color' is given by div#parent's 'currentcolor' (a reserved keyword) and not 'red'. Then div.child's 'column-rule-color' take such specified value ('currentcolor') from its parent (due to 'inherit' keyword) and not 'red'. And then, it is applied to div.child's 'column-rule-color'.">
 12   <style type="text/css">
 13   div#parent
 14   {
 15   color: red;
 16   font: 20px/1 Ahem;
 17   }
 18 
 19   div.child
 20   {
 21   color: green;
 22   display: inline-block;
 23   font-size: 1em;
 24   width: 5em;
 25 
 26   column-count: 3;
 27   column-gap: 1em;
 28   column-rule-color: inherit;
 29   column-rule-style: solid;
 30   column-rule-width: 1em;
 31   }
 32 
 33   /*
 34 
 35   N == 3;
 36 
 37   W == max(0, (available-width - ((N - 1) * column-gap)) / N);
 38   W == max(0, (5em - ((3 - 1) * 1em)) / 3);
 39   W == max(0, (5em - (2 * 1em)) / 3);
 40   W == max(0, (5em - 2em) / 3);
 41   W == max(0, 3em / 3);
 42   W == max(0, 1em);
 43   W == 1em;
 44 
 45   */
 46 
 47   </style>
 48  </head>
 49 
 50  <body>
 51 
 52   <p>Test passes if there are 6 vertical green stripes and <strong>no red</strong>.</p>
 53 
 54   <div id="parent">
 55 	<div class="child">
 56 	&nbsp;
 57 	&nbsp;
 58 	&nbsp;
 59 	&nbsp;
 60 	&nbsp;
 61 	&nbsp;
 62 	&nbsp;
 63 	&nbsp;
 64 	&nbsp;
 65 	&nbsp;
 66 	&nbsp;
 67 	&nbsp;
 68 	&nbsp;
 69 	&nbsp;
 70 	&nbsp;
 71 	&nbsp;
 72 	&nbsp;
 73 	&nbsp;
 74 	</div>
 75 
 76 	<div class="child">
 77 	&nbsp;
 78 	&nbsp;
 79 	&nbsp;
 80 	&nbsp;
 81 	&nbsp;
 82 	&nbsp;
 83 	&nbsp;
 84 	&nbsp;
 85 	&nbsp;
 86 	&nbsp;
 87 	&nbsp;
 88 	&nbsp;
 89 	&nbsp;
 90 	&nbsp;
 91 	&nbsp;
 92 	&nbsp;
 93 	&nbsp;
 94 	&nbsp;
 95 	</div>
 96 
 97 	<div class="child">
 98 	&nbsp;
 99 	&nbsp;
100 	&nbsp;
101 	&nbsp;
102 	&nbsp;
103 	&nbsp;
104 	&nbsp;
105 	&nbsp;
106 	&nbsp;
107 	&nbsp;
108 	&nbsp;
109 	&nbsp;
110 	&nbsp;
111 	&nbsp;
112 	&nbsp;
113 	&nbsp;
114 	&nbsp;
115 	&nbsp;
116 	</div>
117 
118   </div>
119 
120  </body>
121 </html>