regions-multicol-003

One named flow multi-column container, text content overflowing one 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 maintaining the named flow multi-column container and that it overflows visibly into a third column.

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3     <title>CSS Test: One named flow multi-column container, text content
 4                      overflowing one region</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-003-ref.htm" rel="match">
12     <meta content="This test checks that text content flows through a region
13                                  maintaining the named flow  multi-column container and that
14                                  it overflows visibly into a third column." name="assert">
15     <meta content="ahem" name="flags">
16     <style type="text/css">
17         #named-flow-multicol {
18             font-family: Ahem;
19             font-size: 20px;
20             line-height: 1em;
21             width: 230px;
22             height: 200px;
23             color: green;
24             columns: 2;
25             column-gap: 30px;
26             flow-into: multicol;
27         }
28         #region {
29             position: absolute;
30             top: 70px;
31             left: 20px;
32             width: 230px;
33             height: 200px;
34             flow-from: multicol;
35         }
36         .failure {
37            position: absolute;
38            top: 70px;
39            left: 20px;
40            background-color: red;
41            width: 100px;
42            height: 200px;
43            z-index: -1;
44         }
45         #block-1 {
46             left: 20px;
47         }
48         #block-2 {
49             left: 150px;
50         }
51         #block-3 {
52             left: 280px;
53         }
54     </style>
55 </head>
56 <body>
57     <p>The test passes if there are three vertical green rectangles and no red.</p>
58     <div id="named-flow-multicol">
59        XXXXX XXXXX XXXXX XXXXX XXXXX
60        XXXXX XXXXX XXXXX XXXXX XXXXX
61        XXXXX XXXXX XXXXX XXXXX XXXXX
62        XXXXX XXXXX XXXXX XXXXX XXXXX
63        XXXXX XXXXX XXXXX XXXXX XXXXX
64        XXXXX XXXXX XXXXX XXXXX XXXXX
65     </div>
66     <div id="region"></div>
67     <div id="block-1" class="failure"></div>
68     <div id="block-2" class="failure"></div>
69     <div id="block-3" class="failure"></div>
70 
71 
72 </body></html>