Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix user-agent style rules for top layer transitions #9387

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Fix user-agent style rules for top layer transitions #9387

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
96d20f4
Fix ::backdrop user-agent rule for popovers
josepharhar Jun 5, 2023
e432274
Merge remote-tracking branch 'origin/main' into backdrop
josepharhar Aug 3, 2023
769e586
add dialog rules
josepharhar Aug 3, 2023
50afc38
add references
josepharhar Aug 3, 2023
3c72d74
remove user-select and visibility
josepharhar Aug 3, 2023
b68224e
remove overlay rule
josepharhar Aug 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 42 additions & 18 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3587,6 +3587,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-inline-size">'inline-size'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-inset-block-start">'inset-block-start'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-inset-block-end">'inset-block-end'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-inset">'inset'</dfn> property</li>
</ul>

<p>The following terms and features are defined in <cite>CSS Color</cite>: <ref
Expand Down Expand Up @@ -3626,7 +3627,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
spec=CSSBG></p>

<ul class="brief">
<li>The <dfn data-x-href="https://drafts.csswg.org/css-backgrounds/#propdef-background-color">'background-color'</dfn>,
<li>The <dfn data-x-href="https://drafts.csswg.org/css-backgrounds/#propdef-background">'background'</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-backgrounds/#propdef-background-color">'background-color'</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-backgrounds/#propdef-background-image">'background-image'</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-backgrounds/#propdef-background-repeat">'background-repeat'</dfn>,
<dfn data-x-href="https://drafts.csswg.org/css-backgrounds/#propdef-background-attachment">'background-attachment'</dfn>,
Expand Down Expand Up @@ -3795,6 +3797,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/css-position/#absolute-position">absolutely-positioned</dfn></li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-position/#position-property">'position'</dfn> property and its
<dfn data-x-href="https://drafts.csswg.org/css-position/#valdef-position-static">'static'</dfn> value</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-position-4/#overlay">'overlay'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-position-4/#backdrop">::backdrop</dfn> pseudo-element</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-position-4/#document-top-layer">top layer</dfn>
(an <span data-x="set">ordered set</span>)</li>
<li><dfn data-x-href="https://drafts.csswg.org/css-position-4/#add-an-element-to-the-top-layer">add an element to the top layer</dfn></li>
Expand Down Expand Up @@ -3956,6 +3960,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
pseudo-class</li>
<li><dfn data-x-href="https://drafts.csswg.org/selectors/#indicate-focus">indicate focus</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/selectors/#pseudo-element">pseudo-element</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/selectors/#originating-element">originating element</dfn></li>
</ul>

<p>The following features are defined in <cite>CSS Values and Units</cite>: <ref
Expand Down Expand Up @@ -124170,16 +124175,6 @@ dialog {
background-color: Canvas;
color: CanvasText;
}
dialog:modal {
position: fixed;
overflow: auto;
inset-block: 0;
max-width: calc(100% - 6px - 2em);
max-height: calc(100% - 6px - 2em);
}
dialog::backdrop {
background: rgba(0,0,0,0.1);
}

[popover]:not(:popover-open):not(dialog[open]) {
display:none;
Expand All @@ -124202,13 +124197,6 @@ dialog:popover-open {
background-color: Canvas;
}

:popover-open::backdrop {
position: fixed;
inset: 0;
pointer-events: none !important;
background-color: transparent;
}

slot {
display: contents;
}</code></pre>
Expand Down Expand Up @@ -124252,6 +124240,42 @@ form { margin-block-end: 1em; }</code></pre>
<span>'text-align'</span> property set to 'justify' in a <span data-x="presentational
hints">presentational hint</span>, and to <span>align descendants</span> to the left.</p>

<p>The <code>dialog</code> element is expected to act as if it had a user-agent-level style sheet
rule setting the following properties when it is in the <span>top layer</span>:</p>

<ul>
<li><span>'position'</span> property to 'fixed'</li>
<li><span>'overflow'</span> property to 'auto'</li>
<li><span>'inset-block-start'</span> property to '0'</li>
<li><span>'inset-block-end'</span> property to '0'</li>
<li><span>'max-width'</span> property to 'calc(100% - 6px - 2em)'</li>
<li><span>'max-height'</span> property to 'calc(100% - 6px - 2em)'</li>
</ul>

<p>The <code>::backdrop</code> <span>pseudo-element</span> is expected to act as if it had a
user-agent-level style sheet rule setting the following properties when its <span>originating
element</span> is a <code>dialog</code> in the <span>top layer</span>:</p>

<ul>
<li><span>'position'</span> property to 'fixed'</li>
<li><span>'inset'</span> to '0'</li>
<li><span>'background'</span> to 'rgba(0,0,0,0.1)'</li>
</ul>

<p>The <code>::backdrop</code> <span>pseudo-element</span> is expected to act as if it had a
user-agent-level style sheet rule setting the following properties when its <span>originating
element</span> is in the <span data-x="popover-showing-state">popover showing state</span> or
while the <span>originating element</span> is still in the <span>top layer</span> immediately
following its transition from the <span data-x="popover-showing-state">popover showing
state</span> to the <span data-x="popover-hidden-state">popover hidden state</span>:</p>

<ul>
<li><span>'position'</span> property to 'fixed'</li>
<li><span>'inset'</span> property to '0'</li>
<li><span>'pointer-events'</span> property to 'none !important'</li>
<li><span>'background-color'</span> property to 'transparent'</li>
</ul>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: you are eating a newline here.

<h4>Phrasing content</h4>

<pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
Expand Down