1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Test: One named flow, text content flowing into a simple region
4 then into a multi-column 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-009-ref.htm" rel="match">
13 <meta content="This test checks that text named flow
14 content is fragmented first through a simple region,
15 then through a multi-column 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 #first-region {
25 position: absolute;
26 top: 170px;
27 left: 20px;
28 width: 100px;
29 flow-from: multicol;
30 }
31 #multicol-region {
32 position: absolute;
33 top: 70px;
34 left: 150px;
35 width: 230px;
36 height: 200px;
37 columns: 2;
38 column-gap: 30px;
39 flow-from: multicol;
40 }
41 .failure {
42 position: absolute;
43 background-color: red;
44 width: 100px;
45 z-index: -1;
46 }
47 #block-1, #block-2 {
48 top: 70px;
49 height: 200px;
50 }
51 #block-1 {
52 left: 150px;
53 }
54 #block-2 {
55 left: 280px;
56 }
57 #block-3 {
58 top: 170px;
59 left: 20px;
60 height: 100px;
61 }
62 </style>
63 </head>
64 <body>
65 <p>The test passes if there is one green square and two vertical
66 green rectangles to the right of it and no red.</p>
67 <div id="named-flow">
68 XXXXX XXXXX XXXXX XXXXX XXXXX
69 XXXXX XXXXX XXXXX XXXXX XXXXX
70 XXXXX XXXXX XXXXX XXXXX XXXXX
71 XXXXX XXXXX XXXXX XXXXX XXXXX
72 XXXXX XXXXX XXXXX XXXXX XXXXX
73 </div>
74 <div id="first-region"></div>
75 <div id="multicol-region"></div>
76 <div id="block-1" class="failure"></div>
77 <div id="block-2" class="failure"></div>
78 <div id="block-3" class="failure"></div>
79
80
81 </body></html>