layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-3.html@44a2da4a2ab2
layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-3.html
Fri, 16 Jan 2015 04:50:19 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Fri, 16 Jan 2015 04:50:19 +0100
- branch
- TOR_BUG_9701
- changeset 13
- 44a2da4a2ab2
- permissions
- -rw-r--r--
Replace accessor implementation with direct member state manipulation, by
request https://trac.torproject.org/projects/tor/ticket/9701#comment:32
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>
