Change modal <dialog>s to be positioned via CSS

bfgeek · web-flow · commit 979af1532b80 · 2020-11-03T13:26:48.000-05:00
Fixes w3c/csswg-drafts#4645. Fixes #5178.
diff --git a/source b/source
@@ -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>
@@ -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
@@ -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>
 
@@ -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
@@ -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>
 
@@ -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>
 
@@ -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>
 
