composited-descendant-grandparent-border-radius-mask.html

<!DOCTYPE html>
<style>
  #grandparent {
    width: 200px; height: 200px; overflow: hidden; border-radius: 25px;
    background-color: yellow;
  }
  #parent { position: relative; left: 30px; top: 30px; width: 200px;
           height: 200px; overflow: hidden; background-color: blue;
  }
  #child { position: relative; left: 10px; top: 10px; width: 120px;
           height: 120px; will-change: transform; background-color: gray;
  }
  #grandchild { position: relative; left: 10px; top: 10px; width: 200px;
           height: 200px; will-change: transform; background-color: green;
  }
</style>
<div id='grandparent'>
  <div id='parent'>
    <div id='child'>
      <div id='grandchild'></div>
    </div>
  </div>
</div>

chromium/third_party/blink/web_tests/compositing/composited-descendant-grandparent-border-radius-mask.html