multicol-fill-auto-block-children-002

'column-fill: auto' and 'column-span: all' (complex)

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
This test checks that if 'column-fill' is set to 'auto' and a multicolumn element content is solely made of block container boxes, then it should fill column boxes sequentially with such content and, in this test, it should overflow outside of it. This test relies on the idea that a 'column-span: all' element will occupy more space in a multi-column element than a 'column-span: none' element, therefore reducing available space for content in column boxes.

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-fill: auto' and 'column-span: all' (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-16 -->
 7   <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-span" title="6.1. 'column-span'">
 8   <link rel="help" href="http://www.w3.org/TR/css3-multicol/#pagination-and-overflow-outside-multicol" title="8.2. Pagination and overflow outside multicol elements">
 9   <link rel="match" href="reference/multicol-fill-auto-block-children-002-ref.htm">
10 
11   <meta name="flags" content="">
12   <meta name="assert" content="This test checks that if 'column-fill' is set to 'auto' and a multicolumn element content is solely made of block container boxes, then it should fill column boxes sequentially with such content and, in this test, it should overflow outside of it. This test relies on the idea that a 'column-span: all' element will occupy more space in a multi-column element than a 'column-span: none' element, therefore reducing available space for content in column boxes.">
13   <style type="text/css">
14   html {background-color: white;}
15 
16   body
17   {
18   background-color: blue;
19   height: 200px;
20   margin: 8px;
21   width: 680px;
22 
23   column-count: 3;
24   column-fill: auto;
25   column-gap: 10px;
26 
27   /*
28   So, each column box should be
29   [680px minus (2 mult 10px)] divided by 3 == 220px wide
30   */
31   }
32 
33   h1
34   {
35   color: white;
36   column-span: all;
37   font-size: 2em;
38   line-height: 1.25; /* or 1.21875 to achieve a 39px tall line box */
39   margin: 21px 0em;
40   /*
41    21px : margin-top of h1 element which must not collapse with body's margin-top
42    80px : content height: 2 line boxes required to render the "Test passes if ..." sentence
43    21px : margin-bottom of h1 element
44  ====================================
45   122px : margin box height of h1 element
46   */
47   }
48 
49   h2
50   {
51   color: blue;
52   font-size: 1.5em;
53   line-height: 1;
54   margin: 0 0 2.25em;
55   /*
56     0px : margin-top of h2 element
57    24px : content height: 1 line box required to render all the nbsp; and PASS! word
58    54px : margin-bottom of h2 element
59  ====================================
60    78px : margin box height of h2 element
61   */
62   }
63   </style>
64  </head>
65 
66  <body>
67 
68   <h1>Test passes if "PASS!" is<br>on the right ↘</h1>
69 
70   <h2>&nbsp;</h2>
71 
72   <h2>&nbsp;</h2>
73 
74   <h2>&nbsp;</h2>
75 
76   <h2>PASS!</h2>
77 
78   <!--
79 
80   Expected result:
81 
82   8px                                           688px
83   v                                              v
84   ************************************************
85   *                                              *
86   *  <h1>Test passes if the word "PASS!" is<br />*  1st line box
87   *  on the right &#8600;</h1>                   *  2nd line box
88   *                                              *
89   ************************************************
90   *                                              *
91   * <h2>nbsp;<h2>  <h2>nbsp;<h2>  <h2>nbsp;<h2>  *  <h2>PASS!</h2>
92   *                                              *
93   ************************************************
94                 ^              ^
95                228px          458px
96   -->
97 
98  </body>
99 </html>