Bug 226175 - Add modal dialog UA styles
Summary: Add modal dialog UA styles
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Tim Nguyen (:ntim)
URL:
Keywords: InRadar
Depends on: 226169 227522
Blocks: dialog-element
  Show dependency treegraph
 
Reported: 2021-05-24 07:00 PDT by Tim Nguyen (:ntim)
Modified: 2021-06-30 09:32 PDT (History)
12 users (show)

See Also:


Attachments
Patch (8.63 KB, patch)
2021-06-30 04:33 PDT, Tim Nguyen (:ntim)
no flags Details | Formatted Diff | Diff
Patch (29.19 KB, patch)
2021-06-30 07:37 PDT, Tim Nguyen (:ntim)
no flags Details | Formatted Diff | Diff
Patch (29.85 KB, patch)
2021-06-30 09:27 PDT, Tim Nguyen (:ntim)
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Tim Nguyen (:ntim) 2021-05-24 07:00:19 PDT
Bug 226169 adds the non-modal dialog element UA styles, but the modal dialog styles are different:

https://html.spec.whatwg.org/#flow-content-3

"""
The dialog element, when its is modal flag is true, is expected to act as if it had a user-agent-level style sheet rule setting the following properties:

'position' property to 'fixed'
'overflow' property to 'auto'
'inset-block-start' property to '0'
'inset-block-end' property to '0'
'max-width' property to 'calc(100% - 6px - 2em)'
'max-height' property to 'calc(100% - 6px - 2em)'
"""

This needs an internal pseudo selector like ::-internal-modal-dialog to be able to apply those styles from the UA stylesheet.
Comment 1 Radar WebKit Bug Importer 2021-05-31 07:01:15 PDT
<rdar://problem/78687090>
Comment 2 Tim Nguyen (:ntim) 2021-06-30 04:33:28 PDT
Created attachment 432582 [details]
Patch
Comment 3 Tim Nguyen (:ntim) 2021-06-30 07:37:00 PDT
Created attachment 432591 [details]
Patch
Comment 4 Simon Fraser (smfr) 2021-06-30 09:16:49 PDT
Comment on attachment 432591 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=432591&action=review

> Source/WebCore/css/dialog.css:25
> +    max-width: calc(100% - 6px - 2em);
> +    max-height: calc(100% - 6px - 2em);

Where did these come from?
Comment 5 Tim Nguyen (:ntim) 2021-06-30 09:27:31 PDT
Created attachment 432605 [details]
Patch
Comment 6 Tim Nguyen (:ntim) 2021-06-30 09:28:30 PDT
(In reply to Simon Fraser (smfr) from comment #4)
> Comment on attachment 432591 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=432591&action=review
> 
> > Source/WebCore/css/dialog.css:25
> > +    max-width: calc(100% - 6px - 2em);
> > +    max-height: calc(100% - 6px - 2em);
> 
> Where did these come from?

As wonky as they are, they are actually from the spec, see comment 0.
Comment 7 Tim Nguyen (:ntim) 2021-06-30 09:32:10 PDT
Committed r279414 (239279@main): <https://commits.webkit.org/239279@main>