Feature: Layout overlay
Scenario: Enable layout in the desgin tool
When I enable <layout> in my design tool
And I view the project artboard
Then I should be able to turn on the <layout> overlay
Examples:
| layout |
| columns |
| rows |
Scenario: Disable layout in the design tool
When I disable <layout> in my design tool
And I view the project artboard
Then I should not see any option to enable <layout> in the artboard
Examples:
| layout |
| columns |
| rows |
Scenario: Turn on the columns overlay
When I enable columns in my design tool
And I view the project
And I turn on the columns overlay
Then I should see <no of columns> columns
And they should start at <actual offset>
And they should have a <style> color of <color>
And they should have a gutter of <gutter width> between them
And they should be <col witdh> pixels wide
Examples:
| no of columns | offset | gutter on outside | gutter width | col width | style | color | actual offset |
| 12 | 240 | yes | 20 | 60 | fill | bada55 | 250px |
| 12 | 240 | yes | 20 | 60 | stroke | bada55 | 250px |
| 12 | 240 | no | 22 | 60 | stroke | bada55 | 240px |
Scenario: Turn on the rows overlay
When I enable rows in my design tool
And I view the project
And I turn on the rows overlay
Then I should see rows starting at the top of the design
And each row should have a height of <row height> pixels
And each row should be separated by <gutter height> pixels
And they should have a <style> color of <color>
Examples:
| row height as gutter multiple | gutter height | row height | style | color |
| 5 | 12 | 60 | fill | bada55 |
| 5 | 12 | 60 | stroke | bada55 |
Scenario: Turn off the overlay
When I enable <layout> in my design tool
And I view the project
And I turn on the <layout> overlay
And I turn off the <layout> overlay
Then I should not see the <layout> overlay
Examples:
| columns |
| rows |