regions-multicol-016

One named flow multi-column container, monolithic content flowing into multiple regions

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
This test checks that monolithic content flows through multiple regions from the named flow multi-column container and that it overflows the last region in the region chain visibly into a fifth column.

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3 <title>CSS Test: One named flow multi-column container, monolithic
 4                  content flowing into multiple regions</title>
 5     <link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
 6     <!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
 7     <link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
 8     <link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
 9     <link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
10     <link href="http://www.w3.org/TR/css3-multicol/#columns" rel="help">
11     <link href="reference/regions-multicol-016-ref.htm" rel="match">
12     <meta content="This test checks that monolithic content
13                                  flows through multiple regions from the named flow
14                                  multi-column container and that it overflows the last
15                                  region in the region chain visibly into
16                                  a fifth column." name="assert">
17     <style type="text/css">
18         #named-flow-multicol {
19             background-color: green;
20             width: 50px;
21             height: 900px;
22             columns: 2;
23             column-gap: 10px;
24             flow-into: multicol;
25 
26         }
27         #region-1 , #region-2 {
28             position: absolute;
29             top: 75px;
30             width: 110px;
31             flow-from: multicol;
32         }
33         #region-1 {
34             left: 20px;
35             height: 200px;
36         }
37         #region-2 {
38             left: 140px;
39             height: 200px;
40         }
41         .failure {
42             position: absolute;
43             background-color: red;
44             top: 75px;
45             width: 50px;
46             z-index: -1;
47         }
48         #bar-1, #bar-2, #bar-3, #bar-4 {
49             height: 200px;
50         }
51         #bar-1 {
52             left: 20px;
53         }
54         #bar-2 {
55             left: 80px;
56         }
57         #bar-3 {
58             left: 140px;
59         }
60         #bar-4 {
61             left: 200px;
62         }
63         #square {
64             left: 260px;
65             height: 50px;
66         }
67     </style>
68 </head>
69 <body>
70         <p>The test passes if there are four green vertical bars, plus one
71            small green square to their right and no red.</p>
72         <div id="named-flow-multicol"></div>
73         <div id="region-1"></div>
74         <div id="region-2"></div>
75         <div id="bar-1" class="failure"></div>
76         <div id="bar-2" class="failure"></div>
77         <div id="bar-3" class="failure"></div>
78         <div id="bar-4" class="failure"></div>
79         <div id="square" class="failure"></div>
80 
81 
82 </body></html>