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