Use logical positioning for centering a dialog

domenic · zcorpan · commit a03a914b3698 · 2017-04-07T17:44:51.000+02:00
Fixes whatwg#2185. Tests: web-platform-tests/wpt#4605
diff --git a/source b/source
@@ -3320,6 +3320,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
               <dfn data-x-href="https://drafts.csswg.org/css2/box.html#propdef-padding-bottom">'padding-bottom'</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css2/box.html#propdef-padding-left">'padding-left'</dfn>, and
               <dfn data-x-href="https://drafts.csswg.org/css2/box.html#propdef-padding-right">'padding-right'</dfn> properties</li>
+      <li>The <dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#propdef-top">'top'</dfn>,
+              <dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#propdef-bottom">'bottom'</dfn>,
+              <dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#propdef-left">'left'</dfn>, and
+              <dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#propdef-right">'right'</dfn> properties</li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#float-position">'float'</dfn> property</li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#flow-control">'clear'</dfn> property</li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css2/visudet.html#the-width-property">'width'</dfn> property</li>
@@ -3434,14 +3438,16 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
     <p>The <dfn
     data-x-href="https://drafts.csswg.org/css-overflow/#propdef-overflow">'overflow'</dfn> property
-    is defined in the <cite>CSS Overflow</cite> specification. <ref spec=CSSOVERFLOW></p>
+    and its <dfn
+    data-x-href="https://drafts.csswg.org/css-overflow/#valdef-overflow-hidden">'hidden'</dfn> value
+    are defined in the <cite>CSS Overflow</cite> specification. <ref spec=CSSOVERFLOW></p>
 
     <p>The following features are defined in the <cite>CSS Positioned Layout</cite> specification:
     <ref spec=CSSPOSITION></p>
 
     <ul class="brief">
-      <li>The <dfn data-x-href="https://drafts.csswg.org/css-position/#position-property">'position'</dfn> property</li>
-      <li>The <dfn data-x-href="https://drafts.csswg.org/css-position/#propdef-top">'top'</dfn> property</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>
     </ul>
 
     <p>The <dfn
@@ -3477,7 +3483,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <ul class="brief">
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#direction">'direction'</dfn> property</li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#unicode-bidi">'unicode-bidi'</dfn> property</li>
-      <li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-size">block size</dfn>,
+      <li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-flow-direction">block flow direction</dfn>,
+              <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-size">block size</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#inline-size">inline size</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-start">block-start</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-end">block-end</dfn>,
@@ -57414,32 +57421,42 @@ interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
   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 top static position, for the purposes of calculating the
-  <span>used value</span> of the <span>'top'</span> property, is the value that would place the
-  element's top <span>margin edge</span> as far from the top of the <span>viewport</span> as the
-  element's bottom <span>margin edge</span> from the bottom of the <span>viewport</span>, if the
-  element's height is less than the height of the <span>viewport</span>, and otherwise is the value
-  that would place the element's top <span>margin edge</span> at the top of the
+  <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>
-  width (as measured in <span data-x="'px'">CSS pixels</span>), then the user agent must recreate
-  the element's boxes, recalculating its top static position as in the previous paragraph.</p>
+  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 top static position of a <code>dialog</code> element with <span>centered alignment</span>
-  must remain the element's top static position until its boxes are recreated. (The element's static
-  position is only used in calculating the <span>used value</span> of the <span>'top'</span>
-  property in certain situations; it's not used, for instance, to position the element if its
-  <span>'position'</span> property is set to 'static'.)</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 'hidden').</p>
+  is set to <span>'hidden'</span>).</p>
 
   <hr>
 
@@ -109942,7 +109959,7 @@ listing, plaintext, pre, xmp {
 dialog:not([open]) { display: none; }
 dialog {
   position: absolute;
-  left: 0; right: 0;
+  offset-inline-start: 0; offset-inline-end: 0;
   width: fit-content;
   height: fit-content;
   margin: auto;
