1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Test: Multiple named flows multi-column containers, text content flowing
4 into multiple visually overlapping 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-019-ref.htm" rel="match">
12 <meta content="ahem" name="flags">
13 <meta content="This test checks multiple named flow multi-column containers
14 with text content flow into multiple overlapping regions." name="assert">
15 <style type="text/css">
16 .named-flow-multicol {
17 width: 150px;
18 font-family: Ahem;
19 font-size: 25px;
20 line-height: 1em;
21 columns: 2;
22 column-gap: 50px;
23 }
24 .green {
25 color: green;
26 flow-into: multicol-1;
27 }
28 .blue {
29 color: blue;
30 flow-into: multicol-2;
31 }
32 #region-1, #region-2 {
33 position: absolute;
34 top: 50px;
35 }
36 #region-1 {
37 left: 20px;
38 flow-from: multicol-1;
39 }
40 #region-2 {
41 left: 70px;
42 flow-from: multicol-2;
43 }
44 #failure {
45 position: absolute;
46 top: 50px;
47 left: 20px;
48 background-color: red;
49 width: 200px;
50 height: 200px;
51 z-index: -1;
52 }
53 </style>
54 </head>
55 <body>
56 <p>The test passes if there is a square with four vertical
57 stripes alternating green and blue, and no red.</p>
58 <div class="green named-flow-multicol">
59 XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX
60 </div>
61 <div class="blue named-flow-multicol">
62 XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX
63 </div>
64 <div id="region-1"></div>
65 <div id="region-2"></div>
66 <div id="failure"></div>
67
68
69 </body></html>