CSS transform break hidden overflow on border-radius

[renatahodovan]

If we are applying a CSS transform on an element inside a div with overflow:hidden and a border-radius, its children will not be masked anymore. The problem is only appear on NIX, WebKit trunk (tested on EFL build) works fine.

Test case:

<style>

.outer {
    border: 4px solid #000;
    width: 100px;
    height: 100px;
    border-radius: 40px;
    overflow: hidden;
}

.inner {
    width: 80px;
    height: 80px;
    background-color: #aaf;
    padding: .5em;
}

.rotate3d {
    -webkit-transform: rotateY(0deg);
}

</style>

<div class = "outer">
    <div class = "inner">no transform</div>
</div>

<br>

<div class = "outer">
    <div class = "inner rotate3d">rotateY(0)</div>
</div>

Bug reports related to this issue from bugzilla and chromium issue tracker:

• https://bugs.webkit.org/show_bug.cgi?id=68196
• https://code.google.com/p/chromium/issues/detail?id=157218&q=label%3AWebKit-ID-68196-NEW&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified