- Revision
- 262669
- Author
- aes...@apple.com
- Date
- 2020-06-05 21:00:42 -0700 (Fri, 05 Jun 2020)
Log Message
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.
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.
Modified Paths
Added Paths
Removed Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (262668 => 262669)
--- trunk/LayoutTests/ChangeLog 2020-06-06 03:36:07 UTC (rev 262668)
+++ trunk/LayoutTests/ChangeLog 2020-06-06 04:00:42 UTC (rev 262669)
@@ -1,3 +1,20 @@
+2020-06-05 Andy Estes <aes...@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 <ryanhad...@apple.com>
Unreviewed, reverting r262619, r262625, and r262641.
Modified: trunk/LayoutTests/TestExpectations (262668 => 262669)
--- trunk/LayoutTests/TestExpectations 2020-06-06 03:36:07 UTC (rev 262668)
+++ trunk/LayoutTests/TestExpectations 2020-06-06 04:00:42 UTC (rev 262669)
@@ -205,6 +205,7 @@
# 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 ]
Copied: trunk/LayoutTests/fast/css/appearance-apple-pay-button-default-corners-expected-mismatch.html (from rev 262668, trunk/LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius-expected-mismatch.html) (0 => 262669)
--- trunk/LayoutTests/fast/css/appearance-apple-pay-button-default-corners-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/css/appearance-apple-pay-button-default-corners-expected-mismatch.html 2020-06-06 04:00:42 UTC (rev 262669)
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Test rendering Apple Pay buttons</title>
+ <style>
+ .apple-pay-button {
+ -webkit-appearance: -apple-pay-button;
+ display: block;
+ }
+
+ .white {
+ -apple-pay-button-style: white;
+ }
+
+ .white-outline {
+ -apple-pay-button-style: white-outline;
+ }
+
+ .black {
+ -apple-pay-button-style: black;
+ }
+
+ .check-out {
+ -apple-pay-button-type: check-out;
+ }
+
+ .book {
+ -apple-pay-button-type: book;
+ }
+
+ .subscribe {
+ -apple-pay-button-type: subscribe;
+ }
+ </style>
+</head>
+<body bgcolor="#E6E6FA">
+ <script>
+ for (let style of ["white", "white-outline", "black"]) {
+ for (let type of ["check-out", "book", "subscribe"]) {
+ var buttonNoRadius = document.createElement("button");
+ buttonNoRadius.classList.add("apple-pay-button", style, type);
+ document.body.appendChild(buttonNoRadius);
+ }
+ }
+ </script>
+</body>
+</html>
Copied: trunk/LayoutTests/fast/css/appearance-apple-pay-button-default-corners.html (from rev 262668, trunk/LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius.html) (0 => 262669)
--- trunk/LayoutTests/fast/css/appearance-apple-pay-button-default-corners.html (rev 0)
+++ trunk/LayoutTests/fast/css/appearance-apple-pay-button-default-corners.html 2020-06-06 04:00:42 UTC (rev 262669)
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Test rendering Apple Pay buttons</title>
+ <style>
+ .apple-pay-button {
+ -webkit-appearance: -apple-pay-button;
+ display: block;
+ }
+
+ .white {
+ -apple-pay-button-style: white;
+ }
+
+ .white-outline {
+ -apple-pay-button-style: white-outline;
+ }
+
+ .black {
+ -apple-pay-button-style: black;
+ }
+
+ .check-out {
+ -apple-pay-button-type: check-out;
+ }
+
+ .book {
+ -apple-pay-button-type: book;
+ }
+
+ .subscribe {
+ -apple-pay-button-type: subscribe;
+ }
+ .borderRadiusLarge {
+ border-top-left-radius: 20px/21px;
+ border-top-right-radius: 25px;
+ border-bottom-left-radius: 10px/1px;
+ border-bottom-right-radius: 5px;
+ }
+ </style>
+</head>
+<body bgcolor="#E6E6FA">
+ <script>
+ for (let style of ["white", "white-outline", "black"]) {
+ for (let type of ["check-out", "book", "subscribe"]) {
+ var button = document.createElement("button");
+ button.classList.add("apple-pay-button", style, type, "borderRadiusLarge");
+ document.body.appendChild(button);
+ }
+ }
+ </script>
+</body>
+</html>
Deleted: trunk/LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius-expected-mismatch.html (262668 => 262669)
--- trunk/LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius-expected-mismatch.html 2020-06-06 03:36:07 UTC (rev 262668)
+++ trunk/LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius-expected-mismatch.html 2020-06-06 04:00:42 UTC (rev 262669)
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <title>Test rendering Apple Pay buttons</title>
- <style>
- .apple-pay-button {
- -webkit-appearance: -apple-pay-button;
- display: block;
- }
-
- .white {
- -apple-pay-button-style: white;
- }
-
- .white-outline {
- -apple-pay-button-style: white-outline;
- }
-
- .black {
- -apple-pay-button-style: black;
- }
-
- .check-out {
- -apple-pay-button-type: check-out;
- }
-
- .book {
- -apple-pay-button-type: book;
- }
-
- .subscribe {
- -apple-pay-button-type: subscribe;
- }
- </style>
-</head>
-<body bgcolor="#E6E6FA">
- <script>
- for (let style of ["white", "white-outline", "black"]) {
- for (let type of ["check-out", "book", "subscribe"]) {
- var buttonNoRadius = document.createElement("button");
- buttonNoRadius.classList.add("apple-pay-button", style, type);
- document.body.appendChild(buttonNoRadius);
- }
- }
- </script>
-</body>
-</html>
Deleted: trunk/LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius.html (262668 => 262669)
--- trunk/LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius.html 2020-06-06 03:36:07 UTC (rev 262668)
+++ trunk/LayoutTests/http/tests/ssl/applepay/ApplePayButtonCornerRadius.html 2020-06-06 04:00:42 UTC (rev 262669)
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <title>Test rendering Apple Pay buttons</title>
- <style>
- .apple-pay-button {
- -webkit-appearance: -apple-pay-button;
- display: block;
- }
-
- .white {
- -apple-pay-button-style: white;
- }
-
- .white-outline {
- -apple-pay-button-style: white-outline;
- }
-
- .black {
- -apple-pay-button-style: black;
- }
-
- .check-out {
- -apple-pay-button-type: check-out;
- }
-
- .book {
- -apple-pay-button-type: book;
- }
-
- .subscribe {
- -apple-pay-button-type: subscribe;
- }
- .borderRadiusLarge {
- border-top-left-radius: 20px/21px;
- border-top-right-radius: 25px;
- border-bottom-left-radius: 10px/1px;
- border-bottom-right-radius: 5px;
- }
- </style>
-</head>
-<body bgcolor="#E6E6FA">
- <script>
- for (let style of ["white", "white-outline", "black"]) {
- for (let type of ["check-out", "book", "subscribe"]) {
- var button = document.createElement("button");
- button.classList.add("apple-pay-button", style, type, "borderRadiusLarge");
- document.body.appendChild(button);
- }
- }
- </script>
-</body>
-</html>
Modified: trunk/LayoutTests/platform/ios/TestExpectations (262668 => 262669)
--- trunk/LayoutTests/platform/ios/TestExpectations 2020-06-06 03:36:07 UTC (rev 262668)
+++ trunk/LayoutTests/platform/ios/TestExpectations 2020-06-06 04:00:42 UTC (rev 262669)
@@ -16,6 +16,11 @@
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 ]
Modified: trunk/LayoutTests/platform/mac/TestExpectations (262668 => 262669)
--- trunk/LayoutTests/platform/mac/TestExpectations 2020-06-06 03:36:07 UTC (rev 262668)
+++ trunk/LayoutTests/platform/mac/TestExpectations 2020-06-06 04:00:42 UTC (rev 262669)
@@ -1114,6 +1114,7 @@
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
Modified: trunk/Source/WebCore/ChangeLog (262668 => 262669)
--- trunk/Source/WebCore/ChangeLog 2020-06-06 03:36:07 UTC (rev 262668)
+++ trunk/Source/WebCore/ChangeLog 2020-06-06 04:00:42 UTC (rev 262669)
@@ -1,3 +1,36 @@
+2020-06-05 Andy Estes <aes...@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.l...@apple.com>
HTMLMediaElement::m_waitingToEnterFullscreen is not initialized in the constructor
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.mm (262668 => 262669)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2020-06-06 03:36:07 UTC (rev 262668)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2020-06-06 04:00:42 UTC (rev 262669)
@@ -545,9 +545,22 @@
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>.
