From fa6af35a90a28e8c02f637d3a8d6e6c251280dbb Mon Sep 17 00:00:00 2001 From: Rene Haas Date: Wed, 6 Jul 2022 15:17:00 +0200 Subject: [PATCH] improve code --- .../structureSetup.observers.ts | 7 +- .../updateSegments/trinsicUpdateSegment.ts | 1 - .../structureSetup/nesting/index.browser.ts | 65 +++++++++++++++++-- .../structureSetup/nesting/index.test.ts | 56 ++-------------- .../structureSetup/update/index.browser.ts | 17 +++-- .../setups/structureSetup/update/index.scss | 12 +++- playwright.config.base.js | 2 +- 7 files changed, 93 insertions(+), 67 deletions(-) diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts index 92c5ae2..6a1f6b8 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.observers.ts +++ b/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, - h: scroll.h + fractional.h, + w: viewportScroll.w + contentScroll.w + fractional.w, + h: viewportScroll.h + contentScroll.h + fractional.h, }; } ); diff --git a/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/trinsicUpdateSegment.ts b/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/trinsicUpdateSegment.ts index 3e844a2..dc91f84 100644 --- a/packages/overlayscrollbars/src/setups/structureSetup/updateSegments/trinsicUpdateSegment.ts +++ b/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', }); } diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts index b667d21..4cd2764 100644 --- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts +++ b/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); }; diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.test.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.test.ts index 5fa060b..2466b1f 100644 --- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.test.ts +++ b/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', () => { - [false, true].forEach(async (nativeScrollbarStyling) => { - const withText = nativeScrollbarStyling ? 'with' : 'without'; - const nss = async (page: 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); - }); - }); +test.describe('StructureSetup.nesting', () => { + test('nesting updates', async ({ page }) => { + await page.click('#start'); + await expectSuccess(page); }); }); diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts index d1d7f3b..5eac63b 100644 --- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.browser.ts +++ b/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('.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); }; diff --git a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.scss b/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.scss index 3828b7b..f58de27 100644 --- a/packages/overlayscrollbars/tests/playwright/setups/structureSetup/update/index.scss +++ b/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 { diff --git a/playwright.config.base.js b/playwright.config.base.js index 9b98437..548b6f4 100644 --- a/playwright.config.base.js +++ b/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,