mirrors/OverlayScrollbars
2
0
Fork 0
mirror of https://github.com/tenrok/OverlayScrollbars.git synced 2026-06-24 06:20:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

improve structure lifecycle test

Browse Source
This commit is contained in:
Rene
2021-04-21 22:56:44 +02:00
parent 235cf73c1d
commit 6966240841
3 changed files with 47 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.browser.ts
+20 -21
View File
@@ -18,7 +18,7 @@ const resizeElms = document.querySelectorAll('.resize');
const percentElms = document.querySelectorAll('.percent'); const percentElms = document.querySelectorAll('.percent');
const endElms = document.querySelectorAll('.end'); const endElms = document.querySelectorAll('.end');
const envElms = document.querySelectorAll<HTMLElement>('.env'); 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(target!).addResizeListener((width, height) => style(comparison, { width, height }));
//resize(comparison!).addResizeListener((width, height) => style(target, { 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; comparison!.scrollTop = viewport.scrollTop;
}); });
const selectCallbackEnv = generateClassChangeSelectCallback(from(envElms));
const envWidthSelect = document.querySelector<HTMLSelectElement>('#envWidth'); const envWidthSelect = document.querySelector<HTMLSelectElement>('#envWidth');
const envHeightSelect = document.querySelector<HTMLSelectElement>('#envHeight'); const envHeightSelect = document.querySelector<HTMLSelectElement>('#envHeight');
const selectCallbackEnv = generateClassChangeSelectCallback(from(envElms));
const containerWidthSelect = document.querySelector<HTMLSelectElement>('#width'); const containerWidthSelect = document.querySelector<HTMLSelectElement>('#width');
const containerHeightSelect = document.querySelector<HTMLSelectElement>('#height'); const containerHeightSelect = document.querySelector<HTMLSelectElement>('#height');
const containerFloatSelect = document.querySelector<HTMLSelectElement>('#float'); const containerFloatSelect = document.querySelector<HTMLSelectElement>('#float');
@@ -43,28 +43,27 @@ const containerMarginSelect = document.querySelector<HTMLSelectElement>('#margin
const containerBoxSizingSelect = document.querySelector<HTMLSelectElement>('#boxSizing'); const containerBoxSizingSelect = document.querySelector<HTMLSelectElement>('#boxSizing');
const containerDirectionSelect = document.querySelector<HTMLSelectElement>('#direction'); const containerDirectionSelect = document.querySelector<HTMLSelectElement>('#direction');
const containerMinMaxSelect = document.querySelector<HTMLSelectElement>('#minMax'); const containerMinMaxSelect = document.querySelector<HTMLSelectElement>('#minMax');
const selectCallbackContainer = generateClassChangeSelectCallback(from(containerElms));
envWidthSelect?.addEventListener('change', selectCallbackEnv); envWidthSelect?.addEventListener('change', selectCallbackEnv);
envHeightSelect?.addEventListener('change', selectCallbackEnv); envHeightSelect?.addEventListener('change', selectCallbackEnv);
containerWidthSelect?.addEventListener('change', selectCallbackContainer); containerWidthSelect?.addEventListener('change', selectCallbackEnv);
containerHeightSelect?.addEventListener('change', selectCallbackContainer); containerHeightSelect?.addEventListener('change', selectCallbackEnv);
containerFloatSelect?.addEventListener('change', selectCallbackContainer); containerFloatSelect?.addEventListener('change', selectCallbackEnv);
containerPaddingSelect?.addEventListener('change', selectCallbackContainer); containerPaddingSelect?.addEventListener('change', selectCallbackEnv);
containerBorderSelect?.addEventListener('change', selectCallbackContainer); containerBorderSelect?.addEventListener('change', selectCallbackEnv);
containerMarginSelect?.addEventListener('change', selectCallbackContainer); containerMarginSelect?.addEventListener('change', selectCallbackEnv);
containerBoxSizingSelect?.addEventListener('change', selectCallbackContainer); containerBoxSizingSelect?.addEventListener('change', selectCallbackEnv);
containerDirectionSelect?.addEventListener('change', selectCallbackContainer); containerDirectionSelect?.addEventListener('change', selectCallbackEnv);
containerMinMaxSelect?.addEventListener('change', selectCallbackContainer); containerMinMaxSelect?.addEventListener('change', selectCallbackEnv);
selectCallbackEnv(envWidthSelect); selectCallbackEnv(envWidthSelect);
selectCallbackEnv(envHeightSelect); selectCallbackEnv(envHeightSelect);
selectCallbackContainer(containerWidthSelect); selectCallbackEnv(containerWidthSelect);
selectCallbackContainer(containerHeightSelect); selectCallbackEnv(containerHeightSelect);
selectCallbackContainer(containerFloatSelect); selectCallbackEnv(containerFloatSelect);
selectCallbackContainer(containerPaddingSelect); selectCallbackEnv(containerPaddingSelect);
selectCallbackContainer(containerBorderSelect); selectCallbackEnv(containerBorderSelect);
selectCallbackContainer(containerMarginSelect); selectCallbackEnv(containerMarginSelect);
selectCallbackContainer(containerBoxSizingSelect); selectCallbackEnv(containerBoxSizingSelect);
selectCallbackContainer(containerDirectionSelect); selectCallbackEnv(containerDirectionSelect);
selectCallbackContainer(containerMinMaxSelect); selectCallbackEnv(containerMinMaxSelect);
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.html
+2 -2
View File
@@ -69,7 +69,7 @@
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="env"> <div class="env">
<div id="target"> <div id="target" class="container">
<div class="resize">Resize</div> <div class="resize">Resize</div>
<div class="percent">50%</div> <div class="percent">50%</div>
<div class="end">End</div> <div class="end">End</div>
@@ -78,7 +78,7 @@
</div> </div>
<div class="column"> <div class="column">
<div class="env"> <div class="env">
<div id="comparison"> <div id="comparison" class="container">
<div class="resize">Resize</div> <div class="resize">Resize</div>
<div class="percent">50%</div> <div class="percent">50%</div>
<div class="end">End</div> <div class="end">End</div>
packages/overlayscrollbars/tests/browser/lifecycles/structureLifecycle/index.scss
+25 -25
View File
@@ -126,111 +126,111 @@ body {
opacity: 0.3; opacity: 0.3;
} }
.widthAuto, .widthAuto > .container,
.envWidthAuto { .envWidthAuto {
width: auto; width: auto;
display: inline-block; display: inline-block;
} }
#target.widthAuto { .widthAuto > #target {
display: inline-flex; display: inline-flex;
} }
.widthHundred, .widthHundred > .container,
.envWidthHundred { .envWidthHundred {
width: 100%; width: 100%;
} }
.heightAuto, .heightAuto > .container,
.envHeightAuto { .envHeightAuto {
height: auto; height: auto;
} }
.heightHundred, .heightHundred > .container,
.envHeightHundred { .envHeightHundred {
height: 100%; height: 100%;
} }
.width200 { .width200 > .container {
width: 200px; width: 200px;
} }
.height200 { .height200 > .container {
height: 200px; height: 200px;
} }
.floatNone { .floatNone > .container {
float: none; float: none;
} }
.floatLeft { .floatLeft > .container {
float: left; float: left;
} }
.floatRight { .floatRight > .container {
float: right; float: right;
} }
.paddingNone { .paddingNone > .container {
padding: 0; padding: 0;
} }
.paddingSmall { .paddingSmall > .container {
padding: 5px 50px 15px 20px; padding: 5px 50px 15px 20px;
} }
.paddingLarge { .paddingLarge > .container {
padding: 12px 22px 53px 33px; padding: 12px 22px 53px 33px;
} }
.borderNone { .borderNone > .container {
border: none; border: none;
} }
.borderSmall { .borderSmall > .container {
border-color: darkorange; border-color: darkorange;
border-style: solid; border-style: solid;
border-width: 2px 5px 3px 4px; border-width: 2px 5px 3px 4px;
} }
.borderLarge { .borderLarge > .container {
border-color: darkorange; border-color: darkorange;
border-style: solid; border-style: solid;
border-width: 9px 6px 7px 3px; border-width: 9px 6px 7px 3px;
} }
.marginNone { .marginNone > .container {
margin: 0; margin: 0;
} }
.marginSmall { .marginSmall > .container {
margin: 21px 16px 4px 33px; margin: 21px 16px 4px 33px;
} }
.marginLarge { .marginLarge > .container {
margin: 33px 46px 69px 23px; margin: 33px 46px 69px 23px;
} }
.boxSizingBorderBox { .boxSizingBorderBox > .container {
box-sizing: border-box; box-sizing: border-box;
} }
.boxSizingContentBox { .boxSizingContentBox > .container {
box-sizing: content-box; box-sizing: content-box;
} }
.directionLTR { .directionLTR > .container {
direction: ltr; direction: ltr;
} }
.directionRTL { .directionRTL > .container {
direction: rtl; direction: rtl;
} }
.minMaxFixed { .minMaxFixed > .container {
min-height: 180px; min-height: 180px;
min-width: 180px; min-width: 180px;
max-height: 420px; max-height: 420px;
max-width: 420px; max-width: 420px;
} }
.minMaxNone { .minMaxNone > .container {
min-height: 0; min-height: 0;
min-width: 0; min-width: 0;
max-height: none; max-height: none;