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
+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
--- /dev/null
+<!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>
<!DOCTYPE html>
+<meta name="viewport" content="width=device-width">
<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;
</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>
-<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>
+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.
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
- // 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));
git://git.webkit.org / WebKit-https.git / commitdiff