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

visualize metrics

Browse Source
This commit is contained in:
Rene Haas
2022-06-29 14:14:50 +02:00
parent 948560a71f
commit 8a189da244
3 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/overlayscrollbars/tests/playwright/lifecycles/structureLifecycle/index.browser.ts
+20 -10
View File
@@ -54,7 +54,7 @@ interface CheckComparisonObj {
const isFractionalPixelRatio = () => window.devicePixelRatio % 1 !== 0; const isFractionalPixelRatio = () => window.devicePixelRatio % 1 !== 0;
const getMetrics = (elm: HTMLElement): Metrics => { const getMetrics = (elm: HTMLElement): Metrics => {
const rounding = isFractionalPixelRatio() ? Math.round : (num: number) => num; // const rounding = isFractionalPixelRatio() ? Math.round : (num: number) => num;
const elmIsTarget = elm === target; const elmIsTarget = elm === target;
const comparisonEnvBCR = getBoundingClientRect(parent(elm!) as HTMLElement); const comparisonEnvBCR = getBoundingClientRect(parent(elm!) as HTMLElement);
const comparisonBCR = getBoundingClientRect(elm!); const comparisonBCR = getBoundingClientRect(elm!);
@@ -80,30 +80,38 @@ const getMetrics = (elm: HTMLElement): Metrics => {
}; };
}; };
return { const results = {
offset: { offset: {
left: rounding(comparisonBCR.left - comparisonEnvBCR.left).toFixed( left: (comparisonBCR.left - comparisonEnvBCR.left).toFixed(
Math.min(fixedDigitsOffset, fixedDigits) Math.min(fixedDigitsOffset, fixedDigits)
), ),
top: rounding(comparisonBCR.top - comparisonEnvBCR.top).toFixed( top: (comparisonBCR.top - comparisonEnvBCR.top).toFixed(
Math.min(fixedDigitsOffset, fixedDigits) Math.min(fixedDigitsOffset, fixedDigits)
), ),
}, },
size: { size: {
width: rounding(comparisonBCR.width).toFixed(fixedDigits), width: comparisonBCR.width.toFixed(fixedDigits),
height: rounding(comparisonBCR.height).toFixed(fixedDigits), height: comparisonBCR.height.toFixed(fixedDigits),
}, },
scroll: elmIsTarget ? scrollMeasure(targetViewport!) : scrollMeasure(comparison!), scroll: elmIsTarget ? scrollMeasure(targetViewport!) : scrollMeasure(comparison!),
hasOverflow: elmIsTarget ? hasOverflow(targetViewport!) : hasOverflow(comparison!), hasOverflow: elmIsTarget ? hasOverflow(targetViewport!) : hasOverflow(comparison!),
percentElm: { percentElm: {
width: rounding(comparisonPercentBCR.width).toFixed(fixedDigits), width: comparisonPercentBCR.width.toFixed(fixedDigits),
height: rounding(comparisonPercentBCR.height).toFixed(fixedDigits), height: comparisonPercentBCR.height.toFixed(fixedDigits),
}, },
endElm: { endElm: {
width: rounding(comparisonEndBCR.width).toFixed(fixedDigits), width: comparisonEndBCR.width.toFixed(fixedDigits),
height: rounding(comparisonEndBCR.height).toFixed(fixedDigits), height: comparisonEndBCR.height.toFixed(fixedDigits),
}, },
}; };
if (elmIsTarget) {
targetMetrics!.textContent = JSON.stringify(results, null, 2);
} else {
comparisonMetrics!.textContent = JSON.stringify(results, null, 2);
}
return results;
}; };
const metricsDimensionsEqual = (a: Metrics, b: Metrics) => { const metricsDimensionsEqual = (a: Metrics, b: Metrics) => {
@@ -134,7 +142,9 @@ const fractionalPixelRatioTollerance = 2; // nss=true && any overlaid ? 2 : 1;
const startBtn: HTMLButtonElement | null = document.querySelector('#start'); const startBtn: HTMLButtonElement | null = document.querySelector('#start');
const target: HTMLElement | null = document.querySelector('#target'); const target: HTMLElement | null = document.querySelector('#target');
const targetMetrics: HTMLElement | null = document.querySelector('#targetMetrics');
const comparison: HTMLElement | null = document.querySelector('#comparison'); const comparison: HTMLElement | null = document.querySelector('#comparison');
const comparisonMetrics: HTMLElement | null = document.querySelector('#comparisonMetrics');
const targetResize: HTMLElement | null = document.querySelector('#target .resize'); const targetResize: HTMLElement | null = document.querySelector('#target .resize');
const comparisonResize: HTMLElement | null = document.querySelector('#comparison .resize'); const comparisonResize: HTMLElement | null = document.querySelector('#comparison .resize');
const targetPercent: HTMLElement | null = document.querySelector('#target .percent'); const targetPercent: HTMLElement | null = document.querySelector('#target .percent');
packages/overlayscrollbars/tests/playwright/lifecycles/structureLifecycle/index.html
+2
View File
@@ -81,6 +81,7 @@
<div class="end">End</div> <div class="end">End</div>
</div> </div>
</div> </div>
<pre id="targetMetrics" class="metrics"></pre>
</div> </div>
<div class="column"> <div class="column">
<div class="env"> <div class="env">
@@ -90,6 +91,7 @@
<div class="end">End</div> <div class="end">End</div>
</div> </div>
</div> </div>
<pre id="comparisonMetrics" class="metrics"></pre>
</div> </div>
</div> </div>
</div> </div>
packages/overlayscrollbars/tests/playwright/lifecycles/structureLifecycle/index.scss
+18
View File
@@ -39,6 +39,24 @@ body {
font-size: 0; font-size: 0;
line-height: 0; line-height: 0;
flex: none; flex: none;
position: relative;
}
.metrics {
position: absolute;
top: 0;
right: 0;
font-size: initial;
line-height: initial;
&:hover {
background: #fff;
}
}
#comparisonMetrics {
left: 0;
right: auto;
} }
.env { .env {