border-radius-mask-canvas-with-mask.html

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      canvas {
        background-color: gray;
        border-radius: 40px 200px 10px 200px;
        padding: 10px;
        margin: 20px;
        border: 5px solid red;
        -webkit-mask-image: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
      }
    </style>
  </head>
  <body>
    <h3>It passes if:</h3>
    <ul>
      <li>the canvas element has a gradient mask applied</li>
      <li>the canvas content has rounded corners</li>
    </ul>
    <canvas id="theCanvas" width="257" height="257"></canvas>
    <script>
      if (window.internals) {
        internals.runtimeFlags.accelerated2dCanvasEnabled = true;
      }
      var context = theCanvas.getContext('2d');
      context.fillStyle = 'green';
      context.fillRect(0, 0, theCanvas.width, theCanvas.width);
    </script>
  </body>
</html>

chromium/third_party/blink/web_tests/fast/borders/border-radius-mask-canvas-with-mask.html