1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Test: One named flow multi-column container with text content flowing
4 into region of smaller width/height than the second region</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-024-ref.htm" rel="match">
9 <meta content="This test checks that text content flows through a region
10 with a smaller width + height than the multi-column named flow
11 and than the second region and that it overflows the first region visibly
12 as a multi-column container before flowing into the second region." name="assert">
13 <meta content="ahem" name="flags">
14 <style type="text/css">
15 #named-flow-multicol {
16 font-family: Ahem;
17 font-size: 20px;
18 line-height: 1em;
19 width: 130px;
20 height: 120px;
21 columns: 2;
22 column-gap: 10px;
23 flow-into: multicol;
24 }
25 .green {
26 color: green;
27 }
28 .blue {
29 color: blue;
30 }
31 #region-1, #region-2 {
32 position: absolute;
33 flow-from: multicol;
34 }
35 #region-1 {
36 top: 70px;
37 left: 20px;
38 width: 60px;
39 height: 60px;
40 }
41 #region-2 {
42 top: 70px;
43 left: 190px;
44 width: 130px;
45 height: 120px;
46 }
47 .failure {
48 position: absolute;
49 top: 70px;
50 background-color: red;
51 width: 60px;
52 height: 60px;
53 z-index: -10;
54 }
55 #block-1 {
56 left: 20px;
57 height: 60px;
58 }
59 #block-2 {
60 left: 90px;
61 height: 60px;
62 }
63 #block-3 {
64 left: 190px;
65 height: 120px;
66 }
67 </style>
68 </head>
69 <body>
70 <p>The test passes if there are two green side by side squares on the left of one blue vertical rectangle.
71 There should be no red.</p>
72 <div id="named-flow-multicol">
73 <span class="green">XXX XXX XXX XXX XXX XXX</span>
74 <span class="blue">XXX XXX XXX XXX XXX XXX</span>
75 </div>
76 <div id="region-1"></div>
77 <div id="region-2"></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>