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: nested regions in flexbox</title>
<link rel="author" title="Catalin Badea" href="mailto:badea@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
<link rel="help" href="http://www.w3.org/TR/css3-regions/#rfcb-flow-fragment-height-resolution">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction">
<meta name="flags" content="ahem">
<meta name="assert" content="Test checks that nested regions placed in flex containers
are laid out properly. The first flow (blue content) is nested inside the second flow (green content). The user
should see three horizontal stripes with the following colors: green, blue, green.">
<link rel="match" href="reference/autoheight-regions-in-autoheight-flexbox-004-ref.html">
<style>
.c1, .c2 {
font-family: Ahem;
font-size: 20px;
line-height: 1em;
}
.c1 {
color: blue;
flow-into: f1;
margin-top: 20px;
margin-bottom: 20px;
}
.c2 {
color: green;
flow-into: f2;
}
.flex {
display: flex;
flex-direction: column;
}
.r1 {
flow-from: f1;
}
.r2 {
flow-from: f2;
}
.red {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Test passes if you see a column of three horizontal stripes with colors in the following order:
green, blue, green.</li>
<li>You shouldn't see any red.</li>
</ul>
<div class="c1">
XXX
</div>
<div class="c2">
<div class="flex">
XXX
<div class="r1"></div>
</div>
XXX
</div>
<div class="flex">
<div class="r2"><p class="red"> </p></div>
</div>
</body>
</html>
|
