Use the placeholder SVG as a mask to respect semantic color changes

https://bugs.webkit.org/show_bug.cgi?id=257881 rdar://110501919 Reviewed by Tim Nguyen. When used as a background-image, SVGs do not actually change color as expected in dark mode. Instead, the SVG is now used as a mask over a semantic background color that correctly changes when appropriate. Added simple mismatch test to verify that dark appearance leads to different results from light. * LayoutTests/fast/attachment/cocoa/wide-attachment-rendering-dark-expected-mismatch.html: Added. * LayoutTests/fast/attachment/cocoa/wide-attachment-rendering-dark.html: Added. * LayoutTests/platform/ios-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt: * LayoutTests/platform/mac-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt: * Source/WebCore/html/shadow/attachmentElementShadow.css: (div#attachment-placeholder): Canonical link: https://commits.webkit.org/265037@main
WebKit · Jun 9, 2023 · 09e4074 · 09e4074
1 parent 4d6c4b6
commit 09e4074
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 5 deletions.
diff --git a/LayoutTests/fast/attachment/cocoa/wide-attachment-rendering-dark-expected-mismatch.html b/LayoutTests/fast/attachment/cocoa/wide-attachment-rendering-dark-expected-mismatch.html
@@ -0,0 +1,14 @@
+<html><!-- webkit-test-runner [ AttachmentElementEnabled=true AttachmentWideLayoutEnabled=true ] -->
+<head>
+</head>
+<body style="color-scheme: only light;">
+<div>Blank: <attachment></attachment></div>
+<div>Title: <attachment title="Title" subtitle="Subtitle"></attachment></div>
+<div>and subtitle: <attachment title="Title" subtitle="Subtitle"></attachment></div>
+<div>Action: <attachment action="Tap to download" title="Title.txt" subtitle="Subtitle"></attachment></div>
+<div>Save: <attachment title="Title.pdf" save></attachment></div>
+<div>Zero progress: <attachment title="Title.pdf" progress="0"></attachment></div>
+<div>75% progress: <attachment title="Title.pdf" progress="0.75"></attachment></div>
+<div>100% progress: <attachment title="Title.pdf" progress="1"></attachment></div>
+</body>
+</html>
diff --git a/LayoutTests/fast/attachment/cocoa/wide-attachment-rendering-dark.html b/LayoutTests/fast/attachment/cocoa/wide-attachment-rendering-dark.html
@@ -0,0 +1,14 @@
+<html><!-- webkit-test-runner [ AttachmentElementEnabled=true AttachmentWideLayoutEnabled=true ] -->
+<head>
+</head>
+<body style="color-scheme: only dark;">
+<div>Blank: <attachment></attachment></div>
+<div>Title: <attachment title="Title" subtitle="Subtitle"></attachment></div>
+<div>and subtitle: <attachment title="Title" subtitle="Subtitle"></attachment></div>
+<div>Action: <attachment action="Tap to download" title="Title.txt" subtitle="Subtitle"></attachment></div>
+<div>Save: <attachment title="Title.pdf" save></attachment></div>
+<div>Zero progress: <attachment title="Title.pdf" progress="0"></attachment></div>
+<div>75% progress: <attachment title="Title.pdf" progress="0.75"></attachment></div>
+<div>100% progress: <attachment title="Title.pdf" progress="1"></attachment></div>
+</body>
+</html>
diff --git a/LayoutTests/platform/ios-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt b/LayoutTests/platform/ios-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt
@@ -57,7 +57,6 @@ layer at (0,0) size 800x888
         RenderAttachment {ATTACHMENT} at (97,16) size 339x92 [color=#007AFF]
           RenderGrid {DIV} at (0,0) size 338x92 [bgcolor=#74748014]
             RenderGrid {DIV} at (0,0) size 76x92
-              RenderBlock {DIV} at (10,18) size 56x56
             RenderGrid {DIV} at (76,0) size 262x92
               RenderGrid {DIV} at (6,37) size 230x18
       RenderBlock {DIV} at (0,654) size 784x109
@@ -141,3 +140,5 @@ layer at (195,825) size 230x17
         text run at (0,0) width 56: "\x{200E}\x{2068}Title\x{2069}\x{200B}.pdf"
 layer at (332,486) size 18x40
   RenderBlock {DIV} at (0,0) size 18x40 [bgcolor=#007AFF]
+layer at (116,587) size 56x56
+  RenderBlock {DIV} at (10,18) size 56x56 [bgcolor=#000000]
diff --git a/LayoutTests/platform/mac-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt b/LayoutTests/platform/mac-wk2/fast/attachment/cocoa/wide-attachment-rendering-expected.txt
@@ -57,7 +57,6 @@ layer at (0,0) size 785x672
         RenderAttachment {ATTACHMENT} at (97,1) size 267x80
           RenderGrid {DIV} at (0,0) size 266x80 [bgcolor=#0000000D]
             RenderGrid {DIV} at (0,0) size 68x80
-              RenderBlock {DIV} at (14,20) size 40x40
             RenderGrid {DIV} at (68,0) size 198x80
               RenderGrid {DIV} at (4,32) size 170x16
       RenderBlock {DIV} at (0,492) size 769x82
@@ -141,3 +140,5 @@ layer at (185,615) size 170x16
         text run at (0,0) width 56: "\x{200E}\x{2068}Title\x{2069}\x{200B}.pdf"
 layer at (270,366) size 14x21
   RenderBlock {DIV} at (0,0) size 14x21 [bgcolor=#0000007F]
+layer at (120,439) size 40x40
+  RenderBlock {DIV} at (14,20) size 40x40 [bgcolor=#000000D8]
diff --git a/Source/WebCore/html/shadow/attachmentElementShadow.css b/Source/WebCore/html/shadow/attachmentElementShadow.css
@@ -82,9 +82,10 @@ div#attachment-placeholder {
     width: 100%;
     aspect-ratio: 1;
     /* SF Symbol arrow.down.circle from https://copysfsymbols.apple.com, Regular */
-    background-image: url('data:image/svg+xml,<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path color="-apple-system-label" stroke="currentcolor" fill="currentcolor" d="M29.8071921,59.7070694 C45.9793308,59.7070694 59.4061427,46.3108516 59.4061427,30.1387129 C59.4061427,13.9665149 45.9486179,0.570297031 29.7764199,0.570297031 C13.6287565,0.570297031 0.238811882,13.9665149 0.238811882,30.1387129 C0.238811882,46.3108516 13.6594693,59.7070694 29.8071921,59.7070694 Z M29.8071921,54.7956773 C16.152202,54.7956773 5.20540991,43.8244159 5.20540991,30.1387129 C5.20540991,16.4529505 16.1214297,5.48168318 29.7764199,5.48168318 C43.4621823,5.48168318 54.4641625,16.4529505 54.4641625,30.1387129 C54.4641625,43.8244159 43.4928951,54.7956773 29.8071921,54.7956773 Z M29.8071921,15.3724159 C28.5699446,15.3724159 27.6526575,16.283406 27.6526575,17.5269505 L27.6526575,32.0522377 L27.8804198,38.1703961 L24.9597268,34.6780991 L21.5166773,31.1980397 C21.1471129,30.8284753 20.5993901,30.5700001 19.9776476,30.5700001 C18.7774099,30.5700001 17.8664198,31.4809902 17.8664198,32.6749307 C17.8664198,33.2659605 18.0634099,33.7829704 18.4574495,34.1707129 L28.1269545,43.8157426 C28.7299248,44.3942377 29.1916872,44.6220001 29.8071921,44.6220001 C30.4841822,44.6220001 30.9704199,44.3635248 31.5181426,43.8157426 L41.1939446,34.1707129 C41.5879842,33.7829704 41.7849743,33.2659605 41.7849743,32.6749307 C41.7849743,31.4809902 40.8432119,30.5700001 39.6737466,30.5700001 C39.052004,30.5700001 38.5042813,30.7977624 38.1347169,31.1980397 L34.7224397,34.6780991 L31.7646773,38.207406 L31.9924397,32.0522377 L31.9924397,17.5269505 C31.9924397,16.283406 31.0814496,15.3724159 29.8071921,15.3724159 Z" transform="translate(2 2)"></path></svg>');
-    background-repeat: no-repeat;
-    background-position: center;
+    mask-image: url('data:image/svg+xml,<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M29.8071921,59.7070694 C45.9793308,59.7070694 59.4061427,46.3108516 59.4061427,30.1387129 C59.4061427,13.9665149 45.9486179,0.570297031 29.7764199,0.570297031 C13.6287565,0.570297031 0.238811882,13.9665149 0.238811882,30.1387129 C0.238811882,46.3108516 13.6594693,59.7070694 29.8071921,59.7070694 Z M29.8071921,54.7956773 C16.152202,54.7956773 5.20540991,43.8244159 5.20540991,30.1387129 C5.20540991,16.4529505 16.1214297,5.48168318 29.7764199,5.48168318 C43.4621823,5.48168318 54.4641625,16.4529505 54.4641625,30.1387129 C54.4641625,43.8244159 43.4928951,54.7956773 29.8071921,54.7956773 Z M29.8071921,15.3724159 C28.5699446,15.3724159 27.6526575,16.283406 27.6526575,17.5269505 L27.6526575,32.0522377 L27.8804198,38.1703961 L24.9597268,34.6780991 L21.5166773,31.1980397 C21.1471129,30.8284753 20.5993901,30.5700001 19.9776476,30.5700001 C18.7774099,30.5700001 17.8664198,31.4809902 17.8664198,32.6749307 C17.8664198,33.2659605 18.0634099,33.7829704 18.4574495,34.1707129 L28.1269545,43.8157426 C28.7299248,44.3942377 29.1916872,44.6220001 29.8071921,44.6220001 C30.4841822,44.6220001 30.9704199,44.3635248 31.5181426,43.8157426 L41.1939446,34.1707129 C41.5879842,33.7829704 41.7849743,33.2659605 41.7849743,32.6749307 C41.7849743,31.4809902 40.8432119,30.5700001 39.6737466,30.5700001 C39.052004,30.5700001 38.5042813,30.7977624 38.1347169,31.1980397 L34.7224397,34.6780991 L31.7646773,38.207406 L31.9924397,32.0522377 L31.9924397,17.5269505 C31.9924397,16.283406 31.0814496,15.3724159 29.8071921,15.3724159 Z" transform="translate(2 2)"></path></svg>');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    background-color: -apple-system-label;
     margin: auto;
 }