To note: Javascript is not running in this browser environment. The canvas element is ignored; instead a placeholder image displays where the canvas would have appeared.
Test purpose
Setup a radial gradient, and a block entity which uses the gradient for its fillStyle value
Check that we can successfully manipulate the gradient's start and end coordinates, and its start and end radius values
Check that we can successfully manipulate the palettes's start and end cursors
Check that we can dynamically add and remove color stops
Check that we can ease the gradient, including user-defined easing algorithms
Check that when precision is set to 0, gradient uses the linear easing
Check that when cyclePalette is set to true and the palette's end value is smaller than its start value, the gradient draws itself by going through the 0/999 endpoints
Additionally, test to make sure canvas responds correctly to external dimensions resizing - <canvas> element is responsive - by changing its width and height values using the controls.
Known issue: the ability to resize the canvas using a container element with CSS resize: both setting does not work on Safari browsers. This is - allegedly - due to an canvas overflow which triggers the <canvas> element's z-index setting to increase ... which then stops the mouse drag event hitting the container element's drag corner. One (extremely ugly!) fix is to always display scrollbars on the container (overflow: scroll). A better solution is to supply UX controls in the HTML markup to handle a user's desire to resize the canvas container.