Intent to Ship: CSS picture-in-picture display mode

François Beaufort

unread,

Feb 13, 2024, 5:13:57 AMFeb 13

to blink-dev

Contact emails

fbea...@google.com

Explainer

None

Specification

https://drafts.csswg.org/mediaqueries-5/#display-mode-picture-in-picture
https://github.com/w3c/csswg-drafts/issues/9260

Summary

Adds support to the CSS display-mode media feature for picture-in-picture. This allows web developers to write specific CSS rules that are only applied when (part of the) the web app is shown in picture-in-picture mode.

Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable as this is a minor change to the behavior of an existing API

Risks

Interoperability and Compatibility

None

Gecko: No signal (https://github.com/WebKit/standards-positions/issues/41#issuecomment-1940908587) Added comment to existing standards position issue for document picture-in-picture. No response yet

WebKit: No signal (https://github.com/mozilla/standards-positions/issues/670#issuecomment-1940909277) Added comment to existing standards position issue for document picture-in-picture. No response yet

Web developers: Positive (https://github.com/WICG/document-picture-in-picture/issues/87)

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

No DevTools changes are required, treated like any other CSS property.

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

No

The document picture-in-picture API is not supported on Android

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

Yes

https://wpt.fyi/results/css/mediaqueries/display-mode.html https://wpt.live/css/mediaqueries/display-mode.html

Flag name on chrome://flags

Experimental Web Platform Features

Finch feature name

CSSDisplayModePictureInPicture

Requires code in //chrome?

True

Tracking bug

https://issues.chromium.org/issues/41493667

Sample links

https://document-picture-in-picture-api.glitch.me/display-mode.html

Estimated milestones

Shipping on desktop

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/5198101675769856

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPpwU5LESxPG9gA5-_uvsBiAZpqdvRkNfxL7Az%3DSNSUi4UNSkA%40mail.gmail.com

This intent message was generated by Chrome Platform Status.

Yoav Weiss (@Shopify)

unread,

Feb 14, 2024, 3:36:11 AMFeb 14

to François Beaufort, blink-dev

LGTM1

This seems like a small and useful extension to Document picture-in-picture.

On Tue, Feb 13, 2024 at 11:13 AM 'François Beaufort' via blink-dev <blin...@chromium.org> wrote:

Contact emails
fbea...@google.com

Explainer
None

Specification
https://drafts.csswg.org/mediaqueries-5/#display-mode-picture-in-picture
https://github.com/w3c/csswg-drafts/issues/9260

Summary
Adds support to the CSS display-mode media feature for picture-in-picture. This allows web developers to write specific CSS rules that are only applied when (part of the) the web app is shown in picture-in-picture mode.

Blink component
Blink>CSS

TAG review
None

TAG review status
Not applicable as this is a minor change to the behavior of an existing API

Maybe comment with this on a the broader feature's TAG review, similar to what you did for vendor positions?

--
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 on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPpwU5JsF6bdXuvH3XvqEE_PBy%2BkY3oYdKG_%2BzYHynGM1X7Uxw%40mail.gmail.com.

François Beaufort

unread,

Feb 14, 2024, 3:47:37 AMFeb 14

to Yoav Weiss (@Shopify), blink-dev

On Wed, Feb 14, 2024 at 9:36 AM Yoav Weiss (@Shopify) <yoav...@chromium.org> wrote:

LGTM1

This seems like a small and useful extension to Document picture-in-picture.

On Tue, Feb 13, 2024 at 11:13 AM 'François Beaufort' via blink-dev <blin...@chromium.org> wrote:
Contact emails
fbea...@google.com

Explainer
None

Specification
https://drafts.csswg.org/mediaqueries-5/#display-mode-picture-in-picture
https://github.com/w3c/csswg-drafts/issues/9260

Summary
Adds support to the CSS display-mode media feature for picture-in-picture. This allows web developers to write specific CSS rules that are only applied when (part of the) the web app is shown in picture-in-picture mode.

Blink component
Blink>CSS

TAG review
None

TAG review status
Not applicable as this is a minor change to the behavior of an existing API

Maybe comment with this on a the broader feature's TAG review, similar to what you did for vendor positions?

Good idea!
Here it is: https://github.com/w3ctag/design-reviews/issues/798#issuecomment-1943312216

Manuel Rego Casasnovas

unread,

Feb 14, 2024, 4:43:27 AMFeb 14

to François Beaufort, blink-dev

Hi,

On 13/02/2024 11:13, 'François Beaufort' via blink-dev wrote:
>
> Is this feature fully tested by web-platform-tests

> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?
>
> Yes
>
> https://wpt.fyi/results/css/mediaqueries/display-mode.html
> <https://wpt.fyi/results/css/mediaqueries/display-mode.html>
> https://wpt.live/css/mediaqueries/display-mode.html
> <https://wpt.live/css/mediaqueries/display-mode.html>

Is this only testing the parsing of the new value?

Do we have any test checking the behavior? Maybe we should have some in
the /picture-in-picture/ folder in WPT.

Cheers,
Rego

François Beaufort

unread,

Feb 14, 2024, 4:46:22 AMFeb 14

to Manuel Rego Casasnovas, blink-dev

On Wed, Feb 14, 2024 at 10:43 AM Manuel Rego Casasnovas <re...@igalia.com> wrote:

Hi,

On 13/02/2024 11:13, 'François Beaufort' via blink-dev wrote:
>
> Is this feature fully tested by web-platform-tests
> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?
>
> Yes
>
> https://wpt.fyi/results/css/mediaqueries/display-mode.html
> <https://wpt.fyi/results/css/mediaqueries/display-mode.html>
> https://wpt.live/css/mediaqueries/display-mode.html
> <https://wpt.live/css/mediaqueries/display-mode.html>

Is this only testing the parsing of the new value?

These ones only do that.

We have chromium browser tests for this at https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/picture_in_picture/document_picture_in_picture_window_controller_browsertest.cc;l=781;drc=feec59141dfbef0543100614b568f2b8f7e71af1

Manuel Rego Casasnovas

unread,

Feb 14, 2024, 4:48:24 AMFeb 14

to François Beaufort, blink-dev

On 14/02/2024 10:46, François Beaufort wrote:
>
>
> On Wed, Feb 14, 2024 at 10:43 AM Manuel Rego Casasnovas <re...@igalia.com
> <mailto:re...@igalia.com>> wrote:
>
> Hi,
>
> On 13/02/2024 11:13, 'François Beaufort' via blink-dev wrote:
> >
> > Is this feature fully tested by web-platform-tests
> >

> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>>?

> https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/picture_in_picture/document_picture_in_picture_window_controller_browsertest.cc;l=781;drc=feec59141dfbef0543100614b568f2b8f7e71af1 <https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/picture_in_picture/document_picture_in_picture_window_controller_browsertest.cc;l=781;drc=feec59141dfbef0543100614b568f2b8f7e71af1>

Is there any WPT limitation preventing us for testing this there? If so
we should report a WPT issue.

Having behavioral tests in WPT is always useful to ensure
interoperability in the future.

Cheers,
Rego

François Beaufort

unread,

Feb 14, 2024, 7:16:10 AMFeb 14

to Manuel Rego Casasnovas, blink-dev

I'm adding tests in WPT as suggested.

See https://chromium-review.googlesource.com/c/chromium/src/+/5290634/3/third_party/blink/web_tests/external/wpt/document-picture-in-picture/display-mode.https.html

Thank you for catching!

Cheers,
Rego

Manuel Rego Casasnovas

unread,

Feb 16, 2024, 6:21:22 AMFeb 16

to François Beaufort, blink-dev

Thanks for adding the test. LGTM2.

Cheers,
Rego

On 14/02/2024 13:15, 'François Beaufort' via blink-dev wrote:
>
> On Wed, Feb 14, 2024 at 10:48 AM Manuel Rego Casasnovas <re...@igalia.com
> <mailto:re...@igalia.com>> wrote:
>
>
>
> On 14/02/2024 10:46, François Beaufort wrote:
> >
> >
> > On Wed, Feb 14, 2024 at 10:43 AM Manuel Rego Casasnovas
> <re...@igalia.com <mailto:re...@igalia.com>

> > <mailto:re...@igalia.com <mailto:re...@igalia.com>>> wrote:
> >
> > Hi,
> >
> > On 13/02/2024 11:13, 'François Beaufort' via blink-dev wrote:
> > >
> > > Is this feature fully tested by web-platform-tests
> > >
> >

> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>>>?

> https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/picture_in_picture/document_picture_in_picture_window_controller_browsertest.cc;l=781;drc=feec59141dfbef0543100614b568f2b8f7e71af1 <https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/picture_in_picture/document_picture_in_picture_window_controller_browsertest.cc;l=781;drc=feec59141dfbef0543100614b568f2b8f7e71af1> <https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/picture_in_picture/document_picture_in_picture_window_controller_browsertest.cc;l=781;drc=feec59141dfbef0543100614b568f2b8f7e71af1 <https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/picture_in_picture/document_picture_in_picture_window_controller_browsertest.cc;l=781;drc=feec59141dfbef0543100614b568f2b8f7e71af1>>

>
> Is there any WPT limitation preventing us for testing this there? If so
> we should report a WPT issue.
>
> Having behavioral tests in WPT is always useful to ensure
> interoperability in the future.
>
>
> I'm adding tests in WPT as suggested.
> See

> https://chromium-review.googlesource.com/c/chromium/src/+/5290634/3/third_party/blink/web_tests/external/wpt/document-picture-in-picture/display-mode.https.html <https://chromium-review.googlesource.com/c/chromium/src/+/5290634/3/third_party/blink/web_tests/external/wpt/document-picture-in-picture/display-mode.https.html>

>
> Thank you for catching!
>
>
> Cheers,
> Rego
>

> --
> 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

> <mailto:blink-dev+...@chromium.org>.

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPpwU5%2B-ajZwj01sZ3TOHADOwFd04FLoF0Zk7bF4Ow--riK6OA%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPpwU5%2B-ajZwj01sZ3TOHADOwFd04FLoF0Zk7bF4Ow--riK6OA%40mail.gmail.com?utm_medium=email&utm_source=footer>.

Mike Taylor

unread,

Feb 16, 2024, 8:04:49 AMFeb 16

to Manuel Rego Casasnovas, François Beaufort, blink-dev

LGTM3

Reply all

Reply to author

Forward