Broken out from https://bugs.webkit.org/show_bug.cgi?id=50072 See the test case I added with broken rendering in r95239 where a composited layer clipped by an uncomposited ancestor does not respect the border radius clip.
<rdar://problem/10133719>
Chrome related bug http://crbug.com/157218 Simplified test case http://jsfiddle.net/laukstein/bhmka/5/
Created attachment 184134 [details] test case
<style> .outer { overflow: hidden; width: 100px; height: 100px; background-color: rgb(0,238,228); border: 3px solid #000; border-radius: 50%; } .inner { height: 100%; line-height: 5.8; text-align: center; background-color: rgba(255,0,0,.5); } .transform { -webkit-transform: translate3d(10px,10px,0); transform: translate3d(10px,10px,0); } </style> <html> <div class=outer> <div class="inner transform">with transformdfdfdsfdsf</div> </div> </html> While debugging this issue with the above html, <div class="inner transform"> is promoted to posZOrderList of <html> and gets a compositing layer. So, <html> also gets a compositing layer because of subtree reasons CompositingReasonClipsCompositingDescendants(as <div class="inner transform"> becomes child of <html> in paint-order). So, clippedByAncestor(RenderLayer* layer) for <div class="inner transform"> returns <html> element which is wrong. It should return <div class=outer> as clipping ancestor. As per my understanding, <div class="inner transform"> should be child of <div class=outer> in paint-order and <div class=outer> should also get a compositing layer and so that clipping works properly. Please correct me if my understanding is wrong.