add direction observer and improve sizeobserver tests

packages/overlayscrollbars/src/overlayscrollbars/observers/SizeObserver.ts

@@ -1,4 +1,5 @@
-import { createDOM, style, appendChildren, offsetSize, scrollLeft, scrollTop, jsAPI, addClass, each } from 'support';
+import { createDOM, style, appendChildren, offsetSize, scrollLeft, scrollTop, jsAPI, each, prependChildren, removeElements } from 'support';
+import { Environment } from 'environment';
 
 const animationStartEventName = 'animationstart';
 const scrollEventName = 'scroll';
@@ -10,25 +11,38 @@ const classNameSizeObserverListenerItem = `${classNameSizeObserverListener}-item
 const classNameSizeObserverListenerItemFinal = `${classNameSizeObserverListenerItem}-final`;
 const cAF = cancelAnimationFrame;
 const rAF = requestAnimationFrame;
+const getDirection = (elm: HTMLElement) => style(elm, 'direction');
 
 // TODO:
 // 1. handling for event listeners (animationStartEventName.split(' '))
 // 2. return not just element but also destruction function
 // 3. shorthand handling for preventDefault & stopPropagation etc.
-// 4. add functionality & tests for direction change
 // 5. MAYBE add comparison function to offsetSize etc.
-// 6. Create test utils (waitFor)
 
-export const createSizeObserver = (onSizeChangedCallback: () => void) => {
+export const createSizeObserver = (
+  target: HTMLElement,
+  onSizeChangedCallback: (direction?: boolean) => any,
+  environment: Environment,
+  direction?: boolean
+) => {
+  const rtlScrollBehavior = environment._rtlScrollBehavior;
   const baseElements = createDOM(`<div class="${classNameSizeObserver}"><div class="${classNameSizeObserverListener}"></div></div>`);
   const sizeObserver = baseElements[0] as HTMLElement;
   const listenerElement = sizeObserver.firstChild as HTMLElement;
-  let appearCallback = onSizeChangedCallback;
+  const onSizeChangedCallbackProxy = (dir?: boolean) => {
+    if (direction) {
+      const rtl = getDirection(sizeObserver) === 'rtl';
+      scrollLeft(sizeObserver, rtl ? (rtlScrollBehavior.n ? -scrollAmount : rtlScrollBehavior.i ? 0 : scrollAmount) : scrollAmount);
+      scrollTop(sizeObserver, scrollAmount);
+    }
+    onSizeChangedCallback(dir === true);
+  };
+  let appearCallback: (...args: any) => any = onSizeChangedCallbackProxy;
+
   if (ResizeObserverConstructor) {
-    const resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallback);
+    const resizeObserverInstance = new ResizeObserverConstructor(onSizeChangedCallbackProxy);
     resizeObserverInstance.observe(listenerElement);
   } else {
-    addClass(sizeObserver, 'scroll-observer');
     const observerElementChildren = createDOM(
       `<div class="${classNameSizeObserverListenerItem}" dir="ltr"><div class="${classNameSizeObserverListenerItem}"><div class="${classNameSizeObserverListenerItemFinal}"></div></div><div class="${classNameSizeObserverListenerItem}"><div class="${classNameSizeObserverListenerItemFinal}" style="width: 200%; height: 200%"></div></div></div>`
     );
@@ -54,7 +68,7 @@ export const createSizeObserver = (onSizeChangedCallback: () => void) => {
       if (!isDirty) return;
 
       cacheSize = currSize;
-      onSizeChangedCallback();
+      onSizeChangedCallbackProxy();
     };
     const onScroll = (scrollEvent?: Event) => {
       currSize = offsetSize(listenerElement);
@@ -91,5 +105,30 @@ export const createSizeObserver = (onSizeChangedCallback: () => void) => {
     });
   });
 
-  return sizeObserver;
+  if (direction) {
+    let dirCache: string | undefined;
+    sizeObserver.addEventListener('scroll', (event: Event) => {
+      const dir = getDirection(sizeObserver);
+      const changed = dir !== dirCache;
+      if (changed) {
+        if (dir === 'rtl') {
+          style(listenerElement, { left: 'auto', right: 0 });
+        } else {
+          style(listenerElement, { left: 0, right: 'auto' });
+        }
+        dirCache = dir;
+        onSizeChangedCallbackProxy(true);
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    });
+  }
+
+  prependChildren(target, sizeObserver);
+
+  return () => {
+    removeElements(sizeObserver);
+  };
 };

packages/overlayscrollbars/src/sizeobserver.scss

@@ -2,7 +2,9 @@ $scrollbar-cushion: 100px;
 
 .os-size-observer,
 .os-size-observer-listener {
+  direction: inherit;
   padding: inherit;
+  border: inherit;
   margin: 0;
   pointer-events: none;
   overflow: hidden;
@@ -25,18 +27,13 @@ $scrollbar-cushion: 100px;
   z-index: -1;
   animation-duration: 0.001s;
   animation-name: os-size-observer-appear-animation;
-
-  &.scroll-observer {
-    .os-size-observer-listener {
-      box-sizing: content-box;
-    }
-  }
 }
 
 .os-size-observer-listener {
   display: block;
   height: 200%;
   width: 200%;
+  box-sizing: content-box;
 
   // lets assume no scrollbar is 100px wide
   & > .os-size-observer-listener-item {

packages/overlayscrollbars/tests/puppeteer/SizeObserver/index.browser.ts

@@ -4,9 +4,24 @@ import should from 'should';
 import { waitFor } from '@testing-library/dom';
 import { generateSelectCallback, iterateSelect } from '@/testing-browser/Select';
 import { setTestResult } from '@/testing-browser/TestResult';
-import { hasDimensions, offsetSize, WH } from 'support';
+import { hasDimensions, offsetSize, WH, style } from 'support';
 
-import { createSizeObserver } from 'overlayscrollbars/observers/createSizeObserver';
+import { Environment } from 'environment';
+import { createSizeObserver } from 'overlayscrollbars/observers/SizeObserver';
+
+let sizeIterations = 0;
+let directionIterations = 0;
+const contentBox = (elm: HTMLElement | null) => {
+  if (elm) {
+    const computedStyle = window.getComputedStyle(elm);
+    return {
+      width: elm.clientWidth - (parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight)),
+      height: elm.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom)),
+    };
+  }
+
+  return { width: 0, height: 0 };
+};
 
 const targetElm = document.querySelector('#target');
 const heightSelect: HTMLSelectElement | null = document.querySelector('#height');
@@ -15,44 +30,67 @@ const paddingSelect: HTMLSelectElement | null = document.querySelector('#padding
 const borderSelect: HTMLSelectElement | null = document.querySelector('#border');
 const boxSizingSelect: HTMLSelectElement | null = document.querySelector('#boxSizing');
 const displaySelect: HTMLSelectElement | null = document.querySelector('#display');
+const directionSelect: HTMLSelectElement | null = document.querySelector('#direction');
 const startBtn: HTMLButtonElement | null = document.querySelector('#start');
 const resizesSlot: HTMLButtonElement | null = document.querySelector('#resizes');
 
-let iterations = 0;
-const observerElm = createSizeObserver(() => {
-  iterations += 1;
-  requestAnimationFrame(() => {
-    if (resizesSlot) {
-      resizesSlot.textContent = iterations.toString();
-    }
-  });
-});
-
 const selectCallback = generateSelectCallback(targetElm as HTMLElement);
-
 const iterate = async (select: HTMLSelectElement | null, afterEach?: () => any) => {
-  await iterateSelect<{ currIterations: number; currOffsetSize: WH<number> }>(select, {
+  interface IterateSelect {
+    currSizeIterations: number;
+    currDirectionIterations: number;
+    currOffsetSize: WH<number>;
+    currDir: string;
+  }
+
+  await iterateSelect<IterateSelect>(select, {
     beforeEach() {
-      const currIterations = iterations;
+      const currSizeIterations = sizeIterations;
+      const currDirectionIterations = directionIterations;
       const currOffsetSize = offsetSize(targetElm as HTMLElement);
+      const currDir = style(targetElm as HTMLElement, 'direction');
 
       return {
-        currIterations,
+        currSizeIterations,
+        currDirectionIterations,
         currOffsetSize,
+        currDir,
       };
     },
-    async check({ currIterations, currOffsetSize }) {
+    async check({ currSizeIterations, currDirectionIterations, currOffsetSize, currDir }) {
       const newOffsetSize = offsetSize(targetElm as HTMLElement);
+      const newDir = style(targetElm as HTMLElement, 'direction');
       const offsetSizeChanged = currOffsetSize.w !== newOffsetSize.w || currOffsetSize.h !== newOffsetSize.h;
+      const dirChanged = currDir !== newDir;
+      const dimensions = hasDimensions(targetElm as HTMLElement);
+      const contentSize = contentBox(targetElm as HTMLElement);
+      const observerElm = targetElm?.firstElementChild as HTMLElement;
 
-      if (hasDimensions(targetElm as HTMLElement) && offsetSizeChanged) {
+      // no overflow if not needed
-        // eslint-disable-next-line
+      if (targetElm && contentSize.width > 0) {
-        await waitFor(() => should.equal(iterations, currIterations + 1), {
+        should.ok(observerElm.getBoundingClientRect().right <= targetElm.getBoundingClientRect().right);
-          onTimeout(error): Error {
+      }
-            setTestResult(false);
+      if (targetElm && contentSize.height > 0) {
-            return error;
+        should.ok(observerElm.getBoundingClientRect().bottom <= targetElm.getBoundingClientRect().bottom);
+      }
+
+      if (dimensions && (offsetSizeChanged || dirChanged)) {
+        await waitFor(
+          async () => {
+            if (offsetSizeChanged) {
+              should.equal(sizeIterations, currSizeIterations + 1);
+            }
+            if (dirChanged) {
+              should.equal(directionIterations, currDirectionIterations + 1);
+            }
           },
-        });
+          {
+            onTimeout(error): Error {
+              setTestResult(false);
+              return error;
+            },
+          }
+        );
       }
     },
     afterEach,
@@ -65,6 +103,7 @@ paddingSelect?.addEventListener('change', selectCallback);
 borderSelect?.addEventListener('change', selectCallback);
 boxSizingSelect?.addEventListener('change', selectCallback);
 displaySelect?.addEventListener('change', selectCallback);
+directionSelect?.addEventListener('change', selectCallback);
 
 selectCallback(heightSelect);
 selectCallback(widthSelect);
@@ -72,6 +111,7 @@ selectCallback(paddingSelect);
 selectCallback(borderSelect);
 selectCallback(boxSizingSelect);
 selectCallback(displaySelect);
+selectCallback(directionSelect);
 
 const iteratePadding = async (afterEach?: () => any) => {
   await iterate(paddingSelect, afterEach);
@@ -91,16 +131,21 @@ const iterateBoxSizing = async (afterEach?: () => any) => {
 const iterateDisplay = async (afterEach?: () => any) => {
   await iterate(displaySelect, afterEach);
 };
+const iterateDirection = async (afterEach?: () => any) => {
+  await iterate(directionSelect, afterEach);
+};
 
 const start = async () => {
   setTestResult(null);
 
   targetElm?.removeAttribute('style');
   await iterateDisplay();
+  await iterateDirection();
   await iterateBoxSizing(async () => {
     await iterateHeight(async () => {
       await iterateWidth(async () => {
         await iterateBorder(async () => {
+          await iterateDirection();
           await iteratePadding();
         });
       });
@@ -112,6 +157,22 @@ const start = async () => {
 
 startBtn?.addEventListener('click', start);
 
-targetElm?.appendChild(observerElm);
+createSizeObserver(
+  targetElm as HTMLElement,
+  (direction?: boolean) => {
+    if (direction) {
+      directionIterations += 1;
+    } else {
+      sizeIterations += 1;
+    }
+    requestAnimationFrame(() => {
+      if (resizesSlot) {
+        resizesSlot.textContent = (directionIterations + sizeIterations).toString();
+      }
+    });
+  },
+  new Environment(),
+  true
+);
 
 export { start };

packages/overlayscrollbars/tests/puppeteer/SizeObserver/index.html

@@ -1,40 +1,49 @@
-<label for="height">height</label>
+<div id="controls">
-<select name="height" id="height">
+  <label for="height">height</label>
-  <option value="heightAuto">auto</option>
+  <select name="height" id="height">
-  <option value="heightHundred">100%</option>
+    <option value="heightAuto">auto</option>
-  <option value="height200">200px</option>
+    <option value="heightHundred">100%</option>
-</select>
+    <option value="height200">200px</option>
-<label for="width">width</label>
+  </select>
-<select name="width" id="width">
+  <label for="width">width</label>
-  <option value="widthAuto">auto</option>
+  <select name="width" id="width">
-  <option value="widthHundred">100%</option>
+    <option value="widthAuto">auto</option>
-  <option value="width200">200px</option>
+    <option value="widthHundred">100%</option>
-</select>
+    <option value="width200">200px</option>
-<label for="padding">padding</label>
+  </select>
-<select name="padding" id="padding">
+  <label for="padding">padding</label>
-  <option value="padding0">0</option>
+  <select name="padding" id="padding">
-  <option value="padding10">10px</option>
+    <option value="padding0">0</option>
-  <option value="padding50">50px</option>
+    <option value="padding10">10px</option>
-</select>
+    <option value="padding50">50px</option>
-<label for="border">border</label>
+  </select>
-<select name="border" id="border">
+  <label for="border">border</label>
-  <option value="border2">2px</option>
+  <select name="border" id="border">
-  <option value="border10">10px</option>
+    <option value="border2">2px</option>
-  <option value="border0">0</option>
+    <option value="border10">10px</option>
-</select>
+    <option value="border0">0</option>
-<label for="boxSizing">boxSizing</label>
+  </select>
-<select name="boxSizing" id="boxSizing">
+  <label for="boxSizing">boxSizing</label>
-  <option value="boxSizingBorderBox">border-box</option>
+  <select name="boxSizing" id="boxSizing">
-  <option value="boxSizingContentBox">content-box</option>
+    <option value="boxSizingBorderBox">border-box</option>
-</select>
+    <option value="boxSizingContentBox">content-box</option>
-<label for="display">display</label>
+  </select>
-<select name="display" id="display">
+  <label for="display">display</label>
-  <option value="displayBlock">block</option>
+  <select name="display" id="display">
-  <option value="displayNone">none</option>
+    <option value="displayBlock">block</option>
-</select>
+    <option value="displayNone">none</option>
+  </select>
+  <label for="direction">direction</label>
+  <select name="direction" id="direction">
+    <option value="directionLTR">ltr</option>
+    <option value="directionRTL">rtl</option>
+  </select>
 
-<button id="start">start</button>
+  <button id="start">start</button>
-<span>Detected resizes: <span id="resizes">0</span></span>
+  <span>Detected resizes: <span id="resizes">0</span></span>
-<br />
+</div>
-
+<div id="stage">
-<div id="target"></div>
+  <div>
+    <div id="target"></div>
+  </div>
+</div>

packages/overlayscrollbars/tests/puppeteer/SizeObserver/index.scss

@@ -1,5 +1,34 @@
+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;
+  }
+}
+
+#canvas > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
 #target {
-  overflow: scroll;
+  overflow: hidden;
   resize: both;
   position: relative;
   // prevent container from reaching 0x0 dimensions for testing purposes
@@ -48,9 +77,23 @@
   width: 100%;
 }
 
+.boxSizingBorderBox {
+  box-sizing: border-box;
+}
+.boxSizingContentBox {
+  box-sizing: content-box;
+}
+
 .displayNone {
   display: none;
 }
 .displayBlock {
   display: block;
 }
+
+.directionltr {
+  direction: ltr;
+}
+.directionRTL {
+  direction: rtl;
+}

packages/testing-browser/src/Select.ts

@@ -16,7 +16,7 @@ export const generateSelectCallback = (targetElm: HTMLElement | null) => (event:
     const selectOptions = getSelectOptions(target);
 
     if (targetElm) {
-      targetElm.classList.remove(...selectOptions);
+      selectOptions.forEach((clazz) => targetElm.classList.remove(clazz));
       targetElm.classList.add(selectedOption);
     }
   }

packages/testing-browser/src/Timeout.ts

@@ -0,0 +1 @@
+export const timeout = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

rollup.config.base.js

@@ -256,12 +256,6 @@ const rollupConfig = (config = {}, { project = process.cwd(), overwrite = {}, si
       if (isLast) {
         build.plugins.push({
           name: 'deleteCacheDirs',
-          moduleParsed(moduleInfo) {
-            //if (filename.includes('index.browser')) {
-            console.log('moduleInfo', moduleInfo);
-            //console.log('importer', filename);
-            //}
-          },
           writeBundle() {
             const cacheDirs = cache.map((dir) => path.resolve(projectPath, dir));
             const deletedDirs = del.sync(cacheDirs);