regions-multicol-011

One named flow, non-text fragmentable content flowing into non-mulicol region then into a multi-column region

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
This test checks that non-text fragmentable named flow content is fragmented through a simple region, then through a multi-column region.

Source

 1 <!DOCTYPE html>
 2 <html><head>
 3     <title>CSS Test: One named flow, non-text fragmentable content flowing into non-mulicol
 4                      region then into a multi-column 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-regions/#multi-column-regions" rel="help">
11     <link href="http://www.w3.org/TR/css3-multicol/#columns" rel="help">
12     <link href="reference/regions-multicol-009-ref.htm" rel="match">
13     <meta content="This test checks that non-text fragmentable named
14                                  flow content is fragmented through a simple region, then
15                                  through a multi-column region." name="assert">
16     <style type="text/css">
17         #named-flow {
18             width: 100px;
19             height: 500px;
20             flow-into: multicol;
21         }
22         #named-flow-child-1 {
23             width: 100px;
24             height: 100px;
25             background: green;
26         }
27         #named-flow-child-2, #named-flow-child-3 {
28             width: 100px;
29             height: 200px;
30             background: green;
31         }
32         #first-region {
33             position: absolute;
34             top: 170px;
35             left: 20px;
36             width: 100px;
37             flow-from: multicol;
38         }
39         #multicol-region {
40             position: absolute;
41             top: 70px;
42             left: 150px;
43             width: 230px;
44             height: 200px;
45             columns: 2;
46             column-gap: 30px;
47             flow-from: multicol;
48         }
49         .failure {
50             position: absolute;
51             background-color: red;
52             width: 100px;
53             z-index: -1;
54         }
55         #block-1, #block-2 {
56             top: 70px;
57             height: 200px;
58         }
59         #block-1 {
60             left: 150px;
61         }
62         #block-2 {
63             left: 280px;
64         }
65         #block-3 {
66             top: 170px;
67             left: 20px;
68             height: 100px;
69         }
70     </style>
71 </head>
72 <body>
73    <p>The test passes if there is one green square on the left and two vertical
74        green rectangles to the right of it and no red.</p>
75    <div id="named-flow">
76         <div id="named-flow-child-1"></div>
77         <div id="named-flow-child-2"></div>
78         <div id="named-flow-child-3"></div>
79    </div>
80    <div id="first-region"></div>
81    <div id="multicol-region"></div>
82    <div id="block-1" class="failure"></div>
83    <div id="block-2" class="failure"></div>
84    <div id="block-3" class="failure"></div>
85 
86 
87 </body></html>