https://bugs.webkit.org/show_bug.cgi?id=3352
Reviewed by Brent Fulgham.
Source/WebCore:
Respect "right" text-alignment only if the width of the child does not overflow the
width of its containing block. This makes our margin computation more closely conform
to section "Block-level, non-replaced elements in normal flow" of the CSS 2.1
spec., <http://www.w3.org/TR/CSS21/>, and to the behavior observed in Firefox, Chrome,
IE version 9 or later and Microsoft Edge.
Test: fast/block/align-overflow-child.html
* rendering/RenderBox.cpp:
(WebCore::RenderBox::computeInlineDirectionMargins):
LayoutTests:
Add a new test that is derived from the test LayoutTests/fast/block/align-bigger-child.html included
in <https://src.chromium.org/viewvc/blink?revision=187157&view=revision>.
Also update expected results of existing tests.
* fast/block/align-overflow-child-expected.txt: Added.
* fast/block/align-overflow-child.html: Added.
* platform/efl/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt:
* platform/gtk/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt:
* platform/ios-simulator/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt:
* platform/mac/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt:
* platform/win/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt:
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@205489
268f45cc-cd09-0410-ab3c-
d52691b4dbfc
+2016-09-06 Daniel Bates <dabates@apple.com>
+
+ <table> inside <div align="right"> with large content inside = no scrollbar
+ https://bugs.webkit.org/show_bug.cgi?id=3352
+
+ Reviewed by Brent Fulgham.
+
+ Add a new test that is derived from the test LayoutTests/fast/block/align-bigger-child.html included
+ in <https://src.chromium.org/viewvc/blink?revision=187157&view=revision>.
+
+ Also update expected results of existing tests.
+
+ * fast/block/align-overflow-child-expected.txt: Added.
+ * fast/block/align-overflow-child.html: Added.
+ * platform/efl/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt:
+ * platform/gtk/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt:
+ * platform/ios-simulator/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt:
+ * platform/mac/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt:
+ * platform/win/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt:
+
2016-09-06 Commit Queue <commit-queue@webkit.org>
Unreviewed, rolling out r205480.
--- /dev/null
+This tests that HTML alignment behaves as expected when the child overflows its containing block.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS rtl_in_ltr_left.getBoundingClientRect().left is 0
+PASS ltr_in_ltr_left.getBoundingClientRect().left is 0
+PASS rtl_in_ltr_right.getBoundingClientRect().left is 0
+PASS ltr_in_ltr_right.getBoundingClientRect().left is 0
+PASS rtl_in_ltr_center.getBoundingClientRect().left is 0
+PASS ltr_in_ltr_center.getBoundingClientRect().left is 0
+PASS rtl_in_rtl_right.getBoundingClientRect().right is 100
+PASS ltr_in_rtl_right.getBoundingClientRect().right is 100
+PASS rtl_in_rtl_left.getBoundingClientRect().right is 100
+PASS ltr_in_rtl_left.getBoundingClientRect().right is 100
+PASS rtl_in_rtl_center.getBoundingClientRect().right is 100
+PASS ltr_in_rtl_center.getBoundingClientRect().right is 100
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+<style>
+body {
+ margin: 0px;
+}
+.narrow_block {
+ width: 100px;
+}
+.narrow_block > div {
+ background: yellow;
+ width: 200px;
+ height: 20px;
+ border: 1px solid black;
+}
+</style>
+</head>
+<body>
+<script>
+description("This tests that HTML alignment behaves as expected when the child overflows its containing block.");
+</script>
+
+<!-- Wider blocks inside the LTR block should be left-aligned regardless of align attribute -->
+<div dir="ltr" align="left" class="narrow_block">
+ <div dir="rtl" id="rtl_in_ltr_left"></div>
+ <div dir="ltr" id="ltr_in_ltr_left"></div>
+</div>
+
+<div dir="ltr" align="right" class="narrow_block">
+ <div dir="rtl" id="rtl_in_ltr_right"></div>
+ <div dir="ltr" id="ltr_in_ltr_right"></div>
+</div>
+
+<div dir="ltr" align="center" class="narrow_block">
+ <div dir="rtl" id="rtl_in_ltr_center"></div>
+ <div dir="ltr" id="ltr_in_ltr_center"></div>
+</div>
+
+<!-- Wider blocks inside the RTL block should be right-aligned regardless of align attribute -->
+<div dir="rtl" align="right" class="narrow_block">
+ <div dir="rtl" id="rtl_in_rtl_right"></div>
+ <div dir="ltr" id="ltr_in_rtl_right"></div>
+</div>
+
+<div dir="rtl" align="left" class="narrow_block">
+ <div dir="rtl" id="rtl_in_rtl_left"></div>
+ <div dir="ltr" id="ltr_in_rtl_left"></div>
+</div>
+
+<div dir="rtl" align="center" class="narrow_block">
+ <div dir="rtl" id="rtl_in_rtl_center"></div>
+ <div dir="ltr" id="ltr_in_rtl_center"></div>
+</div>
+
+<script>
+rtl_in_ltr_left = document.getElementById("rtl_in_ltr_left");
+ltr_in_ltr_left = document.getElementById("ltr_in_ltr_left");
+shouldBe("rtl_in_ltr_left.getBoundingClientRect().left", "0");
+shouldBe("ltr_in_ltr_left.getBoundingClientRect().left", "0");
+
+rtl_in_ltr_right = document.getElementById("rtl_in_ltr_right");
+ltr_in_ltr_right = document.getElementById("ltr_in_ltr_right");
+shouldBe("rtl_in_ltr_right.getBoundingClientRect().left", "0");
+shouldBe("ltr_in_ltr_right.getBoundingClientRect().left", "0");
+
+rtl_in_ltr_center = document.getElementById("rtl_in_ltr_center");
+ltr_in_ltr_center = document.getElementById("ltr_in_ltr_center");
+shouldBe("rtl_in_ltr_center.getBoundingClientRect().left", "0");
+shouldBe("ltr_in_ltr_center.getBoundingClientRect().left", "0");
+
+rtl_in_rtl_right = document.getElementById("rtl_in_rtl_right");
+ltr_in_rtl_right = document.getElementById("ltr_in_rtl_right");
+shouldBe("rtl_in_rtl_right.getBoundingClientRect().right", "100");
+shouldBe("ltr_in_rtl_right.getBoundingClientRect().right", "100");
+
+rtl_in_rtl_left = document.getElementById("rtl_in_rtl_left");
+ltr_in_rtl_left = document.getElementById("ltr_in_rtl_left");
+shouldBe("rtl_in_rtl_left.getBoundingClientRect().right","100");
+shouldBe("ltr_in_rtl_left.getBoundingClientRect().right","100");
+
+rtl_in_rtl_center = document.getElementById("rtl_in_rtl_center");
+ltr_in_rtl_center = document.getElementById("ltr_in_rtl_center");
+shouldBe("rtl_in_rtl_center.getBoundingClientRect().right", "100");
+shouldBe("ltr_in_rtl_center.getBoundingClientRect().right", "100");
+</script>
+<script src="../../resources/js-test-post.js"></script>
+</body>
+</html>
text run at (2,2) width 21: "foo"
RenderTableCell {TD} at (121,46) size 76x16 [border: (1px inset #808080)] [r=0 c=1 rs=1 cs=1]
RenderBlock {DIV} at (60,2) size 13x12 [border: (1px solid #008000)]
- RenderBlock {DIV} at (-291,1) size 302x402 [border: (1px solid #FF0000)]
+ RenderBlock {DIV} at (1,1) size 302x402 [border: (1px solid #FF0000)]
RenderText {#text} at (293,1) size 8x17
text run at (293,1) width 8: "d"
text run at (2,3) width 21: "foo"
RenderTableCell {TD} at (121,46) size 76x16 [border: (1px inset #808080)] [r=0 c=1 rs=1 cs=1]
RenderBlock {DIV} at (60,2) size 13x12 [border: (1px solid #008000)]
- RenderBlock {DIV} at (-291,1) size 302x402 [border: (1px solid #FF0000)]
+ RenderBlock {DIV} at (1,1) size 302x402 [border: (1px solid #FF0000)]
RenderText {#text} at (293,1) size 8x17
text run at (293,1) width 8: "d"
text run at (2,2) width 22: "foo"
RenderTableCell {TD} at (121,46) size 76x16 [border: (1px inset #808080)] [r=0 c=1 rs=1 cs=1]
RenderBlock {DIV} at (60,2) size 13x12 [border: (1px solid #008000)]
- RenderBlock {DIV} at (-291,1) size 302x402 [border: (1px solid #FF0000)]
+ RenderBlock {DIV} at (1,1) size 302x402 [border: (1px solid #FF0000)]
RenderText {#text} at (293,1) size 8x19
text run at (293,1) width 8: "d"
text run at (2,2) width 22: "foo"
RenderTableCell {TD} at (121,46) size 76x16 [border: (1px inset #808080)] [r=0 c=1 rs=1 cs=1]
RenderBlock {DIV} at (60,2) size 13x12 [border: (1px solid #008000)]
- RenderBlock {DIV} at (-291,1) size 302x402 [border: (1px solid #FF0000)]
+ RenderBlock {DIV} at (1,1) size 302x402 [border: (1px solid #FF0000)]
RenderText {#text} at (293,1) size 8x18
text run at (293,1) width 8: "d"
text run at (2,2) width 21: "foo"
RenderTableCell {TD} at (121,46) size 76x16 [border: (1px inset #808080)] [r=0 c=1 rs=1 cs=1]
RenderBlock {DIV} at (60,2) size 13x12 [border: (1px solid #008000)]
- RenderBlock {DIV} at (-291,1) size 302x402 [border: (1px solid #FF0000)]
+ RenderBlock {DIV} at (1,1) size 302x402 [border: (1px solid #FF0000)]
RenderText {#text} at (293,1) size 8x18
text run at (293,1) width 8: "d"
2016-09-06 Daniel Bates <dabates@apple.com>
+ <table> inside <div align="right"> with large content inside = no scrollbar
+ https://bugs.webkit.org/show_bug.cgi?id=3352
+
+ Reviewed by Brent Fulgham.
+
+ Respect "right" text-alignment only if the width of the child does not overflow the
+ width of its containing block. This makes our margin computation more closely conform
+ to section "Block-level, non-replaced elements in normal flow" of the CSS 2.1
+ spec., <http://www.w3.org/TR/CSS21/>, and to the behavior observed in Firefox, Chrome,
+ IE version 9 or later and Microsoft Edge.
+
+ Test: fast/block/align-overflow-child.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::computeInlineDirectionMargins):
+
+2016-09-06 Daniel Bates <dabates@apple.com>
+
Remove EXTERN_C from WTF
https://bugs.webkit.org/show_bug.cgi?id=161090
// Case Three: The object is being pushed to the end of the containing block's available logical width.
bool pushToEndFromTextAlign = !marginEndLength.isAuto() && ((!containingBlockStyle.isLeftToRightDirection() && containingBlockStyle.textAlign() == WEBKIT_LEFT)
|| (containingBlockStyle.isLeftToRightDirection() && containingBlockStyle.textAlign() == WEBKIT_RIGHT));
- if ((marginStartLength.isAuto() && childWidth < containerWidth) || pushToEndFromTextAlign) {
+ if ((marginStartLength.isAuto() || pushToEndFromTextAlign) && childWidth < containerWidth) {
marginEnd = valueForLength(marginEndLength, containerWidth);
marginStart = containerWidth - childWidth - marginEnd;
return;