- Revision
- 160721
- Author
- stav...@adobe.com
- Date
- 2013-12-17 12:13:53 -0800 (Tue, 17 Dec 2013)
Log Message
[CSS Regions] Positioned elements in regions get clipped if they fall outside the region
https://bugs.webkit.org/show_bug.cgi?id=117120
Reviewed by Mihnea Ovidenie.
Source/WebCore:
Fixed the computing of the box decorations clip rect when having statically positioned
elements inside positioned elements. The existing algorithm computed the rect in a loop
running up the containing block chain and only checked for positioned elements before
starting the loop. If a positioned elements was found in the middle of a loop (as would
be the case with a positioned element parenting a non-positioned element), it was not
correctly handled.
Also changed it so the clip is only performed in the fragmentation direction as that was
the original purpose of this method.
Tests: fast/regions/absolute-in-relative-overflow.html
fast/regions/static-in-relative-overflow.html
fast/regions/sticky-border-overflow.html
* rendering/RenderFlowThread.cpp:
(WebCore::RenderFlowThread::decorationsClipRectForBoxInRegion):
LayoutTests:
Added tests for the correct painting of the borders of differently positioned elements overflowing regions.
* fast/regions/absolute-in-relative-overflow-expected.html: Added.
* fast/regions/absolute-in-relative-overflow.html: Added.
* fast/regions/static-in-relative-overflow-expected.html: Added.
* fast/regions/static-in-relative-overflow.html: Added.
* fast/regions/sticky-border-overflow-expected.html: Added.
* fast/regions/sticky-border-overflow.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (160720 => 160721)
--- trunk/LayoutTests/ChangeLog 2013-12-17 20:11:56 UTC (rev 160720)
+++ trunk/LayoutTests/ChangeLog 2013-12-17 20:13:53 UTC (rev 160721)
@@ -1,3 +1,19 @@
+2013-12-17 Radu Stavila <stav...@adobe.com>
+
+ [CSS Regions] Positioned elements in regions get clipped if they fall outside the region
+ https://bugs.webkit.org/show_bug.cgi?id=117120
+
+ Reviewed by Mihnea Ovidenie.
+
+ Added tests for the correct painting of the borders of differently positioned elements overflowing regions.
+
+ * fast/regions/absolute-in-relative-overflow-expected.html: Added.
+ * fast/regions/absolute-in-relative-overflow.html: Added.
+ * fast/regions/static-in-relative-overflow-expected.html: Added.
+ * fast/regions/static-in-relative-overflow.html: Added.
+ * fast/regions/sticky-border-overflow-expected.html: Added.
+ * fast/regions/sticky-border-overflow.html: Added.
+
2013-12-17 Commit Queue <commit-qu...@webkit.org>
Unreviewed, rolling out r160717.
Added: trunk/LayoutTests/fast/regions/absolute-in-relative-overflow-expected.html (0 => 160721)
--- trunk/LayoutTests/fast/regions/absolute-in-relative-overflow-expected.html (rev 0)
+++ trunk/LayoutTests/fast/regions/absolute-in-relative-overflow-expected.html 2013-12-17 20:13:53 UTC (rev 160721)
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+
+<style>
+ #regionFlow {
+ border: 4px solid brown;
+ width: 180px;
+ height: 140px;
+ padding: 5px;
+ }
+
+ #rel {
+ border: 2px solid green;
+ width: 210px;
+ height: 150px;
+ position: relative;
+ left: 30px;
+ top: 20px;
+ padding: 3px;
+ }
+
+ #abs {
+ border: 1px solid magenta;
+ position: absolute;
+ width: 250px;
+ top: 50px;
+ left: 30px;
+ }
+</style>
+
+<body>
+ <a href="" Regions] Positioned elements in regions get clipped if they fall outside the region</a>
+ <p>This tests that overflowing borders are properly painted for absolute-positioned elements inside relative-positioned elements. The test passes if all borders are completely visible and the text <span style="color:brown"><b>THE END</b></span> is visible</p>
+ <div id="regionFlow">
+ <div id="rel">
+ <div id="abs">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span style="color:brown"><b>THE END</b></span>.
+ </div>
+ </div>
+ </div>
+</body>
\ No newline at end of file
Added: trunk/LayoutTests/fast/regions/absolute-in-relative-overflow.html (0 => 160721)
--- trunk/LayoutTests/fast/regions/absolute-in-relative-overflow.html (rev 0)
+++ trunk/LayoutTests/fast/regions/absolute-in-relative-overflow.html 2013-12-17 20:13:53 UTC (rev 160721)
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+
+<style>
+ #regionFlow {
+ -webkit-flow-from: flow2;
+ border: 4px solid brown;
+ width: 180px;
+ height: 140px;
+ padding: 5px;
+ }
+
+ #rel {
+ -webkit-flow-into: flow2;
+ border: 2px solid green;
+ width: 210px;
+ height: 150px;
+ position: relative;
+ left: 30px;
+ top: 20px;
+ padding: 3px;
+ }
+
+ #abs {
+ border: 1px solid magenta;
+ position: absolute;
+ width: 250px;
+ top: 50px;
+ left: 30px;
+ }
+</style>
+
+<body>
+ <a href="" Regions] Positioned elements in regions get clipped if they fall outside the region</a>
+ <p>This tests that overflowing borders are properly painted for absolute-positioned elements inside relative-positioned elements. The test passes if all borders are completely visible and the text <span style="color:brown"><b>THE END</b></span> is visible</p>
+ <div id="regionFlow"></div>
+
+ <div id="rel">
+ <div id="abs">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span style="color:brown"><b>THE END</b></span>.
+ </div>
+ </div>
+</body>
\ No newline at end of file
Added: trunk/LayoutTests/fast/regions/static-in-relative-overflow-expected.html (0 => 160721)
--- trunk/LayoutTests/fast/regions/static-in-relative-overflow-expected.html (rev 0)
+++ trunk/LayoutTests/fast/regions/static-in-relative-overflow-expected.html 2013-12-17 20:13:53 UTC (rev 160721)
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+
+<style>
+ #regionFlow {
+ border: 4px solid brown;
+ width: 180px;
+ height: 140px;
+ padding: 5px;
+ }
+
+ #rel {
+ border: 2px solid green;
+ width: 210px;
+ height: 150px;
+ position: relative;
+ left: 30px;
+ top: 20px;
+ padding: 3px;
+ }
+
+ #static {
+ border: 1px solid magenta;
+ width: 250px;
+ }
+</style>
+
+<body>
+ <a href="" Regions] Positioned elements in regions get clipped if they fall outside the region</a>
+ <p>This tests that overflowing borders are properly painted for static-positioned elements inside relative-positioned elements. The test passes if all borders are completely visible and the text <span style="color:brown"><b>THE END</b></span> is visible</p>
+ <div id="regionFlow">
+ <div id="rel">
+ <div id="static">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span style="color:brown"><b>THE END</b></span>.
+ </div>
+ </div>
+ </div>
+</body>
\ No newline at end of file
Added: trunk/LayoutTests/fast/regions/static-in-relative-overflow.html (0 => 160721)
--- trunk/LayoutTests/fast/regions/static-in-relative-overflow.html (rev 0)
+++ trunk/LayoutTests/fast/regions/static-in-relative-overflow.html 2013-12-17 20:13:53 UTC (rev 160721)
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+
+<style>
+ #regionFlow {
+ -webkit-flow-from: flow2;
+ border: 4px solid brown;
+ width: 180px;
+ height: 140px;
+ padding: 5px;
+ }
+
+ #rel {
+ -webkit-flow-into: flow2;
+ border: 2px solid green;
+ width: 210px;
+ height: 150px;
+ position: relative;
+ left: 30px;
+ top: 20px;
+ padding: 3px;
+ }
+
+ #static {
+ border: 1px solid magenta;
+ width: 250px;
+ }
+</style>
+
+<body>
+ <a href="" Regions] Positioned elements in regions get clipped if they fall outside the region</a>
+ <p>This tests that overflowing borders are properly painted for static-positioned elements inside relative-positioned elements. The test passes if all borders are completely visible and the text <span style="color:brown"><b>THE END</b></span> is visible</p>
+ <div id="regionFlow"></div>
+
+ <div id="rel">
+ <div id="static">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span style="color:brown"><b>THE END</b></span>.
+ </div>
+ </div>
+</body>
\ No newline at end of file
Added: trunk/LayoutTests/fast/regions/sticky-border-overflow-expected.html (0 => 160721)
--- trunk/LayoutTests/fast/regions/sticky-border-overflow-expected.html (rev 0)
+++ trunk/LayoutTests/fast/regions/sticky-border-overflow-expected.html 2013-12-17 20:13:53 UTC (rev 160721)
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+
+<style>
+ #regionFlow {
+ border: 4px solid brown;
+ width: 180px;
+ height: 140px;
+ padding: 5px;
+ }
+
+ #sticky {
+ border: 1px solid magenta;
+ position: -webkit-sticky;
+ width: 250px;
+ top: 50px;
+ margin: 50px;
+ padding: 5px;
+ }
+</style>
+
+<body>
+ <a href="" Regions] Positioned elements in regions get clipped if they fall outside the region</a>
+ <p>This tests that overflowing borders are properly painted for sticky-positioned elements. The test passes if all borders are completely visible and the text <span style="color:brown"><b>THE END</b></span> is visible</p>
+ <div id="regionFlow">
+ <div id="sticky">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span style="color:brown"><b>THE END</b></span>.
+ </div>
+ </div>
+</body>
\ No newline at end of file
Added: trunk/LayoutTests/fast/regions/sticky-border-overflow.html (0 => 160721)
--- trunk/LayoutTests/fast/regions/sticky-border-overflow.html (rev 0)
+++ trunk/LayoutTests/fast/regions/sticky-border-overflow.html 2013-12-17 20:13:53 UTC (rev 160721)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+<style>
+ #regionFlow {
+ -webkit-flow-from: flow2;
+ border: 4px solid brown;
+ width: 180px;
+ height: 140px;
+ padding: 5px;
+ }
+
+ #sticky {
+ -webkit-flow-into: flow2;
+ border: 1px solid magenta;
+ position: -webkit-sticky;
+ width: 250px;
+ top: 50px;
+ margin: 50px;
+ padding: 5px;
+ }
+</style>
+
+<body>
+ <a href="" Regions] Positioned elements in regions get clipped if they fall outside the region</a>
+ <p>This tests that overflowing borders are properly painted for sticky-positioned elements. The test passes if all borders are completely visible and the text <span style="color:brown"><b>THE END</b></span> is visible</p>
+ <div id="regionFlow"></div>
+
+ <div id="sticky">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span style="color:brown"><b>THE END</b></span>.
+ </div>
+</body>
\ No newline at end of file
Modified: trunk/Source/WebCore/ChangeLog (160720 => 160721)
--- trunk/Source/WebCore/ChangeLog 2013-12-17 20:11:56 UTC (rev 160720)
+++ trunk/Source/WebCore/ChangeLog 2013-12-17 20:13:53 UTC (rev 160721)
@@ -1,3 +1,26 @@
+2013-12-17 Radu Stavila <stav...@adobe.com>
+
+ [CSS Regions] Positioned elements in regions get clipped if they fall outside the region
+ https://bugs.webkit.org/show_bug.cgi?id=117120
+
+ Reviewed by Mihnea Ovidenie.
+
+ Fixed the computing of the box decorations clip rect when having statically positioned
+ elements inside positioned elements. The existing algorithm computed the rect in a loop
+ running up the containing block chain and only checked for positioned elements before
+ starting the loop. If a positioned elements was found in the middle of a loop (as would
+ be the case with a positioned element parenting a non-positioned element), it was not
+ correctly handled.
+ Also changed it so the clip is only performed in the fragmentation direction as that was
+ the original purpose of this method.
+
+ Tests: fast/regions/absolute-in-relative-overflow.html
+ fast/regions/static-in-relative-overflow.html
+ fast/regions/sticky-border-overflow.html
+
+ * rendering/RenderFlowThread.cpp:
+ (WebCore::RenderFlowThread::decorationsClipRectForBoxInRegion):
+
2013-12-17 Commit Queue <commit-qu...@webkit.org>
Unreviewed, rolling out r160717.
Modified: trunk/Source/WebCore/rendering/RenderFlowThread.cpp (160720 => 160721)
--- trunk/Source/WebCore/rendering/RenderFlowThread.cpp 2013-12-17 20:11:56 UTC (rev 160720)
+++ trunk/Source/WebCore/rendering/RenderFlowThread.cpp 2013-12-17 20:13:53 UTC (rev 160721)
@@ -1266,7 +1266,8 @@
LayoutRect RenderFlowThread::decorationsClipRectForBoxInRegion(const RenderBox& box, RenderRegion& region) const
{
LayoutRect visualOverflowRect = region.visualOverflowRectForBox(&box);
-
+ LayoutUnit initialLogicalX = style().isHorizontalWritingMode() ? visualOverflowRect.x() : visualOverflowRect.y();
+
// The visual overflow rect returned by visualOverflowRectForBox is already flipped but the
// RenderRegion::rectFlowPortionForBox method expects it unflipped.
flipForWritingModeLocalCoordinates(visualOverflowRect);
@@ -1283,32 +1284,52 @@
visualOverflowRect.moveBy(LayoutPoint(width(), 0));
}
- // FIXME: This doesn't work properly with flipped writing modes.
- // https://bugs.webkit.org/show_bug.cgi?id=125149
- if (box.isRelPositioned()) {
- // For relative-positioned elements, just use the layer's location.
- visualOverflowRect.moveBy(box.layer()->absoluteBoundingBox().location());
- } else {
- const RenderBox* iterBox = &box;
- while (iterBox && iterBox != this) {
- RenderBlock* containerBlock = iterBox->containingBlock();
+ const RenderBox* iterBox = &box;
+ while (iterBox && iterBox != this) {
+ RenderBlock* containerBlock = iterBox->containingBlock();
- LayoutRect currentBoxRect = iterBox->frameRect();
- if (iterBox->style().isFlippedBlocksWritingMode()) {
- if (iterBox->style().isHorizontalWritingMode())
- currentBoxRect.setY(currentBoxRect.height() - currentBoxRect.maxY());
- else
- currentBoxRect.setX(currentBoxRect.width() - currentBoxRect.maxX());
- }
+ // FIXME: This doesn't work properly with flipped writing modes.
+ // https://bugs.webkit.org/show_bug.cgi?id=125149
+ if (iterBox->isPositioned()) {
+ // For positioned elements, just use the layer's absolute bounding box.
+ visualOverflowRect.moveBy(iterBox->layer()->absoluteBoundingBox().location());
+ break;
+ }
- if (containerBlock->style().writingMode() != iterBox->style().writingMode())
- iterBox->flipForWritingMode(currentBoxRect);
+ LayoutRect currentBoxRect = iterBox->frameRect();
+ if (iterBox->style().isFlippedBlocksWritingMode()) {
+ if (iterBox->style().isHorizontalWritingMode())
+ currentBoxRect.setY(currentBoxRect.height() - currentBoxRect.maxY());
+ else
+ currentBoxRect.setX(currentBoxRect.width() - currentBoxRect.maxX());
+ }
- visualOverflowRect.moveBy(currentBoxRect.location());
- iterBox = containerBlock;
- }
+ if (containerBlock->style().writingMode() != iterBox->style().writingMode())
+ iterBox->flipForWritingMode(currentBoxRect);
+
+ visualOverflowRect.moveBy(currentBoxRect.location());
+ iterBox = containerBlock;
}
+ // Since the purpose of this method is to make sure the borders of a fragmented
+ // element don't overflow the region in the fragmentation direction, there's no
+ // point in restricting the clipping rect on the logical X axis.
+ // This also saves us the trouble of handling percent-based widths and margins
+ // since the absolute bounding box of a positioned element would not contain
+ // the correct coordinates relative to the region we're interested in, but rather
+ // relative to the actual flow thread.
+ if (style().isHorizontalWritingMode()) {
+ if (initialLogicalX < visualOverflowRect.x())
+ visualOverflowRect.shiftXEdgeTo(initialLogicalX);
+ if (visualOverflowRect.width() < frameRect().width())
+ visualOverflowRect.setWidth(frameRect().width());
+ } else {
+ if (initialLogicalX < visualOverflowRect.y())
+ visualOverflowRect.shiftYEdgeTo(initialLogicalX);
+ if (visualOverflowRect.height() < frameRect().height())
+ visualOverflowRect.setHeight(frameRect().height());
+ }
+
return visualOverflowRect;
}
