Layout Interactions Testing Template
- Viktor Balog (Unlicensed)
Summary
Here is a comprehensive list of things to look out for after making changes to the layout computation parts of the block layout engine.
Notes:
the main container and any other group work the same way, the only difference is that the main container’s width should not be changed by layout operation
invisible elements are excluded from layout computations, so until they become visible they can be mostly ignored
groups should not have an aspect ratio property
if a block has aspect ratio, visibility and layout set the priority is in most cases is the following:
visible
column layout
free layout
static layout
aspect ratio
anything else
the styling represents the following
reasonably covered by other cases (see notes about main container/invisible above)
not applicable
Inserting elements from the template drawer
parent inserted | main container | main container | group | |||
|---|---|---|---|---|---|---|
elements, aspect ratio | free | column | free | column | free | column |
elements, inline | free | column | free | column | free | column |
elements, static layout | free | column | free | column | free | column |
elements, no layout | free | column | free | column | free | column |
any, invisible | free | column | free | column | free | column |
groups, free layout | free | column | free | column | free | column |
groups, column layout | free | column | free | column | free | column |
Duplicating elements
parent duplicated | main container | group | ||
|---|---|---|---|---|
elements, aspect ratio | free | column | free | column |
elements, inline | free | column | free | column |
elements, static layout | free | column | free | column |
elements, no layout | free | column | free | column |
any, invisible | free | column | free | column |
groups, free layout | free | column | free | column |
groups, column layout | free | column | free | column |
Deleting elements
parent deleted | main container | group | ||
|---|---|---|---|---|
any | free | column | free | column |
Moving/resizing elements
parent moved/resized | main container | group | ||
|---|---|---|---|---|
elements, aspect ratio | free | column | free | column |
elements, inline | free | column | free | column |
elements, static layout | free | column | free | column |
elements, no layout | free | column | free | column |
any, invisible | free | column | free | column |
groups, free layout | free | column | free | column |
groups, column layout | free | column | free | column |
Grouping elements
contents | group | |
|---|---|---|
elements, aspect ratio | free | column |
elements, inline | free | column |
elements, static layout | free | column |
elements, no layout | free | column |
any, invisible | free | column |
groups, column layout | free | column |
groups, free layout | free | column |
Ungrouping groups
parent group type | main container | group | ||
|---|---|---|---|---|
group, column layout | free | column | free | column |
group, free layout | free | column | free | column |
group, invisible | free | column | free | column |
Changing group layout
parent change type | main container | group | ||
|---|---|---|---|---|
column to free | free | column | free | column |
free to column | free | column | free | column |
column to free | free | column | free | column |
free to column | free | column | free | column |
Styles
parent style | main container | group | ||
|---|---|---|---|---|
font-style (bold, italic) | free | column | free | column |
line-height | free | column | free | column |
padding, border | free | column | free | column |
aspect-ratio | free | column | free | column |
vertical/horizontal align | free | column | free | column |
Inline content
parent style | main container | group | ||
|---|---|---|---|---|
text | free | column | free | column |
font style (bold, italic) | free | column | free | column |
other marks | free | column | free | column |
Image
| main container | group | ||
|---|---|---|---|---|
change image | free | column | free | column |