improve sizeobserver, overflowlifecycle and strcturelifecycles tests

packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts

@@ -1,18 +1,31 @@
 import 'styles/overlayscrollbars.scss';
 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 { timeout } from '@/testing-browser/timeout';
 import { OverlayScrollbars } from 'overlayscrollbars';
-import { from, style } from 'support';
+import { createTrinsicObserver } from 'observers/trinsicObserver';
+import { from, getBoundingClientRect, style, parent, addClass } from 'support';
 
-const targetElm = document.querySelector('#target') as HTMLElement;
-const osInstance = (window.os = OverlayScrollbars({ target: targetElm, content: true }));
+// @ts-ignore
+const msie11 = !!window.MSInputMethodContext && !!document.documentMode;
+const firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 
+const useContentElement = false;
+const fixedDigits = msie11 ? 1 : 10;
+const fixedDigitsOffset = firefox ? 3 : fixedDigits; // ff does roundign errors here only
+
+const startBtn: HTMLButtonElement | null = document.querySelector('#start');
 const target: HTMLElement | null = document.querySelector('#target');
 const comparison: HTMLElement | null = document.querySelector('#comparison');
-const targetRes: HTMLElement | null = document.querySelector('#target .resize');
-const comparisonRes: HTMLElement | null = document.querySelector('#comparison .resize');
+const targetResize: HTMLElement | null = document.querySelector('#target .resize');
+const comparisonResize: HTMLElement | null = document.querySelector('#comparison .resize');
+const targetPercent: HTMLElement | null = document.querySelector('#target .percent');
+const comparisonPercent: HTMLElement | null = document.querySelector('#comparison .percent');
+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');
@@ -22,7 +35,7 @@ const containerElms = document.querySelectorAll<HTMLElement>('.container');
 
 resize(target!).addResizeListener((width, height) => style(comparison, { width, height }));
 //resize(comparison!).addResizeListener((width, height) => style(target, { width, height }));
-resize(targetRes!).addResizeListener((width, height) => style(comparisonRes, { 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) => {
@@ -31,6 +44,14 @@ target!.querySelector('.os-viewport')?.addEventListener('scroll', (e) => {
   comparison!.scrollTop = viewport.scrollTop;
 });
 
+if (!useContentElement) {
+  envElms.forEach((elm) => {
+    addClass(elm, 'intrinsic-hack');
+  });
+}
+
+const osInstance = (window.os = OverlayScrollbars({ target: target!, content: useContentElement }));
+
 const selectCallbackEnv = generateClassChangeSelectCallback(from(envElms));
 const envWidthSelect = document.querySelector<HTMLSelectElement>('#envWidth');
 const envHeightSelect = document.querySelector<HTMLSelectElement>('#envHeight');
@@ -67,3 +88,170 @@ selectCallbackEnv(containerMarginSelect);
 selectCallbackEnv(containerBoxSizingSelect);
 selectCallbackEnv(containerDirectionSelect);
 selectCallbackEnv(containerMinMaxSelect);
+
+// 1. no overflow
+// 2. 1px overflow (width)
+// 3. 1px overflow (height)
+// 4. lerge overflow (width & height)
+
+// tests for restricted measuring without content elm
+
+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<HTMLElement>('.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);
+      });
+    },
+    afterEach,
+  });
+};
+
+const iterateEnvWidth = async (afterEach?: () => any) => {
+  await iterate(envWidthSelect, afterEach);
+};
+const iterateEnvHeight = async (afterEach?: () => any) => {
+  await iterate(envHeightSelect, afterEach);
+};
+const iterateHeight = async (afterEach?: () => any) => {
+  await iterate(containerHeightSelect, afterEach);
+};
+const iterateWidth = async (afterEach?: () => any) => {
+  await iterate(containerWidthSelect, afterEach);
+};
+const iterateFloat = async (afterEach?: () => any) => {
+  await iterate(containerFloatSelect, afterEach);
+};
+const iteratePadding = async (afterEach?: () => any) => {
+  await iterate(containerPaddingSelect, afterEach);
+};
+const iterateBorder = async (afterEach?: () => any) => {
+  await iterate(containerBorderSelect, afterEach);
+};
+const iterateMargin = async (afterEach?: () => any) => {
+  await iterate(containerMarginSelect, afterEach);
+};
+const iterateBoxSizing = async (afterEach?: () => any) => {
+  await iterate(containerBoxSizingSelect, afterEach);
+};
+const iterateDirection = async (afterEach?: () => any) => {
+  await iterate(containerDirectionSelect, afterEach);
+};
+const iterateMinMax = async (afterEach?: () => any) => {
+  await iterate(containerMinMaxSelect, afterEach);
+};
+
+const start = async () => {
+  setTestResult(null);
+
+  target?.removeAttribute('style');
+  await iterateMinMax(async () => {
+    await iterateBoxSizing(async () => {
+      await iterateHeight(async () => {
+        await iterateWidth(async () => {
+          await iterateBorder(async () => {
+            // assume this part isn't critical for IE11, to boost test speed
+            if (!msie11) {
+              await iterateFloat(async () => {
+                await iterateMargin();
+              });
+            }
+
+            await iteratePadding();
+            await iterateDirection();
+          });
+        });
+      });
+    });
+  });
+
+  setTestResult(true);
+};
+
+startBtn?.addEventListener('click', start);

packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.html

@@ -1,13 +1,13 @@
 <div id="controls">
   <label for="envHeight">envHeight</label>
   <select name="envHeight" id="envHeight">
-    <option value="envHeightAuto">auto</option>
     <option value="envHeightHundred">100%</option>
+    <option value="envHeightAuto">auto</option>
   </select>
   <label for="envWidth">envWidth</label>
   <select name="envWidth" id="envWidth">
-    <option value="envWidthAuto">auto</option>
     <option value="envWidthHundred">100%</option>
+    <option value="envWidthAuto">auto</option>
   </select>
   <label for="height">height</label>
   <select name="height" id="height">

packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss

@@ -47,9 +47,10 @@ body {
 #target,
 #comparison {
   position: relative;
+  background: rgba(0, 0, 0, 0.1);
 
-  .os-viewport::before,
-  &::before {
+  .os-viewport::after,
+  &::after {
     content: '';
     display: block;
     position: absolute;
@@ -68,8 +69,8 @@ body {
   }
 }
 
-#target::before {
-  opacity: 0.3;
+#target::after {
+  display: none;
 }
 
 #comparison {
@@ -209,10 +210,18 @@ body {
 
 .boxSizingBorderBox > .container {
   box-sizing: border-box;
+
+  .os-viewport * {
+    box-sizing: border-box;
+  }
 }
 
 .boxSizingContentBox > .container {
   box-sizing: content-box;
+
+  .os-viewport * {
+    box-sizing: content-box;
+  }
 }
 
 .directionLTR > .container {
@@ -237,6 +246,16 @@ body {
   max-width: none;
 }
 
+.intrinsic-hack {
+  &.heightAuto,
+  &.envHeightAuto {
+    .percent {
+      height: auto;
+    }
+  }
+}
+
+// fully overlaid scrollbars in chrome
 /*
 .os-environment::-webkit-scrollbar,
 .os-viewport::-webkit-scrollbar,
@@ -248,26 +267,30 @@ body {
   visibility: hidden !important;
   background: transparent !important;
 }
+*/
 
-div::-webkit-scrollbar:horizontal {
-  display: none !important;
-  width: 0px !important;
-  height: 0px !important;
-  visibility: hidden !important;
-  background: transparent !important;
-}
-div::-webkit-scrollbar:vertical {
+// partially overlaid scrollbars in chrome y
+/*
+.os-environment::-webkit-scrollbar,
+.os-viewport::-webkit-scrollbar,
+.os-environment::-webkit-scrollbar-corner,
+.os-viewport::-webkit-scrollbar-corner {
   display: block !important;
   width: 10px !important;
-  height: 10px !important;
-  background: red;
+  height: 0 !important;
+  background: red !important;
 }
+*/
 
-::-webkit-scrollbar-track {
-  background: red;
-}
-
-::-webkit-scrollbar-thumb {
-  background: green;
+// partially overlaid scrollbars in chrome x
+/*
+.os-environment::-webkit-scrollbar,
+.os-viewport::-webkit-scrollbar,
+.os-environment::-webkit-scrollbar-corner,
+.os-viewport::-webkit-scrollbar-corner {
+  display: block !important;
+  width: 0 !important;
+  height: 10px !important;
+  background: red !important;
 }
 */

packages/overlayscrollbars/tests/browser/observers/sizeObserver/index.browser.ts

@@ -94,7 +94,7 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any)
       const observerElm = targetElm?.firstElementChild as HTMLElement;
 
       // no overflow if not needed
-      /*
+
       if (targetElm && newContentSize.w > 0) {
         should.ok(
           observerElm.getBoundingClientRect().right <= targetElm.getBoundingClientRect().right,
@@ -107,7 +107,6 @@ const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any)
           'Generated observer element inst overflowing target element. (height)'
         );
       }
-      */
 
       if (dimensions && (offsetSizeChanged || contentSizeChanged || dirChanged || boxSizingChanged)) {
         await waitForOrFailTest(() => {