Skip to content

Commit

Permalink
Change modal <dialog>s to be positioned via CSS
Browse files Browse the repository at this point in the history 
Fixes w3c/csswg-drafts#4645. Fixes whatwg#5178.
  • Loading branch information
@bfgeek
bfgeek authored Nov 3, 2020
1 parent 895fd80 commit 979af15
Showing 1 changed file with 21 additions and 46 deletions.
67 changes: 21 additions & 46 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3308,6 +3308,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 @@ -3366,6 +3368,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 @@ -57344,8 +57348,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 @@ -57362,9 +57364,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>
<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 @@ -57446,6 +57449,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 @@ -57482,48 +57487,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>

Expand Down Expand Up @@ -114374,7 +114339,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

0 comments on commit 979af15

Please sign in to comment.