1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Test: One named flow multi-column container, monolithic content
4 flowing into 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-012-ref.htm" rel="match">
12 <meta content="This test checks that monolithic content in a named flow
13 multi-column container flows through the region." name="assert">
14 <style type="text/css">
15 #named-flow-multicol {
16 width: 360px;
17 height: 200px;
18 columns: 3;
19 column-gap: 30px;
20 column-rule: none;
21 flow-into: multicol;
22 }
23 .named-flow-block {
24 width: 100px;
25 height: 300px;
26 }
27 .green {
28 background-color: green;
29 }
30 .lightgreen {
31 background-color: lightgreen;
32 }
33 #region {
34 position: absolute;
35 top: 150px;
36 left: 20px;
37 width: 230px;
38 height: 200px;
39 flow-from: multicol;
40 }
41 .failure {
42 position: absolute;
43 top: 150px;
44 left: 20px;
45 background-color: red;
46 width: 100px;
47 height: 200px;
48 z-index: -1;
49 }
50 #block-1 {
51 left: 20px;
52 }
53 #block-2 {
54 left: 150px;
55 }
56 #block-3 {
57 left: 280px;
58 }
59 </style>
60 </head>
61 <body>
62 <p>The test passes if:
63 </p><ul>
64 <li>There is a dark green vertical rectangle on the left</li>
65 <li>There is a dark green square in the middle with a light green
66 square below it</li>
67 <li>There is a light green vertical rectangle on the right</li>
68 <li>There is no red
69 </li></ul>
70 <p></p>
71 <div id="named-flow-multicol">
72 <div class="named-flow-block green"></div>
73 <div class="named-flow-block lightgreen"></div>
74 </div>
75 <div id="region"></div>
76 <div id="block-1" class="failure"></div>
77 <div id="block-2" class="failure"></div>
78 <div id="block-3" class="failure"></div>
79
80
81 </body></html>