mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
2950dae1e0
### Why? Although the style applied to the shadow host is isolated, the element that attached the shadow host (i.e. `nextjs-portal`) is still affected by the parent's style (e.g. `body`). This may occur style conflicts like `display: flex`, with other children elements therefore give the shadow host an absolute position. Fixes #70675 Closes NDX-640 --------- Co-authored-by: samcx <[email protected]> Co-authored-by: devjiwonchoi <[email protected]>
25 lines
984 B
TypeScript
25 lines
984 B
TypeScript
import { nextTestSetup } from 'e2e-utils'
|
|
|
|
describe('dev-overlay - portal-not-affect-parent', () => {
|
|
const { next } = nextTestSetup({
|
|
files: __dirname,
|
|
})
|
|
|
|
it('should not affect parent display', async () => {
|
|
const browser = await next.browser('/')
|
|
const rect = await browser.eval(
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
|
|
`document.querySelector('#div2').getBoundingClientRect()`
|
|
)
|
|
// Since the <body> has `space-between`, if the shadow root takes up
|
|
// the space, the x of #div2 will be 100 as is the width of #div1.
|
|
// If the shadow root does not take up the space, as the total width of
|
|
// the <body> is 300 and as is a space-between, the #div2 will be placed
|
|
// at the end of the <body> and the x will be 200.
|
|
|
|
// Before: <#div1 100> <#div2 100> <nextjs-portal 100>
|
|
// After: <#div1 100> [space-between 100] <#div2 100> <nextjs-portal 0>
|
|
expect(rect.x).toBe(200)
|
|
})
|
|
})
|