From 6e0add89897891a3fa7533dc5696be4d506e8f6c Mon Sep 17 00:00:00 2001 From: Rene Date: Sun, 25 Apr 2021 14:59:27 +0200 Subject: [PATCH] add overflow tests to structurelifecycles test --- .../structureLifecycle/index.browser.ts | 349 ++++++++++++------ 1 file changed, 233 insertions(+), 116 deletions(-) diff --git a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts index f98128b..fe47ed7 100644 --- a/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts +++ b/packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts @@ -3,11 +3,10 @@ import './index.scss'; import should from 'should'; import { resize } from '@/testing-browser/Resize'; import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult'; -import { generateClassChangeSelectCallback, iterateSelect } from '@/testing-browser/Select'; +import { generateClassChangeSelectCallback, iterateSelect, selectOption } from '@/testing-browser/Select'; import { timeout } from '@/testing-browser/timeout'; import { OverlayScrollbars } from 'overlayscrollbars'; -import { createTrinsicObserver } from 'observers/trinsicObserver'; -import { from, getBoundingClientRect, style, parent, addClass } from 'support'; +import { clientSize, from, getBoundingClientRect, style, parent, addClass, WH, removeAttr } from 'support'; // @ts-ignore const msie11 = !!window.MSInputMethodContext && !!document.documentMode; @@ -27,22 +26,7 @@ const comparisonPercent: HTMLElement | null = document.querySelector('#compariso const targetEnd: HTMLElement | null = document.querySelector('#target .end'); const comparisonEnd: HTMLElement | null = document.querySelector('#comparison .end'); -const resizeElms = document.querySelectorAll('.resize'); -const percentElms = document.querySelectorAll('.percent'); -const endElms = document.querySelectorAll('.end'); const envElms = document.querySelectorAll('.env'); -const containerElms = document.querySelectorAll('.container'); - -resize(target!).addResizeListener((width, height) => style(comparison, { width, height })); -//resize(comparison!).addResizeListener((width, height) => style(target, { width, height })); -resize(targetResize!).addResizeListener((width, height) => style(comparisonResize, { width, height })); -//resize(comparisonRes!).addResizeListener((width, height) => style(targetRes, { width, height })); - -target!.querySelector('.os-viewport')?.addEventListener('scroll', (e) => { - const viewport: HTMLElement | null = e.currentTarget as HTMLElement; - comparison!.scrollLeft = viewport.scrollLeft; - comparison!.scrollTop = viewport.scrollTop; -}); if (!useContentElement) { envElms.forEach((elm) => { @@ -52,6 +36,17 @@ if (!useContentElement) { const osInstance = (window.os = OverlayScrollbars({ target: target!, content: useContentElement })); +target!.querySelector('.os-viewport')?.addEventListener('scroll', (e) => { + const viewport: HTMLElement | null = e.currentTarget as HTMLElement; + comparison!.scrollLeft = viewport.scrollLeft; + comparison!.scrollTop = viewport.scrollTop; +}); + +resize(target!).addResizeListener((width, height) => style(comparison, { width, height })); +//resize(comparison!).addResizeListener((width, height) => style(target, { width, height })); +resize(targetResize!).addResizeListener((width, height) => style(comparisonResize, { width, height })); +//resize(comparisonRes!).addResizeListener((width, height) => style(targetRes, { width, height })); + const selectCallbackEnv = generateClassChangeSelectCallback(from(envElms)); const envWidthSelect = document.querySelector('#envWidth'); const envHeightSelect = document.querySelector('#envHeight'); @@ -89,105 +84,102 @@ selectCallbackEnv(containerBoxSizingSelect); selectCallbackEnv(containerDirectionSelect); selectCallbackEnv(containerMinMaxSelect); -// 1. no overflow -// 2. 1px overflow (width) -// 3. 1px overflow (height) -// 4. lerge overflow (width & height) +const checkMetrics = async () => { + const comparisonEnvBCR = getBoundingClientRect(parent(comparison!) as HTMLElement); + const comparisonBCR = getBoundingClientRect(comparison!); + const comparisonPercentBCR = getBoundingClientRect(comparisonPercent!); + const comparisonEndBCR = getBoundingClientRect(comparisonEnd!); + const comparisonMetrics = { + offset: { + left: (comparisonBCR.left - comparisonEnvBCR.left).toFixed(Math.min(fixedDigitsOffset, fixedDigits)), + top: (comparisonBCR.top - comparisonEnvBCR.top).toFixed(Math.min(fixedDigitsOffset, fixedDigits)), + }, + size: { + width: comparisonBCR.width.toFixed(fixedDigits), + height: comparisonBCR.height.toFixed(fixedDigits), + }, + scroll: { + width: comparison!.scrollWidth - comparison!.clientWidth, + height: comparison!.scrollHeight - comparison!.clientHeight, + }, + percentElm: { + width: comparisonPercentBCR.width.toFixed(fixedDigits), + height: comparisonPercentBCR.height.toFixed(fixedDigits), + }, + endElm: { + width: comparisonEndBCR.width.toFixed(fixedDigits), + height: comparisonEndBCR.height.toFixed(fixedDigits), + }, + }; -// tests for restricted measuring without content elm + await waitForOrFailTest(async () => { + const targetEnvBCR = getBoundingClientRect(parent(target!) as HTMLElement); + const targetBCR = getBoundingClientRect(target!); + const targetPercentBCR = getBoundingClientRect(targetPercent!); + const targetEndBCR = getBoundingClientRect(targetEnd!); + const targetViewport = target!.querySelector('.os-viewport'); + + const targetMetrics = { + offset: { + left: (targetBCR.left - targetEnvBCR.left).toFixed(Math.min(fixedDigitsOffset, fixedDigits)), + top: (targetBCR.top - targetEnvBCR.top).toFixed(Math.min(fixedDigitsOffset, fixedDigits)), + }, + size: { + width: targetBCR.width.toFixed(fixedDigits), + height: targetBCR.height.toFixed(fixedDigits), + }, + scroll: { + width: targetViewport!.scrollWidth - targetViewport!.clientWidth, + height: targetViewport!.scrollHeight - targetViewport!.clientHeight, + }, + percentElm: { + width: targetPercentBCR.width.toFixed(fixedDigits), + height: targetPercentBCR.height.toFixed(fixedDigits), + }, + endElm: { + width: targetEndBCR.width.toFixed(fixedDigits), + height: targetEndBCR.height.toFixed(fixedDigits), + }, + }; + + //console.log('t', targetMetrics); + //console.log('c', comparisonMatrics); + + should.equal(targetMetrics.offset.left, comparisonMetrics.offset.left, 'Offset left equality.'); + should.equal(targetMetrics.offset.top, comparisonMetrics.offset.top, 'Offset top equality.'); + + should.equal(targetMetrics.size.width, comparisonMetrics.size.width, 'Size width equality.'); + should.equal(targetMetrics.size.height, comparisonMetrics.size.height, 'Size height equality.'); + + should.equal(targetMetrics.scroll.width, comparisonMetrics.scroll.width, 'Scroll width equality.'); + should.equal(targetMetrics.scroll.height, comparisonMetrics.scroll.height, 'Scroll height equality.'); + + if (targetMetrics.scroll.width > 0) { + should.equal(style(targetViewport!, 'overflowX'), 'scroll', 'Overflow-X should result in scroll.'); + } else { + should.notEqual(style(targetViewport!, 'overflowX'), 'scroll', 'No Overflow-X shouldnt result in scroll.'); + } + + if (targetMetrics.scroll.height > 0) { + should.equal(style(targetViewport!, 'overflowY'), 'scroll', 'Overflow-Y should result in scroll.'); + } else { + should.notEqual(style(targetViewport!, 'overflowY'), 'scroll', 'No Overflow-Y shouldnt result in scroll.'); + } + + should.equal(targetMetrics.percentElm.width, comparisonMetrics.percentElm.width, 'Percent Elements width equality.'); + should.equal(targetMetrics.percentElm.height, comparisonMetrics.percentElm.height, 'Percent Elements height equality.'); + + should.equal(targetMetrics.endElm.width, comparisonMetrics.endElm.width, 'End Elements width equality.'); + should.equal(targetMetrics.endElm.height, comparisonMetrics.endElm.height, 'End Elements height equality.'); + + await timeout(1); + }); +}; const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any) => { await iterateSelect(select, { async check() { - const comparisonEnvBCR = getBoundingClientRect(parent(comparison!) as HTMLElement); - const comparisonBCR = getBoundingClientRect(comparison!); - const comparisonPercentBCR = getBoundingClientRect(comparisonPercent!); - const comparisonEndBCR = getBoundingClientRect(comparisonEnd!); - const comparisonMatrics = { - offset: { - left: (comparisonBCR.left - comparisonEnvBCR.left).toFixed(Math.min(fixedDigitsOffset, fixedDigits)), - top: (comparisonBCR.top - comparisonEnvBCR.top).toFixed(Math.min(fixedDigitsOffset, fixedDigits)), - }, - size: { - width: comparisonBCR.width.toFixed(fixedDigits), - height: comparisonBCR.height.toFixed(fixedDigits), - }, - scroll: { - width: comparison!.scrollWidth - comparison!.clientWidth, - height: comparison!.scrollHeight - comparison!.clientHeight, - }, - percentElm: { - width: comparisonPercentBCR.width.toFixed(fixedDigits), - height: comparisonPercentBCR.height.toFixed(fixedDigits), - }, - endElm: { - width: comparisonEndBCR.width.toFixed(fixedDigits), - height: comparisonEndBCR.height.toFixed(fixedDigits), - }, - }; - - await waitForOrFailTest(async () => { - const targetEnvBCR = getBoundingClientRect(parent(target!) as HTMLElement); - const targetBCR = getBoundingClientRect(target!); - const targetPercentBCR = getBoundingClientRect(targetPercent!); - const targetEndBCR = getBoundingClientRect(targetEnd!); - const targetViewport = target!.querySelector('.os-viewport'); - - const targetMetrics = { - offset: { - left: (targetBCR.left - targetEnvBCR.left).toFixed(Math.min(fixedDigitsOffset, fixedDigits)), - top: (targetBCR.top - targetEnvBCR.top).toFixed(Math.min(fixedDigitsOffset, fixedDigits)), - }, - size: { - width: targetBCR.width.toFixed(fixedDigits), - height: targetBCR.height.toFixed(fixedDigits), - }, - scroll: { - width: targetViewport!.scrollWidth - targetViewport!.clientWidth, - height: targetViewport!.scrollHeight - targetViewport!.clientHeight, - }, - percentElm: { - width: targetPercentBCR.width.toFixed(fixedDigits), - height: targetPercentBCR.height.toFixed(fixedDigits), - }, - endElm: { - width: targetEndBCR.width.toFixed(fixedDigits), - height: targetEndBCR.height.toFixed(fixedDigits), - }, - }; - - //console.log('t', targetMetrics); - //console.log('c', comparisonMatrics); - - should.equal(targetMetrics.offset.left, comparisonMatrics.offset.left, 'Offset left equality.'); - should.equal(targetMetrics.offset.top, comparisonMatrics.offset.top, 'Offset top equality.'); - - should.equal(targetMetrics.size.width, comparisonMatrics.size.width, 'Size width equality.'); - should.equal(targetMetrics.size.height, comparisonMatrics.size.height, 'Size height equality.'); - - should.equal(targetMetrics.scroll.width, comparisonMatrics.scroll.width, 'Scroll width equality.'); - should.equal(targetMetrics.scroll.height, comparisonMatrics.scroll.height, 'Scroll height equality.'); - - if (targetMetrics.scroll.width > 0) { - should.equal(style(targetViewport!, 'overflowX'), 'scroll', 'Overflow-X should result in scroll.'); - } else { - should.notEqual(style(targetViewport!, 'overflowX'), 'scroll', 'No Overflow-X shouldnt result in scroll.'); - } - - if (targetMetrics.scroll.height > 0) { - should.equal(style(targetViewport!, 'overflowY'), 'scroll', 'Overflow-Y should result in scroll.'); - } else { - should.notEqual(style(targetViewport!, 'overflowY'), 'scroll', 'No Overflow-Y shouldnt result in scroll.'); - } - - should.equal(targetMetrics.percentElm.width, comparisonMatrics.percentElm.width, 'Percent Elements width equality.'); - should.equal(targetMetrics.percentElm.height, comparisonMatrics.percentElm.height, 'Percent Elements height equality.'); - - should.equal(targetMetrics.endElm.width, comparisonMatrics.endElm.width, 'End Elements width equality.'); - should.equal(targetMetrics.endElm.height, comparisonMatrics.endElm.height, 'End Elements height equality.'); - - await timeout(1); - }); + await checkMetrics(); }, afterEach, }); @@ -227,10 +219,7 @@ const iterateMinMax = async (afterEach?: () => any) => { await iterate(containerMinMaxSelect, afterEach); }; -const start = async () => { - setTestResult(null); - - target?.removeAttribute('style'); +const containerTest = async () => { await iterateMinMax(async () => { await iterateBoxSizing(async () => { await iterateHeight(async () => { @@ -250,6 +239,134 @@ const start = async () => { }); }); }); +}; +const overflowTest = async () => { + const contentBox = (elm: HTMLElement | null): WH => { + if (elm) { + const computedStyle = window.getComputedStyle(elm); + const size = clientSize(elm); + return { + w: size.w - (parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight)), + h: size.h - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom)), + }; + } + + return { w: 0, h: 0 }; + }; + const setNoOverflow = async () => { + const styleObj = { width: 0, height: 0 }; + style(targetResize, styleObj); + style(comparisonResize, styleObj); + + await checkMetrics(); + }; + const setSmallestOverflow = async (width?: boolean, height?: boolean) => { + const { maxWidth, maxHeight } = style(comparison, ['maxWidth', 'maxHeight']); + + if (maxWidth !== 'none' && maxHeight !== 'none') { + const { paddingRight, paddingBottom } = style(comparison, ['paddingRight', 'paddingBottom']); + const comparisonContentBox = contentBox(comparison); + const widthOverflow = width ? 1 : 0; + const heightOverflow = height ? 1 : 0; + const styleObj = { width: comparisonContentBox.w + widthOverflow, height: comparisonContentBox.h + heightOverflow }; + + style(comparisonResize, styleObj); + + const overflowAmount = { + width: comparison!.scrollWidth - comparison!.clientWidth, + height: comparison!.scrollHeight - comparison!.clientHeight, + }; + + if (width && overflowAmount.width <= 0) { + styleObj.width += parseFloat(paddingRight); + } + if (height && overflowAmount.height <= 0) { + styleObj.height += parseFloat(paddingBottom); + } + + style(comparisonResize, styleObj); + + if (width) { + while (comparison!.scrollWidth - comparison!.clientWidth <= 0) { + styleObj.width += 1; + style(comparisonResize, styleObj); + } + } + + if (height) { + while (comparison!.scrollHeight - comparison!.clientHeight <= 0) { + styleObj.height += 1; + style(comparisonResize, styleObj); + } + } + + const overflowAmountCheck = { + width: comparison!.scrollWidth - comparison!.clientWidth, + height: comparison!.scrollHeight - comparison!.clientHeight, + }; + + should.equal(overflowAmountCheck.width, width ? 1 : 0, 'Correct smallest possible overflow width.'); + should.equal(overflowAmountCheck.height, height ? 1 : 0, 'Correct smallest possible overflow height.'); + + style(targetResize, styleObj); + + await checkMetrics(); + } + }; + const setLargeOverflow = async (width?: boolean, height?: boolean) => { + const comparisonContentBox = contentBox(comparison); + const widthOverflow = width ? 1000 : 0; + const heightOverflow = height ? 1000 : 0; + const styleObj = { width: comparisonContentBox.w + widthOverflow, height: comparisonContentBox.h + heightOverflow }; + style(targetResize, styleObj); + style(comparisonResize, styleObj); + + await checkMetrics(); + }; + + style(targetResize, { boxSizing: 'border-box' }); + style(comparisonResize, { boxSizing: 'border-box' }); + style(targetPercent, { display: 'none' }); + style(comparisonPercent, { display: 'none' }); + style(targetEnd, { display: 'none' }); + style(comparisonEnd, { display: 'none' }); + + await iterateMinMax(async () => { + await iterateBoxSizing(async () => { + await iterateHeight(async () => { + await iterateWidth(async () => { + await iterateBorder(async () => { + await iteratePadding(async () => { + await setNoOverflow(); + await setSmallestOverflow(true, false); + await setSmallestOverflow(false, true); + await setSmallestOverflow(true, true); + + await setNoOverflow(); + await setLargeOverflow(true, false); + await setLargeOverflow(false, true); + await setLargeOverflow(true, true); + }); + }); + }); + }); + }); + }); + + removeAttr(targetResize, 'style'); + removeAttr(comparisonResize, 'style'); + removeAttr(targetPercent, 'style'); + removeAttr(comparisonPercent, 'style'); + removeAttr(targetEnd, 'style'); + removeAttr(comparisonEnd, 'style'); +}; + +const start = async () => { + setTestResult(null); + + target?.removeAttribute('style'); + //await containerTest(); + await overflowTest(); setTestResult(true); };