diff --git a/.changeset/slimy-cows-skip.md b/.changeset/slimy-cows-skip.md new file mode 100644 index 0000000000..f55dcba070 --- /dev/null +++ b/.changeset/slimy-cows-skip.md @@ -0,0 +1,9 @@ +--- +"@lynx-js/web-elements": minor +--- + +feat: reimplement `XFoldViewNg` scrolling using CSS transforms and custom scroll handling, updating related events, styles, and tests. + +this breaks https://github.com/lynx-family/lynx-stack/pull/878 + +The position:fixed elements in x-foldview-header-ng and x-foldview-slot-ng will be affected. diff --git a/packages/web-platform/web-elements/rsbuild.config.ts b/packages/web-platform/web-elements/rsbuild.config.ts index 1e9cc15e9b..5515734369 100644 --- a/packages/web-platform/web-elements/rsbuild.config.ts +++ b/packages/web-platform/web-elements/rsbuild.config.ts @@ -11,6 +11,7 @@ export default defineConfig({ output: { assetPrefix: 'auto', polyfill: 'off', + overrideBrowserslist: ['last 1 Chrome versions'], distPath: { root: 'www', css: '.', diff --git a/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.ts b/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.ts index d6cd7cac66..65db470baa 100644 --- a/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.ts +++ b/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewHeaderNg.ts @@ -5,9 +5,8 @@ */ import { Component } from '../../element-reactive/index.js'; import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js'; -import { resizeObserver, type XFoldviewNg } from './XFoldviewNg.js'; -import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js'; import { LinearContainer } from '../../compat/index.js'; +import { updateHeaderHeight, XFoldviewNg } from './XFoldviewNg.js'; @Component( 'x-foldview-header-ng', @@ -17,19 +16,34 @@ import { LinearContainer } from '../../compat/index.js'; ], ) export class XFoldviewHeaderNg extends HTMLElement { - #parentResizeObserver: ResizeObserver | undefined = undefined; + #resizeObserver?: ResizeObserver; + connectedCallback() { - const parentElement = getCombinedDirectParentElement( - this, - 'X-FOLDVIEW-NG', - ); - this.#parentResizeObserver = parentElement?.[resizeObserver]; - this.#parentResizeObserver?.observe(this); + this.#resizeObserver = new ResizeObserver((entries) => { + for (const entry of entries) { + this.#updateParent(entry.contentRect.height); + } + }); + this.#resizeObserver.observe(this); + this.#updateParent(this.clientHeight); + } + + disconnectedCallback() { + this.#resizeObserver?.disconnect(); + this.#resizeObserver = undefined; } - dispose() { - this.#parentResizeObserver?.unobserve( - this, - ); + #updateParent(height: number) { + let parent = this.parentElement; + while (parent) { + if (parent instanceof XFoldviewNg) { + parent[updateHeaderHeight](height); + break; + } + if (parent.tagName !== 'LYNX-WRAPPER') { + break; + } + parent = parent.parentElement; + } } } diff --git a/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNg.ts b/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNg.ts index 10f4482bd8..255f38360f 100644 --- a/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNg.ts +++ b/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNg.ts @@ -6,57 +6,108 @@ import { Component } from '../../element-reactive/index.js'; import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js'; import { XFoldviewNgEvents } from './XFoldviewNgEvents.js'; +import { XFoldviewNgTouchEventsHandler } from './XFoldviewNgTouchEventsHandler.js'; import { scrollContainerDom } from '../common/constants.js'; -import type { XFoldviewSlotNg } from './XFoldviewSlotNg.js'; import { LinearContainer } from '../../compat/index.js'; -export const scrollableLength = Symbol('scrollableLength'); export const isHeaderShowing = Symbol('isHeaderShowing'); -export const resizeObserver = Symbol('resizeObserver'); -export const slotKid = Symbol('slotKid'); +export const updateHeaderHeight = Symbol('updateHeaderHeight'); +export const updateToolbarHeight = Symbol('updateToolbarHeight'); +export const scrollCallbacks = Symbol('scrollCallbacks'); @Component('x-foldview-ng', [ LinearContainer, CommonEventsAndMethods, XFoldviewNgEvents, + XFoldviewNgTouchEventsHandler, ]) export class XFoldviewNg extends HTMLElement { static readonly notToFilterFalseAttributes = new Set(['scroll-enable']); - [slotKid]?: XFoldviewSlotNg; - [resizeObserver]?: ResizeObserver = new ResizeObserver((resizeEntries) => { - for (const resize of resizeEntries) { - if (resize.target.tagName === 'X-FOLDVIEW-HEADER-NG') { - this.#headerHeight = resize.contentRect.height; - } else if (resize.target.tagName === 'X-FOLDVIEW-TOOLBAR-NG') { - this.#toolbarHeight = resize.contentRect.height; - } - } - if (this[slotKid]) { - this[slotKid].style.top = `${this.#headerHeight - this.#toolbarHeight}px`; - } - }); #headerHeight: number = 0; #toolbarHeight: number = 0; + [scrollCallbacks]: Set<() => void> = new Set(); + + [updateHeaderHeight](height: number) { + this.#headerHeight = height; + this.style.setProperty( + '--foldview-scroll-height', + this.scrollHeight + 'px', + ); + } - get [scrollableLength](): number { + [updateToolbarHeight](height: number) { + this.#toolbarHeight = height; + this.style.setProperty( + '--foldview-scroll-height', + this.scrollHeight + 'px', + ); + } + + override get scrollHeight(): number { return this.#headerHeight - this.#toolbarHeight; } get [isHeaderShowing](): boolean { // This behavior cannot be reproduced in the current test, but can be reproduced in Android WebView - return this[scrollableLength] - this.scrollTop >= 1; + return this.scrollHeight - this.scrollTop >= 1; } + get scrollableLength(): number { + return this.scrollHeight; + } + + #scrollTop: number = 0; + override get scrollTop() { - return super.scrollTop; + return this.#scrollTop; } override set scrollTop(value: number) { - if (value > this[scrollableLength]) { - value = this[scrollableLength]; - } else if (value < 0) { - value = 0; + const maxScroll = Math.max(this.scrollHeight, 0); + value = Math.max(0, Math.min(value, maxScroll)); + if (this.#scrollTop === value) { + return; + } + this.#scrollTop = value; + this.style.setProperty( + '--foldview-scroll-top', + (0 - value).toString() + 'px', + ); + this.dispatchEvent(new Event('scroll')); + for (const callback of this[scrollCallbacks]) { + callback(); + } + } + + override scrollTo(options?: ScrollToOptions): void; + override scrollTo(x: number, y: number): void; + override scrollTo(arg1?: any, arg2?: any): void { + if (typeof arg1 === 'object') { + const { top, behavior } = arg1; + if (typeof top === 'number') { + if (behavior === 'smooth') { + // TODO: implement smooth scroll if needed, for now just instant + this.scrollTop = top; + } else { + this.scrollTop = top; + } + } + } else if (typeof arg2 === 'number') { + this.scrollTop = arg2; + } + } + + override scrollBy(options?: ScrollToOptions): void; + override scrollBy(x: number, y: number): void; + override scrollBy(arg1?: any, arg2?: any): void { + if (typeof arg1 === 'object') { + const { top, behavior } = arg1; + this.scrollTo({ + top: (typeof top === 'number' ? top : 0) + this.scrollTop, + behavior, + }); + } else { + this.scrollTo(0, this.scrollTop + (arg2 || 0)); } - super.scrollTop = value; } setFoldExpanded(params: { offset: string; smooth: boolean }) { @@ -71,9 +122,4 @@ export class XFoldviewNg extends HTMLElement { get [scrollContainerDom]() { return this; } - - disconnectedCallback() { - this[resizeObserver]?.disconnect(); - this[resizeObserver] = undefined; - } } diff --git a/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNgEvents.ts b/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNgEvents.ts index 66233f6ae6..155cbc7e34 100644 --- a/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNgEvents.ts +++ b/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNgEvents.ts @@ -9,7 +9,7 @@ import { registerEventEnableStatusChangeHandler, } from '../../element-reactive/index.js'; import { commonComponentEventSetting } from '../common/commonEventInitConfiguration.js'; -import { scrollableLength, type XFoldviewNg } from './XFoldviewNg.js'; +import { type XFoldviewNg } from './XFoldviewNg.js'; export class XFoldviewNgEvents implements InstanceType> @@ -46,7 +46,7 @@ export class XFoldviewNgEvents scrollLength > this.#granularity || this.#dom.scrollTop === 0 || Math.abs( - this.#dom.scrollHeight - this.#dom.clientHeight - this.#dom.scrollTop, + this.#dom.scrollHeight - this.#dom.scrollTop, ) <= 1 ) { this.#pervScroll = currentScrollTop; @@ -55,7 +55,7 @@ export class XFoldviewNgEvents ...commonComponentEventSetting, detail: { offset: currentScrollTop, - height: this.#dom[scrollableLength], + height: this.#dom.scrollableLength, }, }), ); diff --git a/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.ts b/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNgTouchEventsHandler.ts similarity index 72% rename from packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.ts rename to packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNgTouchEventsHandler.ts index 416bdcb33b..95b5a5c5e0 100644 --- a/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.ts +++ b/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewNgTouchEventsHandler.ts @@ -5,21 +5,19 @@ */ import type { AttributeReactiveClass } from '../../element-reactive/index.js'; import { isHeaderShowing, type XFoldviewNg } from './XFoldviewNg.js'; -import type { XFoldviewSlotNg } from './XFoldviewSlotNg.js'; -export class XFoldviewSlotNgTouchEventsHandler - implements InstanceType> +export class XFoldviewNgTouchEventsHandler + implements InstanceType> { - #parentScrollTop: number = 0; #childrenElemsntsScrollTop: WeakMap = new WeakMap(); #elements?: Element[]; - #previousPageY: number = 0; - #previousPageX: number = 0; + #previousClientY: number = 0; + #previousClientX: number = 0; #scrollingVertically: boolean | null = null; #currentScrollingElement?: Element; #deltaY: number = 0; - #dom: XFoldviewSlotNg; + #dom: XFoldviewNg; static observedAttributes = []; - constructor(dom: XFoldviewSlotNg) { + constructor(dom: XFoldviewNg) { this.#dom = dom; this.#dom.addEventListener('touchmove', this.#handleTouch, { @@ -82,15 +80,15 @@ export class XFoldviewSlotNgTouchEventsHandler } #handleTouch = (event: TouchEvent) => { - const parentElement = this.#getParentElement(); - if (!parentElement) { + if (this.#dom.getAttribute('scroll-enable') === 'false') { return; } + const touch = event.touches.item(0)!; - const { pageY, pageX } = touch; - const deltaY = this.#previousPageY! - pageY; + const { clientX, clientY } = touch; + const deltaY = this.#previousClientY! - clientY; if (this.#scrollingVertically === null) { - const deltaX = this.#previousPageX! - pageX; + const deltaX = this.#previousClientX! - clientX; this.#scrollingVertically = Math.abs(deltaY) > Math.abs(deltaX); } if (this.#scrollingVertically === false) { @@ -99,13 +97,12 @@ export class XFoldviewSlotNgTouchEventsHandler if (event.cancelable) { event.preventDefault(); } - this.#handleScrollDelta(deltaY, parentElement); - this.#previousPageY = pageY; + this.#handleScrollDelta(deltaY); + this.#previousClientY = clientY; }; #handleWheel = (event: WheelEvent) => { - const parentElement = this.#getParentElement(); - if (!parentElement) { + if (this.#dom.getAttribute('scroll-enable') === 'false') { return; } if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) { @@ -122,7 +119,6 @@ export class XFoldviewSlotNgTouchEventsHandler e => this.#dom.contains(e), ); this.#elements = [...new Set([...pathElements, ...pointElements])]; - this.#parentScrollTop = parentElement.scrollTop; if (this.#elements) { for (const element of this.#elements) { this.#childrenElemsntsScrollTop.set(element, element.scrollTop); @@ -131,24 +127,28 @@ export class XFoldviewSlotNgTouchEventsHandler if (event.cancelable) { event.preventDefault(); } - this.#handleScrollDelta(event.deltaY, parentElement); + this.#handleScrollDelta(event.deltaY); }; - #getParentElement(): XFoldviewNg | void { - const parentElement = this.#dom.parentElement; - if (parentElement && parentElement.tagName === 'X-FOLDVIEW-NG') { - return parentElement as XFoldviewNg; - } - } + // Removed #getParentElement #touchStart = (event: TouchEvent) => { - const { pageX, pageY } = event.touches.item(0)!; - this.#elements = document.elementsFromPoint(pageX, pageY).filter(e => - this.#dom.contains(e) && e !== this.#dom + const { clientX, clientY } = event.touches.item(0)!; + // For nested foldviews, we only handle if this foldview is the closest one + const pathElements = event.composedPath(); + const closestFoldview = pathElements.find(el => + el instanceof Element && el.tagName === 'X-FOLDVIEW-NG' ); - this.#previousPageY = pageY; - this.#previousPageX = pageX; - this.#parentScrollTop = this.#getParentElement()?.scrollTop ?? 0; + if (closestFoldview !== this.#dom) { + this.#elements = []; + return; + } + + this.#elements = document.elementsFromPoint(clientX, clientY).filter(e => + this.#dom.contains(e) && this.#dom !== e + ); + this.#previousClientY = clientY; + this.#previousClientX = clientX; for (const element of this.#elements) { this.#childrenElemsntsScrollTop.set(element, element.scrollTop); } @@ -159,10 +159,9 @@ export class XFoldviewSlotNgTouchEventsHandler #touchEnd = () => { this.#scrollingVertically = null; if (this.#currentScrollingElement) { - const parentElement = this.#getParentElement(); if ( - this.#currentScrollingElement === parentElement - && !parentElement[isHeaderShowing] + this.#currentScrollingElement === this.#dom + && !this.#dom[isHeaderShowing] ) { return; } @@ -175,24 +174,18 @@ export class XFoldviewSlotNgTouchEventsHandler #handleScrollDelta( deltaY: number, - parentElement: XFoldviewNg, ) { const scrollableKidY = this.#getTheMostScrollableKid(deltaY); if ( - (parentElement[isHeaderShowing] && deltaY > 0 + (this.#dom[isHeaderShowing] && deltaY > 0 || (deltaY < 0 && !scrollableKidY)) // deltaY > 0: swipe up (folding header) // scroll the foldview if its scrollable - || (!parentElement[isHeaderShowing] && !scrollableKidY) + || (!this.#dom[isHeaderShowing] && !scrollableKidY) // all sub doms are scrolled ) { - parentElement.scrollBy({ - top: deltaY, - behavior: 'smooth', - }); - this.#parentScrollTop += deltaY; - parentElement.scrollTop = this.#parentScrollTop; - this.#currentScrollingElement = parentElement; + this.#dom.scrollTop += deltaY; + this.#currentScrollingElement = this.#dom; } else if (scrollableKidY) { this.#currentScrollingElement = scrollableKidY; this.#scrollKid(scrollableKidY, deltaY); diff --git a/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.ts b/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.ts index 24b21c3045..c4305e00ee 100644 --- a/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.ts +++ b/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewSlotNg.ts @@ -5,8 +5,6 @@ */ import { Component } from '../../element-reactive/index.js'; import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js'; -import { XFoldviewSlotNgTouchEventsHandler } from './XFoldviewSlotNgTouchEventsHandler.js'; -import { slotKid, type XFoldviewNg } from './XFoldviewNg.js'; import { LinearContainer } from '../../compat/index.js'; @Component( @@ -14,13 +12,7 @@ import { LinearContainer } from '../../compat/index.js'; [ LinearContainer, CommonEventsAndMethods, - XFoldviewSlotNgTouchEventsHandler, ], ) export class XFoldviewSlotNg extends HTMLElement { - connectedCallback() { - if (this.matches('x-foldview-ng>x-foldview-slot-ng:first-of-type')) { - (this.parentElement as XFoldviewNg | null)![slotKid] = this; - } - } } diff --git a/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.ts b/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.ts index 9554d7f1e2..3631120724 100644 --- a/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.ts +++ b/packages/web-platform/web-elements/src/elements/XFoldViewNg/XFoldviewToolbarNg.ts @@ -5,28 +5,42 @@ */ import { Component } from '../../element-reactive/index.js'; import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js'; -import { resizeObserver, type XFoldviewNg } from './XFoldviewNg.js'; -import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js'; import { LinearContainer } from '../../compat/index.js'; +import { updateToolbarHeight, XFoldviewNg } from './XFoldviewNg.js'; @Component('x-foldview-toolbar-ng', [ LinearContainer, CommonEventsAndMethods, ]) export class XFoldviewToolbarNg extends HTMLElement { - #parentResizeObserver: ResizeObserver | undefined = undefined; + #resizeObserver?: ResizeObserver; + connectedCallback() { - const parentElement = getCombinedDirectParentElement( - this, - 'X-FOLDVIEW-NG', - ); - this.#parentResizeObserver = parentElement?.[resizeObserver]; - this.#parentResizeObserver?.observe(this); + this.#resizeObserver = new ResizeObserver((entries) => { + for (const entry of entries) { + this.#updateParent(entry.contentRect.height); + } + }); + this.#resizeObserver.observe(this); + this.#updateParent(this.clientHeight); + } + + disconnectedCallback() { + this.#resizeObserver?.disconnect(); + this.#resizeObserver = undefined; } - dispose() { - this.#parentResizeObserver?.unobserve( - this, - ); + #updateParent(height: number) { + let parent = this.parentElement; + while (parent) { + if (parent instanceof XFoldviewNg) { + parent[updateToolbarHeight](height); + break; + } + if (parent.tagName !== 'LYNX-WRAPPER') { + break; + } + parent = parent.parentElement; + } } } diff --git a/packages/web-platform/web-elements/src/elements/XFoldViewNg/x-foldview-ng.css b/packages/web-platform/web-elements/src/elements/XFoldViewNg/x-foldview-ng.css index d044455304..455752d7e5 100644 --- a/packages/web-platform/web-elements/src/elements/XFoldViewNg/x-foldview-ng.css +++ b/packages/web-platform/web-elements/src/elements/XFoldViewNg/x-foldview-ng.css @@ -5,12 +5,10 @@ */ x-foldview-ng { display: flex; - overflow-y: scroll !important; - overflow-x: clip; - overflow-x: hidden; - overscroll-behavior: contain; - --foldview-header-height: 0px; - scrollbar-width: none; + overflow: hidden; + overflow: clip !important; + --foldview-scroll-top: 0px; + --foldview-scroll-height: 0px; } x-foldview-ng::-webkit-scrollbar { @@ -29,10 +27,6 @@ x-foldview-ng:not([scroll-bar-enable], [scroll-bar-enable="true"])::-webkit-scro display: none; } -x-foldview-ng[scroll-enable="false"] { - overflow-y: hidden; -} - x-foldview-ng > *, x-foldview-header-ng, x-foldview-slot-ng, @@ -48,6 +42,7 @@ x-foldview-ng > lynx-wrapper > x-foldview-slot-ng, x-foldview-ng > lynx-wrapper > x-foldview-toolbar-ng { display: flex; } + x-foldview-toolbar-ng { order: 1; position: sticky; @@ -59,6 +54,7 @@ x-foldview-header-ng { order: 2; flex: 0 0 auto; position: absolute; + transform: translateY(var(--foldview-scroll-top)); } x-foldview-ng[header-over-slot] > x-foldview-slot-ng, @@ -69,7 +65,11 @@ x-foldview-ng[header-over-slot] > lynx-wrapper > x-foldview-slot-ng { x-foldview-slot-ng { contain: strict; order: 3; + transform: translateY( + calc(var(--foldview-scroll-height) + var(--foldview-scroll-top)) + ); } + x-foldview-slot-ng scroll-view { /* avoiding default bounce on ios safari */ overscroll-behavior-y: none; diff --git a/packages/web-platform/web-elements/tests/fixtures/x-foldview-ng/item-fixed.html b/packages/web-platform/web-elements/tests/fixtures/x-foldview-ng/item-fixed.html index 70ff637084..2869b8d230 100644 --- a/packages/web-platform/web-elements/tests/fixtures/x-foldview-ng/item-fixed.html +++ b/packages/web-platform/web-elements/tests/fixtures/x-foldview-ng/item-fixed.html @@ -45,7 +45,7 @@ style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row" > { }, { title }) => { await gotoWebComponentPage(page, title); await wait(500); - expect(page.locator('x-foldview-slot-ng')).toHaveCSS('top', '200px'); + expect(page.locator('x-foldview-slot-ng')).toHaveCSS( + 'transform', + 'matrix(1, 0, 0, 1, 0, 200)', + ); }); test('x-foldview-ng/size-parent-grow-children-specific', async ({ page, browserName, }, { title }) => { - test.skip(browserName === 'webkit', 'z-index issues for safari'); + // test.skip(browserName === 'webkit', 'z-index issues for safari'); await gotoWebComponentPage(page, title); await diffScreenShot(page, title, '300px-inf'); }); @@ -1271,7 +1274,7 @@ test.describe('web-elements test suite', () => { }, ); - test('x-foldview-ng/item-fixed', async ({ page }, { title }) => { + test.fixme('x-foldview-ng/item-fixed', async ({ page }, { title }) => { await gotoWebComponentPage(page, title); await wait(100); await diffScreenShot(page, title, 'initial'); diff --git a/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/basic-with-lynx-wrapper/index-chromium-linux.png b/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/basic-with-lynx-wrapper/index-chromium-linux.png index f98fca9804..a05f4b09b4 100644 Binary files a/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/basic-with-lynx-wrapper/index-chromium-linux.png and b/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/basic-with-lynx-wrapper/index-chromium-linux.png differ diff --git a/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/basic-with-lynx-wrapper/index-firefox-linux.png b/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/basic-with-lynx-wrapper/index-firefox-linux.png index c66d56003f..0f1916a5ce 100644 Binary files a/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/basic-with-lynx-wrapper/index-firefox-linux.png and b/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/basic-with-lynx-wrapper/index-firefox-linux.png differ diff --git a/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/basic-with-lynx-wrapper/index-webkit-linux.png b/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/basic-with-lynx-wrapper/index-webkit-linux.png index 313001a23d..620237e4d3 100644 Binary files a/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/basic-with-lynx-wrapper/index-webkit-linux.png and b/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/basic-with-lynx-wrapper/index-webkit-linux.png differ diff --git a/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/size-parent-grow-children-specific/300px-inf-webkit-linux.png b/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/size-parent-grow-children-specific/300px-inf-webkit-linux.png new file mode 100644 index 0000000000..dcc7dda37c Binary files /dev/null and b/packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-foldview-ng/size-parent-grow-children-specific/300px-inf-webkit-linux.png differ diff --git a/packages/web-platform/web-elements/tests/x-foldview-ng-wheel.spec.ts b/packages/web-platform/web-elements/tests/x-foldview-ng-wheel.spec.ts index 37a221ce52..aac20e23d7 100644 --- a/packages/web-platform/web-elements/tests/x-foldview-ng-wheel.spec.ts +++ b/packages/web-platform/web-elements/tests/x-foldview-ng-wheel.spec.ts @@ -23,33 +23,33 @@ test.describe('x-foldview-ng wheel', () => { }) => { test.skip(browserName === 'webkit', 'mouse wheel unsupported on webkit'); await goto(page, title); - const foldview = page.locator('#foldview'); + await wait(200); const scrollview = page.locator('#inner-scroll'); - await page.locator('#inner-scroll').hover(); - - await foldview.evaluate((dom: HTMLElement) => { - dom.scrollTop = 0; - }); - await scrollview.evaluate((dom: HTMLElement) => { - dom.scrollTop = 0; + await page.locator('#inner-scroll').hover({ + force: true, + position: { x: 50, y: 50 }, }); - const foldviewInitial = await foldview.evaluate((dom: HTMLElement) => - dom.scrollTop + const foldviewInitial = await page.evaluate(() => + (document.querySelector('#foldview') as HTMLElement).scrollTop ); - const scrollViewInitial = await scrollview.evaluate((dom: HTMLElement) => - dom.scrollTop + const scrollViewInitial = await page.evaluate(() => + (document.querySelector('#inner-scroll') as HTMLElement).scrollTop ); await page.mouse.wheel(0, 120); await wait(200); expect( - await foldview.evaluate((dom: HTMLElement) => dom.scrollTop), + await page.evaluate(() => + (document.querySelector('#foldview') as HTMLElement).scrollTop + ), 'wheel-outer-scrolls-first', ).toBeGreaterThan(foldviewInitial); expect( - await scrollview.evaluate((dom: HTMLElement) => dom.scrollTop), + await page.evaluate(() => + (document.querySelector('#inner-scroll') as HTMLElement).scrollTop + ), 'wheel-inner-not-scrolled-before-header', ).toBe(scrollViewInitial); }); @@ -59,34 +59,38 @@ test.describe('x-foldview-ng wheel', () => { }) => { test.skip(browserName === 'webkit', 'mouse wheel unsupported on webkit'); await goto(page, title); - const foldview = page.locator('#foldview'); + await wait(200); const scrollview = page.locator('#inner-scroll'); - await page.locator('#inner-scroll').hover(); - - await foldview.evaluate((dom: HTMLElement) => { - dom.scrollTop = 0; - }); - await scrollview.evaluate((dom: HTMLElement) => { - dom.scrollTop = 0; + await page.locator('#inner-scroll').hover({ + force: true, + position: { x: 50, y: 50 }, }); - await foldview.evaluate((dom: HTMLElement) => { - dom.scrollTop = dom.scrollHeight; + await page.evaluate(() => { + const foldview = document.querySelector('#foldview') as HTMLElement; + const scrollview = document.querySelector('#inner-scroll') as HTMLElement; + foldview.scrollTop = 0; + scrollview.scrollTop = 0; + foldview.scrollTop = foldview.scrollHeight; }); await wait(100); - const foldviewBeforeInner = await foldview.evaluate((dom: HTMLElement) => - dom.scrollTop + const foldviewBeforeInner = await page.evaluate(() => + (document.querySelector('#foldview') as HTMLElement).scrollTop ); await page.mouse.wheel(0, 200); await wait(200); expect( - await scrollview.evaluate((dom: HTMLElement) => dom.scrollTop), + await page.evaluate(() => + (document.querySelector('#inner-scroll') as HTMLElement).scrollTop + ), 'wheel-continues-to-inner-scroll', ).toBeGreaterThan(0); expect( - await foldview.evaluate((dom: HTMLElement) => dom.scrollTop), + await page.evaluate(() => + (document.querySelector('#foldview') as HTMLElement).scrollTop + ), 'wheel-outer-stays-at-end', ).toBeGreaterThanOrEqual(foldviewBeforeInner); });