Popover: Fix iframe story and add test

[mirka]

What?

Fixes the "With Slot Outside Iframe" story of the Popover component in Storybook.

I also added a unit test to ensure that the cross-document rendering is working as expected. This test is also a good first step in unblocking our version-pinned floating-ui dependency (#48402).

Why?

This story was originally (#42903) written using the Iframe component in @wordpress/block-editor. In #46706, there was an implementation change in this Iframe component that introduced some conditional rendering logic that relied on the block editor store. This change broke the isolated example in Storybook, and made the Iframe component unsuitable for non-WP usage.

How?

I replaced the Iframe component with a generic iframe component that is suitable for isolated testing.

Testing Instructions

✅ Tests pass

1. npm run storybook:dev
2. Go to the Popover "With Slot Outside Iframe" story in Storybook and see that it works again.

Screenshots or screencast

Expected story

CleanShot.2023-08-05.at.02.57.04.mp4

[brookewp]

Thank you for working on this! I saw a few odd things happening in my testing.

In Chrome, I see that the popover disappears as soon as I start to scroll within the container:

But I believe it should stay open until dismissed? And in Firefox, it starts out of view, and the popover can be scrolled, but the container cannot:

The container iframe titled 'My iframe' is empty in FF (it doesn't contain any elements in the body):

Vs Chrome:

The max-height of the popover also varies between them (30px in FF, 178px in Chrome)

[github-actions]

Flaky tests detected in 3ec5c25.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5739400949
📝 Reported issues:

• [Flaky Test] Pick the additional variation in the inserted Columns block #47057 in specs/editor/plugins/block-variations.test.js
• [Flaky Test] should load styles added through enqueue_block_assets #53088 in specs/editor/plugins/iframed-equeue-block-assets.test.js

[chad1008]

Testing this was odd for me. In the PR's current state (after the FF fix in 3ec5c25), Firefox looks great, but Chrome now fails to render any content inside the iframe for me. It looks very similar to what @brookewp reported in FF before that fix was added:

Chrome, with the FF fix applied

Chrome markup with the FF fix applied

If I drop that one commit, Chrome works again, (FF of course doesn't). I did notice the popover overlays the container's border when scrolling:

Scrolling within the container on Chrome, WITHOUT the Firefox fix

I've tested multiple times, but it feels weird to me that the FF fix would break Chrome... it's possible there's something funky happening locally for me if this isn't reproducible by others 🤔

[stokesman]

I tried this in Chrome and Orion and saw the same as Chad reported. I took a guess that adding a srcDoc might somehow help. That seemed to do the trick and it started working in those browsers. Firefox remained okay too.

[mirka]

Thanks for testing everyone! And especially @stokesman for figuring out a fix 🙏 I actually couldn't reproduce this Chrome issue even with a hard refresh, but an Incognito tab somehow made it happen 😅 Should be working in all three browsers now.

I did notice the popover overlays the container's border when scrolling

I believe this is the expected behavior for the original story, because the popover content is being rendered in a slot outside of the purple border iframe 👍

[stokesman]

Looks 🚢 shape to me.

[stokesman]

😆