<!DOCTYPE html>
<html>
<head>
<style>
.shouldStack {
position: absolute;
width: 150px;
height: 50px;
background-color: red;
z-index: 0;
}
.shouldNotStack {
position: absolute;
width: 150px;
height: 50px;
background-color: green;
}
.child {
position: relative;
top: 0px;
left: 0px;
width: 150px;
height: 50px;
background-color: green;
z-index: -1;
}
.shouldNotStack .child {
background-color: red;
}
#willChangeOpacity {
top: 0px;
left: 0px;
}
#willChangeTransform {
top: 0px;
left: 200px;
}
#willChangeTransformStyle {
top: 0px;
left: 400px;
}
#willChangePerspective {
top: 100px;
left: 0px;
}
#willChangeMask {
top: 100px;
left: 200px;
}
#willChangeMaskBoxImage {
top: 100px;
left: 400px;
}
#willChangeClipPath {
top: 200px;
left: 0px;
}
#willChangeBoxReflect {
top: 200px;
left: 200px;
}
#willChangeFilter {
top: 200px;
left: 400px;
}
#willChangeZIndex {
top: 300px;
left: 0px;
}
#willChangeMixBlendMode {
top: 300px;
left: 200px;
}
#willChangeIsolation {
top: 300px;
left: 400px;
}
#willChangePosition {
top: 400px;
left: 0px;
}
#willChangeCombination {
top: 400px;
left: 200px;
}
#willChangeTop {
top: 400px;
left: 400px;
}
</style>
</head>
<body>
<div id="willChangeOpacity" class="shouldStack">
<div class="child">opacity</div>
</div>
<div id="willChangeTransform" class="shouldStack">
<div class="child">-webkit-transform</div>
</div>
<div id="willChangeTransformStyle" class="shouldStack">
<div class="child">-webkit-transform-style</div>
</div>
<div id="willChangePerspective" class="shouldStack">
<div class="child">-webkit-perspective</div>
</div>
<div id="willChangeMask" class="shouldStack">
<div class="child">-webkit-mask</div>
</div>
<div id="willChangeMaskBoxImage" class="shouldStack">
<div class="child">-webkit-mask-box-image</div>
</div>
<div id="willChangeClipPath" class="shouldStack">
<div class="child">-webkit-clip-path</div>
</div>
<div id="willChangeBoxReflect" class="shouldStack">
<div class="child">-webkit-box-reflect</div>
</div>
<div id="willChangeFilter" class="shouldStack">
<div class="child">filter</div>
</div>
<div id="willChangeZIndex" class="shouldStack">
<div class="child">z-index</div>
</div>
<div id="willChangeMixBlendMode" class="shouldStack">
<div class="child">mix-blend-mode</div>
</div>
<div id="willChangeIsolation" class="shouldStack">
<div class="child">isolation</div>
</div>
<div id="willChangePosition" class="shouldStack">
<div class="child">position</div>
</div>
<div id="willChangeCombination" class="shouldStack">
<div class="child">combination</div>
</div>
<div id="willChangeTop" class="shouldNotStack">
<div class="child">top</div>
</div>
</body>
</html>