1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Test: Multiple named flows multi-column containers with
4 unspecified width, non-text content flowing into multiple
5 overlapping regions</title>
6 <link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
7 <!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
8 <link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
9 <link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
10 <link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
11 <link href="http://www.w3.org/TR/css3-multicol/#columns" rel="help">
12 <link href="reference/regions-multicol-019-ref.htm" rel="match">
13 <meta content="This test checks multiple named flow multi-column
14 containers with unspecified width and non-text content flow
15 into multiple overlapping regions." name="assert">
16 <style type="text/css">
17 .named-flow-multicol {
18 columns: 2;
19 column-gap: 50px;
20 }
21 .bar {
22 width: 50px;
23 height: 200px;
24 }
25 .green {
26 background-color: green;
27 }
28 .blue {
29 background-color: blue;
30 }
31 #named-flow-1 {
32 flow-into: multicol-1;
33 }
34 #named-flow-2 {
35 flow-into: multicol-2;
36 }
37 #region-1, #region-2 {
38 position: absolute;
39 top: 50px;
40 }
41 #region-1 {
42 left: 20px;
43 color: green;
44 flow-from: multicol-1;
45 }
46 #region-2 {
47 left: 70px;
48 flow-from: multicol-2;
49 }
50 #failure {
51 position: absolute;
52 top: 50px;
53 left: 20px;
54 background-color: red;
55 width: 200px;
56 height: 200px;
57 z-index: -1;
58 }
59 </style>
60 </head>
61 <body>
62 <p>The test passes if there is a square with four vertical
63 stripes alternating green and blue, and no red.</p>
64 <div id="named-flow-1" class="named-flow-multicol">
65 <div class="green bar"></div>
66 <div class="green bar"></div>
67 </div>
68 <div id="named-flow-2" class="named-flow-multicol">
69 <div class="blue bar"></div>
70 <div class="blue bar"></div>
71 </div>
72 <div id="region-1"></div>
73 <div id="region-2"></div>
74 <div id="failure"></div>
75
76
77 </body></html>