border-radius-mask-canvas.html | Explore in Territory

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      canvas {
        background-color: gray;
        border-radius: 200px 0px 200px 0px;
      }
    </style>
  </head>
  <body>
    <h3>It passes if:</h3>
    <ul>
      <li>the canvas content has rounded corners (top-left and bottom-right)</li>
      <li>gray background is not visible</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.html