1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Test: Multiple named flows, text content flowing into multiple
4 regions in a multi-column container</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-017-ref.htm" rel="match">
12 <meta content="This test checks multiple named flows with text
13 content flow into multiple regions in the multi-column
14 container." name="assert">
15 <meta content="ahem" name="flags">
16 <style type="text/css">
17 #multicol-container {
18 position: absolute;
19 top: 50px;
20 left: 20px;
21 width: 200px;
22 height: 200px;
23 border: 2px solid black;
24 columns: 4;
25 column-gap: 0;
26 }
27 .named-flow {
28 font-family: Ahem;
29 font-size: 25px;
30 line-height: 1em;
31 }
32 .region {
33 height: 50px;
34 }
35 .black {
36 color: black;
37 }
38 .gray {
39 color: gray;
40 }
41 .region.black {
42 flow-from: multicol-1;
43 }
44 .named-flow.black {
45 flow-into: multicol-1;
46 }
47 .region.gray{
48 flow-from: multicol-2;
49 }
50 .named-flow.gray {
51 flow-into: multicol-2;
52 }
53 #failure {
54 position: absolute;
55 top: 50px;
56 left: 20px;
57 background-color: red;
58 width: 204px;
59 height: 204px;
60 z-index: -1;
61 }
62 </style>
63 </head>
64 <body>
65 <p>The test passes if there is a 4x4 black and gray checkerboard and no red.</p>
66 <div class="named-flow black">
67 XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX
68 </div>
69 <div class="named-flow gray">
70 XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX XX
71 </div>
72 <div id="multicol-container">
73 <div class="region black"></div>
74 <div class="region gray"></div>
75 <div class="region black"></div>
76 <div class="region gray"></div>
77 <div class="region gray"></div>
78 <div class="region black"></div>
79 <div class="region gray"></div>
80 <div class="region black"></div>
81 <div class="region black"></div>
82 <div class="region gray"></div>
83 <div class="region black"></div>
84 <div class="region gray"></div>
85 <div class="region gray"></div>
86 <div class="region black"></div>
87 <div class="region gray"></div>
88 <div class="region black"></div>
89 </div>
90 <div id="failure"></div>
91
92
93 </body></html>