remove-clipping-layer-with-no-children.html

<!DOCTYPE html>
<style>
#parent {
  overflow:hidden;
  width: 400px;
  height: 400px;
  background-color: pink;
  will-change: transform
}

#child {
  opacity: 0.9;
  width: 200px;
  height: 200px;
  background-color: salmon;
  transition: opacity 5ms;
}

.fade #child {
  visibility: hidden;
  opacity: 0.2;
}
</style>
<div id="parent">
    <div id="child"></div>
</div>
<pre></pre>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

requestAnimationFrame(function() {
  requestAnimationFrame(function() {
    document.getElementById('parent').classList.add('fade');
    document.getElementById('child').addEventListener('transitionend', function() {
      if (window.testRunner) {
        document.getElementsByTagName('pre')[0].textContent = internals.layerTreeAsText(document);
        setTimeout(function() {
          testRunner.notifyDone();
        });
      }
    });
  });
});
</script>

chromium/third_party/blink/web_tests/compositing/layer-creation/remove-clipping-layer-with-no-children.html