<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[170566] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/170566">170566</a></dd>
<dt>Author</dt> <dd>stavila@adobe.com</dd>
<dt>Date</dt> <dd>2014-06-28 01:44:54 -0700 (Sat, 28 Jun 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>[New Multicolumn] Elements with rounded corners and overflow:hidden do not properly clip their content
https://bugs.webkit.org/show_bug.cgi?id=133941
Reviewed by Darin Adler.
Source/WebCore:
When having a multicol element inside an element with overflow:hidden and border-radius,
the fragments representing the columns need to have the border radius set also, to ensure
proper clipping.
Test: fast/multicol/newmulticol/multicol-clip-rounded-corners.html
* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::collectFragments):
LayoutTests:
Added test for multicol element inside an element with overflow:hidden and border radius.
* fast/multicol/newmulticol/multicol-clip-rounded-corners-expected.html: Added.
* fast/multicol/newmulticol/multicol-clip-rounded-corners.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderLayercpp">trunk/Source/WebCore/rendering/RenderLayer.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastmulticolnewmulticolmulticolcliproundedcornersexpectedhtml">trunk/LayoutTests/fast/multicol/newmulticol/multicol-clip-rounded-corners-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastmulticolnewmulticolmulticolcliproundedcornershtml">trunk/LayoutTests/fast/multicol/newmulticol/multicol-clip-rounded-corners.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (170565 => 170566)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-06-28 05:51:13 UTC (rev 170565)
+++ trunk/LayoutTests/ChangeLog 2014-06-28 08:44:54 UTC (rev 170566)
</span><span class="lines">@@ -1,3 +1,15 @@
</span><ins>+2014-06-28 Radu Stavila <stavila@adobe.com>
+
+ [New Multicolumn] Elements with rounded corners and overflow:hidden do not properly clip their content
+ https://bugs.webkit.org/show_bug.cgi?id=133941
+
+ Reviewed by Darin Adler.
+
+ Added test for multicol element inside an element with overflow:hidden and border radius.
+
+ * fast/multicol/newmulticol/multicol-clip-rounded-corners-expected.html: Added.
+ * fast/multicol/newmulticol/multicol-clip-rounded-corners.html: Added.
+
</ins><span class="cx"> 2014-06-27 Zalan Bujtas <zalan@apple.com>
</span><span class="cx">
</span><span class="cx"> Subpixel rendering: Background clipping with subpixel behaves differently when composited.
</span></span></pre></div>
<a id="trunkLayoutTestsfastmulticolnewmulticolmulticolcliproundedcornersexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/multicol/newmulticol/multicol-clip-rounded-corners-expected.html (0 => 170566)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/multicol/newmulticol/multicol-clip-rounded-corners-expected.html (rev 0)
+++ trunk/LayoutTests/fast/multicol/newmulticol/multicol-clip-rounded-corners-expected.html 2014-06-28 08:44:54 UTC (rev 170566)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ #multicol {
+ width: 400px;
+ height: 200px;
+ border: 5px solid black;
+ border-radius: 10%;
+ overflow: hidden;
+ background-color: orange;
+ }
+
+ #multicol:hover { background-color: lime; }
+
+ .col {
+ background-color: pink;
+ width: 123px;
+ height: 200px;
+ float: left;
+ color: pink;
+ }
+
+ #col2 {
+ width: 122px;
+ margin-left: 16px;
+ }
+
+ #col3 {
+ position: relative;
+ left: 16px;
+ }
+ </style>
+ </head>
+ <body>
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=133941">Bug 133941 - [New Multicolumn] Elements with rounded corners and overflow:hidden do not properly clip their content</a>
+ <p>The text passes if the columns are correctly clipped by the parent having border-radius.</p>
+
+ <div id="multicol">
+ <div id="col1" class="col">
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
+ </div>
+ <div id="col2" class="col">
+ took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
+ </div>
+ <div id="col3" class="col">
+ essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
+ </div>
+ </div>
+ </body>
+</html>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsfastmulticolnewmulticolmulticolcliproundedcornershtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/multicol/newmulticol/multicol-clip-rounded-corners.html (0 => 170566)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/multicol/newmulticol/multicol-clip-rounded-corners.html (rev 0)
+++ trunk/LayoutTests/fast/multicol/newmulticol/multicol-clip-rounded-corners.html 2014-06-28 08:44:54 UTC (rev 170566)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+<!DOCTYPE html>
+<html>
+ <head>
+ <style>
+ #multicol {
+ -webkit-column-width: 100px;
+ width: 400px;
+ height: 200px;
+ border: 5px solid black;
+ border-radius: 10%;
+ overflow: hidden;
+ background-color: orange;
+ }
+
+ #multicol:hover { background-color: lime; }
+
+ #content {
+ background-color: pink;
+ color: pink;
+ }
+ </style>
+ </head>
+ <body>
+ <a href="https://bugs.webkit.org/show_bug.cgi?id=133941">Bug 133941 - [New Multicolumn] Elements with rounded corners and overflow:hidden do not properly clip their content</a>
+ <p>The text passes if the columns are correctly clipped by the parent having border-radius.</p>
+
+ <div id="multicol">
+ <div id="content">
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
+ </div>
+ </div>
+ </body>
+</html>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (170565 => 170566)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-06-28 05:51:13 UTC (rev 170565)
+++ trunk/Source/WebCore/ChangeLog 2014-06-28 08:44:54 UTC (rev 170566)
</span><span class="lines">@@ -1,3 +1,19 @@
</span><ins>+2014-06-28 Radu Stavila <stavila@adobe.com>
+
+ [New Multicolumn] Elements with rounded corners and overflow:hidden do not properly clip their content
+ https://bugs.webkit.org/show_bug.cgi?id=133941
+
+ Reviewed by Darin Adler.
+
+ When having a multicol element inside an element with overflow:hidden and border-radius,
+ the fragments representing the columns need to have the border radius set also, to ensure
+ proper clipping.
+
+ Test: fast/multicol/newmulticol/multicol-clip-rounded-corners.html
+
+ * rendering/RenderLayer.cpp:
+ (WebCore::RenderLayer::collectFragments):
+
</ins><span class="cx"> 2014-06-27 Zalan Bujtas <zalan@apple.com>
</span><span class="cx">
</span><span class="cx"> Subpixel rendering: Background clipping with subpixel behaves differently when composited.
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderLayercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderLayer.cpp (170565 => 170566)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderLayer.cpp 2014-06-28 05:51:13 UTC (rev 170565)
+++ trunk/Source/WebCore/rendering/RenderLayer.cpp 2014-06-28 08:44:54 UTC (rev 170566)
</span><span class="lines">@@ -4311,6 +4311,13 @@
</span><span class="cx"> // properly clipped by the overflow.
</span><span class="cx"> fragment.intersect(ancestorClipRect.rect());
</span><span class="cx">
</span><ins>+ // If the ancestor clip rect has border-radius, make sure to apply it to the fragments.
+ if (ancestorClipRect.hasRadius()) {
+ fragment.foregroundRect.setHasRadius(true);
+ fragment.backgroundRect.setHasRadius(true);
+ fragment.outlineRect.setHasRadius(true);
+ }
+
</ins><span class="cx"> // Now intersect with our pagination clip. This will typically mean we're just intersecting the dirty rect with the column
</span><span class="cx"> // clip, so the column clip ends up being all we apply.
</span><span class="cx"> fragment.intersect(fragment.paginationClip);
</span></span></pre>
</div>
</div>
</body>
</html>