Intent to Ship: Viewport Segments Enumeration API

[Menard, Alexis]

Contact emails

alexis...@intel.com

Explainer

https://github.com/WICG/visual-viewport/blob/gh-pages/segments-explainer/SEGMENTS-EXPLAINER.md

Specification

https://www.w3.org/TR/mediaqueries-5/#mf-horizontal-viewport-segments

https://drafts.csswg.org/css-viewport-1/#segments

https://drafts.csswg.org/css-env-1/#viewport-segments

Design docs

https://github.com/WICG/visual-viewport/blob/gh-pages/segments-explainer/SEGMENTS-EXPLAINER.md

Summary

The Viewport Segments APIs allows developers to adapt their website/webapp layout to target foldable devices. The viewport segments defines the position and dimensions of a logically separate region of the viewport. 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) that act as a divider; segments are the regions of the viewport that can be treated as logically distinct by the author. This is the sister of the Device Posture API (which is already stable) and both APIs are expected to be used to fully target foldable devices. Developers can access the information using JavaScript or CSS.

Blink component

Blink>FoldableAPIs

Search tags

segment, foldable, enumeration, windows

TAG review

https://github.com/w3ctag/design-reviews/issues/492

TAG review status

Issues addressed

Risks

Interoperability and Compatibility

This is a new API, risk is that it fails to get adoption.

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/883)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/327)

Web developers: Positive (https://twitter.com/DanB/status/1179937850286059520) Another example: https://twitter.com/justinxinliu/status/1240424897337155584 Note: Capturing cumulative Web / Framework developer views are challenging, as we don't have a really good way to aggregate and summarize this information in one URL. This is something we're thinking about and would love to improve in the future.

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

Besides the usual DevTools debugging of the CSS and JavaScript API, few specific devices have been added into the Device Emulation mode.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Windows and Android are for now the platforms where the viewport segment make the most sense (there is no available devices on the other OSes).

Is this feature fully tested by web-platform-tests?

Yes over here : https://github.com/web-platform-tests/wpt/tree/master/viewport-segments

There are hooks in WebDriver to allow emulating various type of folds (size, orientation, position).

Flag name on about://flags

viewport-segments

Finch feature name

ViewportSegments

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://crbug.com/1039050

Sample links

https://github.com/foldable-devices/demos

Estimated milestones

Shipping on desktop	138
Origin trial desktop first	125
Origin trial desktop last	128
DevTrial on desktop	116
Shipping on Android	138
Origin trial Android first	125
Origin trial Android last	128
DevTrial on Android	123

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

None

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5170498990243840?gate=5498556647997440

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/_1_ljYsaqrU/m/qOoHJ7MhAgAJ

This intent message was generated by Chrome Platform Status.

[Yoav Weiss (@Shopify)]

Thanks!

Would it be possible to update the explainer to point to all the different moving parts of this, and ping the TAG and the vendor position requests, as they all seem rather old.

The TAG specifically didn't really review this 5 years ago, and delegated to the CSSWG. It's worthwhile to ask them if they are happy with this as it turned out.

[Dan Clark]

Looking at the linked WPTs, just 1 out of 3 is passing in Chrome Canary with experimental features enabled: https://wpt.fyi/results/viewport-segments?label=master&label=experimental&aligned

Is that the expected result?

Thanks,

Dan

[Alexis Menard]

Hi,

On Wednesday, April 30, 2025 at 11:33:13 AM UTC-4 yoav...@chromium.org wrote:

Thanks!

Would it be possible to update the explainer to point to all the different moving parts of this, and ping the TAG and the vendor position requests, as they all seem rather old.

Sure, I can make some cleanups in the explainer to point to everything. Regarding the vendors, I'm not sure what to do with the lack of answers. It was the same for the Device Posture API, we never got an answer.

 

The TAG specifically didn't really review this 5 years ago, and delegated to the CSSWG. It's worthwhile to ask them if they are happy with this as it turned out.

The CSS part was reviewed by the TAG https://github.com/w3ctag/design-reviews/issues/472. I can ping the TAG for the `segments` property if you really think it's needed, after all it's just exposing in JS what's the CSS API provide. The `segments` property was carefully reviewed by the CSS WG, for example we moved it from the visual-viewport to viewport object last year through a resolution.

[Alexis Menard]

On Wednesday, April 30, 2025 at 11:41:43 AM UTC-4 dan...@microsoft.com wrote:

Looking at the linked WPTs, just 1 out of 3 is passing in Chrome Canary with experimental features enabled: https://wpt.fyi/results/viewport-segments?label=master&label=experimental&aligned

Is that the expected result?

One failure is because the Canary version used to run the tests hasn't caught up with one last patch I did. The other makes zero sense (set_display_features in webdriver is used the same way as the passing test), I'm going to try to reproduce it locally.

[Alexis Menard]

Hi,

Actually, I stand corrected and my bad for not updating the links in the chromestatus entry.

Both APIs were reviewed by the TAG in 2022:

JS: https://github.com/w3ctag/design-reviews/issues/689

CSS: https://github.com/w3ctag/design-reviews/issues/690

Thanks.

[Alexis Menard]

Hi,

All WPT tests are now green. I fixed the issue. Edge will also get green when the runner moves to a newer version like Chrome.

Thanks.

[Alex Russell]

Thanks for all these updates. LGTM1.

[Chris Harrelson]

LGTM2

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/b80f2a43-2c3d-47d9-89a0-5061698ab093n%40chromium.org.

[Dan Clark]

LGTM3