- Revision
- 153722
- Author
- [email protected]
- Date
- 2013-08-05 14:17:41 -0700 (Mon, 05 Aug 2013)
Log Message
Region based columns not clipped properly
https://bugs.webkit.org/show_bug.cgi?id=118499
Patch by Morten Stenshorne <[email protected]> on 2013-08-05
Reviewed by David Hyatt.
Source/WebCore:
Need to call RenderRegion::overflowRectForFlowThreadPortion() first,
and THEN clip in the column gaps. overflowRectForFlowThreadPortion()
expands the logical left and right to the flow thread's overflow
rectangle, effectively defeating inline direction clipping completely.
Tests: fast/multicol/newmulticol/clipping-overflow-hidden.html
fast/multicol/newmulticol/clipping-top-overflow.html
fast/multicol/newmulticol/clipping.html
* rendering/RenderMultiColumnSet.cpp:
(WebCore::RenderMultiColumnSet::flowThreadPortionOverflowRect):
LayoutTests:
* fast/multicol/newmulticol/clipping-expected.html: Added.
* fast/multicol/newmulticol/clipping-overflow-hidden-expected.html: Added.
* fast/multicol/newmulticol/clipping-overflow-hidden.html: Added.
* fast/multicol/newmulticol/clipping-top-overflow-expected.html: Added.
* fast/multicol/newmulticol/clipping-top-overflow.html: Added.
* fast/multicol/newmulticol/clipping.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (153721 => 153722)
--- trunk/LayoutTests/ChangeLog 2013-08-05 20:26:29 UTC (rev 153721)
+++ trunk/LayoutTests/ChangeLog 2013-08-05 21:17:41 UTC (rev 153722)
@@ -1,3 +1,17 @@
+2013-08-05 Morten Stenshorne <[email protected]>
+
+ Region based columns not clipped properly
+ https://bugs.webkit.org/show_bug.cgi?id=118499
+
+ Reviewed by David Hyatt.
+
+ * fast/multicol/newmulticol/clipping-expected.html: Added.
+ * fast/multicol/newmulticol/clipping-overflow-hidden-expected.html: Added.
+ * fast/multicol/newmulticol/clipping-overflow-hidden.html: Added.
+ * fast/multicol/newmulticol/clipping-top-overflow-expected.html: Added.
+ * fast/multicol/newmulticol/clipping-top-overflow.html: Added.
+ * fast/multicol/newmulticol/clipping.html: Added.
+
2013-08-05 Mihai Tica <[email protected]>
Make tests platform agnostic, fix async tests, remove broken blend modes: hue, saturation, color, luminosity, soft-light.
Added: trunk/LayoutTests/fast/multicol/newmulticol/clipping-expected.html (0 => 153722)
--- trunk/LayoutTests/fast/multicol/newmulticol/clipping-expected.html (rev 0)
+++ trunk/LayoutTests/fast/multicol/newmulticol/clipping-expected.html 2013-08-05 21:17:41 UTC (rev 153722)
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Column clipping</title>
+ <script>
+ if (window.internals)
+ internals.settings.setRegionBasedColumnsEnabled(true);
+ </script>
+ <style>
+ body {
+ width: 450px;
+ color: black;
+ background: white;
+ }
+ .mc {
+ columns: 3;
+ column-gap: 15px;
+ column-fill: auto;
+ -webkit-columns: 3;
+ -webkit-column-gap: 15px;
+ -webkit-column-fill: auto;
+ height: 100px;
+ box-sizing:border-box;
+ border:10px solid green;
+ background:white;
+ }
+ </style>
+ </head>
+ <body>
+ <p>There should be a rectangle with a solid 10px thick green border below, and no red.</p>
+ <div class="mc"></div>
+ </body>
+</html>
Added: trunk/LayoutTests/fast/multicol/newmulticol/clipping-overflow-hidden-expected.html (0 => 153722)
--- trunk/LayoutTests/fast/multicol/newmulticol/clipping-overflow-hidden-expected.html (rev 0)
+++ trunk/LayoutTests/fast/multicol/newmulticol/clipping-overflow-hidden-expected.html 2013-08-05 21:17:41 UTC (rev 153722)
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Multicol edge clipping</title>
+ <script>
+ if (window.internals)
+ internals.settings.setRegionBasedColumnsEnabled(true);
+ </script>
+ <style>
+ .mc {
+ columns: 3;
+ column-gap: 15px;
+ column-fill: auto;
+ -webkit-columns: 3;
+ -webkit-column-gap: 15px;
+ -webkit-column-fill: auto;
+ width: 600px;
+ height: 100px;
+ margin: 100px;
+ }
+ </style>
+ </head>
+ <body>
+ <p>There should be a 100x100 blue square below.</p>
+ <div class="mc">
+ <div style="width:100px; height:100px; background:blue;"></div>
+ </div>
+ </body>
+</html>
Added: trunk/LayoutTests/fast/multicol/newmulticol/clipping-overflow-hidden.html (0 => 153722)
--- trunk/LayoutTests/fast/multicol/newmulticol/clipping-overflow-hidden.html (rev 0)
+++ trunk/LayoutTests/fast/multicol/newmulticol/clipping-overflow-hidden.html 2013-08-05 21:17:41 UTC (rev 153722)
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Multicol edge clipping</title>
+ <script>
+ if (window.internals)
+ internals.settings.setRegionBasedColumnsEnabled(true);
+ </script>
+ <style>
+ .mc {
+ columns: 3;
+ column-gap: 15px;
+ column-fill: auto;
+ -webkit-columns: 3;
+ -webkit-column-gap: 15px;
+ -webkit-column-fill: auto;
+ width: 600px;
+ height: 100px;
+ margin: 100px;
+ overflow:hidden;
+ }
+ </style>
+ </head>
+ <body>
+ <p>There should be a 100x100 blue square below.</p>
+ <div class="mc">
+ <div style="width:150px; height:200px; margin-left:-50px; margin-top:-100px; background:blue;"></div>
+ </div>
+ </body>
+</html>
Added: trunk/LayoutTests/fast/multicol/newmulticol/clipping-top-overflow-expected.html (0 => 153722)
--- trunk/LayoutTests/fast/multicol/newmulticol/clipping-top-overflow-expected.html (rev 0)
+++ trunk/LayoutTests/fast/multicol/newmulticol/clipping-top-overflow-expected.html 2013-08-05 21:17:41 UTC (rev 153722)
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Column and multicol content top overflow clipping</title>
+ <script>
+ if (window.internals)
+ internals.settings.setRegionBasedColumnsEnabled(true);
+ </script>
+ <style>
+ .mc {
+ columns: 3;
+ column-gap: 15px;
+ column-fill: auto;
+ -webkit-columns: 3;
+ -webkit-column-gap: 15px;
+ -webkit-column-fill: auto;
+ width: 600px;
+ height: 100px;
+ }
+ </style>
+ </head>
+ <body>
+ <p>There should be a 100x100 blue square below.</p>
+ <div class="mc" style="margin-left:50px; margin-top:20px;">
+ <div style="width:100px; height:100px; background:blue;"></div>
+ </div>
+ </body>
+</html>
Added: trunk/LayoutTests/fast/multicol/newmulticol/clipping-top-overflow.html (0 => 153722)
--- trunk/LayoutTests/fast/multicol/newmulticol/clipping-top-overflow.html (rev 0)
+++ trunk/LayoutTests/fast/multicol/newmulticol/clipping-top-overflow.html 2013-08-05 21:17:41 UTC (rev 153722)
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Column and multicol content top overflow clipping</title>
+ <script>
+ if (window.internals)
+ internals.settings.setRegionBasedColumnsEnabled(true);
+ </script>
+ <style>
+ .mc {
+ columns: 3;
+ column-gap: 15px;
+ column-fill: auto;
+ -webkit-columns: 3;
+ -webkit-column-gap: 15px;
+ -webkit-column-fill: auto;
+ width: 600px;
+ height: 100px;
+ margin: 100px;
+ }
+ </style>
+ </head>
+ <body>
+ <p>There should be a 100x100 blue square below.</p>
+ <div class="mc">
+ <div style="width:100px; height:100px; margin-left:-50px; margin-top:-80px; background:blue;"></div>
+ </div>
+ </body>
+</html>
Added: trunk/LayoutTests/fast/multicol/newmulticol/clipping.html (0 => 153722)
--- trunk/LayoutTests/fast/multicol/newmulticol/clipping.html (rev 0)
+++ trunk/LayoutTests/fast/multicol/newmulticol/clipping.html 2013-08-05 21:17:41 UTC (rev 153722)
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Column clipping</title>
+ <script>
+ if (window.internals)
+ internals.settings.setRegionBasedColumnsEnabled(true);
+ </script>
+ <style>
+ body {
+ width: 450px;
+ color: black;
+ background: white;
+ }
+ #container { margin:0 60px; }
+ .mc {
+ columns: 3;
+ column-gap: 15px;
+ column-fill: auto;
+ -webkit-columns: 3;
+ -webkit-column-gap: 15px;
+ -webkit-column-fill: auto;
+ height: 100px;
+ background: red;
+ }
+ .hoverflow { margin:0 -60px; }
+ .rect {
+ box-sizing:border-box;
+ height:100px;
+ border:10px solid green;
+ background:white;
+ }
+ </style>
+ </head>
+ <body>
+ <p>There should be a rectangle with a solid 10px thick green border below, and no red.</p>
+ <div id="container">
+ <div class="mc">
+ <div class="hoverflow">
+ <div class="rect"></div>
+ </div>
+ <div class="hoverflow">
+ <div class="rect"></div>
+ </div>
+ <div class="hoverflow">
+ <div class="rect"></div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (153721 => 153722)
--- trunk/Source/WebCore/ChangeLog 2013-08-05 20:26:29 UTC (rev 153721)
+++ trunk/Source/WebCore/ChangeLog 2013-08-05 21:17:41 UTC (rev 153722)
@@ -1,3 +1,22 @@
+2013-08-05 Morten Stenshorne <[email protected]>
+
+ Region based columns not clipped properly
+ https://bugs.webkit.org/show_bug.cgi?id=118499
+
+ Reviewed by David Hyatt.
+
+ Need to call RenderRegion::overflowRectForFlowThreadPortion() first,
+ and THEN clip in the column gaps. overflowRectForFlowThreadPortion()
+ expands the logical left and right to the flow thread's overflow
+ rectangle, effectively defeating inline direction clipping completely.
+
+ Tests: fast/multicol/newmulticol/clipping-overflow-hidden.html
+ fast/multicol/newmulticol/clipping-top-overflow.html
+ fast/multicol/newmulticol/clipping.html
+
+ * rendering/RenderMultiColumnSet.cpp:
+ (WebCore::RenderMultiColumnSet::flowThreadPortionOverflowRect):
+
2013-08-05 Vivek Galatage <[email protected]>
XMLTreeViewer should be created only in the XML viewer mode
Modified: trunk/Source/WebCore/rendering/RenderMultiColumnSet.cpp (153721 => 153722)
--- trunk/Source/WebCore/rendering/RenderMultiColumnSet.cpp 2013-08-05 20:26:29 UTC (rev 153721)
+++ trunk/Source/WebCore/rendering/RenderMultiColumnSet.cpp 2013-08-05 21:17:41 UTC (rev 153722)
@@ -280,39 +280,25 @@
bool isLastColumn = index == colCount - 1;
bool isLeftmostColumn = style()->isLeftToRightDirection() ? isFirstColumn : isLastColumn;
bool isRightmostColumn = style()->isLeftToRightDirection() ? isLastColumn : isFirstColumn;
- LayoutRect overflowRect(portionRect);
+
+ // Calculate the overflow rectangle, based on the flow thread's, clipped at column logical
+ // top/bottom unless it's the first/last column.
+ LayoutRect overflowRect = overflowRectForFlowThreadPortion(portionRect, isFirstColumn && isFirstRegion(), isLastColumn && isLastRegion());
+
+ // Avoid overflowing into neighboring columns, by clipping in the middle of adjacent column
+ // gaps. Also make sure that we avoid rounding errors.
if (isHorizontalWritingMode()) {
- if (isLeftmostColumn) {
- // Shift to the logical left overflow of the flow thread to make sure it's all covered.
- overflowRect.shiftXEdgeTo(min(flowThread()->visualOverflowRect().x(), portionRect.x()));
- } else {
- // Expand into half of the logical left column gap.
+ if (!isLeftmostColumn)
overflowRect.shiftXEdgeTo(portionRect.x() - colGap / 2);
- }
- if (isRightmostColumn) {
- // Shift to the logical right overflow of the flow thread to ensure content can spill out of the column.
- overflowRect.shiftMaxXEdgeTo(max(flowThread()->visualOverflowRect().maxX(), portionRect.maxX()));
- } else {
- // Expand into half of the logical right column gap.
- overflowRect.shiftMaxXEdgeTo(portionRect.maxX() + colGap / 2);
- }
+ if (!isRightmostColumn)
+ overflowRect.shiftMaxXEdgeTo(portionRect.maxX() + colGap - colGap / 2);
} else {
- if (isLeftmostColumn) {
- // Shift to the logical left overflow of the flow thread to make sure it's all covered.
- overflowRect.shiftYEdgeTo(min(flowThread()->visualOverflowRect().y(), portionRect.y()));
- } else {
- // Expand into half of the logical left column gap.
+ if (!isLeftmostColumn)
overflowRect.shiftYEdgeTo(portionRect.y() - colGap / 2);
- }
- if (isRightmostColumn) {
- // Shift to the logical right overflow of the flow thread to ensure content can spill out of the column.
- overflowRect.shiftMaxYEdgeTo(max(flowThread()->visualOverflowRect().maxY(), portionRect.maxY()));
- } else {
- // Expand into half of the logical right column gap.
- overflowRect.shiftMaxYEdgeTo(portionRect.maxY() + colGap / 2);
- }
+ if (!isRightmostColumn)
+ overflowRect.shiftMaxYEdgeTo(portionRect.maxY() + colGap - colGap / 2);
}
- return overflowRectForFlowThreadPortion(overflowRect, isFirstRegion() && isFirstColumn, isLastRegion() && isLastColumn);
+ return overflowRect;
}
void RenderMultiColumnSet::paintObject(PaintInfo& paintInfo, const LayoutPoint& paintOffset)
