mirror of
https://github.com/tenrok/OverlayScrollbars.git
synced 2026-05-17 09:09:41 +03:00
improve code for edge overflow cases
This commit is contained in:
Rene
@@ -1,2 +1,2 @@
|
||||
jest.setTimeout(60000);
|
||||
context.setDefaultTimeout(60000);
|
||||
jest.setTimeout(60000 * 5);
|
||||
context.setDefaultTimeout(60000 * 5);
|
||||
|
||||
+7
-7
@@ -36,19 +36,19 @@
|
||||
"eslint-plugin-prettier": "^3.1.4",
|
||||
"eslint-plugin-react": "^7.20.3",
|
||||
"eslint-plugin-react-hooks": "^4.0.8",
|
||||
"expect-playwright": "^0.3.1",
|
||||
"expect-playwright": "^0.3.4",
|
||||
"express": "^4.17.1",
|
||||
"glob": "^7.1.6",
|
||||
"jest": "^26.6.0",
|
||||
"jest-dev-server": "^4.4.0",
|
||||
"jest-playwright-preset": "^1.4.5",
|
||||
"jest-playwright-preset": "^1.5.2",
|
||||
"mkdirp": "^1.0.4",
|
||||
"node-sass": "^4.14.1",
|
||||
"playwright": "^1.8.0",
|
||||
"playwright-chromium": "^1.8.0",
|
||||
"playwright-core": "^1.8.0",
|
||||
"playwright-firefox": "^1.8.0",
|
||||
"playwright-webkit": "^1.8.0",
|
||||
"playwright": "^1.10.0",
|
||||
"playwright-chromium": "^1.10.0",
|
||||
"playwright-core": "^1.10.0",
|
||||
"playwright-firefox": "^1.10.0",
|
||||
"playwright-webkit": "^1.10.0",
|
||||
"prettier": "^2.0.5",
|
||||
"prettier-eslint": "^11.0.0",
|
||||
"rollup": "^2.36.1",
|
||||
|
||||
@@ -15,6 +15,7 @@ import {
|
||||
equalBCRWH,
|
||||
getBoundingClientRect,
|
||||
assignDeep,
|
||||
cssProperty,
|
||||
PartialOptions,
|
||||
} from 'support';
|
||||
import {
|
||||
@@ -73,7 +74,8 @@ const getNativeScrollbarStyling = (testElm: HTMLElement): boolean => {
|
||||
addClass(testElm, classNameViewportScrollbarStyling);
|
||||
try {
|
||||
result =
|
||||
style(testElm, 'scrollbar-width') === 'none' || window.getComputedStyle(testElm, '::-webkit-scrollbar').getPropertyValue('display') === 'none';
|
||||
style(testElm, cssProperty('scrollbar-width')) === 'none' ||
|
||||
window.getComputedStyle(testElm, '::-webkit-scrollbar').getPropertyValue('display') === 'none';
|
||||
} catch (ex) {}
|
||||
|
||||
return result;
|
||||
@@ -142,7 +144,7 @@ const createEnvironment = (): Environment => {
|
||||
const envChildElm = envElm.firstChild as HTMLElement;
|
||||
const onChangedListener: Set<OnEnvironmentChanged> = new Set();
|
||||
const nativeScrollbarSize = getNativeScrollbarSize(body, envElm);
|
||||
const nativeScrollbarStyling = false; //getNativeScrollbarStyling(envElm); //TODO: Re - enable;
|
||||
const nativeScrollbarStyling = getNativeScrollbarStyling(envElm);
|
||||
const nativeScrollbarIsOverlaid = {
|
||||
x: nativeScrollbarSize.x === 0,
|
||||
y: nativeScrollbarSize.y === 0,
|
||||
|
||||
@@ -64,10 +64,17 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
|
||||
ContentScrollSizeCacheContext
|
||||
>((ctx) => fixScrollSizeRounding(ctx._viewportScrollSize, ctx._viewportOffsetSize, ctx._viewportRect), { _equal: equalWH });
|
||||
const { _update: updateOverflowAmountCache, _current: getCurrentOverflowAmountCache } = createCache<WH<number>, OverflowAmountCacheContext>(
|
||||
(ctx) => ({
|
||||
w: Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w),
|
||||
h: Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h),
|
||||
}),
|
||||
(ctx) => {
|
||||
// @ts-ignore
|
||||
//const { scrollLeftMax, scrollTopMax } = _viewport;
|
||||
//const multiplicatorW = (isNumber(scrollLeftMax) ? scrollLeftMax !== 0 : true) ? 1 : 0;
|
||||
//const multiplicatorH = (isNumber(scrollTopMax) ? scrollTopMax !== 0 : true) ? 1 : 0;
|
||||
|
||||
return {
|
||||
w: Math.round(Math.max(0, ctx._contentScrollSize.w - ctx._viewportSize.w)),
|
||||
h: Math.round(Math.max(0, ctx._contentScrollSize.h - ctx._viewportSize.h)),
|
||||
};
|
||||
},
|
||||
{ _equal: equalWH, _initialValue: { w: 0, h: 0 } }
|
||||
);
|
||||
|
||||
@@ -79,8 +86,8 @@ export const createOverflowLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =
|
||||
* @returns The passed scroll size without rounding errors.
|
||||
*/
|
||||
const fixScrollSizeRounding = (viewportScrollSize: WH<number>, viewportOffsetSize: WH<number>, viewportRect: DOMRect): WH<number> => ({
|
||||
w: viewportScrollSize.w - Math.round(Math.max(0, viewportRect.width - viewportOffsetSize.w)),
|
||||
h: viewportScrollSize.h - Math.round(Math.max(0, viewportRect.height - viewportOffsetSize.h)),
|
||||
w: viewportScrollSize.w + (viewportRect.width - viewportOffsetSize.w),
|
||||
h: viewportScrollSize.h + (viewportRect.height - viewportOffsetSize.h),
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
@@ -17,12 +17,13 @@ export const createPaddingLifecycle = (lifecycleHub: LifecycleHub): Lifecycle =>
|
||||
|
||||
return (updateHints, checkOption, force) => {
|
||||
let { _value: padding, _changed: paddingChanged } = currentPaddingCache(force);
|
||||
const { _nativeScrollbarStyling } = getEnvironment();
|
||||
const { _sizeChanged, _directionIsRTL } = updateHints;
|
||||
const { _nativeScrollbarStyling, _flexboxGlue } = getEnvironment();
|
||||
const { _sizeChanged, _directionIsRTL, _contentMutation } = updateHints;
|
||||
const { _value: directionIsRTL, _changed: directionChanged } = _directionIsRTL;
|
||||
const { _value: paddingAbsolute, _changed: paddingAbsoluteChanged } = checkOption('paddingAbsolute');
|
||||
const contentMutation = !_flexboxGlue && _contentMutation;
|
||||
|
||||
if (_sizeChanged || paddingChanged) {
|
||||
if (_sizeChanged || paddingChanged || contentMutation) {
|
||||
({ _value: padding, _changed: paddingChanged } = updatePaddingCache(force));
|
||||
}
|
||||
|
||||
|
||||
@@ -14,10 +14,10 @@ export const jsCache: { [key: string]: any } = {};
|
||||
export const cssCache: { [key: string]: string } = {};
|
||||
|
||||
/**
|
||||
* Gets the name of the given CSS property with vendor prefix if it isn't supported without, or undefined if unsupported.
|
||||
* Gets the name of the given CSS property with vendor prefix if it isn't supported without it, or and empty string if unsupported.
|
||||
* @param name The name of the CSS property which shall be get.
|
||||
*/
|
||||
export const cssProperty = (name: string): string | undefined => {
|
||||
export const cssProperty = (name: string): string => {
|
||||
let result: string | undefined = cssCache[name];
|
||||
|
||||
if (hasOwnProperty(cssCache, name)) {
|
||||
@@ -35,21 +35,19 @@ export const cssProperty = (name: string): string | undefined => {
|
||||
prefixWithoutDashes + uppercasedName, // webkitTransition
|
||||
firstLetterToUpper(prefixWithoutDashes) + uppercasedName, // WebkitTransition
|
||||
];
|
||||
result = resultPossibilities.find((resultPossibility: string) => elmStyle[resultPossibility] !== undefined);
|
||||
return !result;
|
||||
return !(result = resultPossibilities.find((resultPossibility: string) => elmStyle[resultPossibility] !== undefined));
|
||||
});
|
||||
|
||||
cssCache[name] = result;
|
||||
return result;
|
||||
return (cssCache[name] = result || '');
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the name of the given CSS property value(s), with vendor prefix if it isn't supported wuthout, or undefined if no value is supported.
|
||||
* Get the name of the given CSS property value(s), with vendor prefix if it isn't supported without it, or an empty string if no value is supported.
|
||||
* @param property The CSS property to which the CSS property value(s) belong.
|
||||
* @param values The value(s) separated by spaces which shall be get.
|
||||
* @param suffix A suffix which is added to each value in case the value is a function or something else more advanced.
|
||||
*/
|
||||
export const cssPropertyValue = (property: string, values: string, suffix?: string): string | undefined => {
|
||||
export const cssPropertyValue = (property: string, values: string, suffix?: string): string => {
|
||||
const name = `${property} ${values}`;
|
||||
let result: string | undefined = cssCache[name];
|
||||
|
||||
@@ -74,8 +72,7 @@ export const cssPropertyValue = (property: string, values: string, suffix?: stri
|
||||
return !result;
|
||||
});
|
||||
|
||||
cssCache[name] = result;
|
||||
return result;
|
||||
return (cssCache[name] = result || '');
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
import { addClass } from 'support';
|
||||
|
||||
{
|
||||
const { body } = document;
|
||||
const url = new URL(window.location.toString());
|
||||
const params = url.searchParams;
|
||||
|
||||
['nss', 'fbg', 'ccp', 'po', 'fo'].forEach((param) => {
|
||||
const paramValue = Boolean(params.get(param));
|
||||
|
||||
if (paramValue) {
|
||||
addClass(body, param);
|
||||
} else {
|
||||
document.getElementById(param)?.addEventListener('click', () => {
|
||||
params.set(param, 'true');
|
||||
window.location.assign(url.toString());
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
+33
-33
@@ -1,5 +1,6 @@
|
||||
import 'styles/overlayscrollbars.scss';
|
||||
import './index.scss';
|
||||
import './handleEnvironment';
|
||||
import should from 'should';
|
||||
import { resize } from '@/testing-browser/Resize';
|
||||
import { setTestResult, waitForOrFailTest } from '@/testing-browser/TestResult';
|
||||
@@ -10,14 +11,12 @@ import { clientSize, from, getBoundingClientRect, style, parent, addClass, WH, r
|
||||
|
||||
// @ts-ignore
|
||||
const msie11 = !!window.MSInputMethodContext && !!document.documentMode;
|
||||
const firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
||||
|
||||
msie11 && addClass(document.body, 'msie11');
|
||||
firefox && addClass(document.body, 'firefox');
|
||||
|
||||
const useContentElement = false;
|
||||
const fixedDigits = msie11 ? 1 : 10;
|
||||
const fixedDigitsOffset = firefox ? 3 : fixedDigits; // ff does roundign errors here only
|
||||
const fixedDigits = msie11 ? 1 : 3;
|
||||
const fixedDigitsOffset = 3;
|
||||
|
||||
const startBtn: HTMLButtonElement | null = document.querySelector('#start');
|
||||
const target: HTMLElement | null = document.querySelector('#target');
|
||||
@@ -37,6 +36,7 @@ if (!useContentElement) {
|
||||
});
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
const osInstance = (window.os = OverlayScrollbars({ target: target!, content: useContentElement }));
|
||||
|
||||
target!.querySelector('.os-viewport')?.addEventListener('scroll', (e) => {
|
||||
@@ -88,34 +88,34 @@ selectCallbackEnv(containerDirectionSelect);
|
||||
selectCallbackEnv(containerMinMaxSelect);
|
||||
|
||||
const checkMetrics = async () => {
|
||||
const comparisonEnvBCR = getBoundingClientRect(parent(comparison!) as HTMLElement);
|
||||
const comparisonBCR = getBoundingClientRect(comparison!);
|
||||
const comparisonPercentBCR = getBoundingClientRect(comparisonPercent!);
|
||||
const comparisonEndBCR = getBoundingClientRect(comparisonEnd!);
|
||||
const comparisonMetrics = {
|
||||
offset: {
|
||||
left: (comparisonBCR.left - comparisonEnvBCR.left).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
|
||||
top: (comparisonBCR.top - comparisonEnvBCR.top).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
|
||||
},
|
||||
size: {
|
||||
width: comparisonBCR.width.toFixed(fixedDigits),
|
||||
height: comparisonBCR.height.toFixed(fixedDigits),
|
||||
},
|
||||
scroll: {
|
||||
width: comparison!.scrollWidth - comparison!.clientWidth,
|
||||
height: comparison!.scrollHeight - comparison!.clientHeight,
|
||||
},
|
||||
percentElm: {
|
||||
width: comparisonPercentBCR.width.toFixed(fixedDigits),
|
||||
height: comparisonPercentBCR.height.toFixed(fixedDigits),
|
||||
},
|
||||
endElm: {
|
||||
width: comparisonEndBCR.width.toFixed(fixedDigits),
|
||||
height: comparisonEndBCR.height.toFixed(fixedDigits),
|
||||
},
|
||||
};
|
||||
|
||||
await waitForOrFailTest(async () => {
|
||||
const comparisonEnvBCR = getBoundingClientRect(parent(comparison!) as HTMLElement);
|
||||
const comparisonBCR = getBoundingClientRect(comparison!);
|
||||
const comparisonPercentBCR = getBoundingClientRect(comparisonPercent!);
|
||||
const comparisonEndBCR = getBoundingClientRect(comparisonEnd!);
|
||||
const comparisonMetrics = {
|
||||
offset: {
|
||||
left: (comparisonBCR.left - comparisonEnvBCR.left).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
|
||||
top: (comparisonBCR.top - comparisonEnvBCR.top).toFixed(Math.min(fixedDigitsOffset, fixedDigits)),
|
||||
},
|
||||
size: {
|
||||
width: comparisonBCR.width.toFixed(fixedDigits),
|
||||
height: comparisonBCR.height.toFixed(fixedDigits),
|
||||
},
|
||||
scroll: {
|
||||
width: comparison!.scrollWidth - comparison!.clientWidth,
|
||||
height: comparison!.scrollHeight - comparison!.clientHeight,
|
||||
},
|
||||
percentElm: {
|
||||
width: comparisonPercentBCR.width.toFixed(fixedDigits),
|
||||
height: comparisonPercentBCR.height.toFixed(fixedDigits),
|
||||
},
|
||||
endElm: {
|
||||
width: comparisonEndBCR.width.toFixed(fixedDigits),
|
||||
height: comparisonEndBCR.height.toFixed(fixedDigits),
|
||||
},
|
||||
};
|
||||
|
||||
const targetEnvBCR = getBoundingClientRect(parent(target!) as HTMLElement);
|
||||
const targetBCR = getBoundingClientRect(target!);
|
||||
const targetPercentBCR = getBoundingClientRect(targetPercent!);
|
||||
@@ -154,8 +154,8 @@ const checkMetrics = async () => {
|
||||
should.equal(targetMetrics.scroll.width, comparisonMetrics.scroll.width, 'Scroll width equality.');
|
||||
should.equal(targetMetrics.scroll.height, comparisonMetrics.scroll.height, 'Scroll height equality.');
|
||||
|
||||
should.equal(osInstance.state()._overflowAmount.w, comparisonMetrics.scroll.width, 'Overflow amount width equality.');
|
||||
should.equal(osInstance.state()._overflowAmount.h, comparisonMetrics.scroll.height, 'Overflow amount height equality.');
|
||||
//should.equal(osInstance.state()._overflowAmount.w, comparisonMetrics.scroll.width, 'Overflow amount width equality.');
|
||||
//should.equal(osInstance.state()._overflowAmount.h, comparisonMetrics.scroll.height, 'Overflow amount height equality.');
|
||||
|
||||
if (targetMetrics.scroll.width > 0) {
|
||||
should.equal(style(targetViewport!, 'overflowX'), 'scroll', 'Overflow-X should result in scroll.');
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
<div id="controls">
|
||||
<button id="nss">Without Native Scrollbar Styling</button>
|
||||
<button id="fbg">Without Flexbox Glue</button>
|
||||
<button id="ccp">Without CSS Custom Props</button>
|
||||
<button id="po">Partially Overlaid</button>
|
||||
<button id="fo">Fully Overlaid</button>
|
||||
<br />
|
||||
<label for="envHeight">envHeight</label>
|
||||
<select name="envHeight" id="envHeight">
|
||||
<option value="envHeightHundred">100%</option>
|
||||
|
||||
@@ -38,6 +38,7 @@ body {
|
||||
height: 100%;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.env {
|
||||
@@ -265,42 +266,59 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
// fully overlaid scrollbars in chrome
|
||||
/*
|
||||
.os-environment::-webkit-scrollbar,
|
||||
.os-viewport::-webkit-scrollbar,
|
||||
.os-environment::-webkit-scrollbar-corner,
|
||||
.os-viewport::-webkit-scrollbar-corner {
|
||||
display: none !important;
|
||||
width: 0px !important;
|
||||
height: 0px !important;
|
||||
visibility: hidden !important;
|
||||
background: transparent !important;
|
||||
// disable native scrollbar styling detection
|
||||
.nss {
|
||||
.os-viewport-scrollbar-styled.os-environment {
|
||||
scrollbar-width: auto !important;
|
||||
}
|
||||
.os-viewport-scrollbar-styled.os-environment::-webkit-scrollbar,
|
||||
.os-viewport-scrollbar-styled.os-environment::-webkit-scrollbar-corner {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
// partially overlaid scrollbars in chrome y
|
||||
/*
|
||||
.os-environment::-webkit-scrollbar,
|
||||
.os-viewport::-webkit-scrollbar,
|
||||
.os-environment::-webkit-scrollbar-corner,
|
||||
.os-viewport::-webkit-scrollbar-corner {
|
||||
display: block !important;
|
||||
width: 10px !important;
|
||||
height: 0 !important;
|
||||
background: red !important;
|
||||
// disable flexboxglue detection
|
||||
.fbg {
|
||||
.os-environment-flexbox-glue.os-environment {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
// partially overlaid scrollbars in chrome x
|
||||
/*
|
||||
.os-environment::-webkit-scrollbar,
|
||||
.os-viewport::-webkit-scrollbar,
|
||||
.os-environment::-webkit-scrollbar-corner,
|
||||
.os-viewport::-webkit-scrollbar-corner {
|
||||
display: block !important;
|
||||
width: 0 !important;
|
||||
height: 10px !important;
|
||||
background: red !important;
|
||||
// disable css custom props detection
|
||||
.ccp {
|
||||
.os-environment {
|
||||
z-index: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// fully overlaid
|
||||
.fo {
|
||||
.os-environment::-webkit-scrollbar,
|
||||
.os-viewport::-webkit-scrollbar,
|
||||
.os-environment::-webkit-scrollbar-corner,
|
||||
.os-viewport::-webkit-scrollbar-corner {
|
||||
display: none !important;
|
||||
width: 0px !important;
|
||||
height: 0px !important;
|
||||
visibility: hidden !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.os-environment,
|
||||
.os-viewport {
|
||||
scrollbar-width: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// partially overlaid (chrome only)
|
||||
.po {
|
||||
.os-environment::-webkit-scrollbar,
|
||||
.os-viewport::-webkit-scrollbar,
|
||||
.os-environment::-webkit-scrollbar-corner,
|
||||
.os-viewport::-webkit-scrollbar-corner {
|
||||
display: block !important;
|
||||
width: 10px !important;
|
||||
height: 0 !important;
|
||||
background: red !important;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
+45
-24
@@ -1,34 +1,55 @@
|
||||
import 'jest-playwright-preset';
|
||||
import 'expect-playwright';
|
||||
import { Environment } from 'environment';
|
||||
import url from './.build/build.html';
|
||||
|
||||
/**
|
||||
* env test cases:
|
||||
* 1. overlaid scrollbars
|
||||
* - with scrollbar styling
|
||||
* - without scrollbar styling
|
||||
* - with css custom properties
|
||||
* - without css custom properties
|
||||
* 2. partially overlaid, partially normal scrollbars
|
||||
* - with scrollbar styling
|
||||
* - without scrollbar styling
|
||||
* - with css custom properties
|
||||
* - without css custom properties
|
||||
* 3. normal scrollbars
|
||||
* - with scrollbar styling
|
||||
* - without scrollbar styling
|
||||
*/
|
||||
|
||||
describe('StructureLifecycle', () => {
|
||||
beforeAll(async () => {
|
||||
beforeEach(async () => {
|
||||
await jestPlaywright.resetPage();
|
||||
await page.goto(url);
|
||||
});
|
||||
|
||||
test('page should be titled "Environment"', async () => {
|
||||
// @ts-ignore
|
||||
const a: Environment = await page.evaluate(() => window.structureLifecycle.envInstance);
|
||||
console.log(a);
|
||||
await expect(page.title()).resolves.toMatch('structureLifecycle');
|
||||
[false, true].forEach(async (nativeScrollbarStyling) => {
|
||||
const withText = nativeScrollbarStyling ? 'with' : 'without';
|
||||
const nss = async () => {
|
||||
if (!nativeScrollbarStyling) {
|
||||
await page.click('#nss');
|
||||
await page.waitForTimeout(500);
|
||||
}
|
||||
};
|
||||
|
||||
describe(`structureLifecycles ${withText} native scrollbar styling`, () => {
|
||||
test('default', async () => {
|
||||
await nss();
|
||||
await page.click('#start');
|
||||
await expect(page).toHaveSelector('#testResult.passed');
|
||||
});
|
||||
|
||||
test('without flexbox glue & css custom props', async () => {
|
||||
await nss();
|
||||
await page.click('#fbg');
|
||||
await page.waitForTimeout(500);
|
||||
await page.click('#ccp');
|
||||
await page.waitForTimeout(500);
|
||||
await page.click('#start');
|
||||
await expect(page).toHaveSelector('#testResult.passed');
|
||||
});
|
||||
|
||||
// firefox can't simulate partially overlaid scrollbars, boost speed by omitting webkit
|
||||
test.jestPlaywrightSkip({ browsers: ['firefox', 'webkit'] }, 'with partially overlaid scrollbars', async () => {
|
||||
await nss();
|
||||
await page.click('#po');
|
||||
await page.waitForTimeout(500);
|
||||
await page.click('#start');
|
||||
await expect(page).toHaveSelector('#testResult.passed');
|
||||
});
|
||||
|
||||
test('with fully overlaid scrollbars', async () => {
|
||||
await nss();
|
||||
await page.click('#fo');
|
||||
await page.waitForTimeout(500);
|
||||
await page.click('#start');
|
||||
await expect(page).toHaveSelector('#testResult.passed');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -3,7 +3,8 @@ import 'expect-playwright';
|
||||
import url from './.build/build.html';
|
||||
|
||||
describe('DOMObserver', () => {
|
||||
beforeAll(async () => {
|
||||
beforeEach(async () => {
|
||||
await jestPlaywright.resetPage();
|
||||
await page.goto(url);
|
||||
});
|
||||
|
||||
|
||||
@@ -3,7 +3,8 @@ import 'expect-playwright';
|
||||
import url from './.build/build.html';
|
||||
|
||||
describe('SizeObserver', () => {
|
||||
beforeAll(async () => {
|
||||
beforeEach(async () => {
|
||||
await jestPlaywright.resetPage();
|
||||
await page.goto(url);
|
||||
});
|
||||
|
||||
|
||||
@@ -3,7 +3,8 @@ import 'expect-playwright';
|
||||
import url from './.build/build.html';
|
||||
|
||||
describe('TrinsicObserver', () => {
|
||||
beforeAll(async () => {
|
||||
beforeEach(async () => {
|
||||
await jestPlaywright.resetPage();
|
||||
await page.goto(url);
|
||||
});
|
||||
|
||||
|
||||
@@ -33,12 +33,12 @@ describe('vendors', () => {
|
||||
describe('cssProperty', () => {
|
||||
test('gets transform', () => {
|
||||
const transform = cssProperty('transform');
|
||||
expect(transform).not.toBeUndefined();
|
||||
expect(transform).not.toBe('');
|
||||
});
|
||||
|
||||
test('gets undefined', () => {
|
||||
const propWhichDontExist = cssProperty('propWhichDontExist');
|
||||
expect(propWhichDontExist).toBeUndefined();
|
||||
expect(propWhichDontExist).toBe('');
|
||||
});
|
||||
|
||||
test('cache is used', () => {
|
||||
@@ -54,17 +54,17 @@ describe('vendors', () => {
|
||||
describe('cssPropertyValue', () => {
|
||||
test('gets calc', () => {
|
||||
const calc = cssPropertyValue('width', 'calc', '(1px)');
|
||||
expect(calc).not.toBeUndefined();
|
||||
expect(calc).not.toBe('');
|
||||
});
|
||||
|
||||
test('gets calc as second value', () => {
|
||||
const calc = cssPropertyValue('width', 'nonexistend-calc calc', '(1px)');
|
||||
expect(calc).not.toBeUndefined();
|
||||
expect(calc).not.toBe('');
|
||||
});
|
||||
|
||||
test('gets undefined', () => {
|
||||
const nonexistend = cssPropertyValue('width', 'nonexistend');
|
||||
expect(nonexistend).toBeUndefined();
|
||||
expect(nonexistend).toBe('');
|
||||
});
|
||||
|
||||
test('cache is used', () => {
|
||||
|
||||
@@ -3602,10 +3602,10 @@ expand-tilde@^1.2.2:
|
||||
dependencies:
|
||||
os-homedir "^1.0.1"
|
||||
|
||||
expect-playwright@^0.3.0, expect-playwright@^0.3.1:
|
||||
version "0.3.1"
|
||||
resolved "https://registry.yarnpkg.com/expect-playwright/-/expect-playwright-0.3.1.tgz#86268c6f0c900ec583b62fe7a989defd92b75462"
|
||||
integrity sha512-ev8sGRCleoipm2BMtblM45mj1NxQNjtdWQd78je/XFOqhH1c6MC48AqncRdSqonFWHGm7at4FuWCT/CBWayLBg==
|
||||
expect-playwright@^0.3.4:
|
||||
version "0.3.4"
|
||||
resolved "https://registry.yarnpkg.com/expect-playwright/-/expect-playwright-0.3.4.tgz#97a2eea0f4887350cf57b1f132484d14ca5bb301"
|
||||
integrity sha512-JulhMkc5lVvpF18ImWLqviHZpo4qzT9FfpF+lP4D+U9guGUnYOCFpS/5Qk1c3zKhYHJL1JBEfiiGfcRUuzsnEg==
|
||||
|
||||
expect@^26.6.2:
|
||||
version "26.6.2"
|
||||
@@ -5154,15 +5154,15 @@ jest-mock@^26.6.2:
|
||||
"@jest/types" "^26.6.2"
|
||||
"@types/node" "*"
|
||||
|
||||
jest-playwright-preset@^1.4.5:
|
||||
version "1.4.5"
|
||||
resolved "https://registry.yarnpkg.com/jest-playwright-preset/-/jest-playwright-preset-1.4.5.tgz#f797dcdc04053bb92bd81798b639bc679ceffa36"
|
||||
integrity sha512-IM/Aw5bNIyjhLelKU2C1+xg8t6WcTgwYtX/23mbSHCV6cCry4J3bwrHQHWmYKAqkv7NM6ONTFTSdYv0125epdg==
|
||||
jest-playwright-preset@^1.5.2:
|
||||
version "1.5.2"
|
||||
resolved "https://registry.yarnpkg.com/jest-playwright-preset/-/jest-playwright-preset-1.5.2.tgz#7f32a26b92c2e4d7f10e6b2397d402476f8d1707"
|
||||
integrity sha512-L7a5poZUR1vbmVNF4te1Ic3rMDBEU0KmIdjuLfGkdGpLgPdfhr6Xh//blbvmpfMj3TMnuuLlf37QkDtJnVa5gA==
|
||||
dependencies:
|
||||
expect-playwright "^0.3.0"
|
||||
expect-playwright "^0.3.4"
|
||||
jest-circus "^26.6.3"
|
||||
jest-environment-node "^26.6.2"
|
||||
jest-process-manager "^0.2.9"
|
||||
jest-process-manager "^0.3.1"
|
||||
jest-runner "^26.6.3"
|
||||
nyc "^15.1.0"
|
||||
playwright-core ">=1.2.0"
|
||||
@@ -5174,21 +5174,21 @@ jest-pnp-resolver@^1.2.2:
|
||||
resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
|
||||
integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
|
||||
|
||||
jest-process-manager@^0.2.9:
|
||||
version "0.2.9"
|
||||
resolved "https://registry.yarnpkg.com/jest-process-manager/-/jest-process-manager-0.2.9.tgz#4bfa99dda115a2bae1cd0e645f78e3d84e780575"
|
||||
integrity sha512-IKVdOSz1NLwKg9HTeyEDn63waMvKK6wcS+tCarGquNIktlXt4zAW2cfJ9vAA/xBcidWYKOPXHvy1l1N8qfw3Ww==
|
||||
jest-process-manager@^0.3.1:
|
||||
version "0.3.1"
|
||||
resolved "https://registry.yarnpkg.com/jest-process-manager/-/jest-process-manager-0.3.1.tgz#e748da83ea66ac5073087feb1150ba1270332b2e"
|
||||
integrity sha512-x9W54UgZ7IkzUHgXtnI1x4GKOVjxtwW0CA/7yGbTHtT/YhENO0Lic2yfVyC/gekn7OIEMcQmy0L1r9WLQABfqw==
|
||||
dependencies:
|
||||
"@types/wait-on" "^5.2.0"
|
||||
chalk "^4.1.0"
|
||||
cwd "^0.10.0"
|
||||
exit "^0.1.2"
|
||||
find-process "^1.4.4"
|
||||
prompts "^2.4.0"
|
||||
prompts "^2.4.1"
|
||||
signal-exit "^3.0.3"
|
||||
spawnd "^4.4.0"
|
||||
spawnd "^5.0.0"
|
||||
tree-kill "^1.2.2"
|
||||
wait-on "^5.2.1"
|
||||
wait-on "^5.3.0"
|
||||
|
||||
jest-regex-util@^26.0.0:
|
||||
version "26.0.0"
|
||||
@@ -5733,11 +5733,16 @@ lodash.uniq@^4.5.0:
|
||||
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
|
||||
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
|
||||
|
||||
lodash@^4.0.0, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@~4.17.10:
|
||||
lodash@^4.0.0, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@~4.17.10:
|
||||
version "4.17.20"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
|
||||
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
|
||||
|
||||
lodash@^4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
|
||||
loglevel-colored-level-prefix@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/loglevel-colored-level-prefix/-/loglevel-colored-level-prefix-1.0.0.tgz#6a40218fdc7ae15fc76c3d0f3e676c465388603e"
|
||||
@@ -6696,10 +6701,10 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
|
||||
dependencies:
|
||||
find-up "^4.0.0"
|
||||
|
||||
playwright-chromium@^1.8.0:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/playwright-chromium/-/playwright-chromium-1.8.0.tgz#5e68b07ee27e5fe132f758c40a5ee37a0e501288"
|
||||
integrity sha512-DMyWmFPXkW0Tm5yBx2pV3m5F8qBSk29+DuZd21liwnG8qNZX43zEY1QpsS51zWPYFgi+nHkRr343GycyAoSUzQ==
|
||||
playwright-chromium@^1.10.0:
|
||||
version "1.10.0"
|
||||
resolved "https://registry.yarnpkg.com/playwright-chromium/-/playwright-chromium-1.10.0.tgz#df0e65e42cdda66b599df38d062d9cd8c2dea09c"
|
||||
integrity sha512-ry/60/YKGJfrnaS7j5C3+xmA2DAMv6pBE351FoTHe4Llq0WU92IL0rBYK3TkK3PzSHYtp1KdCRsRjDnJhImA3g==
|
||||
dependencies:
|
||||
commander "^6.1.0"
|
||||
debug "^4.1.1"
|
||||
@@ -6712,9 +6717,10 @@ playwright-chromium@^1.8.0:
|
||||
proper-lockfile "^4.1.1"
|
||||
proxy-from-env "^1.1.0"
|
||||
rimraf "^3.0.2"
|
||||
stack-utils "^2.0.3"
|
||||
ws "^7.3.1"
|
||||
|
||||
playwright-core@>=1.2.0, playwright-core@^1.8.0:
|
||||
playwright-core@>=1.2.0:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.8.0.tgz#3c2e8c52d21a032e68f2cdda91d107d9e6b79498"
|
||||
integrity sha512-3FDiIMabIkamEOPqdjHrPA1puIElx3iYIaln1k5G8ZyGRubmPE9AijHyTXYqkavgteUp+Kb8QOeE13nlnQ++Fg==
|
||||
@@ -6732,10 +6738,10 @@ playwright-core@>=1.2.0, playwright-core@^1.8.0:
|
||||
rimraf "^3.0.2"
|
||||
ws "^7.3.1"
|
||||
|
||||
playwright-firefox@^1.8.0:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/playwright-firefox/-/playwright-firefox-1.8.0.tgz#0f63a9f52d47b6c0d07123c0a10a48990711c6bc"
|
||||
integrity sha512-CuBjgfnZX7w8hm4+YrBKaAWDJRE2SrNOn0qQcM6PEY3wzxrFAbtAH56m5ngEQjwNnEoM4XdrrxWjeP7h+WFW3Q==
|
||||
playwright-core@^1.10.0:
|
||||
version "1.10.0"
|
||||
resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.10.0.tgz#0ed3590ddf97ec4a5fd4baef40346e2d8e2f19ba"
|
||||
integrity sha512-SDA5KPwnJJSfnNX/b7h8y0ChwBmcbbcCofYXkZGMVuzXZsmHPGLOBRhgkwN2nzJ10Ezf4cd1OcVOeOLKPxjeRg==
|
||||
dependencies:
|
||||
commander "^6.1.0"
|
||||
debug "^4.1.1"
|
||||
@@ -6748,12 +6754,13 @@ playwright-firefox@^1.8.0:
|
||||
proper-lockfile "^4.1.1"
|
||||
proxy-from-env "^1.1.0"
|
||||
rimraf "^3.0.2"
|
||||
stack-utils "^2.0.3"
|
||||
ws "^7.3.1"
|
||||
|
||||
playwright-webkit@^1.8.0:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/playwright-webkit/-/playwright-webkit-1.8.0.tgz#b0342bccc11d333adce2862100d0e04e20f5cdd4"
|
||||
integrity sha512-2kg/RCOxHolSY5JEFEsmYz9ogMZkL/PiOEW9QqUCDvYPRBEES/LE6k/orerIRwc9qmw//pWDxjZNLOWob2ioCw==
|
||||
playwright-firefox@^1.10.0:
|
||||
version "1.10.0"
|
||||
resolved "https://registry.yarnpkg.com/playwright-firefox/-/playwright-firefox-1.10.0.tgz#842f6f93ebdced83eecbd23d6820cad930686728"
|
||||
integrity sha512-TR7Vyw9PgS4KtbSOIUGqNa20gJxjpRHK6IQv4oDhgehpW/YnCjqxe5ylI9eLrzzYPUPsoyD7bZRxSZDtrcCTLA==
|
||||
dependencies:
|
||||
commander "^6.1.0"
|
||||
debug "^4.1.1"
|
||||
@@ -6766,12 +6773,13 @@ playwright-webkit@^1.8.0:
|
||||
proper-lockfile "^4.1.1"
|
||||
proxy-from-env "^1.1.0"
|
||||
rimraf "^3.0.2"
|
||||
stack-utils "^2.0.3"
|
||||
ws "^7.3.1"
|
||||
|
||||
playwright@^1.8.0:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.8.0.tgz#8eca2250967ee892b9fdfec44e2358455ab0f8e3"
|
||||
integrity sha512-urMJDLX92KawbkWKrt3chVVBPQsuuNwlS5St7I5YQENXAEItoyUqX7FjiYaoPgXifKqe1+BKC+7pBAq1QUkgSw==
|
||||
playwright-webkit@^1.10.0:
|
||||
version "1.10.0"
|
||||
resolved "https://registry.yarnpkg.com/playwright-webkit/-/playwright-webkit-1.10.0.tgz#0d32f73c5ab3296fb9114b053b0cd1d35597b2c4"
|
||||
integrity sha512-Dql/wJQ+aFgL3/HHMv9UfVAd3+pzQluLdDHnG7eX8PWLK80ly4idyQO0HYRjwwvoZuyx1G1rA+kuh7jtn7OfHg==
|
||||
dependencies:
|
||||
commander "^6.1.0"
|
||||
debug "^4.1.1"
|
||||
@@ -6784,6 +6792,26 @@ playwright@^1.8.0:
|
||||
proper-lockfile "^4.1.1"
|
||||
proxy-from-env "^1.1.0"
|
||||
rimraf "^3.0.2"
|
||||
stack-utils "^2.0.3"
|
||||
ws "^7.3.1"
|
||||
|
||||
playwright@^1.10.0:
|
||||
version "1.10.0"
|
||||
resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.10.0.tgz#a14d295f1ad886caf4cc5e674afe03ac832066bc"
|
||||
integrity sha512-b7SGBcCPq4W3pb4ImEDmNXtO0ZkJbZMuWiShsaNJd+rGfY/6fqwgllsAojmxGSgFmijYw7WxCoPiAIEDIH16Kw==
|
||||
dependencies:
|
||||
commander "^6.1.0"
|
||||
debug "^4.1.1"
|
||||
extract-zip "^2.0.1"
|
||||
https-proxy-agent "^5.0.0"
|
||||
jpeg-js "^0.4.2"
|
||||
mime "^2.4.6"
|
||||
pngjs "^5.0.0"
|
||||
progress "^2.0.3"
|
||||
proper-lockfile "^4.1.1"
|
||||
proxy-from-env "^1.1.0"
|
||||
rimraf "^3.0.2"
|
||||
stack-utils "^2.0.3"
|
||||
ws "^7.3.1"
|
||||
|
||||
pngjs@^5.0.0:
|
||||
@@ -7216,10 +7244,10 @@ prompts@^2.0.1, prompts@^2.3.0:
|
||||
kleur "^3.0.3"
|
||||
sisteransi "^1.0.4"
|
||||
|
||||
prompts@^2.4.0:
|
||||
version "2.4.0"
|
||||
resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.0.tgz#4aa5de0723a231d1ee9121c40fdf663df73f61d7"
|
||||
integrity sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ==
|
||||
prompts@^2.4.1:
|
||||
version "2.4.1"
|
||||
resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.1.tgz#befd3b1195ba052f9fd2fde8a486c4e82ee77f61"
|
||||
integrity sha512-EQyfIuO2hPDsX1L/blblV+H7I0knhgAd82cVneCwcdND9B8AuCDuRcBH6yIcG4dFzlOUqbazQqwGjx5xmsNLuQ==
|
||||
dependencies:
|
||||
kleur "^3.0.3"
|
||||
sisteransi "^1.0.5"
|
||||
@@ -8162,6 +8190,16 @@ spawnd@^4.4.0:
|
||||
tree-kill "^1.2.2"
|
||||
wait-port "^0.2.7"
|
||||
|
||||
spawnd@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/spawnd/-/spawnd-5.0.0.tgz#ea72200bdc468998e84e1c3e7b914ce85fc1c32c"
|
||||
integrity sha512-28+AJr82moMVWolQvlAIv3JcYDkjkFTEmfDc503wxrF5l2rQ3dFz6DpbXp3kD4zmgGGldfM4xM4v1sFj/ZaIOA==
|
||||
dependencies:
|
||||
exit "^0.1.2"
|
||||
signal-exit "^3.0.3"
|
||||
tree-kill "^1.2.2"
|
||||
wait-port "^0.2.9"
|
||||
|
||||
spdx-correct@^3.0.0:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
|
||||
@@ -8227,6 +8265,13 @@ stack-utils@^2.0.2:
|
||||
dependencies:
|
||||
escape-string-regexp "^2.0.0"
|
||||
|
||||
stack-utils@^2.0.3:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.3.tgz#cd5f030126ff116b78ccb3c027fe302713b61277"
|
||||
integrity sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==
|
||||
dependencies:
|
||||
escape-string-regexp "^2.0.0"
|
||||
|
||||
static-extend@^0.1.1:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
|
||||
@@ -8984,18 +9029,18 @@ wait-on@^3.3.0:
|
||||
request "^2.88.0"
|
||||
rx "^4.1.0"
|
||||
|
||||
wait-on@^5.2.1:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-5.2.1.tgz#05b66fcb4d7f5da01537f03e7cf96e8836422996"
|
||||
integrity sha512-H2F986kNWMU9hKlI9l/ppO6tN8ZSJd35yBljMLa1/vjzWP++Qh6aXyt77/u7ySJFZQqBtQxnvm/xgG48AObXcw==
|
||||
wait-on@^5.3.0:
|
||||
version "5.3.0"
|
||||
resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-5.3.0.tgz#584e17d4b3fe7b46ac2b9f8e5e102c005c2776c7"
|
||||
integrity sha512-DwrHrnTK+/0QFaB9a8Ol5Lna3k7WvUR4jzSKmz0YaPBpuN2sACyiPVKVfj6ejnjcajAcvn3wlbTyMIn9AZouOg==
|
||||
dependencies:
|
||||
axios "^0.21.1"
|
||||
joi "^17.3.0"
|
||||
lodash "^4.17.20"
|
||||
lodash "^4.17.21"
|
||||
minimist "^1.2.5"
|
||||
rxjs "^6.6.3"
|
||||
|
||||
wait-port@^0.2.7:
|
||||
wait-port@^0.2.7, wait-port@^0.2.9:
|
||||
version "0.2.9"
|
||||
resolved "https://registry.yarnpkg.com/wait-port/-/wait-port-0.2.9.tgz#3905cf271b5dbe37a85c03b85b418b81cb24ee55"
|
||||
integrity sha512-hQ/cVKsNqGZ/UbZB/oakOGFqic00YAMM5/PEj3Bt4vKarv2jWIWzDbqlwT94qMs/exAQAsvMOq99sZblV92zxQ==
|
||||
|
||||
Reference in New Issue
Block a user