improve code

packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.browser.ts

@@ -1,5 +1,5 @@
-import 'styles/overlayscrollbars.scss';
 import './index.scss';
+import 'styles/overlayscrollbars.scss';
 import should from 'should';
 import { OverlayScrollbars } from 'overlayscrollbars';
 
@@ -28,11 +28,12 @@ const resizeBetweenB: HTMLElement | null = document.createElement('div');
 let rootUpdateCount = 0;
 let aUpdateCount = 0;
 let bUpdateCount = 0;
-const osInstanceRoot = OverlayScrollbars(
+OverlayScrollbars(
   targetRoot!,
   {},
   {
     initialized() {
+      addClass(targetRoot!.querySelector('.os-viewport'), 'flex');
       addClass(resizeBetweenRoot, 'resize resizeBetween');
       targetRoot!.append(resizeBetweenRoot);
     },
@@ -46,11 +47,12 @@ const osInstanceRoot = OverlayScrollbars(
     },
   }
 );
-const osInstanceA = OverlayScrollbars(
+OverlayScrollbars(
   targetA!,
   {},
   {
     initialized() {
+      addClass(targetA!.querySelector('.os-viewport'), 'flex');
       addClass(resizeBetweenA, 'resize resizeBetween');
       targetA!.append(resizeBetweenA);
     },
@@ -65,7 +67,7 @@ const osInstanceA = OverlayScrollbars(
     },
   }
 );
-const osInstanceB = OverlayScrollbars(
+OverlayScrollbars(
   targetB!,
   {},
   {
@@ -94,8 +96,6 @@ resize(resizeBetweenB!);
 const start = async () => {
   setTestResult(null);
 
-  // target?.removeAttribute('style');
-
   setTestResult(true);
 };
 

packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.html

@@ -1,19 +1,16 @@
 <div id="controls">
   <button id="start">start</button>
-  <div>UpdatesRoot: <span id="updatesRoot"></span></div>
-  <div>UpdatesA: <span id="updatesA"></span></div>
-  <div>UpdatesB:</div>
 </div>
 <div id="stage">
   <div>
     <div id="targetRoot" class="container">
       <div id="targetA" class="container">
         <div id="targetB" class="container">
-          <div id="resizeB" class="resize">B <span id="updatesB"></span></div>
+          <div id="resizeB" class="resize">UpdatesB: <span id="updatesB"></span></div>
         </div>
-        <div id="resizeA" class="resize">A</div>
+        <div id="resizeA" class="resize">UpdatesA: <span id="updatesA"></span></div>
       </div>
-      <div id="resizeRoot" class="resize">Root</div>
+      <div id="resizeRoot" class="resize">UpdatesRoot: <span id="updatesRoot"></span></div>
     </div>
   </div>
 </div>

packages/overlayscrollbars/tests/playwright/setups/structureSetup/nesting/index.scss

@@ -25,6 +25,7 @@ body {
   width: 60%;
   height: 60%;
   padding: 10px;
+  margin: 10px;
 }
 
 .resize {
@@ -42,7 +43,7 @@ body {
   background: tomato;
   position: absolute;
   bottom: 0;
-  right: 0;
+  left: 0;
 }
 
 .resizeBtn {
@@ -58,3 +59,11 @@ body {
 #targetRoot {
   height: 80%;
 }
+
+#targetA {
+  box-sizing: border-box;
+}
+
+.flex {
+  display: flex;
+}