diff --git a/pages/main-page.js b/pages/main-page.js index 54f5590..f4d3608 100644 --- a/pages/main-page.js +++ b/pages/main-page.js @@ -208,7 +208,7 @@ exports.MainPage = class MainPage extends BasePage { this.removeLayoutButton = page.locator( 'div[class="element-set-title"] button[class="remove-layout"]' ); - this.layoutMenu = page.locator( + this.layoutSection = page.locator( 'div[class="element-set-content layout-menu"]' ); this.layoutDirectRowBtn = page.locator( @@ -818,9 +818,9 @@ exports.MainPage = class MainPage extends BasePage { async isLayoutMenuExpanded(condition = true) { if (condition === true) { - await expect(this.layoutMenu).toBeVisible(); + await expect(this.layoutSection).toBeVisible(); } else { - await expect(this.layoutMenu).toBeHidden(); + await expect(this.layoutSection).toBeHidden(); } } @@ -895,6 +895,10 @@ exports.MainPage = class MainPage extends BasePage { await this.clickOnEnter(); } + async clickLayoutColumnGapField() { + await this.layoutColumnGapInput.click(); + } + async changeLayoutRowGap(value) { await this.layoutRowGapInput.fill(value); await this.clickOnEnter(); @@ -910,6 +914,14 @@ exports.MainPage = class MainPage extends BasePage { await this.clickOnEnter(); } + async clickLayoutVerticalPaddingField() { + await this.layoutVerticalPaddingInput.click(); + } + + async clickLayoutHorizontalPaddingField() { + await this.layoutHorizontPaddingInput.click(); + } + async switchToIndependentPadding() { await this.layoutIndepPaddingsIcon.click(); } diff --git a/pages/workspace/design-panel.js b/pages/workspace/design-panel.js new file mode 100644 index 0000000..ebaeed4 --- /dev/null +++ b/pages/workspace/design-panel.js @@ -0,0 +1,57 @@ +const {expect} = require("@playwright/test"); +const { BasePage } = require("../base-page"); +exports.DesignPanelPage = class DesignPanelPage extends BasePage { + + /** + * @param {import('@playwright/test').Page} page + */ + constructor(page) { + super(page); + + // 'Flex element' section + this.flexElementSection = page.locator('div[class="element-set-content layout-item-menu"]'); + this.flexElementAlignStartBtn = page.locator('div.layout-item-menu button[alt="Align self start"]'); + this.flexElementAlignCenterBtn = page.locator('div.layout-item-menu button[alt="Align self center"]'); + this.flexElementAlignEndBtn = page.locator('div.layout-item-menu button[alt="Align self end"]'); + this.flexElementMarginVertInput = page.locator( + 'div[class="margin-row"] div[alt="Vertical margin"] input' + ); + this.flexElementMarginHorizontInput = page.locator( + 'div[class="margin-row"] div[alt="Horizontal margin"] input' + ); + this.flexElementPositionAbsolute = page.locator('div[class="layout-row"] button[alt="Absolute"]'); + } + + async waitFlexElementSectionExpanded() { + await expect(this.flexElementSection).toBeVisible(); + } + + async changeFlexElementAlignment(alignment) { + switch (alignment) { + case 'Start': + await this.flexElementAlignStartBtn.click({delay: 2000}); + break; + case 'Center': + await this.flexElementAlignCenterBtn.click({delay: 2000}); + break; + case 'End': + await this.flexElementAlignEndBtn.click({delay: 2000}); + break; + } + } + + async changeFlexElementVerticalMargin(value) { + await this.flexElementMarginVertInput.fill(value); + await this.clickOnEnter(); + } + + async changeFlexElementHorizontalMargin(value) { + await this.flexElementMarginHorizontInput.fill(value); + await this.clickOnEnter(); + } + + async setFlexElementPositionAbsolute() { + await this.flexElementPositionAbsolute.click(); + } + +} \ No newline at end of file diff --git a/pages/workspace/layers.js b/pages/workspace/layers.js new file mode 100644 index 0000000..192d74e --- /dev/null +++ b/pages/workspace/layers.js @@ -0,0 +1,39 @@ +const {expect} = require("@playwright/test"); +const { BasePage } = require("../base-page"); + +exports.LayersPage = class LayersPage extends BasePage { + + /** + * @param {import('@playwright/test').Page} page + */ + constructor(page) { + super(page); + + this.layerBoardToggleContentExpand = page.locator('ul.element-list span.toggle-content.inverse'); + this.layerBoardToggleContentCollapse = page.locator('ul.element-list span.toggle-content'); + this.layerBoardChildRect = page.locator( + 'div[class="element-list-body "] span:has-text("Rectangle") >>nth=-1' + ); + this.layerBoardChildEllipse = page.locator( + 'div[class="element-list-body "] span:has-text("Ellipse") >>nth=-1' + ); + } + + async expandBoardOnLayers() { + if (!await this.layerBoardToggleContentExpand.isVisible()) { + await this.layerBoardToggleContentCollapse.click(); + await expect(this.layerBoardToggleContentExpand).toBeVisible(); + } + } + + async selectBoardChildRect() { + await this.expandBoardOnLayers(); + await this.layerBoardChildRect.click(); + } + + async selectBoardChildEllipse() { + await this.expandBoardOnLayers(); + await this.layerBoardChildEllipse.click(); + } + +} \ No newline at end of file diff --git a/playwright.config.js b/playwright.config.js index 5aa2988..b50c81b 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -12,7 +12,7 @@ const config = { snapshotPathTemplate: `{testDir}/{testFileDir}/{testFileName}-snapshots/{projectName}/{arg}{ext}`, testDir: "./tests", /* Maximum time one test can run for. */ - timeout: 30 * 1000, + timeout: 50 * 1000, expect: { /** * Maximum time expect() should wait for the condition to be met. diff --git a/tests/composition/composition-flex-layout.spec.js b/tests/composition/composition-flex-layout.spec.js index 79055f0..0e58213 100644 --- a/tests/composition/composition-flex-layout.spec.js +++ b/tests/composition/composition-flex-layout.spec.js @@ -1,244 +1,391 @@ const { expect } = require("@playwright/test"); const { mainTest } = require("../../fixtures"); const { MainPage } = require("../../pages/main-page"); +const { LayersPage } = require("../../pages/workspace/layers"); +const { DesignPanelPage} = require("../../pages/workspace/design-panel"); -mainTest.beforeEach(async ({ page }) => { - const mainPage = new MainPage(page); - await mainPage.clickCreateBoardButton(); - await mainPage.clickViewportTwice(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isCreatedLayerVisible(); - await mainPage.changeHeightAndWidthForLayer("300", "300"); - await mainPage.waitForChangeIsSaved(); - await mainPage.clickCreateRectangleButton(); - await mainPage.clickViewportTwice(); - await mainPage.waitForChangeIsSaved(); - await mainPage.clickCreateEllipseButton(); - await mainPage.clickViewportTwice(); - await mainPage.waitForChangeIsSaved(); - await mainPage.clickCreatedBoardTitleOnCanvas(); -}); +mainTest.describe("Flex Layout & Elements", async () => { + mainTest.beforeEach(async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.clickCreateBoardButton(); + await mainPage.clickViewportTwice(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isCreatedLayerVisible(); + await mainPage.changeHeightAndWidthForLayer("300", "300"); + await mainPage.waitForChangeIsSaved(); + await mainPage.clickCreateRectangleButton(); + await mainPage.clickViewportTwice(); + await mainPage.waitForChangeIsSaved(); + await mainPage.clickCreateEllipseButton(); + await mainPage.clickViewportTwice(); + await mainPage.waitForChangeIsSaved(); + await mainPage.clickCreatedBoardTitleOnCanvas(); + }); -mainTest("FL-1 Add flex layout to board from rightclick", async ({ page }) => { - const mainPage = new MainPage(page); - await mainPage.addFlexLayoutViaRightClick(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(); - await mainPage.isLayoutMenuExpanded(); - await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); -}); + mainTest("FL-1 Add flex layout to board from rightclick", async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.addFlexLayoutViaRightClick(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + }); -mainTest("FL-2 Add flex layout to board from shortcut", async ({ page }) => { - const mainPage = new MainPage(page); - await mainPage.pressFlexLayoutShortcut(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(); - await mainPage.isLayoutMenuExpanded(); - await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); -}); + mainTest("FL-2 Add flex layout to board from shortcut", async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.pressFlexLayoutShortcut(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + }); -mainTest( - "FL-4 Remove flex layout from board from rightclick", - async ({ page }) => { - const mainPage = new MainPage(page); - await mainPage.addFlexLayoutViaRightClick(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(); - await mainPage.isLayoutMenuExpanded(); - await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); - await mainPage.clickCreatedBoardTitleOnCanvas(); - await mainPage.removeFlexLayoutViaRightClick(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(false); - await mainPage.isLayoutMenuExpanded(false); - await expect(mainPage.viewport).toHaveScreenshot( - "board-without-layout.png" + mainTest( + "FL-4 Remove flex layout from board from rightclick", + async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.addFlexLayoutViaRightClick(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.removeFlexLayoutViaRightClick(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(false); + await mainPage.isLayoutMenuExpanded(false); + await expect(mainPage.viewport).toHaveScreenshot( + "board-without-layout.png" + ); + } ); - } -); -mainTest( - "FL-5 Remove flex layout from board from shortcut", - async ({ page }) => { - const mainPage = new MainPage(page); - await mainPage.pressFlexLayoutShortcut(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(); - await mainPage.isLayoutMenuExpanded(); - await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); - await mainPage.clickCreatedBoardTitleOnCanvas(); - await mainPage.pressFlexLayoutShortcut(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(false); - await mainPage.isLayoutMenuExpanded(false); - await expect(mainPage.viewport).toHaveScreenshot( - "board-without-layout.png" + mainTest( + "FL-5 Remove flex layout from board from shortcut", + async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.pressFlexLayoutShortcut(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.pressFlexLayoutShortcut(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(false); + await mainPage.isLayoutMenuExpanded(false); + await expect(mainPage.viewport).toHaveScreenshot( + "board-without-layout.png" + ); + } ); - } -); -mainTest( - "FL-6 Remove flex layout from board from Design panel", - async ({ page }) => { - const mainPage = new MainPage(page); - await mainPage.pressFlexLayoutShortcut(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(); - await mainPage.isLayoutMenuExpanded(); - await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); - await mainPage.clickCreatedBoardTitleOnCanvas(); - await mainPage.removeLayoutFromDesignPanel(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(false); - await mainPage.isLayoutMenuExpanded(false); - await expect(mainPage.viewport).toHaveScreenshot( - "board-without-layout.png" + mainTest( + "FL-6 Remove flex layout from board from Design panel", + async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.pressFlexLayoutShortcut(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.removeLayoutFromDesignPanel(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(false); + await mainPage.isLayoutMenuExpanded(false); + await expect(mainPage.viewport).toHaveScreenshot( + "board-without-layout.png" + ); + } ); - } -); -mainTest("FL-7 Change direction", async ({ page }) => { - const mainPage = new MainPage(page); - await mainPage.pressFlexLayoutShortcut(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(); - await mainPage.isLayoutMenuExpanded(); - await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); - await mainPage.clickCreatedBoardTitleOnCanvas(); - await mainPage.changeLayoutDirection("Row reverse"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot( - "layout-row-reverse-direction.png" - ); - await mainPage.changeLayoutDirection("Column"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot( - "layout-column-direction.png" - ); - await mainPage.changeLayoutDirection("Column reverse"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot( - "layout-column-reverse-direction.png" - ); - await mainPage.changeLayoutDirection("Row"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-row-direction.png"); + mainTest("FL-7 Change direction", async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.pressFlexLayoutShortcut(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.changeLayoutDirection("Row reverse"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot( + "layout-row-reverse-direction.png" + ); + await mainPage.changeLayoutDirection("Column"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot( + "layout-column-direction.png" + ); + await mainPage.changeLayoutDirection("Column reverse"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot( + "layout-column-reverse-direction.png" + ); + await mainPage.changeLayoutDirection("Row"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-row-direction.png"); + }); + + mainTest("FL-9 Change alignment", async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.pressFlexLayoutShortcut(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.changeLayoutAlignment("Center"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-align-center.png"); + await mainPage.changeLayoutAlignment("End"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-align-end.png"); + await mainPage.changeLayoutAlignment("Start"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-align-start.png"); + }); + + mainTest("FL-10 Change justification", async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.pressFlexLayoutShortcut(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.changeLayoutJustification("Center"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-justify-center.png"); + await mainPage.changeLayoutJustification("End"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-justify-end.png"); + await mainPage.changeLayoutJustification("Space between"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot( + "layout-justify-space-between.png" + ); + await mainPage.changeLayoutJustification("Space around"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot( + "layout-justify-space-around.png" + ); + await mainPage.changeLayoutJustification("Space evenly"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot( + "layout-justify-space-evenly.png" + ); + await mainPage.changeLayoutJustification("Start"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-justify-start.png"); + }); + + mainTest("FL-12 Change column gap", async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.pressFlexLayoutShortcut(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.changeLayoutColumnGap("5"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-5.png"); + await mainPage.changeLayoutColumnGap("15"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-15.png"); + await mainPage.changeLayoutColumnGap("0"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-0.png"); + }); + + mainTest("FL-13 Change row gap", async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.pressFlexLayoutShortcut(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.changeLayoutDirection("Column"); + await mainPage.waitForChangeIsSaved(); + await mainPage.changeLayoutRowGap("5"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-5.png"); + await mainPage.changeLayoutRowGap("15"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-15.png"); + await mainPage.changeLayoutRowGap("0"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-0.png"); + }); + + mainTest("FL-14 Change single padding", async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.pressFlexLayoutShortcut(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.changeLayoutVerticalPadding("5"); + await mainPage.waitForChangeIsSaved(); + await mainPage.changeLayoutHorizontalPadding("15"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-padding-5-15.png"); + await mainPage.changeLayoutHorizontalPadding("0"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot( + "layout-horizontal_padding-0.png" + ); + await mainPage.changeLayoutVerticalPadding("0"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot( + "layout-vertical_padding-0.png" + ); + }); + + mainTest("FL-15 Change multiple padding", async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.pressFlexLayoutShortcut(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.switchToIndependentPadding(); + await mainPage.waitForChangeIsSaved(); + await mainPage.changeLayoutTopPadding("10"); + await mainPage.waitForChangeIsSaved(); + await mainPage.changeLayoutLeftPadding("15"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-top-left-padding-10-15.png"); + await mainPage.changeLayoutJustification("End"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-top-left-padding-10-15-justify.png"); + await mainPage.changeLayoutRightPadding("20"); + await mainPage.waitForChangeIsSaved(); + await mainPage.changeLayoutAlignment('End'); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-top-left-right-padding-justify-align.png"); + await mainPage.changeLayoutBottomPadding("25"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-top-left-right-bottom-padding.png"); + }); + + + mainTest("FL-21 Flex elements change - alignment", async ({ page }) => { + const mainPage = new MainPage(page); + const layersPage = new LayersPage(page); + const designPanelPage = new DesignPanelPage(page); + + await mainPage.pressFlexLayoutShortcut(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + + await layersPage.selectBoardChildRect(); + await designPanelPage.waitFlexElementSectionExpanded(); + await designPanelPage.changeFlexElementAlignment("Center"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("flex-element-align-center.png"); + await designPanelPage.changeFlexElementAlignment("End"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("flex-element-align-end.png"); + await designPanelPage.changeFlexElementAlignment("Start"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("flex-element-align-start.png"); + }); + + mainTest("FL-22 Flex elements - change margin single", async ({ page }) => { + const mainPage = new MainPage(page); + const layersPage = new LayersPage(page); + const designPanelPage = new DesignPanelPage(page); + + await mainPage.pressFlexLayoutShortcut(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isLayoutIconVisibleOnLayer(); + await mainPage.isLayoutMenuExpanded(); + await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); + + await layersPage.selectBoardChildRect(); + await designPanelPage.waitFlexElementSectionExpanded(); + await designPanelPage.changeFlexElementVerticalMargin("10"); + await mainPage.waitForChangeIsSaved(); + await designPanelPage.changeFlexElementHorizontalMargin("25"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("flex-element-margin-10-25.png"); + await designPanelPage.changeFlexElementVerticalMargin("0"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("flex-element-margin-vert-0.png"); + await designPanelPage.changeFlexElementHorizontalMargin("0"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("flex-element-margin-horizont-0.png"); + }); + }); -mainTest("FL-9 Change alignment", async ({ page }) => { - const mainPage = new MainPage(page); - await mainPage.pressFlexLayoutShortcut(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(); - await mainPage.isLayoutMenuExpanded(); - await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); - await mainPage.clickCreatedBoardTitleOnCanvas(); - await mainPage.changeLayoutAlignment("Center"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-align-center.png"); - await mainPage.changeLayoutAlignment("End"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-align-end.png"); - await mainPage.changeLayoutAlignment("Start"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-align-start.png"); -}); +mainTest.describe("Margins & Paddings & Position", async () => { + mainTest.beforeEach(async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.clickCreateBoardButton(); + await mainPage.clickViewportTwice(); + await mainPage.waitForChangeIsSaved(); + await mainPage.isCreatedLayerVisible(); + await mainPage.changeHeightAndWidthForLayer("500", "500"); + await mainPage.waitForChangeIsSaved(); + await mainPage.clickCreateEllipseButton(); + await mainPage.clickViewportTwice(); + await mainPage.waitForChangeIsSaved(); + await mainPage.clickCreateEllipseButton(); + await mainPage.clickViewportTwice(); + await mainPage.waitForChangeIsSaved(); + await mainPage.clickCreateEllipseButton(); + await mainPage.clickViewportTwice(); + await mainPage.waitForChangeIsSaved(); + await mainPage.clickCreatedBoardTitleOnCanvas(); + await mainPage.addFlexLayoutViaRightClick(); + await mainPage.waitForChangeIsSaved(); + }); -mainTest("FL-10 Change justification", async ({ page }) => { - const mainPage = new MainPage(page); - await mainPage.pressFlexLayoutShortcut(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(); - await mainPage.isLayoutMenuExpanded(); - await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); - await mainPage.clickCreatedBoardTitleOnCanvas(); - await mainPage.changeLayoutJustification("Center"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-justify-center.png"); - await mainPage.changeLayoutJustification("End"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-justify-end.png"); - await mainPage.changeLayoutJustification("Space between"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot( - "layout-justify-space-between.png" - ); - await mainPage.changeLayoutJustification("Space around"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot( - "layout-justify-space-around.png" - ); - await mainPage.changeLayoutJustification("Space evenly"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot( - "layout-justify-space-evenly.png" - ); - await mainPage.changeLayoutJustification("Start"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-justify-start.png"); -}); + mainTest("FL-37 Set margins and padding to 0", async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.changeLayoutVerticalPadding("0"); + await mainPage.waitForChangeIsSaved(); + await mainPage.changeLayoutHorizontalPadding("0"); + await mainPage.waitForChangeIsSaved(); + await mainPage.changeLayoutColumnGap("0"); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("layout-padding-gap-0.png"); + await mainPage.clickLayoutVerticalPaddingField(); + await expect(mainPage.viewport).toHaveScreenshot("layout-no-vertical-padding.png"); + await mainPage.clickLayoutHorizontalPaddingField(); + await expect(mainPage.viewport).toHaveScreenshot("layout-no-horizont-padding.png"); + await mainPage.clickLayoutColumnGapField(); + await expect(mainPage.viewport).toHaveScreenshot("layout-no-column-gap.png"); + }); -mainTest("FL-12 Change column gap", async ({ page }) => { - const mainPage = new MainPage(page); - await mainPage.pressFlexLayoutShortcut(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(); - await mainPage.isLayoutMenuExpanded(); - await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); - await mainPage.clickCreatedBoardTitleOnCanvas(); - await mainPage.changeLayoutColumnGap("5"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-5.png"); - await mainPage.changeLayoutColumnGap("15"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-15.png"); - await mainPage.changeLayoutColumnGap("0"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-0.png"); -}); + mainTest("FL-39 Gap click highlight", async ({ page }) => { + const mainPage = new MainPage(page); + await mainPage.changeLayoutColumnGap("20"); + await mainPage.waitForChangeIsSaved(); + await mainPage.clickLayoutColumnGapField(); + await expect(mainPage.viewport).toHaveScreenshot("layout-column-gap-highlighted.png"); + }); -mainTest("FL-13 Change row gap", async ({ page }) => { - const mainPage = new MainPage(page); - await mainPage.pressFlexLayoutShortcut(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(); - await mainPage.isLayoutMenuExpanded(); - await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); - await mainPage.clickCreatedBoardTitleOnCanvas(); - await mainPage.changeLayoutDirection("Column"); - await mainPage.waitForChangeIsSaved(); - await mainPage.changeLayoutRowGap("5"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-5.png"); - await mainPage.changeLayoutRowGap("15"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-15.png"); - await mainPage.changeLayoutRowGap("0"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-row-gap-0.png"); -}); + mainTest("FL-42 Use absolute position and look if element still inside a board", + async ({ page }) => { + const mainPage = new MainPage(page); + const layersPage = new LayersPage(page); + const designPanelPage = new DesignPanelPage(page); + + await layersPage.selectBoardChildEllipse(); + await designPanelPage.waitFlexElementSectionExpanded(); + await designPanelPage.setFlexElementPositionAbsolute(); + await mainPage.waitForChangeIsSaved(); + await expect(mainPage.viewport).toHaveScreenshot("flex-element-position-absolute.png"); + }); -mainTest("FL-14 Change single padding", async ({ page }) => { - const mainPage = new MainPage(page); - await mainPage.pressFlexLayoutShortcut(); - await mainPage.waitForChangeIsSaved(); - await mainPage.isLayoutIconVisibleOnLayer(); - await mainPage.isLayoutMenuExpanded(); - await expect(mainPage.viewport).toHaveScreenshot("board-with-layout.png"); - await mainPage.clickCreatedBoardTitleOnCanvas(); - await mainPage.changeLayoutVerticalPadding("5"); - await mainPage.waitForChangeIsSaved(); - await mainPage.changeLayoutHorizontalPadding("15"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot("layout-padding-5-15.png"); - await mainPage.changeLayoutHorizontalPadding("0"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot( - "layout-horizontal_padding-0.png" - ); - await mainPage.changeLayoutVerticalPadding("0"); - await mainPage.waitForChangeIsSaved(); - await expect(mainPage.viewport).toHaveScreenshot( - "layout-vertical_padding-0.png" - ); }); diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-align-center.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-align-center.png new file mode 100644 index 0000000..976940e Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-align-center.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-align-end.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-align-end.png new file mode 100644 index 0000000..c94363b Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-align-end.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-align-start.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-align-start.png new file mode 100644 index 0000000..f651cc6 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-align-start.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-margin-10-25.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-margin-10-25.png new file mode 100644 index 0000000..957679d Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-margin-10-25.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-margin-horizont-0.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-margin-horizont-0.png new file mode 100644 index 0000000..f651cc6 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-margin-horizont-0.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-margin-vert-0.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-margin-vert-0.png new file mode 100644 index 0000000..b868106 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-margin-vert-0.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-position-absolute.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-position-absolute.png new file mode 100644 index 0000000..8b45aa5 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/flex-element-position-absolute.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-column-gap-highlighted.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-column-gap-highlighted.png new file mode 100644 index 0000000..51a11d1 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-column-gap-highlighted.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-no-column-gap.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-no-column-gap.png new file mode 100644 index 0000000..7189a3a Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-no-column-gap.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-no-horizont-padding.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-no-horizont-padding.png new file mode 100644 index 0000000..7189a3a Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-no-horizont-padding.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-no-vertical-padding.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-no-vertical-padding.png new file mode 100644 index 0000000..7189a3a Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-no-vertical-padding.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-padding-gap-0.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-padding-gap-0.png new file mode 100644 index 0000000..7189a3a Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-padding-gap-0.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-top-left-padding-10-15-justify.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-top-left-padding-10-15-justify.png new file mode 100644 index 0000000..fd68c51 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-top-left-padding-10-15-justify.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-top-left-padding-10-15.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-top-left-padding-10-15.png new file mode 100644 index 0000000..3772195 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-top-left-padding-10-15.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-top-left-right-bottom-padding.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-top-left-right-bottom-padding.png new file mode 100644 index 0000000..266dbe1 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-top-left-right-bottom-padding.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-top-left-right-padding-justify-align.png b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-top-left-right-padding-justify-align.png new file mode 100644 index 0000000..f45f981 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/chrome/layout-top-left-right-padding-justify-align.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-align-center.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-align-center.png new file mode 100644 index 0000000..db28a4e Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-align-center.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-align-end.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-align-end.png new file mode 100644 index 0000000..62b5090 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-align-end.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-align-start.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-align-start.png new file mode 100644 index 0000000..bfc294a Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-align-start.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-margin-10-25.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-margin-10-25.png new file mode 100644 index 0000000..87f5fc9 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-margin-10-25.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-margin-horizont-0.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-margin-horizont-0.png new file mode 100644 index 0000000..bfc294a Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-margin-horizont-0.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-margin-vert-0.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-margin-vert-0.png new file mode 100644 index 0000000..48d00b1 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-margin-vert-0.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-position-absolute.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-position-absolute.png new file mode 100644 index 0000000..a5b9656 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/flex-element-position-absolute.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-column-gap-highlighted.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-column-gap-highlighted.png new file mode 100644 index 0000000..74a7a78 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-column-gap-highlighted.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-no-column-gap.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-no-column-gap.png new file mode 100644 index 0000000..01f58d7 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-no-column-gap.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-no-horizont-padding.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-no-horizont-padding.png new file mode 100644 index 0000000..01f58d7 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-no-horizont-padding.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-no-vertical-padding.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-no-vertical-padding.png new file mode 100644 index 0000000..01f58d7 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-no-vertical-padding.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-padding-gap-0.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-padding-gap-0.png new file mode 100644 index 0000000..01f58d7 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-padding-gap-0.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-top-left-padding-10-15-justify.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-top-left-padding-10-15-justify.png new file mode 100644 index 0000000..edbfaa2 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-top-left-padding-10-15-justify.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-top-left-padding-10-15.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-top-left-padding-10-15.png new file mode 100644 index 0000000..d50da64 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-top-left-padding-10-15.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-top-left-right-bottom-padding.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-top-left-right-bottom-padding.png new file mode 100644 index 0000000..a80ee06 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-top-left-right-bottom-padding.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-top-left-right-padding-justify-align.png b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-top-left-right-padding-justify-align.png new file mode 100644 index 0000000..8ce4d9f Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/firefox/layout-top-left-right-padding-justify-align.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-align-center.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-align-center.png new file mode 100644 index 0000000..3f8115c Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-align-center.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-align-end.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-align-end.png new file mode 100644 index 0000000..0378d21 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-align-end.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-align-start.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-align-start.png new file mode 100644 index 0000000..3798477 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-align-start.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-margin-10-25.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-margin-10-25.png new file mode 100644 index 0000000..3fe0349 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-margin-10-25.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-margin-horizont-0.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-margin-horizont-0.png new file mode 100644 index 0000000..3798477 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-margin-horizont-0.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-margin-vert-0.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-margin-vert-0.png new file mode 100644 index 0000000..9262879 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-margin-vert-0.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-position-absolute.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-position-absolute.png new file mode 100644 index 0000000..0942c47 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/flex-element-position-absolute.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-column-gap-highlighted.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-column-gap-highlighted.png new file mode 100644 index 0000000..45c0b0d Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-column-gap-highlighted.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-horizontal-padding-0.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-horizontal-padding-0.png new file mode 100644 index 0000000..531f522 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-horizontal-padding-0.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-no-column-gap.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-no-column-gap.png new file mode 100644 index 0000000..98a5f4b Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-no-column-gap.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-no-horizont-padding.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-no-horizont-padding.png new file mode 100644 index 0000000..98a5f4b Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-no-horizont-padding.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-no-vertical-padding.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-no-vertical-padding.png new file mode 100644 index 0000000..98a5f4b Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-no-vertical-padding.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-padding-gap-0.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-padding-gap-0.png new file mode 100644 index 0000000..98a5f4b Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-padding-gap-0.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-top-left-padding-10-15-justify.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-top-left-padding-10-15-justify.png new file mode 100644 index 0000000..b397aef Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-top-left-padding-10-15-justify.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-top-left-padding-10-15.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-top-left-padding-10-15.png new file mode 100644 index 0000000..0ba2d04 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-top-left-padding-10-15.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-top-left-right-bottom-padding.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-top-left-right-bottom-padding.png new file mode 100644 index 0000000..89daaf9 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-top-left-right-bottom-padding.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-top-left-right-padding-justify-align.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-top-left-right-padding-justify-align.png new file mode 100644 index 0000000..37a36fd Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-top-left-right-padding-justify-align.png differ diff --git a/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-vertical-padding-0.png b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-vertical-padding-0.png new file mode 100644 index 0000000..1a83556 Binary files /dev/null and b/tests/composition/composition-flex-layout.spec.js-snapshots/webkit/layout-vertical-padding-0.png differ