Diff
Modified: trunk/LayoutTests/ChangeLog (156345 => 156346)
--- trunk/LayoutTests/ChangeLog 2013-09-24 18:58:12 UTC (rev 156345)
+++ trunk/LayoutTests/ChangeLog 2013-09-24 19:02:59 UTC (rev 156346)
@@ -1,3 +1,19 @@
+2013-09-24 Bem Jones-Bey <bjone...@adobe.com>
+
+ Properly handle bottom margin on float with shape-outside
+ https://bugs.webkit.org/show_bug.cgi?id=121808
+
+ Reviewed by David Hyatt.
+
+ Import new tests for floats wish shape-outside and bottom margins.
+
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log:
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/resources/rounded-rectangle.js: Remove whitespace at ends of lines.
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html: Added.
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003-expected.html: Added.
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html: Added.
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log:
+
2013-09-24 Denis Nomiyama <d.nomiy...@samsung.com>
[ATK] Missing WTR AccessibilityController::addNotificationListener implementation
Modified: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/rounded-rectangle.js (156345 => 156346)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/rounded-rectangle.js 2013-09-24 18:58:12 UTC (rev 156345)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/rounded-rectangle.js 2013-09-24 19:02:59 UTC (rev 156346)
@@ -1,4 +1,4 @@
-function ellipseXIntercept(yi, rx, ry)
+function ellipseXIntercept(yi, rx, ry)
{
return rx * Math.sqrt(1 - (yi * yi) / (ry * ry));
}
@@ -38,10 +38,10 @@
{
var leftRoundedRect = args.roundedRect;
var leftRoundedRectIntervals = scanConvertRoundedRectangleOutside(leftRoundedRect, args.containerHeight, args.lineHeight);
- var leftFloatDivs = leftRoundedRectIntervals.map(function(interval) {
+ var leftFloatDivs = leftRoundedRectIntervals.map(function(interval) {
var width = SubPixelLayout.snapToLayoutUnit(interval.right);
var cls = "left-" + args.floatElementClassSuffix;
- return '<div class="' + cls + '" style="width:' + width + 'px"></div>';
+ return '<div class="' + cls + '" style="width:' + width + 'px"></div>';
});
document.getElementById("left-" + args.insertElementIdSuffix).insertAdjacentHTML('afterend', leftFloatDivs.join("\n"));
}
@@ -51,10 +51,10 @@
var rightRoundedRect = Object.create(args.roundedRect);
rightRoundedRect.x = args.containerWidth - args.roundedRect.width;
var rightRoundedRectIntervals = scanConvertRoundedRectangleOutside(rightRoundedRect, args.containerHeight, args.lineHeight);
- var rightFloatDivs = rightRoundedRectIntervals.map(function(interval) {
+ var rightFloatDivs = rightRoundedRectIntervals.map(function(interval) {
var width = args.containerWidth - SubPixelLayout.snapToLayoutUnit(interval.left);
var cls = "right-" + args.floatElementClassSuffix;
- return '<div class="' + cls + '" style="width:' + width + 'px"></div>';
+ return '<div class="' + cls + '" style="width:' + width + 'px"></div>';
});
document.getElementById("right-" + args.insertElementIdSuffix).insertAdjacentHTML('afterend', rightFloatDivs.join("\n"));
}
Modified: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log (156345 => 156346)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log 2013-09-24 18:58:12 UTC (rev 156345)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log 2013-09-24 19:02:59 UTC (rev 156346)
@@ -8,7 +8,7 @@
Do NOT modify or remove this file
------------------------------------------------------------------------
-Last Import: 2013-09-20 11:30
+Last Import: 2013-09-24 10:40
W3C Mercurial changeset: Not Available
Test status at time of import: unknown
------------------------------------------------------------------------
Added: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html (0 => 156346)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html (rev 0)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html 2013-09-24 19:02:59 UTC (rev 156346)
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats with a positive bottom margin</title>
+<link rel="author" title="Adobe" href=""
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+ font: 20px/1 Ahem, sans-serif;
+ line-height: 20px;
+ width: 100px;
+ height: 40px;
+ border: 1px solid black;
+ color: green;
+ display: inline-block;
+ background-color: red;
+}
+
+#float-left {
+ float: left;
+ width: 100px;
+ height: 20px;
+ -webkit-shape-outside: rectangle(0, 0, 50%, 100%);
+ margin-bottom: 20px;
+ background-color: green;
+}
+
+#float-right {
+ float: right;
+ width: 100px;
+ height: 20px;
+ -webkit-shape-outside: rectangle(0, 0, 50%, 100%);
+ margin-bottom: 20px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>This should display two green rectangles. You should not see any red.</p>
+ <div class="container">
+ <div id="float-left">
+ </div>
+ XXXXX
+ </div>
+ <div class="container">
+ <div id="float-right">
+ </div>
+ XXXXX
+ </div>
+</body>
Added: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003-expected.html (0 => 156346)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003-expected.html (rev 0)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003-expected.html 2013-09-24 19:02:59 UTC (rev 156346)
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Adobe" href=""
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+ font: 20px/1 Ahem, sans-serif;
+ line-height: 20px;
+ width: 100px;
+ height: 60px;
+ border: 1px solid black;
+ color: green;
+ display: inline-block;
+ background-color: red;
+}
+
+#float-left {
+ float: left;
+ width: 100px;
+ height: 20px;
+ background-color: green;
+}
+
+#float-right {
+ float: right;
+ width: 100px;
+ height: 20px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>This should display two green rectangles. You should not see any red.</p>
+ <div class="container">
+ XXXXX
+ <div id="float-left">
+ </div>
+ XXXXX
+ </div>
+ <div class="container">
+ XXXXX
+ <div id="float-right">
+ </div>
+ XXXXX
+ </div>
+</body>
Added: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html (0 => 156346)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html (rev 0)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html 2013-09-24 19:02:59 UTC (rev 156346)
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats with a positive bottom margin</title>
+<link rel="author" title="Adobe" href=""
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+ font: 20px/1 Ahem, sans-serif;
+ line-height: 20px;
+ width: 100px;
+ height: 60px;
+ border: 1px solid black;
+ color: green;
+ display: inline-block;
+ background-color: red;
+}
+
+#float-left {
+ float: left;
+ width: 100px;
+ height: 20px;
+ -webkit-shape-outside: rectangle(0, 0, 50%, 100%);
+ margin-top: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+
+#float-right {
+ float: right;
+ width: 100px;
+ height: 20px;
+ -webkit-shape-outside: rectangle(0, 0, 50%, 100%);
+ margin-top: 20px;
+ margin-bottom: 20px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>This should display two green rectangles. You should not see any red.</p>
+ <div class="container">
+ <div id="float-left">
+ </div>
+ XXXXX XXXXX
+ </div>
+ <div class="container">
+ <div id="float-right">
+ </div>
+ XXXXX XXXXX
+ </div>
+</body>
Added: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004-expected.html (0 => 156346)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004-expected.html (rev 0)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004-expected.html 2013-09-24 19:02:59 UTC (rev 156346)
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Adobe" href=""
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+ font: 20px/1 Ahem, sans-serif;
+ line-height: 20px;
+ width: 60px;
+ height: 100px;
+ border: 1px solid black;
+ color: green;
+ display: inline-block;
+ background-color: red;
+ -webkit-writing-mode: vertical-lr;
+}
+
+#float-left {
+ float: left;
+ width: 20px;
+ height: 100px;
+ background-color: green;
+}
+
+#float-right {
+ float: right;
+ width: 20px;
+ height: 100px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>This should display two green rectangles. You should not see any red.</p>
+ <div class="container">
+ XXXXX
+ <div id="float-left">
+ </div>
+ XXXXX
+ </div>
+ <div class="container">
+ XXXXX
+ <div id="float-right">
+ </div>
+ XXXXX
+ </div>
+</body>
Added: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004.html (0 => 156346)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004.html (rev 0)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004.html 2013-09-24 19:02:59 UTC (rev 156346)
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats with a positive bottom margin</title>
+<link rel="author" title="Adobe" href=""
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+ font: 20px/1 Ahem, sans-serif;
+ line-height: 20px;
+ width: 60px;
+ height: 100px;
+ border: 1px solid black;
+ color: green;
+ display: inline-block;
+ background-color: red;
+ -webkit-writing-mode: vertical-lr;
+}
+
+#float-left {
+ float: left;
+ width: 20px;
+ height: 100px;
+ -webkit-shape-outside: rectangle(0, 0, 100%, 100%);
+ margin-right: 20px;
+ background-color: green;
+}
+
+#float-right {
+ float: right;
+ width: 20px;
+ height: 100px;
+ -webkit-shape-outside: rectangle(0, 0, 100%, 100%);
+ margin-right: 20px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>This should display two green rectangles. You should not see any red.</p>
+ <div class="container">
+ XXXXX
+ <div id="float-left">
+ </div>
+ XXXXX
+ </div>
+ <div class="container">
+ XXXXX
+ <div id="float-right">
+ </div>
+ XXXXX
+ </div>
+</body>
Modified: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log (156345 => 156346)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log 2013-09-24 18:58:12 UTC (rev 156345)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log 2013-09-24 19:02:59 UTC (rev 156346)
@@ -8,7 +8,7 @@
Do NOT modify or remove this file
------------------------------------------------------------------------
-Last Import: 2013-09-20 11:30
+Last Import: 2013-09-24 10:40
W3C Mercurial changeset: Not Available
Test status at time of import: unknown
------------------------------------------------------------------------
@@ -42,6 +42,12 @@
/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-000.html
/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-001-expected.html
/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-001.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004.html
/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-000-expected.html
/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-000.html
/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-001-expected.html
Modified: trunk/Source/WebCore/ChangeLog (156345 => 156346)
--- trunk/Source/WebCore/ChangeLog 2013-09-24 18:58:12 UTC (rev 156345)
+++ trunk/Source/WebCore/ChangeLog 2013-09-24 19:02:59 UTC (rev 156346)
@@ -1,3 +1,32 @@
+2013-09-24 Bem Jones-Bey <bjone...@adobe.com>
+
+ Properly handle bottom margin on float with shape-outside
+ https://bugs.webkit.org/show_bug.cgi?id=121808
+
+ Reviewed by David Hyatt.
+
+ When a float has a shape-outside, inline content must conform to the
+ shape, not to the margin box. Thus, if a float with shape-outside has
+ a bottom margin and the shape does not intrude into that margin, then
+ the inline content should ignore the margin. Before this patch, inline
+ content would drop below the margin box instead of obeying the shape.
+
+ Note that content that should clear the float still clears the margin
+ box, not the shape's contour.
+
+ Tests: csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html
+ csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html
+ csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004.html
+
+ * rendering/LineWidth.cpp:
+ (WebCore::LineWidth::fitBelowFloats): Compute the logical bottom based
+ on the shape.
+ * rendering/RenderBlock.cpp:
+ (WebCore::RenderBlock::nextFloatLogicalBottomBelow): Add option to
+ compute the logical bottom based on the shape instead of on the margin
+ box.
+ * rendering/RenderBlock.h:
+
2013-09-24 Lorenzo Tilve <lti...@igalia.com>
[GTK] Fix compilation problems when setting ENABLE_DRAG_SUPPORT = FALSE
Modified: trunk/Source/WebCore/rendering/LineWidth.cpp (156345 => 156346)
--- trunk/Source/WebCore/rendering/LineWidth.cpp 2013-09-24 18:58:12 UTC (rev 156345)
+++ trunk/Source/WebCore/rendering/LineWidth.cpp 2013-09-24 19:02:59 UTC (rev 156346)
@@ -181,7 +181,7 @@
float newLineLeft = m_left;
float newLineRight = m_right;
while (true) {
- floatLogicalBottom = m_block.nextFloatLogicalBottomBelow(lastFloatLogicalBottom);
+ floatLogicalBottom = m_block.nextFloatLogicalBottomBelow(lastFloatLogicalBottom, ShapeOutsideFloatShapeOffset);
if (floatLogicalBottom <= lastFloatLogicalBottom)
break;
Modified: trunk/Source/WebCore/rendering/RenderBlock.cpp (156345 => 156346)
--- trunk/Source/WebCore/rendering/RenderBlock.cpp 2013-09-24 18:58:12 UTC (rev 156345)
+++ trunk/Source/WebCore/rendering/RenderBlock.cpp 2013-09-24 19:02:59 UTC (rev 156346)
@@ -3737,7 +3737,7 @@
return right;
}
-LayoutUnit RenderBlock::nextFloatLogicalBottomBelow(LayoutUnit logicalHeight) const
+LayoutUnit RenderBlock::nextFloatLogicalBottomBelow(LayoutUnit logicalHeight, ShapeOutsideFloatOffsetMode offsetMode) const
{
if (!m_floatingObjects)
return logicalHeight;
@@ -3747,7 +3747,14 @@
auto end = floatingObjectSet.end();
for (auto it = floatingObjectSet.begin(); it != end; ++it) {
FloatingObject* r = it->get();
- LayoutUnit floatBottom = r->logicalBottom(isHorizontalWritingMode());
+ LayoutUnit floatBottom;
+#if ENABLE(CSS_SHAPES)
+ ShapeOutsideInfo* shapeOutside = r->renderer().shapeOutsideInfo();
+ if (offsetMode == ShapeOutsideFloatShapeOffset && shapeOutside)
+ floatBottom = r->logicalTop(isHorizontalWritingMode()) + marginBeforeForChild(&(r->renderer())) + shapeOutside->shapeLogicalBottom();
+ else
+#endif
+ floatBottom = r->logicalBottom(isHorizontalWritingMode());
if (floatBottom > logicalHeight)
bottom = min(floatBottom, bottom);
}
Modified: trunk/Source/WebCore/rendering/RenderBlock.h (156345 => 156346)
--- trunk/Source/WebCore/rendering/RenderBlock.h 2013-09-24 18:58:12 UTC (rev 156345)
+++ trunk/Source/WebCore/rendering/RenderBlock.h 2013-09-24 19:02:59 UTC (rev 156346)
@@ -682,7 +682,7 @@
LayoutUnit addOverhangingFloats(RenderBlock* child, bool makeChildPaintOtherFloats);
LayoutUnit lowestFloatLogicalBottom(FloatingObject::Type = FloatingObject::FloatLeftRight) const;
- LayoutUnit nextFloatLogicalBottomBelow(LayoutUnit) const;
+ LayoutUnit nextFloatLogicalBottomBelow(LayoutUnit, ShapeOutsideFloatOffsetMode = ShapeOutsideFloatMarginBoxOffset) const;
void updateLocalFloatingObjectsForPaintingContainer(RenderBox* floatToUpdate, bool& didFindPaintContainer);
void updateFloatingObjectsPaintingContainer(RenderBox* floatToUpdate, bool& didFindPaintContainer);
