Bug 68196 - border-radius clipping of composited layers doesn't work
Summary: border-radius clipping of composited layers doesn't work
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Simon Fraser (smfr)
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2011-09-15 15:54 PDT by Dave Hyatt
Modified: 2014-09-08 07:12 PDT (History)
6 users (show)

See Also:


Attachments
test case (38 bytes, text/plain)
2013-01-22 21:37 PST, Binyamin
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Dave Hyatt 2011-09-15 15:54:09 PDT
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.
Comment 1 Simon Fraser (smfr) 2011-09-15 15:57:37 PDT
<rdar://problem/10133719>
Comment 2 Binyamin 2013-01-22 21:36:56 PST
Chrome related bug http://crbug.com/157218
Simplified test case http://jsfiddle.net/laukstein/bhmka/5/
Comment 3 Binyamin 2013-01-22 21:37:49 PST
Created attachment 184134 [details]
test case
Comment 4 Sanjoy Pal 2013-06-18 04:04:43 PDT
<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.