third_party/WebKit/LayoutTests/fast/canvas/fillrect_gradient.html

   1 <body>
   2 <style type="text/css">
   3 canvas { border: 1px solid black; }
   4 </style>
   5
   6 Each square canvas should contain a colored gradient bordered by a narrow white margin and a black line.
   7 The column on the left contains linear gradients, the column on the right radial gradients.<br>
   8
   9 <script>
  10     if (window.testRunner)
  11       testRunner.dumpAsTextWithPixelResults();
  12
  13     var counter = 1;
  14     function Test(description, gradient) {
  15         // Create canvas elements
  16         var lin = document.createElement('canvas');
  17         lin.setAttribute('id', 'canvas' + counter + 'lin');
  18         lin.setAttribute('height', 50);
  19         lin.setAttribute('width', 50);
  20         var rad = document.createElement('canvas');
  21         rad.setAttribute('id', 'canvas' + counter + 'rad');
  22         rad.setAttribute('height', 50);
  23         rad.setAttribute('width', 50);
  24
  25         document.body.appendChild(lin);
  26         document.body.appendChild(rad);
  27         document.body.appendChild(document.createTextNode(' ' + description));
  28         document.body.appendChild(document.createElement('br'));
  29
  30         // Find canvas contexts
  31         var linctx = lin.getContext('2d')
  32         var radctx = rad.getContext('2d')
  33
  34         // Create linear and radial gradients from array
  35         var lingrad = linctx.createLinearGradient(0, 0, 0, 50);
  36         var radgrad = linctx.createRadialGradient(25, 25, 0, 25, 25, 25);
  37         for (var i = 0; i < gradient.length - 1; i+=2) {
  38             lingrad.addColorStop(gradient[i], gradient[i + 1]);
  39             radgrad.addColorStop(gradient[i], gradient[i + 1]);
  40         }
  41
  42         // Apply them
  43         linctx.fillStyle = lingrad;
  44         linctx.fillRect(2, 2, 46, 46);
  45         radctx.fillStyle = radgrad;
  46         radctx.fillRect(2, 2, 46, 46);
  47
  48         counter++;
  49     }
  50
  51     // Note: This test won't be as useful with many more cases added, since
  52     // they'll scroll below the pixel-test boundary.
  53
  54     // Simple gradient
  55     Test('Green to white',
  56          new Array(0, '#0f0',
  57                    1, '#fff'));
  58
  59     // Multiple sections
  60     Test('Green to white to red',
  61          new Array(  0, '#0f0',
  62                    0.5, '#fff',
  63                    1,   '#f00'));
  64
  65     // No stops at 0.0 or 1.0
  66     Test('Larger green to white to larger red',
  67          new Array(0.4, '#0f0',
  68                    0.5, '#fff',
  69                    0.6, '#f00'));
  70
  71     // Only one stop, at zero
  72     Test('Solid red',
  73          new Array(0.0, '#f00'));
  74
  75     // Only one stop, at 1.0
  76     Test('Solid red',
  77          new Array(1.0, '#f00'));
  78
  79     // Only one stop, in the middle
  80     Test('Solid red',
  81          new Array(0.5, '#f00'));
  82
  83     // Disjoint gradients (multiple stops at the same offset)
  84     Test('Blue to white in the top (inner) half, red to yellow in the bottom (outer) half',
  85          new Array(  0, '#00f',
  86                    0.5, '#fff',
  87                    0.5, '#f00',
  88                    1,   '#ff0'));
  89
  90     // Ignored stops
  91     Test('Blue to white, red to yellow (same as previous)',
  92          new Array(0,   '#00f',
  93                    0.5, '#fff',
  94                    0.5, '#aaa',
  95                    0.5, '#abc',
  96                    0.5, '#f00',
  97                    1,   '#ff0'));
  98
  99     // Unsorted stops
 100     Test('Blue to white, red to yellow (same as previous)',
 101          new Array(0.5, '#fff',
 102                    0.5, '#aaa',
 103                    1,   '#ff0',
 104                    0.5, '#abc',
 105                    0.5, '#f00',
 106                    0,   '#00f'));
 107 </script>
 108 </body>