Skip to content

Commit

Permalink
Remove anchored positioning of <dialog>s
Browse files Browse the repository at this point in the history 
This was mentioned briefly in the discussion in whatwg#1929. <dialog> only has
one implementation currently, and that implementation is not planning to
implement the anchoring feature, per
https://bugs.chromium.org/p/chromium/issues/detail?id=410346.
  • Loading branch information
@domenic
domenic authored and Alice Boxhall committed Jan 7, 2019
1 parent 106d561 commit 5e1cc30
Showing 1 changed file with 11 additions and 287 deletions.
298 changes: 11 additions & 287 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56613,8 +56613,8 @@ dictionary <dfn>RelatedEventInit</dfn> : <span>EventInit</span> {
interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
[<span>CEReactions</span>] attribute boolean <span data-x="dom-dialog-open">open</span>;
attribute DOMString <span data-x="dom-dialog-returnValue">returnValue</span>;
[<span>CEReactions</span>] void <span data-x="dom-dialog-show">show</span>(optional (<span>MouseEvent</span> or <span>Element</span>) anchor);
[<span>CEReactions</span>] void <span data-x="dom-dialog-showModal">showModal</span>(optional (<span>MouseEvent</span> or <span>Element</span>) anchor);
[<span>CEReactions</span>] void <span data-x="dom-dialog-show">show</span>();
[<span>CEReactions</span>] void <span data-x="dom-dialog-showModal">showModal</span>();
[<span>CEReactions</span>] void <span data-x="dom-dialog-close">close</span>(optional DOMString returnValue);
};</pre>
</dd>
Expand Down Expand Up @@ -56644,24 +56644,20 @@ interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<dl class="domintro">

<dt><var>dialog</var> . <code subdfn data-x="dom-dialog-show">show</code>( [ <var>anchor</var> ] )</dt>
<dt><var>dialog</var> . <code subdfn data-x="dom-dialog-show">show</code>()</dt>

<dd>

<p>Displays the <code>dialog</code> element.</p>

<p>The argument, if provided, provides an anchor point to which the element will be fixed.</p>

</dd>

<dt><var>dialog</var> . <code subdfn data-x="dom-dialog-showModal">showModal</code>( [ <var>anchor</var> ] )</dt>
<dt><var>dialog</var> . <code subdfn data-x="dom-dialog-showModal">showModal</code>()</dt>

<dd>

<p>Displays the <code>dialog</code> element and makes it the top-most modal dialog.</p>

<p>The argument, if provided, provides an anchor point to which the element will be fixed.</p>

<p>This method honors the <code data-x="attr-fe-autofocus">autofocus</code> attribute.</p>

</dd>
Expand Down Expand Up @@ -56703,9 +56699,7 @@ 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>If the <code data-x="dom-dialog-show">show()</code> method was invoked with an argument,
<span>set up the position</span> of the <code>dialog</code> element, using that argument as the
anchor. Otherwise, set the <code>dialog</code> to the <span>normal alignment</span> mode.</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>

Expand Down Expand Up @@ -56740,10 +56734,7 @@ interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<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>If the <code data-x="dom-dialog-showModal">showModal()</code> method was invoked with an
argument, <span>set up the position</span> of <var>subject</var>, using that argument
as the anchor. Otherwise, set the <code>dialog</code> to the <span>centered alignment</span>
mode.</p></li>
<li><p>Set the <code>dialog</code> to the <span>centered alignment</span> mode.</p></li>

<li><p>Let <var>subject</var>'s <span>node document</span> be <span data-x="blocked by a
modal dialog">blocked by the modal dialog</span> <var>subject</var>.</p></li>
Expand Down Expand Up @@ -56872,11 +56863,11 @@ interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<hr>

<p>All <code>dialog</code> elements are always in one of three modes: <dfn>normal alignment</dfn>,
<dfn>centered alignment</dfn>, and <dfn>magic 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>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
Expand All @@ -56899,221 +56890,6 @@ interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</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>When a user agent is to <dfn>set up the position</dfn> of an element <var>subject</var> using an anchor <var>anchor</var>, it must run the following
steps:</p>

<ol>

<li>

<p>If <var>anchor</var> is a <code>MouseEvent</code> object, then run these
substeps:</p>

<ol>

<li><p>If <var>anchor</var>'s target element does not have a rendered box, or is in a
different document than <var>subject</var>, then let <var>subject</var> be
in the <span>centered alignment</span> mode, and abort the <span>set up the position</span>
steps.</p></li>

<li><p>Let <var>anchor element</var> be an anonymous element rendered as a box with
zero height and width (so its <span>margin box</span> and <span>border box</span> both just
form a point), positioned so that its top and left are at the coordinate identified by the
event, and whose properties all compute to their initial values.</p></li>

</ol>

<p>Otherwise, let <var>anchor element</var> be <var>anchor</var>.</p>

</li>

<li><p>Put <var>subject</var> in the <span>magic alignment</span> mode, aligned to <var>anchor element</var>.</p></li>

</ol>

<p>While an element <var>A</var> has <span>magic alignment</span>, aligned to an element
<var>B</var>, the following requirements apply:</p>

<ul>

<li>

<p>If at any time either <var>A</var> or <var>B</var> cease having rendered
boxes, <var>A</var> and <var>B</var> cease being in the same
<code>Document</code>, or <var>B</var> ceases being earlier than <var>A</var> in <span>tree order</span>, then, if <var>subject</var> is in the
<span>pending dialog stack</span>, let <var>subject</var>'s mode become <span>centered
alignment</span>, otherwise, let <var>subject</var>'s mode become <span>normal
alignment</span>.</p>

</li>

<li>

<p><var>A</var>'s <span>'position'</span> property must compute to the keyword '<span
data-x="css-position-absolute-anchored">absolute-anchored</span>' rather than whatever it would
otherwise compute to (i.e. the <span>'position'</span> property's <span>specified value</span>
is ignored).</p>

<p class="note">The '<span data-x="css-position-absolute-anchored">absolute-anchored</span>'
keyword's requirements are described below.</p>

</li>

<li>

<p>The anchor points for <var>A</var> and <var>B</var> are defined as per the
appropriate entry in the following list:</p>

<dl class="switch">

<dt>If the <span>computed value</span> of <span>'anchor-point'</span> is 'none' on both
<var>A</var> and <var>B</var>

<dd>
<p>The anchor points of <var>A</var> and <var>B</var> are the center points
of their respective first boxes' <span data-x="border box">border boxes</span>.


<dt>If the <span>computed value</span> of <span>'anchor-point'</span> is 'none' on <var>A</var>
and a specific point on <var>B</var>

<dd>
<p>The anchor point of <var>B</var> is the point given by its <span>'anchor-point'</span>
property.

<p>If the anchor point of <var>B</var> is the center point of <var>B</var>'s
first box's <span>border box</span>, then <var>A</var>'s anchor point is the center point of
its first box's <span>margin box</span>.

<p>Otherwise, <var>A</var>'s anchor point is on one of its <span
data-x="margin edge">margin edges</span>. Consider four hypothetical half-infinite lines
L1, L2, L3, and L4 that each start in the center of <var>B</var>'s first box's
<span>border box</span>, and that extend respectively through the
top left corner, top right corner, bottom right corner, and bottom left corner of
<var>B</var>'s first box's <span>border box</span>. <var>A</var>'s anchor point is determined
by the location of <var>B</var>'s anchor point relative to these four hypothetical lines, as
follows:

<p>If the anchor point of <var>B</var> lies on L1 or L2, or inside the area bounded by L1 and
L2 that also contains the points above <var>B</var>'s first box's <span>border box</span>,
then let <var>A</var>'s anchor point be the horizontal center of <var>A</var>'s bottom
<span>margin edge</span>.</p>

<p>Otherwise, if the anchor point of <var>B</var> lies on L3 or L4, or inside the
area bounded by L3 and L4 that also contains the points below <var>B</var>'s first
box's <span>border box</span>, then let <var>A</var>'s anchor point be the horizontal center
of <var>A</var>'s top <span>margin edge</span>.</p>

<p>Otherwise, if the anchor point of <var>B</var> lies inside the area bounded by L4 and L1
that also contains the points to the left of <var>B</var>'s first box's <span>border
box</span>, then let <var>A</var>'s anchor point be the vertical center of <var>A</var>'s
right <span>margin edge</span>.</p>

<p>Otherwise, the anchor point of <var>B</var> lies inside the area bounded by L2 and L3 that
also contains the points to the right of <var>B</var>'s first box's <span>border box</span>;
let <var>A</var>'s anchor point be the vertical center of <var>A</var>'s left <span>margin
edge</span>.</p>


<dt>If the <span>computed value</span> of <span>'anchor-point'</span> is a specific point on
<var>A</var> and 'none' on <var>B</var>

<dd>
<p>The anchor point of <var>A</var> is the point given by its <span>'anchor-point'</span>
property.

<p>If the anchor point of <var>A</var> is the center point of <var>A</var>'s
first box's <span>margin box</span>, then <var>B</var>'s anchor point is the center point of
its first box's <span>border box</span>.

<p>Otherwise, <var>B</var>'s anchor point is on one of its <span
data-x="border edge">border edges</span>. Consider four hypothetical half-infinite lines
L1, L2, L3, and L4 that each start in the center of <var>A</var>'s first box's
<span>margin box</span>, and that extend respectively through the
top left corner, top right corner, bottom right corner, and bottom left corner of
<var>A</var>'s first box's <span>margin box</span>. <var>B</var>'s anchor point is determined
by the location of <var>A</var>'s anchor point relative to these four hypothetical lines, as
follows:

<p>If the anchor point of <var>A</var> lies on L1 or L2, or inside the area bounded by L1 and
L2 that also contains the points above <var>A</var>'s first box's <span>margin box</span>,
then let <var>B</var>'s anchor point be the horizontal center of <var>B</var>'s bottom
<span>border edge</span>.</p>

<p>Otherwise, if the anchor point of <var>A</var> lies on L3 or L4, or inside the
area bounded by L4 and L4 that also contains the points below <var>A</var>'s first
box's <span>margin box</span>, then let <var>B</var>'s anchor point be the horizontal center
of <var>B</var>'s top <span>border edge</span>.</p>

<p>Otherwise, if the anchor point of <var>A</var> lies inside the area bounded by L4 and L1
that also contains the points to the left of <var>A</var>'s first box's <span>margin
box</span>, then let <var>B</var>'s anchor point be the vertical center of <var>B</var>'s
right <span>border edge</span>.</p>

<p>Otherwise, the anchor point of <var>A</var> lies inside the area bounded by L2 and L3 that
also contains the points to the right of <var>A</var>'s first box's <span>margin box</span>;
let <var>B</var>'s anchor point be the vertical center of <var>B</var>'s left <span>border
edge</span>.</p>


<dt>If the <span>computed value</span> of <span>'anchor-point'</span> is a specific point on
both <var>A</var> and <var>B</var>

<dd>
<p>The anchor points of <var>A</var> and <var>B</var> are the points given
by their respective <span>'anchor-point'</span> properties.

</dl>

<p class="note">The rules above generally use <var>A</var>'s <em>margin</em> box, but
<var>B</var>'s <em>border</em> box. This is because while <var>A</var> always
has a <span>margin box</span>, and using the <span>margin box</span> allows for the dialog to be
positioned offset from the box it is annotating, <var>B</var> sometimes does not have a
<span>margin box</span> (e.g. if it is a <span>'table-cell'</span>), or has a <span>margin
box</span> whose position may be not entirely clear (e.g. in the face of <span
data-x="collapsing margins">margin collapsing</span> and <span>'clear'</span> handling of
<span>in-flow</span> blocks).</p>

<p>In cases where <var>B</var> does not have a <span>border box</span> but its
<span>border box</span> is used by the algorithm above, user agents must use its first box's
<span>content area</span> instead. (This is in particular an issue with boxes in tables that
have <span>'border-collapse'</span> set to 'collapse'.)</p>

</li>

<li>

<p>When an element's <span>'position'</span> property computes to '<dfn
data-x="css-position-absolute-anchored">absolute-anchored</dfn>', the <span>'float'</span>
property does not apply and must compute to 'none', the <span>'display'</span> property must
compute to a value as described by the table in <a
href="https://drafts.csswg.org/css2/visuren.html#dis-pos-flo">the section of the CSS
specification describing the <cite>relationships between 'display', 'position', and
'float'</cite></a>, and the element's box must be positioned using the rules for absolute
positioning but with its static position set such that if the box is positioned in its static
position, its anchor point is exactly aligned over the anchor point of the element to which it
is <span data-x="magic alignment">magically aligned</span>. Elements aligned in this way are
<i>absolutely positioned</i>. For the purposes of determining the <span>containing block</span>
of other elements, the '<span data-x="css-position-absolute-anchored">absolute-anchored</span>'
keyword must be treated like the 'absolute' keyword.</p>

</li>

</ul>

<p class="note">The trivial example of an element that does not have a rendered box is one whose
<span>'display'</span> property computes to 'none'. However, there are many other cases; e.g.
table columns do not have boxes (their properties merely affect other boxes).</p>

<p class="note">If an element to which another element is anchored changes rendering, the anchored
element will be repositioned accordingly. (In other words, the requirements above are live,
they are not just calculated once per anchored element.)</p>

<p class="note">The '<span data-x="css-position-absolute-anchored">absolute-anchored</span>'
keyword is not a keyword that can be specified in CSS; the <span>'position'</span> property can
only compute to this value if the <code>dialog</code> element is positioned via the APIs described
above.</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
Expand Down Expand Up @@ -57149,58 +56925,6 @@ interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {



<h5>Anchor points</h5>

<p class="critical">This section will eventually be moved to a CSS specification; it is specified
here only on an interim basis until an editor can be found to own this.</p>

<table class="css-property">
<caption><dfn>'anchor-point'</dfn></caption>
<tr>
<th>Value:
<td> none | <span>&lt;position></span>
<tr>
<th>Initial:
<td> none
<tr>
<th>Applies to:
<td> all elements
<tr>
<th>Inherited:
<td> no
<tr>
<th>Percentages:
<td> refer to width or height of box; see prose
<tr>
<th>Media:
<td> visual
<tr>
<th>Computed value:
<td> The <span>specified value</span>, but with any lengths replaced by their corresponding absolute length
<tr>
<th>Animatable:
<td> no
<tr>
<th>Canonical order:
<td> per grammar
</table>

<p>The <span>'anchor-point'</span> property specifies a point to which dialog boxes are to be
aligned.</p>

<p>If the value is a <span>&lt;position></span>, the anchor point is the point given by the value,
which must be interpreted relative to the element's first rendered box's <span>margin box</span>.
Percentages must be calculated relative to the element's first rendered box's <span>margin
box</span> (specifically, its width for the horizontal position and its height for the vertical
position). <ref spec=CSSVALUES> <ref spec=CSS></p>

<p>If the value is the keyword 'none', then no explicit anchor point is defined. The user agent
will pick an anchor point automatically if necessary (as described in the definition of the
<code data-x="dom-dialog-open">open()</code> method above).</p>

<!--REMOVE-TOPIC:CSS-->



<h3 split-filename="scripting">Scripting</h3>

Expand Down

0 comments on commit 5e1cc30

Please sign in to comment.