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
|
<!DOCTYPE html>
<html>
<head>
<title>CSS Regions: floats in a named flow with forced breaks and 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 flow contents are floated relative
to the region container they are laid out in (and not their initial container), even
when multiple regions are involved and content has forced region breaks.">
<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;
}
.break {
break-after: region;
}
.floater {
width: 60px;
height: 60px;
background-color: lightblue;
}
.left {
float: left;
}
.right {
float: right;
}
.region {
flow-from: f;
max-width: 200px;
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>
<div class="flow break">
xxxxxxx
xxxxxxx
xxxxxxx
xxxxxxxxxx
xxxxxxxxxx
</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>
|
