blob: da1c3c31b819aa2fa6e43831a38edb5e30d13250 [file] [log] [blame]
<!DOCTYPE html>
<html>
<!--
| This test ensures that a non-positioned element with an opacity less than 1
| paints the layer it creates at the same stacking order that would be used if
| it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’, impacting
| all of its positioned ancestors. The results should not display "This line is
| invisible."
| https://www.w3.org/TR/css3-color/#transparency
-->
<head>
<style>
body {
font-family: Roboto;
font-size: 16px;
}
.positioned-container {
position: absolute;
width: 300px;
height: 50px;
background-color: #00CC00;
}
.opacity-test {
position: static;
opacity: 0;
width: 300px;
height: 50px;
background-color: #00CC00;
}
.positioned-red {
position: absolute;
width: 400px;
height: 20px;
background-color: #FF0000;
top: 60px;
}
</style>
</head>
<body>
<div class="positioned-container">
<div class="opacity-test">
<div class="positioned-red"> This line is invisible. </div>
</div>
</div>
</body>
</html>