Update AutoFill field icons to be SVG instead of PNG images.
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 4 Apr 2019 05:47:44 +0000 (05:47 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 4 Apr 2019 05:47:44 +0000 (05:47 +0000)
https://bugs.webkit.org/show_bug.cgi?id=196557
rdar://problem/48292514

Reviewed by Tim Horton.

Source/WebCore:

* css/html.css:
(input::-webkit-credentials-auto-fill-button):
(input::-webkit-contacts-auto-fill-button):
(input::-webkit-credit-card-auto-fill-button):

LayoutTests:

* platform/ios/fast/forms/auto-fill-button/input-auto-fill-button-expected.txt:
* platform/mac/fast/forms/auto-fill-button/input-contacts-auto-fill-button-expected.txt:
* platform/win/fast/forms/auto-fill-button/input-auto-fill-button-expected.txt:

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

LayoutTests/ChangeLog
LayoutTests/platform/ios/fast/forms/auto-fill-button/input-auto-fill-button-expected.txt
LayoutTests/platform/mac/fast/forms/auto-fill-button/input-auto-fill-button-expected.txt
LayoutTests/platform/win/fast/forms/auto-fill-button/input-auto-fill-button-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/css/html.css

index 94628b8..460ac15 100644 (file)
@@ -1,3 +1,15 @@
+2019-04-03  Timothy Hatcher  <timothy@apple.com>
+
+        Update AutoFill field icons to be SVG instead of PNG images.
+        https://bugs.webkit.org/show_bug.cgi?id=196557
+        rdar://problem/48292514
+
+        Reviewed by Tim Horton.
+
+        * platform/ios/fast/forms/auto-fill-button/input-auto-fill-button-expected.txt:
+        * platform/mac/fast/forms/auto-fill-button/input-contacts-auto-fill-button-expected.txt:
+        * platform/win/fast/forms/auto-fill-button/input-auto-fill-button-expected.txt:
+
 2019-04-03  Said Abou-Hallawa  <sabouhallawa@apple.com>
 
         REGRESSION (r220717): Assertion fires when animating an SVG rounded corner rect till it collapses
index 29cbf6d..87f8af1 100644 (file)
@@ -9,29 +9,29 @@ layer at (0,0) size 800x600
       RenderBlock {DIV} at (0,36) size 784x25
         RenderTextControl {INPUT} at (2,2) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
           RenderFlexibleBox {DIV} at (6,3) size 123x15
-            RenderBlock {DIV} at (0,0) size 107x14
+            RenderBlock {DIV} at (0,0) size 100x14
         RenderText {#text} at (139,1) size 5x19
           text run at (139,1) width 5: " "
         RenderTextControl {INPUT} at (145,2) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
           RenderFlexibleBox {DIV} at (6,3) size 123x15
-            RenderBlock {DIV} at (0,0) size 107x14
+            RenderBlock {DIV} at (0,0) size 100x14
         RenderText {#text} at (282,1) size 5x19
           text run at (282,1) width 5: " "
         RenderTextControl {INPUT} at (288,2) size 137x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
           RenderFlexibleBox {DIV} at (6,3) size 123x15
-            RenderBlock {DIV} at (0,0) size 107x14
+            RenderBlock {DIV} at (0,0) size 100x14
         RenderTextControl {INPUT} at (428,2) size 136x22 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
-layer at (17,49) size 106x14
-  RenderBlock {DIV} at (0,0) size 107x14
-layer at (160,49) size 106x14
-  RenderBlock {DIV} at (0,0) size 107x14
-layer at (303,49) size 106x14
-  RenderBlock {DIV} at (0,0) size 107x14
+layer at (17,49) size 100x14
+  RenderBlock {DIV} at (0,0) size 100x14
+layer at (160,49) size 100x14
+  RenderBlock {DIV} at (0,0) size 100x14
+layer at (303,49) size 100x14
+  RenderBlock {DIV} at (0,0) size 100x14
 layer at (443,49) size 122x14
   RenderBlock {DIV} at (6,3) size 123x15
-layer at (123,49) size 16x14
-  RenderImage {DIV} at (106,0) size 17x14
-layer at (266,49) size 16x14
-  RenderImage {DIV} at (106,0) size 17x14
-layer at (410,49) size 16x14
-  RenderImage {DIV} at (106,0) size 17x14
+layer at (123,49) size 22x14
+  RenderImage {DIV} at (106,0) size 23x14
+layer at (266,49) size 22x14
+  RenderImage {DIV} at (106,0) size 23x14
+layer at (410,49) size 22x14
+  RenderImage {DIV} at (106,0) size 23x14
index 04e6ea8..4d1d31d 100644 (file)
@@ -9,33 +9,33 @@ layer at (0,0) size 800x600
       RenderBlock {DIV} at (0,34) size 784x23
         RenderTextControl {INPUT} at (2,2) size 146x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
           RenderFlexibleBox {DIV} at (3,3) size 140x13
-            RenderBlock {DIV} at (0,0) size 120x13
+            RenderBlock {DIV} at (0,0) size 113x13
         RenderText {#text} at (149,2) size 5x18
           text run at (149,2) width 5: " "
         RenderTextControl {INPUT} at (155,2) size 147x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
           RenderFlexibleBox {DIV} at (3,3) size 140x13
-            RenderBlock {DIV} at (0,0) size 120x13
+            RenderBlock {DIV} at (0,0) size 113x13
         RenderText {#text} at (303,2) size 5x18
           text run at (303,2) width 5: " "
         RenderTextControl {INPUT} at (309,2) size 147x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
           RenderFlexibleBox {DIV} at (3,3) size 140x13
-            RenderBlock {DIV} at (0,0) size 120x13
+            RenderBlock {DIV} at (0,0) size 113x13
         RenderTextControl {INPUT} at (459,2) size 147x19 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
           RenderFlexibleBox {DIV} at (3,3) size 140x13
-            RenderBlock {DIV} at (0,0) size 120x13
-layer at (13,47) size 120x13
-  RenderBlock {DIV} at (0,0) size 120x13
-layer at (167,47) size 120x13
-  RenderBlock {DIV} at (0,0) size 120x13
-layer at (321,47) size 120x13
-  RenderBlock {DIV} at (0,0) size 120x13
-layer at (471,47) size 120x13
-  RenderBlock {DIV} at (0,0) size 120x13
-layer at (136,48) size 15x12
-  RenderBlock {DIV} at (122,0) size 16x13 [bgcolor=#000000]
-layer at (290,48) size 15x12
-  RenderBlock {DIV} at (122,0) size 16x13 [bgcolor=#000000]
-layer at (444,48) size 15x12
-  RenderBlock {DIV} at (122,0) size 16x13 [bgcolor=#000000]
-layer at (594,48) size 15x12
-  RenderBlock {DIV} at (122,0) size 16x13 [bgcolor=#000000]
+            RenderBlock {DIV} at (0,0) size 113x13
+layer at (13,47) size 113x13
+  RenderBlock {DIV} at (0,0) size 113x13
+layer at (167,47) size 113x13
+  RenderBlock {DIV} at (0,0) size 113x13
+layer at (321,47) size 113x13
+  RenderBlock {DIV} at (0,0) size 113x13
+layer at (471,47) size 113x13
+  RenderBlock {DIV} at (0,0) size 113x13
+layer at (129,48) size 22x12
+  RenderBlock {DIV} at (115,0) size 23x13 [bgcolor=#000000]
+layer at (283,48) size 22x12
+  RenderBlock {DIV} at (115,0) size 23x13 [bgcolor=#000000]
+layer at (437,48) size 22x12
+  RenderBlock {DIV} at (115,0) size 23x13 [bgcolor=#000000]
+layer at (587,48) size 22x12
+  RenderBlock {DIV} at (115,0) size 23x13 [bgcolor=#000000]
index 891867f..2c9a3e6 100644 (file)
@@ -9,29 +9,29 @@ layer at (0,0) size 800x600
       RenderBlock {DIV} at (0,34) size 784x25
         RenderTextControl {INPUT} at (2,2) size 149x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
           RenderFlexibleBox {DIV} at (2,3) size 145x15
-            RenderBlock {DIV} at (0,0) size 125x15
+            RenderBlock {DIV} at (0,0) size 118x15
         RenderText {#text} at (153,3) size 4x18
           text run at (153,3) width 4: " "
         RenderTextControl {INPUT} at (159,2) size 149x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
           RenderFlexibleBox {DIV} at (2,3) size 145x15
-            RenderBlock {DIV} at (0,0) size 125x15
+            RenderBlock {DIV} at (0,0) size 118x15
         RenderText {#text} at (310,3) size 4x18
           text run at (310,3) width 4: " "
         RenderTextControl {INPUT} at (316,2) size 149x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
           RenderFlexibleBox {DIV} at (2,3) size 145x15
-            RenderBlock {DIV} at (0,0) size 125x15
+            RenderBlock {DIV} at (0,0) size 118x15
         RenderTextControl {INPUT} at (469,2) size 149x21 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
-layer at (12,47) size 125x15
-  RenderBlock {DIV} at (0,0) size 125x15
-layer at (169,47) size 125x15
-  RenderBlock {DIV} at (0,0) size 125x15
-layer at (326,47) size 125x15
-  RenderBlock {DIV} at (0,0) size 125x15
+layer at (12,47) size 118x15
+  RenderBlock {DIV} at (0,0) size 118x15
+layer at (169,47) size 118x15
+  RenderBlock {DIV} at (0,0) size 118x15
+layer at (326,47) size 118x15
+  RenderBlock {DIV} at (0,0) size 118x15
 layer at (479,47) size 145x15
   RenderBlock {DIV} at (2,3) size 145x15
-layer at (140,49) size 15x12
-  RenderBlock {DIV} at (128,1) size 15x13 [bgcolor=#000000]
-layer at (297,49) size 15x12
-  RenderBlock {DIV} at (128,1) size 15x13 [bgcolor=#000000]
-layer at (454,49) size 15x12
-  RenderBlock {DIV} at (128,1) size 15x13 [bgcolor=#000000]
+layer at (133,49) size 22x12
+  RenderBlock {DIV} at (121,1) size 22x13 [bgcolor=#000000]
+layer at (290,49) size 22x12
+  RenderBlock {DIV} at (121,1) size 22x13 [bgcolor=#000000]
+layer at (447,49) size 22x12
+  RenderBlock {DIV} at (121,1) size 22x13 [bgcolor=#000000]
index a37d193..2a8a666 100644 (file)
@@ -1,3 +1,16 @@
+2019-04-03  Timothy Hatcher  <timothy@apple.com>
+
+        Update AutoFill field icons to be SVG instead of PNG images.
+        https://bugs.webkit.org/show_bug.cgi?id=196557
+        rdar://problem/48292514
+
+        Reviewed by Tim Horton.
+
+        * css/html.css:
+        (input::-webkit-credentials-auto-fill-button):
+        (input::-webkit-contacts-auto-fill-button):
+        (input::-webkit-credit-card-auto-fill-button):
+
 2019-04-03  Simon Fraser  <simon.fraser@apple.com>
 
         Simplify some "programmaticScroll" code paths
index 5587ea5..8220806 100644 (file)
@@ -566,9 +566,9 @@ input::-webkit-strong-password-auto-fill-button {
 }
 
 input::-webkit-credentials-auto-fill-button {
-    -webkit-mask-image: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAMCAYAAAC9QufkAAAAAXNSR0IB2cksfwAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAADyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE1LTA0LTAzVDE2OjA2OjI1PC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOkNyZWF0ZURhdGU+MjAxNS0wNC0wM1QxNjowMzoxNjwveG1wOkNyZWF0ZURhdGU+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4xNTwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4xMjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoz37ZdAAAA5ElEQVQoFY2RsQ5BQRBFd9EgEYXv8QlaEqVGpfUPao3oKXyEQiJI1ERESaGmwnPu2k2QJ2uS82Z2du7s7jyTJInBWnCABeygoXwM6kwN1GELFo7wgOo/4gmFEovzWzyMiTMUlyFYJQT4wlucGko8T90xZv0j/5EusVpCuLr8FPK6NraHPmT8Oks8gI2bKEEOZhAauEJf3PX5Eb4ImpEG2gni0NWJvwdFYRvuoIHeoOUa++56+wpSxb6myf4J6qG5VWCt1ckPvHsksf531HSiDJ1VV9n15eJfJ+YkvWcMF+jFZa+KJ554xIc+jempAAAAAElFTkSuQmCC") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYCAYAAADtaU2/AAAAAXNSR0IB2cksfwAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAADyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE1LTA0LTAzVDE2OjA2OjIxPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOkNyZWF0ZURhdGU+MjAxNS0wNC0wM1QxNjowMzoyNTwveG1wOkNyZWF0ZURhdGU+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4zMDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgpGMDB3AAAB8UlEQVRIDbVWO07DQBS0QSJUNJQcAloOQMEZ6InSUMEBkFJEQihQkQKJklQUlFBQQoH4SHAKJDokAgIz4+wLs5u15RjypOF9dvaN197dkCS/NodwC7gG3hxuXI1jUcuyLKkDa7aE4B7IHM7hCcs5Rs6Y1RHlHBpXo6JXeXX45xLOxB8QN2QsD+sKz2B2E1iRhqnEsxIvI96U/M8hv6mtyjxXehGpk+tZ3RVzdQOgcPN4KkPuvNbse2mtSsxXPYl9TkIu41L4rowQjD0Fee2UwqcTzA65/TRNB0CzSg/ygHegT34D4FGxjVXkHx0XbmQfiIzfKtto4LWEy3m58XLQs2zNzPPByAltGwXj0EfFUecbUd4O8pFxZ98CSrC4bNfvypxvxBu6cubAl3DaRSfBxNRjXtxckw5GjU+RXJweUNGOPRTqnrWRWQP1HkkTaRSK98CLioYr5vV4BqigxarlxSbsmu0XzO8qLxRmw/WCiRyLmjYEgTfhEWAPTM88VV4ozDP9HEyyBijHLdKQ4l2AR+YAGBMNhcFJVgETU8+xqIXCVXNtxm9cdJyU58VVhUKe/khwB+55XaeYqDC/zdoUtbzWFDPj7fQCLFjB+Vf4xaA2SvkK65iumLvwJNLkOFL79xJXfQhwlQTjsnu61r+2fEs/b4ZbzrEPMzEAAAAASUVORK5CYII=") 2x);
-    -webkit-mask-size: 15px 12px;
-    width: 15px;
+    -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 44 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M 30.25 9.25 L 36.5 15.75 L 42.75 9.25" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><g><path d="M 16 3.5 C 16 2.672 16.672 2 17.5 2 C 18.3 2 19 2.7 19 3.5 C 19 4.3 18.3 5 17.5 5 C 16.7 5 16 4.3 16 3.5 Z M 11 6.5 C 11 10.1 13.9 13 17.5 13 C 21.1 13 24 10.1 24 6.5 C 24 2.9 21.1 0 17.5 0 C 13.9 0 11 2.9 11 6.5 Z"/><path d="M 20 17.3 L 20 18.6 L 20.9 19.9 C 21 20 21 20 21 20 L 17.7 23.8 C 17.7 23.8 17.7 23.8 17.7 23.8 C 17.5 23.9 17.4 23.9 17.3 23.8 L 15 21 L 15 11 L 20 11 L 20 14.8 L 21 15.9 C 21 16 21 16 20.9 16.1 L 20 17.3 Z M 17 13 L 17 21.3 L 17.5 21.8 L 18 21.3 L 18 13 L 17 13 Z"/></g></svg>');
+    -webkit-mask-size: 22px 12px;
+    width: 22px;
     height: 12px;
     margin-left: 3px;
     margin-right: 2px;
@@ -586,7 +586,7 @@ input::-webkit-credentials-auto-fill-button:active {
 }
 
 input::-webkit-contacts-auto-fill-button {
-    -webkit-mask-image: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAMCAYAAABm+U3GAAAAAXNSR0IArs4c6QAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAADzWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE2LTAzLTE2VDE0OjM4OjM5PC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOkNyZWF0ZURhdGU+MjAxNS0wNC0wM1QxNjowMzoxNjwveG1wOkNyZWF0ZURhdGU+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT42NTUzNTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MjI8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTI8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KDsFf/AAAALpJREFUOMtjYMAEjECcAcTXgPgBEPcBMQ8DHvD//38MjA0UgtSi4UpqGDwdi8GTqGFwEz1dPJkaBttjMdgah5l3gHgKEDNBDWMG4plAfB2XI14hGfoEj2PLoWqWATE3EK8G4n9AnIdLwyQkg7sY8ANQ0vwLxK+B+A8QJ+MKCnUgPoZk8D4gFiVgeDQQPwficPQwFoCmhudYwheGQeHZAFVLVORpAPFLPAai4xdQXxE0eDYJhsLwNEIGAwBaGtf92KSJygAAAABJRU5ErkJggg==") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAYCAYAAACBbx+6AAAAAXNSR0IArs4c6QAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAADzWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE2LTAzLTE2VDE0OjM4OjQ5PC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOkNyZWF0ZURhdGU+MjAxNS0wNC0wM1QxNjowMzoyNTwveG1wOkNyZWF0ZURhdGU+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT42NTUzNTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+NDQ8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MjQ8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KZQbeMQAAAZxJREFUWMPNlrFKA0EQhhMUBVErCy0ECxFUECzEWt9ALNMbDkv1AQSLgEhEEG0sBAsbEYKFj6AIVtoJQTClBALRmBjXf2AP1mNvM3vZizvwwR3szX0sszObyfBjFhyBV1AFJbAGBrkJhBB/npPAiT4QgBb9R8MbmPFJ+DhGVOXKF+F+UGcI130RHmbIhoz4UhJNhmxL1roXwmWG8IsvJTEEnhnCj77s8LRFDU9aCF+CL5BnSuZBQ35njCyoMGQrci1XWD0XQQfZQFnb5JTeBUP43LKGtyPfB4adVdftcP5D7erDIPsJRm0PHWJXyfEDchHZHGgra/a4XYLiwSB8l/QugSgoedqhtEa2YNPWKA4MwvvdXH400qdxsjbCEzFlUQNj3d7WDBtSTDI4KAbAtyZhg9MdGMKU4ySSm96zSYXnDSUx5eI+LKWLsnUd6mQ7CdPkWgAb4MkgfA/Wwfh/TbplOVFqFlNOvcyfgaVeCM+B6wSScdyAxbSEN+VsF46hg7rlWnhVThqREpR7xaXwbYqyISWXwtUeCL+7Ev4FRky1YsGhhMUAAAAASUVORK5CYII=") 2x);
+    -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 44 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M 30.25 9.25 L 36.5 15.75 L 42.75 9.25" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="11" fill="none" stroke="black" stroke-width="2"/><path d="M 12 11.5 C 10.3 11.5 9 10.1 9 8.2 C 9 6.5 10.3 5 12 5 C 13.6 5 15 6.5 15 8.2 C 15 10.1 13.6 11.5 12 11.5 Z M 6.6 18 C 6.2 18 6 17.7 6 17.4 C 6 16.2 7.9 13 12 13 C 16.1 13 18 16.2 18 17.4 C 18 17.7 17.8 18 17.4 18 L 6.6 18 Z"/></svg>');
     -webkit-mask-size: 22px 12px;
     width: 22px;
     height: 12px;
@@ -606,7 +606,7 @@ input::-webkit-contacts-auto-fill-button:active {
 }
 
 input::-webkit-credit-card-auto-fill-button {
-    -webkit-mask-image: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAYCAYAAACBbx+6AAAAAXNSR0IArs4c6QAAAeBJREFUWAntlrtOAkEUhmFZlhgwAQswkCgF0HCRkBAkuwEKex/Ays7aV/AR7K19ACspLLSxNVb2tlYWihc8P9mfDBtuq0OEhEnImTlzzjc/Z2dnJxBYt3UFVrwC6XR6p1arXVuW9S5/pa/jBxaYYGsvj4C7OkSOY1Sr1RvtglnZSqXi6IK7rH4oFPrUxVQ53AaqT0d/IVxTUYYFlr4ZS6/QI/DfBLdarXO8P47jXIi1PLqGww1pzWbzErGdTucME9xri7LDxdVONBp95dr1ev0KwtR59GOx2KZ70gy0pVKpZ/gpFH2dbSq33W6fBoPBb1lwEAdhEEgBiURiq1gs3nPeMIwveRrHmJ8KJuAXdiZXtsUJhFADBEJoMpnczufzD/Sbpvlh2/YRNcwEM1C1ctbeEkjr+hg2FxdCIIgMCM1ms08cRyKRt0ajcUgo7FxgNcHtM89rGUo/xxMtBEGYBDBnYLHP5Ut84E1kkNc/a8w8r2Ue/RxPtRCmvojxePylVCo1xyX5AhMwbkuUy+U7zov1zRWB+9gOuVzusVAo7Cmska5v8Ej25MFCuIYcyD2s6V5YJi/vY0YqbSNcLj84AfS2lbteuhf4Lj59Ugo+xj/ZcDjcQyEymcyu3vKuaYuvwA+kHP60wc4u3QAAAABJRU5ErkJggg==") 2x);
+    -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 44 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M 30.25 9.25 L 36.5 15.75 L 42.75 9.25" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><rect x="1" y="4" width="22" height="16" rx="2" fill="none" stroke="black" stroke-width="2"/><rect x="2" y="8" width="20" height="3"/><rect x="3" y="12" width="5" height="4" rx="1"/></svg>');
     -webkit-mask-size: 22px 12px;
     width: 22px;
     height: 12px;