Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-flexbox/flexbox-paint-ordering-003.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
-->
<html>
<head>
<title>CSS Test: Testing that paint order isn't influenced
by "order" for absolutely positioned flex children</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="match" href="flexbox-paint-ordering-003-ref.html">
<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>
</html>