diff --git a/integration/__snapshots__/nested_slots.test.js.snap b/integration/__snapshots__/nested_slots.test.js.snap new file mode 100644 index 00000000..7939bd79 --- /dev/null +++ b/integration/__snapshots__/nested_slots.test.js.snap @@ -0,0 +1,41 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`target in nested slots into scrollable container in shadow DOM block: "nearest" 1`] = ` +[ + { + "el": "div.second-inner-container", + "left": 0, + "top": 100, + }, + { + "el": "div.first-inner-container", + "left": 0, + "top": 600, + }, + { + "el": "html", + "left": 0, + "top": 0, + }, +] +`; + +exports[`target in nested slots into scrollable container in shadow DOM block: "start" 1`] = ` +[ + { + "el": "div.second-inner-container", + "left": 0, + "top": 600, + }, + { + "el": "div.first-inner-container", + "left": 0, + "top": 600, + }, + { + "el": "html", + "left": 0, + "top": 0, + }, +] +`; diff --git a/integration/__snapshots__/slot.test.js.snap b/integration/__snapshots__/slot.test.js.snap new file mode 100644 index 00000000..ca371ded --- /dev/null +++ b/integration/__snapshots__/slot.test.js.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`target slotted into scrollable container in shadow DOM block: "nearest" 1`] = ` +[ + { + "el": "div.inner-container", + "left": 0, + "top": 100, + }, + { + "el": "html", + "left": 0, + "top": 0, + }, +] +`; + +exports[`target slotted into scrollable container in shadow DOM block: "start" 1`] = ` +[ + { + "el": "div.inner-container", + "left": 0, + "top": 600, + }, + { + "el": "html", + "left": 0, + "top": 0, + }, +] +`; diff --git a/integration/nested_slots.html b/integration/nested_slots.html new file mode 100644 index 00000000..9e3d92b7 --- /dev/null +++ b/integration/nested_slots.html @@ -0,0 +1,76 @@ + + + + + +
+ +
+
diff --git a/integration/nested_slots.test.js b/integration/nested_slots.test.js new file mode 100644 index 00000000..dbd71761 --- /dev/null +++ b/integration/nested_slots.test.js @@ -0,0 +1,37 @@ +beforeAll(async () => { + await page.goto('http://localhost:3000/integration/nested_slots') +}) + +describe('target in nested slots into scrollable container in shadow DOM', () => { + test('block: "nearest"', async () => { + expect.assertions(4) + const windowHeight = await page.evaluate(() => window.innerHeight) + const actual = await page.evaluate(() => { + return window + .computeScrollIntoView(document.querySelector('.target'), { + block: 'nearest', + }) + .map(window.mapActions) + }) + expect(actual).toHaveLength(3) + expect(actual[0]).toMatchObject({ el: 'div.second-inner-container', left: 0, top: 100 }) + expect(actual[1]).toMatchObject({ el: 'div.first-inner-container', left: 0, top: windowHeight }) + expect(actual).toMatchSnapshot() + }) + + test('block: "start"', async () => { + expect.assertions(4) + const windowHeight = await page.evaluate(() => window.innerHeight) + const actual = await page.evaluate(() => { + return window + .computeScrollIntoView(document.querySelector('.target'), { + block: 'start', + }) + .map(window.mapActions) + }) + expect(actual).toHaveLength(3) + expect(actual[0]).toMatchObject({ el: 'div.second-inner-container', left: 0, top: windowHeight }) + expect(actual[1]).toMatchObject({ el: 'div.first-inner-container', left: 0, top: windowHeight }) + expect(actual).toMatchSnapshot() + }) +}) \ No newline at end of file diff --git a/integration/slot.html b/integration/slot.html new file mode 100644 index 00000000..2e760e97 --- /dev/null +++ b/integration/slot.html @@ -0,0 +1,49 @@ + + + + + +
+ +
+
diff --git a/integration/slot.test.js b/integration/slot.test.js new file mode 100644 index 00000000..24f7a6be --- /dev/null +++ b/integration/slot.test.js @@ -0,0 +1,34 @@ +beforeAll(async () => { + await page.goto('http://localhost:3000/integration/slot') +}) + +describe('target slotted into scrollable container in shadow DOM', () => { + test('block: "nearest"', async () => { + expect.assertions(3) + const actual = await page.evaluate(() => { + return window + .computeScrollIntoView(document.querySelector('.target'), { + block: 'nearest', + }) + .map(window.mapActions) + }) + expect(actual).toHaveLength(2) + expect(actual[0]).toMatchObject({ el: 'div.inner-container', left: 0, top: 100 }) + expect(actual).toMatchSnapshot() + }) + + test('block: "start"', async () => { + expect.assertions(3) + const windowHeight = await page.evaluate(() => window.innerHeight); + const actual = await page.evaluate(() => { + return window + .computeScrollIntoView(document.querySelector('.target'), { + block: 'start', + }) + .map(window.mapActions) + }) + expect(actual).toHaveLength(2) + expect(actual[0]).toMatchObject({ el: 'div.inner-container', left: 0, top: windowHeight }) + expect(actual).toMatchSnapshot() + }) +}) \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index ff43f78f..d6021330 100644 --- a/src/index.ts +++ b/src/index.ts @@ -267,7 +267,9 @@ const alignNearest = ( } const getParentElement = (element: Node): Element | null => { - const parent = element.parentElement + const parent = isElement(element) + ? (element.assignedSlot ?? element.parentElement) + : element.parentElement if (parent == null) { return (element.getRootNode() as ShadowRoot).host || null }