Diff
Modified: trunk/LayoutTests/ChangeLog (151651 => 151652)
--- trunk/LayoutTests/ChangeLog 2013-06-17 18:54:34 UTC (rev 151651)
+++ trunk/LayoutTests/ChangeLog 2013-06-17 20:23:58 UTC (rev 151652)
@@ -1,3 +1,24 @@
+2013-06-17 Zoltan Horvath <[email protected]>
+
+ [CSS Shapes] Consider bottom borders when calculating the position of the overflow
+ https://bugs.webkit.org/show_bug.cgi?id=117663
+
+ Reviewed by Alexandru Chiculita.
+
+ When you have a shape and the content overflows from the shape we need to push the overflow below the content box,
+ not below the border box. We didn't consider the bottom borders of the content box, now I fixed it too and the overflow
+ just starts after the content box. I added a new helper function called pushShapeContentOverflowBelowTheContentBox. Now
+ both the shape in flow thread and the shape overflow use the same function. I added a new test and modified the existing
+ tests to cover all the affected cases.
+
+ * fast/exclusions/shape-inside/shape-inside-empty-expected.html:
+ * fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-block-content-expected.html: Copied from LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html.
+ * fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-block-content.html: Copied from LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions.html.
+ * fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html:
+ * fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions.html:
+ * fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes-expected.html:
+ * fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes.html:
+
2013-06-17 Bear Travis <[email protected]>
[CSS Exclusions] Implement text alignment for shape-inside
Modified: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-empty-expected.html (151651 => 151652)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-empty-expected.html 2013-06-17 18:54:34 UTC (rev 151651)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-empty-expected.html 2013-06-17 20:23:58 UTC (rev 151652)
@@ -14,7 +14,7 @@
border: solid green;
box-sizing: border-box;
}
- #rectangles p { margin-top: 37px; }
+ #rectangles p { margin-top: 34px; }
</style>
</head>
<body>
Copied: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-block-content-expected.html (from rev 151650, trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html) (0 => 151652)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-block-content-expected.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-block-content-expected.html 2013-06-17 20:23:58 UTC (rev 151652)
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+#container {
+ font: 20px Ahem, sans-serif;
+ line-height: 20px;
+ border: 2px solid blue;
+ border-bottom: 30px solid yellow;
+ position: relative;
+ width: 200px;
+ height: 200px;
+ margin-bottom: 60px;
+}
+#border {
+ position: absolute;
+ margin-top: -2px;
+ left: 48px;
+ width: 100px;
+ height: 60px;
+ border: 2px solid green;
+}
+.spacer {
+ width: 50px;
+ height: 40px;
+}
+</style>
+</head>
+<body>
+ <div id="container">
+ <div id="border">
+ X X <p>X X X</p>
+ <div class="spacer" style="float:left"></div>
+ <div class="spacer" style="float:right"></div>
+ </div>
+ <div style="padding-top: 200px;">
+ X X X X X X X X X X
+ </div>
+ </div>
+ <p>Requires Ahem font. The block content should start inside the green rectangle (shape-inside) and the overflow should be pushed below the content box. The overflow should start where the yellow bottom border starts. <br/>
+ <p>Bug <a href="" [CSS Exclusions] shape-inside overflow should be pushed to the outside of the content box</p>
+</body>
+</html>
Copied: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-block-content.html (from rev 151650, trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions.html) (0 => 151652)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-block-content.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-block-content.html 2013-06-17 20:23:58 UTC (rev 151652)
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+ if (window.internals)
+ window.internals.settings.setCSSShapesEnabled(true);
+</script>
+<style>
+#container {
+ font: 20px Ahem, sans-serif;
+ line-height: 20px;
+ border: 2px solid blue;
+ border-bottom: 30px solid yellow;
+ position: relative;
+ width: 200px;
+ height: 200px;
+ margin-bottom: 60px;
+}
+#shape-inside {
+ width: 200px;
+ height: 200px;
+ -webkit-shape-inside: rectangle(50px, 0px, 100px, 60px);
+}
+#border {
+ position: absolute;
+ margin-top: -2px;
+ left: 48px;
+ width: 100px;
+ height: 60px;
+ border: 2px solid green;
+}
+</style>
+</head>
+<body>
+ <div id="container">
+ <div id="border"></div>
+ <div id="shape-inside">
+ X X <p>X X X</p> X X X X X X X X X X
+ </div>
+ </div>
+ <p>Requires Ahem font. The block content should start inside the green rectangle (shape-inside) and the overflow should be pushed below the content box. The overflow should start where the yellow bottom border starts. <br/>
+ <p>Bug <a href="" [CSS Exclusions] shape-inside overflow should be pushed to the outside of the content box</p>
+</body>
+</html>
Modified: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html (151651 => 151652)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html 2013-06-17 18:54:34 UTC (rev 151651)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html 2013-06-17 20:23:58 UTC (rev 151652)
@@ -6,6 +6,7 @@
font: 20px Ahem, sans-serif;
line-height: 20px;
border: 2px solid blue;
+ border-bottom: 30px solid yellow;
position: relative;
width: 200px;
height: 200px;
@@ -13,6 +14,7 @@
}
#border {
position: absolute;
+ margin-top: -2px;
left: 48px;
width: 100px;
height: 40px;
@@ -36,7 +38,7 @@
X X X X X X X X X X
</div>
</div>
-<p>Requires Ahem font. The content should start inside the green rectangle (shape-inside) and the overflow should be pushed below the content box (content-box's margin is blue). <br/>
-<p>Bug <a href="" [CSS Exclusions] shape-inside overflow should be pushed to the outside of the content box</p>
+ <p>Requires Ahem font. The inline content should start inside the green rectangle (shape-inside) and the overflow should be pushed below the content box. The overflow should start where the yellow bottom border starts. <br/>
+ <p>Bug <a href="" [CSS Exclusions] shape-inside overflow should be pushed to the outside of the content box</p>
</body>
</html>
Modified: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions.html (151651 => 151652)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions.html 2013-06-17 18:54:34 UTC (rev 151651)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions.html 2013-06-17 20:23:58 UTC (rev 151652)
@@ -10,19 +10,21 @@
font: 20px Ahem, sans-serif;
line-height: 20px;
border: 2px solid blue;
+ border-bottom: 30px solid yellow;
position: relative;
width: 200px;
height: 200px;
- -webkit-shape-inside: rectangle(50px, 0px, 100px, 45px);
margin-bottom: 60px;
}
#shape-inside {
width: 200px;
height: 200px;
+ border-bottom: 30px solid yellow;
-webkit-shape-inside: rectangle(50px, 0px, 100px, 50px);
}
#border {
position: absolute;
+ margin-top: -2px;
left: 48px;
width: 100px;
height: 40px;
@@ -37,7 +39,7 @@
X X X X X X X X X X X X X X X X
</div>
</div>
- <p>Requires Ahem font. The content should start inside the green rectangle (shape-inside) and the overflow should be pushed below the content box (content-box's margin is blue). <br/>
+ <p>Requires Ahem font. The inline content should start inside the green rectangle (shape-inside) and the overflow should be pushed below the content box. The overflow should start where the yellow bottom border starts. <br/>
<p>Bug <a href="" [CSS Exclusions] shape-inside overflow should be pushed to the outside of the content box</p>
</body>
</html>
Modified: trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes-expected.html (151651 => 151652)
--- trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes-expected.html 2013-06-17 18:54:34 UTC (rev 151651)
+++ trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes-expected.html 2013-06-17 20:23:58 UTC (rev 151652)
@@ -11,7 +11,10 @@
height: 200px;
border: 2px solid green;
}
- #region2 { margin-top: 10px; }
+ #region2 {
+ margin-top: 10px;
+ border-bottom: 10px solid yellow;
+ }
#border1 {
position: absolute;
top: 58px;
@@ -31,7 +34,7 @@
#overflow {
width: 200px;
margin-left: 2px;
- margin-top: -2px;
+ margin-top: -10px;
}
</style>
</head>
@@ -43,7 +46,7 @@
<div id="region2" class="region"></div>
<div id="overflow">X X X X X X X</div>
</div>
- <p style="margin-top: 12px;">Requires Ahem font. There are two regions with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The block content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box.</p>
+ <p style="margin-top: 20px;">Requires Ahem font. There are two regions with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The block content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box, it should start where the yellow border starts.</p>
<p>Bug <a href="" [CSS Regions][CSS Exclusions] shape-inside on regions should respect positioned shapes and overflow</p>
</body>
</html>
Modified: trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes.html (151651 => 151652)
--- trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes.html 2013-06-17 18:54:34 UTC (rev 151651)
+++ trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes.html 2013-06-17 20:23:58 UTC (rev 151652)
@@ -20,6 +20,7 @@
#region1 { -webkit-shape-inside: rectangle(50px, 50px, 100px, 100px); }
#region2 {
margin-top: 10px;
+ border-bottom: 10px solid yellow;
-webkit-shape-inside: rectangle(25px, 50px, 150px, 100px);
}
#border1 {
@@ -51,7 +52,7 @@
<div id="border2"></div>
<div id="region2" class="region"></div>
</div>
- <p style="margin-top: 50px;">Requires Ahem font. There are two regions with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The block content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box.</p>
+ <p style="margin-top: 50px;">Requires Ahem font. There are two regions with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The block content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box, it should start where the yellow border starts.</p>
<p>Bug <a href="" [CSS Regions][CSS Exclusions] shape-inside on regions should respect positioned shapes and overflow</p>
</body>
</html>
Modified: trunk/Source/WebCore/ChangeLog (151651 => 151652)
--- trunk/Source/WebCore/ChangeLog 2013-06-17 18:54:34 UTC (rev 151651)
+++ trunk/Source/WebCore/ChangeLog 2013-06-17 20:23:58 UTC (rev 151652)
@@ -1,3 +1,31 @@
+2013-06-17 Zoltan Horvath <[email protected]>
+
+ [CSS Shapes] Consider bottom borders when calculating the position of the overflow
+ https://bugs.webkit.org/show_bug.cgi?id=117663
+
+ Reviewed by Alexandru Chiculita.
+
+ When you have a shape and the content overflows from the shape we need to push the overflow below the content box,
+ not below the border box. We didn't consider the bottom borders of the content box, now I fixed it too and the overflow
+ just starts after the content box. I added a new helper function called pushShapeContentOverflowBelowTheContentBox. Now
+ both the shape in flow thread and the shape overflow use the same function. I added a new test and modified the existing
+ tests to cover all the affected cases.
+
+ Test: fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-block-content.html
+ Existing overflow tests also modified to test the behavior:
+ fast/exclusions/shape-inside/shape-inside-empty-expected.html
+ fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-block-content-expected.html
+ fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-block-content.html
+ fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions-expected.html
+ fast/exclusions/shape-inside/shape-inside-overflow-fixed-dimensions.html
+ fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes-expected.html
+ fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes.html
+
+ * rendering/RenderBlockLineLayout.cpp:
+ (WebCore::pushShapeContentOverflowBelowTheContentBox):
+ (WebCore::RenderBlock::updateShapeAndSegmentsForCurrentLine):
+ (WebCore::RenderBlock::updateShapeAndSegmentsForCurrentLineInFlowThread):
+
2013-06-17 Igor Oliveira <[email protected]>
[CSS Regions] ::before and ::after pseudo-elements are not displayed for regions
Modified: trunk/Source/WebCore/rendering/RenderBlockLineLayout.cpp (151651 => 151652)
--- trunk/Source/WebCore/rendering/RenderBlockLineLayout.cpp 2013-06-17 18:54:34 UTC (rev 151651)
+++ trunk/Source/WebCore/rendering/RenderBlockLineLayout.cpp 2013-06-17 20:23:58 UTC (rev 151652)
@@ -1652,24 +1652,37 @@
return shapeInsideInfo->shapeLogicalBottom();
}
+static inline void pushShapeContentOverflowBelowTheContentBox(RenderBlock* block, ShapeInsideInfo* shapeInsideInfo, LayoutUnit lineTop, LayoutUnit lineHeight, bool& lineOverflowsFromShapeInside)
+{
+ if (lineOverflowsFromShapeInside)
+ return;
+
+ LayoutUnit logicalLineBottom = lineTop + lineHeight;
+ LayoutUnit shapeContainingBlockHeight = shapeInsideInfo->shapeContainingBlockHeight();
+ if (logicalLineBottom <= shapeInsideInfo->shapeLogicalBottom() || !shapeContainingBlockHeight)
+ return;
+
+ LayoutUnit newLogicalHeight = block->logicalHeight() + (shapeContainingBlockHeight - (lineTop + shapeInsideInfo->owner()->borderAndPaddingAfter()));
+ block->setLogicalHeight(newLogicalHeight);
+
+ lineOverflowsFromShapeInside = true;
+}
+
void RenderBlock::updateShapeAndSegmentsForCurrentLine(ShapeInsideInfo*& shapeInsideInfo, LayoutUnit& absoluteLogicalTop, LineLayoutState& layoutState, bool& lineOverflowsFromShapeInside)
{
if (layoutState.flowThread())
return updateShapeAndSegmentsForCurrentLineInFlowThread(shapeInsideInfo, layoutState, lineOverflowsFromShapeInside);
- if (!shapeInsideInfo)
+ if (!shapeInsideInfo || lineOverflowsFromShapeInside)
return;
LayoutUnit lineTop = logicalHeight() + absoluteLogicalTop;
+ LayoutUnit lineHeight = this->lineHeight(layoutState.lineInfo().isFirstLine(), isHorizontalWritingMode() ? HorizontalLine : VerticalLine, PositionOfInteriorLineBoxes);
+
// FIXME: Bug 95361: It is possible for a line to grow beyond lineHeight, in which case these segments may be incorrect.
- shapeInsideInfo->computeSegmentsForLine(lineTop, lineHeight(layoutState.lineInfo().isFirstLine(), isHorizontalWritingMode() ? HorizontalLine : VerticalLine, PositionOfInteriorLineBoxes));
+ shapeInsideInfo->computeSegmentsForLine(lineTop, lineHeight);
- // The overflow should be pushed below the content box
- LayoutUnit shapeContainingBlockHeight = shapeInsideInfo->shapeContainingBlockHeight();
- if (!shapeInsideInfo->lineWithinShapeBounds() && !lineOverflowsFromShapeInside && shapeContainingBlockHeight) {
- lineOverflowsFromShapeInside = true;
- setLogicalHeight(shapeContainingBlockHeight);
- }
+ pushShapeContentOverflowBelowTheContentBox(this, shapeInsideInfo, lineTop, lineHeight, lineOverflowsFromShapeInside);
}
void RenderBlock::updateShapeAndSegmentsForCurrentLineInFlowThread(ShapeInsideInfo*& shapeInsideInfo, LineLayoutState& layoutState, bool& lineOverflowsFromShapeInside)
@@ -1713,6 +1726,7 @@
setLogicalHeight(logicalHeight() + deltaToNextRegion);
currentRegion = nextRegion;
+ lineOverflowsFromShapeInside = false;
logicalLineTopInFlowThread = logicalHeight() + offsetFromLogicalTopOfFirstPage();
logicalLineBottomInFlowThread = logicalLineTopInFlowThread + lineHeight;
@@ -1740,12 +1754,8 @@
LayoutUnit lineTop = logicalLineTopInFlowThread - currentRegion->logicalTopForFlowThreadContent() + currentRegion->borderAndPaddingBefore();
shapeInsideInfo->computeSegmentsForLine(lineTop, lineHeight);
- // Overflow from last shape on last region should be pushed below the content box
- if (currentRegion->isLastRegion() && !lineOverflowsFromShapeInside && (lineTop + lineHeight) > shapeInsideInfo->shapeLogicalBottom()) {
- lineOverflowsFromShapeInside = true;
- LayoutUnit newLogicalHeight = this->logicalHeight() + (shapeInsideInfo->shapeContainingBlockHeight() - (lineTop + currentRegion->borderAndPaddingAfter()));
- setLogicalHeight(newLogicalHeight);
- }
+ if (currentRegion->isLastRegion())
+ pushShapeContentOverflowBelowTheContentBox(this, shapeInsideInfo, lineTop, lineHeight, lineOverflowsFromShapeInside);
}
bool RenderBlock::adjustLogicalLineTopAndLogicalHeightIfNeeded(ShapeInsideInfo* shapeInsideInfo, LayoutUnit absoluteLogicalTop, LineLayoutState& layoutState, InlineBidiResolver& resolver, FloatingObject* lastFloatFromPreviousLine, InlineIterator& end, WordMeasurements& wordMeasurements)
