[iOS] <select> elements should render right-aligned when in RTL mode

https://bugs.webkit.org/show_bug.cgi?id=157501
<rdar://problem/26187870>

Reviewed by Antoine Quint.

Source/WebCore:

This is the equivalent of http://webkit.org/b/157112 for iOS.
Handle <select> elements when we're in RTL mode. This means
drawing the button with the drop-down arrow on the left
side, and the button text right-aligned.

Test: fast/forms/select-non-native-rendering-direction.html
plus a bunch of other ones that needed rebaselining.

* rendering/RenderThemeIOS.mm: Rename MenuListButtonPaddingRight to MenuListButtonPaddingAfter.
(WebCore::RenderThemeIOS::popupInternalPaddingBox): Handle both directions.
(WebCore::adjustInputElementButtonStyle):
(WebCore::RenderThemeIOS::paintMenuListButtonDecorations): Handle drawing in
RTL mode.

LayoutTests:

Rebaseline now that iOS is doing the right thing.

* platform/ios-simulator/fast/forms/select-non-native-rendering-direction-expected.txt:
* platform/ios-simulator/fast/forms/listbox-bidi-align-expected.txt:
* platform/ios-simulator/fast/forms/select-writing-direction-natural-expected.txt:
* platform/ios-simulator/fast/text/international/bidi-listbox-atsui-expected.txt:
* platform/ios-simulator/fast/text/international/bidi-listbox-expected.txt:
* platform/ios-simulator/fast/text/international/bidi-menulist-expected.txt:
* platform/ios-simulator/fast/text/international/pop-up-button-text-alignment-and-direction-expected.txt:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@200620 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index d8c4e40..1540bf1 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,21 @@
+2016-05-09  Dean Jackson  <dino@apple.com>
+
+        [iOS] <select> elements should render right-aligned when in RTL mode
+        https://bugs.webkit.org/show_bug.cgi?id=157501
+        <rdar://problem/26187870>
+
+        Reviewed by Antoine Quint.
+
+        Rebaseline now that iOS is doing the right thing.
+
+        * platform/ios-simulator/fast/forms/select-non-native-rendering-direction-expected.txt:
+        * platform/ios-simulator/fast/forms/listbox-bidi-align-expected.txt:
+        * platform/ios-simulator/fast/forms/select-writing-direction-natural-expected.txt:
+        * platform/ios-simulator/fast/text/international/bidi-listbox-atsui-expected.txt:
+        * platform/ios-simulator/fast/text/international/bidi-listbox-expected.txt:
+        * platform/ios-simulator/fast/text/international/bidi-menulist-expected.txt:
+        * platform/ios-simulator/fast/text/international/pop-up-button-text-alignment-and-direction-expected.txt:
+
 2016-05-10  Youenn Fablet  <youenn.fablet@crf.canon.fr>
 
         NodeList should be iterable

diff --git a/LayoutTests/platform/ios-simulator/fast/forms/listbox-bidi-align-expected.txt b/LayoutTests/platform/ios-simulator/fast/forms/listbox-bidi-align-expected.txt
index 4e9301c..b8d05e2 100644 (file)
--- a/LayoutTests/platform/ios-simulator/fast/forms/listbox-bidi-align-expected.txt
+++ b/LayoutTests/platform/ios-simulator/fast/forms/listbox-bidi-align-expected.txt
@@ -25,13 +25,13 @@ layer at (0,0) size 800x292
             RenderTableCell {TD} at (333,2) size 161x26 [r=0 c=2 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 155x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
                 RenderBlock (anonymous) at (6,3) size 143x14
-                  RenderText at (123,0) size 0x14
-                    text run at (123,0) width 0 RTL: " "
+                  RenderText at (143,0) size 0x14
+                    text run at (143,0) width 0 RTL: " "
             RenderTableCell {TD} at (496,2) size 166x26 [r=0 c=3 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 160x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
                 RenderBlock (anonymous) at (6,3) size 148x14
-                  RenderText at (128,0) size 0x14
-                    text run at (128,0) width 0 RTL: " "
+                  RenderText at (148,0) size 0x14
+                    text run at (148,0) width 0 RTL: " "
           RenderTableRow {TR} at (0,30) size 664x26
             RenderTableCell {TD} at (2,30) size 161x26 [r=1 c=0 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 155x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
@@ -52,23 +52,23 @@ layer at (0,0) size 800x292
             RenderTableCell {TD} at (2,2) size 168x26 [r=0 c=0 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 162x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
                 RenderBlock (anonymous) at (6,3) size 150x14
-                  RenderText at (130,0) size 0x14
-                    text run at (130,0) width 0 RTL: " "
+                  RenderText at (150,0) size 0x14
+                    text run at (150,0) width 0 RTL: " "
             RenderTableCell {TD} at (172,2) size 155x26 [r=0 c=1 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 149x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
                 RenderBlock (anonymous) at (6,3) size 137x14
-                  RenderText at (117,0) size 0x14
-                    text run at (117,0) width 0 RTL: " "
+                  RenderText at (137,0) size 0x14
+                    text run at (137,0) width 0 RTL: " "
             RenderTableCell {TD} at (329,2) size 168x26 [r=0 c=2 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 162x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
                 RenderBlock (anonymous) at (6,3) size 150x14
-                  RenderText at (130,0) size 0x14
-                    text run at (130,0) width 0 RTL: " "
+                  RenderText at (150,0) size 0x14
+                    text run at (150,0) width 0 RTL: " "
             RenderTableCell {TD} at (499,2) size 155x26 [r=0 c=3 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 149x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
                 RenderBlock (anonymous) at (6,3) size 137x14
-                  RenderText at (117,0) size 0x14
-                    text run at (117,0) width 0 RTL: " "
+                  RenderText at (137,0) size 0x14
+                    text run at (137,0) width 0 RTL: " "
           RenderTableRow {TR} at (0,30) size 656x26
             RenderTableCell {TD} at (2,30) size 168x26 [r=1 c=0 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 162x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
@@ -89,13 +89,13 @@ layer at (0,0) size 800x292
             RenderTableCell {TD} at (2,2) size 177x26 [r=0 c=0 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 171x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
                 RenderBlock (anonymous) at (6,3) size 159x14
-                  RenderText at (139,0) size 0x14
-                    text run at (139,0) width 0 RTL: " "
+                  RenderText at (159,0) size 0x14
+                    text run at (159,0) width 0 RTL: " "
             RenderTableCell {TD} at (181,2) size 164x26 [r=0 c=1 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 158x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
                 RenderBlock (anonymous) at (6,3) size 146x14
-                  RenderText at (126,0) size 0x14
-                    text run at (126,0) width 0 RTL: " "
+                  RenderText at (146,0) size 0x14
+                    text run at (146,0) width 0 RTL: " "
             RenderTableCell {TD} at (347,2) size 177x26 [r=0 c=2 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 171x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
                 RenderBlock (anonymous) at (6,3) size 159x14
@@ -115,8 +115,8 @@ layer at (0,0) size 800x292
             RenderTableCell {TD} at (2,2) size 173x26 [r=0 c=0 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 167x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
                 RenderBlock (anonymous) at (6,3) size 155x14
-                  RenderText at (135,0) size 0x14
-                    text run at (135,0) width 0 RTL: " "
+                  RenderText at (155,0) size 0x14
+                    text run at (155,0) width 0 RTL: " "
             RenderTableCell {TD} at (177,2) size 173x26 [r=0 c=1 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 167x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
                 RenderBlock (anonymous) at (6,3) size 155x14
@@ -125,8 +125,8 @@ layer at (0,0) size 800x292
             RenderTableCell {TD} at (352,2) size 189x26 [r=0 c=2 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 183x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
                 RenderBlock (anonymous) at (6,3) size 171x14
-                  RenderText at (151,0) size 0x14
-                    text run at (151,0) width 0 RTL: " "
+                  RenderText at (171,0) size 0x14
+                    text run at (171,0) width 0 RTL: " "
             RenderTableCell {TD} at (543,2) size 189x26 [r=0 c=3 rs=1 cs=1]
               RenderMenuList {SELECT} at (3,3) size 183x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
                 RenderBlock (anonymous) at (6,3) size 171x14

diff --git a/LayoutTests/platform/ios-simulator/fast/forms/select-non-native-rendering-direction-expected.txt b/LayoutTests/platform/ios-simulator/fast/forms/select-non-native-rendering-direction-expected.txt
index 34b0a82..ce0d7de 100644 (file)
--- a/LayoutTests/platform/ios-simulator/fast/forms/select-non-native-rendering-direction-expected.txt
+++ b/LayoutTests/platform/ios-simulator/fast/forms/select-non-native-rendering-direction-expected.txt
@@ -17,6 +17,6 @@ layer at (0,0) size 800x600
           text run at (666,1) width 118: "Right to left select"
         RenderMenuList {SELECT} at (544,2) size 112x20 [bgcolor=#FFFFFF02] [border: (1px solid #000000)]
           RenderBlock (anonymous) at (6,3) size 99x14
-            RenderText at (35,0) size 44x14
-              text run at (35,0) width 44: "Alabama"
+            RenderText at (55,0) size 44x14
+              text run at (55,0) width 44: "Alabama"
         RenderText {#text} at (0,0) size 0x0

diff --git a/LayoutTests/platform/ios-simulator/fast/forms/select-writing-direction-natural-expected.txt b/LayoutTests/platform/ios-simulator/fast/forms/select-writing-direction-natural-expected.txt
index 19cf4e0..495484d 100644 (file)
--- a/LayoutTests/platform/ios-simulator/fast/forms/select-writing-direction-natural-expected.txt
+++ b/LayoutTests/platform/ios-simulator/fast/forms/select-writing-direction-natural-expected.txt
@@ -79,58 +79,58 @@ layer at (0,0) size 800x600
         RenderBlock {DIV} at (0,0) size 784x24
           RenderMenuList {SELECT} at (222,2) size 70x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
             RenderBlock (anonymous) at (6,2) size 58x16
-              RenderText at (24,0) size 14x14
-                text run at (24,0) width 8: "A"
-                text run at (31,0) width 7 RTL: "\x{5D0}"
+              RenderText at (44,0) size 14x14
+                text run at (44,0) width 8: "A"
+                text run at (51,0) width 7 RTL: "\x{5D0}"
           RenderText {#text} at (218,0) size 4x19
             text run at (218,0) width 4 RTL: " "
           RenderMenuList {SELECT} at (148,2) size 70x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
             RenderBlock (anonymous) at (6,2) size 58x16
-              RenderText at (24,0) size 14x14
-                text run at (24,0) width 7 RTL: "\x{5D0}"
-                text run at (30,0) width 8: "A"
+              RenderText at (44,0) size 14x14
+                text run at (44,0) width 7 RTL: "\x{5D0}"
+                text run at (50,0) width 8: "A"
           RenderText {#text} at (144,0) size 4x19
             text run at (144,0) width 4 RTL: " "
           RenderMenuList {SELECT} at (74,2) size 70x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
             RenderBlock (anonymous) at (6,2) size 58x16
-              RenderText at (20,0) size 18x14
-                text run at (20,0) width 9: "A"
-                text run at (28,0) width 10 RTL: "(\x{5D0}"
+              RenderText at (40,0) size 18x14
+                text run at (40,0) width 9: "A"
+                text run at (48,0) width 10 RTL: "(\x{5D0}"
           RenderText {#text} at (70,0) size 4x19
             text run at (70,0) width 4 RTL: " "
           RenderMenuList {SELECT} at (0,2) size 70x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
             RenderBlock (anonymous) at (6,2) size 58x16
-              RenderText at (20,0) size 18x14
-                text run at (20,0) width 7 RTL: "\x{5D0}"
-                text run at (27,0) width 8: "A"
-                text run at (34,0) width 4 RTL: "("
+              RenderText at (40,0) size 18x14
+                text run at (40,0) width 7 RTL: "\x{5D0}"
+                text run at (47,0) width 8: "A"
+                text run at (54,0) width 4 RTL: "("
           RenderText {#text} at (0,0) size 0x0
         RenderBlock {DIV} at (0,24) size 784x24
           RenderMenuList {SELECT} at (714,2) size 70x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
             RenderBlock (anonymous) at (6,2) size 58x16
-              RenderText at (24,0) size 14x14
-                text run at (24,0) width 8: "A"
-                text run at (31,0) width 7 RTL: "\x{5D0}"
+              RenderText at (44,0) size 14x14
+                text run at (44,0) width 8: "A"
+                text run at (51,0) width 7 RTL: "\x{5D0}"
           RenderText {#text} at (710,0) size 4x19
             text run at (710,0) width 4 RTL: " "
           RenderMenuList {SELECT} at (640,2) size 70x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
             RenderBlock (anonymous) at (6,2) size 58x16
-              RenderText at (24,0) size 14x14
-                text run at (24,0) width 7 RTL: "\x{5D0}"
-                text run at (30,0) width 8: "A"
+              RenderText at (44,0) size 14x14
+                text run at (44,0) width 7 RTL: "\x{5D0}"
+                text run at (50,0) width 8: "A"
           RenderText {#text} at (636,0) size 4x19
             text run at (636,0) width 4 RTL: " "
           RenderMenuList {SELECT} at (566,2) size 70x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
             RenderBlock (anonymous) at (6,2) size 58x16
-              RenderText at (20,0) size 18x14
-                text run at (20,0) width 9: "A"
-                text run at (28,0) width 10 RTL: "(\x{5D0}"
+              RenderText at (40,0) size 18x14
+                text run at (40,0) width 9: "A"
+                text run at (48,0) width 10 RTL: "(\x{5D0}"
           RenderText {#text} at (562,0) size 4x19
             text run at (562,0) width 4 RTL: " "
           RenderMenuList {SELECT} at (492,2) size 70x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
             RenderBlock (anonymous) at (6,2) size 58x16
-              RenderText at (20,0) size 18x14
-                text run at (20,0) width 7 RTL: "\x{5D0}"
-                text run at (27,0) width 8: "A"
-                text run at (34,0) width 4 RTL: "("
+              RenderText at (40,0) size 18x14
+                text run at (40,0) width 7 RTL: "\x{5D0}"
+                text run at (47,0) width 8: "A"
+                text run at (54,0) width 4 RTL: "("
           RenderText {#text} at (0,0) size 0x0

diff --git a/LayoutTests/platform/ios-simulator/fast/text/international/bidi-listbox-atsui-expected.txt b/LayoutTests/platform/ios-simulator/fast/text/international/bidi-listbox-atsui-expected.txt
index 0afe983..69b9415 100644 (file)
--- a/LayoutTests/platform/ios-simulator/fast/text/international/bidi-listbox-atsui-expected.txt
+++ b/LayoutTests/platform/ios-simulator/fast/text/international/bidi-listbox-atsui-expected.txt
@@ -15,8 +15,8 @@ layer at (0,0) size 800x600
         RenderBR {BR} at (101,15) size 1x0
         RenderMenuList {SELECT} at (2,22) size 86x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
           RenderBlock (anonymous) at (6,3) size 74x14
-            RenderText at (54,0) size 0x14
-              text run at (54,0) width 0 RTL: " "
+            RenderText at (74,0) size 0x14
+              text run at (74,0) width 0 RTL: " "
         RenderBR {BR} at (90,36) size 0x0
       RenderBlock {DIV} at (0,100) size 100x20
         RenderText {#text} at (31,0) size 69x19

diff --git a/LayoutTests/platform/ios-simulator/fast/text/international/bidi-listbox-expected.txt b/LayoutTests/platform/ios-simulator/fast/text/international/bidi-listbox-expected.txt
index a077a5e..b5773f6 100644 (file)
--- a/LayoutTests/platform/ios-simulator/fast/text/international/bidi-listbox-expected.txt
+++ b/LayoutTests/platform/ios-simulator/fast/text/international/bidi-listbox-expected.txt
@@ -15,8 +15,8 @@ layer at (0,0) size 800x600
         RenderBR {BR} at (101,15) size 1x0
         RenderMenuList {SELECT} at (2,22) size 86x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
           RenderBlock (anonymous) at (6,3) size 74x14
-            RenderText at (54,0) size 0x14
-              text run at (54,0) width 0 RTL: " "
+            RenderText at (74,0) size 0x14
+              text run at (74,0) width 0 RTL: " "
         RenderBR {BR} at (90,36) size 0x0
       RenderBlock {DIV} at (0,100) size 100x20
         RenderText {#text} at (31,0) size 69x19

diff --git a/LayoutTests/platform/ios-simulator/fast/text/international/bidi-menulist-expected.txt b/LayoutTests/platform/ios-simulator/fast/text/international/bidi-menulist-expected.txt
index 9eb65aa..182555e 100644 (file)
--- a/LayoutTests/platform/ios-simulator/fast/text/international/bidi-menulist-expected.txt
+++ b/LayoutTests/platform/ios-simulator/fast/text/international/bidi-menulist-expected.txt
@@ -16,9 +16,9 @@ layer at (0,0) size 800x600
         RenderBR {BR} at (285,15) size 1x0
         RenderMenuList {SELECT} at (0,22) size 100x20 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
           RenderBlock (anonymous) at (6,2) size 88x16
-            RenderText at (14,0) size 54x14
-              text run at (14,0) width 37 RTL: "\x{5D0}\x{5E4}\x{5E8}\x{5E1}\x{5DE}\x{5D5}\x{5DF}"
-              text run at (50,0) width 18: "abc"
+            RenderText at (34,0) size 54x14
+              text run at (34,0) width 37 RTL: "\x{5D0}\x{5E4}\x{5E8}\x{5E1}\x{5DE}\x{5D5}\x{5DF}"
+              text run at (70,0) width 18: "abc"
         RenderBR {BR} at (100,35) size 0x0
       RenderBlock {DIV} at (0,120) size 100x20
         RenderText {#text} at (0,0) size 69x19

diff --git a/LayoutTests/platform/ios-simulator/fast/text/international/pop-up-button-text-alignment-and-direction-expected.txt b/LayoutTests/platform/ios-simulator/fast/text/international/pop-up-button-text-alignment-and-direction-expected.txt
index 7a0f607..c024fb6 100644 (file)
--- a/LayoutTests/platform/ios-simulator/fast/text/international/pop-up-button-text-alignment-and-direction-expected.txt
+++ b/LayoutTests/platform/ios-simulator/fast/text/international/pop-up-button-text-alignment-and-direction-expected.txt
@@ -55,12 +55,12 @@ layer at (0,0) size 800x634
       RenderBlock {DIV} at (0,324) size 784x286
         RenderMenuList {SELECT} at (0,0) size 500x29 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
           RenderBlock (anonymous) at (9,3) size 482x23
-            RenderText at (285,0) size 177x20
-              text run at (285,0) width 36: "First "
-              text run at (320,0) width 54 RTL: ") \x{5E8}\x{5D1}\x{5D9}\x{5E2}\x{5D9}\x{5EA}"
-              text run at (373,0) width 19: "03"
-              text run at (391,0) width 41 RTL: "\x{5E9}\x{5E0}\x{5D9}\x{5D4} ("
-              text run at (431,0) width 31: " fifth"
+            RenderText at (305,0) size 177x20
+              text run at (305,0) width 36: "First "
+              text run at (340,0) width 54 RTL: ") \x{5E8}\x{5D1}\x{5D9}\x{5E2}\x{5D9}\x{5EA}"
+              text run at (393,0) width 19: "03"
+              text run at (411,0) width 41 RTL: "\x{5E9}\x{5E0}\x{5D9}\x{5D4} ("
+              text run at (451,0) width 31: " fifth"
         RenderBlock {DIV} at (0,31) size 470x39
           RenderText {#text} at (298,10) size 162x17
             text run at (298,10) width 34: "First "
@@ -70,12 +70,12 @@ layer at (0,0) size 800x634
             text run at (429,10) width 31: " fifth"
         RenderMenuList {SELECT} at (0,72) size 500x29 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
           RenderBlock (anonymous) at (9,3) size 482x23
-            RenderText at (285,0) size 177x20
-              text run at (285,0) width 26: "fifth"
-              text run at (310,0) width 59 RTL: ") \x{5E8}\x{5D1}\x{5D9}\x{5E2}\x{5D9}\x{5EA} "
-              text run at (368,0) width 19: "03"
-              text run at (386,0) width 45 RTL: " \x{5E9}\x{5E0}\x{5D9}\x{5D4} ("
-              text run at (430,0) width 32: "First"
+            RenderText at (305,0) size 177x20
+              text run at (305,0) width 26: "fifth"
+              text run at (330,0) width 59 RTL: ") \x{5E8}\x{5D1}\x{5D9}\x{5E2}\x{5D9}\x{5EA} "
+              text run at (388,0) width 19: "03"
+              text run at (406,0) width 45 RTL: " \x{5E9}\x{5E0}\x{5D9}\x{5D4} ("
+              text run at (450,0) width 32: "First"
         RenderBlock {DIV} at (0,103) size 470x39
           RenderText {#text} at (298,10) size 162x17
             text run at (298,10) width 27: "fifth"
@@ -85,15 +85,15 @@ layer at (0,0) size 800x634
             text run at (431,10) width 29: "First"
         RenderMenuList {SELECT} at (0,144) size 500x29 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
           RenderBlock (anonymous) at (9,3) size 482x23
-            RenderText at (285,0) size 177x20
-              text run at (285,0) width 177 LTR override: "First \x{5E9}\x{5E0}\x{5D9}\x{5D4} (03) \x{5E8}\x{5D1}\x{5D9}\x{5E2}\x{5D9}\x{5EA} fifth"
+            RenderText at (305,0) size 177x20
+              text run at (305,0) width 177 LTR override: "First \x{5E9}\x{5E0}\x{5D9}\x{5D4} (03) \x{5E8}\x{5D1}\x{5D9}\x{5E2}\x{5D9}\x{5EA} fifth"
         RenderBlock {DIV} at (0,175) size 470x39
           RenderText {#text} at (298,10) size 162x17
             text run at (298,10) width 162 LTR override: "First \x{5E9}\x{5E0}\x{5D9}\x{5D4} (03) \x{5E8}\x{5D1}\x{5D9}\x{5E2}\x{5D9}\x{5EA} fifth"
         RenderMenuList {SELECT} at (0,216) size 500x29 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
           RenderBlock (anonymous) at (9,3) size 482x23
-            RenderText at (285,0) size 177x20
-              text run at (285,0) width 177 RTL override: "First \x{5E9}\x{5E0}\x{5D9}\x{5D4} (03) \x{5E8}\x{5D1}\x{5D9}\x{5E2}\x{5D9}\x{5EA} fifth"
+            RenderText at (305,0) size 177x20
+              text run at (305,0) width 177 RTL override: "First \x{5E9}\x{5E0}\x{5D9}\x{5D4} (03) \x{5E8}\x{5D1}\x{5D9}\x{5E2}\x{5D9}\x{5EA} fifth"
         RenderBlock {DIV} at (0,247) size 470x39
           RenderText {#text} at (298,10) size 162x17
             text run at (298,10) width 162 RTL override: "First \x{5E9}\x{5E0}\x{5D9}\x{5D4} (03) \x{5E8}\x{5D1}\x{5D9}\x{5E2}\x{5D9}\x{5EA} fifth"

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index f94428c..24a2d7f 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,25 @@
+2016-05-09  Dean Jackson  <dino@apple.com>
+
+        [iOS] <select> elements should render right-aligned when in RTL mode
+        https://bugs.webkit.org/show_bug.cgi?id=157501
+        <rdar://problem/26187870>
+
+        Reviewed by Antoine Quint.
+
+        This is the equivalent of http://webkit.org/b/157112 for iOS.
+        Handle <select> elements when we're in RTL mode. This means
+        drawing the button with the drop-down arrow on the left
+        side, and the button text right-aligned.
+
+        Test: fast/forms/select-non-native-rendering-direction.html
+        plus a bunch of other ones that needed rebaselining.
+
+        * rendering/RenderThemeIOS.mm: Rename MenuListButtonPaddingRight to MenuListButtonPaddingAfter.
+        (WebCore::RenderThemeIOS::popupInternalPaddingBox): Handle both directions.
+        (WebCore::adjustInputElementButtonStyle):
+        (WebCore::RenderThemeIOS::paintMenuListButtonDecorations): Handle drawing in
+        RTL mode.
+
 2016-05-10  Youenn Fablet  <youenn.fablet@crf.canon.fr>
 
         NodeList should be iterable

diff --git a/Source/WebCore/rendering/RenderThemeIOS.mm b/Source/WebCore/rendering/RenderThemeIOS.mm
index e0c252f..a7d093f 100644 (file)
--- a/Source/WebCore/rendering/RenderThemeIOS.mm
+++ b/Source/WebCore/rendering/RenderThemeIOS.mm
@@ -526,12 +526,15 @@ const float MenuListBaseFontSize = 11;
 
 const float MenuListArrowWidth = 7;
 const float MenuListArrowHeight = 6;
-const float MenuListButtonPaddingRight = 19;
+const float MenuListButtonPaddingAfter = 19;
 
 LengthBox RenderThemeIOS::popupInternalPaddingBox(const RenderStyle& style) const
 {
-    if (style.appearance() == MenulistButtonPart)
-        return { 0, static_cast<int>(MenuListButtonPaddingRight + style.borderTopWidth()), 0, 0 };
+    if (style.appearance() == MenulistButtonPart) {
+        if (style.direction() == RTL)
+            return { 0, 0, 0, static_cast<int>(MenuListButtonPaddingAfter + style.borderTopWidth()) };
+        return { 0, static_cast<int>(MenuListButtonPaddingAfter + style.borderTopWidth()), 0, 0 };
+    }
     return { 0, 0, 0, 0 };
 }
 
@@ -601,8 +604,8 @@ static void adjustInputElementButtonStyle(RenderStyle& style, const HTMLInputEle
 
     ASSERT(maximumWidth >= 0);
 
-    if (maximumWidth > 0) {    
-        int width = static_cast<int>(maximumWidth + MenuListButtonPaddingRight);
+    if (maximumWidth > 0) {
+        int width = static_cast<int>(maximumWidth + MenuListButtonPaddingAfter);
         style.setWidth(Length(width, Fixed));
         style.setBoxSizing(CONTENT_BOX);
     }
@@ -631,6 +634,7 @@ void RenderThemeIOS::adjustMenuListButtonStyle(StyleResolver&, RenderStyle& styl
 bool RenderThemeIOS::paintMenuListButtonDecorations(const RenderBox& box, const PaintInfo& paintInfo, const FloatRect& rect)
 {
     auto& style = box.style();
+    bool isRTL = style.direction() == RTL;
     float borderTopWidth = style.borderTopWidth();
     FloatRect clip(rect.x() + style.borderLeftWidth(), rect.y() + style.borderTopWidth(), rect.width() - style.borderLeftWidth() - style.borderRightWidth(), rect.height() - style.borderTopWidth() - style.borderBottomWidth());
     CGContextRef cgContext = paintInfo.context().platformContext();
@@ -640,15 +644,29 @@ bool RenderThemeIOS::paintMenuListButtonDecorations(const RenderBox& box, const
     float adjustTop = 0.5;
     float adjustBottom = 0.5;
 
-    // Paint left-hand title portion.
+    // Paint title portion.
     {
-        FloatRect titleClip(clip.x() - adjustLeft, clip.y() - adjustTop, clip.width() - MenuListButtonPaddingRight + adjustLeft, clip.height() + adjustTop + adjustBottom);
+        float leftInset = isRTL ? MenuListButtonPaddingAfter : 0;
+        FloatRect titleClip(clip.x() + leftInset - adjustLeft, clip.y() - adjustTop, clip.width() - MenuListButtonPaddingAfter + adjustLeft, clip.height() + adjustTop + adjustBottom);
 
         GraphicsContextStateSaver stateSaver(paintInfo.context());
 
+        FloatSize topLeftRadius;
+        FloatSize topRightRadius;
+        FloatSize bottomLeftRadius;
+        FloatSize bottomRightRadius;
+
+        if (isRTL) {
+            topRightRadius = FloatSize(valueForLength(style.borderTopRightRadius().width(), rect.width()) - style.borderRightWidth(), valueForLength(style.borderTopRightRadius().height(), rect.height()) - style.borderTopWidth());
+            bottomRightRadius = FloatSize(valueForLength(style.borderBottomRightRadius().width(), rect.width()) - style.borderRightWidth(), valueForLength(style.borderBottomRightRadius().height(), rect.height()) - style.borderBottomWidth());
+        } else {
+            topLeftRadius = FloatSize(valueForLength(style.borderTopLeftRadius().width(), rect.width()) - style.borderLeftWidth(), valueForLength(style.borderTopLeftRadius().height(), rect.height()) - style.borderTopWidth());
+            bottomLeftRadius = FloatSize(valueForLength(style.borderBottomLeftRadius().width(), rect.width()) - style.borderLeftWidth(), valueForLength(style.borderBottomLeftRadius().height(), rect.height()) - style.borderBottomWidth());
+        }
+
         paintInfo.context().clipRoundedRect(FloatRoundedRect(titleClip,
-            FloatSize(valueForLength(style.borderTopLeftRadius().width(), rect.width()) - style.borderLeftWidth(), valueForLength(style.borderTopLeftRadius().height(), rect.height()) - style.borderTopWidth()), FloatSize(0, 0),
-            FloatSize(valueForLength(style.borderBottomLeftRadius().width(), rect.width()) - style.borderLeftWidth(), valueForLength(style.borderBottomLeftRadius().height(), rect.height()) - style.borderBottomWidth()), FloatSize(0, 0)));
+            topLeftRadius, topRightRadius,
+            bottomLeftRadius, bottomRightRadius));
 
         drawAxialGradient(cgContext, gradientWithName(ShadeGradient), titleClip.location(), FloatPoint(titleClip.x(), titleClip.maxY()), LinearInterpolation);
         drawAxialGradient(cgContext, gradientWithName(ShineGradient), FloatPoint(titleClip.x(), titleClip.maxY()), titleClip.location(), ExponentialInterpolation);
@@ -656,19 +674,36 @@ bool RenderThemeIOS::paintMenuListButtonDecorations(const RenderBox& box, const
 
     // Draw the separator after the initial padding.
 
-    float separator = clip.maxX() - MenuListButtonPaddingRight;
+    float separatorPosition = isRTL ? (clip.x() + MenuListButtonPaddingAfter) : (clip.maxX() - MenuListButtonPaddingAfter);
 
-    box.drawLineForBoxSide(paintInfo.context(), FloatRect(FloatPoint(separator - borderTopWidth, clip.y()), FloatPoint(separator, clip.maxY())), BSRight, style.visitedDependentColor(CSSPropertyBorderTopColor), style.borderTopStyle(), 0, 0);
+    box.drawLineForBoxSide(paintInfo.context(), FloatRect(FloatPoint(separatorPosition - borderTopWidth, clip.y()), FloatPoint(separatorPosition, clip.maxY())), BSRight, style.visitedDependentColor(CSSPropertyBorderTopColor), style.borderTopStyle(), 0, 0);
 
-    FloatRect buttonClip(separator - adjustTop, clip.y() - adjustTop, MenuListButtonPaddingRight + adjustTop + adjustRight, clip.height() + adjustTop + adjustBottom);
+    FloatRect buttonClip;
+    if (isRTL)
+        buttonClip = FloatRect(clip.x() - adjustTop, clip.y() - adjustTop, MenuListButtonPaddingAfter + adjustTop + adjustLeft, clip.height() + adjustTop + adjustBottom);
+    else
+        buttonClip = FloatRect(separatorPosition - adjustTop, clip.y() - adjustTop, MenuListButtonPaddingAfter + adjustTop + adjustRight, clip.height() + adjustTop + adjustBottom);
 
     // Now paint the button portion.
     {
         GraphicsContextStateSaver stateSaver(paintInfo.context());
 
+        FloatSize topLeftRadius;
+        FloatSize topRightRadius;
+        FloatSize bottomLeftRadius;
+        FloatSize bottomRightRadius;
+
+        if (isRTL) {
+            topLeftRadius = FloatSize(valueForLength(style.borderTopLeftRadius().width(), rect.width()) - style.borderLeftWidth(), valueForLength(style.borderTopLeftRadius().height(), rect.height()) - style.borderTopWidth());
+            bottomLeftRadius = FloatSize(valueForLength(style.borderBottomLeftRadius().width(), rect.width()) - style.borderLeftWidth(), valueForLength(style.borderBottomLeftRadius().height(), rect.height()) - style.borderBottomWidth());
+        } else {
+            topRightRadius = FloatSize(valueForLength(style.borderTopRightRadius().width(), rect.width()) - style.borderRightWidth(), valueForLength(style.borderTopRightRadius().height(), rect.height()) - style.borderTopWidth());
+            bottomRightRadius = FloatSize(valueForLength(style.borderBottomRightRadius().width(), rect.width()) - style.borderRightWidth(), valueForLength(style.borderBottomRightRadius().height(), rect.height()) - style.borderBottomWidth());
+        }
+
         paintInfo.context().clipRoundedRect(FloatRoundedRect(buttonClip,
-            FloatSize(0, 0), FloatSize(valueForLength(style.borderTopRightRadius().width(), rect.width()) - style.borderRightWidth(), valueForLength(style.borderTopRightRadius().height(), rect.height()) - style.borderTopWidth()),
-            FloatSize(0, 0), FloatSize(valueForLength(style.borderBottomRightRadius().width(), rect.width()) - style.borderRightWidth(), valueForLength(style.borderBottomRightRadius().height(), rect.height()) - style.borderBottomWidth())));
+            topLeftRadius, topRightRadius,
+            bottomLeftRadius, bottomRightRadius));
 
         paintInfo.context().fillRect(buttonClip, style.visitedDependentColor(CSSPropertyBorderTopColor));