1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!DOCTYPE html>
<html>
<head>
<title>CSS Regions: floats outside of the region</title>
<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
<meta name="flags" content="ahem">
<meta name="assert" content="Test checks that floats outside of the region do not interact
with the line boxes of the content flowed in regions. This is the effect of the fact
that regions are block formatting contexts.">
<link rel="match" href="reference/floats-in-named-flow-027-ref.html">
<style>
article {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
width: 240px;
background: red;
}
.flow {
flow-into: f;
color: blue;
margin-left: 120px;
border: 10px solid lightblue;
}
.float {
float: left;
color: green;
border: 10px solid lightgreen;
}
.region {
width: 240px;
flow-from: f;
}
.region > p {
background: red;
}
</style>
</head>
<body>
<p>
Test passes if you see two squares flush side by side.<br>
The left square should be green with a light green border and the right one should be
blue with a light blue border.<br>
You should see no red.
</p>
<article>
<div class="float">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
<div class="region">
<p> </p>
</div>
<div class="flow">
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx<br>
xxxxx
</div>
</article>
</body>
</html>
|
