stacking-context-creation.html | Explore in Territory

<!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: 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">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>
chromium/third_party/blink/web_tests/compositing/will-change/stacking-context-creation.html
