multicol-span-all-margin-nested-001

vertically adjacent spanning elements with nested margins (complex)

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
ahem
Assertion
In this test, the first h4 element would collapse its margin bottom with the top margin of div#child if only div#child was also a spanning element, which is not: the bottom margin of the first h4 element is 8em wide while the top margin of div#child is only 2em wide (1 column box wide). That is why the bottom margin of the first h4 element should not collapse with the top margin of div#child.

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: vertically adjacent spanning elements with nested margins (complex)</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-19 -->
 7   <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'">
 8   <link rel="match" href="reference/multicol-span-all-margin-nested-001-ref.htm">
 9   <meta name="flags" content="ahem">
10   <meta name="assert" content="In this test, the first h4 element would collapse its margin bottom with the top margin of div#child if only div#child was also a spanning element, which is not: the bottom margin of the first h4 element is 8em wide while the top margin of div#child is only 2em wide (1 column box wide). That is why the bottom margin of the first h4 element should not collapse with the top margin of div#child.">
11   <style type="text/css">
12   div#multi-column
13   {
14   background-color: yellow;
15   border: gray solid 1em;
16   color: navy;
17   font: 1.25em/1 Ahem;
18   orphans: 1;
19   overflow: hidden;
20   widows: 1;
21   width: 8em;
22 
23   column-count: 4;
24   column-gap: 0em;
25 
26   /*
27 
28   N == 4;
29 
30   W == 2em;
31 
32   */
33   }
34 
35   h4, div#child
36   {
37   background-color: black;
38   color: black;
39   font: inherit;
40   margin: 0;
41   }
42 
43   h4
44   {
45   margin: 1em 0;
46   width: 11em;
47 
48   column-span: all;
49   }
50   </style>
51  </head>
52  <body>
53 
54   <div id="multi-column">
55     na vy na vy
56     na vy na vy
57 
58     <h4 id="first">black</h4>
59 
60     <div id="child">
61       <h4 id="nested">black</h4>
62     </div>
63 
64     na vy na vy
65     na vy na vy
66   </div>
67 
68  </body>
69 </html>