Skip to content

Commit 408534e

Browse files
grorggrorg
committed
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. 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: Canonical link: https://commits.webkit.org/201668@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@232487 268f45cc-cd09-0410-ab3c-d52691b4dbfc
1 parent e10d63e commit 408534e

5 files changed

Lines changed: 131 additions & 10 deletions

File tree

‎LayoutTests/ChangeLog‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1+
2018-06-04 Dean Jackson <dino@apple.com>
2+
3+
AR Badging on transparent thumbnail images makes the glyph look really dark
4+
https://bugs.webkit.org/show_bug.cgi?id=186289
5+
<rdar://problem/40627111>
6+
7+
Reviewed by Anders Carlsson.
8+
9+
Update the test to exercise more background colors. Include the results for the AR badge.
10+
11+
* system-preview/badge-expected.html: Added.
12+
* system-preview/badge.html:
13+
114
2018-06-04 Chris Dumez <cdumez@apple.com>
215

316
Update Fetch code to provide more useful exception messages

‎LayoutTests/system-preview/badge-expected.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<meta name="viewport" content="width=device-width">
3+
<style>
4+
a {
5+
-webkit-clip-path: path("M 82 14 L 84 14 L 84 16 L 82 16 z");
6+
text-decoration: none;
7+
}
8+
img {
9+
width: 100px;
10+
height: 100px;
11+
}
12+
</style>
13+
<script>
14+
window.addEventListener("load", () => {
15+
const canvas = document.createElement("canvas");
16+
canvas.width = 10;
17+
canvas.height = 10;
18+
const ctx = canvas.getContext("2d");
19+
const images = document.querySelectorAll("img");
20+
images.forEach(image => {
21+
ctx.clearRect(0, 0, 10, 10);
22+
const color = image.getAttribute("data-color");
23+
ctx.fillStyle = color;
24+
ctx.fillRect(0, 0, 10, 10);
25+
image.src = canvas.toDataURL();
26+
});
27+
}, false);
28+
</script>
29+
<a href="/">
30+
<img data-color="rgb(255, 57, 57)">
31+
</a>
32+
<a href="/">
33+
<img data-color="rgb(80, 169, 79)">
34+
</a>
35+
<a href="/">
36+
<img data-color="rgb(102, 102, 255)">
37+
</a>
38+
<a href="/">
39+
<img data-color="rgb(0, 255, 255)">
40+
</a>
41+
<a href="/">
42+
<img data-color="rgb(156, 156, 156)">
43+
</a>
44+
<a href="/">
45+
<img data-color="rgb(255, 176, 105)">
46+
</a>
47+
<a href="/">
48+
<img data-color="white">
49+
</a>
50+
<a href="/">
51+
<img data-color="rgb(118, 118, 118)">
52+
</a>
53+
<a href="/">
54+
<img data-color="rgba(0, 0, 0, 0.0)">
55+
</a>

‎LayoutTests/system-preview/badge.html‎

Lines changed: 41 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<!DOCTYPE html>
2+
<meta name="viewport" content="width=device-width">
23
<style>
34
a {
4-
-webkit-clip-path: path("M 82 14 L 86 14 L 86 18 L 82 18 z");
5+
-webkit-clip-path: path("M 82 14 L 84 14 L 84 16 L 82 16 z");
6+
text-decoration: none;
57
}
68
img {
79
width: 100px;
@@ -10,14 +12,44 @@
1012
</style>
1113
<script>
1214
window.addEventListener("load", () => {
13-
if (!window.internals)
14-
return;
15-
16-
const link = document.querySelector("a");
17-
link.rel = internals.systemPreviewRelType();
15+
const canvas = document.createElement("canvas");
16+
canvas.width = 10;
17+
canvas.height = 10;
18+
const ctx = canvas.getContext("2d");
19+
const images = document.querySelectorAll("img");
20+
images.forEach(image => {
21+
ctx.clearRect(0, 0, 10, 10);
22+
const color = image.getAttribute("data-color");
23+
ctx.fillStyle = color;
24+
ctx.fillRect(0, 0, 10, 10);
25+
image.src = canvas.toDataURL();
26+
});
1827
}, false);
1928
</script>
20-
<p>This test only works in WKTR or DRT.</p>
21-
<a href="/">
22-
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAABlBMVEUAAP8AAAB7Yr8+AAAAEElEQVR4nGJgBQAAAP//AwAABwAGzHKrJgAAAABJRU5ErkJggg==">
29+
<a href="/" rel="ar">
30+
<img data-color="red">
31+
</a>
32+
<a href="/" rel="ar">
33+
<img data-color="green">
34+
</a>
35+
<a href="/" rel="ar">
36+
<img data-color="blue">
37+
</a>
38+
<a href="/" rel="ar">
39+
<img data-color="cyan">
40+
</a>
41+
<a href="/" rel="ar">
42+
<img data-color="#777777">
43+
</a>
44+
<a href="/" rel="ar">
45+
<img data-color="rgba(255, 128, 0, 0.5)">
46+
</a>
47+
<a href="/" rel="ar">
48+
<img data-color="white">
49+
</a>
50+
<a href="/" rel="ar">
51+
<img data-color="black">
52+
</a>
53+
<a href="/" rel="ar">
54+
<img data-color="rgba(0, 0, 0, 0.0)">
2355
</a>

‎Source/WebCore/ChangeLog‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1+
2018-06-04 Dean Jackson <dino@apple.com>
2+
3+
AR Badging on transparent thumbnail images makes the glyph look really dark
4+
https://bugs.webkit.org/show_bug.cgi?id=186289
5+
<rdar://problem/40627111>
6+
7+
Reviewed by Anders Carlsson.
8+
9+
Clip out the shape for the drop shadow, so that it isn't visible if
10+
there is transparent pixel data on top of it.
11+
12+
* rendering/RenderThemeIOS.mm:
13+
(WebCore::RenderThemeIOS::paintSystemPreviewBadge):
14+
115
2018-06-04 Timothy Hatcher <timothy@apple.com>
216

317
Selection color is dark when using Safari in dark mode.

‎Source/WebCore/rendering/RenderThemeIOS.mm‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1871,8 +1871,15 @@ static void paintAttachmentBorder(GraphicsContext& context, Path& borderPath)
18711871
CGContextSetFillColorWithColor(ctx, circleColor.get());
18721872
CGContextSetShadowWithColor(ctx, CGSizeZero, 16, shadowColor.get());
18731873

1874+
// Clip out the circle to only show the shadow.
1875+
CGContextBeginPath(ctx);
1876+
CGContextAddRect(ctx, rect);
1877+
CGContextAddPath(ctx, circle.get());
1878+
CGContextClosePath(ctx);
1879+
CGContextEOClip(ctx);
1880+
18741881
// Draw a slightly smaller circle with a shadow, otherwise we'll see a fringe of the solid
1875-
// black circle around the edges of the cliped path below.
1882+
// black circle around the edges of the clipped path below.
18761883
CGContextBeginPath(ctx);
18771884
CGRect slightlySmallerAbsoluteBadgeRect = CGRectMake(absoluteBadgeRect.origin.x + 0.5, absoluteBadgeRect.origin.y + 0.5, badgeDimension - 1, badgeDimension - 1);
18781885
RetainPtr<CGPathRef> slightlySmallerCircle = adoptCF(CGPathCreateWithRoundedRect(slightlySmallerAbsoluteBadgeRect, slightlySmallerAbsoluteBadgeRect.size.width / 2, slightlySmallerAbsoluteBadgeRect.size.height / 2, nullptr));

0 commit comments

Comments
 (0)