diff --git a/packages/fiori/cypress/specs/FCL.cy.tsx b/packages/fiori/cypress/specs/FCL.cy.tsx
index 6626b94417a1..ffa10d518c5c 100644
--- a/packages/fiori/cypress/specs/FCL.cy.tsx
+++ b/packages/fiori/cypress/specs/FCL.cy.tsx
@@ -1,12 +1,15 @@
 import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import FlexibleColumnLayout from "../../src/FlexibleColumnLayout.js";
-import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+
+before(() => {
+	cy.wrap({ setAnimationMode })
+		.then(api => {
+			return api.setAnimationMode("none");
+		});
+});
 
 describe("Columns resize", () => {
 	beforeEach(() => {
-		cy.wrap({ setAnimationMode })
-			.invoke("setAnimationMode", AnimationMode.None);
-
 		cy.mount(
 			<FlexibleColumnLayout id="fcl" style={{ height: "300px" }} layout="TwoColumnsMidExpanded">
 				<div class="column" id="startColumn" slot="startColumn">some content</div>
@@ -106,7 +109,7 @@ describe("ACC", () => {
 			.find("slot[name=endColumn]")
 			.should("have.attr", "aria-hidden");
 	});
-	
+
 	it("verifies that aria-valuenow is set on separators", () => {
 		cy.mount(
 			<FlexibleColumnLayout id="fcl" style={{ height: "300px" }} layout="ThreeColumnsMidExpanded">
@@ -130,3 +133,914 @@ describe("ACC", () => {
 			.should("have.attr", "aria-valuenow");
 	});
 });
+
+describe("FlexibleColumnLayout Behavior", () => {
+	it("tests Desktop size 1400px", () => {
+		cy.viewport(1400, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="ThreeColumnsMidExpanded">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.attr", "_visible-columns", "3");
+	});
+
+	it("tests Tablet Size 1000px", () => {
+		cy.viewport(1000, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="ThreeColumnsMidExpanded">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.attr", "_visible-columns", "2");
+	});
+
+	it("tests Phone size 500px", () => {
+		cy.viewport(320, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="ThreeColumnsMidExpanded">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.attr", "_visible-columns", "1");
+	});
+});
+
+describe("Layout API Tests", () => {
+	beforeEach(() => {
+		cy.viewport(1600, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="TwoColumnsStartExpanded">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+	});
+
+	it("tests change layout with API", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.attr", "_visible-columns", "2");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "TwoColumnsStartExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.attr", "_visible-columns", "3");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+	});
+
+	it("tests change layout upon dragging the separator to a new layout", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "TwoColumnsStartExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "TwoColumnsStartExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.realMouseDown()
+			.realMouseMove(-400, 0)
+			.realMouseUp();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "TwoColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.realMouseDown()
+			.realMouseMove(400, 0)
+			.realMouseUp();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "TwoColumnsStartExpanded");
+	});
+});
+
+describe("Column Expansion Tests", () => {
+	beforeEach(() => {
+		cy.viewport(1600, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="TwoColumnsStartExpanded">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+	});
+
+	it("allows expand mid column from TwoColumnsStartExpanded to TwoColumnsMidExpanded", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "TwoColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "TwoColumnsMidExpanded");
+	});
+
+	it("allows hide end column from ThreeColumnsMidExpanded to ThreeColumnsMidExpandedEndHidden", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+	});
+});
+
+describe("Start Column Expansion Test", () => {
+	beforeEach(() => {
+		cy.viewport(1600, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="TwoColumnsStartExpanded">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+	});
+
+	it("allows expand start column from TwoColumnsMidExpanded to TwoColumnsStartExpanded", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "TwoColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "TwoColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "TwoColumnsStartExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "TwoColumnsStartExpanded");
+	});
+
+	it("allows expand start column from ThreeColumnsMidExpandedEndHidden to ThreeColumnsStartExpandedEndHidden", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsStartExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsStartExpandedEndHidden");
+	});
+
+	it("allows expand mid column from ThreeColumnsStartExpandedEndHidden to ThreeColumnsMidExpandedEndHidden", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsStartExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsStartExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+	});
+
+	it("allows expand end column from ThreeColumnsMidExpandedEndHidden to ThreeColumnsMidExpanded", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+	});
+});
+
+describe("Layout change by dragging end-separator on desktop", () => {
+	beforeEach(() => {
+		cy.viewport(1400, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="ThreeColumnsMidExpandedEndHidden">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+	});
+
+	it("allows expand end-column from ThreeColumnsMidExpandedEndHidden to ThreeColumnsMidExpanded", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.realMouseDown()
+			.realMouseMove(-400, 0)
+			.realMouseUp();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+	});
+
+	it("allows expand end-column from ThreeColumnsMidExpanded to ThreeColumnsEndExpanded", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.realMouseDown()
+			.realMouseMove(-400, 0)
+			.realMouseUp();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsEndExpanded");
+	});
+});
+
+describe("Layout change by dragging start-separator on tablet", () => {
+	beforeEach(() => {
+		cy.viewport(800, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="TwoColumnsStartExpanded">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+	});
+
+	it("allows expand mid column from TwoColumnsStartExpanded to TwoColumnsMidExpanded", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "TwoColumnsStartExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "TwoColumnsStartExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.realMouseDown()
+			.realMouseMove(-400, 0)
+			.realMouseUp();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "TwoColumnsMidExpanded");
+	});
+
+	it("allows expand start column from TwoColumnsMidExpanded to TwoColumnsStartExpanded", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "TwoColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "TwoColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
+			.as("separator");
+
+		// Separate the drag operations
+		cy.get("@separator")
+			.realMouseDown();
+
+		cy.get("@separator")
+			.realMouseMove(400, 0);
+
+		cy.get("@separator")
+			.realMouseUp();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "TwoColumnsStartExpanded");
+	});
+
+	it("allows hide end column from ThreeColumnsMidExpanded to ThreeColumnsMidExpandedEndHidden", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
+			.as("startSeparator");
+
+		cy.get("@startSeparator")
+			.realMouseDown();
+
+		cy.get("@startSeparator")
+			.realMouseMove(300, 0);
+
+		cy.get("@startSeparator")
+			.realMouseUp();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+	});
+});
+
+describe("Tablet Layout Tests", () => {
+	beforeEach(() => {
+		cy.viewport(800, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="ThreeColumnsMidExpandedEndHidden">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+	});
+
+	it("allows expand start column from ThreeColumnsMidExpandedEndHidden to ThreeColumnsStartExpandedEndHidden", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.realMouseDown()
+			.realMouseMove(400, 0)
+			.realMouseUp();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsStartExpandedEndHidden");
+	});
+
+	it("allows expand mid column from ThreeColumnsStartExpandedEndHidden to ThreeColumnsMidExpandedEndHidden", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsStartExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsStartExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
+			.as("separator");
+
+		cy.get("@separator")
+			.realMouseDown();
+
+		cy.get("@separator")
+			.realMouseMove(-400, 0);
+
+		cy.get("@separator")
+			.realMouseUp();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+	});
+
+	it("preserves ThreeColumnsMidExpandedEndHidden when dragging to shrink start column", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.realMouseDown()
+			.realMouseMove(-100, 0)
+			.realMouseUp();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+	});
+});
+
+describe("Layout change by dragging end-separator on tablet", () => {
+	beforeEach(() => {
+		cy.viewport(800, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="ThreeColumnsMidExpandedEndHidden">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+	});
+
+	it("allows expand end-column from ThreeColumnsMidExpandedEndHidden to ThreeColumnsMidExpanded", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.realMouseDown()
+			.realMouseMove(-400, 0)
+			.realMouseUp();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+	});
+
+	it("allows expand end-column from ThreeColumnsMidExpanded to ThreeColumnsEndExpanded", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.should("be.visible")
+			.as("endSeparator");
+
+		cy.get("@endSeparator")
+			.realMouseDown();
+
+		cy.get("@endSeparator")
+			.realMouseMove(-300, 0);
+
+		cy.get("@endSeparator")
+			.realMouseUp();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsEndExpanded");
+	});
+});
+
+describe("Preserves column min-width", () => {
+	beforeEach(() => {
+		cy.viewport(1400, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="ThreeColumnsMidExpanded">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+	});
+
+	it("complies with min-width requirement on smallest desktop", () => {
+		const smallestDesktopWidth = 1024;
+		const smallestColumnWidth = 248;
+
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("css", "width", `${smallestDesktopWidth}px`);
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.css", "width", `${smallestDesktopWidth}px`);
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--start")
+			.should($startColumn => {
+				const width = $startColumn.width();
+				expect(width).to.equal(smallestColumnWidth);
+			});
+	});
+
+	it("preserves min-width of begin column", () => {
+		const smallestColumnWidth = 248;
+
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "TwoColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "TwoColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--start")
+			.then($startColumn => {
+				const initialWidth = $startColumn.width();
+
+				const differenceFromSmallestWidth = initialWidth - smallestColumnWidth;
+				const testOffsetX = differenceFromSmallestWidth + 50;
+
+				cy.get("[ui5-flexible-column-layout]")
+					.shadow()
+					.find(".ui5-fcl-separator-start")
+					.realMouseDown()
+					.realMouseMove(-testOffsetX, 0)
+					.realMouseUp();
+
+				cy.get("[ui5-flexible-column-layout]")
+					.shadow()
+					.find(".ui5-fcl-column--start")
+					.then($finalColumn => {
+						const finalWidth = $finalColumn.width();
+					});
+
+				cy.get("[ui5-flexible-column-layout]")
+					.should("have.prop", "layout", "TwoColumnsMidExpanded");
+
+				cy.get("[ui5-flexible-column-layout]")
+					.shadow()
+					.find(".ui5-fcl-column--start")
+					.should($startColumn => {
+						const finalWidth = $startColumn.width();
+						expect(finalWidth).to.be.at.least(smallestColumnWidth);
+					});
+			});
+	});
+
+	it("preserves min-width of mid column in 2-column layout", () => {
+		const smallestColumnWidth = 248;
+
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "TwoColumnsStartExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "TwoColumnsStartExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
+			.as("separator");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--middle")
+			.then($midColumn => {
+				const midColumnWidth = $midColumn.width();
+				const differenceFromSmallestWidth = midColumnWidth - smallestColumnWidth;
+				const testOffsetX = differenceFromSmallestWidth + 10;
+
+				cy.get("@separator")
+					.realMouseDown();
+
+				cy.get("@separator")
+					.realMouseMove(testOffsetX, 0);
+
+				cy.get("@separator")
+					.realMouseUp();
+
+				cy.get("[ui5-flexible-column-layout]")
+					.should("have.prop", "layout", "TwoColumnsStartExpanded");
+
+				cy.get("[ui5-flexible-column-layout]")
+					.shadow()
+					.find(".ui5-fcl-column--middle")
+					.should($finalMidColumn => {
+						const finalWidth = $finalMidColumn.width();
+						expect(finalWidth).to.be.closeTo(smallestColumnWidth, 5);
+					});
+			});
+	});
+
+	it("preserves min-width of mid column in 3-column layout", () => {
+		const smallestColumnWidth = 248;
+
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--middle")
+			.then($midColumn => {
+				const midColumnWidth = $midColumn.width();
+				const differenceFromSmallestWidth = midColumnWidth - smallestColumnWidth;
+				const testOffsetX = differenceFromSmallestWidth + 10;
+
+				cy.get("[ui5-flexible-column-layout]")
+					.shadow()
+					.find(".ui5-fcl-separator-end")
+					.realMouseDown()
+					.realMouseMove(-testOffsetX, 0)
+					.realMouseUp();
+
+				cy.get("[ui5-flexible-column-layout]")
+					.should("have.prop", "layout", "ThreeColumnsEndExpanded");
+
+				cy.get("[ui5-flexible-column-layout]")
+					.shadow()
+					.find(".ui5-fcl-column--middle")
+					.then($finalMidColumn => {
+						const finalWidth = $finalMidColumn.width();
+
+						expect(finalWidth).to.be.closeTo(smallestColumnWidth, 10);
+					});
+			});
+	});
+
+	it("preserves min-width of end column", () => {
+		const smallestColumnWidth = 248;
+
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--end")
+			.then($endColumn => {
+				const endColumnWidth = $endColumn.width();
+				const differenceFromSmallestWidth = endColumnWidth - smallestColumnWidth;
+				const testOffsetX = differenceFromSmallestWidth + 10;
+
+				cy.get("[ui5-flexible-column-layout]")
+					.shadow()
+					.find(".ui5-fcl-separator-end")
+					.realMouseDown()
+					.realMouseMove(testOffsetX, 0)
+					.realMouseUp();
+
+				cy.get("[ui5-flexible-column-layout]")
+					.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+				cy.get("[ui5-flexible-column-layout]")
+					.shadow()
+					.find(".ui5-fcl-column--end")
+					.then($finalEndColumn => {
+						const finalWidth = $finalEndColumn.width();
+
+						expect(finalWidth).to.be.closeTo(smallestColumnWidth, 10);
+					});
+			});
+	});
+
+	it("fully reveals the end-column on dragging the end-separator only few pixels", () => {
+		const smallestColumnWidth = 248;
+	
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+	
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+	
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.should("be.visible")
+			.as("endSeparator");
+	
+		cy.get("@endSeparator")
+			.realMouseDown();
+	
+		cy.get("@endSeparator")
+			.realMouseMove(-100, 0);
+	
+		cy.get("@endSeparator")
+			.realMouseUp();
+	
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+	
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--end")
+			.should($endColumn => {
+				const width = $endColumn.width();
+				expect(width).to.be.closeTo(smallestColumnWidth, 10);
+			});
+	});
+});
+
+describe("Accessibility with Animation Disabled", () => {
+	beforeEach(() => {
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="ThreeColumnsMidExpandedEndHidden">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").then(($fcl) => {
+			($fcl[0] as any).accessibilityAttributes = {
+				startColumn: {
+					name: "Products list",
+				},
+				midColumn: {
+					name: "Product information",
+				},
+				endColumn: {
+					name: "Product detailed information",
+				},
+				startSeparator: {
+					name: "Start Draggable Splitter",
+				},
+				endSeparator: {
+					name: "End Draggable Splitter",
+				},
+			};
+		});
+	});
+
+	it("tests separator acc attrs", () => {
+		const startSeparatorText = "Start Draggable Splitter";
+		const endSeparatorText = "End Draggable Splitter";
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("have.attr", "title", startSeparatorText);
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.should("have.attr", "title", endSeparatorText);
+	});
+
+	it("tests acc default roles", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--start")
+			.should("have.attr", "role", "region");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--middle")
+			.should("have.attr", "role", "region");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--end")
+			.should("not.have.attr", "role");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("have.attr", "role", "separator");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.should("have.attr", "role", "separator");
+	});
+
+	it("tests acc custom roles", () => {
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="ThreeColumnsMidExpanded">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").then(($fcl) => {
+			($fcl[0] as any).accessibilityAttributes = {
+				startColumn: { role: "complementary" },
+				startSeparator: { role: "navigation" },
+				midColumn: { role: "main" },
+				endSeparator: { role: "navigation" },
+				endColumn: { role: "complementary" },
+			};
+		});
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--start")
+			.should("have.attr", "role", "complementary");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--middle")
+			.should("have.attr", "role", "main");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--end")
+			.should("have.attr", "role", "complementary");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("have.attr", "role", "navigation");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.should("have.attr", "role", "navigation");
+	});
+
+	it("tests acc attrs", () => {
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="OneColumn">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--start")
+			.should("not.have.attr", "aria-hidden");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-column--middle")
+			.should("have.attr", "aria-hidden", "true");
+	});
+});
+
+describe("First column closing arrow behavior", () => {
+	beforeEach(() => {
+		cy.viewport(1400, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout style={{ height: "300px" }} layout="ThreeColumnsStartHiddenMidExpanded">
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+	});
+
+	it("should switch layout and update arrow icon on desktop", () => {
+		cy.get("[ui5-flexible-column-layout]")
+			.invoke("prop", "layout", "ThreeColumnsStartHiddenMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-arrow--start")
+			.should("have.attr", "icon", "slim-arrow-right");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-arrow--start")
+			.click();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-arrow--start")
+			.should("have.attr", "icon", "slim-arrow-left");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-arrow--start")
+			.click();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.prop", "layout", "ThreeColumnsStartHiddenMidExpanded");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-arrow--start")
+			.should("have.attr", "icon", "slim-arrow-right");
+	});
+});
\ No newline at end of file
diff --git a/packages/fiori/test/specs/FCL.spec.js b/packages/fiori/test/specs/FCL.spec.js
deleted file mode 100644
index aa11d2712377..000000000000
--- a/packages/fiori/test/specs/FCL.spec.js
+++ /dev/null
@@ -1,590 +0,0 @@
-import { assert } from "chai";
-
-
-describe("FlexibleColumnLayout Behavior", () => {
-	before(async () => {
-		await browser.setWindowSize(1000, 1080);
-		await browser.url(`test/pages/FCL.html?sap-ui-animationMode=none`);
-	});
-
-	it("tests Desktop size 1400px", async () => {
-		// act
-		await browser.setWindowSize(1400, 1080);
-
-		const layoutChangeCounter = await browser.$("#testLayoutChange");
-		const visibleColumns = await browser.$("#fcl3").getAttribute("_visible-columns");
-
-		// assert
-		assert.strictEqual(visibleColumns, "3", "3 columns are visible");
-		assert.strictEqual(await layoutChangeCounter.getValue(), "1", "The event layout-change is not fired.");
-	});
-
-	it("tests Tablet Size 1000px", async () => {
-		// act
-		await browser.setWindowSize(1000, 1080);
-
-		const layoutChangeCounter = await browser.$("#testLayoutChange");
-		const visibleColumns = await browser.$("#fcl3").getAttribute("_visible-columns");
-
-		// assert
-		assert.strictEqual(visibleColumns, "2", "2 columns are visible");
-		assert.strictEqual(await layoutChangeCounter.getValue(), "2", "The event layout-change after resizing.");
-	});
-
-	it("tests Phone size 500px", async () => {
-		// act
-		await browser.setWindowSize(500, 1080);
-
-		const layoutChangeCounter = await browser.$("#testLayoutChange");
-		const visibleColumns = await browser.$("#fcl3").getAttribute("_visible-columns");
-
-		// assert
-		assert.strictEqual(visibleColumns, "1", "1 columns are visible");
-		assert.strictEqual(await layoutChangeCounter.getValue(), "3", "The event layout-change after resizing.");
-
-		// reset
-		await browser.setWindowSize(1400, 1080);
-	});
-
-	it("tests change layout with API", async () => {
-		const fcl = await browser.$("#fcl1");
-		const btn = await browser.$("#switchBtn1");
-
-		let visibleColumns = await browser.$("#fcl1").getAttribute("_visible-columns");
-
-		assert.strictEqual(visibleColumns, "2", "2 columns are visible");
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsStartExpanded", "new layout set");
-
-		// act
-		await btn.click(); // fcl1.layout =  "ThreeColumnsMidExpanded"
-
-		visibleColumns = await browser.$("#fcl1").getAttribute("_visible-columns");
-
-		// assert
-		assert.strictEqual(visibleColumns, "3", "3 columns are visible");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "new layout set");
-	});
-
-	it("tests change layout upon dragging the separator to a new layout", async () => {
-		const fcl = await browser.$("#fcl1");
-		const layoutChangeCounter = await browser.$("#layoutChangeRes4");
-		const separator = await fcl.shadow$(".ui5-fcl-separator-start");
-		let counter = parseInt(await layoutChangeCounter.getValue()) || 0;
-
-		// set init state
-		await fcl.setProperty("layout", "TwoColumnsStartExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsStartExpanded", "expected initilal layout");
-
-		// act
-		await separator.dragAndDrop({ x: -400, y: 0 }); // drag to "TwoColumnsMidExpanded"
-
-		// assert
-		assert.strictEqual(await layoutChangeCounter.getValue(), `${++counter}`, "The event layout-change fired once.");
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsMidExpanded", "new layout set");
-
-		// act
-		await separator.dragAndDrop({ x: 400, y: 0 }); // drag to "TwoColumnsStartExpanded"
-
-		// assert
-		assert.strictEqual(await layoutChangeCounter.getValue(), `${++counter}`, "The event layout-change fired again.");
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsStartExpanded", "new layout set");
-	});
-});
-
-describe("Layout change by dragging start-separator on desktop", () => {
-	before(async () => {
-		await browser.url(`test/pages/FCL.html?sap-ui-animationMode=none`);
-	});
-
-	it("allows expand mid column from TwoColumnsStartExpanded to TwoColumnsMidExpanded", async () => {
-		const fcl = await browser.$("#fcl1");
-		const startSeparator = await fcl.shadow$(".ui5-fcl-separator-start");
-
-		// set init state
-		await fcl.setProperty("layout", "TwoColumnsStartExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsStartExpanded", "expected initilal layout");
-
-		// act
-		await startSeparator.dragAndDrop({ x: -400, y: 0 }); // expand the mid column
-
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsMidExpanded", "new layout set");
-	});
-
-	it("allows expand start column from TwoColumnsMidExpanded to TwoColumnsStartExpanded", async () => {
-		const fcl = await browser.$("#fcl1");
-		const separator = await fcl.shadow$(".ui5-fcl-separator-start");
-
-		// set init state
-		await fcl.setProperty("layout", "TwoColumnsMidExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsMidExpanded", "expected initilal layout");
-
-		// act
-		await separator.dragAndDrop({ x: 400, y: 0 }); // expand the start column
-
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsStartExpanded", "new layout set");
-	});
-
-	it("allows hide end column from ThreeColumnsMidExpanded to ThreeColumnsMidExpandedEndHidden", async () => {
-		const fcl = await browser.$("#fcl3"),
-			startSeparator = await fcl.shadow$(".ui5-fcl-separator-start");
-
-		// set init state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "expected initilal layout");
-
-		// act: expand start-column
-		await startSeparator.dragAndDrop({ x: 300, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpandedEndHidden", "new layout set");
-	});
-
-	it("allows expand start column from ThreeColumnsMidExpandedEndHidden to ThreeColumnsStartExpandedEndHidden", async () => {
-		const fcl = await browser.$("#fcl3"),
-			startSeparator = await fcl.shadow$(".ui5-fcl-separator-start");
-
-		// set init state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpandedEndHidden");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpandedEndHidden", "new layout set");
-
-		// act
-		await startSeparator.dragAndDrop({ x: 100, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsStartExpandedEndHidden", "new layout set");
-	});
-
-	it("allows expand mid column from ThreeColumnsStartExpandedEndHidden to ThreeColumnsMidExpandedEndHidden", async () => {
-		const fcl = await browser.$("#fcl3"),
-			startSeparator = await fcl.shadow$(".ui5-fcl-separator-start");
-
-		// set init state
-		await fcl.setProperty("layout", "ThreeColumnsStartExpandedEndHidden");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsStartExpandedEndHidden", "new layout set");
-
-		// act
-		await startSeparator.dragAndDrop({ x: -100, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpandedEndHidden", "new layout set");
-	});
-
-	it("allows expand end column from ThreeColumnsMidExpandedEndHidden to ThreeColumnsMidExpanded", async () => {
-		const fcl = await browser.$("#fcl3"),
-			startSeparator = await fcl.shadow$(".ui5-fcl-separator-start");
-
-		// assert init state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpandedEndHidden");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpandedEndHidden", "expected initilal layout");
-
-		// act: expand start-column
-		await startSeparator.dragAndDrop({ x: -300, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "new layout set");
-	});
-});
-
-describe("Layout change by dragging end-separator on desktop", () => {
-	before(async () => {
-		await browser.url(`test/pages/FCL.html?sap-ui-animationMode=none`);
-	});
-
-	it("allows expand end-column from ThreeColumnsMidExpandedEndHidden to ThreeColumnsMidExpanded", async () => {
-		const fcl = await browser.$("#fcl3"),
-			endSeparator = await fcl.shadow$(".ui5-fcl-separator-end");
-
-		// set initial state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpandedEndHidden");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpandedEndHidden", "new layout set");
-
-		// act: drag to show the end column
-		await endSeparator.dragAndDrop({ x: -400, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "new layout set");
-	});
-
-	it("allows exoand end-column from ThreeColumnsMidExpanded to ThreeColumnsEndExpanded", async () => {
-		const fcl = await browser.$("#fcl3"),
-			endSeparator = await fcl.shadow$(".ui5-fcl-separator-end");
-
-		// set initial state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "new layout set");
-
-		// act: drag to make the end column wider than mid-column
-		await endSeparator.dragAndDrop({ x: -400, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsEndExpanded", "new layout set");
-	});
-});
-
-describe("Layout change by dragging start-separator on tablet", () => {
-	before(async () => {
-		await browser.url(`test/pages/FCL.html?sap-ui-animationMode=none`);
-	});
-
-	it("allows expand mid column from TwoColumnsStartExpanded to TwoColumnsMidExpanded", async () => {
-		await browser.setWindowSize(1000, 1080); // set tablet size
-
-		const fcl = await browser.$("#fcl1");
-		const startSeparator = await fcl.shadow$(".ui5-fcl-separator-start");
-
-		// set init state
-		await fcl.setProperty("layout", "TwoColumnsStartExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsStartExpanded", "expected initilal layout");
-
-		// act
-		await startSeparator.dragAndDrop({ x: -400, y: 0 }); // expand the mid column
-
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsMidExpanded", "new layout set");
-	});
-
-	it("allows expand start column from TwoColumnsMidExpanded to TwoColumnsStartExpanded", async () => {
-		const fcl = await browser.$("#fcl1");
-		const separator = await fcl.shadow$(".ui5-fcl-separator-start");
-
-		// set init state
-		await fcl.setProperty("layout", "TwoColumnsMidExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsMidExpanded", "expected initilal layout");
-
-		// act
-		await separator.dragAndDrop({ x: 400, y: 0 }); // expand the start column
-
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsStartExpanded", "new layout set");
-	});
-
-	it("allows hide end column from ThreeColumnsMidExpanded to ThreeColumnsMidExpandedEndHidden", async () => {
-		const fcl = await browser.$("#fcl3"),
-			startSeparator = await fcl.shadow$(".ui5-fcl-separator-start");
-
-		// set init state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "expected initilal layout");
-
-		// act: expand start-column
-		await startSeparator.dragAndDrop({ x: 300, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpandedEndHidden", "new layout set");
-	});
-
-	it("allows expand start column from ThreeColumnsMidExpandedEndHidden to ThreeColumnsStartExpandedEndHidden", async () => {
-		const fcl = await browser.$("#fcl3"),
-			startSeparator = await fcl.shadow$(".ui5-fcl-separator-start");
-
-		// set init state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpandedEndHidden");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpandedEndHidden", "new layout set");
-
-		// act
-		await startSeparator.dragAndDrop({ x: 400, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsStartExpandedEndHidden", "new layout set");
-	});
-
-	it("allows expand mid column from ThreeColumnsStartExpandedEndHidden to ThreeColumnsMidExpandedEndHidden", async () => {
-		const fcl = await browser.$("#fcl3"),
-			startSeparator = await fcl.shadow$(".ui5-fcl-separator-start");
-
-		// set init state
-		await fcl.setProperty("layout", "ThreeColumnsStartExpandedEndHidden");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsStartExpandedEndHidden", "new layout set");
-
-		// act
-		await startSeparator.dragAndDrop({ x: -400, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpandedEndHidden", "new layout set");
-	});
-
-	it("preserves ThreeColumnsMidExpandedEndHidden when dragging to shrink start column", async () => {
-		const fcl = await browser.$("#fcl3"),
-			startSeparator = await fcl.shadow$(".ui5-fcl-separator-start");
-
-		// assert init state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpandedEndHidden");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpandedEndHidden", "expected initilal layout");
-
-		// act: expand start-column
-		await startSeparator.dragAndDrop({ x: -100, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpandedEndHidden", "layout is preserved");
-	});
-});
-
-describe("Layout change by dragging end-separator on tablet", () => {
-	before(async () => {
-		await browser.url(`test/pages/FCL.html?sap-ui-animationMode=none`);
-	});
-
-	it("allows expand end-column from ThreeColumnsMidExpandedEndHidden to ThreeColumnsMidExpanded", async () => {
-		const fcl = await browser.$("#fcl3"),
-			endSeparator = await fcl.shadow$(".ui5-fcl-separator-end");
-
-		// set initial state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpandedEndHidden");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpandedEndHidden", "new layout set");
-
-		// act: drag to show the end column
-		await endSeparator.dragAndDrop({ x: -400, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "new layout set");
-	});
-
-	it("allows exoand end-column from ThreeColumnsMidExpanded to ThreeColumnsEndExpanded", async () => {
-		const fcl = await browser.$("#fcl3"),
-			endSeparator = await fcl.shadow$(".ui5-fcl-separator-end");
-
-		// set initial state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "new layout set");
-
-		// act: drag to make the end column wider than mid-column
-		await endSeparator.dragAndDrop({ x: -300, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsEndExpanded", "new layout set");
-	});
-});
-
-describe("Preserves column min-width", () => {
-	before(async () => {
-		await browser.url(`test/pages/FCL.html?sap-ui-animationMode=none`);
-	});
-
-	it("complies with min-width requiremet on smallest desktop", async () => {
-		await browser.setWindowSize(1400, 1080);
-
-		const fcl = await browser.$("#fcl3"),
-			smallestDesktopWidth = 1024,
-			smallestColumnWidth = 248;
-
-		// set initial state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "new layout set");
-
-		// set FCL width to the smallest desktop width
-		await browser.executeAsync(async (newWidth, done) => {
-			document.getElementById("fcl3").style.width = `${newWidth}px`;
-			done();
-		}, smallestDesktopWidth);
-
-		const startColumn = await fcl.shadow$(".ui5-fcl-column--start");
-		const startColumnWidth = await startColumn.getSize("width");
-		const fclWidth = await fcl.getSize("width");
-
-		// assert
-		assert.strictEqual(fclWidth, smallestDesktopWidth, "fcl is the smallest desktop width");
-		assert.strictEqual(startColumnWidth, smallestColumnWidth, "min-width is respected");
-	});
-
-	it("preserves min-width of begin column", async () => {
-		await browser.setWindowSize(1400, 1080);
-
-		const fcl = await browser.$("#fcl3"),
-			startSeparator = await fcl.shadow$(".ui5-fcl-separator-start"),
-			smallestColumnWidth = 248;
-
-		// set initial state
-		await fcl.setProperty("layout", "TwoColumnsMidExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsMidExpanded", "new layout set");
-
-		const startColumn = await fcl.shadow$(".ui5-fcl-column--start");
-		const startColumnWidth = await startColumn.getSize("width");
-		const differenceFromSmallestWidth = startColumnWidth - smallestColumnWidth;
-		const testOffsetX = differenceFromSmallestWidth + 10; // surpass allowed diff with 10px
-
-		// act: drag srink below min-width
-		await startSeparator.dragAndDrop({ x: -testOffsetX, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsMidExpanded", "the layout is preserved");
-		assert.strictEqual(await startColumn.getSize("width"), smallestColumnWidth, "min-width is preserved");
-	});
-
-	it("preserves min-width of mid column in 2-column layout", async () => {
-		const fcl = await browser.$("#fcl3"),
-			startSeparator = await fcl.shadow$(".ui5-fcl-separator-start"),
-			smallestColumnWidth = 248;
-
-		// set initial state
-		await fcl.setProperty("layout", "TwoColumnsStartExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsStartExpanded", "new layout set");
-
-		const midColumn = await fcl.shadow$(".ui5-fcl-column--middle");
-		const midColumnWidth = await midColumn.getSize("width");
-		const differenceFromSmallestWidth = midColumnWidth - smallestColumnWidth;
-		const testOffsetX = differenceFromSmallestWidth + 10; // surpass allowed diff with 10px
-
-		// act: drag to srink below min-width
-		await startSeparator.dragAndDrop({ x: testOffsetX, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "TwoColumnsStartExpanded", "the layout is preserved");
-		assert.strictEqual(await midColumn.getSize("width"), smallestColumnWidth, "min-width is preserved");
-	});
-
-	it("preserves min-width of mid column in 3-column layout", async () => {
-		const fcl = await browser.$("#fcl3"),
-			endSeparator = await fcl.shadow$(".ui5-fcl-separator-end"),
-			smallestColumnWidth = 248;
-
-		// set initial state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "new layout set");
-
-		const midColumn = await fcl.shadow$(".ui5-fcl-column--middle");
-		const midColumnWidth = await midColumn.getSize("width");
-		const differenceFromSmallestWidth = midColumnWidth - smallestColumnWidth;
-		const testOffsetX = differenceFromSmallestWidth + 10; // surpass allowed diff with 10px
-
-		// act: drag to srink below min-width
-		await endSeparator.dragAndDrop({ x: -testOffsetX, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsEndExpanded", "the layout is updated");
-		assert.strictEqual(await midColumn.getSize("width"), smallestColumnWidth, "min-width is preserved");
-	});
-
-	it("preserves min-width of end column", async () => {
-		const fcl = await browser.$("#fcl3"),
-			endSeparator = await fcl.shadow$(".ui5-fcl-separator-end"),
-			smallestColumnWidth = 248;
-
-		// set initial state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpanded");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "new layout set");
-
-		const endColumn = await fcl.shadow$(".ui5-fcl-column--end");
-		const endColumnWidth = await endColumn.getSize("width");
-		const differenceFromSmallestWidth = endColumnWidth - smallestColumnWidth;
-		const testOffsetX = differenceFromSmallestWidth + 10; // surpass allowed diff with 10px
-
-		// act: drag to srink below min-width
-		await endSeparator.dragAndDrop({ x: testOffsetX, y: 0 });
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "the layout is preserved");
-		assert.strictEqual(await endColumn.getSize("width"), smallestColumnWidth, "min-width is preserved");
-	});
-
-	it("fully reveals the end-column on dragging the end-separator only few pixels", async () => {
-		const fcl = await browser.$("#fcl3"),
-			endSeparator = await fcl.shadow$(".ui5-fcl-separator-end"),
-			endColumn = await fcl.shadow$(".ui5-fcl-column--end"),
-			smallestColumnWidth = 248;
-
-		// set initial state
-		await fcl.setProperty("layout", "ThreeColumnsMidExpandedEndHidden");
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpandedEndHidden", "new layout set");
-
-		// act: drag to show the end column
-		await endSeparator.dragAndDrop({ x: -100, y: 0 });
-
-		// assert
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "new layout set");
-		assert.strictEqual(await endColumn.getSize("width"), smallestColumnWidth, "min-width is ensured");
-	});
-});
-
-describe("ACC", () => {
-	before(async () => {
-		await browser.url(`test/pages/FCL.html?sap-ui-animationMode=none`);
-	});
-
-	it("tests separator acc attrs", async () => {
-		const fcl = await browser.$("#fclAcc");
-		const startSeparatorDOM = await fcl.shadow$(".ui5-fcl-separator-start");
-		const endSeparatorDOM = await fcl.shadow$(".ui5-fcl-separator-end");
-		const startSeparatorText = "Start Draggable Splitter";
-		const endSeparatorText = "End Draggable Splitter";
-
-		// assert
-		assert.strictEqual(await startSeparatorDOM.getAttribute("title"), startSeparatorText,
-			"Start arrow container has the correct label.");
-		assert.strictEqual(await endSeparatorDOM.getAttribute("title"), endSeparatorText,
-			"End arrow container has the correct label.");
-	});
-
-	it("tests acc default roles", async () => {
-		let fcl = await browser.$("#fclAcc");
-
-		const startColumnDOM = await fcl.shadow$(".ui5-fcl-column--start");
-		const middleColumnDOM = await fcl.shadow$(".ui5-fcl-column--middle");
-		const endColumnDOM = await fcl.shadow$(".ui5-fcl-column--end");
-
-		const startSeparatorDOM = await fcl.shadow$(".ui5-fcl-separator-start");
-		const endSeparatorDOM = await fcl.shadow$(".ui5-fcl-separator-end");
-
-		// assert
-		assert.strictEqual(await startColumnDOM.getAttribute("role"), "region",
-			"Start column has the correct default role.");
-
-		assert.strictEqual(await middleColumnDOM.getAttribute("role"), "region",
-			"Middle column has the correct default role.");
-
-		assert.strictEqual(await endColumnDOM.getAttribute("role"), null,
-			"End column has the correct default role."); // hidden column
-
-		assert.strictEqual(await startSeparatorDOM.getAttribute("role"), "separator",
-			"Start arrow container has the correct default role.");
-
-		assert.strictEqual(await endSeparatorDOM.getAttribute("role"), "separator",
-			"End arrow container has the correct default role.");
-	});
-
-	it("tests acc custom roles", async () => {
-		let fcl = await browser.$("#fclAccRoles");
-
-		const startColumnDOM = await fcl.shadow$(".ui5-fcl-column--start");
-		const middleColumnDOM = await fcl.shadow$(".ui5-fcl-column--middle");
-		const endColumnDOM = await fcl.shadow$(".ui5-fcl-column--end");
-
-		const startSeparatorDOM = await fcl.shadow$(".ui5-fcl-separator-start");
-		const endSeparatorDOM = await fcl.shadow$(".ui5-fcl-separator-end");
-
-		// assert
-		assert.strictEqual(await startColumnDOM.getAttribute("role"), "complementary",
-			"Start column has the correct custom role.");
-
-		assert.strictEqual(await middleColumnDOM.getAttribute("role"), "main",
-			"Middle column has the correct custom role.");
-
-		assert.strictEqual(await endColumnDOM.getAttribute("role"), "complementary",
-			"End column has the correct custom role.");
-
-		assert.strictEqual(await startSeparatorDOM.getAttribute("role"), "navigation",
-			"Start arrow container has the correct custom role.");
-
-		assert.strictEqual(await endSeparatorDOM.getAttribute("role"), "navigation",
-			"End arrow container has the correct custom role.");
-	});
-
-	it("tests acc attrs", async () => {
-		let fcl = await browser.$("#fclAccAttrs");
-
-		const startColumnDOM = await fcl.shadow$(".ui5-fcl-column--start");
-		const middleColumnDOM = await fcl.shadow$(".ui5-fcl-column--middle");
-
-		// assert
-		assert.strictEqual(await startColumnDOM.getAttribute("aria-hidden"), null,
-			"Start column is not hidden from the acc tree.");
-
-		assert.strictEqual(await middleColumnDOM.getAttribute("aria-hidden"), "true",
-			"Middle column is hidden from the acc tree.");
-	});
-});
-
-describe("First column closing arrow behavior", () => {
-	it("should switch layout and update arrow icon on desktop", async () => {
-		const fcl = await browser.$("#fcl10");
-		const arrowBtn = await fcl.shadow$(".ui5-fcl-arrow--start");
-
-		await fcl.setProperty("layout", "ThreeColumnsStartHiddenMidExpanded");
-		assert.strictEqual(await arrowBtn.getAttribute("icon"), "slim-arrow-right", "Arrow should point right");
-
-		await arrowBtn.click();
-
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "Layout should switch to ThreeColumnsMidExpanded");
-		assert.strictEqual(await arrowBtn.getAttribute("icon"), "slim-arrow-left", "Arrow should point left");
-
-		await arrowBtn.click();
-
-		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsStartHiddenMidExpanded", "Layout should switch to ThreeColumnsStartHiddenMidExpanded");
-		assert.strictEqual(await arrowBtn.getAttribute("icon"), "slim-arrow-right", "Arrow should point right");
-	});
-});
\ No newline at end of file