# Scrawl-canvas v8 - Canvas test 023

## Grid entity - using picture-based assets (image, video, sprite)

Columns
Rows
Column gutter
Row gutter
Grid width
n%
n
Grid height
n%
n
Base fill
Highlight fill
Grid lines stroke

Starts ('n%')
X:
Y:
Handles ('n%')
X:
Y:
Starts (n)
X:
Y:
Handles (n)
X:
Y:
Starts ('str')
X:
Y:
Handles ('str')
X:
Y:
Offset ('n%')
X:
Y:
Offset (n)
X:
Y:
Roll
Scale
Flip-upend
Flip-reverse

#### Test purpose

Create, update and interact with a Grid entity

- Create picture entitys (image, video, sprite) to be used by the Grid entity
- Create the Grid entity
- Animate so that the Grid responds to mouse movements to highlight the tile under the mouse pointer
- Add controls to manipulate the number of rows and columns in the Grid
- Add controls to vary the width of column and row gutters
- Add controls to vary the Grid's dimensions
- Add selectors so tester can change the 'base' fill, and the 'highlight' fill
- Check that Picture fills can be constrained to the Tile, or be applied Grid-wide
- Add a selector so tester can change the guttering fill (by String, by object, by index number)
- Add controls to manipulate the Grid's positioning (start, handle, offset)
- Add controls to manipulate the Grid's roll, scale and flip attributes

Known issue: in webkit-based browsers (for example: Safari), setting the Highlight fill or Grid line stroke to a video will lead to that video being displayed across the grid as if it was the Base fill

Touch test: should work as expected

Annotated code