dont-squash-into-animated-layers.html

<!doctype HTML>
<style>
@keyframes twiddle {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}

.animated {
  animation: twiddle 3s alternate infinite linear;
  width: 100px;
  height: 100px;
  background: orange;
}
</style>
<div id="target" class="animated" style="position: absolute; width: 200px; height: 200px; background: lightblue"></div>
<div id="affected" style="position: absolute; width: 200px; height: 200px; top: 100px; left: 100px; background: lightgray"></div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
onload = function() {
    test(function() {
        if (window.internals) {
            var layer_tree = internals.layerTreeAsText(document);
            assert_true(layer_tree.includes("id='affected'"), 'should not be squashed into animated layer');
            assert_true(layer_tree.includes("id='target'"), 'animated layer');
        }
    });
};
</script>

chromium/third_party/blink/web_tests/compositing/squashing/dont-squash-into-animated-layers.html