<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- This testcase checks that flex items are painted as pseudo-stacking
contexts, instead of full stacking contexts. In other words, content
inside of one flex item should be able to iterleave between pieces of
content in another flex item, if we set appropriately interleaving
"z-index" values. -->
<!-- This was resolved by the CSSWG in April 2013:
http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 -->
<html>
<head>
<title>CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks), instead of full stacking contexts: 'z-index' should let descendants interleave</title>
<link rel="author" title="Daniel Holbert" href="mailto:[email protected]">
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting">
<link rel="match" href="flexbox-items-as-stacking-contexts-003-ref.html">
<style>
.flexContainer {
background: orange;
display: flex;
justify-content: space-between;
width: 70px;
height: 20px;
padding: 2px;
margin-bottom: 2px;
}
.item1 {
background: lightblue;
width: 30px;
min-width: 0; /* disable default min-width:auto behavior */
padding: 2px;
}
.item2 {
background: yellow;
width: 30px;
padding: 2px;
}
.grandchildA {
background: purple;
width: 80px;
height: 6px;
position: relative;
z-index: 10;
}
.grandchildB {
background: teal;
width: 80px;
height: 6px;
position: relative;
z-index: 20;
}
.grandchildC {
background: lime;
width: 20px;
height: 16px;
position: relative;
/* This z-index should interleave this content
between grandchildA and grandchildB: */
z-index: 15;
}
</style>
</head>
<body>
<!-- This flex container's first flex item has content that overflows
and overlap the second flex item. The z-index values are set such
that this content should interleave; grandchildC should
paint on top of grandchildA, but underneath grandchildB. -->
<div class="flexContainer"
><div class="item1"
><div class="grandchildA"></div
><div class="grandchildB"></div
></div
><div class="item2"
><div class="grandchildC"></div
></div
></div>
</body>
</html>
Codebase Browser
chromium