AR Badging on transparent thumbnail images makes the glyph look really dark
[WebKit-https.git] / LayoutTests / system-preview / badge-expected.html
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>