blob: 5fabe2f756a520fc99c94fe2f67be7277084f622 [file] [log] [blame]
<!DOCTYPE html>
<!--
| Test stacking context and containing blocks, verifying that their relative
| positions can still be found when neither is in a subtree of the other.
-->
<html>
<head>
<style>
body {
font-family: Roboto;
margin: 0px;
}
div {
padding: 10px;
}
.always_containing_block {
opacity: 0.999;
transform: rotate(0deg);
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.fixed {
position: fixed;
}
.blue1 {
background-color: #BBDEFB;
}
.blue2 {
background-color: #2196F3;
}
.blue3 {
background-color: #1976D2;
}
.blue4 {
background-color: #0D47A1;
}
</style>
</head>
<body style="background-color:#000000;">
<div class="always_containing_block absolute">
<div class="blue1 absolute" style="transform: rotate(0deg); width:75px; height:75px;">
<div class="blue2 absolute" style="z-index: -1; top:25px; left:25px">
<div class="blue3 fixed" style="top:50px; left:50px;">
<div class="blue4 absolute" style="z-index: 1; top:5px; left:5px">
</div>
</div>
</div>
</div>
</div>
<div class="always_containing_block absolute" style="left:100px;">
<div class="blue1 relative" style="z-index:1; width:75px; height:75px;">
<div class="blue2 fixed" style="top:50px; left:50px;">
<div class="blue3 relative" style="z-index:1; top:5px; left:5px">
</div>
</div>
</div>
</div>
<div class="always_containing_block absolute" style="left:200px;">
<div class="blue1" style="opacity: 0.5; width:75px; height:75px;">
<div class="blue2 absolute" style="top:25px; left:25px">
<div class="blue3 absolute" style="z-index: 1; top:25px; left:25px">
</div>
</div>
</div>
</div>
</body>
</html>