[html5] r8121 - [e] (0) Cleanup of <dialog> section (no text changes) Affected topics: CSS, DOM [...]
whatwg at whatwg.org
whatwg at whatwg.org
Thu Aug 1 15:17:01 PDT 2013
Author: ianh
Date: 2013-08-01 15:17:00 -0700 (Thu, 01 Aug 2013)
New Revision: 8121
Modified:
complete.html
index
source
Log:
[e] (0) Cleanup of <dialog> section (no text changes)
Affected topics: CSS, DOM APIs, HTML
Modified: complete.html
===================================================================
--- complete.html 2013-08-01 21:50:59 UTC (rev 8120)
+++ complete.html 2013-08-01 22:17:00 UTC (rev 8121)
@@ -57884,155 +57884,123 @@
</dd>
- </dl><div class=impl>
+ </dl><!--ADD-TOPIC:CSS--><div class=impl>
-<!--CLEANUP-->
- <p>When the <dfn id=dom-dialog-show title=dom-dialog-show><code>show()</code></dfn>
- method is invoked, the user agent must run the following steps:</p>
+ <p>When the <dfn id=dom-dialog-show title=dom-dialog-show><code>show()</code></dfn> method is invoked, the user
+ agent must run the following steps:</p>
- <ol><li><p>If the element already has an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, then abort these
- steps.</li>
+ <ol><li><p>If the element already has an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, then
+ abort these steps.</li>
- <li><p>Add an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute
- to the <code><a href=#the-dialog-element>dialog</a></code> element, whose value is the empty
- string.</li>
+ <li><p>Add an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute to the <code><a href=#the-dialog-element>dialog</a></code>
+ element, whose value is the empty string.</li>
- <li><p>If the <code title=dom-dialog-show><a href=#dom-dialog-show>show()</a></code> method
- was invoked with an argument, <a href=#set-up-the-position>set up the position</a> of
- the <code><a href=#the-dialog-element>dialog</a></code> element, using that argument as the anchor.
- Otherwise, <a href=#set-up-the-default-static-position>set up the default static position</a> of the
- dialog element.</li>
+ <li><p>If the <code title=dom-dialog-show><a href=#dom-dialog-show>show()</a></code> method was invoked with an argument,
+ <a href=#set-up-the-position>set up the position</a> of the <code><a href=#the-dialog-element>dialog</a></code> element, using that argument as the
+ anchor. Otherwise, <a href=#set-up-the-default-static-position>set up the default static position</a> of the dialog
+ element.</li>
- </ol><hr><p>Each <code><a href=#document>Document</a></code> has a stack of <code><a href=#the-dialog-element>dialog</a></code>
- elements known as the <dfn id=pending-dialog-stack>pending dialog stack</dfn>. When a
- <code><a href=#document>Document</a></code> is created, this stack must be initialized to
- be empty.</p>
+ </ol><hr><p>Each <code><a href=#document>Document</a></code> has a stack of <code><a href=#the-dialog-element>dialog</a></code> elements known as the
+ <dfn id=pending-dialog-stack>pending dialog stack</dfn>. When a <code><a href=#document>Document</a></code> is created, this stack must be
+ initialized to be empty.</p>
- <p>When an element is added to the <a href=#pending-dialog-stack>pending dialog
- stack</a>, it must also be added to the <a href=#top-layer>top layer</a>
- layer. When an element is removed from the <a href=#pending-dialog-stack>pending dialog
+ <p>When an element is added to the <a href=#pending-dialog-stack>pending dialog stack</a>, it must also be added to the
+ <a href=#top-layer>top layer</a> layer. When an element is removed from the <a href=#pending-dialog-stack>pending dialog
stack</a>, it must be removed from the <a href=#top-layer>top layer</a>. <a href=#refsFULLSCREEN>[FULLSCREEN]</a></p>
- <p>When the <dfn id=dom-dialog-showmodal title=dom-dialog-showModal><code>showModal()</code></dfn> method
- is invoked, the user agent must run the following steps:</p>
+ <p>When the <dfn id=dom-dialog-showmodal title=dom-dialog-showModal><code>showModal()</code></dfn> method is invoked,
+ the user agent must run the following steps:</p>
- <ol><li><p>Let <var title="">subject</var> be the <code><a href=#the-dialog-element>dialog</a></code>
- element on which the method was invoked.</li>
+ <ol><li><p>Let <var title="">subject</var> be the <code><a href=#the-dialog-element>dialog</a></code> element on which the method was
+ invoked.</li>
- <li><p>If <var title="">subject</var> already has an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, then throw an
- <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these
- steps.</li>
+ <li><p>If <var title="">subject</var> already has an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code>
+ attribute, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
- <li><p>If <var title="">subject</var> is not <a href=#in-a-document>in a
- <code>Document</code></a>, then throw an
- <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these
- steps.</li>
+ <li><p>If <var title="">subject</var> is not <a href=#in-a-document>in a <code>Document</code></a>, then throw
+ an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
- <li><p>Add an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute
- to <var title="">subject</var>, whose value is the empty
- string.</li>
+ <li><p>Add an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute to <var title="">subject</var>, whose value is the empty string.</li>
- <li><p>If the <code title=dom-dialog-showModal><a href=#dom-dialog-showmodal>showModal()</a></code>
- method was invoked with an argument, <a href=#set-up-the-position>set up the
- position</a> of <var title="">subject</var>, using that argument
- as the anchor. Otherwise, <a href=#set-up-the-default-static-position>set up the default static
- position</a> of the dialog element.</li>
+ <li><p>If the <code title=dom-dialog-showModal><a href=#dom-dialog-showmodal>showModal()</a></code> method was invoked with an
+ argument, <a href=#set-up-the-position>set up the position</a> of <var title="">subject</var>, using that argument as
+ the anchor. Otherwise, <a href=#set-up-the-default-static-position>set up the default static position</a> of the dialog
+ element.</li>
- <li><p>Let <var title="">subject</var>'s <code><a href=#document>Document</a></code> be
- <a href=#blocked-by-a-modal-dialog title="blocked by a modal dialog">blocked by the modal
- dialog</a> <var title="">subject</var>.</li>
+ <li><p>Let <var title="">subject</var>'s <code><a href=#document>Document</a></code> be <a href=#blocked-by-a-modal-dialog title="blocked by a modal
+ dialog">blocked by the modal dialog</a> <var title="">subject</var>.</li>
- <li><p>Push <var title="">subject</var> onto <var title="">subject</var>'s <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending
- dialog stack</a>.</li>
+ <li><p>Push <var title="">subject</var> onto <var title="">subject</var>'s
+ <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog stack</a>.</li>
- <li><p>Let <var title="">control</var> be the first element in tree
- order whose nearest ancestor <code><a href=#the-dialog-element>dialog</a></code> element is <var title="">subject</var> and that has an <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute
- specified, if any.</li>
+ <li><p>Let <var title="">control</var> be the first element in tree order whose nearest ancestor
+ <code><a href=#the-dialog-element>dialog</a></code> element is <var title="">subject</var> and that has an <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute specified, if any.</li>
- <li><p>If there is no <var title="">control</var>, then abort these
- steps.</li>
+ <li><p>If there is no <var title="">control</var>, then abort these steps.</li>
<li><p>Run the <a href=#focusing-steps>focusing steps</a> for <var title="">control</var>.</li>
- </ol><p>If at any time a <code><a href=#the-dialog-element>dialog</a></code> element is <a href=#remove-an-element-from-a-document title="remove an element from a document">removed from a
- <code>Document</code></a>, then if that <code><a href=#the-dialog-element>dialog</a></code> is in
- that <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog stack</a>, the
- following steps must be run:</p>
+ </ol><p>If at any time a <code><a href=#the-dialog-element>dialog</a></code> element is <a href=#remove-an-element-from-a-document title="remove an element from a
+ document">removed from a <code>Document</code></a>, then if that <code><a href=#the-dialog-element>dialog</a></code> is in that
+ <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog stack</a>, the following steps must be run:</p>
- <ol><li><p>Let <var title="">subject</var> be that <code><a href=#the-dialog-element>dialog</a></code>
- element and <var title="">document</var> be the
- <code><a href=#document>Document</a></code> from which it is being removed.</li>
+ <ol><li><p>Let <var title="">subject</var> be that <code><a href=#the-dialog-element>dialog</a></code> element and <var title="">document</var> be the <code><a href=#document>Document</a></code> from which it is being removed.</li>
- <li><p>Remove <var title="">subject</var> from <var title="">document</var>'s <a href=#pending-dialog-stack>pending dialog
- stack</a>.</li>
+ <li><p>Remove <var title="">subject</var> from <var title="">document</var>'s <a href=#pending-dialog-stack>pending
+ dialog stack</a>.</li>
- <li><p>If <var title="">document</var>'s <a href=#pending-dialog-stack>pending dialog
- stack</a> is not empty, then let <var title="">document</var> be
- <a href=#blocked-by-a-modal-dialog title="blocked by a modal dialog">blocked by the modal
- dialog</a> that is at the top of <var title="">document</var>'s
- <a href=#pending-dialog-stack>pending dialog stack</a>. Otherwise, let <var title="">document</var> be no longer <a href=#blocked-by-a-modal-dialog>blocked by a modal
+ <li><p>If <var title="">document</var>'s <a href=#pending-dialog-stack>pending dialog stack</a> is not empty, then let
+ <var title="">document</var> be <a href=#blocked-by-a-modal-dialog title="blocked by a modal dialog">blocked by the modal
+ dialog</a> that is at the top of <var title="">document</var>'s <a href=#pending-dialog-stack>pending dialog
+ stack</a>. Otherwise, let <var title="">document</var> be no longer <a href=#blocked-by-a-modal-dialog>blocked by a modal
dialog</a> at all.</li>
- </ol><p>When the <dfn id=dom-dialog-close title=dom-dialog-close><code>close()</code></dfn>
- method is invoked, the user agent must <a href=#close-the-dialog>close the dialog</a>
- that the method was invoked on. If the method was invoked with an
- argument, that argument must be used as the return value; otherwise,
- there is no return value.</p>
+ </ol><p>When the <dfn id=dom-dialog-close title=dom-dialog-close><code>close()</code></dfn> method is invoked, the user
+ agent must <a href=#close-the-dialog>close the dialog</a> that the method was invoked on. If the method was invoked
+ with an argument, that argument must be used as the return value; otherwise, there is no return
+ value.</p>
<!--TOPIC:HTML-->
- <p>When a <code><a href=#the-dialog-element>dialog</a></code> element <var title="">subject</var> is
- to be <dfn id=close-the-dialog title="close the dialog">closed</dfn>, optionally with a
- return value <var title="">result</var>, the user agent must run the
- following steps:</p>
+ <p>When a <code><a href=#the-dialog-element>dialog</a></code> element <var title="">subject</var> is to be <dfn id=close-the-dialog title="close the
+ dialog">closed</dfn>, optionally with a return value <var title="">result</var>, the user agent
+ must run the following steps:</p>
- <ol><li><p>If <var title="">subject</var> does not have an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, then throw an
- <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these
- steps.</li>
+ <ol><li><p>If <var title="">subject</var> does not have an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code>
+ attribute, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
- <li><p>Remove <var title="">subject</var>'s <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute.</li>
+ <li><p>Remove <var title="">subject</var>'s <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code>
+ attribute.</li>
- <li><p>If the argument was passed a <var title="">result</var>,
- then set the <code title=dom-dialog-returnValue><a href=#dom-dialog-returnvalue>returnValue</a></code> attribute to the
- value of <var title="">result</var>.</li>
+ <li><p>If the argument was passed a <var title="">result</var>, then set the <code title=dom-dialog-returnValue><a href=#dom-dialog-returnvalue>returnValue</a></code> attribute to the value of <var title="">result</var>.</li>
<li>
- <p>If <var title="">subject</var> is in its <code><a href=#document>Document</a></code>'s
- <a href=#pending-dialog-stack>pending dialog stack</a>, then run these substeps:</p>
+ <p>If <var title="">subject</var> is in its <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog
+ stack</a>, then run these substeps:</p>
- <ol><li><p>Remove <var title="">subject</var> from that <a href=#pending-dialog-stack>pending
- dialog stack</a>.</li>
+ <ol><li><p>Remove <var title="">subject</var> from that <a href=#pending-dialog-stack>pending dialog stack</a>.</li>
- <li><p>If that <a href=#pending-dialog-stack>pending dialog stack</a> is not empty,
- then let <var title="">subject</var>'s <code><a href=#document>Document</a></code> be
- <a href=#blocked-by-a-modal-dialog title="blocked by a modal dialog">blocked by the modal
- dialog</a> that is at the top of the <a href=#pending-dialog-stack>pending dialog
- stack</a>. Otherwise, let <var title="">document</var> be no
- longer <a href=#blocked-by-a-modal-dialog>blocked by a modal dialog</a> at all.</li>
+ <li><p>If that <a href=#pending-dialog-stack>pending dialog stack</a> is not empty, then let <var title="">subject</var>'s <code><a href=#document>Document</a></code> be <a href=#blocked-by-a-modal-dialog title="blocked by a modal
+ dialog">blocked by the modal dialog</a> that is at the top of the <a href=#pending-dialog-stack>pending dialog
+ stack</a>. Otherwise, let <var title="">document</var> be no longer <a href=#blocked-by-a-modal-dialog>blocked by a modal
+ dialog</a> at all.</li>
</ol></li>
- <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
- event</a> named <dfn id=event-close title=event-close><code>close</code></dfn> at <var title="">subject</var>.</li>
+ <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <dfn id=event-close title=event-close><code>close</code></dfn> at <var title="">subject</var>.</li>
- </ol><!--TOPIC:DOM APIs--><p>The <dfn id=dom-dialog-returnvalue title=dom-dialog-returnValue><code>returnValue</code></dfn> IDL
- attribute, on getting, must return the last value to which it was
- set. On setting, it must be set to the new value. When the element
- is created, it must be set to the empty string.</p>
+ </ol><!--TOPIC:DOM APIs--><p>The <dfn id=dom-dialog-returnvalue title=dom-dialog-returnValue><code>returnValue</code></dfn> IDL attribute, on
+ getting, must return the last value to which it was set. On setting, it must be set to the new
+ value. When the element is created, it must be set to the empty string.</p>
<!--TOPIC:HTML-->
- <hr><p><strong>Canceling dialogs</strong>: When a
- <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog stack</a> is not
- empty, user agents may provide a user interface that, upon
- activation, <a href=#queue-a-task title="queue a task">queues a task</a> to
- <a href=#fire-a-simple-event>fire a simple event</a> named <dfn id=event-cancel title=event-cancel><code>cancel</code></dfn> that is cancelable at
- the top <code><a href=#the-dialog-element>dialog</a></code> element on the <code><a href=#document>Document</a></code>'s
- <a href=#pending-dialog-stack>pending dialog stack</a>. The default action of this event
- must be to <a href=#close-the-dialog>close the dialog</a> with no return value.</p>
+ <hr><p><strong>Canceling dialogs</strong>: When a <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog
+ stack</a> is not empty, user agents may provide a user interface that, upon activation, <a href=#queue-a-task title="queue a task">queues a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <dfn id=event-cancel title=event-cancel><code>cancel</code></dfn> that is cancelable at the top <code><a href=#the-dialog-element>dialog</a></code>
+ element on the <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog stack</a>. The default action of
+ this event must be to <a href=#close-the-dialog>close the dialog</a> with no return value.</p>
- <p class=note>An example of such a UI mechanism would be the user
- pressing the "Escape" key.</p>
+ <p class=note>An example of such a UI mechanism would be the user pressing the "Escape" key.</p>
<hr><p>The containing block of all <code><a href=#the-dialog-element>dialog</a></code> elements that are <i>absolutely positioned</i>
must be the initial containing block.</p>
@@ -58042,17 +58010,12 @@
in the <a href=#mundanely-aligned>mundanely aligned</a> mode and the user agent must <a href=#set-up-the-default-static-position>set up the default static
position</a> for that element, without an anchor.</p>
-<!--CLEANUP-->
- <p>When a user agent is to <dfn id=set-up-the-default-static-position>set up the default static
- position</dfn> of an element <var title="">subject</var> without an
- anchor, if that element is <a href=#being-rendered>being rendered</a>, it must set up the element such that its top static
- position, for the purposes of calculating the used value of the
- 'top' property, is the value that would place the element's top
- margin edge as far from the top of the viewport as the element's
- bottom margin edge from the bottom of the viewport, if the element's
- height is less than the height of the viewport, and otherwise is the
- value that would place the element's top margin edge at the top of
- the viewport.</p>
+ <p>When a user agent is to <dfn id=set-up-the-default-static-position>set up the default static position</dfn> of an element <var title="">subject</var> without an anchor, if that element is <a href=#being-rendered>being rendered</a>, it must
+ set up the element such that its top static position, for the purposes of calculating the used
+ value of the 'top' property, is the value that would place the element's top margin edge as far
+ from the top of the viewport as the element's bottom margin edge from the bottom of the viewport,
+ if the element's height is less than the height of the viewport, and otherwise is the value that
+ would place the element's top margin edge at the top of the viewport.</p>
<p>If there is a <code><a href=#the-dialog-element>dialog</a></code> element that is <a href=#mundanely-aligned>mundanely aligned</a> and that is
<a href=#being-rendered>being rendered</a> when its <a href=#browsing-context>browsing context</a> changes viewport width (as
@@ -58069,33 +58032,30 @@
calculating the used value of the 'top' property in certain situations; it's not used, for
instance, to position the element if its 'position' property is set to 'static'.)</p>
-<!--CLEANUP-->
- <p>When a user agent is to <dfn id=set-up-the-position>set up the position</dfn> of an
- element <var title="">subject</var> using an anchor <var title="">anchor</var>, it must run the following steps:</p>
+ <p>When a user agent is to <dfn id=set-up-the-position>set up the position</dfn> of an element <var title="">subject</var> using an anchor <var title="">anchor</var>, it must run the following
+ steps:</p>
<ol><li>
- <p>If <var title="">anchor</var> is a <code><a href=#mouseevent>MouseEvent</a></code>
- object, then run these substeps:</p>
+ <p>If <var title="">anchor</var> is a <code><a href=#mouseevent>MouseEvent</a></code> object, then run these
+ substeps:</p>
- <ol><li><p>If <var title="">anchor</var>'s target element does not
- have a rendered box, or is in a different document than <var title="">subject</var>, then let <var title="">subject</var> be <span>mundanely positioned</span>, <a href=#set-up-the-default-static-position>set up the default static
- position</a> of <var title="">subject</var> without an anchor, and abort the <a href=#set-up-the-position>set up the
- position</a> steps.</li>
+ <ol><li><p>If <var title="">anchor</var>'s target element does not have a rendered box, or is in a
+ different document than <var title="">subject</var>, then let <var title="">subject</var> be
+ <span>mundanely positioned</span>, <a href=#set-up-the-default-static-position>set up the default static position</a> of <var title="">subject</var> without an anchor, and abort the <a href=#set-up-the-position>set up the position</a>
+ steps.</li>
- <li><p>Let <var title="">anchor element</var> be an anonymous
- element rendered as a box with zero height and width (so its
- margin and border boxes 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.</li>
+ <li><p>Let <var title="">anchor element</var> be an anonymous element rendered as a box with
+ zero height and width (so its margin and border boxes 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.</li>
</ol><p>Otherwise, let <var title="">anchor element</var> be <var title="">anchor</var>.</p>
</li>
- <li><p>Let <var title="">subject</var> be <a href=#magically-aligned>magically
- aligned</a> to <var title="">anchor element</var>.</li>
+ <li><p>Let <var title="">subject</var> be <a href=#magically-aligned>magically aligned</a> to <var title="">anchor
+ element</var>.</li>
</ol><p>While an element <var title="">A</var> is <a href=#magically-aligned>magically aligned</a> to an element <var title="">B</var>, the following requirements apply:</p>
@@ -58124,127 +58084,100 @@
<p>The anchor points for <var title="">A</var> and <var title="">B</var> are defined as per the
appropriate entry in the following list:</p>
- <dl class=switch><dt>If the computed value of 'anchor-point' is 'none' on both
- <var title="">A</var> and <var title="">B</var>
+ <dl class=switch><dt>If the computed value of 'anchor-point' is 'none' on both <var title="">A</var> and <var title="">B</var>
<dd>
+ <p>The anchor points of <var title="">A</var> and <var title="">B</var> are the center points
+ of their respective first boxes' border boxes.
- <p>The anchor points of <var title="">A</var> and <var title="">B</var> are the center points of their respective first
- boxes' border boxes.
+ <dt>If the computed value of 'anchor-point' is 'none' on <var title="">A</var> and a specific
+ point on <var title="">B</var>
- <dt>If the computed value of 'anchor-point' is 'none' on <var title="">A</var> and a specific point on <var title="">B</var>
-
<dd>
- <p>The anchor point of <var title="">B</var> is the point given
- by its 'anchor-point' property.
+ <p>The anchor point of <var title="">B</var> is the point given by its 'anchor-point'
+ property.
- <p>If the anchor point of <var title="">B</var> is the center
- point of <var title="">B</var>'s first box's border box, then
- <var title="">A</var>'s anchor point is the center point of its
+ <p>If the anchor point of <var title="">B</var> is the center point of <var title="">B</var>'s
+ first box's border box, then <var title="">A</var>'s anchor point is the center point of its
first box's margin box.
- <p>Otherwise, <var title="">A</var>'s anchor point is on one of
- its margin edges. Consider four hypothetical half-infinite lines
- L1, L2, L3, and L4 that each start in the center of <var title="">B</var>'s first box's border box, and that extend
- respectively through the top left corner, top right corner,
- bottom right corner, and bottom left corner of <var title="">B</var>'s first box's border box. <var title="">A</var>'s anchor point is determined by the location of
- <var title="">B</var>'s anchor point relative to these four
- hypothetical lines, as follows:
+ <p>Otherwise, <var title="">A</var>'s anchor point is on one of its margin edges. Consider
+ four hypothetical half-infinite lines L1, L2, L3, and L4 that each start in the center of <var title="">B</var>'s first box's border box, and that extend respectively through the top left
+ corner, top right corner, bottom right corner, and bottom left corner of <var title="">B</var>'s first box's border box. <var title="">A</var>'s anchor point is determined
+ by the location of <var title="">B</var>'s anchor point relative to these four hypothetical
+ lines, as follows:
- <p>If the anchor point of <var title="">B</var> lies on L1 or
- L2, or inside the area bounded by L1 and L2 that also contains
- the points above <var title="">B</var>'s first box's border box,
- then let <var title="">A</var>'s anchor point be the horizontal
- center of <var title="">A</var>'s bottom margin edge.</p>
+ <p>If the anchor point of <var title="">B</var> lies on L1 or L2, or inside the area bounded
+ by L1 and L2 that also contains the points above <var title="">B</var>'s first box's border
+ box, then let <var title="">A</var>'s anchor point be the horizontal center of <var title="">A</var>'s bottom margin edge.</p>
- <p>Otherwise, if the anchor point of <var title="">B</var> lies
- on L3 or L4, or inside the area bounded by L4 and L4 that also
- contains the points below <var title="">B</var>'s first box's
- border box, then let <var title="">A</var>'s anchor point be the
- horizontal center of <var title="">A</var>'s top margin
- edge.</p>
+ <p>Otherwise, if the anchor point of <var title="">B</var> lies on L3 or L4, or inside the
+ area bounded by L4 and L4 that also contains the points below <var title="">B</var>'s first
+ box's border box, then let <var title="">A</var>'s anchor point be the horizontal center of
+ <var title="">A</var>'s top margin edge.</p>
- <p>Otherwise, if the anchor point of <var title="">B</var> lies
- inside the area bounded by L4 and L1 that also contains the
- points to the left of <var title="">B</var>'s first box's border
- box, then let <var title="">A</var>'s anchor point be the
- vertical center of <var title="">A</var>'s right margin
- edge.</p>
+ <p>Otherwise, if the anchor point of <var title="">B</var> lies inside the area bounded by L4
+ and L1 that also contains the points to the left of <var title="">B</var>'s first box's border
+ box, then let <var title="">A</var>'s anchor point be the vertical center of <var title="">A</var>'s right margin edge.</p>
- <p>Otherwise, the anchor point of <var title="">B</var> lies
- inside the area bounded by L2 and L3 that also contains the
- points to the right of <var title="">B</var>'s first box's
- border box; let <var title="">A</var>'s anchor point be the
- vertical center of <var title="">A</var>'s left margin edge.</p>
+ <p>Otherwise, the anchor point of <var title="">B</var> lies inside the area bounded by L2 and
+ L3 that also contains the points to the right of <var title="">B</var>'s first box's border
+ box; let <var title="">A</var>'s anchor point be the vertical center of <var title="">A</var>'s left margin edge.</p>
- <dt>If the computed value of 'anchor-point' is a specific point
- on <var title="">A</var> and 'none' on <var title="">B</var>
+ <dt>If the computed value of 'anchor-point' is a specific point on <var title="">A</var> and
+ 'none' on <var title="">B</var>
<dd>
- <p>The anchor point of <var title="">A</var> is the point given
- by its 'anchor-point' property.
+ <p>The anchor point of <var title="">A</var> is the point given by its 'anchor-point'
+ property.
- <p>If the anchor point of <var title="">A</var> is the center
- point of <var title="">A</var>'s first box's margin box, then
- <var title="">B</var>'s anchor point is the center point of its
+ <p>If the anchor point of <var title="">A</var> is the center point of <var title="">A</var>'s
+ first box's margin box, then <var title="">B</var>'s anchor point is the center point of its
first box's border box.
- <p>Otherwise, <var title="">B</var>'s anchor point is on one of
- its border edges. Consider four hypothetical half-infinite lines
- L1, L2, L3, and L4 that each start in the center of <var title="">A</var>'s first box's margin box, and that extend
- respectively through the top left corner, top right corner,
- bottom right corner, and bottom left corner of <var title="">A</var>'s first box's margin box. <var title="">B</var>'s anchor point is determined by the location of
- <var title="">A</var>'s anchor point relative to these four
- hypothetical lines, as follows:
+ <p>Otherwise, <var title="">B</var>'s anchor point is on one of its border edges. Consider
+ four hypothetical half-infinite lines L1, L2, L3, and L4 that each start in the center of <var title="">A</var>'s first box's margin box, and that extend respectively through the top left
+ corner, top right corner, bottom right corner, and bottom left corner of <var title="">A</var>'s first box's margin box. <var title="">B</var>'s anchor point is determined
+ by the location of <var title="">A</var>'s anchor point relative to these four hypothetical
+ lines, as follows:
- <p>If the anchor point of <var title="">A</var> lies on L1 or
- L2, or inside the area bounded by L1 and L2 that also contains
- the points above <var title="">A</var>'s first box's margin box,
- then let <var title="">B</var>'s anchor point be the horizontal
- center of <var title="">B</var>'s bottom border edge.</p>
+ <p>If the anchor point of <var title="">A</var> lies on L1 or L2, or inside the area bounded
+ by L1 and L2 that also contains the points above <var title="">A</var>'s first box's margin
+ box, then let <var title="">B</var>'s anchor point be the horizontal center of <var title="">B</var>'s bottom border edge.</p>
- <p>Otherwise, if the anchor point of <var title="">A</var> lies
- on L3 or L4, or inside the area bounded by L4 and L4 that also
- contains the points below <var title="">A</var>'s first box's
- margin box, then let <var title="">B</var>'s anchor point be the
- horizontal center of <var title="">B</var>'s top border
- edge.</p>
+ <p>Otherwise, if the anchor point of <var title="">A</var> lies on L3 or L4, or inside the
+ area bounded by L4 and L4 that also contains the points below <var title="">A</var>'s first
+ box's margin box, then let <var title="">B</var>'s anchor point be the horizontal center of
+ <var title="">B</var>'s top border edge.</p>
- <p>Otherwise, if the anchor point of <var title="">A</var> lies
- inside the area bounded by L4 and L1 that also contains the
- points to the left of <var title="">A</var>'s first box's margin
- box, then let <var title="">B</var>'s anchor point be the
- vertical center of <var title="">B</var>'s right border
- edge.</p>
+ <p>Otherwise, if the anchor point of <var title="">A</var> lies inside the area bounded by L4
+ and L1 that also contains the points to the left of <var title="">A</var>'s first box's margin
+ box, then let <var title="">B</var>'s anchor point be the vertical center of <var title="">B</var>'s right border edge.</p>
- <p>Otherwise, the anchor point of <var title="">A</var> lies
- inside the area bounded by L2 and L3 that also contains the
- points to the right of <var title="">A</var>'s first box's
- margin box; let <var title="">B</var>'s anchor point be the
- vertical center of <var title="">B</var>'s left border edge.</p>
+ <p>Otherwise, the anchor point of <var title="">A</var> lies inside the area bounded by L2 and
+ L3 that also contains the points to the right of <var title="">A</var>'s first box's margin
+ box; let <var title="">B</var>'s anchor point be the vertical center of <var title="">B</var>'s left border edge.</p>
- <dt>If the computed value of 'anchor-point' is a specific point
- on both <var title="">A</var> and <var title="">B</var>
+ <dt>If the computed value of 'anchor-point' is a specific point on both <var title="">A</var>
+ and <var title="">B</var>
<dd>
- <p>The anchor points of <var title="">A</var> and <var title="">B</var> are the points given by their respective
- 'anchor-point' properties.
+ <p>The anchor points of <var title="">A</var> and <var title="">B</var> are the points given
+ by their respective 'anchor-point' properties.
- </dl><p class=note>The rules above generally use <var title="">A</var>'s <em>margin</em> box, but <var title="">B</var>'s <em>border</em> box. This is because while <var title="">A</var> always has a margin box, and using the margin box
- allows for the dialog to be positioned offset from the box it is
- annotating, <var title="">B</var> sometimes does not have a margin
- box (e.g. if it is a table-cell), or has a margin box whose
- position may be not entirely clear (e.g. in the face of margin
- collapsing and 'clear' handling of in-flow blocks).</p>
+ </dl><p class=note>The rules above generally use <var title="">A</var>'s <em>margin</em> box, but
+ <var title="">B</var>'s <em>border</em> box. This is because while <var title="">A</var> always
+ has a margin box, and using the margin box allows for the dialog to be positioned offset from
+ the box it is annotating, <var title="">B</var> sometimes does not have a margin box (e.g. if it
+ is a table-cell), or has a margin box whose position may be not entirely clear (e.g. in the face
+ of margin collapsing and 'clear' handling of in-flow blocks).</p>
- <p>In cases where <var title="">B</var> does not have a border box
- but its border box is used by the algorithm above, user agents
- must use its first box's content area instead. (This is in
- particular an issue with boxes in tables that have
- 'border-collapse' set to 'collapse'.)</p>
+ <p>In cases where <var title="">B</var> does not have a border box but its border box is used by
+ the algorithm above, user agents must use its first box's content area instead. (This is in
+ particular an issue with boxes in tables that have 'border-collapse' set to 'collapse'.)</p>
</li>
@@ -58263,10 +58196,9 @@
</li>
- </ul><!--CLEANUP--><p class=note>The trivial example of an element that does not have
- a rendered box is one whose 'display' 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>
+ </ul><p class=note>The trivial example of an element that does not have a rendered box is one whose
+ 'display' 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 be repositioned accordingly. (In other words, the requirements above are live,
@@ -58277,12 +58209,13 @@
this value if the <code><a href=#the-dialog-element>dialog</a></code> element is positioned via the APIs described above.</p>
<p class=note>Elements positioned in this way are not clipped by the 'overflow' property of
- ancestors (nor moved by the resulting scrolling mechanisms), since the containing block is the initial containing block. Anchoring to an element that
- <em>is</em> so clipped (and shifted) can therefore result in unexpected effects (where the
- anchored element moves along with the clipped element, but isn't itself clipped).</p>
+ ancestors (nor moved by the resulting scrolling mechanisms), since the containing block is the
+ initial containing block. Anchoring to an element that <em>is</em> so clipped (and shifted) can
+ therefore result in unexpected effects (where the anchored element moves along with the clipped
+ element, but isn't itself clipped).</p>
- <hr><!--TOPIC:DOM APIs--><p>The <dfn id=dom-dialog-open title=dom-dialog-open><code>open</code></dfn> IDL
- attribute must <a href=#reflect>reflect</a> the <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> content attribute.</p>
+ <hr><!--TOPIC:DOM APIs--><p>The <dfn id=dom-dialog-open title=dom-dialog-open><code>open</code></dfn> IDL attribute must
+ <a href=#reflect>reflect</a> the <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> content attribute.</p>
<!--TOPIC:HTML-->
</div>
@@ -58290,9 +58223,8 @@
<h5 id=anchor-points><span class=secno>4.11.7.1 </span>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>
+ <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>'anchor-point'</caption>
<tr><th>Value:
@@ -58313,23 +58245,20 @@
<td> no
<tr><th>Canonical order:
<td> per grammar
- </table><p>The 'anchor-point' property specifies a point to which dialog
- boxes are to be aligned.</p>
+ </table><p>The 'anchor-point' property specifies a point to which dialog boxes are to be aligned.</p>
- <p>If the value is a <position>, the alignment point is the point
- given by the value, which must be interpreted relative to the
- element's first rendered box's margin box. Percentages must be
- calculated relative to the element's first rendered box's margin box
- (specifically, its width for the horizontal position and its height
- for the vertical position). <a href=#refsCSSVALUES>[CSSVALUES]</a>
- <a href=#refsCSS>[CSS]</a></p>
+ <p>If the value is a <position>, the alignment point is the point given by the value, which
+ must be interpreted relative to the element's first rendered box's margin box. Percentages must be
+ calculated relative to the element's first rendered box's margin box (specifically, its width for
+ the horizontal position and its height for the vertical position). <a href=#refsCSSVALUES>[CSSVALUES]</a> <a href=#refsCSS>[CSS]</a></p>
- <p>If the value is the keyword 'none', then no explicit alignment
- point is defined. The user agent will pick an alignment point
- automatically if necessary (as described in the definition of the
+ <p>If the value is the keyword 'none', then no explicit alignment point is defined. The user agent
+ will pick an alignment point automatically if necessary (as described in the definition of the
<code title=dom-dialog-open><a href=#dom-dialog-open>open()</a></code> method above).</p>
+<!--REMOVE-TOPIC:CSS-->
+
<h3 id=links><span class=secno>4.12 </span>Links</h3>
<h4 id=introduction-3><span class=secno>4.12.1 </span>Introduction</h4>
Modified: index
===================================================================
--- index 2013-08-01 21:50:59 UTC (rev 8120)
+++ index 2013-08-01 22:17:00 UTC (rev 8121)
@@ -57884,155 +57884,123 @@
</dd>
- </dl><div class=impl>
+ </dl><!--ADD-TOPIC:CSS--><div class=impl>
-<!--CLEANUP-->
- <p>When the <dfn id=dom-dialog-show title=dom-dialog-show><code>show()</code></dfn>
- method is invoked, the user agent must run the following steps:</p>
+ <p>When the <dfn id=dom-dialog-show title=dom-dialog-show><code>show()</code></dfn> method is invoked, the user
+ agent must run the following steps:</p>
- <ol><li><p>If the element already has an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, then abort these
- steps.</li>
+ <ol><li><p>If the element already has an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, then
+ abort these steps.</li>
- <li><p>Add an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute
- to the <code><a href=#the-dialog-element>dialog</a></code> element, whose value is the empty
- string.</li>
+ <li><p>Add an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute to the <code><a href=#the-dialog-element>dialog</a></code>
+ element, whose value is the empty string.</li>
- <li><p>If the <code title=dom-dialog-show><a href=#dom-dialog-show>show()</a></code> method
- was invoked with an argument, <a href=#set-up-the-position>set up the position</a> of
- the <code><a href=#the-dialog-element>dialog</a></code> element, using that argument as the anchor.
- Otherwise, <a href=#set-up-the-default-static-position>set up the default static position</a> of the
- dialog element.</li>
+ <li><p>If the <code title=dom-dialog-show><a href=#dom-dialog-show>show()</a></code> method was invoked with an argument,
+ <a href=#set-up-the-position>set up the position</a> of the <code><a href=#the-dialog-element>dialog</a></code> element, using that argument as the
+ anchor. Otherwise, <a href=#set-up-the-default-static-position>set up the default static position</a> of the dialog
+ element.</li>
- </ol><hr><p>Each <code><a href=#document>Document</a></code> has a stack of <code><a href=#the-dialog-element>dialog</a></code>
- elements known as the <dfn id=pending-dialog-stack>pending dialog stack</dfn>. When a
- <code><a href=#document>Document</a></code> is created, this stack must be initialized to
- be empty.</p>
+ </ol><hr><p>Each <code><a href=#document>Document</a></code> has a stack of <code><a href=#the-dialog-element>dialog</a></code> elements known as the
+ <dfn id=pending-dialog-stack>pending dialog stack</dfn>. When a <code><a href=#document>Document</a></code> is created, this stack must be
+ initialized to be empty.</p>
- <p>When an element is added to the <a href=#pending-dialog-stack>pending dialog
- stack</a>, it must also be added to the <a href=#top-layer>top layer</a>
- layer. When an element is removed from the <a href=#pending-dialog-stack>pending dialog
+ <p>When an element is added to the <a href=#pending-dialog-stack>pending dialog stack</a>, it must also be added to the
+ <a href=#top-layer>top layer</a> layer. When an element is removed from the <a href=#pending-dialog-stack>pending dialog
stack</a>, it must be removed from the <a href=#top-layer>top layer</a>. <a href=#refsFULLSCREEN>[FULLSCREEN]</a></p>
- <p>When the <dfn id=dom-dialog-showmodal title=dom-dialog-showModal><code>showModal()</code></dfn> method
- is invoked, the user agent must run the following steps:</p>
+ <p>When the <dfn id=dom-dialog-showmodal title=dom-dialog-showModal><code>showModal()</code></dfn> method is invoked,
+ the user agent must run the following steps:</p>
- <ol><li><p>Let <var title="">subject</var> be the <code><a href=#the-dialog-element>dialog</a></code>
- element on which the method was invoked.</li>
+ <ol><li><p>Let <var title="">subject</var> be the <code><a href=#the-dialog-element>dialog</a></code> element on which the method was
+ invoked.</li>
- <li><p>If <var title="">subject</var> already has an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, then throw an
- <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these
- steps.</li>
+ <li><p>If <var title="">subject</var> already has an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code>
+ attribute, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
- <li><p>If <var title="">subject</var> is not <a href=#in-a-document>in a
- <code>Document</code></a>, then throw an
- <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these
- steps.</li>
+ <li><p>If <var title="">subject</var> is not <a href=#in-a-document>in a <code>Document</code></a>, then throw
+ an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
- <li><p>Add an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute
- to <var title="">subject</var>, whose value is the empty
- string.</li>
+ <li><p>Add an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute to <var title="">subject</var>, whose value is the empty string.</li>
- <li><p>If the <code title=dom-dialog-showModal><a href=#dom-dialog-showmodal>showModal()</a></code>
- method was invoked with an argument, <a href=#set-up-the-position>set up the
- position</a> of <var title="">subject</var>, using that argument
- as the anchor. Otherwise, <a href=#set-up-the-default-static-position>set up the default static
- position</a> of the dialog element.</li>
+ <li><p>If the <code title=dom-dialog-showModal><a href=#dom-dialog-showmodal>showModal()</a></code> method was invoked with an
+ argument, <a href=#set-up-the-position>set up the position</a> of <var title="">subject</var>, using that argument as
+ the anchor. Otherwise, <a href=#set-up-the-default-static-position>set up the default static position</a> of the dialog
+ element.</li>
- <li><p>Let <var title="">subject</var>'s <code><a href=#document>Document</a></code> be
- <a href=#blocked-by-a-modal-dialog title="blocked by a modal dialog">blocked by the modal
- dialog</a> <var title="">subject</var>.</li>
+ <li><p>Let <var title="">subject</var>'s <code><a href=#document>Document</a></code> be <a href=#blocked-by-a-modal-dialog title="blocked by a modal
+ dialog">blocked by the modal dialog</a> <var title="">subject</var>.</li>
- <li><p>Push <var title="">subject</var> onto <var title="">subject</var>'s <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending
- dialog stack</a>.</li>
+ <li><p>Push <var title="">subject</var> onto <var title="">subject</var>'s
+ <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog stack</a>.</li>
- <li><p>Let <var title="">control</var> be the first element in tree
- order whose nearest ancestor <code><a href=#the-dialog-element>dialog</a></code> element is <var title="">subject</var> and that has an <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute
- specified, if any.</li>
+ <li><p>Let <var title="">control</var> be the first element in tree order whose nearest ancestor
+ <code><a href=#the-dialog-element>dialog</a></code> element is <var title="">subject</var> and that has an <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute specified, if any.</li>
- <li><p>If there is no <var title="">control</var>, then abort these
- steps.</li>
+ <li><p>If there is no <var title="">control</var>, then abort these steps.</li>
<li><p>Run the <a href=#focusing-steps>focusing steps</a> for <var title="">control</var>.</li>
- </ol><p>If at any time a <code><a href=#the-dialog-element>dialog</a></code> element is <a href=#remove-an-element-from-a-document title="remove an element from a document">removed from a
- <code>Document</code></a>, then if that <code><a href=#the-dialog-element>dialog</a></code> is in
- that <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog stack</a>, the
- following steps must be run:</p>
+ </ol><p>If at any time a <code><a href=#the-dialog-element>dialog</a></code> element is <a href=#remove-an-element-from-a-document title="remove an element from a
+ document">removed from a <code>Document</code></a>, then if that <code><a href=#the-dialog-element>dialog</a></code> is in that
+ <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog stack</a>, the following steps must be run:</p>
- <ol><li><p>Let <var title="">subject</var> be that <code><a href=#the-dialog-element>dialog</a></code>
- element and <var title="">document</var> be the
- <code><a href=#document>Document</a></code> from which it is being removed.</li>
+ <ol><li><p>Let <var title="">subject</var> be that <code><a href=#the-dialog-element>dialog</a></code> element and <var title="">document</var> be the <code><a href=#document>Document</a></code> from which it is being removed.</li>
- <li><p>Remove <var title="">subject</var> from <var title="">document</var>'s <a href=#pending-dialog-stack>pending dialog
- stack</a>.</li>
+ <li><p>Remove <var title="">subject</var> from <var title="">document</var>'s <a href=#pending-dialog-stack>pending
+ dialog stack</a>.</li>
- <li><p>If <var title="">document</var>'s <a href=#pending-dialog-stack>pending dialog
- stack</a> is not empty, then let <var title="">document</var> be
- <a href=#blocked-by-a-modal-dialog title="blocked by a modal dialog">blocked by the modal
- dialog</a> that is at the top of <var title="">document</var>'s
- <a href=#pending-dialog-stack>pending dialog stack</a>. Otherwise, let <var title="">document</var> be no longer <a href=#blocked-by-a-modal-dialog>blocked by a modal
+ <li><p>If <var title="">document</var>'s <a href=#pending-dialog-stack>pending dialog stack</a> is not empty, then let
+ <var title="">document</var> be <a href=#blocked-by-a-modal-dialog title="blocked by a modal dialog">blocked by the modal
+ dialog</a> that is at the top of <var title="">document</var>'s <a href=#pending-dialog-stack>pending dialog
+ stack</a>. Otherwise, let <var title="">document</var> be no longer <a href=#blocked-by-a-modal-dialog>blocked by a modal
dialog</a> at all.</li>
- </ol><p>When the <dfn id=dom-dialog-close title=dom-dialog-close><code>close()</code></dfn>
- method is invoked, the user agent must <a href=#close-the-dialog>close the dialog</a>
- that the method was invoked on. If the method was invoked with an
- argument, that argument must be used as the return value; otherwise,
- there is no return value.</p>
+ </ol><p>When the <dfn id=dom-dialog-close title=dom-dialog-close><code>close()</code></dfn> method is invoked, the user
+ agent must <a href=#close-the-dialog>close the dialog</a> that the method was invoked on. If the method was invoked
+ with an argument, that argument must be used as the return value; otherwise, there is no return
+ value.</p>
<!--TOPIC:HTML-->
- <p>When a <code><a href=#the-dialog-element>dialog</a></code> element <var title="">subject</var> is
- to be <dfn id=close-the-dialog title="close the dialog">closed</dfn>, optionally with a
- return value <var title="">result</var>, the user agent must run the
- following steps:</p>
+ <p>When a <code><a href=#the-dialog-element>dialog</a></code> element <var title="">subject</var> is to be <dfn id=close-the-dialog title="close the
+ dialog">closed</dfn>, optionally with a return value <var title="">result</var>, the user agent
+ must run the following steps:</p>
- <ol><li><p>If <var title="">subject</var> does not have an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, then throw an
- <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these
- steps.</li>
+ <ol><li><p>If <var title="">subject</var> does not have an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code>
+ attribute, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code> exception and abort these steps.</li>
- <li><p>Remove <var title="">subject</var>'s <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute.</li>
+ <li><p>Remove <var title="">subject</var>'s <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code>
+ attribute.</li>
- <li><p>If the argument was passed a <var title="">result</var>,
- then set the <code title=dom-dialog-returnValue><a href=#dom-dialog-returnvalue>returnValue</a></code> attribute to the
- value of <var title="">result</var>.</li>
+ <li><p>If the argument was passed a <var title="">result</var>, then set the <code title=dom-dialog-returnValue><a href=#dom-dialog-returnvalue>returnValue</a></code> attribute to the value of <var title="">result</var>.</li>
<li>
- <p>If <var title="">subject</var> is in its <code><a href=#document>Document</a></code>'s
- <a href=#pending-dialog-stack>pending dialog stack</a>, then run these substeps:</p>
+ <p>If <var title="">subject</var> is in its <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog
+ stack</a>, then run these substeps:</p>
- <ol><li><p>Remove <var title="">subject</var> from that <a href=#pending-dialog-stack>pending
- dialog stack</a>.</li>
+ <ol><li><p>Remove <var title="">subject</var> from that <a href=#pending-dialog-stack>pending dialog stack</a>.</li>
- <li><p>If that <a href=#pending-dialog-stack>pending dialog stack</a> is not empty,
- then let <var title="">subject</var>'s <code><a href=#document>Document</a></code> be
- <a href=#blocked-by-a-modal-dialog title="blocked by a modal dialog">blocked by the modal
- dialog</a> that is at the top of the <a href=#pending-dialog-stack>pending dialog
- stack</a>. Otherwise, let <var title="">document</var> be no
- longer <a href=#blocked-by-a-modal-dialog>blocked by a modal dialog</a> at all.</li>
+ <li><p>If that <a href=#pending-dialog-stack>pending dialog stack</a> is not empty, then let <var title="">subject</var>'s <code><a href=#document>Document</a></code> be <a href=#blocked-by-a-modal-dialog title="blocked by a modal
+ dialog">blocked by the modal dialog</a> that is at the top of the <a href=#pending-dialog-stack>pending dialog
+ stack</a>. Otherwise, let <var title="">document</var> be no longer <a href=#blocked-by-a-modal-dialog>blocked by a modal
+ dialog</a> at all.</li>
</ol></li>
- <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple
- event</a> named <dfn id=event-close title=event-close><code>close</code></dfn> at <var title="">subject</var>.</li>
+ <li><p><a href=#queue-a-task>Queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <dfn id=event-close title=event-close><code>close</code></dfn> at <var title="">subject</var>.</li>
- </ol><!--TOPIC:DOM APIs--><p>The <dfn id=dom-dialog-returnvalue title=dom-dialog-returnValue><code>returnValue</code></dfn> IDL
- attribute, on getting, must return the last value to which it was
- set. On setting, it must be set to the new value. When the element
- is created, it must be set to the empty string.</p>
+ </ol><!--TOPIC:DOM APIs--><p>The <dfn id=dom-dialog-returnvalue title=dom-dialog-returnValue><code>returnValue</code></dfn> IDL attribute, on
+ getting, must return the last value to which it was set. On setting, it must be set to the new
+ value. When the element is created, it must be set to the empty string.</p>
<!--TOPIC:HTML-->
- <hr><p><strong>Canceling dialogs</strong>: When a
- <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog stack</a> is not
- empty, user agents may provide a user interface that, upon
- activation, <a href=#queue-a-task title="queue a task">queues a task</a> to
- <a href=#fire-a-simple-event>fire a simple event</a> named <dfn id=event-cancel title=event-cancel><code>cancel</code></dfn> that is cancelable at
- the top <code><a href=#the-dialog-element>dialog</a></code> element on the <code><a href=#document>Document</a></code>'s
- <a href=#pending-dialog-stack>pending dialog stack</a>. The default action of this event
- must be to <a href=#close-the-dialog>close the dialog</a> with no return value.</p>
+ <hr><p><strong>Canceling dialogs</strong>: When a <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog
+ stack</a> is not empty, user agents may provide a user interface that, upon activation, <a href=#queue-a-task title="queue a task">queues a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> named <dfn id=event-cancel title=event-cancel><code>cancel</code></dfn> that is cancelable at the top <code><a href=#the-dialog-element>dialog</a></code>
+ element on the <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog stack</a>. The default action of
+ this event must be to <a href=#close-the-dialog>close the dialog</a> with no return value.</p>
- <p class=note>An example of such a UI mechanism would be the user
- pressing the "Escape" key.</p>
+ <p class=note>An example of such a UI mechanism would be the user pressing the "Escape" key.</p>
<hr><p>The containing block of all <code><a href=#the-dialog-element>dialog</a></code> elements that are <i>absolutely positioned</i>
must be the initial containing block.</p>
@@ -58042,17 +58010,12 @@
in the <a href=#mundanely-aligned>mundanely aligned</a> mode and the user agent must <a href=#set-up-the-default-static-position>set up the default static
position</a> for that element, without an anchor.</p>
-<!--CLEANUP-->
- <p>When a user agent is to <dfn id=set-up-the-default-static-position>set up the default static
- position</dfn> of an element <var title="">subject</var> without an
- anchor, if that element is <a href=#being-rendered>being rendered</a>, it must set up the element such that its top static
- position, for the purposes of calculating the used value of the
- 'top' property, is the value that would place the element's top
- margin edge as far from the top of the viewport as the element's
- bottom margin edge from the bottom of the viewport, if the element's
- height is less than the height of the viewport, and otherwise is the
- value that would place the element's top margin edge at the top of
- the viewport.</p>
+ <p>When a user agent is to <dfn id=set-up-the-default-static-position>set up the default static position</dfn> of an element <var title="">subject</var> without an anchor, if that element is <a href=#being-rendered>being rendered</a>, it must
+ set up the element such that its top static position, for the purposes of calculating the used
+ value of the 'top' property, is the value that would place the element's top margin edge as far
+ from the top of the viewport as the element's bottom margin edge from the bottom of the viewport,
+ if the element's height is less than the height of the viewport, and otherwise is the value that
+ would place the element's top margin edge at the top of the viewport.</p>
<p>If there is a <code><a href=#the-dialog-element>dialog</a></code> element that is <a href=#mundanely-aligned>mundanely aligned</a> and that is
<a href=#being-rendered>being rendered</a> when its <a href=#browsing-context>browsing context</a> changes viewport width (as
@@ -58069,33 +58032,30 @@
calculating the used value of the 'top' property in certain situations; it's not used, for
instance, to position the element if its 'position' property is set to 'static'.)</p>
-<!--CLEANUP-->
- <p>When a user agent is to <dfn id=set-up-the-position>set up the position</dfn> of an
- element <var title="">subject</var> using an anchor <var title="">anchor</var>, it must run the following steps:</p>
+ <p>When a user agent is to <dfn id=set-up-the-position>set up the position</dfn> of an element <var title="">subject</var> using an anchor <var title="">anchor</var>, it must run the following
+ steps:</p>
<ol><li>
- <p>If <var title="">anchor</var> is a <code><a href=#mouseevent>MouseEvent</a></code>
- object, then run these substeps:</p>
+ <p>If <var title="">anchor</var> is a <code><a href=#mouseevent>MouseEvent</a></code> object, then run these
+ substeps:</p>
- <ol><li><p>If <var title="">anchor</var>'s target element does not
- have a rendered box, or is in a different document than <var title="">subject</var>, then let <var title="">subject</var> be <span>mundanely positioned</span>, <a href=#set-up-the-default-static-position>set up the default static
- position</a> of <var title="">subject</var> without an anchor, and abort the <a href=#set-up-the-position>set up the
- position</a> steps.</li>
+ <ol><li><p>If <var title="">anchor</var>'s target element does not have a rendered box, or is in a
+ different document than <var title="">subject</var>, then let <var title="">subject</var> be
+ <span>mundanely positioned</span>, <a href=#set-up-the-default-static-position>set up the default static position</a> of <var title="">subject</var> without an anchor, and abort the <a href=#set-up-the-position>set up the position</a>
+ steps.</li>
- <li><p>Let <var title="">anchor element</var> be an anonymous
- element rendered as a box with zero height and width (so its
- margin and border boxes 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.</li>
+ <li><p>Let <var title="">anchor element</var> be an anonymous element rendered as a box with
+ zero height and width (so its margin and border boxes 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.</li>
</ol><p>Otherwise, let <var title="">anchor element</var> be <var title="">anchor</var>.</p>
</li>
- <li><p>Let <var title="">subject</var> be <a href=#magically-aligned>magically
- aligned</a> to <var title="">anchor element</var>.</li>
+ <li><p>Let <var title="">subject</var> be <a href=#magically-aligned>magically aligned</a> to <var title="">anchor
+ element</var>.</li>
</ol><p>While an element <var title="">A</var> is <a href=#magically-aligned>magically aligned</a> to an element <var title="">B</var>, the following requirements apply:</p>
@@ -58124,127 +58084,100 @@
<p>The anchor points for <var title="">A</var> and <var title="">B</var> are defined as per the
appropriate entry in the following list:</p>
- <dl class=switch><dt>If the computed value of 'anchor-point' is 'none' on both
- <var title="">A</var> and <var title="">B</var>
+ <dl class=switch><dt>If the computed value of 'anchor-point' is 'none' on both <var title="">A</var> and <var title="">B</var>
<dd>
+ <p>The anchor points of <var title="">A</var> and <var title="">B</var> are the center points
+ of their respective first boxes' border boxes.
- <p>The anchor points of <var title="">A</var> and <var title="">B</var> are the center points of their respective first
- boxes' border boxes.
+ <dt>If the computed value of 'anchor-point' is 'none' on <var title="">A</var> and a specific
+ point on <var title="">B</var>
- <dt>If the computed value of 'anchor-point' is 'none' on <var title="">A</var> and a specific point on <var title="">B</var>
-
<dd>
- <p>The anchor point of <var title="">B</var> is the point given
- by its 'anchor-point' property.
+ <p>The anchor point of <var title="">B</var> is the point given by its 'anchor-point'
+ property.
- <p>If the anchor point of <var title="">B</var> is the center
- point of <var title="">B</var>'s first box's border box, then
- <var title="">A</var>'s anchor point is the center point of its
+ <p>If the anchor point of <var title="">B</var> is the center point of <var title="">B</var>'s
+ first box's border box, then <var title="">A</var>'s anchor point is the center point of its
first box's margin box.
- <p>Otherwise, <var title="">A</var>'s anchor point is on one of
- its margin edges. Consider four hypothetical half-infinite lines
- L1, L2, L3, and L4 that each start in the center of <var title="">B</var>'s first box's border box, and that extend
- respectively through the top left corner, top right corner,
- bottom right corner, and bottom left corner of <var title="">B</var>'s first box's border box. <var title="">A</var>'s anchor point is determined by the location of
- <var title="">B</var>'s anchor point relative to these four
- hypothetical lines, as follows:
+ <p>Otherwise, <var title="">A</var>'s anchor point is on one of its margin edges. Consider
+ four hypothetical half-infinite lines L1, L2, L3, and L4 that each start in the center of <var title="">B</var>'s first box's border box, and that extend respectively through the top left
+ corner, top right corner, bottom right corner, and bottom left corner of <var title="">B</var>'s first box's border box. <var title="">A</var>'s anchor point is determined
+ by the location of <var title="">B</var>'s anchor point relative to these four hypothetical
+ lines, as follows:
- <p>If the anchor point of <var title="">B</var> lies on L1 or
- L2, or inside the area bounded by L1 and L2 that also contains
- the points above <var title="">B</var>'s first box's border box,
- then let <var title="">A</var>'s anchor point be the horizontal
- center of <var title="">A</var>'s bottom margin edge.</p>
+ <p>If the anchor point of <var title="">B</var> lies on L1 or L2, or inside the area bounded
+ by L1 and L2 that also contains the points above <var title="">B</var>'s first box's border
+ box, then let <var title="">A</var>'s anchor point be the horizontal center of <var title="">A</var>'s bottom margin edge.</p>
- <p>Otherwise, if the anchor point of <var title="">B</var> lies
- on L3 or L4, or inside the area bounded by L4 and L4 that also
- contains the points below <var title="">B</var>'s first box's
- border box, then let <var title="">A</var>'s anchor point be the
- horizontal center of <var title="">A</var>'s top margin
- edge.</p>
+ <p>Otherwise, if the anchor point of <var title="">B</var> lies on L3 or L4, or inside the
+ area bounded by L4 and L4 that also contains the points below <var title="">B</var>'s first
+ box's border box, then let <var title="">A</var>'s anchor point be the horizontal center of
+ <var title="">A</var>'s top margin edge.</p>
- <p>Otherwise, if the anchor point of <var title="">B</var> lies
- inside the area bounded by L4 and L1 that also contains the
- points to the left of <var title="">B</var>'s first box's border
- box, then let <var title="">A</var>'s anchor point be the
- vertical center of <var title="">A</var>'s right margin
- edge.</p>
+ <p>Otherwise, if the anchor point of <var title="">B</var> lies inside the area bounded by L4
+ and L1 that also contains the points to the left of <var title="">B</var>'s first box's border
+ box, then let <var title="">A</var>'s anchor point be the vertical center of <var title="">A</var>'s right margin edge.</p>
- <p>Otherwise, the anchor point of <var title="">B</var> lies
- inside the area bounded by L2 and L3 that also contains the
- points to the right of <var title="">B</var>'s first box's
- border box; let <var title="">A</var>'s anchor point be the
- vertical center of <var title="">A</var>'s left margin edge.</p>
+ <p>Otherwise, the anchor point of <var title="">B</var> lies inside the area bounded by L2 and
+ L3 that also contains the points to the right of <var title="">B</var>'s first box's border
+ box; let <var title="">A</var>'s anchor point be the vertical center of <var title="">A</var>'s left margin edge.</p>
- <dt>If the computed value of 'anchor-point' is a specific point
- on <var title="">A</var> and 'none' on <var title="">B</var>
+ <dt>If the computed value of 'anchor-point' is a specific point on <var title="">A</var> and
+ 'none' on <var title="">B</var>
<dd>
- <p>The anchor point of <var title="">A</var> is the point given
- by its 'anchor-point' property.
+ <p>The anchor point of <var title="">A</var> is the point given by its 'anchor-point'
+ property.
- <p>If the anchor point of <var title="">A</var> is the center
- point of <var title="">A</var>'s first box's margin box, then
- <var title="">B</var>'s anchor point is the center point of its
+ <p>If the anchor point of <var title="">A</var> is the center point of <var title="">A</var>'s
+ first box's margin box, then <var title="">B</var>'s anchor point is the center point of its
first box's border box.
- <p>Otherwise, <var title="">B</var>'s anchor point is on one of
- its border edges. Consider four hypothetical half-infinite lines
- L1, L2, L3, and L4 that each start in the center of <var title="">A</var>'s first box's margin box, and that extend
- respectively through the top left corner, top right corner,
- bottom right corner, and bottom left corner of <var title="">A</var>'s first box's margin box. <var title="">B</var>'s anchor point is determined by the location of
- <var title="">A</var>'s anchor point relative to these four
- hypothetical lines, as follows:
+ <p>Otherwise, <var title="">B</var>'s anchor point is on one of its border edges. Consider
+ four hypothetical half-infinite lines L1, L2, L3, and L4 that each start in the center of <var title="">A</var>'s first box's margin box, and that extend respectively through the top left
+ corner, top right corner, bottom right corner, and bottom left corner of <var title="">A</var>'s first box's margin box. <var title="">B</var>'s anchor point is determined
+ by the location of <var title="">A</var>'s anchor point relative to these four hypothetical
+ lines, as follows:
- <p>If the anchor point of <var title="">A</var> lies on L1 or
- L2, or inside the area bounded by L1 and L2 that also contains
- the points above <var title="">A</var>'s first box's margin box,
- then let <var title="">B</var>'s anchor point be the horizontal
- center of <var title="">B</var>'s bottom border edge.</p>
+ <p>If the anchor point of <var title="">A</var> lies on L1 or L2, or inside the area bounded
+ by L1 and L2 that also contains the points above <var title="">A</var>'s first box's margin
+ box, then let <var title="">B</var>'s anchor point be the horizontal center of <var title="">B</var>'s bottom border edge.</p>
- <p>Otherwise, if the anchor point of <var title="">A</var> lies
- on L3 or L4, or inside the area bounded by L4 and L4 that also
- contains the points below <var title="">A</var>'s first box's
- margin box, then let <var title="">B</var>'s anchor point be the
- horizontal center of <var title="">B</var>'s top border
- edge.</p>
+ <p>Otherwise, if the anchor point of <var title="">A</var> lies on L3 or L4, or inside the
+ area bounded by L4 and L4 that also contains the points below <var title="">A</var>'s first
+ box's margin box, then let <var title="">B</var>'s anchor point be the horizontal center of
+ <var title="">B</var>'s top border edge.</p>
- <p>Otherwise, if the anchor point of <var title="">A</var> lies
- inside the area bounded by L4 and L1 that also contains the
- points to the left of <var title="">A</var>'s first box's margin
- box, then let <var title="">B</var>'s anchor point be the
- vertical center of <var title="">B</var>'s right border
- edge.</p>
+ <p>Otherwise, if the anchor point of <var title="">A</var> lies inside the area bounded by L4
+ and L1 that also contains the points to the left of <var title="">A</var>'s first box's margin
+ box, then let <var title="">B</var>'s anchor point be the vertical center of <var title="">B</var>'s right border edge.</p>
- <p>Otherwise, the anchor point of <var title="">A</var> lies
- inside the area bounded by L2 and L3 that also contains the
- points to the right of <var title="">A</var>'s first box's
- margin box; let <var title="">B</var>'s anchor point be the
- vertical center of <var title="">B</var>'s left border edge.</p>
+ <p>Otherwise, the anchor point of <var title="">A</var> lies inside the area bounded by L2 and
+ L3 that also contains the points to the right of <var title="">A</var>'s first box's margin
+ box; let <var title="">B</var>'s anchor point be the vertical center of <var title="">B</var>'s left border edge.</p>
- <dt>If the computed value of 'anchor-point' is a specific point
- on both <var title="">A</var> and <var title="">B</var>
+ <dt>If the computed value of 'anchor-point' is a specific point on both <var title="">A</var>
+ and <var title="">B</var>
<dd>
- <p>The anchor points of <var title="">A</var> and <var title="">B</var> are the points given by their respective
- 'anchor-point' properties.
+ <p>The anchor points of <var title="">A</var> and <var title="">B</var> are the points given
+ by their respective 'anchor-point' properties.
- </dl><p class=note>The rules above generally use <var title="">A</var>'s <em>margin</em> box, but <var title="">B</var>'s <em>border</em> box. This is because while <var title="">A</var> always has a margin box, and using the margin box
- allows for the dialog to be positioned offset from the box it is
- annotating, <var title="">B</var> sometimes does not have a margin
- box (e.g. if it is a table-cell), or has a margin box whose
- position may be not entirely clear (e.g. in the face of margin
- collapsing and 'clear' handling of in-flow blocks).</p>
+ </dl><p class=note>The rules above generally use <var title="">A</var>'s <em>margin</em> box, but
+ <var title="">B</var>'s <em>border</em> box. This is because while <var title="">A</var> always
+ has a margin box, and using the margin box allows for the dialog to be positioned offset from
+ the box it is annotating, <var title="">B</var> sometimes does not have a margin box (e.g. if it
+ is a table-cell), or has a margin box whose position may be not entirely clear (e.g. in the face
+ of margin collapsing and 'clear' handling of in-flow blocks).</p>
- <p>In cases where <var title="">B</var> does not have a border box
- but its border box is used by the algorithm above, user agents
- must use its first box's content area instead. (This is in
- particular an issue with boxes in tables that have
- 'border-collapse' set to 'collapse'.)</p>
+ <p>In cases where <var title="">B</var> does not have a border box but its border box is used by
+ the algorithm above, user agents must use its first box's content area instead. (This is in
+ particular an issue with boxes in tables that have 'border-collapse' set to 'collapse'.)</p>
</li>
@@ -58263,10 +58196,9 @@
</li>
- </ul><!--CLEANUP--><p class=note>The trivial example of an element that does not have
- a rendered box is one whose 'display' 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>
+ </ul><p class=note>The trivial example of an element that does not have a rendered box is one whose
+ 'display' 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 be repositioned accordingly. (In other words, the requirements above are live,
@@ -58277,12 +58209,13 @@
this value if the <code><a href=#the-dialog-element>dialog</a></code> element is positioned via the APIs described above.</p>
<p class=note>Elements positioned in this way are not clipped by the 'overflow' property of
- ancestors (nor moved by the resulting scrolling mechanisms), since the containing block is the initial containing block. Anchoring to an element that
- <em>is</em> so clipped (and shifted) can therefore result in unexpected effects (where the
- anchored element moves along with the clipped element, but isn't itself clipped).</p>
+ ancestors (nor moved by the resulting scrolling mechanisms), since the containing block is the
+ initial containing block. Anchoring to an element that <em>is</em> so clipped (and shifted) can
+ therefore result in unexpected effects (where the anchored element moves along with the clipped
+ element, but isn't itself clipped).</p>
- <hr><!--TOPIC:DOM APIs--><p>The <dfn id=dom-dialog-open title=dom-dialog-open><code>open</code></dfn> IDL
- attribute must <a href=#reflect>reflect</a> the <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> content attribute.</p>
+ <hr><!--TOPIC:DOM APIs--><p>The <dfn id=dom-dialog-open title=dom-dialog-open><code>open</code></dfn> IDL attribute must
+ <a href=#reflect>reflect</a> the <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> content attribute.</p>
<!--TOPIC:HTML-->
</div>
@@ -58290,9 +58223,8 @@
<h5 id=anchor-points><span class=secno>4.11.7.1 </span>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>
+ <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>'anchor-point'</caption>
<tr><th>Value:
@@ -58313,23 +58245,20 @@
<td> no
<tr><th>Canonical order:
<td> per grammar
- </table><p>The 'anchor-point' property specifies a point to which dialog
- boxes are to be aligned.</p>
+ </table><p>The 'anchor-point' property specifies a point to which dialog boxes are to be aligned.</p>
- <p>If the value is a <position>, the alignment point is the point
- given by the value, which must be interpreted relative to the
- element's first rendered box's margin box. Percentages must be
- calculated relative to the element's first rendered box's margin box
- (specifically, its width for the horizontal position and its height
- for the vertical position). <a href=#refsCSSVALUES>[CSSVALUES]</a>
- <a href=#refsCSS>[CSS]</a></p>
+ <p>If the value is a <position>, the alignment point is the point given by the value, which
+ must be interpreted relative to the element's first rendered box's margin box. Percentages must be
+ calculated relative to the element's first rendered box's margin box (specifically, its width for
+ the horizontal position and its height for the vertical position). <a href=#refsCSSVALUES>[CSSVALUES]</a> <a href=#refsCSS>[CSS]</a></p>
- <p>If the value is the keyword 'none', then no explicit alignment
- point is defined. The user agent will pick an alignment point
- automatically if necessary (as described in the definition of the
+ <p>If the value is the keyword 'none', then no explicit alignment point is defined. The user agent
+ will pick an alignment point automatically if necessary (as described in the definition of the
<code title=dom-dialog-open><a href=#dom-dialog-open>open()</a></code> method above).</p>
+<!--REMOVE-TOPIC:CSS-->
+
<h3 id=links><span class=secno>4.12 </span>Links</h3>
<h4 id=introduction-3><span class=secno>4.12.1 </span>Introduction</h4>
Modified: source
===================================================================
--- source 2013-08-01 21:50:59 UTC (rev 8120)
+++ source 2013-08-01 22:17:00 UTC (rev 8121)
@@ -64068,198 +64068,160 @@
</dl>
+<!--ADD-TOPIC:CSS-->
+
<div class="impl">
-<!--CLEANUP-->
- <p>When the <dfn title="dom-dialog-show"><code>show()</code></dfn>
- method is invoked, the user agent must run the following steps:</p>
+ <p>When the <dfn title="dom-dialog-show"><code>show()</code></dfn> method is invoked, the user
+ agent must run the following steps:</p>
<ol>
- <li><p>If the element already has an <code
- title="attr-dialog-open">open</code> attribute, then abort these
- steps.</p></li>
+ <li><p>If the element already has an <code title="attr-dialog-open">open</code> attribute, then
+ abort these steps.</p></li>
- <li><p>Add an <code title="attr-dialog-open">open</code> attribute
- to the <code>dialog</code> element, whose value is the empty
- string.</p></li>
+ <li><p>Add an <code title="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 title="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, <span>set up the default static position</span> of the
- dialog element.</p></li>
+ <li><p>If the <code title="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, <span>set up the default static position</span> of the dialog
+ element.</p></li>
</ol>
<hr>
- <p>Each <code>Document</code> has a stack of <code>dialog</code>
- elements known as the <dfn>pending dialog stack</dfn>. When a
- <code>Document</code> is created, this stack must be initialized to
- be empty.</p>
+ <p>Each <code>Document</code> has a stack of <code>dialog</code> elements known as the
+ <dfn>pending dialog stack</dfn>. When a <code>Document</code> is created, this stack must be
+ initialized to be empty.</p>
- <p>When an element is added to the <span>pending dialog
- stack</span>, it must also be added to the <span>top layer</span>
- layer. When an element is removed from the <span>pending dialog
+ <p>When an element is added to the <span>pending dialog stack</span>, it must also be added to the
+ <span>top layer</span> layer. When an element is removed from the <span>pending dialog
stack</span>, it must be removed from the <span>top layer</span>. <a
href="#refsFULLSCREEN">[FULLSCREEN]</a></p>
- <p>When the <dfn
- title="dom-dialog-showModal"><code>showModal()</code></dfn> method
- is invoked, the user agent must run the following steps:</p>
+ <p>When the <dfn title="dom-dialog-showModal"><code>showModal()</code></dfn> method is invoked,
+ the user agent must run the following steps:</p>
<ol>
- <li><p>Let <var title="">subject</var> be the <code>dialog</code>
- element on which the method was invoked.</p></li>
+ <li><p>Let <var title="">subject</var> be the <code>dialog</code> element on which the method was
+ invoked.</p></li>
- <li><p>If <var title="">subject</var> already has an <code
- title="attr-dialog-open">open</code> attribute, then throw an
- <code>InvalidStateError</code> exception and abort these
- steps.</p></li>
+ <li><p>If <var title="">subject</var> already has an <code title="attr-dialog-open">open</code>
+ attribute, then throw an <code>InvalidStateError</code> exception and abort these steps.</p></li>
- <li><p>If <var title="">subject</var> is not <span>in a
- <code>Document</code></span>, then throw an
- <code>InvalidStateError</code> exception and abort these
- steps.</p></li>
+ <li><p>If <var title="">subject</var> is not <span>in a <code>Document</code></span>, then throw
+ an <code>InvalidStateError</code> exception and abort these steps.</p></li>
- <li><p>Add an <code title="attr-dialog-open">open</code> attribute
- to <var title="">subject</var>, whose value is the empty
- string.</p></li>
+ <li><p>Add an <code title="attr-dialog-open">open</code> attribute to <var
+ title="">subject</var>, whose value is the empty string.</p></li>
- <li><p>If the <code title="dom-dialog-showModal">showModal()</code>
- method was invoked with an argument, <span>set up the
- position</span> of <var title="">subject</var>, using that argument
- as the anchor. Otherwise, <span>set up the default static
- position</span> of the dialog element.</p></li>
+ <li><p>If the <code title="dom-dialog-showModal">showModal()</code> method was invoked with an
+ argument, <span>set up the position</span> of <var title="">subject</var>, using that argument as
+ the anchor. Otherwise, <span>set up the default static position</span> of the dialog
+ element.</p></li>
- <li><p>Let <var title="">subject</var>'s <code>Document</code> be
- <span title="blocked by a modal dialog">blocked by the modal
- dialog</span> <var title="">subject</var>.</p></li>
+ <li><p>Let <var title="">subject</var>'s <code>Document</code> be <span title="blocked by a modal
+ dialog">blocked by the modal dialog</span> <var title="">subject</var>.</p></li>
- <li><p>Push <var title="">subject</var> onto <var
- title="">subject</var>'s <code>Document</code>'s <span>pending
- dialog stack</span>.</p></li>
+ <li><p>Push <var title="">subject</var> onto <var title="">subject</var>'s
+ <code>Document</code>'s <span>pending dialog stack</span>.</p></li>
- <li><p>Let <var title="">control</var> be the first element in tree
- order whose nearest ancestor <code>dialog</code> element is <var
- title="">subject</var> and that has an <code
- title="attr-fe-autofocus">autofocus</code> attribute
- specified, if any.</p></li>
+ <li><p>Let <var title="">control</var> be the first element in tree order whose nearest ancestor
+ <code>dialog</code> element is <var title="">subject</var> and that has an <code
+ title="attr-fe-autofocus">autofocus</code> attribute specified, if any.</p></li>
- <li><p>If there is no <var title="">control</var>, then abort these
- steps.</p></li>
+ <li><p>If there is no <var title="">control</var>, then abort these steps.</p></li>
- <li><p>Run the <span>focusing steps</span> for <var
- title="">control</var>.</p></li>
+ <li><p>Run the <span>focusing steps</span> for <var title="">control</var>.</p></li>
</ol>
- <p>If at any time a <code>dialog</code> element is <span
- title="remove an element from a document">removed from a
- <code>Document</code></span>, then if that <code>dialog</code> is in
- that <code>Document</code>'s <span>pending dialog stack</span>, the
- following steps must be run:</p>
+ <p>If at any time a <code>dialog</code> element is <span title="remove an element from a
+ document">removed from a <code>Document</code></span>, then if that <code>dialog</code> is in that
+ <code>Document</code>'s <span>pending dialog stack</span>, the following steps must be run:</p>
<ol>
- <li><p>Let <var title="">subject</var> be that <code>dialog</code>
- element and <var title="">document</var> be the
- <code>Document</code> from which it is being removed.</p></li>
+ <li><p>Let <var title="">subject</var> be that <code>dialog</code> element and <var
+ title="">document</var> be the <code>Document</code> from which it is being removed.</p></li>
- <li><p>Remove <var title="">subject</var> from <var
- title="">document</var>'s <span>pending dialog
- stack</span>.</p></li>
+ <li><p>Remove <var title="">subject</var> from <var title="">document</var>'s <span>pending
+ dialog stack</span>.</p></li>
- <li><p>If <var title="">document</var>'s <span>pending dialog
- stack</span> is not empty, then let <var title="">document</var> be
- <span title="blocked by a modal dialog">blocked by the modal
- dialog</span> that is at the top of <var title="">document</var>'s
- <span>pending dialog stack</span>. Otherwise, let <var
- title="">document</var> be no longer <span>blocked by a modal
+ <li><p>If <var title="">document</var>'s <span>pending dialog stack</span> is not empty, then let
+ <var title="">document</var> be <span title="blocked by a modal dialog">blocked by the modal
+ dialog</span> that is at the top of <var title="">document</var>'s <span>pending dialog
+ stack</span>. Otherwise, let <var title="">document</var> be no longer <span>blocked by a modal
dialog</span> at all.</p></li>
</ol>
- <p>When the <dfn title="dom-dialog-close"><code>close()</code></dfn>
- method is invoked, the user agent must <span>close the dialog</span>
- that the method was invoked on. If the method was invoked with an
- argument, that argument must be used as the return value; otherwise,
- there is no return value.</p>
+ <p>When the <dfn title="dom-dialog-close"><code>close()</code></dfn> method is invoked, the user
+ agent must <span>close the dialog</span> that the method was invoked on. If the method was invoked
+ with an argument, that argument must be used as the return value; otherwise, there is no return
+ value.</p>
<!--TOPIC:HTML-->
- <p>When a <code>dialog</code> element <var title="">subject</var> is
- to be <dfn title="close the dialog">closed</dfn>, optionally with a
- return value <var title="">result</var>, the user agent must run the
- following steps:</p>
+ <p>When a <code>dialog</code> element <var title="">subject</var> is to be <dfn title="close the
+ dialog">closed</dfn>, optionally with a return value <var title="">result</var>, the user agent
+ must run the following steps:</p>
<ol>
- <li><p>If <var title="">subject</var> does not have an <code
- title="attr-dialog-open">open</code> attribute, then throw an
- <code>InvalidStateError</code> exception and abort these
- steps.</p></li>
+ <li><p>If <var title="">subject</var> does not have an <code title="attr-dialog-open">open</code>
+ attribute, then throw an <code>InvalidStateError</code> exception and abort these steps.</p></li>
- <li><p>Remove <var title="">subject</var>'s <code
- title="attr-dialog-open">open</code> attribute.</p></li>
+ <li><p>Remove <var title="">subject</var>'s <code title="attr-dialog-open">open</code>
+ attribute.</p></li>
- <li><p>If the argument was passed a <var title="">result</var>,
- then set the <code
- title="dom-dialog-returnValue">returnValue</code> attribute to the
- value of <var title="">result</var>.</p></li>
+ <li><p>If the argument was passed a <var title="">result</var>, then set the <code
+ title="dom-dialog-returnValue">returnValue</code> attribute to the value of <var
+ title="">result</var>.</p></li>
<li>
- <p>If <var title="">subject</var> is in its <code>Document</code>'s
- <span>pending dialog stack</span>, then run these substeps:</p>
+ <p>If <var title="">subject</var> is in its <code>Document</code>'s <span>pending dialog
+ stack</span>, then run these substeps:</p>
<ol>
- <li><p>Remove <var title="">subject</var> from that <span>pending
- dialog stack</span>.</p></li>
+ <li><p>Remove <var title="">subject</var> from that <span>pending dialog stack</span>.</p></li>
- <li><p>If that <span>pending dialog stack</span> is not empty,
- then let <var title="">subject</var>'s <code>Document</code> be
- <span title="blocked by a modal dialog">blocked by the modal
- dialog</span> that is at the top of the <span>pending dialog
- stack</span>. Otherwise, let <var title="">document</var> be no
- longer <span>blocked by a modal dialog</span> at all.</p></li>
+ <li><p>If that <span>pending dialog stack</span> is not empty, then let <var
+ title="">subject</var>'s <code>Document</code> be <span title="blocked by a modal
+ dialog">blocked by the modal dialog</span> that is at the top of the <span>pending dialog
+ stack</span>. Otherwise, let <var title="">document</var> be no longer <span>blocked by a modal
+ dialog</span> at all.</p></li>
</ol>
</li>
- <li><p><span>Queue a task</span> to <span>fire a simple
- event</span> named <dfn
- title="event-close"><code>close</code></dfn> at <var
- title="">subject</var>.</p></li>
+ <li><p><span>Queue a task</span> to <span>fire a simple event</span> named <dfn
+ title="event-close"><code>close</code></dfn> at <var title="">subject</var>.</p></li>
</ol>
<!--TOPIC:DOM APIs-->
- <p>The <dfn
- title="dom-dialog-returnValue"><code>returnValue</code></dfn> IDL
- attribute, on getting, must return the last value to which it was
- set. On setting, it must be set to the new value. When the element
- is created, it must be set to the empty string.</p>
+ <p>The <dfn title="dom-dialog-returnValue"><code>returnValue</code></dfn> IDL attribute, on
+ getting, must return the last value to which it was set. On setting, it must be set to the new
+ value. When the element is created, it must be set to the empty string.</p>
<!--TOPIC:HTML-->
<hr>
- <p><strong>Canceling dialogs</strong>: When a
- <code>Document</code>'s <span>pending dialog stack</span> is not
- empty, user agents may provide a user interface that, upon
- activation, <span title="queue a task">queues a task</span> to
- <span>fire a simple event</span> named <dfn
- title="event-cancel"><code>cancel</code></dfn> that is cancelable at
- the top <code>dialog</code> element on the <code>Document</code>'s
- <span>pending dialog stack</span>. The default action of this event
- must be to <span>close the dialog</span> with no return value.</p>
+ <p><strong>Canceling dialogs</strong>: When a <code>Document</code>'s <span>pending dialog
+ stack</span> is not empty, user agents may provide a user interface that, upon activation, <span
+ title="queue a task">queues a task</span> to <span>fire a simple event</span> named <dfn
+ title="event-cancel"><code>cancel</code></dfn> that is cancelable at the top <code>dialog</code>
+ element on the <code>Document</code>'s <span>pending dialog stack</span>. The default action of
+ this event must be to <span>close the dialog</span> with no return value.</p>
- <p class="note">An example of such a UI mechanism would be the user
- pressing the "Escape" key.</p>
+ <p class="note">An example of such a UI mechanism would be the user pressing the "Escape" key.</p>
<hr>
@@ -64271,17 +64233,13 @@
in the <span>mundanely aligned</span> mode and the user agent must <span>set up the default static
position</span> for that element, without an anchor.</p>
-<!--CLEANUP-->
- <p>When a user agent is to <dfn>set up the default static
- position</dfn> of an element <var title="">subject</var> without an
- anchor, if that element is <span>being rendered</span>, it must set up the element such that its top static
- position, for the purposes of calculating the used value of the
- 'top' property, is the value that would place the element's top
- margin edge as far from the top of the viewport as the element's
- bottom margin edge from the bottom of the viewport, if the element's
- height is less than the height of the viewport, and otherwise is the
- value that would place the element's top margin edge at the top of
- the viewport.</p>
+ <p>When a user agent is to <dfn>set up the default static position</dfn> of an element <var
+ title="">subject</var> without an anchor, if that element is <span>being rendered</span>, it must
+ set up the element such that its top static position, for the purposes of calculating the used
+ value of the 'top' property, is the value that would place the element's top margin edge as far
+ from the top of the viewport as the element's bottom margin edge from the bottom of the viewport,
+ if the element's height is less than the height of the viewport, and otherwise is the value that
+ would place the element's top margin edge at the top of the viewport.</p>
<p>If there is a <code>dialog</code> element that is <span>mundanely aligned</span> and that is
<span>being rendered</span> when its <span>browsing context</span> changes viewport width (as
@@ -64298,42 +64256,38 @@
calculating the used value of the 'top' property in certain situations; it's not used, for
instance, to position the element if its 'position' property is set to 'static'.)</p>
-<!--CLEANUP-->
- <p>When a user agent is to <dfn>set up the position</dfn> of an
- element <var title="">subject</var> using an anchor <var
- title="">anchor</var>, it must run the following steps:</p>
+ <p>When a user agent is to <dfn>set up the position</dfn> of an element <var
+ title="">subject</var> using an anchor <var title="">anchor</var>, it must run the following
+ steps:</p>
<ol>
<li>
- <p>If <var title="">anchor</var> is a <code>MouseEvent</code>
- object, then run these substeps:</p>
+ <p>If <var title="">anchor</var> is a <code>MouseEvent</code> object, then run these
+ substeps:</p>
<ol>
- <li><p>If <var title="">anchor</var>'s target element does not
- have a rendered box, or is in a different document than <var
- title="">subject</var>, then let <var title="">subject</var> be <span>mundanely positioned</span>, <span>set up the default static
- position</span> of <var title="">subject</var> without an anchor, and abort the <span>set up the
- position</span> steps.</p></li>
+ <li><p>If <var title="">anchor</var>'s target element does not have a rendered box, or is in a
+ different document than <var title="">subject</var>, then let <var title="">subject</var> be
+ <span>mundanely positioned</span>, <span>set up the default static position</span> of <var
+ title="">subject</var> without an anchor, and abort the <span>set up the position</span>
+ steps.</p></li>
- <li><p>Let <var title="">anchor element</var> be an anonymous
- element rendered as a box with zero height and width (so its
- margin and border boxes 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>
+ <li><p>Let <var title="">anchor element</var> be an anonymous element rendered as a box with
+ zero height and width (so its margin and border boxes 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 title="">anchor element</var> be <var
- title="">anchor</var>.</p>
+ <p>Otherwise, let <var title="">anchor element</var> be <var title="">anchor</var>.</p>
</li>
- <li><p>Let <var title="">subject</var> be <span>magically
- aligned</span> to <var title="">anchor element</var>.</p></li>
+ <li><p>Let <var title="">subject</var> be <span>magically aligned</span> to <var title="">anchor
+ element</var>.</p></li>
</ol>
@@ -64371,141 +64325,113 @@
<dl class="switch">
- <dt>If the computed value of 'anchor-point' is 'none' on both
- <var title="">A</var> and <var title="">B</var>
+ <dt>If the computed value of 'anchor-point' is 'none' on both <var title="">A</var> and <var
+ title="">B</var>
<dd>
+ <p>The anchor points of <var title="">A</var> and <var title="">B</var> are the center points
+ of their respective first boxes' border boxes.
- <p>The anchor points of <var title="">A</var> and <var
- title="">B</var> are the center points of their respective first
- boxes' border boxes.
+ <dt>If the computed value of 'anchor-point' is 'none' on <var title="">A</var> and a specific
+ point on <var title="">B</var>
- <dt>If the computed value of 'anchor-point' is 'none' on <var
- title="">A</var> and a specific point on <var title="">B</var>
-
<dd>
- <p>The anchor point of <var title="">B</var> is the point given
- by its 'anchor-point' property.
+ <p>The anchor point of <var title="">B</var> is the point given by its 'anchor-point'
+ property.
- <p>If the anchor point of <var title="">B</var> is the center
- point of <var title="">B</var>'s first box's border box, then
- <var title="">A</var>'s anchor point is the center point of its
+ <p>If the anchor point of <var title="">B</var> is the center point of <var title="">B</var>'s
+ first box's border box, then <var title="">A</var>'s anchor point is the center point of its
first box's margin box.
- <p>Otherwise, <var title="">A</var>'s anchor point is on one of
- its margin edges. Consider four hypothetical half-infinite lines
- L1, L2, L3, and L4 that each start in the center of <var
- title="">B</var>'s first box's border box, and that extend
- respectively through the top left corner, top right corner,
- bottom right corner, and bottom left corner of <var
- title="">B</var>'s first box's border box. <var
- title="">A</var>'s anchor point is determined by the location of
- <var title="">B</var>'s anchor point relative to these four
- hypothetical lines, as follows:
+ <p>Otherwise, <var title="">A</var>'s anchor point is on one of its margin edges. Consider
+ four hypothetical half-infinite lines L1, L2, L3, and L4 that each start in the center of <var
+ title="">B</var>'s first box's border box, and that extend respectively through the top left
+ corner, top right corner, bottom right corner, and bottom left corner of <var
+ title="">B</var>'s first box's border box. <var title="">A</var>'s anchor point is determined
+ by the location of <var title="">B</var>'s anchor point relative to these four hypothetical
+ lines, as follows:
- <p>If the anchor point of <var title="">B</var> lies on L1 or
- L2, or inside the area bounded by L1 and L2 that also contains
- the points above <var title="">B</var>'s first box's border box,
- then let <var title="">A</var>'s anchor point be the horizontal
- center of <var title="">A</var>'s bottom margin edge.</p>
+ <p>If the anchor point of <var title="">B</var> lies on L1 or L2, or inside the area bounded
+ by L1 and L2 that also contains the points above <var title="">B</var>'s first box's border
+ box, then let <var title="">A</var>'s anchor point be the horizontal center of <var
+ title="">A</var>'s bottom margin edge.</p>
- <p>Otherwise, if the anchor point of <var title="">B</var> lies
- on L3 or L4, or inside the area bounded by L4 and L4 that also
- contains the points below <var title="">B</var>'s first box's
- border box, then let <var title="">A</var>'s anchor point be the
- horizontal center of <var title="">A</var>'s top margin
- edge.</p>
+ <p>Otherwise, if the anchor point of <var title="">B</var> lies on L3 or L4, or inside the
+ area bounded by L4 and L4 that also contains the points below <var title="">B</var>'s first
+ box's border box, then let <var title="">A</var>'s anchor point be the horizontal center of
+ <var title="">A</var>'s top margin edge.</p>
- <p>Otherwise, if the anchor point of <var title="">B</var> lies
- inside the area bounded by L4 and L1 that also contains the
- points to the left of <var title="">B</var>'s first box's border
- box, then let <var title="">A</var>'s anchor point be the
- vertical center of <var title="">A</var>'s right margin
- edge.</p>
+ <p>Otherwise, if the anchor point of <var title="">B</var> lies inside the area bounded by L4
+ and L1 that also contains the points to the left of <var title="">B</var>'s first box's border
+ box, then let <var title="">A</var>'s anchor point be the vertical center of <var
+ title="">A</var>'s right margin edge.</p>
- <p>Otherwise, the anchor point of <var title="">B</var> lies
- inside the area bounded by L2 and L3 that also contains the
- points to the right of <var title="">B</var>'s first box's
- border box; let <var title="">A</var>'s anchor point be the
- vertical center of <var title="">A</var>'s left margin edge.</p>
+ <p>Otherwise, the anchor point of <var title="">B</var> lies inside the area bounded by L2 and
+ L3 that also contains the points to the right of <var title="">B</var>'s first box's border
+ box; let <var title="">A</var>'s anchor point be the vertical center of <var
+ title="">A</var>'s left margin edge.</p>
- <dt>If the computed value of 'anchor-point' is a specific point
- on <var title="">A</var> and 'none' on <var title="">B</var>
+ <dt>If the computed value of 'anchor-point' is a specific point on <var title="">A</var> and
+ 'none' on <var title="">B</var>
<dd>
- <p>The anchor point of <var title="">A</var> is the point given
- by its 'anchor-point' property.
+ <p>The anchor point of <var title="">A</var> is the point given by its 'anchor-point'
+ property.
- <p>If the anchor point of <var title="">A</var> is the center
- point of <var title="">A</var>'s first box's margin box, then
- <var title="">B</var>'s anchor point is the center point of its
+ <p>If the anchor point of <var title="">A</var> is the center point of <var title="">A</var>'s
+ first box's margin box, then <var title="">B</var>'s anchor point is the center point of its
first box's border box.
- <p>Otherwise, <var title="">B</var>'s anchor point is on one of
- its border edges. Consider four hypothetical half-infinite lines
- L1, L2, L3, and L4 that each start in the center of <var
- title="">A</var>'s first box's margin box, and that extend
- respectively through the top left corner, top right corner,
- bottom right corner, and bottom left corner of <var
- title="">A</var>'s first box's margin box. <var
- title="">B</var>'s anchor point is determined by the location of
- <var title="">A</var>'s anchor point relative to these four
- hypothetical lines, as follows:
+ <p>Otherwise, <var title="">B</var>'s anchor point is on one of its border edges. Consider
+ four hypothetical half-infinite lines L1, L2, L3, and L4 that each start in the center of <var
+ title="">A</var>'s first box's margin box, and that extend respectively through the top left
+ corner, top right corner, bottom right corner, and bottom left corner of <var
+ title="">A</var>'s first box's margin box. <var title="">B</var>'s anchor point is determined
+ by the location of <var title="">A</var>'s anchor point relative to these four hypothetical
+ lines, as follows:
- <p>If the anchor point of <var title="">A</var> lies on L1 or
- L2, or inside the area bounded by L1 and L2 that also contains
- the points above <var title="">A</var>'s first box's margin box,
- then let <var title="">B</var>'s anchor point be the horizontal
- center of <var title="">B</var>'s bottom border edge.</p>
+ <p>If the anchor point of <var title="">A</var> lies on L1 or L2, or inside the area bounded
+ by L1 and L2 that also contains the points above <var title="">A</var>'s first box's margin
+ box, then let <var title="">B</var>'s anchor point be the horizontal center of <var
+ title="">B</var>'s bottom border edge.</p>
- <p>Otherwise, if the anchor point of <var title="">A</var> lies
- on L3 or L4, or inside the area bounded by L4 and L4 that also
- contains the points below <var title="">A</var>'s first box's
- margin box, then let <var title="">B</var>'s anchor point be the
- horizontal center of <var title="">B</var>'s top border
- edge.</p>
+ <p>Otherwise, if the anchor point of <var title="">A</var> lies on L3 or L4, or inside the
+ area bounded by L4 and L4 that also contains the points below <var title="">A</var>'s first
+ box's margin box, then let <var title="">B</var>'s anchor point be the horizontal center of
+ <var title="">B</var>'s top border edge.</p>
- <p>Otherwise, if the anchor point of <var title="">A</var> lies
- inside the area bounded by L4 and L1 that also contains the
- points to the left of <var title="">A</var>'s first box's margin
- box, then let <var title="">B</var>'s anchor point be the
- vertical center of <var title="">B</var>'s right border
- edge.</p>
+ <p>Otherwise, if the anchor point of <var title="">A</var> lies inside the area bounded by L4
+ and L1 that also contains the points to the left of <var title="">A</var>'s first box's margin
+ box, then let <var title="">B</var>'s anchor point be the vertical center of <var
+ title="">B</var>'s right border edge.</p>
- <p>Otherwise, the anchor point of <var title="">A</var> lies
- inside the area bounded by L2 and L3 that also contains the
- points to the right of <var title="">A</var>'s first box's
- margin box; let <var title="">B</var>'s anchor point be the
- vertical center of <var title="">B</var>'s left border edge.</p>
+ <p>Otherwise, the anchor point of <var title="">A</var> lies inside the area bounded by L2 and
+ L3 that also contains the points to the right of <var title="">A</var>'s first box's margin
+ box; let <var title="">B</var>'s anchor point be the vertical center of <var
+ title="">B</var>'s left border edge.</p>
- <dt>If the computed value of 'anchor-point' is a specific point
- on both <var title="">A</var> and <var title="">B</var>
+ <dt>If the computed value of 'anchor-point' is a specific point on both <var title="">A</var>
+ and <var title="">B</var>
<dd>
- <p>The anchor points of <var title="">A</var> and <var
- title="">B</var> are the points given by their respective
- 'anchor-point' properties.
+ <p>The anchor points of <var title="">A</var> and <var title="">B</var> are the points given
+ by their respective 'anchor-point' properties.
</dl>
- <p class="note">The rules above generally use <var
- title="">A</var>'s <em>margin</em> box, but <var
- title="">B</var>'s <em>border</em> box. This is because while <var
- title="">A</var> always has a margin box, and using the margin box
- allows for the dialog to be positioned offset from the box it is
- annotating, <var title="">B</var> sometimes does not have a margin
- box (e.g. if it is a table-cell), or has a margin box whose
- position may be not entirely clear (e.g. in the face of margin
- collapsing and 'clear' handling of in-flow blocks).</p>
+ <p class="note">The rules above generally use <var title="">A</var>'s <em>margin</em> box, but
+ <var title="">B</var>'s <em>border</em> box. This is because while <var title="">A</var> always
+ has a margin box, and using the margin box allows for the dialog to be positioned offset from
+ the box it is annotating, <var title="">B</var> sometimes does not have a margin box (e.g. if it
+ is a table-cell), or has a margin box whose position may be not entirely clear (e.g. in the face
+ of margin collapsing and 'clear' handling of in-flow blocks).</p>
- <p>In cases where <var title="">B</var> does not have a border box
- but its border box is used by the algorithm above, user agents
- must use its first box's content area instead. (This is in
- particular an issue with boxes in tables that have
- 'border-collapse' set to 'collapse'.)</p>
+ <p>In cases where <var title="">B</var> does not have a border box but its border box is used by
+ the algorithm above, user agents must use its first box's content area instead. (This is in
+ particular an issue with boxes in tables that have 'border-collapse' set to 'collapse'.)</p>
</li>
@@ -64528,11 +64454,9 @@
</ul>
-<!--CLEANUP-->
- <p class="note">The trivial example of an element that does not have
- a rendered box is one whose 'display' 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">The trivial example of an element that does not have a rendered box is one whose
+ 'display' 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 be repositioned accordingly. (In other words, the requirements above are live,
@@ -64543,16 +64467,16 @@
this value if the <code>dialog</code> element is positioned via the APIs described above.</p>
<p class="note">Elements positioned in this way are not clipped by the 'overflow' property of
- ancestors (nor moved by the resulting scrolling mechanisms), since the containing block is the initial containing block. Anchoring to an element that
- <em>is</em> so clipped (and shifted) can therefore result in unexpected effects (where the
- anchored element moves along with the clipped element, but isn't itself clipped).</p>
+ ancestors (nor moved by the resulting scrolling mechanisms), since the containing block is the
+ initial containing block. Anchoring to an element that <em>is</em> so clipped (and shifted) can
+ therefore result in unexpected effects (where the anchored element moves along with the clipped
+ element, but isn't itself clipped).</p>
<hr>
<!--TOPIC:DOM APIs-->
- <p>The <dfn title="dom-dialog-open"><code>open</code></dfn> IDL
- attribute must <span>reflect</span> the <code
- title="attr-dialog-open">open</code> content attribute.</p>
+ <p>The <dfn title="dom-dialog-open"><code>open</code></dfn> IDL attribute must
+ <span>reflect</span> the <code title="attr-dialog-open">open</code> content attribute.</p>
<!--TOPIC:HTML-->
</div>
@@ -64560,9 +64484,8 @@
<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>
+ <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>'anchor-point'</caption>
@@ -64595,23 +64518,21 @@
<td> per grammar
</table>
- <p>The 'anchor-point' property specifies a point to which dialog
- boxes are to be aligned.</p>
+ <p>The 'anchor-point' property specifies a point to which dialog boxes are to be aligned.</p>
- <p>If the value is a <position>, the alignment point is the point
- given by the value, which must be interpreted relative to the
- element's first rendered box's margin box. Percentages must be
- calculated relative to the element's first rendered box's margin box
- (specifically, its width for the horizontal position and its height
- for the vertical position). <a href="#refsCSSVALUES">[CSSVALUES]</a>
- <a href="#refsCSS">[CSS]</a></p>
+ <p>If the value is a <position>, the alignment point is the point given by the value, which
+ must be interpreted relative to the element's first rendered box's margin box. Percentages must be
+ calculated relative to the element's first rendered box's margin box (specifically, its width for
+ the horizontal position and its height for the vertical position). <a
+ href="#refsCSSVALUES">[CSSVALUES]</a> <a href="#refsCSS">[CSS]</a></p>
- <p>If the value is the keyword 'none', then no explicit alignment
- point is defined. The user agent will pick an alignment point
- automatically if necessary (as described in the definition of the
+ <p>If the value is the keyword 'none', then no explicit alignment point is defined. The user agent
+ will pick an alignment point automatically if necessary (as described in the definition of the
<code title="dom-dialog-open">open()</code> method above).</p>
+<!--REMOVE-TOPIC:CSS-->
+
<h3 id="links">Links</h3>
<h4>Introduction</h4>
More information about the Commit-Watchers
mailing list