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
|
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><html>
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/flexbox-paint-ordering-003.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
<head>
<title>CSS Test: Testing that paint order isn't influenced
by "order" for absolutely positioned flex children</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
<link href="https://www.w3.org/TR/css-flexbox-1/#abspos-items" rel="help">
<link href="http://www.w3.org/TR/css-flexbox-1/#painting" rel="help">
<link href="http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/reference/flexbox-paint-ordering-003-ref.htm" rel="match">
<style>
.container { display: flex; }
.absPosLowOrder {
position: absolute;
order: 5;
background: red;
height: 0;
width: 0;
}
.absPosHighOrder {
position: absolute;
order: 10;
height: 0;
width: 0;
}
.redBlock {
height: 100px;
width: 100px;
background: red;
}
.limeBlock {
height: 100px;
width: 100px;
background: lime;
}
</style>
</head>
<body>
<div class="container">
<!-- Note: The following elements will be superimposed. If they weren't
positioned, then they'd be flex items, and their relative "order"
values would force the first one (with the red child) to paint on top.
But since they're absolutely positioned, they're not flex items &
"order" has no effect, and so the lime one should end up on top. -->
<div class="absPosHighOrder"><div class="redBlock"></div></div>
<div class="absPosLowOrder"><div class="limeBlock"></div></div>
</div>
</body>
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/flexbox-paint-ordering-003.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
</html>
|
