Title: [262442] branches/safari-610.1.15-branch
Revision
262442
Author
alanc...@apple.com
Date
2020-06-02 14:58:03 -0700 (Tue, 02 Jun 2020)

Log Message

Cherry-pick r262279. rdar://problem/63891510

    [Apple Pay] Buttons render with a corner radius of PKApplePayButtonDefaultCornerRadius even when explicitly specifying "border-radius: 0px"
    https://bugs.webkit.org/show_bug.cgi?id=212476
    <rdar://problem/63401433>

    Reviewed by Antti Koivisto.

    Source/WebCore:

    r256648 added support for customizing the corner radius of Apple Pay buttons using the
    border-radius CSS property. PassKit buttons have a default corner radius of 4, but
    border-radius has an initial value of 0, so to maintain web compatibility with existing
    buttons we only want to customize the corner radius when a border-radius value has been
    explicitly specified (otherwise, previously rounded buttons would all become squared off due
    to border-radius's initial value).

    r256648 checked for a non-initial border-radius by calling RenderStyle::hasBorderRadius, but
    this check does not distinguish between an initial value and an explicit declaration of
    "border-radius: 0px". As a result, authors are unable to create Apple Pay buttons with
    square corners.

    This patch adds a flag to RenderStyle::NonInheritedFlags that tracks whether any
    border-radius longhand has been explicitly set (or has explicitly inherited an explicitly set
    value), and uses that flag to adjust the computed border radius for Apple Pay buttons.

    The addition of RenderStyle::NonInheritedFlags::hasExplicitlySetBorderRadius did not change
    the size of RenderStyle.

    Tests: fast/css/appearance-apple-pay-button-border-radius.html
           fast/css/getComputedStyle/computed-style-apple-pay-button.html

    * css/CSSProperties.json:
    * rendering/RenderThemeCocoa.mm:
    (WebCore::RenderThemeCocoa::adjustApplePayButtonStyle const):
    (WebCore::RenderThemeCocoa::paintApplePayButton):
    (WebCore::largestCornerRadius): Deleted.
    * rendering/style/RenderStyle.cpp:
    (WebCore::RenderStyle::RenderStyle):
    * rendering/style/RenderStyle.h:
    (WebCore::RenderStyle::hasExplicitlySetBorderRadius const):
    (WebCore::RenderStyle::setHasExplicitlySetBorderRadius):
    (WebCore::RenderStyle::NonInheritedFlags::operator== const):
    (WebCore::RenderStyle::NonInheritedFlags::copyNonInheritedFrom):
    * style/StyleBuilderCustom.h:
    (WebCore::Style::BuilderCustom::applyInheritBorderBottomLeftRadius):
    (WebCore::Style::BuilderCustom::applyValueBorderBottomLeftRadius):
    (WebCore::Style::BuilderCustom::applyInheritBorderBottomRightRadius):
    (WebCore::Style::BuilderCustom::applyValueBorderBottomRightRadius):
    (WebCore::Style::BuilderCustom::applyInheritBorderTopLeftRadius):
    (WebCore::Style::BuilderCustom::applyValueBorderTopLeftRadius):
    (WebCore::Style::BuilderCustom::applyInheritBorderTopRightRadius):
    (WebCore::Style::BuilderCustom::applyValueBorderTopRightRadius):

    LayoutTests:

    * TestExpectations:
    * fast/css/appearance-apple-pay-button-border-radius-expected.html: Added.
    * fast/css/appearance-apple-pay-button-border-radius.html: Added.
    * fast/css/appearance-apple-pay-button-expected.html:
    * fast/css/appearance-apple-pay-button.html:
    * fast/css/getComputedStyle/computed-style-apple-pay-button-expected.txt: Added.
    * fast/css/getComputedStyle/computed-style-apple-pay-button.html: Added.
    * platform/mac/TestExpectations:

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

Modified Paths

Added Paths

Diff

Modified: branches/safari-610.1.15-branch/LayoutTests/ChangeLog (262441 => 262442)


--- branches/safari-610.1.15-branch/LayoutTests/ChangeLog	2020-06-02 21:57:58 UTC (rev 262441)
+++ branches/safari-610.1.15-branch/LayoutTests/ChangeLog	2020-06-02 21:58:03 UTC (rev 262442)
@@ -1,3 +1,90 @@
+2020-06-02  Alan Coon  <alanc...@apple.com>
+
+        Cherry-pick r262279. rdar://problem/63891510
+
+    [Apple Pay] Buttons render with a corner radius of PKApplePayButtonDefaultCornerRadius even when explicitly specifying "border-radius: 0px"
+    https://bugs.webkit.org/show_bug.cgi?id=212476
+    <rdar://problem/63401433>
+    
+    Reviewed by Antti Koivisto.
+    
+    Source/WebCore:
+    
+    r256648 added support for customizing the corner radius of Apple Pay buttons using the
+    border-radius CSS property. PassKit buttons have a default corner radius of 4, but
+    border-radius has an initial value of 0, so to maintain web compatibility with existing
+    buttons we only want to customize the corner radius when a border-radius value has been
+    explicitly specified (otherwise, previously rounded buttons would all become squared off due
+    to border-radius's initial value).
+    
+    r256648 checked for a non-initial border-radius by calling RenderStyle::hasBorderRadius, but
+    this check does not distinguish between an initial value and an explicit declaration of
+    "border-radius: 0px". As a result, authors are unable to create Apple Pay buttons with
+    square corners.
+    
+    This patch adds a flag to RenderStyle::NonInheritedFlags that tracks whether any
+    border-radius longhand has been explicitly set (or has explicitly inherited an explicitly set
+    value), and uses that flag to adjust the computed border radius for Apple Pay buttons.
+    
+    The addition of RenderStyle::NonInheritedFlags::hasExplicitlySetBorderRadius did not change
+    the size of RenderStyle.
+    
+    Tests: fast/css/appearance-apple-pay-button-border-radius.html
+           fast/css/getComputedStyle/computed-style-apple-pay-button.html
+    
+    * css/CSSProperties.json:
+    * rendering/RenderThemeCocoa.mm:
+    (WebCore::RenderThemeCocoa::adjustApplePayButtonStyle const):
+    (WebCore::RenderThemeCocoa::paintApplePayButton):
+    (WebCore::largestCornerRadius): Deleted.
+    * rendering/style/RenderStyle.cpp:
+    (WebCore::RenderStyle::RenderStyle):
+    * rendering/style/RenderStyle.h:
+    (WebCore::RenderStyle::hasExplicitlySetBorderRadius const):
+    (WebCore::RenderStyle::setHasExplicitlySetBorderRadius):
+    (WebCore::RenderStyle::NonInheritedFlags::operator== const):
+    (WebCore::RenderStyle::NonInheritedFlags::copyNonInheritedFrom):
+    * style/StyleBuilderCustom.h:
+    (WebCore::Style::BuilderCustom::applyInheritBorderBottomLeftRadius):
+    (WebCore::Style::BuilderCustom::applyValueBorderBottomLeftRadius):
+    (WebCore::Style::BuilderCustom::applyInheritBorderBottomRightRadius):
+    (WebCore::Style::BuilderCustom::applyValueBorderBottomRightRadius):
+    (WebCore::Style::BuilderCustom::applyInheritBorderTopLeftRadius):
+    (WebCore::Style::BuilderCustom::applyValueBorderTopLeftRadius):
+    (WebCore::Style::BuilderCustom::applyInheritBorderTopRightRadius):
+    (WebCore::Style::BuilderCustom::applyValueBorderTopRightRadius):
+    
+    LayoutTests:
+    
+    * TestExpectations:
+    * fast/css/appearance-apple-pay-button-border-radius-expected.html: Added.
+    * fast/css/appearance-apple-pay-button-border-radius.html: Added.
+    * fast/css/appearance-apple-pay-button-expected.html:
+    * fast/css/appearance-apple-pay-button.html:
+    * fast/css/getComputedStyle/computed-style-apple-pay-button-expected.txt: Added.
+    * fast/css/getComputedStyle/computed-style-apple-pay-button.html: Added.
+    * platform/mac/TestExpectations:
+    
+    
+    git-svn-id: https://svn.webkit.org/repository/webkit/trunk@262279 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+    2020-05-28  Andy Estes  <aes...@apple.com>
+
+            [Apple Pay] Buttons render with a corner radius of PKApplePayButtonDefaultCornerRadius even when explicitly specifying "border-radius: 0px"
+            https://bugs.webkit.org/show_bug.cgi?id=212476
+            <rdar://problem/63401433>
+
+            Reviewed by Antti Koivisto.
+
+            * TestExpectations:
+            * fast/css/appearance-apple-pay-button-border-radius-expected.html: Added.
+            * fast/css/appearance-apple-pay-button-border-radius.html: Added.
+            * fast/css/appearance-apple-pay-button-expected.html:
+            * fast/css/appearance-apple-pay-button.html:
+            * fast/css/getComputedStyle/computed-style-apple-pay-button-expected.txt: Added.
+            * fast/css/getComputedStyle/computed-style-apple-pay-button.html: Added.
+            * platform/mac/TestExpectations:
+
 2020-05-23  Zalan Bujtas  <za...@apple.com>
 
         [LFC][TFC] Non-collapsing row border should not make the table wider/taller

Modified: branches/safari-610.1.15-branch/LayoutTests/TestExpectations (262441 => 262442)


--- branches/safari-610.1.15-branch/LayoutTests/TestExpectations	2020-06-02 21:57:58 UTC (rev 262441)
+++ branches/safari-610.1.15-branch/LayoutTests/TestExpectations	2020-06-02 21:58:03 UTC (rev 262442)
@@ -203,6 +203,9 @@
 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/getComputedStyle/computed-style-apple-pay-button.html [ Skip ]
 http/tests/ssl/applepay/ [ Skip ]
 
 # Only WK2 allows unconstrained scrolling
@@ -1950,7 +1953,6 @@
 # integral hittest vs. subpixel table
 fast/table/hittest-tablecell-with-borders-right-edge.html [ Pass Failure ]
 fast/table/hittest-tablecell-right-edge.html [ Pass Failure ]
-fast/css/appearance-apple-pay-button.html [ ImageOnlyFailure ]
 
 webkit.org/b/151949 streams/reference-implementation/pipe-to.html [ Pass Failure ]
 webkit.org/b/154687 streams/pipe-to.html [ Slow ]

Added: branches/safari-610.1.15-branch/LayoutTests/fast/css/appearance-apple-pay-button-border-radius-expected.html (0 => 262442)


--- branches/safari-610.1.15-branch/LayoutTests/fast/css/appearance-apple-pay-button-border-radius-expected.html	                        (rev 0)
+++ branches/safari-610.1.15-branch/LayoutTests/fast/css/appearance-apple-pay-button-border-radius-expected.html	2020-06-02 21:58:03 UTC (rev 262442)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .container {
+            padding: 25px;
+            width: 500px;
+        }
+
+        .apple-pay-button {
+            -webkit-appearance: -apple-pay-button;
+        }
+
+        .square-corners {
+            border-radius: 0px;
+        }
+    </style>
+</head>
+<body>
+    <div class='container'>
+        <button class='apple-pay-button'></button>
+        <button class='apple-pay-button'></button>
+        <button class='apple-pay-button'></button>
+        <button class='apple-pay-button'></button>
+    </div>
+    <div class='container'>
+        <button class='apple-pay-button square-corners'></button>
+        <button class='apple-pay-button'></button>
+        <button class='apple-pay-button'></button>
+        <button class='apple-pay-button'></button>
+    </div>
+    <div class='container'>
+        <button class='apple-pay-button square-corners'></button>
+        <div>
+            <button class='apple-pay-button square-corners'></button>
+            <button class='apple-pay-button square-corners'></button>
+            <div class='square-corners'></div>
+        </div>
+    </div>
+    <div class='container'>
+        <button class='apple-pay-button'></button>
+        <button></button>
+        <span></span>
+        <span></span>
+    </div>
+</body>
+</html>

Added: branches/safari-610.1.15-branch/LayoutTests/fast/css/appearance-apple-pay-button-border-radius.html (0 => 262442)


--- branches/safari-610.1.15-branch/LayoutTests/fast/css/appearance-apple-pay-button-border-radius.html	                        (rev 0)
+++ branches/safari-610.1.15-branch/LayoutTests/fast/css/appearance-apple-pay-button-border-radius.html	2020-06-02 21:58:03 UTC (rev 262442)
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .container {
+            padding: 25px;
+            width: 500px;
+        }
+
+        .apple-pay-button {
+            -webkit-appearance: -apple-pay-button;
+        }
+
+        .round-corners {
+            border-radius: 5px;
+        }
+
+        .square-corners {
+            border-radius: 0px;
+        }
+
+
+    </style>    
+</head>
+<body>
+    <div class=container>
+        <button class='apple-pay-button' style='border-radius: inherit'></button>
+        <button class='apple-pay-button' style='border-radius: initial'></button>
+        <button class='apple-pay-button square-corners' style='border-radius: unset'></button>
+        <button class='apple-pay-button square-corners' style='border-radius: revert'></button>
+    </div>
+        <div class='container square-corners'>
+        <button class='apple-pay-button' style='border-radius: inherit'></button>
+        <button class='apple-pay-button' style='border-radius: initial'></button>
+        <button class='apple-pay-button' style='border-radius: unset'></button>
+        <button class='apple-pay-button' style='border-radius: revert'></button>
+    </div>
+    <div class='container square-corners'>
+        <button class='apple-pay-button' style='border-radius: inherit'></button>
+        <div style='border-radius: inherit'>
+            <button class='apple-pay-button' style='border-radius: inherit'></button>
+            <button class='apple-pay-button round-corners' style='border-radius: inherit'></button>
+            <button class='apple-pay-button round-corners' style='all: inherit'></button>
+        </div>
+    </div>
+    <div class='container' style='border-radius: inherit'>
+        <button class='apple-pay-button' style='border-radius: inherit'></button>
+        <button class='apple-pay-button square-corners' style='all: revert'></button>
+        <button class='apple-pay-button square-corners' style='all: initial'></button>
+        <button class='apple-pay-button square-corners' style='all: unset'></button>
+    </div>
+</body>
+</html>

Modified: branches/safari-610.1.15-branch/LayoutTests/fast/css/appearance-apple-pay-button-expected.html (262441 => 262442)


--- branches/safari-610.1.15-branch/LayoutTests/fast/css/appearance-apple-pay-button-expected.html	2020-06-02 21:57:58 UTC (rev 262441)
+++ branches/safari-610.1.15-branch/LayoutTests/fast/css/appearance-apple-pay-button-expected.html	2020-06-02 21:58:03 UTC (rev 262442)
@@ -31,9 +31,13 @@
 <div class="container">
     <div style="background-color: black;" class="apple-pay-button-div"></div>
     <div style="background-color: white;" class="apple-pay-button-div"></div>
+    <div style="background-color: black;" class="apple-pay-button-div"></div>
+    <div style="background-color: white;" class="apple-pay-button-div"></div>
     
     <div class="masker" style="top: 60px; left: 150px"></div>
     <div class="masker" style="top: 185px; left: 150px"></div>
+    <div class="masker" style="top: 310px; left: 150px"></div>
+    <div class="masker" style="top: 435px; left: 150px"></div>
     
     <div class="corner-mask" style="top: 45px; left: 45px"></div>
     <div class="corner-mask" style="top: 135px; left: 45px"></div>

Modified: branches/safari-610.1.15-branch/LayoutTests/fast/css/appearance-apple-pay-button.html (262441 => 262442)


--- branches/safari-610.1.15-branch/LayoutTests/fast/css/appearance-apple-pay-button.html	2020-06-02 21:57:58 UTC (rev 262441)
+++ branches/safari-610.1.15-branch/LayoutTests/fast/css/appearance-apple-pay-button.html	2020-06-02 21:58:03 UTC (rev 262442)
@@ -32,9 +32,13 @@
 <div class="container">
     <button style="-apple-pay-button-style: black;" class="apple-pay-button-div"></button>
     <button style="-apple-pay-button-style: white;" class="apple-pay-button-div"></button>
+    <button style="-apple-pay-button-style: black; border-radius: 0px;" class="apple-pay-button-div"></button>
+    <button style="-apple-pay-button-style: white; border-radius: 0px;" class="apple-pay-button-div"></button>
     
     <div class="masker" style="top: 60px; left: 150px"></div>
     <div class="masker" style="top: 185px; left: 150px"></div>
+    <div class="masker" style="top: 310px; left: 150px"></div>
+    <div class="masker" style="top: 435px; left: 150px"></div>
 
     <div class="corner-mask" style="top: 45px; left: 45px"></div>
     <div class="corner-mask" style="top: 135px; left: 45px"></div>

Added: branches/safari-610.1.15-branch/LayoutTests/fast/css/getComputedStyle/computed-style-apple-pay-button-expected.txt (0 => 262442)


--- branches/safari-610.1.15-branch/LayoutTests/fast/css/getComputedStyle/computed-style-apple-pay-button-expected.txt	                        (rev 0)
+++ branches/safari-610.1.15-branch/LayoutTests/fast/css/getComputedStyle/computed-style-apple-pay-button-expected.txt	2020-06-02 21:58:03 UTC (rev 262442)
@@ -0,0 +1,24 @@
+Test computed style adjustments for the "-apple-pay-button" appearance.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(plainButton).minWidth is "100px"
+PASS getComputedStyle(plainButton).width is "100px"
+PASS getComputedStyle(plainButton).minHeight is "30px"
+PASS getComputedStyle(plainButton).height is "30px"
+PASS getComputedStyle(plainButton).borderRadius is "4px"
+PASS getComputedStyle(squareCornersButton).minWidth is "100px"
+PASS getComputedStyle(squareCornersButton).width is "100px"
+PASS getComputedStyle(squareCornersButton).minHeight is "30px"
+PASS getComputedStyle(squareCornersButton).height is "30px"
+PASS getComputedStyle(squareCornersButton).borderRadius is "0px"
+PASS getComputedStyle(buyButton).minWidth is "140px"
+PASS getComputedStyle(buyButton).width is "140px"
+PASS getComputedStyle(buyButton).minHeight is "30px"
+PASS getComputedStyle(buyButton).height is "30px"
+PASS getComputedStyle(buyButton).borderRadius is "4px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+    

Added: branches/safari-610.1.15-branch/LayoutTests/fast/css/getComputedStyle/computed-style-apple-pay-button.html (0 => 262442)


--- branches/safari-610.1.15-branch/LayoutTests/fast/css/getComputedStyle/computed-style-apple-pay-button.html	                        (rev 0)
+++ branches/safari-610.1.15-branch/LayoutTests/fast/css/getComputedStyle/computed-style-apple-pay-button.html	2020-06-02 21:58:03 UTC (rev 262442)
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src=''></script>
+</head>
+<body>
+	<button id='plain' style='-webkit-appearance: -apple-pay-button;'></button>
+	<button id='square-corners' style='-webkit-appearance: -apple-pay-button; border-radius: 0px;'></button>
+	<button id='buy' style='-webkit-appearance: -apple-pay-button; -apple-pay-button-type: buy;'></button>
+
+	<script>
+		description('Test computed style adjustments for the "-apple-pay-button" appearance.');
+
+		plainButton = document.querySelector('#plain');
+		shouldBeEqualToString('getComputedStyle(plainButton).minWidth', '100px');
+		shouldBeEqualToString('getComputedStyle(plainButton).width', '100px');
+		shouldBeEqualToString('getComputedStyle(plainButton).minHeight', '30px');
+		shouldBeEqualToString('getComputedStyle(plainButton).height', '30px');
+		shouldBeEqualToString('getComputedStyle(plainButton).borderRadius', '4px');
+
+		squareCornersButton = document.querySelector('#square-corners');
+		shouldBeEqualToString('getComputedStyle(squareCornersButton).minWidth', '100px');
+		shouldBeEqualToString('getComputedStyle(squareCornersButton).width', '100px');
+		shouldBeEqualToString('getComputedStyle(squareCornersButton).minHeight', '30px');
+		shouldBeEqualToString('getComputedStyle(squareCornersButton).height', '30px');
+		shouldBeEqualToString('getComputedStyle(squareCornersButton).borderRadius', '0px');
+
+		buyButton = document.querySelector('#buy');
+		shouldBeEqualToString('getComputedStyle(buyButton).minWidth', '140px');
+		shouldBeEqualToString('getComputedStyle(buyButton).width', '140px');
+		shouldBeEqualToString('getComputedStyle(buyButton).minHeight', '30px');
+		shouldBeEqualToString('getComputedStyle(buyButton).height', '30px');
+		shouldBeEqualToString('getComputedStyle(buyButton).borderRadius', '4px');
+	</script>
+
+	<script src=''></script>
+</body>
+</html>

Modified: branches/safari-610.1.15-branch/LayoutTests/platform/mac/TestExpectations (262441 => 262442)


--- branches/safari-610.1.15-branch/LayoutTests/platform/mac/TestExpectations	2020-06-02 21:57:58 UTC (rev 262441)
+++ branches/safari-610.1.15-branch/LayoutTests/platform/mac/TestExpectations	2020-06-02 21:58:03 UTC (rev 262442)
@@ -1113,6 +1113,8 @@
 webkit.org/b/158889 media/video-controls-show-on-kb-or-ax-event.html [ Pass Failure Timeout ]
 
 fast/css/appearance-apple-pay-button.html [ Pass ]
+fast/css/appearance-apple-pay-button-border-radius.html [ Pass ]
+fast/css/getComputedStyle/computed-style-apple-pay-button.html [ Pass ]
 
 # <rdar://problem/23500327> storage/websql/alter-to-info-table.html
 storage/websql/alter-to-info-table.html [ Pass Failure ]

Modified: branches/safari-610.1.15-branch/Source/WebCore/ChangeLog (262441 => 262442)


--- branches/safari-610.1.15-branch/Source/WebCore/ChangeLog	2020-06-02 21:57:58 UTC (rev 262441)
+++ branches/safari-610.1.15-branch/Source/WebCore/ChangeLog	2020-06-02 21:58:03 UTC (rev 262442)
@@ -1,5 +1,127 @@
 2020-06-02  Alan Coon  <alanc...@apple.com>
 
+        Cherry-pick r262279. rdar://problem/63891510
+
+    [Apple Pay] Buttons render with a corner radius of PKApplePayButtonDefaultCornerRadius even when explicitly specifying "border-radius: 0px"
+    https://bugs.webkit.org/show_bug.cgi?id=212476
+    <rdar://problem/63401433>
+    
+    Reviewed by Antti Koivisto.
+    
+    Source/WebCore:
+    
+    r256648 added support for customizing the corner radius of Apple Pay buttons using the
+    border-radius CSS property. PassKit buttons have a default corner radius of 4, but
+    border-radius has an initial value of 0, so to maintain web compatibility with existing
+    buttons we only want to customize the corner radius when a border-radius value has been
+    explicitly specified (otherwise, previously rounded buttons would all become squared off due
+    to border-radius's initial value).
+    
+    r256648 checked for a non-initial border-radius by calling RenderStyle::hasBorderRadius, but
+    this check does not distinguish between an initial value and an explicit declaration of
+    "border-radius: 0px". As a result, authors are unable to create Apple Pay buttons with
+    square corners.
+    
+    This patch adds a flag to RenderStyle::NonInheritedFlags that tracks whether any
+    border-radius longhand has been explicitly set (or has explicitly inherited an explicitly set
+    value), and uses that flag to adjust the computed border radius for Apple Pay buttons.
+    
+    The addition of RenderStyle::NonInheritedFlags::hasExplicitlySetBorderRadius did not change
+    the size of RenderStyle.
+    
+    Tests: fast/css/appearance-apple-pay-button-border-radius.html
+           fast/css/getComputedStyle/computed-style-apple-pay-button.html
+    
+    * css/CSSProperties.json:
+    * rendering/RenderThemeCocoa.mm:
+    (WebCore::RenderThemeCocoa::adjustApplePayButtonStyle const):
+    (WebCore::RenderThemeCocoa::paintApplePayButton):
+    (WebCore::largestCornerRadius): Deleted.
+    * rendering/style/RenderStyle.cpp:
+    (WebCore::RenderStyle::RenderStyle):
+    * rendering/style/RenderStyle.h:
+    (WebCore::RenderStyle::hasExplicitlySetBorderRadius const):
+    (WebCore::RenderStyle::setHasExplicitlySetBorderRadius):
+    (WebCore::RenderStyle::NonInheritedFlags::operator== const):
+    (WebCore::RenderStyle::NonInheritedFlags::copyNonInheritedFrom):
+    * style/StyleBuilderCustom.h:
+    (WebCore::Style::BuilderCustom::applyInheritBorderBottomLeftRadius):
+    (WebCore::Style::BuilderCustom::applyValueBorderBottomLeftRadius):
+    (WebCore::Style::BuilderCustom::applyInheritBorderBottomRightRadius):
+    (WebCore::Style::BuilderCustom::applyValueBorderBottomRightRadius):
+    (WebCore::Style::BuilderCustom::applyInheritBorderTopLeftRadius):
+    (WebCore::Style::BuilderCustom::applyValueBorderTopLeftRadius):
+    (WebCore::Style::BuilderCustom::applyInheritBorderTopRightRadius):
+    (WebCore::Style::BuilderCustom::applyValueBorderTopRightRadius):
+    
+    LayoutTests:
+    
+    * TestExpectations:
+    * fast/css/appearance-apple-pay-button-border-radius-expected.html: Added.
+    * fast/css/appearance-apple-pay-button-border-radius.html: Added.
+    * fast/css/appearance-apple-pay-button-expected.html:
+    * fast/css/appearance-apple-pay-button.html:
+    * fast/css/getComputedStyle/computed-style-apple-pay-button-expected.txt: Added.
+    * fast/css/getComputedStyle/computed-style-apple-pay-button.html: Added.
+    * platform/mac/TestExpectations:
+    
+    
+    git-svn-id: https://svn.webkit.org/repository/webkit/trunk@262279 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+    2020-05-28  Andy Estes  <aes...@apple.com>
+
+            [Apple Pay] Buttons render with a corner radius of PKApplePayButtonDefaultCornerRadius even when explicitly specifying "border-radius: 0px"
+            https://bugs.webkit.org/show_bug.cgi?id=212476
+            <rdar://problem/63401433>
+
+            Reviewed by Antti Koivisto.
+
+            r256648 added support for customizing the corner radius of Apple Pay buttons using the
+            border-radius CSS property. PassKit buttons have a default corner radius of 4, but
+            border-radius has an initial value of 0, so to maintain web compatibility with existing
+            buttons we only want to customize the corner radius when a border-radius value has been
+            explicitly specified (otherwise, previously rounded buttons would all become squared off due
+            to border-radius's initial value).
+
+            r256648 checked for a non-initial border-radius by calling RenderStyle::hasBorderRadius, but
+            this check does not distinguish between an initial value and an explicit declaration of
+            "border-radius: 0px". As a result, authors are unable to create Apple Pay buttons with
+            square corners.
+
+            This patch adds a flag to RenderStyle::NonInheritedFlags that tracks whether any
+            border-radius longhand has been explicitly set (or has explicitly inherited an explicitly set
+            value), and uses that flag to adjust the computed border radius for Apple Pay buttons.
+
+            The addition of RenderStyle::NonInheritedFlags::hasExplicitlySetBorderRadius did not change
+            the size of RenderStyle.
+
+            Tests: fast/css/appearance-apple-pay-button-border-radius.html
+                   fast/css/getComputedStyle/computed-style-apple-pay-button.html
+
+            * css/CSSProperties.json:
+            * rendering/RenderThemeCocoa.mm:
+            (WebCore::RenderThemeCocoa::adjustApplePayButtonStyle const):
+            (WebCore::RenderThemeCocoa::paintApplePayButton):
+            (WebCore::largestCornerRadius): Deleted.
+            * rendering/style/RenderStyle.cpp:
+            (WebCore::RenderStyle::RenderStyle):
+            * rendering/style/RenderStyle.h:
+            (WebCore::RenderStyle::hasExplicitlySetBorderRadius const):
+            (WebCore::RenderStyle::setHasExplicitlySetBorderRadius):
+            (WebCore::RenderStyle::NonInheritedFlags::operator== const):
+            (WebCore::RenderStyle::NonInheritedFlags::copyNonInheritedFrom):
+            * style/StyleBuilderCustom.h:
+            (WebCore::Style::BuilderCustom::applyInheritBorderBottomLeftRadius):
+            (WebCore::Style::BuilderCustom::applyValueBorderBottomLeftRadius):
+            (WebCore::Style::BuilderCustom::applyInheritBorderBottomRightRadius):
+            (WebCore::Style::BuilderCustom::applyValueBorderBottomRightRadius):
+            (WebCore::Style::BuilderCustom::applyInheritBorderTopLeftRadius):
+            (WebCore::Style::BuilderCustom::applyValueBorderTopLeftRadius):
+            (WebCore::Style::BuilderCustom::applyInheritBorderTopRightRadius):
+            (WebCore::Style::BuilderCustom::applyValueBorderTopRightRadius):
+
+2020-06-02  Alan Coon  <alanc...@apple.com>
+
         Cherry-pick r262208. rdar://problem/63891613
 
     REGRESSION (r254541): Valid mime types can only be added to the HashSet of the supported types for encoding

Modified: branches/safari-610.1.15-branch/Source/WebCore/css/CSSProperties.json (262441 => 262442)


--- branches/safari-610.1.15-branch/Source/WebCore/css/CSSProperties.json	2020-06-02 21:57:58 UTC (rev 262441)
+++ branches/safari-610.1.15-branch/Source/WebCore/css/CSSProperties.json	2020-06-02 21:58:03 UTC (rev 262442)
@@ -1431,7 +1431,7 @@
                     "-webkit-border-bottom-left-radius"
                 ],
                 "initial": "initialBorderRadius",
-                "converter": "Radius"
+                "custom": "Inherit|Value"
             },
             "specification": {
                 "category": "css-backgrounds",
@@ -1444,7 +1444,7 @@
                     "-webkit-border-bottom-right-radius"
                 ],
                 "initial": "initialBorderRadius",
-                "converter": "Radius"
+                "custom": "Inherit|Value"
             },
             "specification": {
                 "category": "css-backgrounds",
@@ -1933,7 +1933,7 @@
                     "-webkit-border-top-left-radius"
                 ],
                 "initial": "initialBorderRadius",
-                "converter": "Radius"
+                "custom": "Inherit|Value"
             },
             "specification": {
                 "category": "css-backgrounds",
@@ -1946,7 +1946,7 @@
                     "-webkit-border-top-right-radius"
                 ],
                 "initial": "initialBorderRadius",
-                "converter": "Radius"
+                "custom": "Inherit|Value"
             },
             "specification": {
                 "category": "css-backgrounds",

Modified: branches/safari-610.1.15-branch/Source/WebCore/rendering/RenderThemeCocoa.mm (262441 => 262442)


--- branches/safari-610.1.15-branch/Source/WebCore/rendering/RenderThemeCocoa.mm	2020-06-02 21:57:58 UTC (rev 262441)
+++ branches/safari-610.1.15-branch/Source/WebCore/rendering/RenderThemeCocoa.mm	2020-06-02 21:58:03 UTC (rev 262442)
@@ -61,6 +61,11 @@
     else
         style.setMinWidth(Length(applePayButtonMinimumWidth, Fixed));
     style.setMinHeight(Length(applePayButtonMinimumHeight, Fixed));
+
+    if (!style.hasExplicitlySetBorderRadius()) {
+        auto cornerRadius = PAL::get_PassKit_PKApplePayButtonDefaultCornerRadius();
+        style.setBorderRadius({ { cornerRadius, Fixed }, { cornerRadius, Fixed } });
+    }
 }
 
 static PKPaymentButtonStyle toPKPaymentButtonStyle(ApplePayButtonStyle style)
@@ -97,12 +102,15 @@
     }
 }
 
-static CGFloat largestCornerRadius(const RenderStyle& style)
+bool RenderThemeCocoa::paintApplePayButton(const RenderObject& renderer, const PaintInfo& paintInfo, const IntRect& paintRect)
 {
-    if (!style.hasBorderRadius())
-        return PAL::get_PassKit_PKApplePayButtonDefaultCornerRadius();
+    GraphicsContextStateSaver stateSaver(paintInfo.context());
 
-    return std::max<CGFloat>({
+    paintInfo.context().setShouldSmoothFonts(true);
+    paintInfo.context().scale(FloatSize(1, -1));
+
+    auto& style = renderer.style();
+    auto largestCornerRadius = std::max<CGFloat>({
         style.borderTopLeftRadius().height.value(),
         style.borderTopLeftRadius().width.value(),
         style.borderTopRightRadius().height.value(),
@@ -112,16 +120,8 @@
         style.borderBottomRightRadius().height.value(),
         style.borderBottomRightRadius().width.value()
     });
-}
 
-bool RenderThemeCocoa::paintApplePayButton(const RenderObject& renderer, const PaintInfo& paintInfo, const IntRect& paintRect)
-{
-    GraphicsContextStateSaver stateSaver(paintInfo.context());
-
-    paintInfo.context().setShouldSmoothFonts(true);
-    paintInfo.context().scale(FloatSize(1, -1));
-
-    PKDrawApplePayButtonWithCornerRadius(paintInfo.context().platformContext(), CGRectMake(paintRect.x(), -paintRect.maxY(), paintRect.width(), paintRect.height()), 1.0, largestCornerRadius(renderer.style()), toPKPaymentButtonType(renderer.style().applePayButtonType()), toPKPaymentButtonStyle(renderer.style().applePayButtonStyle()), renderer.style().locale());
+    PKDrawApplePayButtonWithCornerRadius(paintInfo.context().platformContext(), CGRectMake(paintRect.x(), -paintRect.maxY(), paintRect.width(), paintRect.height()), 1.0, largestCornerRadius, toPKPaymentButtonType(style.applePayButtonType()), toPKPaymentButtonStyle(style.applePayButtonStyle()), style.locale());
     return false;
 }
 

Modified: branches/safari-610.1.15-branch/Source/WebCore/rendering/style/RenderStyle.cpp (262441 => 262442)


--- branches/safari-610.1.15-branch/Source/WebCore/rendering/style/RenderStyle.cpp	2020-06-02 21:57:58 UTC (rev 262441)
+++ branches/safari-610.1.15-branch/Source/WebCore/rendering/style/RenderStyle.cpp	2020-06-02 21:58:03 UTC (rev 262442)
@@ -180,6 +180,7 @@
     m_nonInheritedFlags.unicodeBidi = initialUnicodeBidi();
     m_nonInheritedFlags.floating = static_cast<unsigned>(initialFloating());
     m_nonInheritedFlags.tableLayout = static_cast<unsigned>(initialTableLayout());
+    m_nonInheritedFlags.hasExplicitlySetBorderRadius = false;
     m_nonInheritedFlags.hasExplicitlySetDirection = false;
     m_nonInheritedFlags.hasExplicitlySetWritingMode = false;
     m_nonInheritedFlags.hasExplicitlySetTextAlign = false;

Modified: branches/safari-610.1.15-branch/Source/WebCore/rendering/style/RenderStyle.h (262441 => 262442)


--- branches/safari-610.1.15-branch/Source/WebCore/rendering/style/RenderStyle.h	2020-06-02 21:57:58 UTC (rev 262441)
+++ branches/safari-610.1.15-branch/Source/WebCore/rendering/style/RenderStyle.h	2020-06-02 21:58:03 UTC (rev 262442)
@@ -294,6 +294,7 @@
     const LengthSize& borderBottomLeftRadius() const { return m_surroundData->border.bottomLeftRadius(); }
     const LengthSize& borderBottomRightRadius() const { return m_surroundData->border.bottomRightRadius(); }
     bool hasBorderRadius() const { return m_surroundData->border.hasBorderRadius(); }
+    bool hasExplicitlySetBorderRadius() const { return m_nonInheritedFlags.hasExplicitlySetBorderRadius; }
 
     float borderLeftWidth() const { return m_surroundData->border.borderLeftWidth(); }
     BorderStyle borderLeftStyle() const { return m_surroundData->border.left().style(); }
@@ -859,6 +860,7 @@
 
     void setBorderRadius(LengthSize&&);
     void setBorderRadius(const IntSize&);
+    void setHasExplicitlySetBorderRadius(bool v) { m_nonInheritedFlags.hasExplicitlySetBorderRadius = v; }
 
     RoundedRect getRoundedBorderFor(const LayoutRect& borderRect, bool includeLogicalLeftEdge = true, bool includeLogicalRightEdge = true) const;
     RoundedRect getRoundedInnerBorderFor(const LayoutRect& borderRect, bool includeLogicalLeftEdge = true, bool includeLogicalRightEdge = true) const;
@@ -1800,6 +1802,7 @@
         unsigned floating : 2; // Float
         unsigned tableLayout : 1; // TableLayoutType
 
+        unsigned hasExplicitlySetBorderRadius : 1;
         unsigned hasExplicitlySetDirection : 1;
         unsigned hasExplicitlySetWritingMode : 1;
         unsigned hasExplicitlySetTextAlign : 1;
@@ -1931,6 +1934,7 @@
         && unicodeBidi == other.unicodeBidi
         && floating == other.floating
         && tableLayout == other.tableLayout
+        && hasExplicitlySetBorderRadius == other.hasExplicitlySetBorderRadius
         && hasExplicitlySetDirection == other.hasExplicitlySetDirection
         && hasExplicitlySetWritingMode == other.hasExplicitlySetWritingMode
         && hasExplicitlySetTextAlign == other.hasExplicitlySetTextAlign
@@ -1963,6 +1967,10 @@
     tableLayout = other.tableLayout;
     hasViewportUnits = other.hasViewportUnits;
     hasExplicitlyInheritedProperties = other.hasExplicitlyInheritedProperties;
+
+    // Unlike properties tracked by the other hasExplicitlySet* flags, border-radius is non-inherited
+    // and we need to remember whether it's been explicitly set when copying m_surroundData.
+    hasExplicitlySetBorderRadius = other.hasExplicitlySetBorderRadius;
 }
 
 inline bool RenderStyle::NonInheritedFlags::hasPseudoStyle(PseudoId pseudo) const

Modified: branches/safari-610.1.15-branch/Source/WebCore/style/StyleBuilderCustom.h (262441 => 262442)


--- branches/safari-610.1.15-branch/Source/WebCore/style/StyleBuilderCustom.h	2020-06-02 21:57:58 UTC (rev 262441)
+++ branches/safari-610.1.15-branch/Source/WebCore/style/StyleBuilderCustom.h	2020-06-02 21:58:03 UTC (rev 262442)
@@ -124,6 +124,15 @@
     // Custom handling of inherit + value setting only.
     static void applyInheritDisplay(BuilderState&);
     static void applyValueDisplay(BuilderState&, CSSValue&);
+    // FIXME: <https://webkit.org/b/212506> Teach makeprop.pl to generate setters for hasExplicitlySet* flags
+    static void applyInheritBorderBottomLeftRadius(BuilderState&);
+    static void applyValueBorderBottomLeftRadius(BuilderState&, CSSValue&);
+    static void applyInheritBorderBottomRightRadius(BuilderState&);
+    static void applyValueBorderBottomRightRadius(BuilderState&, CSSValue&);
+    static void applyInheritBorderTopLeftRadius(BuilderState&);
+    static void applyValueBorderTopLeftRadius(BuilderState&, CSSValue&);
+    static void applyInheritBorderTopRightRadius(BuilderState&);
+    static void applyValueBorderTopRightRadius(BuilderState&, CSSValue&);
 
     // Custom handling of value setting only.
     static void applyValueBaselineShift(BuilderState&, CSSValue&);
@@ -981,6 +990,54 @@
     builderState.setFontDescription(WTFMove(fontDescription));
 }
 
+inline void BuilderCustom::applyInheritBorderBottomLeftRadius(BuilderState& builderState)
+{
+    builderState.style().setBorderBottomLeftRadius(forwardInheritedValue(builderState.parentStyle().borderBottomLeftRadius()));
+    builderState.style().setHasExplicitlySetBorderRadius(builderState.parentStyle().hasExplicitlySetBorderRadius());
+}
+
+inline void BuilderCustom::applyValueBorderBottomLeftRadius(BuilderState& builderState, CSSValue& value)
+{
+    builderState.style().setBorderBottomLeftRadius(BuilderConverter::convertRadius(builderState, value));
+    builderState.style().setHasExplicitlySetBorderRadius(true);
+}
+
+inline void BuilderCustom::applyInheritBorderBottomRightRadius(BuilderState& builderState)
+{
+    builderState.style().setBorderBottomRightRadius(forwardInheritedValue(builderState.parentStyle().borderBottomRightRadius()));
+    builderState.style().setHasExplicitlySetBorderRadius(builderState.parentStyle().hasExplicitlySetBorderRadius());
+}
+
+inline void BuilderCustom::applyValueBorderBottomRightRadius(BuilderState& builderState, CSSValue& value)
+{
+    builderState.style().setBorderBottomRightRadius(BuilderConverter::convertRadius(builderState, value));
+    builderState.style().setHasExplicitlySetBorderRadius(true);
+}
+
+inline void BuilderCustom::applyInheritBorderTopLeftRadius(BuilderState& builderState)
+{
+    builderState.style().setBorderTopLeftRadius(forwardInheritedValue(builderState.parentStyle().borderTopLeftRadius()));
+    builderState.style().setHasExplicitlySetBorderRadius(builderState.parentStyle().hasExplicitlySetBorderRadius());
+}
+
+inline void BuilderCustom::applyValueBorderTopLeftRadius(BuilderState& builderState, CSSValue& value)
+{
+    builderState.style().setBorderTopLeftRadius(BuilderConverter::convertRadius(builderState, value));
+    builderState.style().setHasExplicitlySetBorderRadius(true);
+}
+
+inline void BuilderCustom::applyInheritBorderTopRightRadius(BuilderState& builderState)
+{
+    builderState.style().setBorderTopRightRadius(forwardInheritedValue(builderState.parentStyle().borderTopRightRadius()));
+    builderState.style().setHasExplicitlySetBorderRadius(builderState.parentStyle().hasExplicitlySetBorderRadius());
+}
+
+inline void BuilderCustom::applyValueBorderTopRightRadius(BuilderState& builderState, CSSValue& value)
+{
+    builderState.style().setBorderTopRightRadius(BuilderConverter::convertRadius(builderState, value));
+    builderState.style().setHasExplicitlySetBorderRadius(true);
+}
+
 inline bool BuilderCustom::isValidDisplayValue(BuilderState& builderState, DisplayType display)
 {
     if (is<SVGElement>(builderState.element()) && builderState.style().styleType() == PseudoId::None)
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to