Title: [170566] trunk
- Revision
- 170566
- Author
- stav...@adobe.com
- Date
- 2014-06-28 01:44:54 -0700 (Sat, 28 Jun 2014)
Log Message
[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.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (170565 => 170566)
--- trunk/LayoutTests/ChangeLog 2014-06-28 05:51:13 UTC (rev 170565)
+++ trunk/LayoutTests/ChangeLog 2014-06-28 08:44:54 UTC (rev 170566)
@@ -1,3 +1,15 @@
+2014-06-28 Radu Stavila <stav...@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.
+
2014-06-27 Zalan Bujtas <za...@apple.com>
Subpixel rendering: Background clipping with subpixel behaves differently when composited.
Added: trunk/LayoutTests/fast/multicol/newmulticol/multicol-clip-rounded-corners-expected.html (0 => 170566)
--- 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)
@@ -0,0 +1,51 @@
+<!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="" 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>
\ No newline at end of file
Added: trunk/LayoutTests/fast/multicol/newmulticol/multicol-clip-rounded-corners.html (0 => 170566)
--- 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)
@@ -0,0 +1,33 @@
+<!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="" 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>
\ No newline at end of file
Modified: trunk/Source/WebCore/ChangeLog (170565 => 170566)
--- 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)
@@ -1,3 +1,19 @@
+2014-06-28 Radu Stavila <stav...@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):
+
2014-06-27 Zalan Bujtas <za...@apple.com>
Subpixel rendering: Background clipping with subpixel behaves differently when composited.
Modified: trunk/Source/WebCore/rendering/RenderLayer.cpp (170565 => 170566)
--- 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)
@@ -4311,6 +4311,13 @@
// properly clipped by the overflow.
fragment.intersect(ancestorClipRect.rect());
+ // 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);
+ }
+
// Now intersect with our pagination clip. This will typically mean we're just intersecting the dirty rect with the column
// clip, so the column clip ends up being all we apply.
fragment.intersect(fragment.paginationClip);
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
