flexbox-items-as-stacking-contexts-003.html (2481B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <!-- This testcase checks that flex items are painted as pseudo-stacking 7 contexts, instead of full stacking contexts. In other words, content 8 inside of one flex item should be able to iterleave between pieces of 9 content in another flex item, if we set appropriately interleaving 10 "z-index" values. --> 11 <!-- This was resolved by the CSSWG in April 2013: 12 http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 --> 13 <html> 14 <head> 15 <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> 16 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 17 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting"> 18 <link rel="match" href="flexbox-items-as-stacking-contexts-003-ref.html"> 19 <style> 20 .flexContainer { 21 background: orange; 22 display: flex; 23 justify-content: space-between; 24 width: 70px; 25 height: 20px; 26 padding: 2px; 27 margin-bottom: 2px; 28 } 29 .item1 { 30 background: lightblue; 31 width: 30px; 32 min-width: 0; /* disable default min-width:auto behavior */ 33 padding: 2px; 34 } 35 .item2 { 36 background: yellow; 37 width: 30px; 38 padding: 2px; 39 } 40 .grandchildA { 41 background: purple; 42 width: 80px; 43 height: 6px; 44 position: relative; 45 z-index: 10; 46 } 47 .grandchildB { 48 background: teal; 49 width: 80px; 50 height: 6px; 51 position: relative; 52 z-index: 20; 53 } 54 .grandchildC { 55 background: lime; 56 width: 20px; 57 height: 16px; 58 position: relative; 59 /* This z-index should interleave this content 60 between grandchildA and grandchildB: */ 61 z-index: 15; 62 } 63 </style> 64 </head> 65 <body> 66 <!-- This flex container's first flex item has content that overflows 67 and overlap the second flex item. The z-index values are set such 68 that this content should interleave; grandchildC should 69 paint on top of grandchildA, but underneath grandchildB. --> 70 <div class="flexContainer" 71 ><div class="item1" 72 ><div class="grandchildA"></div 73 ><div class="grandchildB"></div 74 ></div 75 ><div class="item2" 76 ><div class="grandchildC"></div 77 ></div 78 ></div> 79 </body> 80 </html>