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
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!DOCTYPE html>
<html>
<head>
<title>CSS Regions: named flow has floats and multiple block formatting contexts and is
flowed in multiple regions</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 in named flows are positioned relative
to their regions and not their initial container, even when multiple regions
are involved and the named flow contents come from different block formatting contexts.">
<link rel="match" href="reference/floats-in-named-flow-006-ref.html">
<style>
.flow {
flow-into: f;
color: gray;
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.dummy-bfc {
/* Create a new block formatting context */
overflow: hidden;
}
.floater {
width: 60px;
height: 60px;
background-color: lightblue;
}
.left {
float: left;
}
.right {
float: right;
}
.region {
flow-from: f;
width: 200px;
height: 100px;
margin: 5px;
}
.region > p {
background: red;
}
</style>
</head>
<body>
<p>
Test passes if you see two gray rectangles, each with a blue square inside it. The first
rectangle should have a blue square in the top right corner, while the second rectangle
should have a blue square in the top left corner.<br>
Test fails is you see any red.
</p>
<div class="flow floater right"></div>
<!-- The div below has overflow: hidden to trigger creation of a new block formatting context.
This tests the fact that contents inside separate block formating contexts behave as if they
are in a single block formatting context when flowed in a region. -->
<div class="dummy-bfc">
<div class="flow">
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxxxxx
xxxxxxxxxx
</div>
</div>
<div class="flow floater left"></div>
<div class="flow">
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxxxxx
xxxxxxxxxx
</div>
<div class="region">
<p> </p>
</div>
<div class="region">
<p> </p>
</div>
</body>
</html>
|
