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>