add tests fir initial scroll position after init

local/playwright-tooling/index.d.ts

@@ -1,4 +1,8 @@
 declare module '@~local/playwright-tooling' {
-  export function playwrightRollup(useEsbuild?: boolean): void;
+  export interface PlaywrightRollupOptions {
+    useEsbuild?: boolean;
+    adaptUrl?: (originalUrl: string) => string;
+  }
+  export function playwrightRollup(options?: PlaywrightRollupOptions): void;
   export function expectSuccess(page: any): Promise<void>;
 }

local/playwright-tooling/src/playwrightRollup.js

@@ -44,7 +44,7 @@ const createRollupBundle = async (testDir, useEsbuild, dev) => {
 
   const { address, port } = getServer().address();
   return {
-    url: `${address}:${port}`,
+    url: `http://${address}:${port}`,
     output: outputPath,
     close: () => {
       getServer().close();
@@ -53,7 +53,8 @@ const createRollupBundle = async (testDir, useEsbuild, dev) => {
   };
 };
 
-module.exports = (useEsbuild = true) => {
+module.exports = (options) => {
+  const { useEsbuild = true, adaptUrl = (originalUrl) => originalUrl } = options || {};
   let url;
   let close;
 
@@ -70,8 +71,8 @@ module.exports = (useEsbuild = true) => {
   });
 
   test.beforeEach(async ({ page }) => {
-    await page.goto(url, { waitUntil: 'domcontentloaded' });
-    await page.waitForTimeout(500);
+    await page.goto(adaptUrl(url), { waitUntil: 'domcontentloaded' });
+    await page.waitForTimeout(100);
   });
 
   test.afterEach(async ({ page, browserName }, { file, config, timeout }) => {

packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts

@@ -23,6 +23,9 @@ import {
   stopAndPrevent,
   getOffsetSize,
   getScrollSize,
+  getStyles,
+  strOverflowX,
+  strOverflowY,
 } from '~/support';
 import {
   dataAttributeHost,
@@ -44,6 +47,7 @@ import type {
   InitializationTargetElement,
   InitializationTargetObject,
 } from '~/initialization';
+import { overflowIsVisible } from './structureSetup.utils';
 
 export type StructureSetupElements = [
   elements: StructureSetupElementsObj,
@@ -111,8 +115,13 @@ export const createStructureSetupElements = (
   const elementHasOverflow = (elm: HTMLElement) => {
     const offsetSize = getOffsetSize(elm);
     const scrollSize = getScrollSize(elm);
+    const overflowX = getStyles(elm, strOverflowX);
+    const overflowY = getStyles(elm, strOverflowY);
 
-    return scrollSize.w - offsetSize.w > 0 || scrollSize.h - offsetSize.h > 0;
+    return (
+      (scrollSize.w - offsetSize.w > 0 && !overflowIsVisible(overflowX)) ||
+      (scrollSize.h - offsetSize.h > 0 && !overflowIsVisible(overflowY))
+    );
   };
   const possibleViewportElement = generateViewportElement(viewportInitialization);
   const viewportIsTarget = possibleViewportElement === targetElement;

packages/overlayscrollbars/test/playwright/setups/structureSetup/focus/index.test.ts

@@ -3,7 +3,7 @@ import { test } from '@playwright/test';
 
 playwrightRollup();
 
-test.describe('StructureSetup.body', () => {
+test.describe('StructureSetup.focus', () => {
   test.describe('with native scrollbar styling', () => {
     test('default', async ({ page }) => {
       await expectSuccess(page);

packages/overlayscrollbars/test/playwright/setups/structureSetup/initScroll/handleEnvironment.ts

@@ -0,0 +1,25 @@
+import { addClass } from '~/support';
+
+{
+  const { body } = document;
+  const url = new URL(window.location.toString());
+  const params = url.searchParams;
+
+  /**
+   * vpt: viewport is target
+   * vps: viewport is element with valid scroll
+   * vp: viewport is element without valid scroll
+   */
+  ['vpt', 'vps', 'vp'].forEach((param) => {
+    const paramValue = Boolean(params.get(param));
+
+    if (paramValue) {
+      addClass(body, param);
+    } else {
+      document.getElementById(param)?.addEventListener('click', () => {
+        params.set(param, 'true');
+        window.location.assign(url.toString());
+      });
+    }
+  });
+}

packages/overlayscrollbars/test/playwright/setups/structureSetup/initScroll/index.browser.ts

@@ -0,0 +1,65 @@
+import '~/index.scss';
+import './index.scss';
+import './handleEnvironment';
+import { OverlayScrollbars } from '~/overlayscrollbars';
+import { setTestResult, timeout } from '@~local/browser-testing';
+import should from 'should';
+import { hasClass } from '~/support';
+
+const targetElm: HTMLDivElement | null = document.querySelector('#target');
+const viewportElm: HTMLDivElement | null = document.querySelector('#viewport');
+const startBtn: HTMLButtonElement | null = document.querySelector('#start');
+
+startBtn?.addEventListener('click', async () => {
+  setTestResult(null);
+
+  try {
+    await timeout(1000);
+
+    const viewportIsTarget = hasClass(document.body, 'vpt');
+    const scrollableViewort = hasClass(document.body, 'vps');
+    const notScrollableViewport = hasClass(document.body, 'vp');
+    const originaScrollElement = scrollableViewort ? viewportElm : targetElm;
+
+    const originalScrollLeft = originaScrollElement!.scrollLeft;
+    const originalScrollTop = originaScrollElement!.scrollTop;
+
+    should.ok(originalScrollLeft > 0, 'Original ScrollLeft is expected to be > 0.');
+    should.ok(originalScrollTop > 0, 'Original ScrollTop is expected to be > 0.');
+
+    const osInstance = OverlayScrollbars(
+      {
+        target: targetElm!,
+        elements: {
+          viewport: viewportIsTarget
+            ? targetElm!
+            : (scrollableViewort || notScrollableViewport) && viewportElm,
+        },
+      },
+      {}
+    );
+
+    const { scrollOffsetElement } = osInstance.elements();
+    const initScrollLeft = scrollOffsetElement.scrollLeft;
+    const initScrollTop = scrollOffsetElement.scrollTop;
+
+    should.ok(initScrollLeft > 0, 'Init ScrollLeft is expected to be > 0.');
+    should.ok(initScrollTop > 0, 'Init ScrollTop is expected to be > 0.');
+
+    const { scrollbarsSize } = OverlayScrollbars.env();
+
+    should.ok(
+      Math.abs(originalScrollLeft - initScrollLeft - scrollbarsSize.x) <= 1,
+      'Original and Init ScrollLeft should be about the same.'
+    );
+    should.ok(
+      Math.abs(originalScrollTop - initScrollTop - scrollbarsSize.y) <= 1,
+      'Original and Init ScrollTop should be about the same.'
+    );
+
+    setTestResult(true);
+  } catch (exception) {
+    setTestResult(false);
+    throw exception;
+  }
+});

packages/overlayscrollbars/test/playwright/setups/structureSetup/initScroll/index.html

@@ -0,0 +1,18 @@
+<div id="controls">
+  <button id="vpt">Viewport is target</button>
+  <button id="vps">Viewport is scrollable</button>
+  <button id="vp">Viewport is not scrollbar</button>
+  <br />
+  <button id="start">start</button>
+</div>
+<div id="stage">
+  <div>
+    <div id="target">
+      <div id="viewport">
+        <div id="element">
+          <p id="hi">hi</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

packages/overlayscrollbars/test/playwright/setups/structureSetup/initScroll/index.scss

@@ -0,0 +1,41 @@
+body {
+  display: flex;
+  flex-direction: column;
+}
+#controls {
+  flex: none;
+}
+#stage {
+  flex: auto;
+  position: relative;
+
+  & > div {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: lightgoldenrodyellow;
+  }
+}
+
+#target,
+body.vps #viewport {
+  overflow: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+#element {
+  margin-top: 200vh;
+  margin-left: 200vw;
+}
+
+#hi {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+}

packages/overlayscrollbars/test/playwright/setups/structureSetup/initScroll/index.test.ts

@@ -0,0 +1,31 @@
+import { playwrightRollup, expectSuccess } from '@~local/playwright-tooling';
+import { test } from '@playwright/test';
+
+playwrightRollup({
+  adaptUrl: (originalUrl) => {
+    const url = new URL(originalUrl);
+    url.hash = '#hi';
+    return url.href;
+  },
+});
+
+test.describe('StructureSetup.initScroll', () => {
+  test('default', async ({ page }) => {
+    await expectSuccess(page);
+  });
+
+  test('viewport with scrollable overflow', async ({ page }) => {
+    await page.click('#vps');
+    await expectSuccess(page);
+  });
+
+  test('viewport without scrollable overflow', async ({ page }) => {
+    await page.click('#vp');
+    await expectSuccess(page);
+  });
+
+  test('viewport is target', async ({ page }) => {
+    await page.click('#vpt');
+    await expectSuccess(page);
+  });
+});