1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Test: One named flow multi-column container with monolithic content
4 flowing into first region of smaller width 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-028-ref.htm" rel="match">
9 <meta content="This test checks that monolithic content flows
10 through a region with a smaller width than the multi-column named flow and the
11 second region and that it overflows the first region visibly as a
12 multi-column container before flowing into the second region." name="assert">
13 <style type="text/css">
14 #named-flow-multicol {
15 width: 130px;
16 height: 120px;
17 columns: 2;
18 column-gap: 10px;
19 flow-into: multicol;
20 }
21 .green, .blue {
22 width: 60px;
23 height: 240px;
24 }
25 .green {
26 background-color: green;
27 }
28 .blue {
29 background-color: blue;
30 }
31 #region-1, #region-2 {
32 position: absolute;
33 height: 120px;
34 flow-from: multicol;
35 }
36 #region-1 {
37 top: 70px;
38 left: 20px;
39 width: 60px;
40 }
41 #region-2 {
42 top: 70px;
43 left: 160px;
44 width: 130px;
45 }
46 .failure {
47 position: absolute;
48 top: 70px;
49 width: 60px;
50 height: 120px;
51 background-color: red;
52 z-index: -10;
53 }
54 #block-1 {
55 left: 20px;
56 }
57 #block-2 {
58 left: 90px;
59 }
60 #block-3 {
61 left: 190px;
62 }
63 #block-4 {
64 left: 260px;
65 }
66 </style>
67 </head>
68 <body>
69 <p>The test passes if there are two green vertical rectangles on the left of two blue vertical rectangles.
70 There should be no red.</p>
71 <div id="named-flow-multicol">
72 <div class="green named-flow-block"></div>
73 <div class="blue named-flow-block"></div>
74 </div>
75 <div id="region-1"></div>
76 <div id="region-2"></div>
77 <div id="block-1" class="failure"></div>
78 <div id="block-2" class="failure"></div>
79 <div id="block-3" class="failure"></div>
80 <div id="block-4" class="failure"></div>
81
82
83 </body></html>