<table> inside <div align="right"> with large content inside = no scrollbar
authordbates@webkit.org <dbates@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 6 Sep 2016 17:20:58 +0000 (17:20 +0000)
committerdbates@webkit.org <dbates@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 6 Sep 2016 17:20:58 +0000 (17:20 +0000)
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

LayoutTests/ChangeLog
LayoutTests/fast/block/align-overflow-child-expected.txt [new file with mode: 0644]
LayoutTests/fast/block/align-overflow-child.html [new file with mode: 0644]
LayoutTests/platform/efl/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt
LayoutTests/platform/gtk/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt
LayoutTests/platform/ios-simulator/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt
LayoutTests/platform/mac/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt
LayoutTests/platform/win/tables/mozilla_expected_failures/marvin/table_overflow_td_align_right-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBox.cpp

index 609ab98..5468217 100644 (file)
@@ -1,3 +1,23 @@
+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.
diff --git a/LayoutTests/fast/block/align-overflow-child-expected.txt b/LayoutTests/fast/block/align-overflow-child-expected.txt
new file mode 100644 (file)
index 0000000..4cc2edc
--- /dev/null
@@ -0,0 +1,21 @@
+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
+
diff --git a/LayoutTests/fast/block/align-overflow-child.html b/LayoutTests/fast/block/align-overflow-child.html
new file mode 100644 (file)
index 0000000..353c5cf
--- /dev/null
@@ -0,0 +1,90 @@
+<!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>
index dea432a..67cc666 100644 (file)
@@ -11,6 +11,6 @@ layer at (0,0) size 800x126
                 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"
index 4bca6a1..8297e26 100644 (file)
@@ -11,6 +11,6 @@ layer at (0,0) size 800x126
                 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"
index 8f77c06..34e3111 100644 (file)
@@ -11,6 +11,6 @@ layer at (0,0) size 800x126
                 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"
index 292bc7f..5c07632 100644 (file)
@@ -11,6 +11,6 @@ layer at (0,0) size 800x126
                 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"
index 96fd526..9d8d2b7 100644 (file)
@@ -11,6 +11,6 @@ layer at (0,0) size 800x126
                 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"
index 7e943cf..0935042 100644 (file)
@@ -1,5 +1,23 @@
 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
 
index cba8f02..7168d84 100644 (file)
@@ -2676,7 +2676,7 @@ void RenderBox::computeInlineDirectionMargins(const RenderBlock& containingBlock
     // 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;