blob: 0985bd58cf5f5c1810e1612f3ed350077f85d87f [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
.shouldStack {
position: absolute;
width: 150px;
height: 50px;
background-color: red;
}
.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 {
will-change: opacity;
top: 0px;
left: 0px;
}
#willChangeTransform {
will-change: -webkit-transform;
top: 0px;
left: 200px;
}
#willChangeTransformStyle {
will-change: -webkit-transform-style;
top: 0px;
left: 400px;
}
#willChangePerspective {
will-change: -webkit-perspective;
top: 100px;
left: 0px;
}
#willChangeMask {
will-change: -webkit-mask;
top: 100px;
left: 200px;
}
#willChangeMaskBoxImage {
will-change: -webkit-mask-box-image;
top: 100px;
left: 400px;
}
#willChangeClipPath {
will-change: -webkit-clip-path;
top: 200px;
left: 0px;
}
#willChangeBoxReflect {
will-change: -webkit-box-reflect;
top: 200px;
left: 200px;
}
#willChangeFilter {
will-change: -webkit-filter;
top: 200px;
left: 400px;
}
#willChangeZIndex {
will-change: z-index;
top: 300px;
left: 0px;
}
#willChangeMixBlendMode {
will-change: mix-blend-mode;
top: 300px;
left: 200px;
}
#willChangeIsolation {
will-change: isolation;
top: 300px;
left: 400px;
}
#willChangePosition {
will-change: position;
top: 400px;
left: 0px;
}
#willChangeCombination {
will-change: top, opacity, left;
top: 400px;
left: 200px;
}
#willChangeTop {
will-change: top;
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">-webkit-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>