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
|
<!DOCTYPE html>
<html>
<head>
<title>CSS Regions: separate floats with percent size in sized 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="">
<meta name="assert" content="Test checks that floats inside a named flow are sized relative
to the region container, regardless of their initial block formatting context.">
<link rel="match" href="reference/floats-in-named-flow-005-ref.html">
<style>
.flow {
flow-into: f;
color: gray;
}
.dummy-bfc {
/* This creates a new block formatting context */
overflow: hidden;
}
.floater {
width: 20%;
height: 50px;
background-color: lightblue;
}
.left {
float: left;
}
.right {
float: right;
}
.region {
flow-from: f;
width: 250px;
margin: 5px;
border: 2px solid black;
}
.region > p {
background: red;
}
</style>
</head>
<body>
<div class="dummy-bfc">
<div class="flow floater left"></div>
</div>
<p>
Test passes if you see some filler gray text and three blue squares inside a black-bordered
rectangle. One blue square should be in the top left corner, another in the top right
corner and the third one should be somewhere along the left border, below the top-left
one.<br>
Test fails is you see any red.
</p>
<div class="flow">
<div class="floater right"></div>
This is filler text. This is filler text. This is filler text. This is filler text. This
is filler text. This is filler text. This is filler text. This is filler text. This is
filler text. This is filler text. This is filler text. This is filler text. This is
filler text. This is filler text. This is filler text. This is filler text. This is
<div class="floater left"></div>
filler text. This is filler text. This is filler text. This is filler text. This is
filler text. This is filler text. This is filler text. This is filler text.
</div>
<div class="region">
<p> </p>
</div>
</body>
</html>
|
