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>