1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Test: One named flow, text content - fragmented between
4 multicol region and non-multicol 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-regions/#multi-column-regions" rel="help">
11 <link href="http://www.w3.org/TR/css3-multicol/#columns" rel="help">
12 <link href="reference/regions-multicol-006-ref.htm" rel="match">
13 <meta content="ahem" name="flags">
14 <meta content="This test checks that the named flow text
15 content flows through the multi-column region
16 in the region chain then through the second
17 non-multicol region in the chain." name="assert">
18 <style type="text/css">
19 #named-flow {
20 font-family: Ahem;
21 font-size: 20px;
22 line-height: 1em;
23 color: green;
24 flow-into: multicol;
25 }
26 #multicol-region {
27 position: absolute;
28 top: 70px;
29 left: 20px;
30 width: 230px;
31 height: 200px;
32 columns: 2;
33 column-gap: 30px;
34 flow-from: multicol;
35 }
36 #remainder-region {
37 position: absolute;
38 top: 170px;
39 left: 280px;
40 width: 100px;
41 flow-from: multicol;
42 }
43 .failure {
44 position: absolute;
45 background-color: red;
46 width: 100px;
47 z-index: -1;
48 }
49 #block-1, #block-2 {
50 top: 70px;
51 height: 200px;
52 }
53 #block-1 {
54 left: 20px;
55 }
56 #block-2 {
57 left: 150px;
58 }
59 #block-3 {
60 top: 170px;
61 left: 280px;
62 height: 100px;
63 }
64 </style>
65 </head>
66 <body>
67 <p>The test passes if there are two vertical green rectangles with one green
68 square to the right of them and no red.</p>
69 <div id="named-flow">
70 XXXXX XXXXX XXXXX XXXXX XXXXX
71 XXXXX XXXXX XXXXX XXXXX XXXXX
72 XXXXX XXXXX XXXXX XXXXX XXXXX
73 XXXXX XXXXX XXXXX XXXXX XXXXX
74 XXXXX XXXXX XXXXX XXXXX XXXXX
75 </div>
76 <div id="multicol-region"></div>
77 <div id="remainder-region"></div>
78 <div id="block-1" class="failure"></div>
79 <div id="block-2" class="failure"></div>
80 <div id="block-3" class="failure"></div>
81
82
83 </body></html>