diff --git a/packages/fiori/cypress/specs/FCL.cy.tsx b/packages/fiori/cypress/specs/FCL.cy.tsx
index 37cec805faf0..6c6765975537 100644
--- a/packages/fiori/cypress/specs/FCL.cy.tsx
+++ b/packages/fiori/cypress/specs/FCL.cy.tsx
@@ -1,21 +1,22 @@
 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";
+import Button from "@ui5/webcomponents/dist/Button.js";
 
 describe("Columns resize", () => {
 	beforeEach(() => {
 		cy.wrap({ setAnimationMode })
 			.invoke("setAnimationMode", AnimationMode.None);
+	});
 
+	it("separator drag'n'drop", () => {
 		cy.mount(
-			<FlexibleColumnLayout id="fcl" style={{ height: "300px" }} layout="TwoColumnsMidExpanded">
+			<FlexibleColumnLayout id="fcl" layout="TwoColumnsMidExpanded">
 				<div class="column" id="startColumn" slot="startColumn">some content</div>
 				<div class="column" id="midColumn" slot="midColumn">some content</div>
 			</FlexibleColumnLayout>
 		);
-	});
 
-	it("separator drag'n'drop", () => {
 		let oldWidthFirstCol: number;
 		let widthAfterMove: number;
 
@@ -71,6 +72,13 @@ describe("Columns resize", () => {
 	});
 
 	it("sets dedicated class to hidden columns", () => {
+		cy.mount(
+			<FlexibleColumnLayout id="fcl" layout="TwoColumnsMidExpanded">
+				<div class="column" id="startColumn" slot="startColumn">some content</div>
+				<div class="column" id="midColumn" slot="midColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+
 		cy.get("[ui5-flexible-column-layout]")
 			.shadow()
 			.find(".ui5-fcl-column--end")
@@ -79,38 +87,39 @@ describe("Columns resize", () => {
 			});
 	});
 
-	it.skip("keeps hidden class on columns after rerendering", () => {
-		// Get a reference to the FCL first
+	it("keeps hidden class on columns after rerendering", () => {
+		cy.mount(
+			<FlexibleColumnLayout layout="TwoColumnsStartExpanded">
+				<div class="column" slot="startColumn">some content</div>
+				<div class="column" slot="midColumn">some content</div>
+				<div class="column" slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+
 		cy.get("[ui5-flexible-column-layout]")
 			.as("fcl");
-		
-		// Verify initial state
+
 		cy.get("@fcl")
 			.shadow()
 			.find(".ui5-fcl-column--end")
 			.should("have.class", "ui5-fcl-column--hidden");
 
-		// Change animation mode to "full"
 		cy.wrap({ setAnimationMode })
 			.invoke("setAnimationMode", AnimationMode.Full);
 
-		// Verify the end column has the animation class after changing animation mode
 		cy.get("@fcl")
 			.shadow()
 			.find(".ui5-fcl-column--end")
 			.should("have.class", "ui5-fcl-column-animation");
 
-		// Verify the end column still has the hidden class after rerendering
 		cy.get("@fcl")
 			.shadow()
 			.find(".ui5-fcl-column--end")
 			.should("have.class", "ui5-fcl-column--hidden");
 
-		// Change height by 10px
 		cy.get("@fcl")
 			.invoke("css", "height", "310px");
 
-		// Verify the end column still has the hidden class after height change
 		cy.get("@fcl")
 			.shadow()
 			.find(".ui5-fcl-column--end")
@@ -144,10 +153,10 @@ 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">
+			<FlexibleColumnLayout id="fcl" layout="ThreeColumnsMidExpanded">
 				<div class="column" id="startColumn" slot="startColumn">some content</div>
 				<div class="column" id="midColumn" slot="midColumn">some content</div>
 				<div class="column" id="endColumn" slot="endColumn">some content</div>
@@ -168,3 +177,940 @@ describe("ACC", () => {
 			.should("have.attr", "aria-valuenow");
 	});
 });
+
+before(() => {
+	cy.wrap({ setAnimationMode })
+		.then(api => {
+			return api.setAnimationMode("none");
+		});
+});
+
+describe("FlexibleColumnLayout Behavior", () => {
+	it("tests Desktop size 1400px", () => {
+		cy.viewport(1400, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout 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]")
+			.as("fcl")
+			.then($fcl => {
+				$fcl.get(0).addEventListener("layout-change", cy.stub().as("layoutChangeStub"));
+			});
+
+		cy.get("@fcl")
+			.should("have.attr", "_visible-columns", "3");
+
+		cy.get("@layoutChangeStub")
+			.should("not.have.been.called");
+	});
+
+	it("tests Tablet Size 1000px", () => {
+		cy.mount(
+			<FlexibleColumnLayout 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]")
+			.as("fcl")
+			.then($fcl => {
+				$fcl.get(0).addEventListener("layout-change", cy.stub().as("layoutChangeStub"));
+			});
+
+		cy.viewport(1000, 1080);
+
+		cy.get("@fcl")
+			.should("have.attr", "_visible-columns", "2");
+
+		cy.get("@layoutChangeStub")
+			.should("have.been.calledOnce");
+	});
+
+	it("tests Phone size 500px", () => {
+		cy.mount(
+			<FlexibleColumnLayout 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]")
+			.as("fcl")
+			.then($fcl => {
+				$fcl.get(0).addEventListener("layout-change", cy.stub().as("layoutChangeStub"));
+			});
+
+		cy.viewport(500, 1080);
+
+		cy.get("@fcl")
+			.should("have.attr", "_visible-columns", "1");
+
+		cy.get("@layoutChangeStub")
+			.should("have.been.calledOnce");
+	});
+});
+
+describe("First column closing arrow behavior", () => {
+	it("should switch layout and update arrow icon on desktop", () => {
+		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>
+		);
+
+		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");
+	});
+});
+
+describe("Layout Change API", () => {
+	it("tests change layout with API", () => {
+		cy.mount(
+			<>
+				<Button data-testid="switchBtn">Set to ThreeColumnsMidExpanded</Button>
+				<FlexibleColumnLayout
+					layout="TwoColumnsStartExpanded"
+				>
+					<div slot="startColumn">Column 1 content</div>
+					<div slot="midColumn">Column 2 content</div>
+					<div slot="endColumn">Column 3 content</div>
+				</FlexibleColumnLayout>
+			</>
+		);
+
+		cy.get("[data-testid='switchBtn']")
+			.then($btn => {
+				$btn.get(0).addEventListener("click", () => {
+					const fcl = document.querySelector("[ui5-flexible-column-layout]") as any;
+					fcl.layout = "ThreeColumnsMidExpanded";
+				});
+			});
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.attr", "_visible-columns", "2")
+			.should("have.prop", "layout", "TwoColumnsStartExpanded");
+
+		cy.get("[data-testid='switchBtn']").click();
+
+		cy.get("[ui5-flexible-column-layout]")
+			.should("have.attr", "_visible-columns", "3")
+			.should("have.prop", "layout", "ThreeColumnsMidExpanded");
+	});
+
+	it("changes layout when dragging separator", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="TwoColumnsStartExpanded">
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+				<div slot="endColumn">End</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").then(($fcl) => {
+			const fcl = $fcl[0];
+			fcl.addEventListener("layout-change", cy.stub().as("layoutChanged"));
+		});
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "TwoColumnsStartExpanded");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
+			.realMouseDown()
+			.realMouseMove(-400, 0)
+			.realMouseUp();
+
+		cy.get("@layoutChanged").should("have.been.calledOnce");
+		cy.get("@fcl").should("have.prop", "layout", "TwoColumnsMidExpanded");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.realMouseDown()
+			.realMouseMove(400, 0)
+			.realMouseUp();
+
+		cy.get("@layoutChanged").should("have.been.calledTwice");
+		cy.get("@fcl").should("have.prop", "layout", "TwoColumnsStartExpanded");
+	});
+});
+
+describe("Column Expansion Tests", () => {
+	it("allows expand mid column from TwoColumnsStartExpanded to TwoColumnsMidExpanded", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="TwoColumnsStartExpanded"
+			>
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "TwoColumnsStartExpanded");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
+			.realMouseDown()
+			.realMouseMove(-400, 0)
+			.realMouseUp();
+
+		cy.get("@fcl").should("have.prop", "layout", "TwoColumnsMidExpanded");
+	});
+
+	it("allows hide end column from ThreeColumnsMidExpanded to ThreeColumnsMidExpandedEndHidden", () => {
+		cy.mount(
+			<FlexibleColumnLayout 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.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", () => {
+	it("allows expand start column from TwoColumnsMidExpanded to TwoColumnsStartExpanded", () => {
+		cy.mount(
+			<FlexibleColumnLayout layout="TwoColumnsMidExpanded">
+				<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.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.mount(
+			<FlexibleColumnLayout 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]")
+			.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.mount(
+			<FlexibleColumnLayout layout="ThreeColumnsStartExpandedEndHidden">
+				<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.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.mount(
+			<FlexibleColumnLayout 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]")
+			.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", () => {
+	it("allows expand end-column from ThreeColumnsMidExpandedEndHidden to ThreeColumnsMidExpanded", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="ThreeColumnsMidExpandedEndHidden"
+			>
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+				<div slot="endColumn">End</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.should("be.visible")
+			.realMouseDown()
+			.realMouseMove(-400, 0)
+			.realMouseUp();
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpanded");
+	});
+
+	it("allows expand end-column from ThreeColumnsMidExpanded to ThreeColumnsEndExpanded", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="ThreeColumnsMidExpanded">
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+				<div slot="endColumn">End</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.should("be.visible")
+			.realMouseDown()
+			.realMouseMove(-400, 0)
+			.realMouseUp();
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsEndExpanded");
+	});
+});
+
+describe("Layout change by dragging start-separator on tablet", () => {
+	it("allows expand mid column from TwoColumnsStartExpanded to TwoColumnsMidExpanded", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="TwoColumnsStartExpanded">
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "TwoColumnsStartExpanded");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
+			.realMouseDown()
+			.realMouseMove(-400, 0)
+			.realMouseUp();
+
+		cy.get("@fcl").should("have.prop", "layout", "TwoColumnsMidExpanded");
+	});
+
+	it("allows expand start column from TwoColumnsMidExpanded to TwoColumnsStartExpanded", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="TwoColumnsMidExpanded">
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "TwoColumnsMidExpanded");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
+			.realMouseDown()
+			.realMouseMove(400, 0)
+			.realMouseUp();
+
+		cy.get("@fcl").should("have.prop", "layout", "TwoColumnsStartExpanded");
+	});
+
+	it("allows hide end column from ThreeColumnsMidExpanded to ThreeColumnsMidExpandedEndHidden", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="ThreeColumnsMidExpanded">
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+				<div slot="endColumn">End</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
+			.realMouseDown()
+			.realMouseMove(300, 0)
+			.realMouseUp();
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+	});
+
+	it("allows expand start column from ThreeColumnsMidExpandedEndHidden to ThreeColumnsStartExpandedEndHidden", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="ThreeColumnsMidExpandedEndHidden">
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+				<div slot="endColumn">End</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
+			.realMouseDown()
+			.realMouseMove(400, 0)
+			.realMouseUp();
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsStartExpandedEndHidden");
+	});
+
+	it("allows expand mid column from ThreeColumnsStartExpandedEndHidden to ThreeColumnsMidExpandedEndHidden", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="ThreeColumnsStartExpandedEndHidden">
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+				<div slot="endColumn">End</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsStartExpandedEndHidden");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
+			.realMouseDown()
+			.realMouseMove(-400, 0)
+			.realMouseUp();
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+	});
+
+	it("preserves ThreeColumnsMidExpandedEndHidden on tiny start column drag", () => {
+		cy.viewport(1000, 1080);
+
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="ThreeColumnsMidExpandedEndHidden">
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+				<div slot="endColumn">End</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-start")
+			.should("be.visible")
+			.realMouseDown()
+			.realMouseMove(-100, 0)
+			.realMouseUp();
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+	});
+});
+
+describe("Layout change by dragging end-separator on tablet", () => {
+	beforeEach(() => {
+		cy.viewport(1000, 1080);
+	});
+
+	it("allows expand end-column from ThreeColumnsMidExpandedEndHidden to ThreeColumnsMidExpanded", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="ThreeColumnsMidExpandedEndHidden">
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+				<div slot="endColumn">End</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.should("be.visible")
+			.realMouseDown()
+			.realMouseMove(-400, 0)
+			.realMouseUp();
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpanded");
+	});
+
+	it("allows expand end-column from ThreeColumnsMidExpanded to ThreeColumnsEndExpanded", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="ThreeColumnsMidExpanded">
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+				<div slot="endColumn">End</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.should("be.visible")
+			.realMouseDown()
+			.realMouseMove(-300, 0)
+			.realMouseUp();
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsEndExpanded");
+	});
+});
+
+describe("Preserves column min-width", () => {
+	it("complies with min-width requirement on smallest desktop", () => {
+		const smallestDesktopWidth = 1024;
+		const smallestColumnWidth = 248;
+
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="ThreeColumnsMidExpanded"
+				style={{ height: "300px", width: `${smallestDesktopWidth}px` }}
+			>
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+				<div slot="endColumn">End</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("@fcl").should("have.prop", "offsetWidth", smallestDesktopWidth);
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-column--start")
+			.should("have.prop", "offsetWidth", smallestColumnWidth);
+	});
+
+	it("preserves min-width of begin column", () => {
+		const smallestColumnWidth = 248;
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="TwoColumnsMidExpanded">
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "TwoColumnsMidExpanded");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-column--start")
+			.invoke("width")
+			.then((initialStartWidth) => {
+				const differenceFromMin = initialStartWidth - smallestColumnWidth;
+				const testOffsetX = differenceFromMin + 10;
+
+				cy.get("@fcl")
+					.shadow()
+					.find(".ui5-fcl-separator-start")
+					.should("be.visible")
+					.realMouseDown()
+					.realMouseMove(-testOffsetX, 0)
+					.realMouseUp();
+
+				cy.get("@fcl").should("have.prop", "layout", "TwoColumnsMidExpanded");
+
+				cy.get("@fcl")
+					.shadow()
+					.find(".ui5-fcl-column--start")
+					.should("have.prop", "offsetWidth", smallestColumnWidth);
+			});
+	});
+
+	it("preserves min-width of mid column in 2-column layout", () => {
+		const smallestColumnWidth = 248;
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="TwoColumnsStartExpanded">
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "TwoColumnsStartExpanded");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-column--middle")
+			.invoke("width")
+			.then((initialMidWidth) => {
+				const differenceFromMin = initialMidWidth - smallestColumnWidth;
+				const testOffsetX = differenceFromMin + 10;
+
+				cy.get("@fcl")
+					.shadow()
+					.find(".ui5-fcl-separator-start")
+					.should("be.visible")
+					.realMouseDown()
+					.realMouseMove(testOffsetX, 0)
+					.realMouseUp();
+
+				cy.get("@fcl").should("have.prop", "layout", "TwoColumnsStartExpanded");
+
+				cy.get("@fcl")
+					.shadow()
+					.find(".ui5-fcl-column--middle")
+					.should("have.prop", "offsetWidth", smallestColumnWidth);
+			});
+	});
+
+	it("preserves min-width of mid column in 3-column layout", () => {
+		const smallestColumnWidth = 248;
+
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="ThreeColumnsMidExpanded">
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+				<div slot="endColumn">End</div>
+			</FlexibleColumnLayout>
+		);
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-column--middle")
+			.invoke("width")
+			.then((initialMidWidth) => {
+				const differenceFromMin = initialMidWidth - smallestColumnWidth;
+				const testOffsetX = differenceFromMin + 10;
+
+				cy.get("@fcl")
+					.shadow()
+					.find(".ui5-fcl-separator-end")
+					.should("be.visible")
+					.realMouseDown()
+					.realMouseMove(-testOffsetX, 0)
+					.realMouseUp();
+
+				cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsEndExpanded");
+
+				cy.get("@fcl")
+					.shadow()
+					.find(".ui5-fcl-column--middle")
+					.should("have.prop", "offsetWidth", smallestColumnWidth);
+			});
+	});
+
+	it("preserves min-width of end column", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="ThreeColumnsMidExpanded"
+			>
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+				<div slot="endColumn">End</div>
+			</FlexibleColumnLayout>
+		);
+
+		const smallestColumnWidth = 248;
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-column--end")
+			.invoke("width")
+			.then((endColumnWidth) => {
+				const testOffsetX = endColumnWidth - smallestColumnWidth + 10;
+
+				cy.get("@fcl")
+					.shadow()
+					.find(".ui5-fcl-separator-end")
+					.should("be.visible")
+					.realMouseDown()
+					.realMouseMove(testOffsetX, 0)
+					.realMouseUp();
+
+				cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+				cy.get("@fcl")
+					.shadow()
+					.find(".ui5-fcl-column--end")
+					.should("have.prop", "offsetWidth", smallestColumnWidth);
+			});
+	});
+
+	it("fully reveals the end-column on dragging the end-separator only few pixels", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="ThreeColumnsMidExpandedEndHidden"
+			>
+				<div slot="startColumn">Start</div>
+				<div slot="midColumn">Mid</div>
+				<div slot="endColumn">End</div>
+			</FlexibleColumnLayout>
+		);
+
+		const smallestColumnWidth = 248;
+
+		cy.get("[ui5-flexible-column-layout]").as("fcl");
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpandedEndHidden");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.should("be.visible")
+			.realMouseDown()
+			.realMouseMove(-100, 0)
+			.realMouseUp();
+
+		cy.get("@fcl").should("have.prop", "layout", "ThreeColumnsMidExpanded");
+
+		cy.get("@fcl")
+			.shadow()
+			.find(".ui5-fcl-column--end")
+			.should("have.prop", "offsetWidth", smallestColumnWidth);
+	});
+});
+
+describe("Accessibility with Animation Disabled", () => {
+	it("tests separator acc attrs", () => {
+		cy.mount(
+			<FlexibleColumnLayout
+				layout="ThreeColumnsMidExpandedEndHidden"
+				accessibilityAttributes={{
+					startSeparator: { role: "region", name: "Start Draggable Splitter" },
+					endSeparator: { role: "region", name: "End Draggable Splitter" }
+				}}
+			>
+				<div slot="startColumn">some content</div>
+				<div slot="midColumn">some content</div>
+				<div slot="endColumn">some content</div>
+			</FlexibleColumnLayout>
+		);
+
+		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.mount(
+			<FlexibleColumnLayout 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]")
+			.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
+				layout="ThreeColumnsMidExpanded"
+				accessibilityAttributes={{
+					startColumn: { role: "complementary", name: "Start column" },
+					startSeparator: { role: "region", name: "Start separator" },
+					midColumn: { role: "main", name: "Mid column" },
+					endSeparator: { role: "region", name: "End separator" },
+					endColumn: { role: "complementary", name: "End column" }
+				}}
+			>
+				<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("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", "region");
+
+		cy.get("[ui5-flexible-column-layout]")
+			.shadow()
+			.find(".ui5-fcl-separator-end")
+			.should("have.attr", "role", "region");
+	});
+
+	it("tests acc attrs", () => {
+		cy.mount(
+			<FlexibleColumnLayout 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");
+	});
+});
\ 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