blob: 75688706c0dc40f81b6c3b01c3893b5189388692 [file] [log] [blame]
<!DOCTYPE html>
<!--
| Modifying a style that affects stacking contexts should cause the
| stacking contexts of potentially impacted boxes to be recalculated.
-->
<html>
<head>
<style>
.light-green, .dark-green, .blue-positive, .blue-negative {
position: absolute;
width: 100px;
height: 100px;
}
.light-green {
left: 0px;
top: 0px;
background-color: #B7E1CD;
z-index: 1;
}
.dark-green {
left: 30px;
top: 30px;
background-color: #0B8043;
z-index: -1;
}
.blue-positive {
left: 40px;
top: 40px;
background-color: #4285F4;
z-index: 3;
}
.blue-negative {
left: 40px;
top: 40px;
background-color: #4285F4;
z-index: -3;
}
.blue-container {
position: absolute;
left: 20px;
top: 20px;
width: 150px;
height: 150px;
background-color: #4285F4;
z-index: -10;
}
</style>
<script>
if (window.testRunner) {
window.testRunner.waitUntilDone();
}
window.onload = function() {
if (window.testRunner) {
window.testRunner.DoNonMeasuredLayout();
}
var node = document.getElementById('node');
node.className = "blue-negative";
if (window.testRunner) {
window.testRunner.notifyDone();
}
}
</script>
</head>
<body>
<div class="blue-container">
<div id="node" class="blue-positive"></div>
<div class="dark-green"></div>
</div>
<div class="light-green"></div>
</body>
</html>