- Revision
- 150478
- Author
- [email protected]
- Date
- 2013-05-21 14:04:27 -0700 (Tue, 21 May 2013)
Log Message
[CSS Regions][CSS Exclusions] Multiple regions with shape-insides should respect positioned shapes and overflow
https://bugs.webkit.org/show_bug.cgi?id=115001
Reviewed by David Hyatt.
In r150375 I implemented the new overflow behavior for shape-inside on regions, but it covered only the simple cases
when you had only one region. This patch adds support for the new overflow behavior for multiple regions with multiple
positioned shape-insides and overflow.
Source/WebCore:
Tests: fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes.html
fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-multiple-shapes.html
* rendering/RenderBlockLineLayout.cpp:
(WebCore::RenderBlock::updateLineBoundariesForExclusions): Cover cases when content flows into the next region, update the
line segments for the overflow.
(WebCore::RenderBlock::adjustLogicalLineTopAndLogicalHeightIfNeeded): In flow thread case we don't want to adjust the height
in two places.
LayoutTests:
* fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes-expected.html: Added.
* fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes.html: Added.
* fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-multiple-shapes-expected.html: Added.
* fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-multiple-shapes.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (150477 => 150478)
--- trunk/LayoutTests/ChangeLog 2013-05-21 21:00:18 UTC (rev 150477)
+++ trunk/LayoutTests/ChangeLog 2013-05-21 21:04:27 UTC (rev 150478)
@@ -1,3 +1,19 @@
+2013-05-21 Zoltan Horvath <[email protected]>
+
+ [CSS Regions][CSS Exclusions] Multiple regions with shape-insides should respect positioned shapes and overflow
+ https://bugs.webkit.org/show_bug.cgi?id=115001
+
+ Reviewed by David Hyatt.
+
+ In r150375 I implemented the new overflow behavior for shape-inside on regions, but it covered only the simple cases
+ when you had only one region. This patch adds support for the new overflow behavior for multiple regions with multiple
+ positioned shape-insides and overflow.
+
+ * fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes-expected.html: Added.
+ * fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes.html: Added.
+ * fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-multiple-shapes-expected.html: Added.
+ * fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-multiple-shapes.html: Added.
+
2013-05-21 Brent Fulgham <[email protected]>
[Windows] Reenable storage tests
Added: trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes-expected.html (0 => 150478)
--- trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes-expected.html (rev 0)
+++ trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes-expected.html 2013-05-21 21:04:27 UTC (rev 150478)
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <style>
+ #page {
+ font: 20px Ahem, sans-serif;
+ line-height: 20px;
+ }
+ .region {
+ width: 200px;
+ height: 200px;
+ border: 2px solid green;
+ }
+ #region2 { margin-top: 10px; }
+ #border1 {
+ position: absolute;
+ top: 58px;
+ left: 58px;
+ width: 100px;
+ height: 100px;
+ border: 2px solid blue;
+ }
+ #border2 {
+ position: absolute;
+ top: 272px;
+ left: 33px;
+ width: 140px;
+ height: 100px;
+ border: 2px solid blue;
+ }
+ #overflow {
+ width: 200px;
+ margin-left: 2px;
+ margin-top: -2px;
+ }
+ </style>
+</head>
+<body>
+ <div id="page">
+ <div id="border1">X X <p>X X X X X<p></div>
+ <div id="region1" class="region"></div>
+ <div id="border2">X<p>X X X X</p><p>X X X X</p></div>
+ <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>Bug <a href="" [CSS Regions][CSS Exclusions] shape-inside on regions should respect positioned shapes and overflow</p>
+</body>
+</html>
Added: trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes.html (0 => 150478)
--- trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes.html (rev 0)
+++ trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes.html 2013-05-21 21:04:27 UTC (rev 150478)
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <script>
+ if (window.internals)
+ window.internals.settings.setCSSExclusionsEnabled(true);
+ </script>
+ <style>
+ #rectangle {
+ font: 20px Ahem, sans-serif;
+ line-height: 20px;
+ -webkit-flow-into: flow;
+ }
+ .region {
+ -webkit-flow-from: flow;
+ width: 200px;
+ height: 200px;
+ border: 2px solid green;
+ }
+ #region1 { -webkit-shape-inside: rectangle(50px, 50px, 100px, 100px); }
+ #region2 {
+ margin-top: 10px;
+ -webkit-shape-inside: rectangle(25px, 50px, 150px, 100px);
+ }
+ #border1 {
+ position: absolute;
+ top: 58px;
+ left: 58px;
+ width: 100px;
+ height: 100px;
+ border: 2px solid blue;
+ }
+ #border2 {
+ position: absolute;
+ top: 272px;
+ left: 33px;
+ width: 140px;
+ height: 100px;
+ border: 2px solid blue;
+ }
+ </style>
+</head>
+<body>
+ <div id="rectangle">
+ X X <p>X X X X X<p> X</p></p> X X X X<p> X X X X X X X X X X X
+ </div>
+
+ <div id="page">
+ <div id="border1"></div>
+ <div id="region1" class="region"></div>
+ <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>Bug <a href="" [CSS Regions][CSS Exclusions] shape-inside on regions should respect positioned shapes and overflow</p>
+</body>
+</html>
Added: trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-multiple-shapes-expected.html (0 => 150478)
--- trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-multiple-shapes-expected.html (rev 0)
+++ trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-multiple-shapes-expected.html 2013-05-21 21:04:27 UTC (rev 150478)
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <style>
+ #page {
+ font: 20px Ahem, sans-serif;
+ line-height: 20px;
+ }
+ .region {
+ width: 200px;
+ height: 200px;
+ border: 2px solid green;
+ }
+ #region2 { margin-top: 10px; }
+ #border1 {
+ position: absolute;
+ top: 58px;
+ left: 58px;
+ width: 100px;
+ height: 100px;
+ border: 2px solid blue;
+ }
+ #border2 {
+ position: absolute;
+ top: 272px;
+ left: 33px;
+ width: 140px;
+ height: 100px;
+ border: 2px solid blue;
+ }
+ #overflow {
+ width: 200px;
+ margin-left: 2px;
+ margin-top: -2px;
+ }
+ </style>
+</head>
+<body>
+ <div id="page">
+ <div id="border1">X X X X X X X X X X X X X X X</div>
+ <div id="region1" class="region"></div>
+ <div id="border2">X X X X X X X X X X X X X X X X X X X X</div>
+ <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 inline content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box</p>
+ <p>Bug <a href="" [CSS Regions][CSS Exclusions] shape-inside on regions should respect positioned shapes and overflow</p>
+</body>
+</html>
Added: trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-multiple-shapes.html (0 => 150478)
--- trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-multiple-shapes.html (rev 0)
+++ trunk/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-multiple-shapes.html 2013-05-21 21:04:27 UTC (rev 150478)
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <script>
+ if (window.internals)
+ window.internals.settings.setCSSExclusionsEnabled(true);
+ </script>
+ <style>
+ #rectangle {
+ font: 20px Ahem, sans-serif;
+ line-height: 20px;
+ -webkit-flow-into: flow;
+ }
+ .region {
+ -webkit-flow-from: flow;
+ width: 200px;
+ height: 200px;
+ border: 2px solid green;
+ }
+ #region1 { -webkit-shape-inside: rectangle(50px, 50px, 100px, 100px); }
+ #region2 {
+ margin-top: 10px;
+ -webkit-shape-inside: rectangle(25px, 50px, 140px, 100px);
+ }
+ #border1 {
+ position: absolute;
+ top: 58px;
+ left: 58px;
+ width: 100px;
+ height: 100px;
+ border: 2px solid blue;
+ }
+ #border2 {
+ position: absolute;
+ top: 272px;
+ left: 33px;
+ width: 140px;
+ height: 100px;
+ border: 2px solid blue;
+ }
+ </style>
+</head>
+<body>
+ <div id="rectangle">
+ X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
+ </div>
+
+ <div id="page">
+ <div id="border1"></div>
+ <div id="region1" class="region"></div>
+ <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 inline content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box</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 (150477 => 150478)
--- trunk/Source/WebCore/ChangeLog 2013-05-21 21:00:18 UTC (rev 150477)
+++ trunk/Source/WebCore/ChangeLog 2013-05-21 21:04:27 UTC (rev 150478)
@@ -1,3 +1,23 @@
+2013-05-21 Zoltan Horvath <[email protected]>
+
+ [CSS Regions][CSS Exclusions] Multiple regions with shape-insides should respect positioned shapes and overflow
+ https://bugs.webkit.org/show_bug.cgi?id=115001
+
+ Reviewed by David Hyatt.
+
+ In r150375 I implemented the new overflow behavior for shape-inside on regions, but it covered only the simple cases
+ when you had only one region. This patch adds support for the new overflow behavior for multiple regions with multiple
+ positioned shape-insides and overflow.
+
+ Tests: fast/regions/shape-inside/shape-inside-on-regions-block-content-overflow-multiple-shapes.html
+ fast/regions/shape-inside/shape-inside-on-regions-inline-content-overflow-multiple-shapes.html
+
+ * rendering/RenderBlockLineLayout.cpp:
+ (WebCore::RenderBlock::updateLineBoundariesForExclusions): Cover cases when content flows into the next region, update the
+ line segments for the overflow.
+ (WebCore::RenderBlock::adjustLogicalLineTopAndLogicalHeightIfNeeded): In flow thread case we don't want to adjust the height
+ in two places.
+
2013-05-21 Commit Queue <[email protected]>
Unreviewed, rolling out r150425.
Modified: trunk/Source/WebCore/rendering/RenderBlockLineLayout.cpp (150477 => 150478)
--- trunk/Source/WebCore/rendering/RenderBlockLineLayout.cpp 2013-05-21 21:00:18 UTC (rev 150477)
+++ trunk/Source/WebCore/rendering/RenderBlockLineLayout.cpp 2013-05-21 21:04:27 UTC (rev 150478)
@@ -1673,16 +1673,33 @@
// The overflow should be pushed below the content box
LayoutUnit shapeContainingBlockHeight = exclusionShapeInsideInfo->shapeContainingBlockHeight();
if (!exclusionShapeInsideInfo->lineWithinShapeBounds() && !lineOverflowsFromShapeInside && shapeContainingBlockHeight) {
- LayoutUnit newHeight = shapeContainingBlockHeight;
+ lineOverflowsFromShapeInside = true;
+ LayoutUnit newLogicalHeight = shapeContainingBlockHeight;
if (layoutState.flowThread()) {
// If block contents flown across multiple regions and the shape-inside was applied on the second region we can end up with negative lineTop
if (lineTop < 0)
return;
- newHeight = logicalHeight + shapeContainingBlockHeight - lineTop - currentRegion->borderAndPaddingBefore();
+
+ newLogicalHeight = logicalHeight + shapeContainingBlockHeight - lineTop - currentRegion->borderAndPaddingBefore();
+
+ RenderRegion* nextRegion = regionAtBlockOffset(newLogicalHeight);
+ ExclusionShapeInsideInfo* nextShapeInfo = 0;
+ if (nextRegion)
+ nextShapeInfo = nextRegion->exclusionShapeInsideInfo();
+
+ // The overflow flows into another region with shape-inside
+ if (currentRegion != nextRegion && nextShapeInfo) {
+ newLogicalHeight += nextShapeInfo->shapeLogicalTop() - nextRegion->borderAndPaddingBefore();
+
+ LayoutUnit offset = nextShapeInfo->shapeLogicalTop() - nextRegion->borderAndPaddingBefore();
+ nextShapeInfo->computeSegmentsForLine(offset, lineHeight);
+
+ exclusionShapeInsideInfo = nextShapeInfo;
+ lineOverflowsFromShapeInside = false;
+ }
}
- setLogicalHeight(newHeight);
- lineOverflowsFromShapeInside = true;
+ setLogicalHeight(newLogicalHeight);
}
}
@@ -1693,9 +1710,8 @@
return false;
LayoutUnit newLogicalHeight = adjustedLogicalLineTop - absoluteLogicalTop;
- RenderRegion* currentRegion = regionAtBlockOffset(logicalHeight());
if (layoutState.flowThread())
- newLogicalHeight -= currentRegion->logicalTopForFlowThreadContent();
+ newLogicalHeight = logicalHeight();
end = restartLayoutRunsAndFloatsInRange(logicalHeight(), newLogicalHeight, lastFloatFromPreviousLine, resolver, end);
return true;
