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