testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html

   1 <!DOCTYPE html>
   2 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
   3 <link rel="match" href="2d.filter.canvasFilterObject.dropShadow.tentative-expected.html">
   4 <title>Canvas test: 2d.filter.canvasFilterObject.dropShadow.tentative</title>
   5 <h1>2d.filter.canvasFilterObject.dropShadow.tentative</h1>
   6 <p class="desc">Test CanvasFilter() dropShadow object.</p>
   7 <canvas id="canvas" width="620" height="320">
   8   <p class="fallback">FAIL (fallback content)</p>
   9 </canvas>
  10 <script>
  11   const canvas = document.getElementById("canvas");
  12   const ctx = canvas.getContext('2d');
  13
  14   ctx.fillStyle = 'teal';
  15   ctx.fillRect(0, 0, 620, 50);
  16   ctx.fillRect(0, 100, 620, 50);
  17   ctx.fillRect(0, 200, 620, 50);
  18
  19   ctx.fillStyle = 'crimson';
  20
  21   // Parameter defaults.
  22   ctx.filter = new CanvasFilter({filter: 'dropShadow'});
  23   ctx.fillRect(10, 10, 80, 80);
  24
  25   // All parameters specified.
  26   ctx.filter = new CanvasFilter(
  27     {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 5,
  28      floodColor: 'purple', floodOpacity: 0.7});
  29   ctx.fillRect(110, 10, 80, 80);
  30
  31   // Named color.
  32   ctx.filter = new CanvasFilter(
  33     {filter: 'dropShadow', dx: 10, dy: 10, stdDeviation: 3,
  34      floodColor: 'purple'});
  35   ctx.fillRect(10, 110, 80, 80);
  36
  37   // System color.
  38   ctx.filter = new CanvasFilter(
  39     {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
  40      floodColor: 'LinkText'});
  41   ctx.fillRect(110, 110, 80, 80);
  42
  43   // No blur.
  44   ctx.filter = new CanvasFilter(
  45     {filter: 'dropShadow', dx: 10, dy: 15, stdDeviation: 0,
  46      floodColor: 'purple'});
  47   ctx.fillRect(210, 110, 80, 80);
  48
  49   // Numerical color.
  50   ctx.filter = new CanvasFilter(
  51     {filter: 'dropShadow', dx: 9, dy: 12, stdDeviation: 3,
  52      floodColor: 'rgba(20, 50, 130, 1)'});
  53   ctx.fillRect(310, 110, 80, 80);
  54
  55   // Transparent floodColor.
  56   ctx.filter = new CanvasFilter(
  57     {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
  58      floodColor: 'rgba(20, 50, 130, 0.7)'});
  59   ctx.fillRect(410, 110, 80, 80);
  60
  61   // Transparent floodColor and floodOpacity.
  62   ctx.filter = new CanvasFilter(
  63     {filter: 'dropShadow', dx: 15, dy: 10, stdDeviation: 3,
  64      floodColor: 'rgba(20, 50, 130, 0.7)', floodOpacity: 0.7});
  65   ctx.fillRect(510, 110, 80, 80);
  66
  67   // Degenerate parameter values.
  68   ctx.filter = new CanvasFilter(
  69     {filter: 'dropShadow', dx: [-5], dy: [], stdDeviation: null,
  70      floodColor: 'purple', floodOpacity: [2]});
  71   ctx.fillRect(10, 210, 80, 80);
  72
  73   ctx.filter = new CanvasFilter(
  74     {filter: 'dropShadow', dx: null, dy: '5', stdDeviation: -5,
  75      floodColor: 'purple', floodOpacity: '0.8'});
  76   ctx.fillRect(110, 210, 80, 80);
  77
  78   ctx.filter = new CanvasFilter(
  79     {filter: 'dropShadow', dx: true, dy: ['10'], stdDeviation: false,
  80      floodColor: 'purple', floodOpacity: ['0.4']});
  81   ctx.fillRect(210, 210, 80, 80);
  82 </script>