To note: Javascript is not running in this browser environment. Our apologies, but this demo has not yet been updated to support progressive enhancement.
Test purpose
We set up a Scrawl-canvas Stack artefact (a <div> element) in HTML, whose dimensions can be controlled by the user. The element is given a red background color, and initial dimensions of 400px by 400px. Within the Stack, we include a <canvas> element and mark it as responsive, so its dimensions will always match its parent Stack element's dimensions. This canvas has a yellow background color, set via CSS.
We set the canvas element's base canvas (which is not part of the DOM) to have fixed dimensions (800px by 600px) and tell the canvas to fit its base canvas into itself using the 'fill' algorithm. The user can change the fit parameter to other algorithms ('cover', 'contain', 'none'). The base canvas is given a background color of light green via the <canvas> element's `data-base-background-color` attribute.
Finally we add a non-base Cell to the canvas. This has relative dimensions of 50% by 50%, scaled by a factor of 1.1 and rotated 10deg. The non-base Cell will initially calculate its dimensions relative to the display canvas's dimensions; the user can change this by updating the Cell's `setRelativeDimensionsToBase` attribute to `true`. The Cell has a background color of dark blue.
- Check that the display canvas completely fills the stack's dimensions at all times; at no point should we see the stack element's red background color.
- Resize the stack to check that the base canvas fits as expected into the display canvas. As the user resizes the stack, the canvas should display with no discernable flicker:
- Fill algorithm: the display should show a light green background at all times. The blue box will disappear at the smallest stack width and/or height.
- None algorithm: the display should show a light green background at smaller stack dimensions, but at dimensions above 800px by 600px the green box will appear centered, surrounded by yellow. In contrast to the 'fill' algorithm, the blue box will not disappear at the smallest dimensions.
- Cover algorithm: the display should show a light green background at all times. The blue box will appear to be smaller than its equivalent in the 'none' algorithm at smaller stack dimensions, and larger at larger stack dimensions.
- Contain algorithm: the display will include yellow borders (either top-bottom, or left-right) at almost all stack dimensions, and the green box will always have a constant 3:2 aspect ratio.
- While resizing the stack, check that the non-base cell's dimensions adapt as expected:
- At the start, the blue box should grow-shrink its dimensions to match (in proportion) those of the stack / responsive canvas.
- After the user updates the non-base cell's `setRelativeDimensionsUsingBase` attribute to `true`, the blue box should stop responding to changes in the stack's dimensions when using the 'none' fit, and will grow-shrink in line with the green box's (apparent) dimensions - most easily seen in the 'contain' fit.
- Check that the cell correctly tracks the mouse cursor when the user hovers it over the stack element, with no errors in positioning whatever the setting of the canvas object's 'fit' attribute
- Drag the browser between screens with different resolutions (eg: retina vs non-retina displays). The display should appear the same on both screens for all the above tests.
See Demo Canvas-036 for additional Cell functionality tests.
Touch test: should work as expected
Annotated code