rotate-then-clip-effect-interleave.html

<!DOCTYPE html>
<div style="margin: 100px; width: 240px; height: 240px; transform: rotate(45deg)">
  <div style="opacity: 0.9">
    <div style="overflow: hidden; width: 200px; height: 200px; border: 20px solid green">
      <div style="will-change: transform; width: 400px; height: 400px; background: blue"></div>
      <div style="position: fixed; top: 0; width: 400px; height: 100px; background: cyan"></div>
      <div style="will-change: transform; z-index: 1; position: relative; top: -400px; width: 100px; height: 400px; background: magenta"></div>
    </div>
  </div>
</div>
<script>
if (window.testRunner)
  testRunner.setCustomTextOutput(internals.layerTreeAsText(document));
</script>

chromium/third_party/blink/web_tests/compositing/overflow/rotate-then-clip-effect-interleave.html