- Revision
- 137920
- Author
- [email protected]
- Date
- 2012-12-17 10:27:28 -0800 (Mon, 17 Dec 2012)
Log Message
[CSS Exclusions] Floats should respect shape-inside on exclusions
https://bugs.webkit.org/show_bug.cgi?id=89261
Patch by Bem Jones-Bey <[email protected]> on 2012-12-17
Reviewed by David Hyatt.
Source/WebCore:
Position floats properly with respect to an exclusion shape. Note that
this will not attempt to position floats in a polygon that has
multiple segments. In the multiple segment case, the floats will be
positioned as if the exclusion did not exist.
Updated an existing test case to test for this.
Test: fast/exclusions/shape-inside/shape-inside-floats-simple.html
* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::computeLogicalLocationForFloat): Adjust the
right and left offsets to take into account the right and left offset
contributed by the exclusion shape.
LayoutTests:
Update test to properly test floats with shape-inside.
* fast/exclusions/shape-inside/shape-inside-floats-simple-expected.html:
* fast/exclusions/shape-inside/shape-inside-floats-simple.html:
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (137919 => 137920)
--- trunk/LayoutTests/ChangeLog 2012-12-17 18:25:08 UTC (rev 137919)
+++ trunk/LayoutTests/ChangeLog 2012-12-17 18:27:28 UTC (rev 137920)
@@ -1,3 +1,15 @@
+2012-12-17 Bem Jones-Bey <[email protected]>
+
+ [CSS Exclusions] Floats should respect shape-inside on exclusions
+ https://bugs.webkit.org/show_bug.cgi?id=89261
+
+ Reviewed by David Hyatt.
+
+ Update test to properly test floats with shape-inside.
+
+ * fast/exclusions/shape-inside/shape-inside-floats-simple-expected.html:
+ * fast/exclusions/shape-inside/shape-inside-floats-simple.html:
+
2012-12-17 Antoine Quint <[email protected]>
Web Inspector: Provide the paint count of layers through the LayerTreeAgent
Modified: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-floats-simple-expected.html (137919 => 137920)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-floats-simple-expected.html 2012-12-17 18:25:08 UTC (rev 137919)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-floats-simple-expected.html 2012-12-17 18:27:28 UTC (rev 137920)
@@ -1,36 +1,40 @@
<!DOCTYPE html>
<html>
<head>
-<style>
- div {
- width: 200px;
- height: 200px;
+<script src=""
+<style id="stylesheet">
+ .container {
+ font: 10px/1 Ahem, sans-serif;
}
- #shape-inside {
- padding: 10px;
- position: relative;
+ .spacer {
+ width: 50px;
+ height: 50px;
+ background-color: green;
}
- #border {
- position: absolute;
- top: 8px;
- left: 8px;
- border: 2px solid blue;
+ .vertical-lr {
+ -webkit-writing-mode: vertical-lr;
}
- .spacer {
- width: 73px;
- height: 73px;
- border: 1px solid green;
+ .vertical-rl {
+ -webkit-writing-mode: vertical-rl;
}
</style>
+<script>
+ window._onload_ = function () {
+ var content = 'XXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\n<div class="spacer" style="float:right"></div>\n<div class="spacer" style="float:left"></div>\nXXXXX\nXXXXX\nXXXXX\nXXXXX\nXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX';
+ createRectangleTestResult('base', 'stylesheet', { height: 200, width: 200 }, { x: 25, y: 0, width: 150, height: 150 }, 'px', content);
+ createRectangleTestResult('rl', 'stylesheet', { height: 200, width: 200 }, { x: 0, y: 25, width: 150, height: 150 }, 'px', content);
+ createRectangleTestResult('lr', 'stylesheet', { height: 200, width: 200 }, { x: 0, y: 25, width: 150, height: 150 }, 'px', content);
+ };
+</script>
</head>
<body>
- <div id="shape-inside">
- <div id="border"></div>
- <div class="spacer" style="float:left"></div>
- <div class="spacer" style="float:right"></div>
- The blue box should contain a green square in both the upper left
- and upper right corners. This text should flow around the green squares,
- but within the blue outline.
+ <h1>The following tests should all be large black squares that contain two smaller green squares on the same line.</h1>
+ <h2>Standard left right writing mode</h2>
+ <div id="base" class="container">
</div>
+ <h2>Vertical Right Left writing mode</h2>
+ <div id="rl" class="container vertical-rl"></div>
+ <h2>Vertical Left Right writing mode</h2>
+ <div id="lr" class="container vertical-lr"></div>
</body>
</html>
Modified: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-floats-simple.html (137919 => 137920)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-floats-simple.html 2012-12-17 18:25:08 UTC (rev 137919)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-floats-simple.html 2012-12-17 18:27:28 UTC (rev 137920)
@@ -1,41 +1,40 @@
<!DOCTYPE html>
<html>
<head>
-<script>
- if (window.internals)
- window.internals.settings.setCSSExclusionsEnabled(true);
-</script>
-<style>
- div {
- width: 200px;
- height: 200px;
+<script src=""
+<style id="stylesheet">
+ .container {
+ font: 10px/1 Ahem, sans-serif;
}
- #shape-inside {
- padding: 10px;
- position: relative;
- -webkit-shape-inside: rectangle(0, 0, 200px, 200px);
+ .spacer {
+ width: 50px;
+ height: 50px;
+ background-color: green;
}
- #border {
- position: absolute;
- top: 8px;
- left: 8px;
- border: 2px solid blue;
+ .vertical-lr {
+ -webkit-writing-mode: vertical-lr;
}
- .spacer {
- width: 73px;
- height: 73px;
- border: 1px solid green;
+ .vertical-rl {
+ -webkit-writing-mode: vertical-rl;
}
</style>
+<script>
+ window._onload_ = function () {
+ var content = 'XXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\n<div class="spacer" style="float:right"></div>\n<div class="spacer" style="float:left"></div>\nXXXXX\nXXXXX\nXXXXX\nXXXXX\nXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX';
+ createRectangleTest('base', 'stylesheet', { height: 200, width: 200 }, { x: 25, y: 0, width: 150, height: 150 }, 'px', content);
+ createRectangleTest('rl', 'stylesheet', { height: 200, width: 200 }, { x: 0, y: 25, width: 150, height: 150 }, 'px', content);
+ createRectangleTest('lr', 'stylesheet', { height: 200, width: 200 }, { x: 0, y: 25, width: 150, height: 150 }, 'px', content);
+ };
+</script>
</head>
<body>
- <div id="shape-inside">
- <div id="border"></div>
- <div class="spacer" style="float:left"></div>
- <div class="spacer" style="float:right"></div>
- The blue box should contain a green square in both the upper left
- and upper right corners. This text should flow around the green squares,
- but within the blue outline.
+ <h1>The following tests should all be large black squares that contain two smaller green squares on the same line.</h1>
+ <h2>Standard left right writing mode</h2>
+ <div id="base" class="container">
</div>
+ <h2>Vertical Right Left writing mode</h2>
+ <div id="rl" class="container vertical-rl"></div>
+ <h2>Vertical Left Right writing mode</h2>
+ <div id="lr" class="container vertical-lr"></div>
</body>
</html>
Modified: trunk/Source/WebCore/ChangeLog (137919 => 137920)
--- trunk/Source/WebCore/ChangeLog 2012-12-17 18:25:08 UTC (rev 137919)
+++ trunk/Source/WebCore/ChangeLog 2012-12-17 18:27:28 UTC (rev 137920)
@@ -1,3 +1,23 @@
+2012-12-17 Bem Jones-Bey <[email protected]>
+
+ [CSS Exclusions] Floats should respect shape-inside on exclusions
+ https://bugs.webkit.org/show_bug.cgi?id=89261
+
+ Reviewed by David Hyatt.
+
+ Position floats properly with respect to an exclusion shape. Note that
+ this will not attempt to position floats in a polygon that has
+ multiple segments. In the multiple segment case, the floats will be
+ positioned as if the exclusion did not exist.
+
+ Updated an existing test case to test for this.
+ Test: fast/exclusions/shape-inside/shape-inside-floats-simple.html
+
+ * rendering/RenderBlock.cpp:
+ (WebCore::RenderBlock::computeLogicalLocationForFloat): Adjust the
+ right and left offsets to take into account the right and left offset
+ contributed by the exclusion shape.
+
2012-12-17 Antoine Quint <[email protected]>
GraphicsLayer's repaint count should update even when debugging option to show it is off
Modified: trunk/Source/WebCore/rendering/RenderBlock.cpp (137919 => 137920)
--- trunk/Source/WebCore/rendering/RenderBlock.cpp 2012-12-17 18:25:08 UTC (rev 137919)
+++ trunk/Source/WebCore/rendering/RenderBlock.cpp 2012-12-17 18:27:28 UTC (rev 137920)
@@ -3818,8 +3818,23 @@
LayoutPoint RenderBlock::computeLogicalLocationForFloat(const FloatingObject* floatingObject, LayoutUnit logicalTopOffset) const
{
RenderBox* childBox = floatingObject->renderer();
- LayoutUnit logicalRightOffset = logicalRightOffsetForContent(logicalTopOffset); // Constant part of right offset.
LayoutUnit logicalLeftOffset = logicalLeftOffsetForContent(logicalTopOffset); // Constant part of left offset.
+ LayoutUnit logicalRightOffset; // Constant part of right offset.
+#if ENABLE(CSS_EXCLUSIONS)
+ // FIXME Bug 102948: This only works for shape outside directly set on this block.
+ ExclusionShapeInsideInfo* shapeInsideInfo = exclusionShapeInsideInfo();
+ // FIXME Bug 102846: Take into account the height of the content. The offset should be
+ // equal to the maximum segment length.
+ if (shapeInsideInfo && shapeInsideInfo->hasSegments() && shapeInsideInfo->segments().size() == 1) {
+ // FIXME Bug 102949: Add support for shapes with multipe segments.
+
+ // The segment offsets are relative to the content box.
+ logicalRightOffset = logicalLeftOffset + shapeInsideInfo->segments()[0].logicalRight;
+ logicalLeftOffset += shapeInsideInfo->segments()[0].logicalLeft;
+ } else
+#endif
+ logicalRightOffset = logicalRightOffsetForContent(logicalTopOffset);
+
LayoutUnit floatLogicalWidth = min(logicalWidthForFloat(floatingObject), logicalRightOffset - logicalLeftOffset); // The width we look for.
LayoutUnit floatLogicalLeft;
