begin with structure lifecycles test

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

@@ -1,10 +1,25 @@
 import 'styles/overlayscrollbars.scss';
 import './index.scss';
+
 import { resize } from '@/testing-browser/Resize';
 import { OverlayScrollbars } from 'overlayscrollbars';
+import { style } from 'support';
 
 const targetElm = document.querySelector('#target') as HTMLElement;
-window.os = OverlayScrollbars({ target: targetElm, content: false });
+const osInstance = (window.os = OverlayScrollbars({ target: targetElm, content: false }));
 
-resize(document.querySelector('#resize')!);
-resize(document.querySelector('#target')!);
+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');
+
+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(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;
+});

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

@@ -1,4 +1,14 @@
 <div id="controls">
+  <label for="evnHeight">evnHeight</label>
+  <select name="evnHeight" id="evnHeight">
+    <option value="envHeightAuto">auto</option>
+    <option value="envHeightHundred">100%</option>
+  </select>
+  <label for="envWidth">envWidth</label>
+  <select name="envWidth" id="envWidth">
+    <option value="envWidthAuto">auto</option>
+    <option value="envWidthHundred">100%</option>
+  </select>
   <label for="height">height</label>
   <select name="height" id="height">
     <option value="heightAuto">auto</option>
@@ -11,17 +21,29 @@
     <option value="widthHundred">100%</option>
     <option value="width200">200px</option>
   </select>
+  <label for="float">float</label>
+  <select name="float" id="float">
+    <option value="floatNone">none</option>
+    <option value="floatLeft">left</option>
+    <option value="floatRight">right</option>
+  </select>
   <label for="padding">padding</label>
   <select name="padding" id="padding">
-    <option value="padding0">0</option>
-    <option value="padding10">10px</option>
-    <option value="padding50">50px</option>
+    <option value="paddingNone">none</option>
+    <option value="paddingSmall">small</option>
+    <option value="paddingLarge">large</option>
   </select>
   <label for="border">border</label>
   <select name="border" id="border">
-    <option value="border2">2px</option>
-    <option value="border10">10px</option>
-    <option value="border0">0</option>
+    <option value="borderSmall">small</option>
+    <option value="borderLarge">large</option>
+    <option value="borderNone">none</option>
+  </select>
+  <label for="margin">margin</label>
+  <select name="margin" id="margin">
+    <option value="marginNone">none</option>
+    <option value="marginSmall">small</option>
+    <option value="marginLarge">large</option>
   </select>
   <label for="boxSizing">boxSizing</label>
   <select name="boxSizing" id="boxSizing">
@@ -38,16 +60,36 @@
     <option value="directionLTR">ltr</option>
     <option value="directionRTL">rtl</option>
   </select>
+  <label for="minMax">minMax</label>
+  <select name="minMax" id="minMax">
+    <option value="minMaxFixed">fixed</option>
+    <option value="minMaxNone">none</option>
+  </select>
 
   <button id="start">start</button>
   <span>Detected resizes: <span id="resizes">0</span></span>
 </div>
 <div id="stage">
   <div>
-    <div id="target">
-      <div id="resize">Resize</div>
-      <div id="percent">50%</div>
-      <div id="end">End</div>
+    <div class="columns">
+      <div class="column">
+        <div class="env">
+          <div id="target">
+            <div class="resize">Resize</div>
+            <div class="percent">50%</div>
+            <div class="end">End</div>
+          </div>
+        </div>
+      </div>
+      <div class="column">
+        <div class="env">
+          <div id="comparison">
+            <div class="resize">Resize</div>
+            <div class="percent">50%</div>
+            <div class="end">End</div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

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

@@ -27,7 +27,19 @@ body {
   left: 0;
 }
 
-#target {
+.columns {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.column {
+  width: 100%;
+  height: 100%;
+}
+
+#target,
+#comparison {
   position: relative;
   border: 2px solid red;
   min-height: 100px;
@@ -37,21 +49,25 @@ body {
   padding: 5px 50px 15px 20px;
 }
 
-#resize {
+#comparison {
+  overflow: hidden;
+}
+
+.resize {
   overflow: hidden;
   background: blue;
   border: 1px solid black;
   padding: 10px;
 }
 
-#percent {
+.percent {
   height: 50%;
   background: purple;
   border: 1px solid black;
   padding: 10px;
 }
 
-#end {
+.end {
   position: relative;
   background: green;
   border: 1px solid black;
@@ -60,7 +76,7 @@ body {
   display: none;
 }
 
-#end::before {
+.end::before {
   content: '';
   position: absolute;
   display: block;

packages/testing-browser/src/Resize.ts

@@ -1,7 +1,10 @@
 // @ts-ignore
-import { createDiv, appendChildren, parent, style, on, off, addClass, WH, XY, clientSize } from '@/overlayscrollbars/support';
+import { createDiv, appendChildren, parent, style, on, off, addClass, WH, XY, clientSize, each } from '@/overlayscrollbars/support';
+
+type ResizeListener = (width: number, height: number) => void;
 
 export const resize = (element: HTMLElement) => {
+  const resizeListeners: ResizeListener[] = [];
   const strMouseTouchDownEvent = 'mousedown touchstart';
   const strMouseTouchUpEvent = 'mouseup touchend';
   const strMouseTouchMoveEvent = 'mousemove touchmove';
@@ -30,6 +33,13 @@ export const resize = (element: HTMLElement) => {
     };
 
     style(dragResizer, sizeStyle);
+
+    each(resizeListeners, (listener: ResizeListener) => {
+      if (listener) {
+        listener(sizeStyle.width, sizeStyle.height);
+      }
+    });
+
     event.stopPropagation();
   };
 
@@ -67,4 +77,10 @@ export const resize = (element: HTMLElement) => {
       event.stopPropagation();
     }
   });
+
+  return {
+    addResizeListener(listener: ResizeListener) {
+      resizeListeners.push(listener);
+    },
+  };
 };