The Tor Browser / file comparison
comparison: layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-3.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-3.html
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:2cf88869a238 |
|---|---|
| 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/css3-flexbox/#painting"> | |
| 18 <link rel="match" href="flexbox-items-as-stacking-contexts-3-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 padding: 2px; | |
| 33 } | |
| 34 .item2 { | |
| 35 background: yellow; | |
| 36 width: 30px; | |
| 37 padding: 2px; | |
| 38 } | |
| 39 .grandchildA { | |
| 40 background: purple; | |
| 41 width: 80px; | |
| 42 height: 6px; | |
| 43 position: relative; | |
| 44 z-index: 10; | |
| 45 } | |
| 46 .grandchildB { | |
| 47 background: teal; | |
| 48 width: 80px; | |
| 49 height: 6px; | |
| 50 position: relative; | |
| 51 z-index: 20; | |
| 52 } | |
| 53 .grandchildC { | |
| 54 background: lime; | |
| 55 width: 20px; | |
| 56 height: 16px; | |
| 57 position: relative; | |
| 58 /* This z-index should interleave this content | |
| 59 between grandchildA and grandchildB: */ | |
| 60 z-index: 15; | |
| 61 } | |
| 62 </style> | |
| 63 </head> | |
| 64 <body> | |
| 65 <!-- This flex container's first flex item has content that overflows | |
| 66 and overlap the second flex item. The z-index values are set such | |
| 67 that this content should interleave; grandchildC should | |
| 68 paint on top of grandchildA, but underneath grandchildB. --> | |
| 69 <div class="flexContainer" | |
| 70 ><div class="item1" | |
| 71 ><div class="grandchildA"></div | |
| 72 ><div class="grandchildB"></div | |
| 73 ></div | |
| 74 ><div class="item2" | |
| 75 ><div class="grandchildC"></div | |
| 76 ></div | |
| 77 ></div> | |
| 78 </body> | |
| 79 </html> |
