chromium/src/third_party/blink/web_tests/compositing/animation/animations-establish-stacking-context-expected.html

<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;
}

#animatedOpacity {
  top: 0px;
}

#animatedTransform {
  top: 100px;
}

#animatedFilter {
  top: 200px;
}

#animatedBackdrop {
  top: 300px;
}

#animatedLeft {
  top: 400px;
}
</style>

<div id="animatedOpacity" class="shouldStack">
  <div class="child">animated opacity</div>
</div>
<div id="animatedTransform" class="shouldStack">
  <div class="child">animated transform</div>
</div>
<div id="animatedFilter" class="shouldStack">
  <div class="child">animated filter</div>
</div>
<div id="animatedBackdrop" class="shouldStack">
  <div class="child">animated backdrop-filter</div>
</div>
<div id="animatedLeft" class="shouldNotStack">
  <div class="child">animated left</div>
</div>