Intent to Ship: CSS :modal Pseudo Class

549 views
Skip to first unread message

Jihwan Kim

unread,
May 24, 2022, 10:38:59 AM5/24/22
to blin...@chromium.org

Contact emails

bluewha...@gmail.com

Explainer

None

Specification

https://www.w3.org/TR/selectors-4/#modal-state

Summary

A pseudo class selector to style dialog element. The :modal pseudo-class represents an element which is in a state that excludes all interaction with elements outside it until it has been dismissed.



Blink component

Blink>CSS

TAG review



TAG review status

Pending

Risks



Interoperability and Compatibility



Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=1768535)

WebKit: Shipped/Shipping (https://bugs.webkit.org/show_bug.cgi?id=240109)

Web developers: No signals

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?



Debuggability

Automatically supported, same as other pseudo-elements.



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

Yes

Flag name



Requires code in //chrome?

False

Tracking bug

https://crbug.com/1327113

Estimated milestones

No milestones specified



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



Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5192833009975296

This intent message was generated by Chrome Platform Status.

Yoav Weiss

unread,
May 25, 2022, 2:52:51 AM5/25/22
to Jihwan Kim, blink-dev
On Tue, May 24, 2022 at 4:38 PM Jihwan Kim <bluewha...@gmail.com> wrote:

Contact emails

bluewha...@gmail.com

Explainer

None

A short text explaining what the feature is with an example would've gone a long way to help folks (like me) understand this intent. 



Specification

https://www.w3.org/TR/selectors-4/#modal-state

Summary

A pseudo class selector to style dialog element.


The spec also mentions fullscreen. Is it covered by this intent as well?
 

The :modal pseudo-class represents an element which is in a state that excludes all interaction with elements outside it until it has been dismissed.



Blink component

Blink>CSS

TAG review


I agree that a TAG review may not be necessary here since this is adopted by the CSSWG and shipped in another engine.
 


TAG review status

Pending

Risks



Interoperability and Compatibility



Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=1768535)

That's an open issue, not an indication they shipped this.
 

WebKit: Shipped/Shipping (https://bugs.webkit.org/show_bug.cgi?id=240109)

Web developers: No signals 

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?



Debuggability

Automatically supported, same as other pseudo-elements.



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

Yes

Link to the WPTs?
 


Flag name



Requires code in //chrome?

False

Tracking bug

https://crbug.com/1327113

Estimated milestones

No milestones specified



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



Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5192833009975296

This intent message was generated by Chrome Platform Status.

--
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/CAPJHA1oU6TM%3DqU6udPJ46g2%3DUoYYiObOuoYrSLboMBZe7icofQ%40mail.gmail.com.

Manuel Rego Casasnovas

unread,
May 25, 2022, 3:39:04 AM5/25/22
to blin...@chromium.org

On 25/05/2022 08:52, Yoav Weiss wrote:
>
> Is this feature fully tested by web-platform-tests
> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?
>
> Yes
>
>
> Link to the WPTs?

There are these tests for ":modal":
* http://http://wpt.live//css/selectors/modal-pseudo-class.html
*
http://http://wpt.live//css/selectors/invalidation/modal-pseudo-class-in-has.html

They are for <dialog>, but it looks there are no tests for the
fullscreen case.

Cheers,
Rego

Emilio Cobos Álvarez

unread,
May 25, 2022, 6:44:22 AM5/25/22
to blin...@chromium.org
On 5/25/22 09:38, Manuel Rego Casasnovas wrote:
> There are these tests for ":modal":
> * http://http://wpt.live//css/selectors/modal-pseudo-class.html
> *
> http://http://wpt.live//css/selectors/invalidation/modal-pseudo-class-in-has.html
>
> They are for <dialog>, but it looks there are no tests for the
> fullscreen case.

It isn't clear from the resolution[1] that this should apply to
fullscreen, and it doesn't seem like WebKit's implementation does that
(it seems a bit weird that it would since fullscreen at least in Gecko
isn't modal / doesn't make the rest of the page inert...).

I commented on the spec issue about this.

-- Emilio

[1]: https://github.com/w3c/csswg-drafts/issues/6965#issuecomment-1118033655
OpenPGP_0xE1152D0994E4BF8A.asc

Alex Russell

unread,
May 25, 2022, 12:00:45 PM5/25/22
to blink-dev, Emilio Cobos Alvarez
I'd like to see an explainer and completed TAG review before moving forward. Could this perhaps be going to OT instead?

Jihwan Kim

unread,
May 26, 2022, 2:42:31 AM5/26/22
to blink-dev, sligh...@chromium.org, Emilio Cobos Alvarez
Thanks for feedbacks!

1. Explainer : I added an csswg-drafts issue link(https://github.com/w3c/csswg-drafts/issues/6965) into explainer. It has been re-opened due to the fullscreen spec.

2. fullscreen spec : As mentioned, issue has been re-opened due to this. Further discussion is needed.

3. TAG review : I think  it would not needed since it's an existing spec discussed. If not, please let me know :)

4. Gecko vendor signal : I set gecko's signal to 'Shipped/Shipping' as the doc(bit.ly/blink-signals) defines 'Shipped/Shipping' as 'Link to public documentation or bug/issue'. I'm not sure which signal would be right if there is an open issue.

5. WPT link :There were some differences between what was written in chromestatus and I2S. I added WPT test links but on I2S that is not shown.
As Emillo mentioned, WPT links are as follows.

Thanks again!


2022년 5월 26일 목요일 오전 1시 0분 45초 UTC+9에 sligh...@chromium.org님이 작성:

Mike Taylor

unread,
May 26, 2022, 9:35:37 AM5/26/22
to Jihwan Kim, blink-dev, sligh...@chromium.org, Emilio Cobos Alvarez
On 5/26/22 2:42 AM, Jihwan Kim wrote:
Thanks for feedbacks!

1. Explainer : I added an csswg-drafts issue link(https://github.com/w3c/csswg-drafts/issues/6965) into explainer. It has been re-opened due to the fullscreen spec.

2. fullscreen spec : As mentioned, issue has been re-opened due to this. Further discussion is needed.

3. TAG review : I think  it would not needed since it's an existing spec discussed. If not, please let me know :)

4. Gecko vendor signal : I set gecko's signal to 'Shipped/Shipping' as the doc(bit.ly/blink-signals) defines 'Shipped/Shipping' as 'Link to public documentation or bug/issue'. I'm not sure which signal would be right if there is an open issue.

Thank for this feedback - I can see how that is confusing. I updated the language to say "Link to public documentation or bug/issue that demonstrates the issue has shipped (i.e., an issue that links to patches that have been merged, or a comment that a previously disabled feature is not enabled by default)."

In this case, the better choice is probably "No signal", and we should ask for an official position via the Mozilla standards position repo (the fact that Emilio tagged it as "good-first-bug" is encouraging!).

5. WPT link :There were some differences between what was written in chromestatus and I2S. I added WPT test links but on I2S that is not shown.
As Emillo mentioned, WPT links are as follows.

Thanks again!


2022년 5월 26일 목요일 오전 1시 0분 45초 UTC+9에 sligh...@chromium.org님이 작성:
I'd like to see an explainer and completed TAG review before moving forward. Could this perhaps be going to OT instead?

On Wednesday, May 25, 2022 at 3:44:22 AM UTC-7 Emilio Cobos Alvarez wrote:
On 5/25/22 09:38, Manuel Rego Casasnovas wrote:
> There are these tests for ":modal":
> * http://http://wpt.live//css/selectors/modal-pseudo-class.html
> *
> http://http://wpt.live//css/selectors/invalidation/modal-pseudo-class-in-has.html
>
> They are for <dialog>, but it looks there are no tests for the
> fullscreen case.

It isn't clear from the resolution[1] that this should apply to
fullscreen, and it doesn't seem like WebKit's implementation does that
(it seems a bit weird that it would since fullscreen at least in Gecko
isn't modal / doesn't make the rest of the page inert...).

I commented on the spec issue about this.

-- Emilio

[1]: https://github.com/w3c/csswg-drafts/issues/6965#issuecomment-1118033655
--
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.

Mike Taylor

unread,
May 26, 2022, 12:51:19 PM5/26/22
to Jihwan Kim, blink-dev, sligh...@chromium.org, Emilio Cobos Alvarez
On 5/26/22 9:35 AM, Mike Taylor wrote:
On 5/26/22 2:42 AM, Jihwan Kim wrote:

4. Gecko vendor signal : I set gecko's signal to 'Shipped/Shipping' as the doc(bit.ly/blink-signals) defines 'Shipped/Shipping' as 'Link to public documentation or bug/issue'. I'm not sure which signal would be right if there is an open issue.

Thank for this feedback - I can see how that is confusing. I updated the language to say "Link to public documentation or bug/issue that demonstrates the issue has shipped (i.e., an issue that links to patches that have been merged, or a comment that a previously disabled feature is not enabled by default)."

(this should read "now enabled by default", rather than "not"). 🙈

Arthur Sonzogni

unread,
May 31, 2022, 4:21:04 AM5/31/22
to blink-dev, Mike Taylor, Alex Russell, Emilio Cobos Alvarez, bluewha...@gmail.com
Hello,
It would be nice if there was some repository or documents were we could fill some security/privacy questions. I will do it here instead.
How does this interacts with iframes? Do you know where it might be defined in the spec? I remember for the modal dialog, there was some "inertness" attribute propagated toward parent/iframes. It was shown it can be used to leak cross-site data, or it can be used to create new communication channel. It was found and fixed here: https://crbug.com/1293191. I guess the two features relies on the same mechanism and Chrome might immune as result. Anyway, could you please make sure the behavior is specified and show how it doesn't create a cross-site leak?

Filling the https://w3ctag.github.io/security-questionnaire/ is often helpful as well ;-)

Alex Russell

unread,
Jun 1, 2022, 11:52:29 AM6/1/22
to blink-dev, bluewha...@gmail.com, Alex Russell, Emilio Cobos Alvarez
If we're first to implement, we should always be asking for design guidance from the TAG. That a feature originates in the CSS WG is not a pass for design review (although I know CSS WG participants often wish it were).

Best,

Alex

Yoav Weiss

unread,
Jun 8, 2022, 3:07:34 AM6/8/22
to blink-dev, Alex Russell, bluewha...@gmail.com, Emilio Cobos Alvarez
Hey bluewhale.marc@ :) Thanks for pushing this through!!

Can you answer Arthur's questions RE the security and privacy aspects of this?


On Wednesday, June 1, 2022 at 5:52:29 PM UTC+2 Alex Russell wrote:
If we're first to implement, we should always be asking for design guidance from the TAG. That a feature originates in the CSS WG is not a pass for design review (although I know CSS WG participants often wish it were).

Note that this has already landed in WebKit, so according to our guidance, doesn't require a TAG review.

Chris Harrelson

unread,
Jun 8, 2022, 1:59:32 PM6/8/22
to Arthur Sonzogni, blink-dev, Mike Taylor, Alex Russell, Emilio Cobos Alvarez, bluewha...@gmail.com

On Tue, May 31, 2022 at 1:21 AM Arthur Sonzogni <arthurs...@chromium.org> wrote:
Hello,
It would be nice if there was some repository or documents were we could fill some security/privacy questions. I will do it here instead.
How does this interacts with iframes? Do you know where it might be defined in the spec? I remember for the modal dialog, there was some "inertness" attribute propagated toward parent/iframes. It was shown it can be used to leak cross-site data, or it can be used to create new communication channel. It was found and fixed here: https://crbug.com/1293191. I guess the two features relies on the same mechanism and Chrome might immune as result. Anyway, could you please make sure the behavior is specified and show how it doesn't create a cross-site leak?

You are correct that the same mechanism prevented cross-site information leaks for "both". In other words, thet modal dialog feature doesn't propagate, due to the fix for issue 1293191.

:modal is a pseudoclass state that only changes style for a <dialog> element in the same document as the style sheet using :modal. Therefore a cross-origin iframe won't be able to change its document's state based on :modal. So I don't see a way that this feature will introduce new security or privacy issues. Let me know if this doesn't fully answer your questions.
 
Filling the https://w3ctag.github.io/security-questionnaire/ is often helpful as well ;-)

On Thursday, May 26, 2022 at 6:51:19 PM UTC+2 Mike Taylor wrote:
On 5/26/22 9:35 AM, Mike Taylor wrote:
On 5/26/22 2:42 AM, Jihwan Kim wrote:

4. Gecko vendor signal : I set gecko's signal to 'Shipped/Shipping' as the doc(bit.ly/blink-signals) defines 'Shipped/Shipping' as 'Link to public documentation or bug/issue'. I'm not sure which signal would be right if there is an open issue.

Thank for this feedback - I can see how that is confusing. I updated the language to say "Link to public documentation or bug/issue that demonstrates the issue has shipped (i.e., an issue that links to patches that have been merged, or a comment that a previously disabled feature is not enabled by default)."

(this should read "now enabled by default", rather than "not"). 🙈

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

Chris Harrelson

unread,
Jun 8, 2022, 2:00:58 PM6/8/22
to Arthur Sonzogni, blink-dev, Mike Taylor, Alex Russell, Emilio Cobos Alvarez, bluewha...@gmail.com
I've also added "should fullscreen be modal?" to the CSSWG agenda. Once that is resolved this intent is ready to ship, in my view.

Jihwan Kim

unread,
Jun 8, 2022, 7:50:28 PM6/8/22
to blink-dev, Chris Harrelson, blink-dev, mike...@chromium.org, sligh...@chromium.org, Emilio Cobos Alvarez, Jihwan Kim, arthurs...@chromium.org
Thanks for Chris Harrelson.
Once "should fullscreen be modal?" is resolved, I'll keep progress this.
thanks.

2022년 6월 9일 목요일 오전 3시 0분 58초 UTC+9에 Chris Harrelson님이 작성:

Chris Harrelson

unread,
Jun 23, 2022, 3:02:49 PM6/23/22
to Jihwan Kim, blink-dev, mike...@chromium.org, sligh...@chromium.org, Emilio Cobos Alvarez, arthurs...@chromium.org
The CSSWG just resolved yesterday that :modal should apply to fullscreen, and that fullscreen should be modal. So I think this intent is unblocked.

Jihwan Kim

unread,
Jun 27, 2022, 9:20:55 AM6/27/22
to blink-dev, Chris Harrelson, blink-dev, mike...@chromium.org, sligh...@chromium.org, Emilio Cobos Alvarez, arthurs...@chromium.org, Jihwan Kim
I have updated the I2S contents including explainer, vendor signals those are commented.
We may now progress this I2S.
thanks.

2022년 6월 24일 금요일 오전 4시 2분 49초 UTC+9에 Chris Harrelson님이 작성:

Manuel Rego Casasnovas

unread,
Jun 29, 2022, 11:27:09 AM6/29/22
to Jihwan Kim, blink-dev, Chris Harrelson, mike...@chromium.org, sligh...@chromium.org, Emilio Cobos Alvarez, arthurs...@chromium.org
Does Chromium implementation match the spec resolution, so :modal
applies to fullscreen too?

Are there tests checking that?

Cheers,
Rego
> <https://crbug.com/1293191>. I guess the two
>>> <https://bit.ly/blink-signals>) defines
>>> 'Shipped/Shipping' as 'Link to public
>>> documentation or bug/issue'. I'm not sure
>>> which signal would be right if there is an
>>> open issue.
>>
>> Thank for this feedback - I can see how that
>> is confusing. I updated the language to say
>> "Link to public documentation or bug/issue
>> that demonstrates the issue has shipped (i.e.,
>> an issue that links to patches that have been
>> merged, or a comment that a previously
>> disabled feature is not enabled by default)."
>>
> (this should read "now enabled by default",
> rather than "not"). 🙈
>
> --
> 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/f75f277a-11ca-4482-9af0-7764f1241eafn%40chromium.org
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/f75f277a-11ca-4482-9af0-7764f1241eafn%40chromium.org?utm_medium=email&utm_source=footer>.
>
> --
> 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/293471ff-f32c-4223-b2cd-994d5d018c59n%40chromium.org
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/293471ff-f32c-4223-b2cd-994d5d018c59n%40chromium.org?utm_medium=email&utm_source=footer>.
>
> --
> 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/09a12ad7-8b0d-4c34-87da-f2f08367242cn%40chromium.org
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/09a12ad7-8b0d-4c34-87da-f2f08367242cn%40chromium.org?utm_medium=email&utm_source=footer>.

Philip Jägenstedt

unread,
Jun 29, 2022, 11:49:16 AM6/29/22
to Manuel Rego Casasnovas, Jihwan Kim, blink-dev, Chris Harrelson, mike...@chromium.org, sligh...@chromium.org, Emilio Cobos Alvarez, arthurs...@chromium.org
LGTM1 to ship this with the latest spec changes applied, and WPT
written and passing for that.
> To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/bfeccc32-0e8c-86b4-994a-1392b94b081e%40igalia.com.

Manuel Rego Casasnovas

unread,
Jun 29, 2022, 11:50:25 AM6/29/22
to Philip Jägenstedt, Jihwan Kim, blink-dev, Chris Harrelson, mike...@chromium.org, sligh...@chromium.org, Emilio Cobos Alvarez, arthurs...@chromium.org
LGTM2 too with Philip's requests.

Mike West

unread,
Jun 29, 2022, 11:51:00 AM6/29/22
to Manuel Rego Casasnovas, Philip Jägenstedt, Jihwan Kim, blink-dev, Chris Harrelson, mike...@chromium.org, sligh...@chromium.org, Emilio Cobos Alvarez, arthurs...@chromium.org

Joe Medley

unread,
Jun 30, 2022, 11:46:27 AM6/30/22
to Mike West, Manuel Rego Casasnovas, Philip Jägenstedt, Jihwan Kim, blink-dev, Chris Harrelson, mike...@chromium.org, sligh...@chromium.org, Emilio Cobos Alvarez, arthurs...@chromium.org
When are you planning to ship this?
Joe Medley | Technical Writer, Chrome DevRel | jme...@google.com | 816-678-7195
If an API's not documented it doesn't exist.


Jihwan Kim

unread,
Jun 30, 2022, 12:26:55 PM6/30/22
to blink-dev, Joe Medley, Manuel Rego, Philip Jägenstedt, Jihwan Kim, blink-dev, Chris Harrelson, mike...@chromium.org, sligh...@chromium.org, Emilio Cobos Alvarez, arthurs...@chromium.org, mk...@chromium.org
Patch is almost ready as follows.

But there is no WPT test to check if it is :modal when fullscreen, and I'm writing it now.

2022년 7월 1일 금요일 오전 12시 46분 27초 UTC+9에 Joe Medley님이 작성:

Joe Medley

unread,
Jun 30, 2022, 1:17:41 PM6/30/22
to Jihwan Kim, blink-dev, Manuel Rego, Philip Jägenstedt, Chris Harrelson, mike...@chromium.org, sligh...@chromium.org, Emilio Cobos Alvarez, arthurs...@chromium.org, mk...@chromium.org
I asked my question badly. In which milestone are you planning to ship this?

Joe Medley | Technical Writer, Chrome DevRel | jme...@google.com | 816-678-7195
If an API's not documented it doesn't exist.

Jihwan Kim

unread,
Jul 1, 2022, 12:55:38 PM7/1/22
to blink-dev, Joe Medley, blink-dev, Manuel Rego, Philip Jägenstedt, Chris Harrelson, mike...@chromium.org, sligh...@chromium.org, Emilio Cobos Alvarez, arthurs...@chromium.org, mk...@chromium.org, Jihwan Kim
No, it's my bad.
I'm planning to ship this in 106.
Thanks!

2022년 7월 1일 금요일 오전 2시 17분 41초 UTC+9에 Joe Medley님이 작성:

Mason Freed

unread,
Aug 24, 2022, 3:03:36 PM8/24/22
to blink-dev, bluewha...@gmail.com, jme...@google.com, blink-dev, Manuel Rego, Philip Jägenstedt, Chris Harrelson, Mike Taylor, Alex Russell, Emilio Cobos Alvarez, Arthur Sonzogni, Mike West
On Friday, July 1, 2022 at 9:55:38 AM UTC-7 bluewha...@gmail.com wrote:
No, it's my bad.
I'm planning to ship this in 106.
Thanks!

Quick update: it appears that the change in Chromium landed in r1026764, which is v105.0.5195.0. So it's shipping/shipped in M105, not M106. If that's true, would you mind please updating chromestatus accordingly?

Jihwan Kim

unread,
Aug 25, 2022, 11:19:06 AM8/25/22
to blink-dev, mas...@chromium.org, Jihwan Kim, jme...@google.com, blink-dev, Manuel Rego, Philip Jägenstedt, Chris Harrelson, mike...@chromium.org, sligh...@chromium.org, Emilio Cobos Alvarez, arthurs...@chromium.org, mk...@chromium.org
I've updated chromestatus. Thanks :)

2022년 8월 25일 목요일 오전 4시 3분 36초 UTC+9에 mas...@chromium.org님이 작성:
Reply all
Reply to author
Forward
0 new messages