layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-1.xhtml@7540298fafa1
layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-1.xhtml
Thu, 15 Jan 2015 21:13:52 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:13:52 +0100
- branch
- TOR_BUG_9701
- changeset 12
- 7540298fafa1
- permissions
- -rw-r--r--
Remove forgotten relic of ABI crash risk averse overloaded method change.
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
5 -->
6 <!-- Testcase with flex items containing overlapping content, with
7 "z-index" set on some of them, which should make them create
8 stacking contexts. -->
9 <html xmlns="http://www.w3.org/1999/xhtml">
10 <head>
11 <title>CSS Test: Testing that 'z-index' property makes flex items form stacking contexts</title>
12 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
13 <link rel="help" href="http://www.w3.org/TR/css3-flexbox/#painting"/>
14 <link rel="match" href="flexbox-items-as-stacking-contexts-1-ref.xhtml"/>
15 <style>
16 .flexbox {
17 width: 90px;
18 height: 10px;
19 border: 2px solid gray;
20 display: flex;
21 margin-bottom: 10px;
22 }
23 .a {
24 width: 10px;
25 height: 10px;
26 background: lightblue;
27 min-width: 0;
28 }
29 .b {
30 width: 10px;
31 height: 10px;
32 background: pink;
33 min-width: 0;
34 margin-right: 10px;
35 }
36 .aKid {
37 margin-left: 3px;
38 margin-top: 3px;
39 width: 10px;
40 height: 10px;
41 background: steelblue;
42 border: 1px solid blue;
43 }
44 .bKid {
45 margin-left: 3px;
46 margin-top: 6px;
47 width: 10px;
48 height: 10px;
49 background: violet;
50 border: 1px solid purple;
51 }
52 .z0 { z-index: 0; }
53 .z1 { z-index: 1; }
54 .zn1 { z-index: -1; }
56 </style>
57 </head>
58 <body>
59 <!-- No "z-index" -->
60 <div class="flexbox">
61 <div class="a"><div class="aKid"/></div>
62 <div class="b"><div class="bKid"/></div>
63 </div>
65 <!-- Various "z-index" just on the first item -->
66 <div class="flexbox">
67 <div class="a zn1"><div class="aKid"/></div>
68 <div class="b"><div class="bKid"/></div>
70 <div class="a z0"><div class="aKid"/></div>
71 <div class="b"><div class="bKid"/></div>
73 <div class="a z1"><div class="aKid"/></div>
74 <div class="b"><div class="bKid"/></div>
75 </div>
77 <!-- Various "z-index" just on the second item -->
78 <div class="flexbox">
79 <div class="a"><div class="aKid"/></div>
80 <div class="b zn1"><div class="bKid"/></div>
82 <div class="a"><div class="aKid"/></div>
83 <div class="b z0"><div class="bKid"/></div>
85 <div class="a"><div class="aKid"/></div>
86 <div class="b z1"><div class="bKid"/></div>
87 </div>
89 <!-- Various "z-index" on the first item, w/ "z-index:0" on second item -->
90 <div class="flexbox">
91 <div class="a zn1"><div class="aKid"/></div>
92 <div class="b z0"><div class="bKid"/></div>
94 <div class="a z0"><div class="aKid"/></div>
95 <div class="b z0"><div class="bKid"/></div>
97 <div class="a z1"><div class="aKid"/></div>
98 <div class="b z0"><div class="bKid"/></div>
99 </div>
101 <!-- Various "z-index" on the second item, w/ "z-index:0" on first item -->
102 <div class="flexbox">
103 <div class="a z0"><div class="aKid"/></div>
104 <div class="b zn1"><div class="bKid"/></div>
106 <div class="a z0"><div class="aKid"/></div>
107 <div class="b z0"><div class="bKid"/></div>
109 <div class="a z0"><div class="aKid"/></div>
110 <div class="b z1"><div class="bKid"/></div>
111 </div>
113 </body>
114 </html>
