| <body> |
| <style type="text/css"> |
| canvas { border: 1px solid black; } |
| </style> |
| |
| Each square canvas should contain a colored gradient bordered by a narrow white margin and a black line. |
| The column on the left contains linear gradients, the column on the right radial gradients.<br> |
| |
| <script> |
| var counter = 1; |
| function Test(description, gradient) { |
| // Create canvas elements |
| var lin = document.createElement('canvas'); |
| lin.setAttribute('id', 'canvas' + counter + 'lin'); |
| lin.setAttribute('height', 50); |
| lin.setAttribute('width', 50); |
| var rad = document.createElement('canvas'); |
| rad.setAttribute('id', 'canvas' + counter + 'rad'); |
| rad.setAttribute('height', 50); |
| rad.setAttribute('width', 50); |
| |
| document.body.appendChild(lin); |
| document.body.appendChild(rad); |
| document.body.appendChild(document.createTextNode(' ' + description)); |
| document.body.appendChild(document.createElement('br')); |
| |
| // Find canvas contexts |
| var linctx = lin.getContext('2d') |
| var radctx = rad.getContext('2d') |
| |
| // Create linear and radial gradients from array |
| var lingrad = linctx.createLinearGradient(0, 0, 0, 50); |
| var radgrad = linctx.createRadialGradient(25, 25, 0, 25, 25, 25); |
| for (var i = 0; i < gradient.length - 1; i+=2) { |
| lingrad.addColorStop(gradient[i], gradient[i + 1]); |
| radgrad.addColorStop(gradient[i], gradient[i + 1]); |
| } |
| |
| // Apply them |
| linctx.fillStyle = lingrad; |
| linctx.fillRect(2, 2, 46, 46); |
| radctx.fillStyle = radgrad; |
| radctx.fillRect(2, 2, 46, 46); |
| |
| counter++; |
| } |
| |
| // Note: This test won't be as useful with many more cases added, since |
| // they'll scroll below the pixel-test boundary. |
| |
| // Simple gradient |
| Test('Green to white', |
| new Array(0, '#0f0', |
| 1, '#fff')); |
| |
| // Multiple sections |
| Test('Green to white to red', |
| new Array( 0, '#0f0', |
| 0.5, '#fff', |
| 1, '#f00')); |
| |
| // No stops at 0.0 or 1.0 |
| Test('Larger green to white to larger red', |
| new Array(0.4, '#0f0', |
| 0.5, '#fff', |
| 0.6, '#f00')); |
| |
| // Only one stop, at zero |
| Test('Solid red', |
| new Array(0.0, '#f00')); |
| |
| // Only one stop, at 1.0 |
| Test('Solid red', |
| new Array(1.0, '#f00')); |
| |
| // Only one stop, in the middle |
| Test('Solid red', |
| new Array(0.5, '#f00')); |
| |
| // Disjoint gradients (multiple stops at the same offset) |
| Test('Blue to white in the top (inner) half, red to yellow in the bottom (outer) half', |
| new Array( 0, '#00f', |
| 0.5, '#fff', |
| 0.5, '#f00', |
| 1, '#ff0')); |
| |
| // Ignored stops |
| Test('Blue to white, red to yellow (same as previous)', |
| new Array(0, '#00f', |
| 0.5, '#fff', |
| 0.5, '#aaa', |
| 0.5, '#abc', |
| 0.5, '#f00', |
| 1, '#ff0')); |
| |
| // Unsorted stops |
| Test('Blue to white, red to yellow (same as previous)', |
| new Array(0.5, '#fff', |
| 0.5, '#aaa', |
| 1, '#ff0', |
| 0.5, '#abc', |
| 0.5, '#f00', |
| 0, '#00f')); |
| </script> |
| </body> |
