1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Test: One named flow, text content flowing into one multi-column region</title>
4 <link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
5 <!-- Reviewed on Github on 09-26-2013: https://github.com/w3c/csswg-test/pull/89 -->
6 <link href="mailto:mibalan@adobe.com" rel="reviewer" title="Mihai Balan">
7 <link href="http://www.w3.org/TR/css3-regions/#the-flow-into-property" rel="help">
8 <link href="http://www.w3.org/TR/css3-regions/#flow-from" rel="help">
9 <link href="http://www.w3.org/TR/css3-regions/#multi-column-regions" rel="help">
10 <link href="http://www.w3.org/TR/css3-multicol/#columns" rel="help">
11 <link href="reference/regions-multicol-003-ref.htm" rel="match">
12 <meta content="ahem" name="flags">
13 <meta content="This test checks that text content in a named flow is
14 laid out using columns when flowed in a multi-column
15 region." name="assert">
16 <style type="text/css">
17 #named-flow {
18 font-family: Ahem;
19 font-size: 20px;
20 line-height: 1em;
21 color: green;
22 flow-into: multicol;
23 }
24 #multicol-region {
25 position: absolute;
26 top: 70px;
27 left: 20px;
28 width: 360px;
29 height: 200px;
30 columns: 3;
31 column-gap: 30px;
32 flow-from: multicol;
33 }
34 .failure {
35 position: absolute;
36 top: 70px;
37 background-color: red;
38 width: 100px;
39 height: 200px;
40 z-index: -1;
41 }
42 #block-1 {
43 left: 20px;
44 }
45 #block-2 {
46 left: 150px;
47 }
48 #block-3 {
49 left: 280px;
50 }
51 </style>
52 </head>
53 <body>
54 <p>The test passes if there are three vertical green rectangles and no red.</p>
55 <div id="named-flow">
56 XXXXX XXXXX XXXXX XXXXX XXXXX
57 XXXXX XXXXX XXXXX XXXXX XXXXX
58 XXXXX XXXXX XXXXX XXXXX XXXXX
59 XXXXX XXXXX XXXXX XXXXX XXXXX
60 XXXXX XXXXX XXXXX XXXXX XXXXX
61 XXXXX XXXXX XXXXX XXXXX XXXXX
62 </div>
63 <div id="multicol-region"></div>
64 <div id="block-1" class="failure"></div>
65 <div id="block-2" class="failure"></div>
66 <div id="block-3" class="failure"></div>
67
68
69 </body></html>