Add viewport segments api demo

[chrisdavidmills]

Chrome 138 adds the Viewport Segments API, which provides a way to access the position and dimensions of logically separate viewport regions. Viewport segments are created when the viewport is split by one or more hardware features (such as a fold or a hinge between separate displays).

This PR adds an example to demonstrate how to use it.

[chrisdavidmills]

@darktears, would you be able to help me test this demo? I adapted the viewport segments CSS from one of your demos, and didn't change it that much.

[darktears]

The demo doesn't look quite right on my Z Fold 4. But I can see similar issues on the DevTools when I use the Device Emulation mode and pick the Z Fold 5 or the Asus Zenbook Fold. I think you can go 99% of the way with the DevTools. And my demos work, I just checked them with the Z Fold 4.

[chrisdavidmills]

Thanks for the code review, @darktears! This is now ready for the MDN team to review and get merged.

[chrisdavidmills]

@pepelsbey this is ready for a look, if you fancy it ;-)

[pepelsbey]

Looks good! I only found an edge case with JS: when you click in between the links, the section on the right gets filled with all the content. I’d suggest narrowing down the event listener and also preventing the default behavior so that the links won’t add # to URL.

[pepelsbey]

Perfect :) Thank you!