1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Test: One named flow, text content flowing into multiple regions
4 fragmented across multiple columns and overflowing the last 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-013-ref.htm" rel="match">
12 <meta content="ahem" name="flags">
13 <meta content="This test checks that the named flow text
14 content flows through the regions in the
15 multi-column container and that it overflows
16 visibly into a fourth column." name="assert">
17 <style type="text/css">
18 #named-flow {
19 font-family: Ahem;
20 font-size: 25px;
21 line-height: 1em;
22 color: green;
23 flow-into: multicol;
24 }
25 #multicol-container {
26 position: absolute;
27 top: 50px;
28 left: 20px;
29 width: 170px;
30 height: 200px;
31 columns: 3;
32 column-gap: 10px;
33 }
34 #region-1 , #region-2, #region-3 {
35 width: 50px;
36 height: 200px;
37 flow-from: multicol;
38 }
39 .failure {
40 position: absolute;
41 background-color: red;
42 top: 50px;
43 width: 50px;
44 height: 200px;
45 z-index: -1;
46 }
47 #bar-1 {
48 left: 20px;
49 }
50 #bar-2 {
51 left: 80px;
52 }
53 #bar-3 {
54 left: 140px;
55 }
56 #bar-4 {
57 left: 200px;
58 }
59 </style>
60 </head>
61 <body>
62 <p>The test passes if there are four green vertical bars and no red.</p>
63 <div id="named-flow">
64 XX XX XX XX XX XX XX XX
65 XX XX XX XX XX XX XX XX
66 XX XX XX XX XX XX XX XX
67 XX XX XX XX XX XX XX XX
68 </div>
69 <div id="multicol-container">
70 <div id="region-1"></div>
71 <div id="region-2"></div>
72 <div id="region-3"></div>
73 </div>
74 <div id="bar-1" class="failure"></div>
75 <div id="bar-2" class="failure"></div>
76 <div id="bar-3" class="failure"></div>
77 <div id="bar-4" class="failure"></div>
78
79
80 </body></html>