1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Test: One named flow multi-column container, text content
4 flowing into one autosized region with overflowing column</title>
5 <link href="mailto:rhauck@adobe.com" rel="author" title="Rebecca Hauck">
6 <link href="http://www.w3.org/TR/css3-regions/#multi-column-regions" rel="help">
7 <link href="http://www.w3.org/TR/css3-multicol/#columns" rel="help">
8 <link href="reference/regions-multicol-003-ref.htm" rel="match">
9 <meta content="This test checks that text content flows
10 through an autosized region from a multi-column named
11 flow and that it overflows visibly into a third column." name="assert">
12 <meta content="ahem" name="flags">
13 <style type="text/css">
14 #named-flow-multicol {
15 font-family: Ahem;
16 font-size: 20px;
17 line-height: 1em;
18 width: 230px;
19 height: 200px;
20 color: green;
21 columns: 2;
22 column-gap: 30px;
23 flow-into: multicol;
24 }
25 #region {
26 position: absolute;
27 top: 70px;
28 left: 20px;
29 flow-from: multicol;
30 }
31 .failure {
32 position: absolute;
33 top: 70px;
34 left: 20px;
35 background-color: red;
36 width: 100px;
37 height: 200px;
38 z-index: -1;
39 }
40 #block-1 {
41 left: 20px;
42 }
43 #block-2 {
44 left: 150px;
45 }
46 #block-3 {
47 left: 280px;
48 }
49 </style>
50 </head>
51 <body>
52 <p>The test passes if there are three vertical green rectangles and no red.</p>
53 <div id="named-flow-multicol">
54 XXXXX XXXXX XXXXX XXXXX XXXXX
55 XXXXX XXXXX XXXXX XXXXX XXXXX
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 </div>
61 <div id="region"></div>
62 <div id="block-1" class="failure"></div>
63 <div id="block-2" class="failure"></div>
64 <div id="block-3" class="failure"></div>
65
66
67 </body></html>