Overflow clipping border radius |
||
Issue description
Check the attached example and expected output.
The example is:
<div style="background: green; border-radius: 50%; height: 50px; width: 100px; padding: 25px 0; overflow: hidden;">
<div style="background: green; width: 200px; height: 200px;"></div>
</div>
The reference is:
<div style="background: green; border-radius: 50%; height: 100px; width: 100px; overflow: hidden;">
</div>
Without the inner DIV there are no differences in rendering,
but with it there are.
I believe both should be equivalent.
,
Sep 10
In theory they are equivalent, but the div with a child and overflow requires clipping for the overflow, which changes the code paths and results in different rendering.
,
Sep 10
And, possibly more importantly, the inner div will render on-top of the outer div, meaning you can get accumulated coverage on the edges depending on characteristics of the specific rasterizer. I.e if you want to have a chance of working you should avoid overlap between the inner and outer divs (at the very least where the border edges will be.)
,
Sep 12
Thank you very much for the very quick feedback. So I guess it's expected that some tests fail due to this: * http://w3c-test.org/css/css-contain/contain-paint-clip-015.html * http://w3c-test.org/css/css-contain/contain-paint-clip-016.html Is there any way to mark them as "fuzzy"?
,
Sep 12
Support for "fuzzyness" is discussed in https://github.com/web-platform-tests/wpt/issues/7543 |
||
►
Sign in to add a comment |
||
Comment 1 by dtapu...@chromium.org
, Sep 10