improve structure lifecycle test

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

@@ -18,7 +18,7 @@ const resizeElms = document.querySelectorAll('.resize');
 const percentElms = document.querySelectorAll('.percent');
 const endElms = document.querySelectorAll('.end');
 const envElms = document.querySelectorAll<HTMLElement>('.env');
-const containerElms = document.querySelectorAll<HTMLElement>('#target, #comparison');
+const containerElms = document.querySelectorAll<HTMLElement>('.container');
 
 resize(target!).addResizeListener((width, height) => style(comparison, { width, height }));
 //resize(comparison!).addResizeListener((width, height) => style(target, { width, height }));
@@ -31,9 +31,9 @@ target!.querySelector('.os-viewport')?.addEventListener('scroll', (e) => {
   comparison!.scrollTop = viewport.scrollTop;
 });
 
+const selectCallbackEnv = generateClassChangeSelectCallback(from(envElms));
 const envWidthSelect = document.querySelector<HTMLSelectElement>('#envWidth');
 const envHeightSelect = document.querySelector<HTMLSelectElement>('#envHeight');
-const selectCallbackEnv = generateClassChangeSelectCallback(from(envElms));
 const containerWidthSelect = document.querySelector<HTMLSelectElement>('#width');
 const containerHeightSelect = document.querySelector<HTMLSelectElement>('#height');
 const containerFloatSelect = document.querySelector<HTMLSelectElement>('#float');
@@ -43,28 +43,27 @@ const containerMarginSelect = document.querySelector<HTMLSelectElement>('#margin
 const containerBoxSizingSelect = document.querySelector<HTMLSelectElement>('#boxSizing');
 const containerDirectionSelect = document.querySelector<HTMLSelectElement>('#direction');
 const containerMinMaxSelect = document.querySelector<HTMLSelectElement>('#minMax');
-const selectCallbackContainer = generateClassChangeSelectCallback(from(containerElms));
 
 envWidthSelect?.addEventListener('change', selectCallbackEnv);
 envHeightSelect?.addEventListener('change', selectCallbackEnv);
-containerWidthSelect?.addEventListener('change', selectCallbackContainer);
-containerHeightSelect?.addEventListener('change', selectCallbackContainer);
-containerFloatSelect?.addEventListener('change', selectCallbackContainer);
-containerPaddingSelect?.addEventListener('change', selectCallbackContainer);
-containerBorderSelect?.addEventListener('change', selectCallbackContainer);
-containerMarginSelect?.addEventListener('change', selectCallbackContainer);
-containerBoxSizingSelect?.addEventListener('change', selectCallbackContainer);
-containerDirectionSelect?.addEventListener('change', selectCallbackContainer);
-containerMinMaxSelect?.addEventListener('change', selectCallbackContainer);
+containerWidthSelect?.addEventListener('change', selectCallbackEnv);
+containerHeightSelect?.addEventListener('change', selectCallbackEnv);
+containerFloatSelect?.addEventListener('change', selectCallbackEnv);
+containerPaddingSelect?.addEventListener('change', selectCallbackEnv);
+containerBorderSelect?.addEventListener('change', selectCallbackEnv);
+containerMarginSelect?.addEventListener('change', selectCallbackEnv);
+containerBoxSizingSelect?.addEventListener('change', selectCallbackEnv);
+containerDirectionSelect?.addEventListener('change', selectCallbackEnv);
+containerMinMaxSelect?.addEventListener('change', selectCallbackEnv);
 
 selectCallbackEnv(envWidthSelect);
 selectCallbackEnv(envHeightSelect);
-selectCallbackContainer(containerWidthSelect);
-selectCallbackContainer(containerHeightSelect);
-selectCallbackContainer(containerFloatSelect);
-selectCallbackContainer(containerPaddingSelect);
-selectCallbackContainer(containerBorderSelect);
-selectCallbackContainer(containerMarginSelect);
-selectCallbackContainer(containerBoxSizingSelect);
-selectCallbackContainer(containerDirectionSelect);
-selectCallbackContainer(containerMinMaxSelect);
+selectCallbackEnv(containerWidthSelect);
+selectCallbackEnv(containerHeightSelect);
+selectCallbackEnv(containerFloatSelect);
+selectCallbackEnv(containerPaddingSelect);
+selectCallbackEnv(containerBorderSelect);
+selectCallbackEnv(containerMarginSelect);
+selectCallbackEnv(containerBoxSizingSelect);
+selectCallbackEnv(containerDirectionSelect);
+selectCallbackEnv(containerMinMaxSelect);

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

@@ -69,7 +69,7 @@
     <div class="columns">
       <div class="column">
         <div class="env">
-          <div id="target">
+          <div id="target" class="container">
             <div class="resize">Resize</div>
             <div class="percent">50%</div>
             <div class="end">End</div>
@@ -78,7 +78,7 @@
       </div>
       <div class="column">
         <div class="env">
-          <div id="comparison">
+          <div id="comparison" class="container">
             <div class="resize">Resize</div>
             <div class="percent">50%</div>
             <div class="end">End</div>

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

@@ -126,111 +126,111 @@ body {
   opacity: 0.3;
 }
 
-.widthAuto,
+.widthAuto > .container,
 .envWidthAuto {
   width: auto;
   display: inline-block;
 }
-#target.widthAuto {
+.widthAuto > #target {
   display: inline-flex;
 }
-.widthHundred,
+.widthHundred > .container,
 .envWidthHundred {
   width: 100%;
 }
 
-.heightAuto,
+.heightAuto > .container,
 .envHeightAuto {
   height: auto;
 }
-.heightHundred,
+.heightHundred > .container,
 .envHeightHundred {
   height: 100%;
 }
 
-.width200 {
+.width200 > .container {
   width: 200px;
 }
-.height200 {
+.height200 > .container {
   height: 200px;
 }
 
-.floatNone {
+.floatNone > .container {
   float: none;
 }
 
-.floatLeft {
+.floatLeft > .container {
   float: left;
 }
 
-.floatRight {
+.floatRight > .container {
   float: right;
 }
 
-.paddingNone {
+.paddingNone > .container {
   padding: 0;
 }
 
-.paddingSmall {
+.paddingSmall > .container {
   padding: 5px 50px 15px 20px;
 }
 
-.paddingLarge {
+.paddingLarge > .container {
   padding: 12px 22px 53px 33px;
 }
 
-.borderNone {
+.borderNone > .container {
   border: none;
 }
 
-.borderSmall {
+.borderSmall > .container {
   border-color: darkorange;
   border-style: solid;
   border-width: 2px 5px 3px 4px;
 }
 
-.borderLarge {
+.borderLarge > .container {
   border-color: darkorange;
   border-style: solid;
   border-width: 9px 6px 7px 3px;
 }
 
-.marginNone {
+.marginNone > .container {
   margin: 0;
 }
 
-.marginSmall {
+.marginSmall > .container {
   margin: 21px 16px 4px 33px;
 }
 
-.marginLarge {
+.marginLarge > .container {
   margin: 33px 46px 69px 23px;
 }
 
-.boxSizingBorderBox {
+.boxSizingBorderBox > .container {
   box-sizing: border-box;
 }
 
-.boxSizingContentBox {
+.boxSizingContentBox > .container {
   box-sizing: content-box;
 }
 
-.directionLTR {
+.directionLTR > .container {
   direction: ltr;
 }
 
-.directionRTL {
+.directionRTL > .container {
   direction: rtl;
 }
 
-.minMaxFixed {
+.minMaxFixed > .container {
   min-height: 180px;
   min-width: 180px;
   max-height: 420px;
   max-width: 420px;
 }
 
-.minMaxNone {
+.minMaxNone > .container {
   min-height: 0;
   min-width: 0;
   max-height: none;