improve code

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

@@ -99,13 +99,14 @@ export const createStructureSetupObservers = (
       const has = hasClass(_viewport, classNameOverflowVisible);
       has && removeClass(_viewport, classNameOverflowVisible);
 
-      const scroll = scrollSize(_viewport);
+      const contentScroll = scrollSize(_content);
+      const viewportScroll = scrollSize(_viewport);
       const fractional = fractionalSize(_viewport);
 
       has && addClass(_viewport, classNameOverflowVisible);
       return {
-        w: scroll.w + fractional.w,
+        w: viewportScroll.w + contentScroll.w + fractional.w,
-        h: scroll.h + fractional.h,
+        h: viewportScroll.h + contentScroll.h + fractional.h,
       };
     }
   );

packages/overlayscrollbars/src/setups/structureSetup/updateSegments/trinsicUpdateSegment.ts

@@ -23,7 +23,6 @@ export const createTrinsicUpdate: CreateStructureUpdateSegment = (
     if (heightIntrinsicChanged) {
       style(_content, {
         height: _heightIntrinsic ? '' : '100%',
-        display: _heightIntrinsic ? '' : 'inline',
       });
     }
 

packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts

@@ -2,10 +2,10 @@ import './index.scss';
 import 'styles/overlayscrollbars.scss';
 import should from 'should';
 import { OverlayScrollbars } from 'overlayscrollbars';
-
 import { resize } from '@/testing-browser/Resize';
+import { timeout } from '@/testing-browser/timeout';
 import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult';
-import { addClass } from 'support';
+import { addClass, removeAttr, style } from 'support';
 
 OverlayScrollbars.env().setDefaultOptions({
   nativeScrollbarsOverlaid: { initialize: true },
@@ -48,11 +48,11 @@ OverlayScrollbars(
   }
 );
 OverlayScrollbars(
-  targetA!,
+  { target: targetA!, content: true },
   {},
   {
     initialized() {
-      addClass(targetA!.querySelector('.os-viewport'), 'flex');
+      addClass(targetA!.querySelector('.os-content'), 'flex');
       addClass(resizeBetweenA, 'resize resizeBetween');
       targetA!.append(resizeBetweenA);
     },
@@ -93,9 +93,66 @@ resize(resizeBetweenRoot!);
 resize(resizeBetweenA!);
 resize(resizeBetweenB!);
 
+const resizeBetween = async (betweenElm: HTMLElement) => {
+  const styleObj = {
+    width: parseInt(style(betweenElm, 'width'), 10) + 50,
+    height: parseInt(style(betweenElm, 'height'), 10) + 50,
+  };
+  const updateCountsBefore = [rootUpdateCount, aUpdateCount, bUpdateCount];
+  style(betweenElm, styleObj);
+
+  await timeout(250);
+  const updateCountsAfter = [rootUpdateCount, aUpdateCount, bUpdateCount];
+
+  should.equal(
+    JSON.stringify(updateCountsBefore),
+    JSON.stringify(updateCountsAfter),
+    `Resizing a between element shouldn't trigger any updates.`
+  );
+  removeAttr(betweenElm, 'style');
+};
+
+const resizeResize = async (resizeElm: HTMLElement) => {
+  const styleObj = {
+    width: parseInt(style(resizeElm, 'width'), 10) - 10,
+    height: parseInt(style(resizeElm, 'height'), 10) - 10,
+  };
+  const updateCountsBefore = [rootUpdateCount, aUpdateCount, bUpdateCount];
+  style(resizeElm, styleObj);
+
+  await timeout(250);
+  const updateCountsAfter = [rootUpdateCount, aUpdateCount, bUpdateCount];
+
+  should.equal(
+    JSON.stringify(updateCountsBefore),
+    JSON.stringify(updateCountsAfter),
+    `Non size changing mutations shouldn't trigger any updates.`
+  );
+  removeAttr(resizeElm, 'style');
+};
+
+const testBetweenElements = async () => {
+  await waitForOrFailTest(async () => {
+    await resizeBetween(resizeBetweenRoot);
+    await resizeBetween(resizeBetweenA);
+    await resizeBetween(resizeBetweenB);
+  });
+};
+
+const testResizeElements = async () => {
+  await waitForOrFailTest(async () => {
+    await resizeResize(resizeRoot!);
+    await resizeResize(resizeA!);
+    await resizeResize(resizeB!);
+  });
+};
+
 const start = async () => {
   setTestResult(null);
 
+  await testBetweenElements();
+  await testResizeElements();
+
   setTestResult(true);
 };
 

packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.test.ts

@@ -1,58 +1,12 @@
 // @ts-ignore
 import { playwrightRollup, expectSuccess } from '@/playwright/rollup';
-import { test, Page } from '@playwright/test';
+import { test } from '@playwright/test';
 
 playwrightRollup();
 
-test.describe('StructureSetup.update', () => {
+test.describe('StructureSetup.nesting', () => {
-  [false, true].forEach(async (nativeScrollbarStyling) => {
+  test('nesting updates', async ({ page }) => {
-    const withText = nativeScrollbarStyling ? 'with' : 'without';
+    await page.click('#start');
-    const nss = async (page: Page) => {
+    await expectSuccess(page);
-      if (!nativeScrollbarStyling) {
-        await page.click('#nss');
-        await page.waitForTimeout(500);
-      }
-    };
-
-    test.describe(`${withText} native scrollbar styling`, () => {
-      test.describe.configure({ mode: 'parallel' });
-
-      test('default', async ({ page }) => {
-        await nss(page);
-        await page.click('#start');
-        await expectSuccess(page);
-      });
-
-      test('without flexbox glue & css custom props', async ({ page }) => {
-        await nss(page);
-        await page.click('#fbg');
-        await page.waitForTimeout(500);
-        await page.click('#ccp');
-        await page.waitForTimeout(500);
-        await page.click('#start');
-        await expectSuccess(page);
-      });
-
-      test('with partially overlaid scrollbars', async ({ page, browserName }) => {
-        test.skip(
-          browserName === 'firefox' || browserName === 'webkit',
-          "firefox can't simulate partially overlaid scrollbars, boost speed by omitting webkit"
-        );
-
-        await nss(page);
-        await page.click('#po');
-        await page.waitForTimeout(500);
-        await page.click('#start');
-        await expectSuccess(page);
-      });
-
-      test('with fully overlaid scrollbars', async ({ page }) => {
-        await nss(page);
-        await page.click('#fo');
-        await page.waitForTimeout(500);
-        await page.click('#start');
-        await expectSuccess(page);
-      });
-    });
   });
 });

packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts

@@ -13,6 +13,8 @@ import {
   addClass,
   WH,
   removeAttr,
+  contents,
+  appendChildren,
 } from 'support';
 import { resize } from '@/testing-browser/Resize';
 import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult';
@@ -71,7 +73,7 @@ const msedge = window.navigator.userAgent.toLowerCase().indexOf('edge') > -1;
 
 msie11 && addClass(document.body, 'msie11');
 
-const useContentElement = false;
+const useContentElement = true;
 const fixedDigits = msie11 ? 1 : 3;
 const fixedDigitsOffset = 3;
 
@@ -88,13 +90,19 @@ const targetEnd: HTMLElement | null = document.querySelector('#target .end');
 const comparisonEnd: HTMLElement | null = document.querySelector('#comparison .end');
 const targetOptionsSlot: HTMLElement | null = document.querySelector('#options');
 const targetUpdatesSlot: HTMLElement | null = document.querySelector('#updates');
+const comparisonContentElm: HTMLElement = document.createElement('div');
 
 const envElms = document.querySelectorAll<HTMLElement>('.env');
 
 if (!useContentElement) {
   envElms.forEach((elm) => {
-    addClass(elm, 'intrinsic-hack');
+    addClass(elm, 'intrinsicHack');
   });
+} else {
+  const elms = contents(comparison);
+  addClass(comparisonContentElm, 'comparisonContent');
+  appendChildren(comparison, comparisonContentElm);
+  appendChildren(comparisonContentElm, elms);
 }
 
 let updateCount = 0;
@@ -724,8 +732,6 @@ const start = async () => {
 
   target?.removeAttribute('style');
 
-  const start = performance.now();
-  console.log(start);
   await overflowTest();
   await overflowTest({ overflow: { x: 'visible', y: 'visible' } });
   await overflowTest({ overflow: { x: 'visible-scroll', y: 'visible-hidden' } });
@@ -738,8 +744,7 @@ const start = async () => {
   await overflowTest({ overflow: { x: 'scroll', y: 'visible' } });
   await overflowTest({ overflow: { x: 'visible', y: 'hidden' } });
   await overflowTest({ overflow: { x: 'hidden', y: 'visible' } });
-  const end = performance.now();
+
-  console.log(start - end);
   setTestResult(true);
 };
 

packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.scss

@@ -276,7 +276,7 @@ body {
   }
 }
 
-.intrinsic-hack {
+.intrinsicHack {
   &.heightAuto,
   &.envHeightAuto {
     .percent {
@@ -285,6 +285,16 @@ body {
   }
 }
 
+.comparisonContent {
+  height: 100%;
+}
+
+.heightAuto {
+  .comparisonContent {
+    height: auto;
+  }
+}
+
 // disable native scrollbar styling detection
 .nss {
   .os-viewport-scrollbar-styled.os-environment {

playwright.config.base.js

@@ -2,7 +2,7 @@ const { devices } = require('@playwright/test');
 
 module.exports = {
   testMatch: /.*\/tests\/playwright\/.*\.test\.[jt]sx?/,
-  timeout: 8 * 60 * 1000,
+  timeout: 10 * 60 * 1000,
   actionTimeout: 300,
   navigationTimeout: 1000,
   retries: 0,