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

Change dialog to position:fixed, and remove dialog alignment modes. #5936

Merged
merged 8 commits into from
Nov 3, 2020
Merged

Change dialog to position:fixed, and remove dialog alignment modes. #5936

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ab983f0
Change dialog to position:fixed, and remove dialog alignment modes.
bfgeek Sep 22, 2020
15bf0ab
Add :modal pseudo-class
bfgeek Oct 2, 2020
bc610f1
CSSWG resolution making :modal an internal pseudo-class.
bfgeek Oct 28, 2020
0138915
Now in prose.
bfgeek Oct 28, 2020
e9afd60
move to rendering section.
bfgeek Oct 28, 2020
f0231fa
indentation nit (also seems wrong for xref CSS but that's prolly best…
annevk Oct 29, 2020
d2039fb
back to calc() version.
bfgeek Oct 29, 2020
a75a0d8
Merge branch 'bfgeek/dialog' of https://github.com/bfgeek/html into b…
bfgeek Oct 29, 2020
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
67 changes: 21 additions & 46 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3306,6 +3306,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://drafts.csswg.org/css2/#flow-control">'clear'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css2/#the-width-property">'width'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css2/#the-height-property">'height'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css2/#min-max-widths">'max-width'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css2/#min-max-heights">'max-height'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css2/#propdef-line-height">'line-height'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css2/#propdef-vertical-align">'vertical-align'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css2/#content%E2%91%A0">'content'</dfn> property</li>
Expand Down Expand Up @@ -3364,6 +3366,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-block-start-width">'border-block-start-width'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-block-size">'block-size'</dfn> property</li>
<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>
</ul>

<p>The following terms and features are defined in <cite>CSS Color</cite>: <ref
Expand Down Expand Up @@ -57233,8 +57237,6 @@ interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p>Add an <code data-x="attr-dialog-open">open</code> attribute to the <code>dialog</code>
element, whose value is the empty string.</p></li>

<li><p>Set the <code>dialog</code> to the <span>normal alignment</span> mode.</p></li>

<li><p>Run the <span>dialog focusing steps</span> for the <code>dialog</code> element.</p></li>
</ol>

Expand All @@ -57251,9 +57253,10 @@ interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p>If <var>subject</var> is not <span>connected</span>, then throw an
<span>"<code>InvalidStateError</code>"</span> <code>DOMException</code>.</p></li>

<li><p>Add an <code data-x="attr-dialog-open">open</code> attribute to <var>subject</var>, whose value is the empty string.</p></li>
<li><p>Add an <code data-x="attr-dialog-open">open</code> attribute to <var>subject</var>, whose
value is the empty string.</p></li>

<li><p>Set the <code>dialog</code> to the <span>centered alignment</span> mode.</p></li>
Copy link
Member

Choose a reason for hiding this comment

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

So is the intention really that show() and showModal() now have the same visual behavior? That's a bit surprising, but if it's what everyone wants...

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, this is a bit surprising to me too. I was under the impression that all discussions that happened around it were targeting centered alignment mode.

Copy link

@dpogue dpogue Sep 23, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

I agree this behaviour seems surprising.
It makes sense for showModal() to use position: fixed, but I wouldn't expect that behaviour when calling show().

At risk of this ended up back in the CSSWG, it feels like what would make sense is something like this:

dialog {
  position: absolute;
}

dialog:modal { /* Hypothetical pseudoclass that does not currently exist */
  position: fixed;
}

Copy link
Member Author

Choose a reason for hiding this comment

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

@sefeng211 - Thoughts on above? I'd be happy with the above proposal where the applied CSS would be:

dialog:modal {
  position: fixed;
  overflow: auto;
  inset-block-start: 0; inset-block-end: 0;
  /* 6px + 2em = border + padding */
  max-width: calc(100% - 6px - 2em);
  max-height: calc(100% - 6px - 2em);
}

Copy link
Contributor

Choose a reason for hiding this comment

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

I agree. Make dialog to be absolute and modal dialog to be fixed looks much safer!

<li><p>Set the <span>is modal</span> flag of <var>subject</var> to true.</p></li>

<li>
<p>Let <var>subject</var>'s <span>node document</span> be <span data-x="blocked by a
Expand Down Expand Up @@ -57335,6 +57338,8 @@ interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p>Remove <var>subject</var>'s <code data-x="attr-dialog-open">open</code>
attribute.</p></li>

<li><p>Set the <span>is modal</span> flag of <var>subject</var> to false.</p></li>

<li><p>If the argument <var>result</var> was provided, then set the <code
data-x="dom-dialog-returnValue">returnValue</code> attribute to the value of <var>result</var>.</p></li>

Expand Down Expand Up @@ -57371,48 +57376,8 @@ interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<hr>

<p>A <code>dialog</code> element is in one of two modes: <dfn>normal alignment</dfn> or
<dfn>centered alignment</dfn>. When a <code>dialog</code> element is created, it must be placed in
the <span>normal alignment</span> mode. In this mode, normal CSS requirements apply to the
element. The <span>centered alignment</span> mode is only used for <code>dialog</code> elements
that are in the <span>top layer</span>. <ref spec=FULLSCREEN> <ref spec=CSS></p>

<p>When an element <var>subject</var> is placed in <span>centered alignment</span> mode, and when
it is in that mode and has new rendering boxes created, the user agent must set up the element
such that its static position of the edge that corresponds to <var>subject</var>'s parent's
<span>block-start</span> edge, for the purposes of calculating the <span>used value</span> of the
appropriate box offset property (<span>'top'</span>, <span>'right'</span>, <span>'bottom'</span>,
or <span>'left'</span>), is the value that would place the element's <span>margin edge</span> on
the side that corresponds to <var>subject</var>'s parent's <span>block-start</span> side as far
from the same-side edge of the <span>viewport</span> as the element's opposing side <span>margin
edge</span> from that same-side edge of the <span>viewport</span>, if the element's dimension
(<span>'width'</span> or <span>'height'</span>) in <var>subject</var>'s parent's <span>block flow
direction</span> is less than the same-axis dimension of the <span>viewport</span>, and otherwise
is the value that would place the element's <span>margin edge</span> on the side that corresponds
to <var>subject</var>'s parent's <span>block-start</span> side at the same-side edge of the
<span>viewport</span>.</p>

<p>If there is a <code>dialog</code> element with <span>centered alignment</span> and that is
<span>being rendered</span> when its <span>browsing context</span> changes <span>viewport</span>
dimensions (as measured in <span data-x="'px'">CSS pixels</span>), or when this
<code>dialog</code> element's parent changes <span>block flow direction</span>, then the user
agent must recreate the element's boxes, recalculating its edge that corresponds to this
<code>dialog</code> element's parent's <span>block-start</span> edge as in the previous
paragraph.</p>

<p>This static position of a <code>dialog</code> element's edge with <span>centered
alignment</span> must remain the element's static position of that edge until its boxes are
recreated. (The element's static position is only used in calculating the <span>used value</span>
of the appropriate box offset property (<span>'top'</span>, <span>'right'</span>,
<span>'bottom'</span>, or <span>'left'</span>) in certain situations; it's not used, for instance,
to position the element if its <span>'position'</span> property is set to
<span>'static'</span>.)</p>

<p>User agents in visual interactive media should allow the user to pan the <span>viewport</span>
to access all parts of a <code>dialog</code> element's <span>border box</span>, even if the
element is larger than the <span>viewport</span> and the <span>viewport</span> would otherwise not
have a scroll mechanism (e.g. because the <span>viewport</span>'s <span>'overflow'</span> property
is set to <span>'hidden'</span>).</p>
<p>Each <code>dialog</code> element has an <dfn>is modal</dfn> flag. When a <code>dialog</code>
element is created, this flag must be set to false.</p>

<hr>
annevk marked this conversation as resolved.
Show resolved Hide resolved

Expand Down Expand Up @@ -113147,7 +113112,17 @@ 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, when its <span>is modal</span> flag is true, is expected to
act as if it had a user-agent-level style sheet rule setting the following properties:</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>

<h4>Phrasing content</h4>

Expand Down