REGRESSION (r256648): Apple Pay <button> elements no longer use the default corner...
authoraestes@apple.com <aestes@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 6 Jun 2020 04:00:42 +0000 (04:00 +0000)
committeraestes@apple.com <aestes@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 6 Jun 2020 04:00:42 +0000 (04:00 +0000)
https://bugs.webkit.org/show_bug.cgi?id=212860
<rdar://problem/64054728>

Reviewed by Wenson Hsieh.

Source/WebCore:

As part of drawing iOS native form controls, RenderThemeIOS applies a round border to
un-styled <button> elements in RenderThemeIOS::adjustRoundBorderRadius. Prior to r256648,
this adjusted border radius would be ignored by RenderThemeCocoa::paintApplePayButton when
painting <button> elements with the ApplePayButtonPart appearance, but now it's respected.
Apple Pay <button>s with default width and height previously had a 4px corner radius but now
have a 15px corner radius.

Fixed the issue by skipping RenderThemeIOS::adjustRoundBorderRadius for elements with the
ApplePayButtonPart appearance so that the correct border radius adjustment can be made by
RenderThemeCocoa::adjustApplePayButtonStyle.

Four existing tests were skipped on iOS that would have caught this; un-skipped them.

Un-skipped tests:   fast/css/appearance-apple-pay-button.html
                    fast/css/appearance-apple-pay-button-border-radius.html
                    fast/css/appearance-apple-pay-button-default-corners.html
                    fast/css/getComputedStyle/computed-style-apple-pay-button.html

* rendering/RenderThemeIOS.mm:
(WebCore::canAdjustBorderRadiusForAppearance): Added a helper to check if border radius can
be adjusted for a given ControlPart. Added ApplePayButtonPart to the list of appearances
where border radius cannot be adjusted.
(WebCore::RenderThemeIOS::adjustRoundBorderRadius): Changed to call
canAdjustBorderRadiusForAppearance.

LayoutTests:

* TestExpectations: Skipped fast/css/appearance-apple-pay-button-default-corners.html.
* fast/css/appearance-apple-pay-button-default-corners-expected-mismatch.html: Renamed from
LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius-expected-mismatch.html.
* fast/css/appearance-apple-pay-button-default-corners.html: Renamed from
LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius.html.
* platform/ios/TestExpectations: Un-skipped tests that pass in platform/mac/.
* platform/mac/TestExpectations: Un-skipped
fast/css/appearance-apple-pay-button-default-corners.html.

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

LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/fast/css/appearance-apple-pay-button-default-corners-expected-mismatch.html [moved from LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius-expected-mismatch.html with 100% similarity]
LayoutTests/fast/css/appearance-apple-pay-button-default-corners.html [moved from LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius.html with 100% similarity]
LayoutTests/platform/ios/TestExpectations
LayoutTests/platform/mac/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderThemeIOS.mm

index b1b7a94..4b3ce63 100644 (file)
@@ -1,3 +1,20 @@
+2020-06-05  Andy Estes  <aestes@apple.com>
+
+        REGRESSION (r256648): Apple Pay <button> elements no longer use the default corner radius on iOS (affects Stripe.js)
+        https://bugs.webkit.org/show_bug.cgi?id=212860
+        <rdar://problem/64054728>
+
+        Reviewed by Wenson Hsieh.
+
+        * TestExpectations: Skipped fast/css/appearance-apple-pay-button-default-corners.html.
+        * fast/css/appearance-apple-pay-button-default-corners-expected-mismatch.html: Renamed from
+        LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius-expected-mismatch.html.
+        * fast/css/appearance-apple-pay-button-default-corners.html: Renamed from
+        LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius.html.
+        * platform/ios/TestExpectations: Un-skipped tests that pass in platform/mac/.
+        * platform/mac/TestExpectations: Un-skipped
+        fast/css/appearance-apple-pay-button-default-corners.html.
+
 2020-06-05  Ryan Haddad  <ryanhaddad@apple.com>
 
         Unreviewed, reverting r262619, r262625, and r262641.
index 04df644..a05f586 100644 (file)
@@ -205,6 +205,7 @@ media/deactivate-audio-session.html [ Skip ]
 # ApplePay is only available on iOS (greater than iOS 10) and macOS (greater than macOS 10.12) and only for WebKit2.
 fast/css/appearance-apple-pay-button.html [ Skip ]
 fast/css/appearance-apple-pay-button-border-radius.html [ Skip ]
+fast/css/appearance-apple-pay-button-default-corners.html [ Skip ]
 fast/css/getComputedStyle/computed-style-apple-pay-button.html [ Skip ]
 http/tests/ssl/applepay/ [ Skip ]
 
index 6dc1660..a2894a8 100644 (file)
@@ -16,6 +16,11 @@ media/ios [ Pass ]
 quicklook [ Pass ]
 swipe [ Pass ]
 
+fast/css/appearance-apple-pay-button.html [ Pass ]
+fast/css/appearance-apple-pay-button-border-radius.html [ Pass ]
+fast/css/appearance-apple-pay-button-default-corners.html [ Pass ]
+fast/css/getComputedStyle/computed-style-apple-pay-button.html [ Pass ]
+
 fast/css/ios [ Pass ]
 fast/media/ios [ Pass ]
 
index 215c4b7..3e27e71 100644 (file)
@@ -1114,6 +1114,7 @@ webkit.org/b/158889 media/video-controls-show-on-kb-or-ax-event.html [ Pass Fail
 
 fast/css/appearance-apple-pay-button.html [ Pass ]
 fast/css/appearance-apple-pay-button-border-radius.html [ Pass ]
+fast/css/appearance-apple-pay-button-default-corners.html [ Pass ]
 fast/css/getComputedStyle/computed-style-apple-pay-button.html [ Pass ]
 
 # <rdar://problem/23500327> storage/websql/alter-to-info-table.html
index 7336e67..4cb7d5c 100644 (file)
@@ -1,3 +1,36 @@
+2020-06-05  Andy Estes  <aestes@apple.com>
+
+        REGRESSION (r256648): Apple Pay <button> elements no longer use the default corner radius on iOS (affects Stripe.js)
+        https://bugs.webkit.org/show_bug.cgi?id=212860
+        <rdar://problem/64054728>
+
+        Reviewed by Wenson Hsieh.
+
+        As part of drawing iOS native form controls, RenderThemeIOS applies a round border to
+        un-styled <button> elements in RenderThemeIOS::adjustRoundBorderRadius. Prior to r256648,
+        this adjusted border radius would be ignored by RenderThemeCocoa::paintApplePayButton when
+        painting <button> elements with the ApplePayButtonPart appearance, but now it's respected.
+        Apple Pay <button>s with default width and height previously had a 4px corner radius but now
+        have a 15px corner radius.
+
+        Fixed the issue by skipping RenderThemeIOS::adjustRoundBorderRadius for elements with the
+        ApplePayButtonPart appearance so that the correct border radius adjustment can be made by
+        RenderThemeCocoa::adjustApplePayButtonStyle.
+
+        Four existing tests were skipped on iOS that would have caught this; un-skipped them.
+
+        Un-skipped tests:   fast/css/appearance-apple-pay-button.html
+                            fast/css/appearance-apple-pay-button-border-radius.html
+                            fast/css/appearance-apple-pay-button-default-corners.html
+                            fast/css/getComputedStyle/computed-style-apple-pay-button.html
+
+        * rendering/RenderThemeIOS.mm:
+        (WebCore::canAdjustBorderRadiusForAppearance): Added a helper to check if border radius can
+        be adjusted for a given ControlPart. Added ApplePayButtonPart to the list of appearances
+        where border radius cannot be adjusted.
+        (WebCore::RenderThemeIOS::adjustRoundBorderRadius): Changed to call
+        canAdjustBorderRadiusForAppearance.
+
 2020-06-05  Peng Liu  <peng.liu6@apple.com>
 
         HTMLMediaElement::m_waitingToEnterFullscreen is not initialized in the constructor
index 36fbb62..7fe28df 100644 (file)
@@ -545,9 +545,22 @@ LengthBox RenderThemeIOS::popupInternalPaddingBox(const RenderStyle& style) cons
     return { 0, 0, 0, 0 };
 }
 
+static inline bool canAdjustBorderRadiusForAppearance(ControlPart appearance)
+{
+    switch (appearance) {
+    case NoControlPart:
+#if ENABLE(APPLE_PAY)
+    case ApplePayButtonPart:
+#endif
+        return false;
+    default:
+        return true;
+    };
+}
+
 void RenderThemeIOS::adjustRoundBorderRadius(RenderStyle& style, RenderBox& box)
 {
-    if (style.appearance() == NoControlPart || style.backgroundLayers().hasImage())
+    if (!canAdjustBorderRadiusForAppearance(style.appearance()) || style.backgroundLayers().hasImage())
         return;
 
     // FIXME: We should not be relying on border radius for the appearance of our controls <rdar://problem/7675493>.