@page/page-orientation example doesn't print, lacks "allow-modal"

[goldnate]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/@page/page-orientation

What specific section or headline is this issue about?

Example

What information was incorrect, unhelpful, or incomplete?

I wanted to see how it would print because I was confused about the sentence, "After a page is laid out, the page must be displayed rotated a quarter turn to the left (counter-clockwise)" in the description of rotate-left. Does that mean that the content must somehow be laid out sideways and then turned so that it appears correctly? Also, does that mean that the top and bottom margins indicated for the page become left and right when related to the content? I just wasn't sure so I wanted to print the example.

What did you expect to see?

I expected my browser (Firefox 130.1 (64-bit) on Windows 11 Pro v. 23H2) open up the print dialog or for a PDF of the example to download. Neither happened. Nothing happened. It looks like window.print just doesn't do anything from inside the sandbox.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/css/@page/page-orientation
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/@page/page-orientation
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/@page/page-orientation/index.md
• Last commit: mdn/content@a9868df
• Document last modified: 2024-09-18T14:54:17.000Z

[Josh-Cena]

This is because the live sample iframe does not have sandbox="allow-modals" set. I'm not sure if it's a great idea to set it unconditionally in Yari, but #11460 is highly related.

cc @mdn/core-dev

[fernandoroa]

I couldn't make it work on the playground not modifying the code to run it locally.

[bsmth]

Thanks for reporting, this is fixed in the following PR which has more information on occurrences and the changes that permit this in examples:

• feat(css): Update live samples calling window.print(), add 'allow-modals' content#38232

[goldnate]

Thank you for this and for everything you do to make MDN such a valuable resource.