fix: use position: absolute for the split-layout handle (#10219)

Author: web-padawan

packages/split-layout/src/styles/vaadin-split-layout-base-styles.js

@@ -68,7 +68,7 @@ export const splitLayoutStyles = css`
     width: var(--_handle-size);
     height: var(--_handle-target-size);
     max-height: 50%;
-    position: relative;
+    position: absolute;
   }
 
   :host([orientation='vertical']) [part='handle'] {

packages/split-layout/test/visual/base/screenshots/split-layout/baseline/nested.png

@@ -6,23 +6,19 @@ import '../../../src/vaadin-split-layout.js';
 describe('split-layout', () => {
   let element;
 
-  beforeEach(() => {
-    element = fixtureSync(`
-      <vaadin-split-layout style="width: 200px; height: 100px">
-        <div></div>
-        <div></div>
-      </vaadin-split-layout>
-    `);
-  });
-
   afterEach(async () => {
     await resetMouse();
   });
 
   ['horizontal', 'vertical'].forEach((orientation) => {
     describe(orientation, () => {
       beforeEach(() => {
-        element.orientation = orientation;
+        element = fixtureSync(`
+          <vaadin-split-layout orientation="${orientation}" style="width: 200px; height: 100px">
+            <div></div>
+            <div></div>
+          </vaadin-split-layout>
+        `);
       });
 
       it(orientation, async () => {
@@ -41,4 +37,24 @@ describe('split-layout', () => {
       });
     });
   });
+
+  describe('nested', () => {
+    beforeEach(() => {
+      element = fixtureSync(`
+        <vaadin-split-layout orientation="vertical" style="height: 500px">
+          <vaadin-split-layout slot="primary" orientation="horizontal">
+            <span slot="primary">Foo</span>
+            <span slot="secondary">Bar</span>
+          </vaadin-split-layout>>
+          <div slot="secondary">
+            Baz
+          </div>
+        </vaadin-split-layout>
+      `);
+    });
+
+    it('horizontal', async () => {
+      await visualDiff(element, 'nested');
+    });
+  });
 });

packages/split-layout/test/visual/base/split-layout.test.js

@@ -7,21 +7,43 @@ import '../../../vaadin-split-layout.js';
 describe('split-layout', () => {
   let element;
 
-  beforeEach(() => {
-    element = fixtureSync(`
-      <vaadin-split-layout style="width: 200px; height: 100px">
-        <div></div>
-        <div></div>
-      </vaadin-split-layout>
-    `);
-  });
+  describe('basic', () => {
+    beforeEach(() => {
+      element = fixtureSync(`
+        <vaadin-split-layout style="width: 200px; height: 100px">
+          <div></div>
+          <div></div>
+        </vaadin-split-layout>
+      `);
+    });
+
+    it('horizontal', async () => {
+      await visualDiff(element, 'horizontal');
+    });
 
-  it('horizontal', async () => {
-    await visualDiff(element, 'horizontal');
+    it('vertical', async () => {
+      element.orientation = 'vertical';
+      await visualDiff(element, 'vertical');
+    });
   });
 
-  it('vertical', async () => {
-    element.orientation = 'vertical';
-    await visualDiff(element, 'vertical');
+  describe('nested', () => {
+    beforeEach(() => {
+      element = fixtureSync(`
+        <vaadin-split-layout orientation="vertical" style="height: 500px">
+          <vaadin-split-layout slot="primary" orientation="horizontal">
+            <span slot="primary">Foo</span>
+            <span slot="secondary">Bar</span>
+          </vaadin-split-layout>>
+          <div slot="secondary">
+            Baz
+          </div>
+        </vaadin-split-layout>
+      `);
+    });
+
+    it('horizontal', async () => {
+      await visualDiff(element, 'nested');
+    });
   });
 });