layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-1-ref.xhtml@7540298fafa1
layout/reftests/w3c-css/submitted/flexbox/flexbox-items-as-stacking-contexts-1-ref.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 <!-- Reference case, with floated elements in place of flex items, and using
7 "position: relative" on those elements, to make z-index work on them
8 outside of a flex container. -->
9 <html xmlns="http://www.w3.org/1999/xhtml">
10 <head>
11 <title>CSS Reftest Reference</title>
12 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
13 <style>
14 .flexbox {
15 width: 90px;
16 height: 10px;
17 border: 2px solid gray;
18 margin-bottom: 10px;
19 }
20 .a {
21 width: 10px;
22 height: 10px;
23 background: lightblue;
24 min-width: 0;
25 float: left;
26 }
27 .b {
28 width: 10px;
29 height: 10px;
30 background: pink;
31 min-width: 0;
32 margin-right: 10px;
33 float: left;
34 }
35 .aKid {
36 margin-left: 3px;
37 margin-top: 3px;
38 width: 10px;
39 height: 10px;
40 background: steelblue;
41 border: 1px solid blue;
42 }
43 .bKid {
44 margin-left: 3px;
45 margin-top: 6px;
46 width: 10px;
47 height: 10px;
48 background: violet;
49 border: 1px solid purple;
50 }
52 .z0, .z1, .zn1 { position: relative; }
53 .z0 { z-index: 0; }
54 .z1 { z-index: 1; }
55 .zn1 { z-index: -1; }
57 </style>
58 </head>
59 <body>
60 <!-- No "z-index" -->
61 <div class="flexbox">
62 <div class="a"><div class="aKid"/></div>
63 <div class="b"><div class="bKid"/></div>
64 </div>
66 <!-- Various "z-index" just on the first item -->
67 <div class="flexbox">
68 <div class="a zn1"><div class="aKid"/></div>
69 <div class="b"><div class="bKid"/></div>
71 <div class="a z0"><div class="aKid"/></div>
72 <div class="b"><div class="bKid"/></div>
74 <div class="a z1"><div class="aKid"/></div>
75 <div class="b"><div class="bKid"/></div>
76 </div>
78 <!-- Various "z-index" just on the second item -->
79 <div class="flexbox">
80 <div class="a"><div class="aKid"/></div>
81 <div class="b zn1"><div class="bKid"/></div>
83 <div class="a"><div class="aKid"/></div>
84 <div class="b z0"><div class="bKid"/></div>
86 <div class="a"><div class="aKid"/></div>
87 <div class="b z1"><div class="bKid"/></div>
88 </div>
90 <!-- Various "z-index" on the first item, w/ "z-index:0" on second item -->
91 <div class="flexbox">
92 <div class="a zn1"><div class="aKid"/></div>
93 <div class="b z0"><div class="bKid"/></div>
95 <div class="a z0"><div class="aKid"/></div>
96 <div class="b z0"><div class="bKid"/></div>
98 <div class="a z1"><div class="aKid"/></div>
99 <div class="b z0"><div class="bKid"/></div>
100 </div>
102 <!-- Various "z-index" on the second item, w/ "z-index:0" on first item -->
103 <div class="flexbox">
104 <div class="a z0"><div class="aKid"/></div>
105 <div class="b zn1"><div class="bKid"/></div>
107 <div class="a z0"><div class="aKid"/></div>
108 <div class="b z0"><div class="bKid"/></div>
110 <div class="a z0"><div class="aKid"/></div>
111 <div class="b z1"><div class="bKid"/></div>
112 </div>
114 </body>
115 </html>
