testing/web-platform/tests/css/css-backgrounds/background-rounded-image-clip.html

   1 <!DOCTYPE html>
   2 <meta charset="utf-8">
   3 <title>Background Clip Follows Rounded Corner</title>
   4 <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-22547">
   5 <link rel="match" href="reference/background-rounded-image-clip.html">
   6 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping">
   7 <style>
   8     html {
   9         background-color: green;
  10     }
  11     #a {
  12         top: 20px;
  13         left: 20px;
  14         position: absolute;
  15         width: 20px;
  16         height: 20px;
  17         background-color: black;
  18     }
  19
  20     #b {
  21         position: absolute;
  22         width: 300px;
  23         height: 200px;
  24         background-image: linear-gradient(green, green);
  25         background-clip: content-box;
  26         border-top-left-radius: 90px;
  27         border-width: 10px;
  28         border-style: solid;
  29         border-color: transparent;
  30     }
  31 </style>
  32 <div id="a"></div>
  33 <div id="b"></div>