git://git.webkit.org / WebKit-https.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 31296ab)
AR Badging on transparent thumbnail images makes the glyph look really dark
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 Jun 2018 00:09:08 +0000 (00:09 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 5 Jun 2018 00:09:08 +0000 (00:09 +0000)
https://bugs.webkit.org/show_bug.cgi?id=186289
<rdar://problem/40627111>

Reviewed by Anders Carlsson.

Source/WebCore:

Clip out the shape for the drop shadow, so that it isn't visible if
there is transparent pixel data on top of it.

* rendering/RenderThemeIOS.mm:
(WebCore::RenderThemeIOS::paintSystemPreviewBadge):

LayoutTests:

Update the test to exercise more background colors. Include the results for the AR badge.

* system-preview/badge-expected.html: Added.
* system-preview/badge.html:

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

LayoutTests/ChangeLog patch | blob | history
LayoutTests/system-preview/badge-expected.html [new file with mode: 0644] patch | blob
LayoutTests/system-preview/badge.html patch | blob | history
Source/WebCore/ChangeLog patch | blob | history
Source/WebCore/rendering/RenderThemeIOS.mm patch | blob | history

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index da8283b..e76c563 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,16 @@
+2018-06-04  Dean Jackson  <dino@apple.com>
+
+        AR Badging on transparent thumbnail images makes the glyph look really dark
+        https://bugs.webkit.org/show_bug.cgi?id=186289
+        <rdar://problem/40627111>
+
+        Reviewed by Anders Carlsson.
+
+        Update the test to exercise more background colors. Include the results for the AR badge.
+
+        * system-preview/badge-expected.html: Added.
+        * system-preview/badge.html:
+
 2018-06-04  Chris Dumez  <cdumez@apple.com>
 
         Update Fetch code to provide more useful exception messages
 2018-06-04  Chris Dumez  <cdumez@apple.com>
 
         Update Fetch code to provide more useful exception messages
diff --git a/LayoutTests/system-preview/badge-expected.html b/LayoutTests/system-preview/badge-expected.html
new file mode 100644 (file)
index 0000000..d454a71
--- /dev/null
+++ b/LayoutTests/system-preview/badge-expected.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width">
+<style>
+    a {
+        -webkit-clip-path: path("M 82 14 L 84 14 L 84 16 L 82 16 z");
+        text-decoration: none;
+    }
+    img {
+        width: 100px;
+        height: 100px;
+    }
+</style>
+<script>
+window.addEventListener("load", () => {
+    const canvas = document.createElement("canvas");
+    canvas.width = 10;
+    canvas.height = 10;
+    const ctx = canvas.getContext("2d");
+    const images = document.querySelectorAll("img");
+    images.forEach(image => {
+        ctx.clearRect(0, 0, 10, 10);
+        const color = image.getAttribute("data-color");
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, 10, 10);
+        image.src = canvas.toDataURL();
+    });
+}, false);
+</script>
+<a href="/">
+    <img data-color="rgb(255, 57, 57)">
+</a>
+<a href="/">
+    <img data-color="rgb(80, 169, 79)">
+</a>
+<a href="/">
+    <img data-color="rgb(102, 102, 255)">
+</a>
+<a href="/">
+    <img data-color="rgb(0, 255, 255)">
+</a>
+<a href="/">
+    <img data-color="rgb(156, 156, 156)">
+</a>
+<a href="/">
+    <img data-color="rgb(255, 176, 105)">
+</a>
+<a href="/">
+    <img data-color="white">
+</a>
+<a href="/">
+    <img data-color="rgb(118, 118, 118)">
+</a>
+<a href="/">
+    <img data-color="rgba(0, 0, 0, 0.0)">
+</a>
diff --git a/LayoutTests/system-preview/badge.html b/LayoutTests/system-preview/badge.html
index b1c38d2..e1620c0 100644 (file)
--- a/LayoutTests/system-preview/badge.html
+++ b/LayoutTests/system-preview/badge.html
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <!DOCTYPE html>
+<meta name="viewport" content="width=device-width">
 <style>
     a {
 <style>
     a {
-        -webkit-clip-path: path("M 82 14 L 86 14 L 86 18 L 82 18 z");
+        -webkit-clip-path: path("M 82 14 L 84 14 L 84 16 L 82 16 z");
+        text-decoration: none;
     }
     img {
         width: 100px;
     }
     img {
         width: 100px;
@@ -10,14 +12,44 @@
 </style>
 <script>
 window.addEventListener("load", () => {
 </style>
 <script>
 window.addEventListener("load", () => {
-    if (!window.internals)
-        return;
-
-    const link = document.querySelector("a");
-    link.rel = internals.systemPreviewRelType();
+    const canvas = document.createElement("canvas");
+    canvas.width = 10;
+    canvas.height = 10;
+    const ctx = canvas.getContext("2d");
+    const images = document.querySelectorAll("img");
+    images.forEach(image => {
+        ctx.clearRect(0, 0, 10, 10);
+        const color = image.getAttribute("data-color");
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, 10, 10);
+        image.src = canvas.toDataURL();
+    });
 }, false);
 </script>
 }, false);
 </script>
-<p>This test only works in WKTR or DRT.</p>
-<a href="/">
-    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAABlBMVEUAAP8AAAB7Yr8+AAAAEElEQVR4nGJgBQAAAP//AwAABwAGzHKrJgAAAABJRU5ErkJggg==">
+<a href="/" rel="ar">
+    <img data-color="red">
+</a>
+<a href="/" rel="ar">
+    <img data-color="green">
+</a>
+<a href="/" rel="ar">
+    <img data-color="blue">
+</a>
+<a href="/" rel="ar">
+    <img data-color="cyan">
+</a>
+<a href="/" rel="ar">
+    <img data-color="#777777">
+</a>
+<a href="/" rel="ar">
+    <img data-color="rgba(255, 128, 0, 0.5)">
+</a>
+<a href="/" rel="ar">
+    <img data-color="white">
+</a>
+<a href="/" rel="ar">
+    <img data-color="black">
+</a>
+<a href="/" rel="ar">
+    <img data-color="rgba(0, 0, 0, 0.0)">
 </a>
 </a>
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 26c545e..91abe21 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,17 @@
+2018-06-04  Dean Jackson  <dino@apple.com>
+
+        AR Badging on transparent thumbnail images makes the glyph look really dark
+        https://bugs.webkit.org/show_bug.cgi?id=186289
+        <rdar://problem/40627111>
+
+        Reviewed by Anders Carlsson.
+
+        Clip out the shape for the drop shadow, so that it isn't visible if
+        there is transparent pixel data on top of it.
+
+        * rendering/RenderThemeIOS.mm:
+        (WebCore::RenderThemeIOS::paintSystemPreviewBadge):
+
 2018-06-04  Timothy Hatcher  <timothy@apple.com>
 
         Selection color is dark when using Safari in dark mode.
 2018-06-04  Timothy Hatcher  <timothy@apple.com>
 
         Selection color is dark when using Safari in dark mode.
diff --git a/Source/WebCore/rendering/RenderThemeIOS.mm b/Source/WebCore/rendering/RenderThemeIOS.mm
index bc82cf1..782b4a1 100644 (file)
--- a/Source/WebCore/rendering/RenderThemeIOS.mm
+++ b/Source/WebCore/rendering/RenderThemeIOS.mm
@@ -1871,8 +1871,15 @@ void RenderThemeIOS::paintSystemPreviewBadge(Image& image, const PaintInfo& pain
     CGContextSetFillColorWithColor(ctx, circleColor.get());
     CGContextSetShadowWithColor(ctx, CGSizeZero, 16, shadowColor.get());
 
     CGContextSetFillColorWithColor(ctx, circleColor.get());
     CGContextSetShadowWithColor(ctx, CGSizeZero, 16, shadowColor.get());
 
+    // Clip out the circle to only show the shadow.
+    CGContextBeginPath(ctx);
+    CGContextAddRect(ctx, rect);
+    CGContextAddPath(ctx, circle.get());
+    CGContextClosePath(ctx);
+    CGContextEOClip(ctx);
+
     // Draw a slightly smaller circle with a shadow, otherwise we'll see a fringe of the solid
     // Draw a slightly smaller circle with a shadow, otherwise we'll see a fringe of the solid
-    // black circle around the edges of the cliped path below.
+    // black circle around the edges of the clipped path below.
     CGContextBeginPath(ctx);
     CGRect slightlySmallerAbsoluteBadgeRect = CGRectMake(absoluteBadgeRect.origin.x + 0.5, absoluteBadgeRect.origin.y + 0.5, badgeDimension - 1, badgeDimension - 1);
     RetainPtr<CGPathRef> slightlySmallerCircle = adoptCF(CGPathCreateWithRoundedRect(slightlySmallerAbsoluteBadgeRect, slightlySmallerAbsoluteBadgeRect.size.width / 2, slightlySmallerAbsoluteBadgeRect.size.height / 2, nullptr));
     CGContextBeginPath(ctx);
     CGRect slightlySmallerAbsoluteBadgeRect = CGRectMake(absoluteBadgeRect.origin.x + 0.5, absoluteBadgeRect.origin.y + 0.5, badgeDimension - 1, badgeDimension - 1);
     RetainPtr<CGPathRef> slightlySmallerCircle = adoptCF(CGPathCreateWithRoundedRect(slightlySmallerAbsoluteBadgeRect, slightlySmallerAbsoluteBadgeRect.size.width / 2, slightlySmallerAbsoluteBadgeRect.size.height / 2, nullptr));
Mirror of the WebKit open source project from svn.webkit.org.