1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: opacity</title>
5 <link rel="author" title="L. David Baron" href="https://dbaron.org/">
6 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
7 <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency">
8 <meta name="flags" content="">
9 <meta name="assert" content="Opacity has z-ordering treatment of positioned elements and z-index applies.">
10 <style type="text/css">
11 table { border-spacing: 2px; }
12 td { border: 1px solid; }
13 td, div { width: 10px; height: 10px; }
14 div.up { margin-top: -10px; }
15 div.pos { position: relative; }
16 div.opc { opacity: 0.99; }
17 div.red { background: red; }
18 div.green { background: green; }
19 .z0 { z-index: 0; }
20 .z1 { z-index: 1; }
21 .zm1 { z-index: -1; }
22 </style>
23 </head>
24 <body>
25 <p>Each of the following boxes should have a green or
26 very-nearly-green square inside of it:</p>
27 <table><tr>
28 <!-- baseline -->
29 <td>
30 <div class="red"></div>
31 <div class="up green"></div>
32 </td>
33 <!-- z-index auto or 0 is in positioned elements layer -->
34 <td>
35 <div class="pos red"></div>
36 <div class="up opc green"></div>
37 <div class="up red"></div>
38 </td>
39 <td>
40 <div class="opc red"></div>
41 <div class="up pos green"></div>
42 <div class="up red"></div>
43 </td>
44 <td>
45 <div class="pos red"></div>
46 <div class="up opc green z0"></div>
47 <div class="up red"></div>
48 </td>
49 <td>
50 <div class="opc red"></div>
51 <div class="up pos green z0"></div>
52 <div class="up red"></div>
53 </td>
54 <td>
55 <div class="pos red z0"></div>
56 <div class="up opc green"></div>
57 <div class="up red"></div>
58 </td>
59 <td>
60 <div class="opc red z0"></div>
61 <div class="up pos green"></div>
62 <div class="up red"></div>
63 </td>
64 <!-- baseline: make sure z-index: auto works -->
65 <td>
66 <div class="pos">
67 <div class="pos green z1"></div>
68 <div class="up pos red zm1"></div>
69 </div>
70 <div class="up pos red z0"></div>
71 <div class="up pos red"></div>
72 <div class="up red"></div>
73 </td>
74 <!-- baseline: make sure z-index: 0 works -->
75 <td>
76 <div class="pos z0">
77 <div class="pos red z1"></div>
78 <div class="up pos red zm1"></div>
79 </div>
80 <div class="up pos green"></div>
81 <div class="up red"></div>
82 </td>
83 <!-- make sure opacity acts like z-index: 0, not auto -->
84 <td>
85 <div class="opc">
86 <div class="pos red z1"></div>
87 <div class="up pos red zm1"></div>
88 </div>
89 <div class="up pos green"></div>
90 <div class="up red"></div>
91 </td>
92 <!-- make sure z-index does not apply to elements with opacity if they aren't positioned -->
93 <td>
94 <div class="opc z1 red"></div>
95 <div class="up opc red"></div>
96 <div class="up opc z0 red"></div>
97 <div class="up opc zm1 green"></div>
98 </td>
99 <!-- ... but that it does if they are positioned -->
100 <td>
101 <div class="pos opc z1 green"></div>
102 <div class="up pos opc red"></div>
103 <div class="up pos opc z0 red"></div>
104 <div class="up pos opc zm1 red"></div>
105 </td>
106 </tr></table>
107 </body>
108 </html>