chromium/third_party/blink/web_tests/http/tests/devtools/layers/resources/compositing-reasons.html

<style>
@-webkit-keyframes rotate {
    0%  { transform: rotate(0deg); }
    50%  { transform: rotate(180deg); }
    100%  { transform: rotate(360deg); }
}

@keyframes scale-individual {
    0%  { scale: 1; }
    50%  { scale: 2; }
    100%  { scale: 4; }
}
@keyframes rotate-individual {
    0%  { rotate: 0deg; }
    50%  { rotate: 180deg; }
    100%  { rotate: 360deg; }
}
@keyframes translate-individual {
    0%  { translate: 0px 0; }
    50%  { translate: 100px 0; }
    100%  { translate: 150px 50px; }
}
div {
    /* to avoid empty layers */
    min-width: 100px;
    min-height: 20px;
    background: blue;
}
.clip {
    /* limits transform animation expansion to avoid unnecessary overlaps. */
    width: 100px;
    height: 100px;
    overflow: hidden;
}
</style>
<script type="application/x-javascript">
  if (window.internals)
    document.addEventListener('animationstart', () => internals.pauseAnimations(0));
</script>
<div id="transform3d" style="transform: translateZ(100px);"></div>
<div id="scale3d" style="scale: 1 1 2;">3d scale</div>
<div id="rotate3d" style="rotate: 0 1 0 45deg;">3d rotate</div>
<div id="translate3d" style="translate: 0px 0px 100px;">3d translate</div>
<div id="backface-visibility" style="backface-visibility: hidden">backface hidden</div>
<div class="clip">
    <div id="animation" style="width: 50px; height: 50px; animation: rotate infinite 5s">animated</div>
</div>
<div class="clip">
    <div id="animation-scale" style="width: 50px; height: 50px; animation: scale-individual infinite 5s">animated individual</div>
</div>
<div class="clip">
    <div id="animation-rotate" style="width: 50px; height: 50px; animation: rotate-individual infinite 5s">animated individual</div>
</div>
<div class="clip">
    <div id="animation-translate" style="width: 50px; height: 50px; animation: translate-individual infinite 5s">animated individual</div>
</div>
<div id="transformWithCompositedDescendants" style="transform: rotate(10deg)">
    <div style="transform: scale3d(2, 3, 4);">
    </div>
</div>
<div id="transformWithCompositedDescendants-individual" style="rotate: 10deg">
    <div style="scale: 2 3 4;">
    </div>
</div>
<div id="opacityWithCompositedDescendants" style="opacity: 0.5">
    <div style="transform: translateZ(100px);">opacity
    </div>
</div>
<div id="reflectionWithCompositedDescendants" style="-webkit-box-reflect: below">
    <div style="transform: translateZ(100px);">reflected
    </div>
</div>
<div id="perspective" style="-webkit-perspective: 500;">
    <div style="transform: translateZ(100px);">perspective</div>
</div>
<div id="preserve3d" style="-webkit-transform-style: preserve-3d;">
    <div style="transform: translateZ(100px);">preserve3d
    </div>
</div>
<div id="scrollOpaque" style="width: 100px; height: 100px; overflow: scroll; background: blue">
    <div style="width: 1000px; height: 1000px"></div>
</div>
<div id="scrollForced" style="width: 100px; height: 100px; overflow: scroll; will-change: scroll-position">
    <div style="width: 1000px; height: 1000px"></div>
</div>