Log Message
Source/WebCore: Positioned replaced elements should resolve vertical margins against their containing block's logical width https://bugs.webkit.org/show_bug.cgi?id=103579
Patch by Bear Travis <betra...@adobe.com> on 2012-12-13 Reviewed by Emil A Eklund. According to the CSS box model & writing modes specifications, percentage margin & padding values, including top & bottom, should be resolved based on the containing block's logical width (logical with respect to the containing block's writing mode). http://www.w3.org/TR/CSS2/box.html#margin-properties http://dev.w3.org/csswg/css3-writing-modes/#dimension-mapping Previously, a positioned replaced element resolved margin before/after relative to its inline direction (containerLogicalHeight), and margin start/end relative to its block direction (containerLogicalWidth). This patch measures the container's logical width in its own inline direction (containerRelativeLogicalWidth) to resolve all margin percentage values. Test: fast/writing-mode/percentage-margins-absolute-replaced.html * rendering/RenderBox.cpp: (WebCore::RenderBox::computePositionedLogicalWidthReplaced): Calculate the logical width of the container, and use it to calculate margins. (WebCore::RenderBox::computePositionedLogicalHeightReplaced): Ditto. LayoutTests: Positioned replaced elements should resolve vertical margins against their containing block's logical width https://bugs.webkit.org/show_bug.cgi?id=103579 Patch by Bear Travis <betra...@adobe.com> on 2012-12-13 Reviewed by Emil A Eklund. Test that different writing mode combinations between a parent and child correctly compute percentage margins for an absolutely positioned replaced child. * fast/writing-mode/percentage-margins-absolute-replaced-expected.txt: Added. * fast/writing-mode/percentage-margins-absolute-replaced.html: Added.
Modified Paths
- trunk/LayoutTests/ChangeLog
- trunk/Source/WebCore/ChangeLog
- trunk/Source/WebCore/rendering/RenderBox.cpp
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (137694 => 137695)
--- trunk/LayoutTests/ChangeLog 2012-12-14 02:12:05 UTC (rev 137694)
+++ trunk/LayoutTests/ChangeLog 2012-12-14 02:13:33 UTC (rev 137695)
@@ -1,3 +1,17 @@
+2012-12-13 Bear Travis <betra...@adobe.com>
+
+ Positioned replaced elements should resolve vertical margins against their
+ containing block's logical width
+ https://bugs.webkit.org/show_bug.cgi?id=103579
+
+ Reviewed by Emil A Eklund.
+
+ Test that different writing mode combinations between a parent and child correctly
+ compute percentage margins for an absolutely positioned replaced child.
+
+ * fast/writing-mode/percentage-margins-absolute-replaced-expected.txt: Added.
+ * fast/writing-mode/percentage-margins-absolute-replaced.html: Added.
+
2012-12-13 Rick Byers <rby...@chromium.org>
Layout Test fast/events/mouse-cursor-image-set.html is flaky
Added: trunk/LayoutTests/fast/writing-mode/percentage-margins-absolute-replaced-expected.txt (0 => 137695)
--- trunk/LayoutTests/fast/writing-mode/percentage-margins-absolute-replaced-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/writing-mode/percentage-margins-absolute-replaced-expected.txt 2012-12-14 02:13:33 UTC (rev 137695)
@@ -0,0 +1,18 @@
+Percentage margins on absolutely positioned replaced elements are relative to the container's logical width.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+PASS "10px 20px 30px 40px" is "10px 20px 30px 40px"
+PASS "10px 20px 30px 40px" is "10px 20px 30px 40px"
+PASS "10px 20px 30px 40px" is "10px 20px 30px 40px"
+PASS "10px 20px 30px 40px" is "10px 20px 30px 40px"
+PASS "10px 20px 30px 40px" is "10px 20px 30px 40px"
+PASS "10px 20px 30px 40px" is "10px 20px 30px 40px"
+PASS "10px 20px 30px 40px" is "10px 20px 30px 40px"
+PASS "10px 20px 30px 40px" is "10px 20px 30px 40px"
+PASS "10px 20px 30px 40px" is "10px 20px 30px 40px"
+
Added: trunk/LayoutTests/fast/writing-mode/percentage-margins-absolute-replaced.html (0 => 137695)
--- trunk/LayoutTests/fast/writing-mode/percentage-margins-absolute-replaced.html (rev 0)
+++ trunk/LayoutTests/fast/writing-mode/percentage-margins-absolute-replaced.html 2012-12-14 02:13:33 UTC (rev 137695)
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=''></script>
+<script>
+description('Percentage margins on absolutely positioned replaced elements are relative to the container\'s logical width.');
+
+window._onload_ = function() {
+ var inners = document.querySelectorAll('.inner');
+ for (var i = 0; i < inners.length; i++) {
+ var inner = inners.item(i);
+ var style = getComputedStyle(inner);
+ shouldBe('"' + style.getPropertyValue('margin') + '"', '"10px 20px 30px 40px"');
+ }
+}
+</script>
+<style>
+.outer {
+ position: relative;
+ width: 100px;
+ height: 200px;
+}
+.inner {
+ position: absolute;
+ width: 40px;
+ height: 160px;
+ margin: 5% 10% 15% 20%;
+}
+.horizontal-tb {
+ -webkit-writing-mode: horizontal-tb;
+}
+.horizontal-tb > .inner {
+ margin: 10% 20% 30% 40%;
+}
+.vertical-lr {
+ -webkit-writing-mode: vertical-lr;
+}
+.vertical-rl {
+ -webkit-writing-mode: vertical-rl;
+}
+</style>
+</head>
+<body>
+<div class='outer horizontal-tb'>
+ <svg class='inner horizontal-tb'></svg>
+</div>
+
+<div class='outer horizontal-tb'>
+ <svg class='inner vertical-lr'></svg>
+</div>
+
+<div class='outer horizontal-tb'>
+ <svg class='inner vertical-rl'></svg>
+</div>
+
+<div class='outer vertical-lr'>
+ <svg class='inner horizontal-tb'></svg>
+</div>
+
+<div class='outer vertical-lr'>
+ <svg class='inner vertcial-lr'></svg>
+</div>
+
+<div class='outer vertical-lr'>
+ <svg class='inner vertical-rl'></svg>
+</div>
+
+<div class='outer vertical-rl'>
+ <svg class='inner horizontal-tb'></svg>
+</div>
+
+<div class='outer vertical-rl'>
+ <svg class='inner vertical-lr'></svg>
+</div>
+
+<div class='outer vertical-rl'>
+ <svg class='inner vertical-rl'></svg>
+</div>
+<script src=''></script>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (137694 => 137695)
--- trunk/Source/WebCore/ChangeLog 2012-12-14 02:12:05 UTC (rev 137694)
+++ trunk/Source/WebCore/ChangeLog 2012-12-14 02:13:33 UTC (rev 137695)
@@ -1,3 +1,31 @@
+2012-12-13 Bear Travis <betra...@adobe.com>
+
+ Positioned replaced elements should resolve vertical margins against their containing
+ block's logical width
+ https://bugs.webkit.org/show_bug.cgi?id=103579
+
+ Reviewed by Emil A Eklund.
+
+ According to the CSS box model & writing modes specifications, percentage margin
+ & padding values, including top & bottom, should be resolved based on the
+ containing block's logical width (logical with respect to the containing block's
+ writing mode).
+ http://www.w3.org/TR/CSS2/box.html#margin-properties
+ http://dev.w3.org/csswg/css3-writing-modes/#dimension-mapping
+
+ Previously, a positioned replaced element resolved margin before/after relative to
+ its inline direction (containerLogicalHeight), and margin start/end relative to
+ its block direction (containerLogicalWidth). This patch measures the container's
+ logical width in its own inline direction (containerRelativeLogicalWidth) to
+ resolve all margin percentage values.
+
+ Test: fast/writing-mode/percentage-margins-absolute-replaced.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::computePositionedLogicalWidthReplaced): Calculate the logical
+ width of the container, and use it to calculate margins.
+ (WebCore::RenderBox::computePositionedLogicalHeightReplaced): Ditto.
+
2012-12-13 Yoshifumi Inoue <yo...@chromium.org>
Handling autoscroll in EventHandler should be re-factor
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (137694 => 137695)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2012-12-14 02:12:05 UTC (rev 137694)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2012-12-14 02:13:33 UTC (rev 137695)
@@ -3361,6 +3361,7 @@
const RenderBoxModelObject* containerBlock = toRenderBoxModelObject(container());
const LayoutUnit containerLogicalWidth = containingBlockLogicalWidthForPositioned(containerBlock);
+ const LayoutUnit containerRelativeLogicalWidth = containingBlockLogicalWidthForPositioned(containerBlock, 0, 0, false);
// To match WinIE, in quirks mode use the parent's 'direction' property
// instead of the the container block's.
@@ -3445,28 +3446,28 @@
* that value.
\*-----------------------------------------------------------------------*/
} else if (logicalLeft.isAuto()) {
- marginLogicalLeftAlias = valueForLength(marginLogicalLeft, containerLogicalWidth, renderView);
- marginLogicalRightAlias = valueForLength(marginLogicalRight, containerLogicalWidth, renderView);
+ marginLogicalLeftAlias = valueForLength(marginLogicalLeft, containerRelativeLogicalWidth, renderView);
+ marginLogicalRightAlias = valueForLength(marginLogicalRight, containerRelativeLogicalWidth, renderView);
logicalRightValue = valueForLength(logicalRight, containerLogicalWidth, renderView);
// Solve for 'left'
logicalLeftValue = availableSpace - (logicalRightValue + marginLogicalLeftAlias + marginLogicalRightAlias);
} else if (logicalRight.isAuto()) {
- marginLogicalLeftAlias = valueForLength(marginLogicalLeft, containerLogicalWidth, renderView);
- marginLogicalRightAlias = valueForLength(marginLogicalRight, containerLogicalWidth, renderView);
+ marginLogicalLeftAlias = valueForLength(marginLogicalLeft, containerRelativeLogicalWidth, renderView);
+ marginLogicalRightAlias = valueForLength(marginLogicalRight, containerRelativeLogicalWidth, renderView);
logicalLeftValue = valueForLength(logicalLeft, containerLogicalWidth, renderView);
// Solve for 'right'
logicalRightValue = availableSpace - (logicalLeftValue + marginLogicalLeftAlias + marginLogicalRightAlias);
} else if (marginLogicalLeft.isAuto()) {
- marginLogicalRightAlias = valueForLength(marginLogicalRight, containerLogicalWidth, renderView);
+ marginLogicalRightAlias = valueForLength(marginLogicalRight, containerRelativeLogicalWidth, renderView);
logicalLeftValue = valueForLength(logicalLeft, containerLogicalWidth, renderView);
logicalRightValue = valueForLength(logicalRight, containerLogicalWidth, renderView);
// Solve for 'margin-left'
marginLogicalLeftAlias = availableSpace - (logicalLeftValue + logicalRightValue + marginLogicalRightAlias);
} else if (marginLogicalRight.isAuto()) {
- marginLogicalLeftAlias = valueForLength(marginLogicalLeft, containerLogicalWidth, renderView);
+ marginLogicalLeftAlias = valueForLength(marginLogicalLeft, containerRelativeLogicalWidth, renderView);
logicalLeftValue = valueForLength(logicalLeft, containerLogicalWidth, renderView);
logicalRightValue = valueForLength(logicalRight, containerLogicalWidth, renderView);
@@ -3474,8 +3475,8 @@
marginLogicalRightAlias = availableSpace - (logicalLeftValue + logicalRightValue + marginLogicalLeftAlias);
} else {
// Nothing is 'auto', just calculate the values.
- marginLogicalLeftAlias = valueForLength(marginLogicalLeft, containerLogicalWidth, renderView);
- marginLogicalRightAlias = valueForLength(marginLogicalRight, containerLogicalWidth, renderView);
+ marginLogicalLeftAlias = valueForLength(marginLogicalLeft, containerRelativeLogicalWidth, renderView);
+ marginLogicalRightAlias = valueForLength(marginLogicalRight, containerRelativeLogicalWidth, renderView);
logicalRightValue = valueForLength(logicalRight, containerLogicalWidth, renderView);
logicalLeftValue = valueForLength(logicalLeft, containerLogicalWidth, renderView);
// If the containing block is right-to-left, then push the left position as far to the right as possible
@@ -3529,6 +3530,7 @@
const RenderBoxModelObject* containerBlock = toRenderBoxModelObject(container());
const LayoutUnit containerLogicalHeight = containingBlockLogicalHeightForPositioned(containerBlock);
+ const LayoutUnit containerRelativeLogicalWidth = containingBlockLogicalWidthForPositioned(containerBlock, 0, 0, false);
// Variables to solve.
Length marginBefore = style()->marginBefore();
@@ -3595,29 +3597,29 @@
* for that value.
\*-----------------------------------------------------------------------*/
} else if (logicalTop.isAuto()) {
- marginBeforeAlias = valueForLength(marginBefore, containerLogicalHeight, renderView);
- marginAfterAlias = valueForLength(marginAfter, containerLogicalHeight, renderView);
+ marginBeforeAlias = valueForLength(marginBefore, containerRelativeLogicalWidth, renderView);
+ marginAfterAlias = valueForLength(marginAfter, containerRelativeLogicalWidth, renderView);
logicalBottomValue = valueForLength(logicalBottom, containerLogicalHeight, renderView);
// Solve for 'top'
logicalTopValue = availableSpace - (logicalBottomValue + marginBeforeAlias + marginAfterAlias);
} else if (logicalBottom.isAuto()) {
- marginBeforeAlias = valueForLength(marginBefore, containerLogicalHeight, renderView);
- marginAfterAlias = valueForLength(marginAfter, containerLogicalHeight, renderView);
+ marginBeforeAlias = valueForLength(marginBefore, containerRelativeLogicalWidth, renderView);
+ marginAfterAlias = valueForLength(marginAfter, containerRelativeLogicalWidth, renderView);
logicalTopValue = valueForLength(logicalTop, containerLogicalHeight, renderView);
// Solve for 'bottom'
// NOTE: It is not necessary to solve for 'bottom' because we don't ever
// use the value.
} else if (marginBefore.isAuto()) {
- marginAfterAlias = valueForLength(marginAfter, containerLogicalHeight, renderView);
+ marginAfterAlias = valueForLength(marginAfter, containerRelativeLogicalWidth, renderView);
logicalTopValue = valueForLength(logicalTop, containerLogicalHeight, renderView);
logicalBottomValue = valueForLength(logicalBottom, containerLogicalHeight, renderView);
// Solve for 'margin-top'
marginBeforeAlias = availableSpace - (logicalTopValue + logicalBottomValue + marginAfterAlias);
} else if (marginAfter.isAuto()) {
- marginBeforeAlias = valueForLength(marginBefore, containerLogicalHeight, renderView);
+ marginBeforeAlias = valueForLength(marginBefore, containerRelativeLogicalWidth, renderView);
logicalTopValue = valueForLength(logicalTop, containerLogicalHeight, renderView);
logicalBottomValue = valueForLength(logicalBottom, containerLogicalHeight, renderView);
@@ -3625,8 +3627,8 @@
marginAfterAlias = availableSpace - (logicalTopValue + logicalBottomValue + marginBeforeAlias);
} else {
// Nothing is 'auto', just calculate the values.
- marginBeforeAlias = valueForLength(marginBefore, containerLogicalHeight, renderView);
- marginAfterAlias = valueForLength(marginAfter, containerLogicalHeight, renderView);
+ marginBeforeAlias = valueForLength(marginBefore, containerRelativeLogicalWidth, renderView);
+ marginAfterAlias = valueForLength(marginAfter, containerRelativeLogicalWidth, renderView);
logicalTopValue = valueForLength(logicalTop, containerLogicalHeight, renderView);
// NOTE: It is not necessary to solve for 'bottom' because we don't ever
// use the value.
_______________________________________________ webkit-changes mailing list webkit-changes@lists.webkit.org http://lists.webkit.org/mailman/listinfo/webkit-changes
