Content - 908fffea13bfac5a5cd40413797928848cd34dcf - 233a9dc/2dcontext/shadows/canvas_shadows_002.htm

visit type:

Tip revision: 904da22855cdcf22d76ac514eb7c4f699ab6f389 authored by Anne van Kesteren on 03 May 2018, 08:59:36 UTC
correct test

Tip revision: 904da22

canvas_shadows_002.htm

<!DOCTYPE HTML>
<html>
  <head>
    <title>HTML5 Canvas Test:  Shadows for images</title>
    <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
    <link rel="help" href="http://www.w3.org/TR/2dcontext/#shadows" />
    <link rel="match" href="canvas_shadows_002-ref.htm" />
    <meta name="assert" content="Shadows must be drawn for images." />
    <script type="text/javascript">
      function runTest() {
        var canvas = document.getElementById("canvas1");
        var ctx = canvas.getContext("2d");

        // Draw a red rectangle.
        ctx.fillStyle = "rgba(255, 0, 0, 1.0)";
        ctx.fillRect(150, 0, 100, 50);

        // Set shadow styles to draw a black shadow to overlap the red rectangle.
        ctx.shadowOffsetX = 150;
        ctx.shadowColor = "rgba(0, 0, 0, 1.0)";

        // Draw a black rectangle image on the canvas.
        var img = document.getElementById("imgBlackRect");
        ctx.drawImage(img, 0, 0);
      }
    </script>
  </head>
  <body onload="runTest()">
    <p>Description:  Shadows must be drawn for images.</p>
    <p>Test passes if two black rectangles are shown and there is no red visible on the page.</p>
    <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
    <img id="imgBlackRect" style="display:none" width="100" height="50" src="/images/black-rectangle.png">
  </body>
</html>

Browse the archive

https://github.com/web-platform-tests/wpt