Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-color/t32-opacity-zorder-c.xht - WPT Dashboard Interop Dashboard
<head>
<title>CSS Test: opacity</title>
<link rel="match" href="t32-opacity-zorder-c-ref.html" />
<meta name="assert" content="Opacity has z-ordering treatment of positioned elements and z-index applies." />
<style type="text/css"><![CDATA[
table { border-spacing: 2px; }
td { border: 1px solid; }
td, div { width: 10px; height: 10px; }
div.up { margin-top: -10px; }
div.pos { position: relative; }
div.opc { opacity: 0.99; }
div.red { background: red; }
div.green { background: green; }
.z0 { z-index: 0; }
.z1 { z-index: 1; }
.zm1 { z-index: -1; }
]]></style>
</head>
<body>
<p>Each of the following boxes should have a green or
very-nearly-green square inside of it:</p>
<table><tr>
<!-- baseline -->
<td>
<div class="red"></div>
<div class="up green"></div>
</td>
<!-- z-index auto or 0 is in positioned elements layer -->
<td>
<div class="pos red"></div>
<div class="up opc green"></div>
<div class="up red"></div>
</td>
<td>
<div class="opc red"></div>
<div class="up pos green"></div>
<div class="up red"></div>
</td>
<td>
<div class="pos red"></div>
<div class="up opc green z0"></div>
<div class="up red"></div>
</td>
<td>
<div class="opc red"></div>
<div class="up pos green z0"></div>
<div class="up red"></div>
</td>
<td>
<div class="pos red z0"></div>
<div class="up opc green"></div>
<div class="up red"></div>
</td>
<td>
<div class="opc red z0"></div>
<div class="up pos green"></div>
<div class="up red"></div>
</td>
<!-- baseline: make sure z-index: auto works -->
<td>
<div class="pos">
<div class="pos green z1"></div>
<div class="up pos red zm1"></div>
</div>
<div class="up pos red z0"></div>
<div class="up pos red"></div>
<div class="up red"></div>
</td>
<!-- baseline: make sure z-index: 0 works -->
<td>
<div class="pos z0">
<div class="pos red z1"></div>
<div class="up pos red zm1"></div>
</div>
<div class="up pos green"></div>
<div class="up red"></div>
</td>
<!-- make sure opacity acts like z-index: 0, not auto -->
<td>
<div class="opc">
<div class="pos red z1"></div>
<div class="up pos red zm1"></div>
</div>
<div class="up pos green"></div>
<div class="up red"></div>
</td>
<!-- make sure z-index does not apply to elements with opacity if they aren't positioned -->
<td>
<div class="opc z1 red"></div>
<div class="up opc red"></div>
<div class="up opc z0 red"></div>
<div class="up opc zm1 green"></div>
</td>
<!-- ... but that it does if they are positioned -->
<td>
<div class="pos opc z1 green"></div>
<div class="up pos opc red"></div>
<div class="up pos opc z0 red"></div>
<div class="up pos opc zm1 red"></div>
</td>
</tr></table>
</body>
</html>