regions-multicol-024

One named flow multi-column container with text content flowing into region of smaller width/height than the second region

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
ahem
Assertion
This test checks that text content flows through a region with a smaller width + height than the multi-column named flow and than the second region and that it overflows the first region visibly as a multi-column container before flowing into the second region.

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3     <title>CSS Test: One named flow multi-column container with text content flowing
 4                      into region of smaller width/height than the second region</title>
 5     <link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
 6     <link href="http://www.w3.org/TR/css3-regions/#multi-column-regions" rel="help">
 7     <link href="http://www.w3.org/TR/css3-multicol/#columns" rel="help">
 8     <link href="reference/regions-multicol-024-ref.htm" rel="match">
 9     <meta content="This test checks that text content flows through a region
10                                  with a smaller width + height than the multi-column named flow
11                                  and than the second region and that it overflows the first region visibly
12                                  as a multi-column container before flowing into the second region." name="assert">
13     <meta content="ahem" name="flags">
14     <style type="text/css">
15         #named-flow-multicol {
16             font-family: Ahem;
17             font-size: 20px;
18             line-height: 1em;
19             width: 130px;
20             height: 120px;
21             columns: 2;
22             column-gap: 10px;
23             flow-into: multicol;
24         }
25         .green {
26             color: green;
27         }
28         .blue {
29             color: blue;
30         }
31         #region-1, #region-2 {
32             position: absolute;
33             flow-from: multicol;
34         }
35         #region-1 {
36             top: 70px;
37             left: 20px;
38             width: 60px;
39             height: 60px;
40         }
41         #region-2 {
42             top: 70px;
43             left: 190px;
44             width: 130px;
45             height: 120px;
46         }
47         .failure {
48            position: absolute;
49            top: 70px;
50            background-color: red;
51            width: 60px;
52            height: 60px;
53            z-index: -10;
54         }
55         #block-1 {
56             left: 20px;
57             height: 60px;
58         }
59         #block-2 {
60             left: 90px;
61             height: 60px;
62         }
63         #block-3 {
64             left: 190px;
65             height: 120px;
66         }
67     </style>
68 </head>
69 <body>
70     <p>The test passes if there are two green side by side squares on the left of one blue vertical rectangle.
71         There should be no red.</p>
72     <div id="named-flow-multicol">
73        <span class="green">XXX XXX XXX XXX XXX XXX</span>
74        <span class="blue">XXX XXX XXX XXX XXX XXX</span>
75     </div>
76     <div id="region-1"></div>
77     <div id="region-2"></div>
78     <div id="block-1" class="failure"></div>
79     <div id="block-2" class="failure"></div>
80     <div id="block-3" class="failure"></div>
81 
82 
83 </body></html>