Skip to content

Commit

Permalink
Use logical positioning for centering a dialog
Browse files Browse the repository at this point in the history 
Fixes #2185.

Tests: web-platform-tests/wpt#4605
  • Loading branch information
@domenic @zcorpan
domenic authored and zcorpan committed Apr 7, 2017
1 parent 7915184 commit a03a914
Showing 1 changed file with 38 additions and 21 deletions.
59 changes: 38 additions & 21 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>,
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit a03a914

Please sign in to comment.