[html5] r7050 - [giow] (0) Dialogs in web apps: <dialog>, inert='', <form method=dialog>, and 'a [...]
whatwg at whatwg.org
whatwg at whatwg.org
Tue Apr 10 17:42:26 PDT 2012
Author: ianh
Date: 2012-04-10 17:42:25 -0700 (Tue, 10 Apr 2012)
New Revision: 7050
Modified:
complete.html
index
source
Log:
[giow] (0) Dialogs in web apps: <dialog>, inert='', <form method=dialog>, and 'anchor-point'.
Affected topics: Canvas, DOM APIs, HTML, HTML Syntax and Parsing, Rendering
Modified: complete.html
===================================================================
--- complete.html 2012-04-09 16:23:43 UTC (rev 7049)
+++ complete.html 2012-04-11 00:42:25 UTC (rev 7050)
@@ -240,7 +240,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 9 April 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 11 April 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -765,7 +765,10 @@
<li><a href=#using-the-command-attribute-on-command-elements-to-define-a-command-indirectly><span class=secno>4.11.5.6 </span>Using the <code title=attr-command-command>command</code> attribute on <code>command</code> elements to define a command indirectly</a></li>
<li><a href=#using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.5.7 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</a></li>
<li><a href=#using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.5.8 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</a></li>
- <li><a href=#using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.9 </span>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</a></ol></ol></li>
+ <li><a href=#using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.9 </span>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</a></ol></li>
+ <li><a href=#the-dialog-element><span class=secno>4.11.6 </span>The <code>dialog</code> element</a>
+ <ol>
+ <li><a href=#anchor-points><span class=secno>4.11.6.1 </span>Anchor points</a></ol></ol></li>
<li><a href=#links><span class=secno>4.12 </span>Links</a>
<ol>
<li><a href=#introduction-3><span class=secno>4.12.1 </span>Introduction</a></li>
@@ -956,41 +959,44 @@
<li><a href=#editing><span class=secno>8 </span>User interaction</a>
<ol>
<li><a href=#the-hidden-attribute><span class=secno>8.1 </span>The <code>hidden</code> attribute</a></li>
- <li><a href=#activation><span class=secno>8.2 </span>Activation</a></li>
- <li><a href=#focus><span class=secno>8.3 </span>Focus</a>
+ <li><a href=#inert-subtrees><span class=secno>8.2 </span>Inert subtrees</a>
<ol>
- <li><a href=#sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.3.1 </span>Sequential focus navigation and the <code title=attr-tabindex>tabindex</code> attribute</a></li>
- <li><a href=#focus-management><span class=secno>8.3.2 </span>Focus management</a></li>
- <li><a href=#document-level-focus-apis><span class=secno>8.3.3 </span>Document-level focus APIs</a></li>
- <li><a href=#element-level-focus-apis><span class=secno>8.3.4 </span>Element-level focus APIs</a></ol></li>
- <li><a href=#assigning-keyboard-shortcuts><span class=secno>8.4 </span>Assigning keyboard shortcuts</a>
+ <li><a href=#the-inert-attribute><span class=secno>8.2.1 </span>The <code>inert</code> attribute</a></ol></li>
+ <li><a href=#activation><span class=secno>8.3 </span>Activation</a></li>
+ <li><a href=#focus><span class=secno>8.4 </span>Focus</a>
<ol>
- <li><a href=#introduction-7><span class=secno>8.4.1 </span>Introduction</a></li>
- <li><a href=#the-accesskey-attribute><span class=secno>8.4.2 </span>The <code>accesskey</code> attribute</a></li>
- <li><a href=#processing-model-3><span class=secno>8.4.3 </span>Processing model</a></ol></li>
- <li><a href=#editing-0><span class=secno>8.5 </span>Editing</a>
+ <li><a href=#sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.4.1 </span>Sequential focus navigation and the <code title=attr-tabindex>tabindex</code> attribute</a></li>
+ <li><a href=#focus-management><span class=secno>8.4.2 </span>Focus management</a></li>
+ <li><a href=#document-level-focus-apis><span class=secno>8.4.3 </span>Document-level focus APIs</a></li>
+ <li><a href=#element-level-focus-apis><span class=secno>8.4.4 </span>Element-level focus APIs</a></ol></li>
+ <li><a href=#assigning-keyboard-shortcuts><span class=secno>8.5 </span>Assigning keyboard shortcuts</a>
<ol>
- <li><a href=#contenteditable><span class=secno>8.5.1 </span>Making document regions editable: The <code title=attr-contenteditable>contenteditable</code> content
+ <li><a href=#introduction-7><span class=secno>8.5.1 </span>Introduction</a></li>
+ <li><a href=#the-accesskey-attribute><span class=secno>8.5.2 </span>The <code>accesskey</code> attribute</a></li>
+ <li><a href=#processing-model-3><span class=secno>8.5.3 </span>Processing model</a></ol></li>
+ <li><a href=#editing-0><span class=secno>8.6 </span>Editing</a>
+ <ol>
+ <li><a href=#contenteditable><span class=secno>8.6.1 </span>Making document regions editable: The <code title=attr-contenteditable>contenteditable</code> content
attribute</a></li>
- <li><a href=#making-entire-documents-editable:-the-designmode-idl-attribute><span class=secno>8.5.2 </span>Making entire documents editable: The <code title=dom-document-designMode>designMode</code> IDL attribute</a></li>
- <li><a href=#best-practices-for-in-page-editors><span class=secno>8.5.3 </span>Best practices for in-page editors</a></li>
- <li><a href=#editing-apis><span class=secno>8.5.4 </span>Editing APIs</a></li>
- <li><a href=#spelling-and-grammar-checking><span class=secno>8.5.5 </span>Spelling and grammar checking</a></ol></li>
- <li><a href=#dnd><span class=secno>8.6 </span>Drag and drop</a>
+ <li><a href=#making-entire-documents-editable:-the-designmode-idl-attribute><span class=secno>8.6.2 </span>Making entire documents editable: The <code title=dom-document-designMode>designMode</code> IDL attribute</a></li>
+ <li><a href=#best-practices-for-in-page-editors><span class=secno>8.6.3 </span>Best practices for in-page editors</a></li>
+ <li><a href=#editing-apis><span class=secno>8.6.4 </span>Editing APIs</a></li>
+ <li><a href=#spelling-and-grammar-checking><span class=secno>8.6.5 </span>Spelling and grammar checking</a></ol></li>
+ <li><a href=#dnd><span class=secno>8.7 </span>Drag and drop</a>
<ol>
- <li><a href=#introduction-8><span class=secno>8.6.1 </span>Introduction</a></li>
- <li><a href=#the-drag-data-store><span class=secno>8.6.2 </span>The drag data store</a></li>
- <li><a href=#the-datatransfer-interface><span class=secno>8.6.3 </span>The <code>DataTransfer</code> interface</a>
+ <li><a href=#introduction-8><span class=secno>8.7.1 </span>Introduction</a></li>
+ <li><a href=#the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</a></li>
+ <li><a href=#the-datatransfer-interface><span class=secno>8.7.3 </span>The <code>DataTransfer</code> interface</a>
<ol>
- <li><a href=#the-datatransferitemlist-interface><span class=secno>8.6.3.1 </span>The <code>DataTransferItemList</code> interface</a></li>
- <li><a href=#the-datatransferitem-interface><span class=secno>8.6.3.2 </span>The <code>DataTransferItem</code> interface</a></ol></li>
- <li><a href=#the-dragevent-interface><span class=secno>8.6.4 </span>The <code>DragEvent</code> interface</a></li>
- <li><a href=#drag-and-drop-processing-model><span class=secno>8.6.5 </span>Drag-and-drop processing model</a></li>
- <li><a href=#dndevents><span class=secno>8.6.6 </span>Events summary</a></li>
- <li><a href=#the-draggable-attribute><span class=secno>8.6.7 </span>The <code>draggable</code> attribute</a></li>
- <li><a href=#the-dropzone-attribute><span class=secno>8.6.8 </span>The <code>dropzone</code> attribute</a></li>
- <li><a href=#security-risks-in-the-drag-and-drop-model><span class=secno>8.6.9 </span>Security risks in the drag-and-drop model</a></ol></li>
- <li><a href=#text-search-apis><span class=secno>8.7 </span>Text search APIs</a></ol></li>
+ <li><a href=#the-datatransferitemlist-interface><span class=secno>8.7.3.1 </span>The <code>DataTransferItemList</code> interface</a></li>
+ <li><a href=#the-datatransferitem-interface><span class=secno>8.7.3.2 </span>The <code>DataTransferItem</code> interface</a></ol></li>
+ <li><a href=#the-dragevent-interface><span class=secno>8.7.4 </span>The <code>DragEvent</code> interface</a></li>
+ <li><a href=#drag-and-drop-processing-model><span class=secno>8.7.5 </span>Drag-and-drop processing model</a></li>
+ <li><a href=#dndevents><span class=secno>8.7.6 </span>Events summary</a></li>
+ <li><a href=#the-draggable-attribute><span class=secno>8.7.7 </span>The <code>draggable</code> attribute</a></li>
+ <li><a href=#the-dropzone-attribute><span class=secno>8.7.8 </span>The <code>dropzone</code> attribute</a></li>
+ <li><a href=#security-risks-in-the-drag-and-drop-model><span class=secno>8.7.9 </span>Security risks in the drag-and-drop model</a></ol></li>
+ <li><a href=#text-search-apis><span class=secno>8.8 </span>Text search APIs</a></ol></li>
<li><a href=#workers><span class=secno>9 </span>Web workers</a>
<ol>
<li><a href=#introduction-9><span class=secno>9.1 </span>Introduction</a>
@@ -1491,12 +1497,6 @@
working group chair decision from June 2011</a>.</li><!--bug
12906-->
- <li>The W3C HTML specification defines a <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code> attribute on
- <code><a href=#the-time-element>time</a></code> elements, because of <a href=http://lists.w3.org/Archives/Public/public-html/2011Dec/0058.html>a
- working group chair request from December 2011</a>. This issue is
- not yet formally resolved in the W3C and the specifications will
- likely converge on this issue when it is.</li><!--PUBDATE--><!--FORK-->
-
<li>The W3C HTML specification contradicts the ARIA specification
because of a <a href=http://lists.w3.org/Archives/Public/public-html/2012Feb/0066.html>working
group chair request from February
@@ -1512,6 +1512,8 @@
specifications and are not currently available anywhere else:</p>
<ul><li>New hyperlink features: the <code title=attr-hyperlink-download><a href=#attr-hyperlink-download>download</a></code> attribute to make download links and the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute for <a href=#hyperlink-auditing>hyperlink auditing</a>.</li> <!--DOWNLOAD--><!--PING-->
+ <li>The <code title=attr-inert><a href=#the-inert-attribute>inert</a></code> global attribute to disable subtrees.</li><!--INERT-->
+ <li>The <code title=attr-fs-method-dialog-keyword><a href=#attr-fs-method-dialog-keyword>dialog</a></code> keyword on the <code><a href=#the-form-element>form</a></code> element's <code title=attr-fs-method><a href=#attr-fs-method>method</a></code> attribute, for a simpler way to close dialogs.</li><!--FORM-DIALOG-->
<li>The <code title=dom-document-cssElementMap><a href=#dom-document-csselementmap>cssElementMap</a></code> feature for defining <a href=#css-element-reference-identifier title="CSS element reference identifier">CSS element reference identifiers</a>.</li> <!--CSSREF-->
<li>An experimental specification of the legacy <code title=dom-find><a href=#dom-find>window.find()</a></code> API.</li><!--FIND-->
<li>Some predefined <a href=#mdvocabs>Microdata vocabularies</a>.</li>
@@ -4144,9 +4146,13 @@
<li><dfn id=alternative-style-sheet-sets>Alternative style sheet sets</dfn> and the <dfn id=preferred-style-sheet-set>preferred style sheet set</dfn></li>
<li><dfn id=serializing-a-css-value>Serializing a CSS value</dfn></li>
<li><dfn id=scroll-an-element-into-view>Scroll an element into view</dfn></li>
- </ul></dd>
+ </ul><p>Parts of the Fullscreen specification, in particular the
+ <dfn id=top-layer>top layer</dfn> concept, are used to define the rendering of
+ the <code><a href=#the-dialog-element>dialog</a></code> element. <a href=#refsFULLSCREEN>[FULLSCREEN]</a>
+ </dd>
+
<!--TOPIC:WebSocket API-->
<dt>The WebSocket protocol</dt>
@@ -9901,10 +9907,12 @@
// <a href=#event-handler-idl-attributes>event handler IDL attributes</a>
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onabort title=handler-onabort>onabort</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onblur title=handler-onblur>onblur</a>;
+ [TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncancel title=handler-oncancel>oncancel</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncanplay title=handler-oncanplay>oncanplay</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>oncanplaythrough</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onchange title=handler-onchange>onchange</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onclick title=handler-onclick>onclick</a>;
+ [TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onclose title=handler-onclose>onclose</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncontextmenu title=handler-oncontextmenu>oncontextmenu</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncuechange title=handler-oncuechange>oncuechange</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-ondblclick title=handler-ondblclick>ondblclick</a>;
@@ -10924,10 +10932,12 @@
// <a href=#event-handler-idl-attributes>event handler IDL attributes</a>
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onabort title=handler-onabort>onabort</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onblur title=handler-onblur>onblur</a>;
+ [TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncancel title=handler-oncancel>oncancel</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncanplay title=handler-oncanplay>oncanplay</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>oncanplaythrough</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onchange title=handler-onchange>onchange</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onclick title=handler-onclick>onclick</a>;
+ [TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onclose title=handler-onclose>onclose</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncontextmenu title=handler-oncontextmenu>oncontextmenu</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncuechange title=handler-oncuechange>oncuechange</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-ondblclick title=handler-ondblclick>ondblclick</a>;
@@ -11009,6 +11019,9 @@
<li><code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code></li>
<li><code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code></li>
<li><code title=attr-id><a href=#the-id-attribute>id</a></code></li>
+<!--INERT-->
+ <li><code title=attr-inert><a href=#the-inert-attribute>inert</a></code></li>
+<!--INERT-->
<!--MD--><!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION -->
<li><code title=attr-itemid><a href=#attr-itemid>itemid</a></code></li>
<li><code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code></li>
@@ -11055,10 +11068,12 @@
<ul class=brief><li><code title=handler-onabort><a href=#handler-onabort>onabort</a></code></li>
<li><code title=handler-onblur><a href=#handler-onblur>onblur</a></code>*</li>
+ <li><code title=handler-oncancel><a href=#handler-oncancel>oncancel</a></code></li>
<li><code title=handler-oncanplay><a href=#handler-oncanplay>oncanplay</a></code></li>
<li><code title=handler-oncanplaythrough><a href=#handler-oncanplaythrough>oncanplaythrough</a></code></li>
<li><code title=handler-onchange><a href=#handler-onchange>onchange</a></code></li>
<li><code title=handler-onclick><a href=#handler-onclick>onclick</a></code></li>
+ <li><code title=handler-onclose><a href=#handler-onclose>onclose</a></code></li>
<li><code title=handler-oncontextmenu><a href=#handler-oncontextmenu>oncontextmenu</a></code></li>
<li><code title=handler-oncuechange><a href=#handler-oncuechange>oncuechange</a></code></li>
<li><code title=handler-ondblclick><a href=#handler-ondblclick>ondblclick</a></code></li>
@@ -12191,6 +12206,7 @@
<li><code><a href=#the-del-element>del</a></code></li>
<li><code><a href=#the-details-element>details</a></code></li>
<li><code><a href=#the-dfn-element>dfn</a></code></li>
+ <li><code><a href=#the-dialog-element>dialog</a></code></li>
<li><code><a href=#the-div-element>div</a></code></li>
<li><code><a href=#the-dl-element>dl</a></code></li>
<li><code><a href=#the-em-element>em</a></code></li>
@@ -13122,6 +13138,9 @@
<tr><td><code><a href=#the-details-element>details</a></code> element
<td><code title=attr-aria-expanded>aria-expanded</code> state set to "true" if the element's <code title=attr-details-open><a href=#attr-details-open>open</a></code> attribute is present, and set to "false" otherwise
+ <tr><td><code><a href=#the-dialog-element>dialog</a></code> element without an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute
+ <td>The <code title=title-aria-hidden>aria-hidden</code> state set to "true"
+
<tr><td><code><a href=#the-head-element>head</a></code> element
<td><a href=#concept-role-none title=concept-role-none>No role</a>
@@ -13290,6 +13309,9 @@
<tr><td>Element that is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>
<td>The <code title=title-aria-disabled>aria-disabled</code> state set to "true"
+ <tr><td>Element that is <a href=#inert>inert</a>
+ <td>The <code title=title-aria-disabled>aria-disabled</code> state set to "true"
+
<tr><td>Element with a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute
<td>The <code title=title-aria-hidden>aria-hidden</code> state set to "true"
@@ -13340,6 +13362,22 @@
<td><code title=attr-aria-role-group>group</code> role
<td>Role must be a role that supports <code title=attr-aria-expanded>aria-expanded</code>
+ <tr><td><code><a href=#the-dialog-element>dialog</a></code> element
+ <td><code title=attr-aria-role-dialog>dialog</code> role
+ <td>Role must be either
+ <code title=attr-aria-role-alert>alert</code>,
+ <code title=attr-aria-role-alertdialog>alertdialog</code>,
+ <code title=attr-aria-role-application>application</code>,
+ <code title=attr-aria-role-contentinfo>contentinfo</code>,
+ <code title=attr-aria-role-dialog>dialog</code>,
+ <code title=attr-aria-role-document>document</code>,
+ <code title=attr-aria-role-log>log</code>,
+ <code title=attr-aria-role-main>main</code>,
+ <code title=attr-aria-role-marquee>marquee</code>,
+ <code title=attr-aria-role-region>region</code>,
+ <code title=attr-aria-role-search>search</code>, or
+ <code title=attr-aria-role-status>status</code>
+
<tr><td><code><a href=#the-embed-element>embed</a></code> element
<td><a href=#concept-role-none title=concept-role-none>No role</a>
<td>If specified, role must be either <code title=attr-aria-role-application>application</code>, <code title=attr-aria-role-document>document</code>, or <code title=attr-aria-role-img>img</code>
@@ -18692,6 +18730,7 @@
<ul class="brief category-list"><li><code><a href=#the-blockquote-element>blockquote</a></code></li>
<li><code><a href=#the-body-element>body</a></code></li>
<li><code><a href=#the-details-element>details</a></code></li>
+ <li><code><a href=#the-dialog-element>dialog</a></code></li>
<li><code><a href=#the-fieldset-element>fieldset</a></code></li>
<li><code><a href=#the-figure-element>figure</a></code></li>
<li><code><a href=#the-td-element>td</a></code></li>
@@ -34722,7 +34761,7 @@
</div>
- <hr><dl class=domintro><dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL</a></code>( [ <var title="">type</var>, ... ])</dt>
+ <hr><dl class=domintro><dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL</a></code>( [ <var title="">type</var>, ... ] )</dt>
<dd>
@@ -35253,7 +35292,7 @@
object is then used by methods on <code><a href=#path>Path</a></code> objects to
control how text and paths are rasterised and stroked.</p>
- <dl class=domintro><dt><var title="">styles</var> = new <code title=dom-DrawingStyle><a href=#dom-drawingstyle>DrawingStyle</a></code>([ <var title="">element</var> ])</dt>
+ <dl class=domintro><dt><var title="">styles</var> = new <code title=dom-DrawingStyle><a href=#dom-drawingstyle>DrawingStyle</a></code>( [ <var title="">element</var> ] )</dt>
<dd>
@@ -53196,6 +53235,14 @@
to the state <dfn id=attr-fs-method-post title=attr-fs-method-POST>POST</dfn>, indicating
the HTTP POST method.</li>
+<!--FORM-DIALOG-->
+ <li>The keyword <dfn id=attr-fs-method-dialog-keyword title=attr-fs-method-dialog-keyword><code>dialog</code></dfn>,
+ mapping to the state <dfn id=attr-fs-method-dialog title=attr-fs-method-dialog>dialog</dfn>, indicating that
+ submitting the <code><a href=#the-form-element>form</a></code> is intended to close the
+ <code><a href=#the-dialog-element>dialog</a></code> box in which the form finds itself, if any, and
+ otherwise not submit.</li>
+<!--FORM-DIALOG-->
+
</ul><p>The <i>missing value default</i> for these attributes is the
<a href=#attr-fs-method-get title=attr-fs-method-GET>GET</a> state.</p>
@@ -54142,13 +54189,17 @@
<li>
- <p>Select the appropriate row in the table below based on the
- value of <var title="">scheme</var> as given by the first cell of
- each row. Then, select the appropriate cell on that row based on
- the value of <var title="">method</var> as given in the first cell
- of each column. Then, jump to the steps named in that cell and
- defined below the table.</p>
+<!--FORM-DIALOG-->
+ <p>If the value of <var title="">method</var> is <a href=#attr-fs-method-dialog title=attr-fs-method-dialog>dialog</a> then jump to the <a href=#submit-dialog title=submit-dialog>submit dialog</a> steps.</p>
+<!--FORM-DIALOG-->
+ <p>Otherwise, select the appropriate row in the table below based
+ on the value of <var title="">scheme</var> as given by the first
+ cell of each row. Then, select the appropriate cell on that row
+ based on the value of <var title="">method</var> as given in the
+ first cell of each column. Then, jump to the steps named in that
+ cell and defined below the table.</p>
+
<table><thead><tr><td>
<th> <a href=#attr-fs-method-get title=attr-fs-method-GET>GET</a>
<th> <a href=#attr-fs-method-post title=attr-fs-method-POST>POST</a>
@@ -54340,6 +54391,40 @@
</dd>
+
+<!--FORM-DIALOG-->
+ <dt><dfn id=submit-dialog title=submit-dialog>Submit dialog</dfn>
+ <dd>
+
+ <p>Let <var title="">dialog</var> be the nearest ancestor
+ <code><a href=#the-dialog-element>dialog</a></code> element of <var title="">form</var>, if
+ any.</p>
+
+ <p>If there isn't one, do nothing. Otherwise, proceed as
+ follows:</p>
+
+ <p>If <var title="">submitter</var> is an <code><a href=#the-input-element>input</a></code>
+ element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code>
+ attribute is in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image
+ Button</a> state, then let <var title="">result</var> be the
+ string formed by concatenating the <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected
+ coordinate</a>'s <var title="">x</var>-component, expressed
+ as a base-ten number using the characters U+0030 DIGIT ZERO (0)
+ to U+0039 DIGIT NINE (9) to represent the digits 0 to 9, a
+ U+002C COMMA character (,), and the <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected
+ coordinate</a>'s <var title="">y</var>-component, expressed
+ in the same way as the <var title="">x</var>-component.</p>
+
+ <p>Otherwise, if <var title="">submitter</var> has a <a href=#concept-fe-value title=concept-fe-value>value</a>, then let <var title="">result</var> be that <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
+
+ <p>Otherwise, there is no <var title="">result</var>.</p>
+
+ <p>Then, <a href=#close-the-dialog>close the dialog</a> <var title="">dialog</var>. If there is a <var title="">result</var>,
+ let that be the return value.</p>
+
+ </dd>
+<!--FORM-DIALOG-->
+
</dl><p>The <dfn id=appropriate-form-encoding-algorithm>appropriate form encoding algorithm</dfn> is
determined as follows:</p>
@@ -55784,10 +55869,10 @@
<h4 id=commands><span class=secno>4.11.5 </span>Commands</h4>
<p>A <dfn id=concept-command title=concept-command>command</dfn> is the abstraction
- behind menu items, buttons, and links. Once a command
- is defined, other parts of the interface can refer to the same
- command, allowing many access points to a single feature to share
- facets such as the <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a>.</p>
+ behind menu items, buttons, and links. Once a command is defined,
+ other parts of the interface can refer to the same command, allowing
+ many access points to a single feature to share facets such as the
+ <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a>.</p>
<p id=facets>Commands are defined to have the following
<dfn id=concept-facet title=concept-facet>facets</dfn>:</p>
@@ -56067,8 +56152,8 @@
otherwise.</p>
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
- State</a> facet of the command is always false. (The command is
- always enabled.)</p>
+ State</a> facet of the command is true if the element or one of
+ its ancestors is <a href=#inert>inert</a>, and false otherwise.</p>
<p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
of the command is always false. (The command is never checked.)</p>
@@ -56086,7 +56171,9 @@
elements</a> (see the previous section).</p>
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
- State</a> of the command mirrors the <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state of the button.</p>
+ State</a> of the command is true if the element or one of its
+ ancestors is <a href=#inert>inert</a>, or if the element's <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state is set, and false
+ otherwise.</p>
<h5 id=using-the-input-element-to-define-a-command><span class=secno>4.11.5.3 </span><dfn title=input-command>Using the <code>input</code> element to define a command</dfn></h5>
@@ -56144,8 +56231,9 @@
otherwise.</p>
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
- State</a> of the command mirrors the <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state of the
- control.</p>
+ State</a> of the command is true if the element or one of its
+ ancestors is <a href=#inert>inert</a>, or if the element's <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state is set, and false
+ otherwise.</p>
<p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
of the command is true if the command is of <a href=#command-facet-type title=command-facet-Type>Type</a> "radio" or "checkbox" and the
@@ -56201,10 +56289,9 @@
otherwise.</p>
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
- State</a> of the command is true (disabled) if the element is
- <a href=#concept-option-disabled title=concept-option-disabled>disabled</a> or if its
- nearest ancestor <code><a href=#the-select-element>select</a></code> element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, and false
- otherwise.</p>
+ State</a> of the command is true if the element is <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>, or if its nearest
+ ancestor <code><a href=#the-select-element>select</a></code> element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, or if it or one of its
+ ancestors is <a href=#inert>inert</a>, and false otherwise.</p>
<p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
of the command is true (checked) if the element's <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, and
@@ -56255,9 +56342,9 @@
otherwise.</p>
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
- State</a> of the command is true (disabled) if the element has a
- <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute, and
- false otherwise.</p>
+ State</a> of the command is true if the element or one of its
+ ancestors is <a href=#inert>inert</a>, or if the element has a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute, and false
+ otherwise.</p>
<p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
of the command is true (checked) if the element has a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, and false
@@ -56447,8 +56534,8 @@
otherwise.</p>
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
- State</a> facet of the command is always false. (The command is
- always enabled.)</p>
+ State</a> of the command is true if the element or one of its
+ ancestors is <a href=#inert>inert</a>, and false otherwise.</p>
<p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
of the command is always false. (The command is never checked.)</p>
@@ -56469,8 +56556,466 @@
</ol></div>
+ <h4 id=the-dialog-element><span class=secno>4.11.6 </span>The <dfn><code>dialog</code></dfn> element</h4>
+ <dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
+ <dt><a href=#element-dfn-contexts title=element-dfn-contexts>Contexts in which this element can be used</a>:</dt>
+ <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
+ <dd>As a child of a <code><a href=#the-dt-element>dt</a></code> element.</dd>
+ <dd>As a child of a <code><a href=#the-th-element>th</a></code> element.</dd>
+ <dt><a href=#element-dfn-content-model title=element-dfn-content-model>Content model</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dt><a href=#element-dfn-attributes title=element-dfn-attributes>Content attributes</a>:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dd><code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code></dd>
+ <dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
+ <dd>
+<pre class=idl>interface <dfn id=htmldialogelement>HTMLDialogElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ attribute boolean <a href=#dom-dialog-open title=dom-dialog-open>open</a>;
+ attribute DOMString <a href=#dom-dialog-returnvalue title=dom-dialog-returnValue>returnValue</a>;
+ void show(optional (<a href=#mouseevent>MouseEvent</a> or <a href=#element>Element</a>) anchor);
+ void showModal(optional (<a href=#mouseevent>MouseEvent</a> or <a href=#element>Element</a>) anchor);
+ void close(optional DOMString returnValue);
+};</pre>
+ </dd>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-dialog-element>dialog</a></code> element represents a part of an
+ application that a user interacts with to perform a task, for
+ example a dialog box, inspector, or window.</p>
+ <p>The <dfn id=attr-dialog-open title=attr-dialog-open><code>open</code></dfn>
+ attribute is a <a href=#boolean-attribute>boolean attribute</a>. When specified, it
+ indicates that the <code><a href=#the-dialog-element>dialog</a></code> element is active and that
+ the user can interact with it.</p>
+
+ <div class=impl>
+
+ <p>A <code><a href=#the-dialog-element>dialog</a></code> element without an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute specified should not
+ be shown to the user. This requirement may be implemented indirectly
+ through the style layer. For example, user agents that <a href=#renderingUA>support the suggested default rendering</a>
+ implement this requirement using the CSS rules described in the <a href=#rendering>rendering section</a>.</p>
+
+ </div>
+
+<!--TOPIC:DOM APIs-->
+
+ <dl class=domintro><dt><var title="">dialog</var> . <code title=dom-dialog-show><a href=#dom-dialog-show>show</a></code>( [ <var title="">anchor</var> ] )</dt>
+
+ <dd>
+
+ <p>Displays the <code><a href=#the-dialog-element>dialog</a></code> element.</p>
+
+ <p>The argument, if provided, provides an anchor point to which
+ the element will be fixed.</p>
+
+ </dd>
+
+ <dt><var title="">dialog</var> . <code title=dom-dialog-showModal><a href=#dom-dialog-showmodal>showModal</a></code>( [ <var title="">anchor</var> ] )</dt>
+
+ <dd>
+
+ <p>Displays the <code><a href=#the-dialog-element>dialog</a></code> element and makes it the top-most modal dialog.</p>
+
+ <p>The argument, if provided, provides an anchor point to which
+ the element will be fixed.</p>
+
+ </dd>
+
+ <dt><var title="">dialog</var> . <code title=dom-dialog-close><a href=#dom-dialog-close>close</a></code>( [ <var title="">result</var> ] )</dt>
+
+ <dd>
+
+ <p>Closes the <code><a href=#the-dialog-element>dialog</a></code> element.</p>
+
+ <p>The argument, if provided, provides a return value.</p>
+
+ </dd>
+
+ <dt><var title="">dialog</var> . <code title=dom-dialog-returnValue><a href=#dom-dialog-returnvalue>returnValue</a></code> [ = <var title="">result</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the <code><a href=#the-dialog-element>dialog</a></code>'s return value.</p>
+
+ <p>Can be set, to update the return value.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <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>
+
+ <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.</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>
+
+ <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>
+
+ <ol><li><p>Let <var title="">dialog</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="">dialog</var> already has an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, then throw an
+ <a href=#invalidstateerror>InvalidStateError</a> exception and abort these
+ steps.</li>
+
+ <li><p>If <var title="">dialog</var> is not <a href=#in-a-document>in a
+ <code>Document</code></a>, then throw an
+ <a href=#invalidstateerror>InvalidStateError</a> 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="">dialog</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="">dialog</var>, using that argument
+ as the anchor.</li>
+
+ <li><p>Let <var title="">dialog</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="">dialog</var>.</li>
+
+ <li><p>Push <var title="">dialog</var> onto <var title="">dialog</var>'s <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending
+ dialog stack</a>.</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><li><p>Let <var title="">dialog</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="">dialog</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
+ 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>
+
+<!--TOPIC:HTML-->
+
+ <p>When a <code><a href=#the-dialog-element>dialog</a></code> element <var title="">dialog</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="">dialog</var> does not have an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, then throw an
+ <a href=#invalidstateerror>InvalidStateError</a> exception and abort these
+ steps.</li>
+
+ <li><p>Remove <var title="">dialog</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 <var title="">dialog</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="">dialog</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="">dialog</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 <code title=event-close>close</code> at <var title="">dialog</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 laast 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 <code title=event-cancel>cancel</code> 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>
+
+ <hr><p>When a user agent is to <dfn id=set-up-the-position>set up the position</dfn> of an
+ element <var title="">dialog</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>
+
+ <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="">dialog</var>, then 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>
+
+ </ol><p>Otherwise, let <var title="">anchor element</var> be <var title="">anchor</var>.</p>
+
+ </li>
+
+ <li><p>Let <var title="">dialog</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 <dfn id=magically-aligned>magically
+ aligned</dfn> to an element <var title="">B</var>, <var title="">A</var> and <var title="">B</var> both have rendered boxes,
+ and <var title="">B</var> is not a descendant of <var title="">A</var>, the following requirements apply:</p>
+
+ <ul><li><p><var title="">A</var>'s 'position' property must compute to
+ the keyword '<dfn id=css-position-absolute-anchored title=css-position-absolute-anchored>absolute-anchored</dfn>'.</li>
+
+ <li>
+
+ <p>Let <var title="">A</var> and <var title="">B</var>'s anchor
+ points be 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>
+
+ <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.
+
+
+ <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>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>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
+ 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>
+
+
+ <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>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>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
+ 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>
+
+
+ <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.
+
+ </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>
+
+ </li>
+
+ </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>When an element's 'position' property must compute to
+ 'absolute-anchored', the 'float', property does not apply and must
+ compute to 'none', the 'display' property must compute to a value as
+ described by the table in <a href=http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo>the
+ section of CSS 2.1 describing the <cite>relationships between
+ 'display', 'position', and 'float'</cite></a>, and the element's box
+ must be positioned using the rules for absolute positioning but with
+ its static position set such that if the box is positioned in its
+ static position, its anchor point is exactly aligned over the anchor
+ point of the element to which it is <a href=#magically-aligned>magically
+ aligned</a>.</p>
+
+ <p class=note>The 'absolute-anchored' keyword is not a keyword
+ that can be specified in CSS; the 'position' property can only
+ compute to this value if the <code><a href=#the-dialog-element>dialog</a></code> element is
+ positioned via the APIs described above.</p>
+
+<!--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>
+
+
+ <h5 id=anchor-points><span class=secno>4.11.6.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>
+
+ <table class=css-property><caption>'anchor-point'</caption>
+ <tr><th>Value:
+ <td> none | <position>
+ <tr><th>Initial:
+ <td> none
+ <tr><th>Applies to:
+ <td> all elements
+ <tr><th>Inherited:
+ <td> no
+ <tr><th>Percentages:
+ <td> refer to width or height of box; see prose
+ <tr><th>Media:
+ <td> visual
+ <tr><th>Computed value:
+ <td> The specified value, but with any lengths replaced by their corresponding absolute length
+ <tr><th>Animatable:
+ <td> no
+ <tr><th>Canonical order:
+ <td> per grammar
+ </table><p>The '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 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>
+
+
<h3 id=links><span class=secno>4.12 </span>Links</h3>
<h4 id=introduction-3><span class=secno>4.12.1 </span>Introduction</h4>
@@ -63726,10 +64271,12 @@
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-window-onbeforeprint title=handler-window-onbeforeprint>onbeforeprint</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-window-onbeforeunload title=handler-window-onbeforeunload>onbeforeunload</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-window-onblur title=handler-window-onblur>onblur</a>;
+ [TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncancel title=handler-oncancel>oncancel</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncanplay title=handler-oncanplay>oncanplay</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>oncanplaythrough</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onchange title=handler-onchange>onchange</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onclick title=handler-onclick>onclick</a>;
+ [TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onclose title=handler-onclose>onclose</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncontextmenu title=handler-oncontextmenu>oncontextmenu</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncuechange title=handler-oncuechange>oncuechange</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-ondblclick title=handler-ondblclick>ondblclick</a>;
@@ -70811,10 +71358,12 @@
<table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
<tbody><tr><td><dfn id=handler-onabort title=handler-onabort><code>onabort</code></dfn> <td> <code title=event-abort>abort</code>
+ <tr><td><dfn id=handler-oncancel title=handler-oncancel><code>oncancel</code></dfn> <td> <code title=event-media-cancel>cancel</code>
<tr><td><dfn id=handler-oncanplay title=handler-oncanplay><code>oncanplay</code></dfn> <td> <code title=event-media-canplay><a href=#event-media-canplay>canplay</a></code>
<tr><td><dfn id=handler-oncanplaythrough title=handler-oncanplaythrough><code>oncanplaythrough</code></dfn> <td> <code title=event-media-canplaythrough><a href=#event-media-canplaythrough>canplaythrough</a></code>
<tr><td><dfn id=handler-onchange title=handler-onchange><code>onchange</code></dfn> <td> <code title=event-change>change</code> <!-- widely used -->
<tr><td><dfn id=handler-onclick title=handler-onclick><code>onclick</code></dfn> <td> <code title=event-click><a href=#event-click>click</a></code> <!-- widely used -->
+ <tr><td><dfn id=handler-onclose title=handler-onclose><code>onclose</code></dfn> <td> <code title=event-close>close</code> <!-- new for <dialog> -->
<tr><td><dfn id=handler-oncontextmenu title=handler-oncontextmenu><code>oncontextmenu</code></dfn> <td> <code title=event-contextmenu>contextmenu</code> <!-- widely used -->
<tr><td><dfn id=handler-oncuechange title=handler-oncuechange><code>oncuechange</code></dfn> <td> <code title=event-cuechange>cuechange</code>
<tr><td><dfn id=handler-ondblclick title=handler-ondblclick><code>ondblclick</code></dfn> <td> <code title=event-dblclick>dblclick</code> <!-- widely used -->
@@ -73013,8 +73562,78 @@
+ <h3 id=inert-subtrees><span class=secno>8.2 </span>Inert subtrees</h3>
+
+ <p>A subtree of a <code><a href=#document>Document</a></code> can be marked as
+ <dfn id=inert>inert</dfn>. When a node or one of its ancestors is
+ <a href=#inert>inert</a>, then the user agent must act as if the element
+ was absent for the purposes of targetting user interaction events,
+ may ignore the node for the purposes of text search user interfaces
+ (commonly known as "find in page"), and may prevent the user from
+ selecting text in that node. User agents should allow the user to
+ override the restrictions on search and text selection, however.</p>
+
+ <p class=example>For example, consider a page that consists of
+ just a single <a href=#inert>inert</a> paragraph positioned in the middle
+ of a <code><a href=#the-body-element>body</a></code>. If a user moves their pointing device from
+ the <code><a href=#the-body-element>body</a></code> over to the <a href=#inert>inert</a> paragraph and
+ clicks on the paragraph, no <code title=event-mouseover>mouseover</code> event would be fired, and
+ the <code title=event-mousemove>mousemove</code> and <code title=event-click><a href=#event-click>click</a></code> events would be fired on the
+ <code><a href=#the-body-element>body</a></code> element rather than the paragraph.</p>
+
+ <p class=note>When a node or one of its ancestors is inert, it
+ also can't be focused (see the <a href=#focusing-steps>focusing steps</a>), and it
+ is disabled if it is a <a href=#concept-command title=concept-command>command</a>.</p>
+
+ <p>An entire <code><a href=#document>Document</a></code> can be marked as <dfn id=blocked-by-a-modal-dialog>blocked by
+ a modal dialog</dfn> <var title="">dialog</var>. While a
+ <code><a href=#document>Document</a></code> is so marked, every node that is <a href=#in-a-document title="in a Document">in the <code>Document</code></a>, with the
+ exception of the <var title="">dialog</var> element, its ancestors,
+ and its descendants, must be marked <a href=#inert>inert</a>. (The
+ elements excepted by this paragraph can additionally be marked
+ <a href=#inert>inert</a> through other means; being part of a modal dialog
+ does not "protect" a node from being marked <a href=#inert>inert</a>.)</p>
+
+ <p>Only one element at a time can mark a <code><a href=#document>Document</a></code> as
+ being <a href=#blocked-by-a-modal-dialog>blocked by a modal dialog</a>. When a new
+ <code><a href=#the-dialog-element>dialog</a></code> is made to <a href=#blocked-by-a-modal-dialog title="blocked by a modal
+ dialog">block</a> a <code><a href=#document>Document</a></code>, the previous element,
+ if any, stops blocking the <code><a href=#document>Document</a></code>.</p>
+
+ <p class=note>The <code><a href=#the-dialog-element>dialog</a></code> element's <code title=dom-dialog-showModal><a href=#dom-dialog-showmodal>showModal()</a></code> method makes use of
+ this mechanism.</p>
+
+
+<!--INERT-->
+ <h4 id=the-inert-attribute><span class=secno>8.2.1 </span>The <dfn title=attr-inert><code>inert</code></dfn> attribute</h4>
+
+ <p>The <code title=attr-inert><a href=#the-inert-attribute>inert</a></code> attribute is a
+ <a href=#boolean-attribute>boolean attribute</a> that indicates, by its presence, that
+ the element is to be made <a href=#inert>inert</a>.</p>
+
+ <div class=impl>
+
+ <p>When an element has an <code title=attr-inert><a href=#the-inert-attribute>inert</a></code>
+ attribute, the user agent must mark that element as
+ <a href=#inert>inert</a>.</p>
+
+ </div>
+
+ <p class=note>By default, there is no visual indication of a
+ subtree being inert. Authors are encouraged to clearly mark what
+ parts of their document are active and which are inert, to avoid
+ user confusion. In particular, it is worth remembering that not all
+ users can see all parts of a page at once; for example, users of
+ screen readers, users on small devices or with magnifiers, and even
+ users just using particularly small windows might not be able to see
+ the active part of a page and may get frustrated if inert sections
+ are not obviously inert. For individual controls, the <code title=attr-input-disabled>disabled</code> attribute is probably
+ more appropriate.</p>
+<!--INERT-->
+
+
<!--TOPIC:DOM APIs-->
- <h3 id=activation><span class=secno>8.2 </span>Activation</h3>
+ <h3 id=activation><span class=secno>8.3 </span>Activation</h3>
<!-- v2 idea: HTMLImageElement.click(x, y); or clickPoint(), if
click() can't be done in IE; can this be emulated in IE by
@@ -73040,7 +73659,7 @@
<!--TOPIC:HTML-->
- <h3 id=focus><span class=secno>8.3 </span>Focus</h3>
+ <h3 id=focus><span class=secno>8.4 </span>Focus</h3>
<!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%20%0A...%3Cform%3E%3Cinput%20name%3Da%20onfocus%3D%22value%2B%3D1%3Bd.name%3D%27a%27%3Bname%3D%27d%27%3Bb.focus()%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22value%2B%3D1%3Bc.focus()%22%3E%0A%3Cinput%20name%3Dc%20onfocus%3D%22value%2B%3D1%3Bd.focus()%22%3E%0A%3Cinput%20name%3Dd%20onfocus%3D%22value%2B%3D1%3Ba.focus()%22%3E -->
@@ -73091,7 +73710,7 @@
</div>
- <h4 id=sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.3.1 </span>Sequential focus navigation and the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute</h4>
+ <h4 id=sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.4.1 </span>Sequential focus navigation and the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute</h4>
<p>The <dfn id=attr-tabindex title=attr-tabindex><code>tabindex</code></dfn>
content attribute allows authors to control whether an element is
@@ -73221,7 +73840,7 @@
<div class=impl>
- <h4 id=focus-management><span class=secno>8.3.2 </span>Focus management</h4>
+ <h4 id=focus-management><span class=secno>8.4.2 </span>Focus management</h4>
<p>An element is <dfn id=focusable>focusable</dfn> if the user agent's default
behavior allows it to be focusable or if the element has its
@@ -73279,7 +73898,8 @@
<code><a href=#document>Document</a></code> has no <a href=#browsing-context>browsing context</a>, or if
the element's <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a>
has no <a href=#top-level-browsing-context>top-level browsing context</a>, or if the element
- is not <a href=#focusable>focusable</a>, then abort these steps.</p>
+ is not <a href=#focusable>focusable</a>, or if the element or one of its
+ ancestors is <a href=#inert>inert</a>, then abort these steps.</p>
<li><p>If focusing the element will remove the focus from another
element, then run the <a href=#unfocusing-steps>unfocusing steps</a> for that
@@ -73345,7 +73965,7 @@
<!--TOPIC:DOM APIs-->
- <h4 id=document-level-focus-apis><span class=secno>8.3.3 </span>Document-level focus APIs</h4>
+ <h4 id=document-level-focus-apis><span class=secno>8.4.3 </span>Document-level focus APIs</h4>
<dl class=domintro><dt><var title="">document</var> . <code title=dom-document-activeElement><a href=#dom-document-activeelement>activeElement</a></code></dt>
@@ -73430,7 +74050,7 @@
</div>
- <h4 id=element-level-focus-apis><span class=secno>8.3.4 </span>Element-level focus APIs</h4>
+ <h4 id=element-level-focus-apis><span class=secno>8.4.4 </span>Element-level focus APIs</h4>
<dl class=domintro><dt><var title="">element</var> . <code title=dom-focus><a href=#dom-focus>focus</a></code>()</dt>
@@ -73499,9 +74119,9 @@
- <h3 id=assigning-keyboard-shortcuts><span class=secno>8.4 </span>Assigning keyboard shortcuts</h3>
+ <h3 id=assigning-keyboard-shortcuts><span class=secno>8.5 </span>Assigning keyboard shortcuts</h3>
- <h4 id=introduction-7><span class=secno>8.4.1 </span>Introduction</h4>
+ <h4 id=introduction-7><span class=secno>8.5.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -73569,7 +74189,7 @@
</div>
- <h4 id=the-accesskey-attribute><span class=secno>8.4.2 </span>The <dfn title=attr-accesskey><code>accesskey</code></dfn> attribute</h4>
+ <h4 id=the-accesskey-attribute><span class=secno>8.5.2 </span>The <dfn title=attr-accesskey><code>accesskey</code></dfn> attribute</h4>
<p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute set. The
<code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute's value is
@@ -73647,7 +74267,7 @@
<div class=impl>
- <h4 id=processing-model-3><span class=secno>8.4.3 </span>Processing model</h4>
+ <h4 id=processing-model-3><span class=secno>8.5.3 </span>Processing model</h4>
<p>An element's <dfn id=assigned-access-key>assigned access key</dfn> is a key combination
derived from the element's <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute.
@@ -73724,9 +74344,9 @@
- <h3 id=editing-0><span class=secno>8.5 </span>Editing</h3>
+ <h3 id=editing-0><span class=secno>8.6 </span>Editing</h3>
- <h4 id=contenteditable><span class=secno>8.5.1 </span>Making document regions editable: The <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> content
+ <h4 id=contenteditable><span class=secno>8.6.1 </span>Making document regions editable: The <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> content
attribute</h4>
<p>The <dfn id=attr-contenteditable title=attr-contenteditable><code>contenteditable</code></dfn>
@@ -73787,7 +74407,7 @@
</div>
- <h4 id=making-entire-documents-editable:-the-designmode-idl-attribute><span class=secno>8.5.2 </span>Making entire documents editable: The <code title=dom-document-designMode><a href=#designMode>designMode</a></code> IDL attribute</h4>
+ <h4 id=making-entire-documents-editable:-the-designmode-idl-attribute><span class=secno>8.6.2 </span>Making entire documents editable: The <code title=dom-document-designMode><a href=#designMode>designMode</a></code> IDL attribute</h4>
<div class=impl>
@@ -73828,7 +74448,7 @@
</div>
- <h4 id=best-practices-for-in-page-editors><span class=secno>8.5.3 </span>Best practices for in-page editors</h4>
+ <h4 id=best-practices-for-in-page-editors><span class=secno>8.6.3 </span>Best practices for in-page editors</h4>
<p>Authors are encouraged to set the 'white-space' property on <a href=#editing-host title="editing host">editing hosts</a> and on markup that was
originally created through these editing mechanisms to the value
@@ -73867,7 +74487,7 @@
- <h4 id=editing-apis><span class=secno>8.5.4 </span>Editing APIs</h4>
+ <h4 id=editing-apis><span class=secno>8.6.4 </span>Editing APIs</h4>
<p>The definition of the terms <dfn id=active-range>active range</dfn>, <dfn id=editing-host>editing
host</dfn>, and <dfn id=editable>editable</dfn>, the user interface requirements
@@ -73890,7 +74510,7 @@
- <h4 id=spelling-and-grammar-checking><span class=secno>8.5.5 </span>Spelling and grammar checking</h4>
+ <h4 id=spelling-and-grammar-checking><span class=secno>8.6.5 </span>Spelling and grammar checking</h4>
<div class=impl>
@@ -74084,7 +74704,7 @@
the checking is enabled, or could use other interfaces.</p>
- <h3 id=dnd><span class=secno>8.6 </span><dfn>Drag and drop</dfn></h3>
+ <h3 id=dnd><span class=secno>8.7 </span><dfn>Drag and drop</dfn></h3>
<!-- v2: ideas for drag and drop:
@@ -74186,7 +74806,7 @@
</div>
- <h4 id=introduction-8><span class=secno>8.6.1 </span>Introduction</h4>
+ <h4 id=introduction-8><span class=secno>8.7.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -74289,7 +74909,7 @@
- <h4 id=the-drag-data-store><span class=secno>8.6.2 </span>The drag data store</h4>
+ <h4 id=the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</h4>
<p>The data that underlies a drag-and-drop operation, known as the
<dfn id=drag-data-store>drag data store</dfn>, consists of the following information:</p>
@@ -74434,7 +75054,7 @@
store allowed effects state</a> is the string "<code title="">uninitialized</code>".</p>
- <h4 id=the-datatransfer-interface><span class=secno>8.6.3 </span>The <code><a href=#datatransfer>DataTransfer</a></code> interface</h4>
+ <h4 id=the-datatransfer-interface><span class=secno>8.7.3 </span>The <code><a href=#datatransfer>DataTransfer</a></code> interface</h4>
<p><code><a href=#datatransfer>DataTransfer</a></code> objects are used to expose the
<a href=#drag-data-store>drag data store</a> that underlies a drag-and-drop
@@ -74811,7 +75431,7 @@
</div>
- <h5 id=the-datatransferitemlist-interface><span class=secno>8.6.3.1 </span>The <code><a href=#datatransferitemlist>DataTransferItemList</a></code> interface</h5>
+ <h5 id=the-datatransferitemlist-interface><span class=secno>8.7.3.1 </span>The <code><a href=#datatransferitemlist>DataTransferItemList</a></code> interface</h5>
<p>Each <code><a href=#datatransfer>DataTransfer</a></code> object is associated with a
<code><a href=#datatransferitemlist>DataTransferItemList</a></code> object.</p>
@@ -75020,7 +75640,7 @@
</ol></div>
- <h5 id=the-datatransferitem-interface><span class=secno>8.6.3.2 </span>The <code><a href=#datatransferitem>DataTransferItem</a></code> interface</h5>
+ <h5 id=the-datatransferitem-interface><span class=secno>8.7.3.2 </span>The <code><a href=#datatransferitem>DataTransferItem</a></code> interface</h5>
<p>Each <code><a href=#datatransferitem>DataTransferItem</a></code> object is associated with a
<code><a href=#datatransfer>DataTransfer</a></code> object.</p>
@@ -75248,7 +75868,7 @@
- <h4 id=the-dragevent-interface><span class=secno>8.6.4 </span>The <code><a href=#dragevent>DragEvent</a></code> interface</h4>
+ <h4 id=the-dragevent-interface><span class=secno>8.7.4 </span>The <code><a href=#dragevent>DragEvent</a></code> interface</h4>
<p>The drag-and-drop processing model involves several events. They
all use the <code><a href=#dragevent>DragEvent</a></code> interface.</p>
@@ -75375,7 +75995,7 @@
<div class=impl>
- <h4 id=drag-and-drop-processing-model><span class=secno>8.6.5 </span>Drag-and-drop processing model</h4>
+ <h4 id=drag-and-drop-processing-model><span class=secno>8.7.5 </span>Drag-and-drop processing model</h4>
<p>When the user attempts to begin a drag operation, the user agent
must run the following steps. User agents must act as if these steps
@@ -76020,7 +76640,7 @@
</div>
- <h4 id=dndevents><span class=secno>8.6.6 </span>Events summary</h4>
+ <h4 id=dndevents><span class=secno>8.7.6 </span>Events summary</h4>
<p><i>This section is non-normative.</i></p>
@@ -76099,7 +76719,7 @@
- <h4 id=the-draggable-attribute><span class=secno>8.6.7 </span>The <dfn title=attr-draggable><code>draggable</code></dfn> attribute</h4>
+ <h4 id=the-draggable-attribute><span class=secno>8.7.7 </span>The <dfn title=attr-draggable><code>draggable</code></dfn> attribute</h4>
<p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute set. The
<code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> attribute is an
@@ -76158,7 +76778,7 @@
</div>
- <h4 id=the-dropzone-attribute><span class=secno>8.6.8 </span>The <dfn title=attr-dropzone><code>dropzone</code></dfn> attribute</h4>
+ <h4 id=the-dropzone-attribute><span class=secno>8.7.8 </span>The <dfn title=attr-dropzone><code>dropzone</code></dfn> attribute</h4>
<p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> content attribute set. When
specified, its value must be an <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of unique
@@ -76477,7 +77097,7 @@
<!--ADD-TOPIC:Security-->
<div class=impl>
- <h4 id=security-risks-in-the-drag-and-drop-model><span class=secno>8.6.9 </span>Security risks in the drag-and-drop model</h4>
+ <h4 id=security-risks-in-the-drag-and-drop-model><span class=secno>8.7.9 </span>Security risks in the drag-and-drop model</h4>
<p>User agents must not make the data added to the
<code><a href=#datatransfer>DataTransfer</a></code> object during the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event available to scripts
@@ -76524,7 +77144,7 @@
<!--FIND-->
<!--TOPIC:DOM APIs-->
- <h3 id=text-search-apis><span class=secno>8.7 </span>Text search APIs</h3> <!-- window.find() -->
+ <h3 id=text-search-apis><span class=secno>8.8 </span>Text search APIs</h3> <!-- window.find() -->
<p class=critical>This legacy API is not very interoperably
implemented, and has a number of design problems (such as having six
@@ -87948,9 +88568,9 @@
<!-- the normal ones -->
<dt>A start tag whose tag name is one of: "address", "article",
- "aside", "blockquote", "center", "details", "dir", "div", "dl",
- "fieldset", "figcaption", "figure", "footer", "header", "hgroup",
- "menu", "nav", "ol", "p", "section", "summary", "ul"</dt>
+ "aside", "blockquote", "center", "details", "dialog", "dir", "div",
+ "dl", "fieldset", "figcaption", "figure", "footer", "header",
+ "hgroup", "menu", "nav", "ol", "p", "section", "summary", "ul"</dt>
<dd>
<!-- As of May 2008 this doesn't match any browser exactly, but is
@@ -88169,10 +88789,10 @@
<!-- the normal ones -->
<dt>An end tag whose tag name is one of: "address", "article",
- "aside", "blockquote", "button", "center", "details", "dir", "div",
- "dl", "fieldset", "figcaption", "figure", "footer", "header",
- "hgroup", "listing", "menu", "nav", "ol", "pre", "section",
- "summary", "ul"</dt>
+ "aside", "blockquote", "button", "center", "details", "dialog",
+ "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer",
+ "header", "hgroup", "listing", "menu", "nav", "ol", "pre",
+ "section", "summary", "ul"</dt>
<dd>
<p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
@@ -92081,8 +92701,20 @@
address { font-style: italic; }
listing, plaintext, pre, xmp {
font-family: monospace; white-space: pre;
-}</pre>
+}
+dialog:not([open]) { display: none; }
+dialog {
+ position: absolute;
+ left: 0; right: 0;
+ margin: auto;
+ border: solid;
+ padding: 1em;
+ background: white;
+ color: black;
+}
+dialog::backdrop { background: rgba(0,0,0,0.1); }</pre>
+
<p>The following rules are also expected to apply, as
<a href=#presentational-hints>presentational hints</a>:</p>
@@ -97182,6 +97814,17 @@
<td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
<td><a href=#global-attributes title="global attributes">globals</a></td>
<td><code><a href=#htmlelement>HTMLElement</a></code></td>
+ <tr><th><code><a href=#the-dialog-element>dialog</a></code></th>
+ <td>Dialog box or window</td>
+ <td><a href=#flow-content title="Flow content">flow</a>;
+ <a href=#sectioning-root title="Sectioning root">sectioning root</a></td>
+ <td><code><a href=#the-dt-element>dt</a></code>;
+ <code><a href=#the-th-element>th</a></code>;
+ <a href=#flow-content title="Flow content">flow</a></td>
+ <td><a href=#flow-content title="Flow content">flow</a></td>
+ <td><a href=#global-attributes title="global attributes">globals</a>;
+ <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code></td>
+ <td><code><a href=#htmldialogelement>HTMLDialogElement</a></code></td>
<tr><th><code><a href=#the-div-element>div</a></code></th>
<td>Generic flow container</td>
<td><a href=#flow-content title="Flow content">flow</a></td>
@@ -98075,6 +98718,7 @@
<code><a href=#the-del-element>del</a></code>;
<code><a href=#the-details-element>details</a></code>;
<code><a href=#the-dfn-element>dfn</a></code>;
+ <code><a href=#the-dialog-element>dialog</a></code>;
<code><a href=#the-div-element>div</a></code>;
<code><a href=#the-dl-element>dl</a></code>;
<code><a href=#the-em-element>em</a></code>;
@@ -98269,6 +98913,7 @@
<code><a href=#the-blockquote-element>blockquote</a></code>;
<code><a href=#the-body-element>body</a></code>;
<code><a href=#the-details-element>details</a></code>;
+ <code><a href=#the-dialog-element>dialog</a></code>;
<code><a href=#the-fieldset-element>fieldset</a></code>;
<code><a href=#the-figure-element>figure</a></code>;
<code><a href=#the-td-element>td</a></code>
@@ -98709,6 +99354,12 @@
<td> <a href=#the-id-attribute title=attr-id>HTML elements</a>
<td> The element's <a href=#concept-id title=concept-id>ID</a>
<td> <a href=#attribute-text>Text</a>*
+<!--INERT-->
+ <tr><th> <code title="">inert</code>
+ <td> <a href=#the-inert-attribute title=attr-inert>HTML elements</a>
+ <td> Whether the element is inert
+ <td> <a href=#boolean-attribute>Boolean attribute</a>
+<!--INERT-->
<tr><th> <code title="">ismap</code>
<td> <code title=attr-img-ismap><a href=#attr-img-ismap>img</a></code>
<td> Whether the image is a server-side image map
@@ -98806,7 +99457,11 @@
<tr><th> <code title="">method</code>
<td> <code title=attr-fs-method><a href=#attr-fs-method>form</a></code>
<td> HTTP method to use for <a href=#form-submission>form submission</a>
- <td> "<code title="">GET</code>"; "<code title="">POST</code>"
+ <td> "<code title=attr-fs-method-GET-keyword><a href=#attr-fs-method-get-keyword>GET</a></code>";
+ "<code title=attr-fs-method-POST-keyword><a href=#attr-fs-method-post-keyword>POST</a></code>";
+<!--FORM-DIALOG-->
+ "<code title=attr-fs-method-dialog-keyword><a href=#attr-fs-method-dialog-keyword>dialog</a></code>"
+<!--FORM-DIALOG-->
<tr><th> <code title="">min</code>
<td> <code title=attr-input-min><a href=#attr-input-min>input</a></code>
<td> Minimum value
@@ -98864,6 +99519,10 @@
<td> <code title=attr-details-open><a href=#attr-details-open>details</a></code>
<td> Whether the details are visible
<td> <a href=#boolean-attribute>Boolean attribute</a>
+ <tr><th> <code title="">open</code>
+ <td> <code title=attr-dialog-open><a href=#attr-dialog-open>dialog</a></code>
+ <td> Whether the dialog box is showing
+ <td> <a href=#boolean-attribute>Boolean attribute</a>
<tr><th> <code title="">optimum</code>
<td> <code title=attr-meter-optimum><a href=#attr-meter-optimum>meter</a></code>
<td> Optimum value in gauge
@@ -99177,6 +99836,11 @@
<td> <code title=event-blur>blur</code> event handler
<td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
+ <tr><th id=ix-handler-oncancel> <code title="">oncancel</code>
+ <td> <a href=#handler-oncancel title=handler-oncancel>HTML elements</a>
+ <td> <code title=event-media-cancel>cancel</code> event handler
+ <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
+
<tr><th id=ix-handler-oncanplay> <code title="">oncanplay</code>
<td> <a href=#handler-oncanplay title=handler-oncanplay>HTML elements</a>
<td> <code title=event-media-canplay><a href=#event-media-canplay>canplay</a></code> event handler
@@ -99197,6 +99861,11 @@
<td> <code title=event-click><a href=#event-click>click</a></code> event handler
<td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
+ <tr><th id=ix-handler-onclose> <code title="">onclose</code>
+ <td> <a href=#handler-onclose title=handler-onclose>HTML elements</a>
+ <td> <code title=event-close>close</code> event handler
+ <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
+
<tr><th id=ix-handler-oncontextmenu> <code title="">oncontextmenu</code>
<td> <a href=#handler-oncontextmenu title=handler-oncontextmenu>HTML elements</a>
<td> <code title=event-contextmenu>contextmenu</code> event handler
@@ -99622,6 +100291,9 @@
<tr><td> <code><a href=#the-dfn-element>dfn</a></code>
<td> <code><a href=#htmlelement>HTMLElement</a></code>
+ <tr><td> <code><a href=#the-dialog-element>dialog</a></code>
+ <td> <code><a href=#htmldialogelement>HTMLDialogElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+
<tr><td> <code><a href=#the-div-element>div</a></code>
<td> <code><a href=#htmldivelement>HTMLDivElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
@@ -100011,6 +100683,10 @@
<dd><cite><a href=http://dev.w3.org/csswg/css3-ui/>CSS3 Basic User
Interface Module</a></cite>, T. Çelik. W3C.</dd>
+ <dt id=refsCSSVALUES>[CSSVALUES]</dt>
+ <dd><cite><a href=http://dev.w3.org/csswg/css3-values/>CSS3
+ Values and Units</a></cite>, H. Lie, C. Lilley. W3C.</dd>
+
<dt id=refsDASH>[DASH]</dt>
<dd><cite><a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=57623">Dynamic adaptive streaming over HTTP (DASH)</a></cite>. ISO.</dd>
@@ -100065,6 +100741,9 @@
<dd><cite><a href=http://dev.w3.org/2009/dap/file-system/file-dir-sys.html>File
API: Directories and System</a></cite>, E. Uhrhane. W3C.</dd>
+ <dt id=refsFULLSCREEN>[FULLSCREEN]</dt>
+ <dd><cite><a href=http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html>Fullscreen</a></cite>, A. van Kesteren, T. Çelik.</dd>
+
<dt id=refsGBK>[GBK]</dt>
<dd><cite>Chinese Internal Code Specification</cite>. Chinese IT
Standardization Technical Committee.</dd>
Modified: index
===================================================================
--- index 2012-04-09 16:23:43 UTC (rev 7049)
+++ index 2012-04-11 00:42:25 UTC (rev 7050)
@@ -240,7 +240,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 9 April 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 11 April 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -765,7 +765,10 @@
<li><a href=#using-the-command-attribute-on-command-elements-to-define-a-command-indirectly><span class=secno>4.11.5.6 </span>Using the <code title=attr-command-command>command</code> attribute on <code>command</code> elements to define a command indirectly</a></li>
<li><a href=#using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.5.7 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</a></li>
<li><a href=#using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.5.8 </span>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</a></li>
- <li><a href=#using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.9 </span>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</a></ol></ol></li>
+ <li><a href=#using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.9 </span>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</a></ol></li>
+ <li><a href=#the-dialog-element><span class=secno>4.11.6 </span>The <code>dialog</code> element</a>
+ <ol>
+ <li><a href=#anchor-points><span class=secno>4.11.6.1 </span>Anchor points</a></ol></ol></li>
<li><a href=#links><span class=secno>4.12 </span>Links</a>
<ol>
<li><a href=#introduction-3><span class=secno>4.12.1 </span>Introduction</a></li>
@@ -956,41 +959,44 @@
<li><a href=#editing><span class=secno>8 </span>User interaction</a>
<ol>
<li><a href=#the-hidden-attribute><span class=secno>8.1 </span>The <code>hidden</code> attribute</a></li>
- <li><a href=#activation><span class=secno>8.2 </span>Activation</a></li>
- <li><a href=#focus><span class=secno>8.3 </span>Focus</a>
+ <li><a href=#inert-subtrees><span class=secno>8.2 </span>Inert subtrees</a>
<ol>
- <li><a href=#sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.3.1 </span>Sequential focus navigation and the <code title=attr-tabindex>tabindex</code> attribute</a></li>
- <li><a href=#focus-management><span class=secno>8.3.2 </span>Focus management</a></li>
- <li><a href=#document-level-focus-apis><span class=secno>8.3.3 </span>Document-level focus APIs</a></li>
- <li><a href=#element-level-focus-apis><span class=secno>8.3.4 </span>Element-level focus APIs</a></ol></li>
- <li><a href=#assigning-keyboard-shortcuts><span class=secno>8.4 </span>Assigning keyboard shortcuts</a>
+ <li><a href=#the-inert-attribute><span class=secno>8.2.1 </span>The <code>inert</code> attribute</a></ol></li>
+ <li><a href=#activation><span class=secno>8.3 </span>Activation</a></li>
+ <li><a href=#focus><span class=secno>8.4 </span>Focus</a>
<ol>
- <li><a href=#introduction-7><span class=secno>8.4.1 </span>Introduction</a></li>
- <li><a href=#the-accesskey-attribute><span class=secno>8.4.2 </span>The <code>accesskey</code> attribute</a></li>
- <li><a href=#processing-model-3><span class=secno>8.4.3 </span>Processing model</a></ol></li>
- <li><a href=#editing-0><span class=secno>8.5 </span>Editing</a>
+ <li><a href=#sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.4.1 </span>Sequential focus navigation and the <code title=attr-tabindex>tabindex</code> attribute</a></li>
+ <li><a href=#focus-management><span class=secno>8.4.2 </span>Focus management</a></li>
+ <li><a href=#document-level-focus-apis><span class=secno>8.4.3 </span>Document-level focus APIs</a></li>
+ <li><a href=#element-level-focus-apis><span class=secno>8.4.4 </span>Element-level focus APIs</a></ol></li>
+ <li><a href=#assigning-keyboard-shortcuts><span class=secno>8.5 </span>Assigning keyboard shortcuts</a>
<ol>
- <li><a href=#contenteditable><span class=secno>8.5.1 </span>Making document regions editable: The <code title=attr-contenteditable>contenteditable</code> content
+ <li><a href=#introduction-7><span class=secno>8.5.1 </span>Introduction</a></li>
+ <li><a href=#the-accesskey-attribute><span class=secno>8.5.2 </span>The <code>accesskey</code> attribute</a></li>
+ <li><a href=#processing-model-3><span class=secno>8.5.3 </span>Processing model</a></ol></li>
+ <li><a href=#editing-0><span class=secno>8.6 </span>Editing</a>
+ <ol>
+ <li><a href=#contenteditable><span class=secno>8.6.1 </span>Making document regions editable: The <code title=attr-contenteditable>contenteditable</code> content
attribute</a></li>
- <li><a href=#making-entire-documents-editable:-the-designmode-idl-attribute><span class=secno>8.5.2 </span>Making entire documents editable: The <code title=dom-document-designMode>designMode</code> IDL attribute</a></li>
- <li><a href=#best-practices-for-in-page-editors><span class=secno>8.5.3 </span>Best practices for in-page editors</a></li>
- <li><a href=#editing-apis><span class=secno>8.5.4 </span>Editing APIs</a></li>
- <li><a href=#spelling-and-grammar-checking><span class=secno>8.5.5 </span>Spelling and grammar checking</a></ol></li>
- <li><a href=#dnd><span class=secno>8.6 </span>Drag and drop</a>
+ <li><a href=#making-entire-documents-editable:-the-designmode-idl-attribute><span class=secno>8.6.2 </span>Making entire documents editable: The <code title=dom-document-designMode>designMode</code> IDL attribute</a></li>
+ <li><a href=#best-practices-for-in-page-editors><span class=secno>8.6.3 </span>Best practices for in-page editors</a></li>
+ <li><a href=#editing-apis><span class=secno>8.6.4 </span>Editing APIs</a></li>
+ <li><a href=#spelling-and-grammar-checking><span class=secno>8.6.5 </span>Spelling and grammar checking</a></ol></li>
+ <li><a href=#dnd><span class=secno>8.7 </span>Drag and drop</a>
<ol>
- <li><a href=#introduction-8><span class=secno>8.6.1 </span>Introduction</a></li>
- <li><a href=#the-drag-data-store><span class=secno>8.6.2 </span>The drag data store</a></li>
- <li><a href=#the-datatransfer-interface><span class=secno>8.6.3 </span>The <code>DataTransfer</code> interface</a>
+ <li><a href=#introduction-8><span class=secno>8.7.1 </span>Introduction</a></li>
+ <li><a href=#the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</a></li>
+ <li><a href=#the-datatransfer-interface><span class=secno>8.7.3 </span>The <code>DataTransfer</code> interface</a>
<ol>
- <li><a href=#the-datatransferitemlist-interface><span class=secno>8.6.3.1 </span>The <code>DataTransferItemList</code> interface</a></li>
- <li><a href=#the-datatransferitem-interface><span class=secno>8.6.3.2 </span>The <code>DataTransferItem</code> interface</a></ol></li>
- <li><a href=#the-dragevent-interface><span class=secno>8.6.4 </span>The <code>DragEvent</code> interface</a></li>
- <li><a href=#drag-and-drop-processing-model><span class=secno>8.6.5 </span>Drag-and-drop processing model</a></li>
- <li><a href=#dndevents><span class=secno>8.6.6 </span>Events summary</a></li>
- <li><a href=#the-draggable-attribute><span class=secno>8.6.7 </span>The <code>draggable</code> attribute</a></li>
- <li><a href=#the-dropzone-attribute><span class=secno>8.6.8 </span>The <code>dropzone</code> attribute</a></li>
- <li><a href=#security-risks-in-the-drag-and-drop-model><span class=secno>8.6.9 </span>Security risks in the drag-and-drop model</a></ol></li>
- <li><a href=#text-search-apis><span class=secno>8.7 </span>Text search APIs</a></ol></li>
+ <li><a href=#the-datatransferitemlist-interface><span class=secno>8.7.3.1 </span>The <code>DataTransferItemList</code> interface</a></li>
+ <li><a href=#the-datatransferitem-interface><span class=secno>8.7.3.2 </span>The <code>DataTransferItem</code> interface</a></ol></li>
+ <li><a href=#the-dragevent-interface><span class=secno>8.7.4 </span>The <code>DragEvent</code> interface</a></li>
+ <li><a href=#drag-and-drop-processing-model><span class=secno>8.7.5 </span>Drag-and-drop processing model</a></li>
+ <li><a href=#dndevents><span class=secno>8.7.6 </span>Events summary</a></li>
+ <li><a href=#the-draggable-attribute><span class=secno>8.7.7 </span>The <code>draggable</code> attribute</a></li>
+ <li><a href=#the-dropzone-attribute><span class=secno>8.7.8 </span>The <code>dropzone</code> attribute</a></li>
+ <li><a href=#security-risks-in-the-drag-and-drop-model><span class=secno>8.7.9 </span>Security risks in the drag-and-drop model</a></ol></li>
+ <li><a href=#text-search-apis><span class=secno>8.8 </span>Text search APIs</a></ol></li>
<li><a href=#workers><span class=secno>9 </span>Web workers</a>
<ol>
<li><a href=#introduction-9><span class=secno>9.1 </span>Introduction</a>
@@ -1491,12 +1497,6 @@
working group chair decision from June 2011</a>.</li><!--bug
12906-->
- <li>The W3C HTML specification defines a <code title=attr-time-pubdate><a href=#attr-time-pubdate>pubdate</a></code> attribute on
- <code><a href=#the-time-element>time</a></code> elements, because of <a href=http://lists.w3.org/Archives/Public/public-html/2011Dec/0058.html>a
- working group chair request from December 2011</a>. This issue is
- not yet formally resolved in the W3C and the specifications will
- likely converge on this issue when it is.</li><!--PUBDATE--><!--FORK-->
-
<li>The W3C HTML specification contradicts the ARIA specification
because of a <a href=http://lists.w3.org/Archives/Public/public-html/2012Feb/0066.html>working
group chair request from February
@@ -1512,6 +1512,8 @@
specifications and are not currently available anywhere else:</p>
<ul><li>New hyperlink features: the <code title=attr-hyperlink-download><a href=#attr-hyperlink-download>download</a></code> attribute to make download links and the <code title=attr-hyperlink-ping><a href=#ping>ping</a></code> attribute for <a href=#hyperlink-auditing>hyperlink auditing</a>.</li> <!--DOWNLOAD--><!--PING-->
+ <li>The <code title=attr-inert><a href=#the-inert-attribute>inert</a></code> global attribute to disable subtrees.</li><!--INERT-->
+ <li>The <code title=attr-fs-method-dialog-keyword><a href=#attr-fs-method-dialog-keyword>dialog</a></code> keyword on the <code><a href=#the-form-element>form</a></code> element's <code title=attr-fs-method><a href=#attr-fs-method>method</a></code> attribute, for a simpler way to close dialogs.</li><!--FORM-DIALOG-->
<li>The <code title=dom-document-cssElementMap><a href=#dom-document-csselementmap>cssElementMap</a></code> feature for defining <a href=#css-element-reference-identifier title="CSS element reference identifier">CSS element reference identifiers</a>.</li> <!--CSSREF-->
<li>An experimental specification of the legacy <code title=dom-find><a href=#dom-find>window.find()</a></code> API.</li><!--FIND-->
<li>Some predefined <a href=#mdvocabs>Microdata vocabularies</a>.</li>
@@ -4144,9 +4146,13 @@
<li><dfn id=alternative-style-sheet-sets>Alternative style sheet sets</dfn> and the <dfn id=preferred-style-sheet-set>preferred style sheet set</dfn></li>
<li><dfn id=serializing-a-css-value>Serializing a CSS value</dfn></li>
<li><dfn id=scroll-an-element-into-view>Scroll an element into view</dfn></li>
- </ul></dd>
+ </ul><p>Parts of the Fullscreen specification, in particular the
+ <dfn id=top-layer>top layer</dfn> concept, are used to define the rendering of
+ the <code><a href=#the-dialog-element>dialog</a></code> element. <a href=#refsFULLSCREEN>[FULLSCREEN]</a>
+ </dd>
+
<!--TOPIC:WebSocket API-->
<dt>The WebSocket protocol</dt>
@@ -9901,10 +9907,12 @@
// <a href=#event-handler-idl-attributes>event handler IDL attributes</a>
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onabort title=handler-onabort>onabort</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onblur title=handler-onblur>onblur</a>;
+ [TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncancel title=handler-oncancel>oncancel</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncanplay title=handler-oncanplay>oncanplay</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>oncanplaythrough</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onchange title=handler-onchange>onchange</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onclick title=handler-onclick>onclick</a>;
+ [TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onclose title=handler-onclose>onclose</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncontextmenu title=handler-oncontextmenu>oncontextmenu</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncuechange title=handler-oncuechange>oncuechange</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-ondblclick title=handler-ondblclick>ondblclick</a>;
@@ -10924,10 +10932,12 @@
// <a href=#event-handler-idl-attributes>event handler IDL attributes</a>
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onabort title=handler-onabort>onabort</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onblur title=handler-onblur>onblur</a>;
+ [TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncancel title=handler-oncancel>oncancel</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncanplay title=handler-oncanplay>oncanplay</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>oncanplaythrough</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onchange title=handler-onchange>onchange</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onclick title=handler-onclick>onclick</a>;
+ [TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onclose title=handler-onclose>onclose</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncontextmenu title=handler-oncontextmenu>oncontextmenu</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncuechange title=handler-oncuechange>oncuechange</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-ondblclick title=handler-ondblclick>ondblclick</a>;
@@ -11009,6 +11019,9 @@
<li><code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code></li>
<li><code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code></li>
<li><code title=attr-id><a href=#the-id-attribute>id</a></code></li>
+<!--INERT-->
+ <li><code title=attr-inert><a href=#the-inert-attribute>inert</a></code></li>
+<!--INERT-->
<!--MD--><!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION -->
<li><code title=attr-itemid><a href=#attr-itemid>itemid</a></code></li>
<li><code title=attr-itemprop><a href=#names:-the-itemprop-attribute>itemprop</a></code></li>
@@ -11055,10 +11068,12 @@
<ul class=brief><li><code title=handler-onabort><a href=#handler-onabort>onabort</a></code></li>
<li><code title=handler-onblur><a href=#handler-onblur>onblur</a></code>*</li>
+ <li><code title=handler-oncancel><a href=#handler-oncancel>oncancel</a></code></li>
<li><code title=handler-oncanplay><a href=#handler-oncanplay>oncanplay</a></code></li>
<li><code title=handler-oncanplaythrough><a href=#handler-oncanplaythrough>oncanplaythrough</a></code></li>
<li><code title=handler-onchange><a href=#handler-onchange>onchange</a></code></li>
<li><code title=handler-onclick><a href=#handler-onclick>onclick</a></code></li>
+ <li><code title=handler-onclose><a href=#handler-onclose>onclose</a></code></li>
<li><code title=handler-oncontextmenu><a href=#handler-oncontextmenu>oncontextmenu</a></code></li>
<li><code title=handler-oncuechange><a href=#handler-oncuechange>oncuechange</a></code></li>
<li><code title=handler-ondblclick><a href=#handler-ondblclick>ondblclick</a></code></li>
@@ -12191,6 +12206,7 @@
<li><code><a href=#the-del-element>del</a></code></li>
<li><code><a href=#the-details-element>details</a></code></li>
<li><code><a href=#the-dfn-element>dfn</a></code></li>
+ <li><code><a href=#the-dialog-element>dialog</a></code></li>
<li><code><a href=#the-div-element>div</a></code></li>
<li><code><a href=#the-dl-element>dl</a></code></li>
<li><code><a href=#the-em-element>em</a></code></li>
@@ -13122,6 +13138,9 @@
<tr><td><code><a href=#the-details-element>details</a></code> element
<td><code title=attr-aria-expanded>aria-expanded</code> state set to "true" if the element's <code title=attr-details-open><a href=#attr-details-open>open</a></code> attribute is present, and set to "false" otherwise
+ <tr><td><code><a href=#the-dialog-element>dialog</a></code> element without an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute
+ <td>The <code title=title-aria-hidden>aria-hidden</code> state set to "true"
+
<tr><td><code><a href=#the-head-element>head</a></code> element
<td><a href=#concept-role-none title=concept-role-none>No role</a>
@@ -13290,6 +13309,9 @@
<tr><td>Element that is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>
<td>The <code title=title-aria-disabled>aria-disabled</code> state set to "true"
+ <tr><td>Element that is <a href=#inert>inert</a>
+ <td>The <code title=title-aria-disabled>aria-disabled</code> state set to "true"
+
<tr><td>Element with a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute
<td>The <code title=title-aria-hidden>aria-hidden</code> state set to "true"
@@ -13340,6 +13362,22 @@
<td><code title=attr-aria-role-group>group</code> role
<td>Role must be a role that supports <code title=attr-aria-expanded>aria-expanded</code>
+ <tr><td><code><a href=#the-dialog-element>dialog</a></code> element
+ <td><code title=attr-aria-role-dialog>dialog</code> role
+ <td>Role must be either
+ <code title=attr-aria-role-alert>alert</code>,
+ <code title=attr-aria-role-alertdialog>alertdialog</code>,
+ <code title=attr-aria-role-application>application</code>,
+ <code title=attr-aria-role-contentinfo>contentinfo</code>,
+ <code title=attr-aria-role-dialog>dialog</code>,
+ <code title=attr-aria-role-document>document</code>,
+ <code title=attr-aria-role-log>log</code>,
+ <code title=attr-aria-role-main>main</code>,
+ <code title=attr-aria-role-marquee>marquee</code>,
+ <code title=attr-aria-role-region>region</code>,
+ <code title=attr-aria-role-search>search</code>, or
+ <code title=attr-aria-role-status>status</code>
+
<tr><td><code><a href=#the-embed-element>embed</a></code> element
<td><a href=#concept-role-none title=concept-role-none>No role</a>
<td>If specified, role must be either <code title=attr-aria-role-application>application</code>, <code title=attr-aria-role-document>document</code>, or <code title=attr-aria-role-img>img</code>
@@ -18692,6 +18730,7 @@
<ul class="brief category-list"><li><code><a href=#the-blockquote-element>blockquote</a></code></li>
<li><code><a href=#the-body-element>body</a></code></li>
<li><code><a href=#the-details-element>details</a></code></li>
+ <li><code><a href=#the-dialog-element>dialog</a></code></li>
<li><code><a href=#the-fieldset-element>fieldset</a></code></li>
<li><code><a href=#the-figure-element>figure</a></code></li>
<li><code><a href=#the-td-element>td</a></code></li>
@@ -34722,7 +34761,7 @@
</div>
- <hr><dl class=domintro><dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL</a></code>( [ <var title="">type</var>, ... ])</dt>
+ <hr><dl class=domintro><dt><var title="">url</var> = <var title="">canvas</var> . <code title=dom-canvas-toDataURL><a href=#dom-canvas-todataurl>toDataURL</a></code>( [ <var title="">type</var>, ... ] )</dt>
<dd>
@@ -35253,7 +35292,7 @@
object is then used by methods on <code><a href=#path>Path</a></code> objects to
control how text and paths are rasterised and stroked.</p>
- <dl class=domintro><dt><var title="">styles</var> = new <code title=dom-DrawingStyle><a href=#dom-drawingstyle>DrawingStyle</a></code>([ <var title="">element</var> ])</dt>
+ <dl class=domintro><dt><var title="">styles</var> = new <code title=dom-DrawingStyle><a href=#dom-drawingstyle>DrawingStyle</a></code>( [ <var title="">element</var> ] )</dt>
<dd>
@@ -53196,6 +53235,14 @@
to the state <dfn id=attr-fs-method-post title=attr-fs-method-POST>POST</dfn>, indicating
the HTTP POST method.</li>
+<!--FORM-DIALOG-->
+ <li>The keyword <dfn id=attr-fs-method-dialog-keyword title=attr-fs-method-dialog-keyword><code>dialog</code></dfn>,
+ mapping to the state <dfn id=attr-fs-method-dialog title=attr-fs-method-dialog>dialog</dfn>, indicating that
+ submitting the <code><a href=#the-form-element>form</a></code> is intended to close the
+ <code><a href=#the-dialog-element>dialog</a></code> box in which the form finds itself, if any, and
+ otherwise not submit.</li>
+<!--FORM-DIALOG-->
+
</ul><p>The <i>missing value default</i> for these attributes is the
<a href=#attr-fs-method-get title=attr-fs-method-GET>GET</a> state.</p>
@@ -54142,13 +54189,17 @@
<li>
- <p>Select the appropriate row in the table below based on the
- value of <var title="">scheme</var> as given by the first cell of
- each row. Then, select the appropriate cell on that row based on
- the value of <var title="">method</var> as given in the first cell
- of each column. Then, jump to the steps named in that cell and
- defined below the table.</p>
+<!--FORM-DIALOG-->
+ <p>If the value of <var title="">method</var> is <a href=#attr-fs-method-dialog title=attr-fs-method-dialog>dialog</a> then jump to the <a href=#submit-dialog title=submit-dialog>submit dialog</a> steps.</p>
+<!--FORM-DIALOG-->
+ <p>Otherwise, select the appropriate row in the table below based
+ on the value of <var title="">scheme</var> as given by the first
+ cell of each row. Then, select the appropriate cell on that row
+ based on the value of <var title="">method</var> as given in the
+ first cell of each column. Then, jump to the steps named in that
+ cell and defined below the table.</p>
+
<table><thead><tr><td>
<th> <a href=#attr-fs-method-get title=attr-fs-method-GET>GET</a>
<th> <a href=#attr-fs-method-post title=attr-fs-method-POST>POST</a>
@@ -54340,6 +54391,40 @@
</dd>
+
+<!--FORM-DIALOG-->
+ <dt><dfn id=submit-dialog title=submit-dialog>Submit dialog</dfn>
+ <dd>
+
+ <p>Let <var title="">dialog</var> be the nearest ancestor
+ <code><a href=#the-dialog-element>dialog</a></code> element of <var title="">form</var>, if
+ any.</p>
+
+ <p>If there isn't one, do nothing. Otherwise, proceed as
+ follows:</p>
+
+ <p>If <var title="">submitter</var> is an <code><a href=#the-input-element>input</a></code>
+ element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code>
+ attribute is in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image
+ Button</a> state, then let <var title="">result</var> be the
+ string formed by concatenating the <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected
+ coordinate</a>'s <var title="">x</var>-component, expressed
+ as a base-ten number using the characters U+0030 DIGIT ZERO (0)
+ to U+0039 DIGIT NINE (9) to represent the digits 0 to 9, a
+ U+002C COMMA character (,), and the <a href=#concept-input-type-image-coordinate title=concept-input-type-image-coordinate>selected
+ coordinate</a>'s <var title="">y</var>-component, expressed
+ in the same way as the <var title="">x</var>-component.</p>
+
+ <p>Otherwise, if <var title="">submitter</var> has a <a href=#concept-fe-value title=concept-fe-value>value</a>, then let <var title="">result</var> be that <a href=#concept-fe-value title=concept-fe-value>value</a>.</p>
+
+ <p>Otherwise, there is no <var title="">result</var>.</p>
+
+ <p>Then, <a href=#close-the-dialog>close the dialog</a> <var title="">dialog</var>. If there is a <var title="">result</var>,
+ let that be the return value.</p>
+
+ </dd>
+<!--FORM-DIALOG-->
+
</dl><p>The <dfn id=appropriate-form-encoding-algorithm>appropriate form encoding algorithm</dfn> is
determined as follows:</p>
@@ -55784,10 +55869,10 @@
<h4 id=commands><span class=secno>4.11.5 </span>Commands</h4>
<p>A <dfn id=concept-command title=concept-command>command</dfn> is the abstraction
- behind menu items, buttons, and links. Once a command
- is defined, other parts of the interface can refer to the same
- command, allowing many access points to a single feature to share
- facets such as the <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a>.</p>
+ behind menu items, buttons, and links. Once a command is defined,
+ other parts of the interface can refer to the same command, allowing
+ many access points to a single feature to share facets such as the
+ <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a>.</p>
<p id=facets>Commands are defined to have the following
<dfn id=concept-facet title=concept-facet>facets</dfn>:</p>
@@ -56067,8 +56152,8 @@
otherwise.</p>
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
- State</a> facet of the command is always false. (The command is
- always enabled.)</p>
+ State</a> facet of the command is true if the element or one of
+ its ancestors is <a href=#inert>inert</a>, and false otherwise.</p>
<p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
of the command is always false. (The command is never checked.)</p>
@@ -56086,7 +56171,9 @@
elements</a> (see the previous section).</p>
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
- State</a> of the command mirrors the <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state of the button.</p>
+ State</a> of the command is true if the element or one of its
+ ancestors is <a href=#inert>inert</a>, or if the element's <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state is set, and false
+ otherwise.</p>
<h5 id=using-the-input-element-to-define-a-command><span class=secno>4.11.5.3 </span><dfn title=input-command>Using the <code>input</code> element to define a command</dfn></h5>
@@ -56144,8 +56231,9 @@
otherwise.</p>
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
- State</a> of the command mirrors the <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state of the
- control.</p>
+ State</a> of the command is true if the element or one of its
+ ancestors is <a href=#inert>inert</a>, or if the element's <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a> state is set, and false
+ otherwise.</p>
<p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
of the command is true if the command is of <a href=#command-facet-type title=command-facet-Type>Type</a> "radio" or "checkbox" and the
@@ -56201,10 +56289,9 @@
otherwise.</p>
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
- State</a> of the command is true (disabled) if the element is
- <a href=#concept-option-disabled title=concept-option-disabled>disabled</a> or if its
- nearest ancestor <code><a href=#the-select-element>select</a></code> element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, and false
- otherwise.</p>
+ State</a> of the command is true if the element is <a href=#concept-option-disabled title=concept-option-disabled>disabled</a>, or if its nearest
+ ancestor <code><a href=#the-select-element>select</a></code> element is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, or if it or one of its
+ ancestors is <a href=#inert>inert</a>, and false otherwise.</p>
<p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
of the command is true (checked) if the element's <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is true, and
@@ -56255,9 +56342,9 @@
otherwise.</p>
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
- State</a> of the command is true (disabled) if the element has a
- <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute, and
- false otherwise.</p>
+ State</a> of the command is true if the element or one of its
+ ancestors is <a href=#inert>inert</a>, or if the element has a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute, and false
+ otherwise.</p>
<p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
of the command is true (checked) if the element has a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, and false
@@ -56447,8 +56534,8 @@
otherwise.</p>
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
- State</a> facet of the command is always false. (The command is
- always enabled.)</p>
+ State</a> of the command is true if the element or one of its
+ ancestors is <a href=#inert>inert</a>, and false otherwise.</p>
<p>The <a href=#command-facet-checkedstate title=command-facet-CheckedState>Checked State</a>
of the command is always false. (The command is never checked.)</p>
@@ -56469,8 +56556,466 @@
</ol></div>
+ <h4 id=the-dialog-element><span class=secno>4.11.6 </span>The <dfn><code>dialog</code></dfn> element</h4>
+ <dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dd><a href=#sectioning-root>Sectioning root</a>.</dd>
+ <dt><a href=#element-dfn-contexts title=element-dfn-contexts>Contexts in which this element can be used</a>:</dt>
+ <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
+ <dd>As a child of a <code><a href=#the-dt-element>dt</a></code> element.</dd>
+ <dd>As a child of a <code><a href=#the-th-element>th</a></code> element.</dd>
+ <dt><a href=#element-dfn-content-model title=element-dfn-content-model>Content model</a>:</dt>
+ <dd><a href=#flow-content>Flow content</a>.</dd>
+ <dt><a href=#element-dfn-attributes title=element-dfn-attributes>Content attributes</a>:</dt>
+ <dd><a href=#global-attributes>Global attributes</a></dd>
+ <dd><code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code></dd>
+ <dt><a href=#element-dfn-dom title=element-dfn-dom>DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
+ <dd>
+<pre class=idl>interface <dfn id=htmldialogelement>HTMLDialogElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ attribute boolean <a href=#dom-dialog-open title=dom-dialog-open>open</a>;
+ attribute DOMString <a href=#dom-dialog-returnvalue title=dom-dialog-returnValue>returnValue</a>;
+ void show(optional (<a href=#mouseevent>MouseEvent</a> or <a href=#element>Element</a>) anchor);
+ void showModal(optional (<a href=#mouseevent>MouseEvent</a> or <a href=#element>Element</a>) anchor);
+ void close(optional DOMString returnValue);
+};</pre>
+ </dd>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-dialog-element>dialog</a></code> element represents a part of an
+ application that a user interacts with to perform a task, for
+ example a dialog box, inspector, or window.</p>
+ <p>The <dfn id=attr-dialog-open title=attr-dialog-open><code>open</code></dfn>
+ attribute is a <a href=#boolean-attribute>boolean attribute</a>. When specified, it
+ indicates that the <code><a href=#the-dialog-element>dialog</a></code> element is active and that
+ the user can interact with it.</p>
+
+ <div class=impl>
+
+ <p>A <code><a href=#the-dialog-element>dialog</a></code> element without an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute specified should not
+ be shown to the user. This requirement may be implemented indirectly
+ through the style layer. For example, user agents that <a href=#renderingUA>support the suggested default rendering</a>
+ implement this requirement using the CSS rules described in the <a href=#rendering>rendering section</a>.</p>
+
+ </div>
+
+<!--TOPIC:DOM APIs-->
+
+ <dl class=domintro><dt><var title="">dialog</var> . <code title=dom-dialog-show><a href=#dom-dialog-show>show</a></code>( [ <var title="">anchor</var> ] )</dt>
+
+ <dd>
+
+ <p>Displays the <code><a href=#the-dialog-element>dialog</a></code> element.</p>
+
+ <p>The argument, if provided, provides an anchor point to which
+ the element will be fixed.</p>
+
+ </dd>
+
+ <dt><var title="">dialog</var> . <code title=dom-dialog-showModal><a href=#dom-dialog-showmodal>showModal</a></code>( [ <var title="">anchor</var> ] )</dt>
+
+ <dd>
+
+ <p>Displays the <code><a href=#the-dialog-element>dialog</a></code> element and makes it the top-most modal dialog.</p>
+
+ <p>The argument, if provided, provides an anchor point to which
+ the element will be fixed.</p>
+
+ </dd>
+
+ <dt><var title="">dialog</var> . <code title=dom-dialog-close><a href=#dom-dialog-close>close</a></code>( [ <var title="">result</var> ] )</dt>
+
+ <dd>
+
+ <p>Closes the <code><a href=#the-dialog-element>dialog</a></code> element.</p>
+
+ <p>The argument, if provided, provides a return value.</p>
+
+ </dd>
+
+ <dt><var title="">dialog</var> . <code title=dom-dialog-returnValue><a href=#dom-dialog-returnvalue>returnValue</a></code> [ = <var title="">result</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the <code><a href=#the-dialog-element>dialog</a></code>'s return value.</p>
+
+ <p>Can be set, to update the return value.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <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>
+
+ <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.</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>
+
+ <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>
+
+ <ol><li><p>Let <var title="">dialog</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="">dialog</var> already has an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, then throw an
+ <a href=#invalidstateerror>InvalidStateError</a> exception and abort these
+ steps.</li>
+
+ <li><p>If <var title="">dialog</var> is not <a href=#in-a-document>in a
+ <code>Document</code></a>, then throw an
+ <a href=#invalidstateerror>InvalidStateError</a> 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="">dialog</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="">dialog</var>, using that argument
+ as the anchor.</li>
+
+ <li><p>Let <var title="">dialog</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="">dialog</var>.</li>
+
+ <li><p>Push <var title="">dialog</var> onto <var title="">dialog</var>'s <code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending
+ dialog stack</a>.</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><li><p>Let <var title="">dialog</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="">dialog</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
+ 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>
+
+<!--TOPIC:HTML-->
+
+ <p>When a <code><a href=#the-dialog-element>dialog</a></code> element <var title="">dialog</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="">dialog</var> does not have an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, then throw an
+ <a href=#invalidstateerror>InvalidStateError</a> exception and abort these
+ steps.</li>
+
+ <li><p>Remove <var title="">dialog</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 <var title="">dialog</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="">dialog</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="">dialog</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 <code title=event-close>close</code> at <var title="">dialog</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 laast 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 <code title=event-cancel>cancel</code> 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>
+
+ <hr><p>When a user agent is to <dfn id=set-up-the-position>set up the position</dfn> of an
+ element <var title="">dialog</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>
+
+ <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="">dialog</var>, then 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>
+
+ </ol><p>Otherwise, let <var title="">anchor element</var> be <var title="">anchor</var>.</p>
+
+ </li>
+
+ <li><p>Let <var title="">dialog</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 <dfn id=magically-aligned>magically
+ aligned</dfn> to an element <var title="">B</var>, <var title="">A</var> and <var title="">B</var> both have rendered boxes,
+ and <var title="">B</var> is not a descendant of <var title="">A</var>, the following requirements apply:</p>
+
+ <ul><li><p><var title="">A</var>'s 'position' property must compute to
+ the keyword '<dfn id=css-position-absolute-anchored title=css-position-absolute-anchored>absolute-anchored</dfn>'.</li>
+
+ <li>
+
+ <p>Let <var title="">A</var> and <var title="">B</var>'s anchor
+ points be 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>
+
+ <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.
+
+
+ <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>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>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
+ 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>
+
+
+ <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>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>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
+ 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>
+
+
+ <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.
+
+ </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>
+
+ </li>
+
+ </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>When an element's 'position' property must compute to
+ 'absolute-anchored', the 'float', property does not apply and must
+ compute to 'none', the 'display' property must compute to a value as
+ described by the table in <a href=http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo>the
+ section of CSS 2.1 describing the <cite>relationships between
+ 'display', 'position', and 'float'</cite></a>, and the element's box
+ must be positioned using the rules for absolute positioning but with
+ its static position set such that if the box is positioned in its
+ static position, its anchor point is exactly aligned over the anchor
+ point of the element to which it is <a href=#magically-aligned>magically
+ aligned</a>.</p>
+
+ <p class=note>The 'absolute-anchored' keyword is not a keyword
+ that can be specified in CSS; the 'position' property can only
+ compute to this value if the <code><a href=#the-dialog-element>dialog</a></code> element is
+ positioned via the APIs described above.</p>
+
+<!--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>
+
+
+ <h5 id=anchor-points><span class=secno>4.11.6.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>
+
+ <table class=css-property><caption>'anchor-point'</caption>
+ <tr><th>Value:
+ <td> none | <position>
+ <tr><th>Initial:
+ <td> none
+ <tr><th>Applies to:
+ <td> all elements
+ <tr><th>Inherited:
+ <td> no
+ <tr><th>Percentages:
+ <td> refer to width or height of box; see prose
+ <tr><th>Media:
+ <td> visual
+ <tr><th>Computed value:
+ <td> The specified value, but with any lengths replaced by their corresponding absolute length
+ <tr><th>Animatable:
+ <td> no
+ <tr><th>Canonical order:
+ <td> per grammar
+ </table><p>The '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 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>
+
+
<h3 id=links><span class=secno>4.12 </span>Links</h3>
<h4 id=introduction-3><span class=secno>4.12.1 </span>Introduction</h4>
@@ -63726,10 +64271,12 @@
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-window-onbeforeprint title=handler-window-onbeforeprint>onbeforeprint</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-window-onbeforeunload title=handler-window-onbeforeunload>onbeforeunload</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-window-onblur title=handler-window-onblur>onblur</a>;
+ [TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncancel title=handler-oncancel>oncancel</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncanplay title=handler-oncanplay>oncanplay</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncanplaythrough title=handler-oncanplaythrough>oncanplaythrough</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onchange title=handler-onchange>onchange</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onclick title=handler-onclick>onclick</a>;
+ [TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-onclose title=handler-onclose>onclose</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncontextmenu title=handler-oncontextmenu>oncontextmenu</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-oncuechange title=handler-oncuechange>oncuechange</a>;
[TreatNonCallableAsNull] attribute <a href=#function>Function</a>? <a href=#handler-ondblclick title=handler-ondblclick>ondblclick</a>;
@@ -70811,10 +71358,12 @@
<table><thead><tr><th><a href=#event-handlers title="event handlers">Event handler</a> <th><a href=#event-handler-event-type>Event handler event type</a>
<tbody><tr><td><dfn id=handler-onabort title=handler-onabort><code>onabort</code></dfn> <td> <code title=event-abort>abort</code>
+ <tr><td><dfn id=handler-oncancel title=handler-oncancel><code>oncancel</code></dfn> <td> <code title=event-media-cancel>cancel</code>
<tr><td><dfn id=handler-oncanplay title=handler-oncanplay><code>oncanplay</code></dfn> <td> <code title=event-media-canplay><a href=#event-media-canplay>canplay</a></code>
<tr><td><dfn id=handler-oncanplaythrough title=handler-oncanplaythrough><code>oncanplaythrough</code></dfn> <td> <code title=event-media-canplaythrough><a href=#event-media-canplaythrough>canplaythrough</a></code>
<tr><td><dfn id=handler-onchange title=handler-onchange><code>onchange</code></dfn> <td> <code title=event-change>change</code> <!-- widely used -->
<tr><td><dfn id=handler-onclick title=handler-onclick><code>onclick</code></dfn> <td> <code title=event-click><a href=#event-click>click</a></code> <!-- widely used -->
+ <tr><td><dfn id=handler-onclose title=handler-onclose><code>onclose</code></dfn> <td> <code title=event-close>close</code> <!-- new for <dialog> -->
<tr><td><dfn id=handler-oncontextmenu title=handler-oncontextmenu><code>oncontextmenu</code></dfn> <td> <code title=event-contextmenu>contextmenu</code> <!-- widely used -->
<tr><td><dfn id=handler-oncuechange title=handler-oncuechange><code>oncuechange</code></dfn> <td> <code title=event-cuechange>cuechange</code>
<tr><td><dfn id=handler-ondblclick title=handler-ondblclick><code>ondblclick</code></dfn> <td> <code title=event-dblclick>dblclick</code> <!-- widely used -->
@@ -73013,8 +73562,78 @@
+ <h3 id=inert-subtrees><span class=secno>8.2 </span>Inert subtrees</h3>
+
+ <p>A subtree of a <code><a href=#document>Document</a></code> can be marked as
+ <dfn id=inert>inert</dfn>. When a node or one of its ancestors is
+ <a href=#inert>inert</a>, then the user agent must act as if the element
+ was absent for the purposes of targetting user interaction events,
+ may ignore the node for the purposes of text search user interfaces
+ (commonly known as "find in page"), and may prevent the user from
+ selecting text in that node. User agents should allow the user to
+ override the restrictions on search and text selection, however.</p>
+
+ <p class=example>For example, consider a page that consists of
+ just a single <a href=#inert>inert</a> paragraph positioned in the middle
+ of a <code><a href=#the-body-element>body</a></code>. If a user moves their pointing device from
+ the <code><a href=#the-body-element>body</a></code> over to the <a href=#inert>inert</a> paragraph and
+ clicks on the paragraph, no <code title=event-mouseover>mouseover</code> event would be fired, and
+ the <code title=event-mousemove>mousemove</code> and <code title=event-click><a href=#event-click>click</a></code> events would be fired on the
+ <code><a href=#the-body-element>body</a></code> element rather than the paragraph.</p>
+
+ <p class=note>When a node or one of its ancestors is inert, it
+ also can't be focused (see the <a href=#focusing-steps>focusing steps</a>), and it
+ is disabled if it is a <a href=#concept-command title=concept-command>command</a>.</p>
+
+ <p>An entire <code><a href=#document>Document</a></code> can be marked as <dfn id=blocked-by-a-modal-dialog>blocked by
+ a modal dialog</dfn> <var title="">dialog</var>. While a
+ <code><a href=#document>Document</a></code> is so marked, every node that is <a href=#in-a-document title="in a Document">in the <code>Document</code></a>, with the
+ exception of the <var title="">dialog</var> element, its ancestors,
+ and its descendants, must be marked <a href=#inert>inert</a>. (The
+ elements excepted by this paragraph can additionally be marked
+ <a href=#inert>inert</a> through other means; being part of a modal dialog
+ does not "protect" a node from being marked <a href=#inert>inert</a>.)</p>
+
+ <p>Only one element at a time can mark a <code><a href=#document>Document</a></code> as
+ being <a href=#blocked-by-a-modal-dialog>blocked by a modal dialog</a>. When a new
+ <code><a href=#the-dialog-element>dialog</a></code> is made to <a href=#blocked-by-a-modal-dialog title="blocked by a modal
+ dialog">block</a> a <code><a href=#document>Document</a></code>, the previous element,
+ if any, stops blocking the <code><a href=#document>Document</a></code>.</p>
+
+ <p class=note>The <code><a href=#the-dialog-element>dialog</a></code> element's <code title=dom-dialog-showModal><a href=#dom-dialog-showmodal>showModal()</a></code> method makes use of
+ this mechanism.</p>
+
+
+<!--INERT-->
+ <h4 id=the-inert-attribute><span class=secno>8.2.1 </span>The <dfn title=attr-inert><code>inert</code></dfn> attribute</h4>
+
+ <p>The <code title=attr-inert><a href=#the-inert-attribute>inert</a></code> attribute is a
+ <a href=#boolean-attribute>boolean attribute</a> that indicates, by its presence, that
+ the element is to be made <a href=#inert>inert</a>.</p>
+
+ <div class=impl>
+
+ <p>When an element has an <code title=attr-inert><a href=#the-inert-attribute>inert</a></code>
+ attribute, the user agent must mark that element as
+ <a href=#inert>inert</a>.</p>
+
+ </div>
+
+ <p class=note>By default, there is no visual indication of a
+ subtree being inert. Authors are encouraged to clearly mark what
+ parts of their document are active and which are inert, to avoid
+ user confusion. In particular, it is worth remembering that not all
+ users can see all parts of a page at once; for example, users of
+ screen readers, users on small devices or with magnifiers, and even
+ users just using particularly small windows might not be able to see
+ the active part of a page and may get frustrated if inert sections
+ are not obviously inert. For individual controls, the <code title=attr-input-disabled>disabled</code> attribute is probably
+ more appropriate.</p>
+<!--INERT-->
+
+
<!--TOPIC:DOM APIs-->
- <h3 id=activation><span class=secno>8.2 </span>Activation</h3>
+ <h3 id=activation><span class=secno>8.3 </span>Activation</h3>
<!-- v2 idea: HTMLImageElement.click(x, y); or clickPoint(), if
click() can't be done in IE; can this be emulated in IE by
@@ -73040,7 +73659,7 @@
<!--TOPIC:HTML-->
- <h3 id=focus><span class=secno>8.3 </span>Focus</h3>
+ <h3 id=focus><span class=secno>8.4 </span>Focus</h3>
<!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%20%0A...%3Cform%3E%3Cinput%20name%3Da%20onfocus%3D%22value%2B%3D1%3Bd.name%3D%27a%27%3Bname%3D%27d%27%3Bb.focus()%22%3E%0A%3Cinput%20name%3Db%20onfocus%3D%22value%2B%3D1%3Bc.focus()%22%3E%0A%3Cinput%20name%3Dc%20onfocus%3D%22value%2B%3D1%3Bd.focus()%22%3E%0A%3Cinput%20name%3Dd%20onfocus%3D%22value%2B%3D1%3Ba.focus()%22%3E -->
@@ -73091,7 +73710,7 @@
</div>
- <h4 id=sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.3.1 </span>Sequential focus navigation and the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute</h4>
+ <h4 id=sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.4.1 </span>Sequential focus navigation and the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute</h4>
<p>The <dfn id=attr-tabindex title=attr-tabindex><code>tabindex</code></dfn>
content attribute allows authors to control whether an element is
@@ -73221,7 +73840,7 @@
<div class=impl>
- <h4 id=focus-management><span class=secno>8.3.2 </span>Focus management</h4>
+ <h4 id=focus-management><span class=secno>8.4.2 </span>Focus management</h4>
<p>An element is <dfn id=focusable>focusable</dfn> if the user agent's default
behavior allows it to be focusable or if the element has its
@@ -73279,7 +73898,8 @@
<code><a href=#document>Document</a></code> has no <a href=#browsing-context>browsing context</a>, or if
the element's <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a>
has no <a href=#top-level-browsing-context>top-level browsing context</a>, or if the element
- is not <a href=#focusable>focusable</a>, then abort these steps.</p>
+ is not <a href=#focusable>focusable</a>, or if the element or one of its
+ ancestors is <a href=#inert>inert</a>, then abort these steps.</p>
<li><p>If focusing the element will remove the focus from another
element, then run the <a href=#unfocusing-steps>unfocusing steps</a> for that
@@ -73345,7 +73965,7 @@
<!--TOPIC:DOM APIs-->
- <h4 id=document-level-focus-apis><span class=secno>8.3.3 </span>Document-level focus APIs</h4>
+ <h4 id=document-level-focus-apis><span class=secno>8.4.3 </span>Document-level focus APIs</h4>
<dl class=domintro><dt><var title="">document</var> . <code title=dom-document-activeElement><a href=#dom-document-activeelement>activeElement</a></code></dt>
@@ -73430,7 +74050,7 @@
</div>
- <h4 id=element-level-focus-apis><span class=secno>8.3.4 </span>Element-level focus APIs</h4>
+ <h4 id=element-level-focus-apis><span class=secno>8.4.4 </span>Element-level focus APIs</h4>
<dl class=domintro><dt><var title="">element</var> . <code title=dom-focus><a href=#dom-focus>focus</a></code>()</dt>
@@ -73499,9 +74119,9 @@
- <h3 id=assigning-keyboard-shortcuts><span class=secno>8.4 </span>Assigning keyboard shortcuts</h3>
+ <h3 id=assigning-keyboard-shortcuts><span class=secno>8.5 </span>Assigning keyboard shortcuts</h3>
- <h4 id=introduction-7><span class=secno>8.4.1 </span>Introduction</h4>
+ <h4 id=introduction-7><span class=secno>8.5.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -73569,7 +74189,7 @@
</div>
- <h4 id=the-accesskey-attribute><span class=secno>8.4.2 </span>The <dfn title=attr-accesskey><code>accesskey</code></dfn> attribute</h4>
+ <h4 id=the-accesskey-attribute><span class=secno>8.5.2 </span>The <dfn title=attr-accesskey><code>accesskey</code></dfn> attribute</h4>
<p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute set. The
<code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute's value is
@@ -73647,7 +74267,7 @@
<div class=impl>
- <h4 id=processing-model-3><span class=secno>8.4.3 </span>Processing model</h4>
+ <h4 id=processing-model-3><span class=secno>8.5.3 </span>Processing model</h4>
<p>An element's <dfn id=assigned-access-key>assigned access key</dfn> is a key combination
derived from the element's <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute.
@@ -73724,9 +74344,9 @@
- <h3 id=editing-0><span class=secno>8.5 </span>Editing</h3>
+ <h3 id=editing-0><span class=secno>8.6 </span>Editing</h3>
- <h4 id=contenteditable><span class=secno>8.5.1 </span>Making document regions editable: The <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> content
+ <h4 id=contenteditable><span class=secno>8.6.1 </span>Making document regions editable: The <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> content
attribute</h4>
<p>The <dfn id=attr-contenteditable title=attr-contenteditable><code>contenteditable</code></dfn>
@@ -73787,7 +74407,7 @@
</div>
- <h4 id=making-entire-documents-editable:-the-designmode-idl-attribute><span class=secno>8.5.2 </span>Making entire documents editable: The <code title=dom-document-designMode><a href=#designMode>designMode</a></code> IDL attribute</h4>
+ <h4 id=making-entire-documents-editable:-the-designmode-idl-attribute><span class=secno>8.6.2 </span>Making entire documents editable: The <code title=dom-document-designMode><a href=#designMode>designMode</a></code> IDL attribute</h4>
<div class=impl>
@@ -73828,7 +74448,7 @@
</div>
- <h4 id=best-practices-for-in-page-editors><span class=secno>8.5.3 </span>Best practices for in-page editors</h4>
+ <h4 id=best-practices-for-in-page-editors><span class=secno>8.6.3 </span>Best practices for in-page editors</h4>
<p>Authors are encouraged to set the 'white-space' property on <a href=#editing-host title="editing host">editing hosts</a> and on markup that was
originally created through these editing mechanisms to the value
@@ -73867,7 +74487,7 @@
- <h4 id=editing-apis><span class=secno>8.5.4 </span>Editing APIs</h4>
+ <h4 id=editing-apis><span class=secno>8.6.4 </span>Editing APIs</h4>
<p>The definition of the terms <dfn id=active-range>active range</dfn>, <dfn id=editing-host>editing
host</dfn>, and <dfn id=editable>editable</dfn>, the user interface requirements
@@ -73890,7 +74510,7 @@
- <h4 id=spelling-and-grammar-checking><span class=secno>8.5.5 </span>Spelling and grammar checking</h4>
+ <h4 id=spelling-and-grammar-checking><span class=secno>8.6.5 </span>Spelling and grammar checking</h4>
<div class=impl>
@@ -74084,7 +74704,7 @@
the checking is enabled, or could use other interfaces.</p>
- <h3 id=dnd><span class=secno>8.6 </span><dfn>Drag and drop</dfn></h3>
+ <h3 id=dnd><span class=secno>8.7 </span><dfn>Drag and drop</dfn></h3>
<!-- v2: ideas for drag and drop:
@@ -74186,7 +74806,7 @@
</div>
- <h4 id=introduction-8><span class=secno>8.6.1 </span>Introduction</h4>
+ <h4 id=introduction-8><span class=secno>8.7.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -74289,7 +74909,7 @@
- <h4 id=the-drag-data-store><span class=secno>8.6.2 </span>The drag data store</h4>
+ <h4 id=the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</h4>
<p>The data that underlies a drag-and-drop operation, known as the
<dfn id=drag-data-store>drag data store</dfn>, consists of the following information:</p>
@@ -74434,7 +75054,7 @@
store allowed effects state</a> is the string "<code title="">uninitialized</code>".</p>
- <h4 id=the-datatransfer-interface><span class=secno>8.6.3 </span>The <code><a href=#datatransfer>DataTransfer</a></code> interface</h4>
+ <h4 id=the-datatransfer-interface><span class=secno>8.7.3 </span>The <code><a href=#datatransfer>DataTransfer</a></code> interface</h4>
<p><code><a href=#datatransfer>DataTransfer</a></code> objects are used to expose the
<a href=#drag-data-store>drag data store</a> that underlies a drag-and-drop
@@ -74811,7 +75431,7 @@
</div>
- <h5 id=the-datatransferitemlist-interface><span class=secno>8.6.3.1 </span>The <code><a href=#datatransferitemlist>DataTransferItemList</a></code> interface</h5>
+ <h5 id=the-datatransferitemlist-interface><span class=secno>8.7.3.1 </span>The <code><a href=#datatransferitemlist>DataTransferItemList</a></code> interface</h5>
<p>Each <code><a href=#datatransfer>DataTransfer</a></code> object is associated with a
<code><a href=#datatransferitemlist>DataTransferItemList</a></code> object.</p>
@@ -75020,7 +75640,7 @@
</ol></div>
- <h5 id=the-datatransferitem-interface><span class=secno>8.6.3.2 </span>The <code><a href=#datatransferitem>DataTransferItem</a></code> interface</h5>
+ <h5 id=the-datatransferitem-interface><span class=secno>8.7.3.2 </span>The <code><a href=#datatransferitem>DataTransferItem</a></code> interface</h5>
<p>Each <code><a href=#datatransferitem>DataTransferItem</a></code> object is associated with a
<code><a href=#datatransfer>DataTransfer</a></code> object.</p>
@@ -75248,7 +75868,7 @@
- <h4 id=the-dragevent-interface><span class=secno>8.6.4 </span>The <code><a href=#dragevent>DragEvent</a></code> interface</h4>
+ <h4 id=the-dragevent-interface><span class=secno>8.7.4 </span>The <code><a href=#dragevent>DragEvent</a></code> interface</h4>
<p>The drag-and-drop processing model involves several events. They
all use the <code><a href=#dragevent>DragEvent</a></code> interface.</p>
@@ -75375,7 +75995,7 @@
<div class=impl>
- <h4 id=drag-and-drop-processing-model><span class=secno>8.6.5 </span>Drag-and-drop processing model</h4>
+ <h4 id=drag-and-drop-processing-model><span class=secno>8.7.5 </span>Drag-and-drop processing model</h4>
<p>When the user attempts to begin a drag operation, the user agent
must run the following steps. User agents must act as if these steps
@@ -76020,7 +76640,7 @@
</div>
- <h4 id=dndevents><span class=secno>8.6.6 </span>Events summary</h4>
+ <h4 id=dndevents><span class=secno>8.7.6 </span>Events summary</h4>
<p><i>This section is non-normative.</i></p>
@@ -76099,7 +76719,7 @@
- <h4 id=the-draggable-attribute><span class=secno>8.6.7 </span>The <dfn title=attr-draggable><code>draggable</code></dfn> attribute</h4>
+ <h4 id=the-draggable-attribute><span class=secno>8.7.7 </span>The <dfn title=attr-draggable><code>draggable</code></dfn> attribute</h4>
<p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute set. The
<code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> attribute is an
@@ -76158,7 +76778,7 @@
</div>
- <h4 id=the-dropzone-attribute><span class=secno>8.6.8 </span>The <dfn title=attr-dropzone><code>dropzone</code></dfn> attribute</h4>
+ <h4 id=the-dropzone-attribute><span class=secno>8.7.8 </span>The <dfn title=attr-dropzone><code>dropzone</code></dfn> attribute</h4>
<p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> content attribute set. When
specified, its value must be an <a href=#unordered-set-of-unique-space-separated-tokens>unordered set of unique
@@ -76477,7 +77097,7 @@
<!--ADD-TOPIC:Security-->
<div class=impl>
- <h4 id=security-risks-in-the-drag-and-drop-model><span class=secno>8.6.9 </span>Security risks in the drag-and-drop model</h4>
+ <h4 id=security-risks-in-the-drag-and-drop-model><span class=secno>8.7.9 </span>Security risks in the drag-and-drop model</h4>
<p>User agents must not make the data added to the
<code><a href=#datatransfer>DataTransfer</a></code> object during the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event available to scripts
@@ -76524,7 +77144,7 @@
<!--FIND-->
<!--TOPIC:DOM APIs-->
- <h3 id=text-search-apis><span class=secno>8.7 </span>Text search APIs</h3> <!-- window.find() -->
+ <h3 id=text-search-apis><span class=secno>8.8 </span>Text search APIs</h3> <!-- window.find() -->
<p class=critical>This legacy API is not very interoperably
implemented, and has a number of design problems (such as having six
@@ -87948,9 +88568,9 @@
<!-- the normal ones -->
<dt>A start tag whose tag name is one of: "address", "article",
- "aside", "blockquote", "center", "details", "dir", "div", "dl",
- "fieldset", "figcaption", "figure", "footer", "header", "hgroup",
- "menu", "nav", "ol", "p", "section", "summary", "ul"</dt>
+ "aside", "blockquote", "center", "details", "dialog", "dir", "div",
+ "dl", "fieldset", "figcaption", "figure", "footer", "header",
+ "hgroup", "menu", "nav", "ol", "p", "section", "summary", "ul"</dt>
<dd>
<!-- As of May 2008 this doesn't match any browser exactly, but is
@@ -88169,10 +88789,10 @@
<!-- the normal ones -->
<dt>An end tag whose tag name is one of: "address", "article",
- "aside", "blockquote", "button", "center", "details", "dir", "div",
- "dl", "fieldset", "figcaption", "figure", "footer", "header",
- "hgroup", "listing", "menu", "nav", "ol", "pre", "section",
- "summary", "ul"</dt>
+ "aside", "blockquote", "button", "center", "details", "dialog",
+ "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer",
+ "header", "hgroup", "listing", "menu", "nav", "ol", "pre",
+ "section", "summary", "ul"</dt>
<dd>
<p>If the <a href=#stack-of-open-elements>stack of open elements</a> does not <a href=#has-an-element-in-scope title="has an element in scope">have an element in scope</a>
@@ -92081,8 +92701,20 @@
address { font-style: italic; }
listing, plaintext, pre, xmp {
font-family: monospace; white-space: pre;
-}</pre>
+}
+dialog:not([open]) { display: none; }
+dialog {
+ position: absolute;
+ left: 0; right: 0;
+ margin: auto;
+ border: solid;
+ padding: 1em;
+ background: white;
+ color: black;
+}
+dialog::backdrop { background: rgba(0,0,0,0.1); }</pre>
+
<p>The following rules are also expected to apply, as
<a href=#presentational-hints>presentational hints</a>:</p>
@@ -97182,6 +97814,17 @@
<td><a href=#phrasing-content title="Phrasing content">phrasing</a>*</td>
<td><a href=#global-attributes title="global attributes">globals</a></td>
<td><code><a href=#htmlelement>HTMLElement</a></code></td>
+ <tr><th><code><a href=#the-dialog-element>dialog</a></code></th>
+ <td>Dialog box or window</td>
+ <td><a href=#flow-content title="Flow content">flow</a>;
+ <a href=#sectioning-root title="Sectioning root">sectioning root</a></td>
+ <td><code><a href=#the-dt-element>dt</a></code>;
+ <code><a href=#the-th-element>th</a></code>;
+ <a href=#flow-content title="Flow content">flow</a></td>
+ <td><a href=#flow-content title="Flow content">flow</a></td>
+ <td><a href=#global-attributes title="global attributes">globals</a>;
+ <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code></td>
+ <td><code><a href=#htmldialogelement>HTMLDialogElement</a></code></td>
<tr><th><code><a href=#the-div-element>div</a></code></th>
<td>Generic flow container</td>
<td><a href=#flow-content title="Flow content">flow</a></td>
@@ -98075,6 +98718,7 @@
<code><a href=#the-del-element>del</a></code>;
<code><a href=#the-details-element>details</a></code>;
<code><a href=#the-dfn-element>dfn</a></code>;
+ <code><a href=#the-dialog-element>dialog</a></code>;
<code><a href=#the-div-element>div</a></code>;
<code><a href=#the-dl-element>dl</a></code>;
<code><a href=#the-em-element>em</a></code>;
@@ -98269,6 +98913,7 @@
<code><a href=#the-blockquote-element>blockquote</a></code>;
<code><a href=#the-body-element>body</a></code>;
<code><a href=#the-details-element>details</a></code>;
+ <code><a href=#the-dialog-element>dialog</a></code>;
<code><a href=#the-fieldset-element>fieldset</a></code>;
<code><a href=#the-figure-element>figure</a></code>;
<code><a href=#the-td-element>td</a></code>
@@ -98709,6 +99354,12 @@
<td> <a href=#the-id-attribute title=attr-id>HTML elements</a>
<td> The element's <a href=#concept-id title=concept-id>ID</a>
<td> <a href=#attribute-text>Text</a>*
+<!--INERT-->
+ <tr><th> <code title="">inert</code>
+ <td> <a href=#the-inert-attribute title=attr-inert>HTML elements</a>
+ <td> Whether the element is inert
+ <td> <a href=#boolean-attribute>Boolean attribute</a>
+<!--INERT-->
<tr><th> <code title="">ismap</code>
<td> <code title=attr-img-ismap><a href=#attr-img-ismap>img</a></code>
<td> Whether the image is a server-side image map
@@ -98806,7 +99457,11 @@
<tr><th> <code title="">method</code>
<td> <code title=attr-fs-method><a href=#attr-fs-method>form</a></code>
<td> HTTP method to use for <a href=#form-submission>form submission</a>
- <td> "<code title="">GET</code>"; "<code title="">POST</code>"
+ <td> "<code title=attr-fs-method-GET-keyword><a href=#attr-fs-method-get-keyword>GET</a></code>";
+ "<code title=attr-fs-method-POST-keyword><a href=#attr-fs-method-post-keyword>POST</a></code>";
+<!--FORM-DIALOG-->
+ "<code title=attr-fs-method-dialog-keyword><a href=#attr-fs-method-dialog-keyword>dialog</a></code>"
+<!--FORM-DIALOG-->
<tr><th> <code title="">min</code>
<td> <code title=attr-input-min><a href=#attr-input-min>input</a></code>
<td> Minimum value
@@ -98864,6 +99519,10 @@
<td> <code title=attr-details-open><a href=#attr-details-open>details</a></code>
<td> Whether the details are visible
<td> <a href=#boolean-attribute>Boolean attribute</a>
+ <tr><th> <code title="">open</code>
+ <td> <code title=attr-dialog-open><a href=#attr-dialog-open>dialog</a></code>
+ <td> Whether the dialog box is showing
+ <td> <a href=#boolean-attribute>Boolean attribute</a>
<tr><th> <code title="">optimum</code>
<td> <code title=attr-meter-optimum><a href=#attr-meter-optimum>meter</a></code>
<td> Optimum value in gauge
@@ -99177,6 +99836,11 @@
<td> <code title=event-blur>blur</code> event handler
<td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
+ <tr><th id=ix-handler-oncancel> <code title="">oncancel</code>
+ <td> <a href=#handler-oncancel title=handler-oncancel>HTML elements</a>
+ <td> <code title=event-media-cancel>cancel</code> event handler
+ <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
+
<tr><th id=ix-handler-oncanplay> <code title="">oncanplay</code>
<td> <a href=#handler-oncanplay title=handler-oncanplay>HTML elements</a>
<td> <code title=event-media-canplay><a href=#event-media-canplay>canplay</a></code> event handler
@@ -99197,6 +99861,11 @@
<td> <code title=event-click><a href=#event-click>click</a></code> event handler
<td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
+ <tr><th id=ix-handler-onclose> <code title="">onclose</code>
+ <td> <a href=#handler-onclose title=handler-onclose>HTML elements</a>
+ <td> <code title=event-close>close</code> event handler
+ <td> <a href=#event-handler-content-attributes title="event handler content attributes">Event handler content attribute</a>
+
<tr><th id=ix-handler-oncontextmenu> <code title="">oncontextmenu</code>
<td> <a href=#handler-oncontextmenu title=handler-oncontextmenu>HTML elements</a>
<td> <code title=event-contextmenu>contextmenu</code> event handler
@@ -99622,6 +100291,9 @@
<tr><td> <code><a href=#the-dfn-element>dfn</a></code>
<td> <code><a href=#htmlelement>HTMLElement</a></code>
+ <tr><td> <code><a href=#the-dialog-element>dialog</a></code>
+ <td> <code><a href=#htmldialogelement>HTMLDialogElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+
<tr><td> <code><a href=#the-div-element>div</a></code>
<td> <code><a href=#htmldivelement>HTMLDivElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
@@ -100011,6 +100683,10 @@
<dd><cite><a href=http://dev.w3.org/csswg/css3-ui/>CSS3 Basic User
Interface Module</a></cite>, T. Çelik. W3C.</dd>
+ <dt id=refsCSSVALUES>[CSSVALUES]</dt>
+ <dd><cite><a href=http://dev.w3.org/csswg/css3-values/>CSS3
+ Values and Units</a></cite>, H. Lie, C. Lilley. W3C.</dd>
+
<dt id=refsDASH>[DASH]</dt>
<dd><cite><a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=57623">Dynamic adaptive streaming over HTTP (DASH)</a></cite>. ISO.</dd>
@@ -100065,6 +100741,9 @@
<dd><cite><a href=http://dev.w3.org/2009/dap/file-system/file-dir-sys.html>File
API: Directories and System</a></cite>, E. Uhrhane. W3C.</dd>
+ <dt id=refsFULLSCREEN>[FULLSCREEN]</dt>
+ <dd><cite><a href=http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html>Fullscreen</a></cite>, A. van Kesteren, T. Çelik.</dd>
+
<dt id=refsGBK>[GBK]</dt>
<dd><cite>Chinese Internal Code Specification</cite>. Chinese IT
Standardization Technical Committee.</dd>
Modified: source
===================================================================
--- source 2012-04-09 16:23:43 UTC (rev 7049)
+++ source 2012-04-11 00:42:25 UTC (rev 7050)
@@ -1,14 +1,14 @@
<!-- EDITOR NOTES
!
! Adding a new element involves editing the following sections:
- ! - description of the element's categories
+ ! - section for the element itself
+ ! - descriptions of the element's categories
! - images/content-venn.svg
! - syntax, if it's void or otherwise special
- ! - parser
+ ! - parser, if it's not phrasing-level
! - rendering
! - obsolete section
! - element, attribute, content model, and interface indexes
- ! - section for the element itself
! - adding it to the section with ARIA mappings
!
!-->
@@ -220,14 +220,6 @@
working group chair decision from June 2011</a>.</li><!--bug
12906-->
- <li>The W3C HTML specification defines a <code
- title="attr-time-pubdate">pubdate</code> attribute on
- <code>time</code> elements, because of <a
- href="http://lists.w3.org/Archives/Public/public-html/2011Dec/0058.html">a
- working group chair request from December 2011</a>. This issue is
- not yet formally resolved in the W3C and the specifications will
- likely converge on this issue when it is.</li><!--PUBDATE--><!--FORK-->
-
<li>The W3C HTML specification contradicts the ARIA specification
because of a <a
href="http://lists.w3.org/Archives/Public/public-html/2012Feb/0066.html">working
@@ -249,6 +241,8 @@
<ul>
<li>New hyperlink features: the <code title="attr-hyperlink-download">download</code> attribute to make download links and the <code title="attr-hyperlink-ping">ping</code> attribute for <span>hyperlink auditing</span>.</li> <!--DOWNLOAD--><!--PING-->
+ <li>The <code title="attr-inert">inert</code> global attribute to disable subtrees.</li><!--INERT-->
+ <li>The <code title="attr-fs-method-dialog-keyword">dialog</code> keyword on the <code>form</code> element's <code title="attr-fs-method">method</code> attribute, for a simpler way to close dialogs.</li><!--FORM-DIALOG-->
<li>The <code title="dom-document-cssElementMap">cssElementMap</code> feature for defining <span title="CSS element reference identifier">CSS element reference identifiers</span>.</li> <!--CSSREF-->
<li>An experimental specification of the legacy <code title="dom-find">window.find()</code> API.</li><!--FIND-->
<li>Some predefined <a href="#mdvocabs">Microdata vocabularies</a>.</li>
@@ -3133,6 +3127,11 @@
<li><dfn>Scroll an element into view</dfn></li>
</ul>
+ <p>Parts of the Fullscreen specification, in particular the
+ <dfn>top layer</dfn> concept, are used to define the rendering of
+ the <code>dialog</code> element. <a
+ href="#refsFULLSCREEN">[FULLSCREEN]</a>
+
</dd>
<!--END dev-html--><!--END w3c-html-->
@@ -10100,10 +10099,12 @@
// <span>event handler IDL attributes</span>
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-onabort">onabort</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-onblur">onblur</span>;
+ [TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncancel">oncancel</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncanplay">oncanplay</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncanplaythrough">oncanplaythrough</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-onchange">onchange</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-onclick">onclick</span>;
+ [TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-onclose">onclose</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncontextmenu">oncontextmenu</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncuechange">oncuechange</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-ondblclick">ondblclick</span>;
@@ -11296,10 +11297,12 @@
// <span>event handler IDL attributes</span>
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-onabort">onabort</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-onblur">onblur</span>;
+ [TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncancel">oncancel</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncanplay">oncanplay</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncanplaythrough">oncanplaythrough</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-onchange">onchange</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-onclick">onclick</span>;
+ [TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-onclose">onclose</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncontextmenu">oncontextmenu</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncuechange">oncuechange</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-ondblclick">ondblclick</span>;
@@ -11382,6 +11385,9 @@
<li><code title="attr-dropzone">dropzone</code></li>
<li><code title="attr-hidden">hidden</code></li>
<li><code title="attr-id">id</code></li>
+<!--END w3c-html--><!--INERT-->
+ <li><code title="attr-inert">inert</code></li>
+<!--START w3c-html--><!--INERT-->
<!--END w3c-html--><!--MD--><!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION -->
<li><code title="attr-itemid">itemid</code></li>
<li><code title="attr-itemprop">itemprop</code></li>
@@ -11437,10 +11443,12 @@
<ul class="brief">
<li><code title="handler-onabort">onabort</code></li>
<li><code title="handler-onblur">onblur</code>*</li>
+ <li><code title="handler-oncancel">oncancel</code></li>
<li><code title="handler-oncanplay">oncanplay</code></li>
<li><code title="handler-oncanplaythrough">oncanplaythrough</code></li>
<li><code title="handler-onchange">onchange</code></li>
<li><code title="handler-onclick">onclick</code></li>
+ <li><code title="handler-onclose">onclose</code></li>
<li><code title="handler-oncontextmenu">oncontextmenu</code></li>
<li><code title="handler-oncuechange">oncuechange</code></li>
<li><code title="handler-ondblclick">ondblclick</code></li>
@@ -12727,6 +12735,7 @@
<li><code>del</code></li>
<li><code>details</code></li>
<li><code>dfn</code></li>
+ <li><code>dialog</code></li>
<li><code>div</code></li>
<li><code>dl</code></li>
<li><code>em</code></li>
@@ -13738,6 +13747,10 @@
<td><code title="attr-aria-expanded">aria-expanded</code> state set to "true" if the element's <code title="attr-details-open">open</code> attribute is present, and set to "false" otherwise
<tr>
+ <td><code>dialog</code> element without an <code title="attr-dialog-open">open</code> attribute
+ <td>The <code title="title-aria-hidden">aria-hidden</code> state set to "true"
+
+ <tr>
<td><code>head</code> element
<td><span title="concept-role-none">No role</span>
@@ -13962,6 +13975,10 @@
<td>The <code title="title-aria-disabled">aria-disabled</code> state set to "true"
<tr>
+ <td>Element that is <span>inert</span>
+ <td>The <code title="title-aria-disabled">aria-disabled</code> state set to "true"
+
+ <tr>
<td>Element with a <code title="attr-hidden">hidden</code> attribute
<td>The <code title="title-aria-hidden">aria-hidden</code> state set to "true"
@@ -14029,6 +14046,23 @@
<td>Role must be a role that supports <code title="attr-aria-expanded">aria-expanded</code>
<tr>
+ <td><code>dialog</code> element
+ <td><code title="attr-aria-role-dialog">dialog</code> role
+ <td>Role must be either
+ <code title="attr-aria-role-alert">alert</code>,
+ <code title="attr-aria-role-alertdialog">alertdialog</code>,
+ <code title="attr-aria-role-application">application</code>,
+ <code title="attr-aria-role-contentinfo">contentinfo</code>,
+ <code title="attr-aria-role-dialog">dialog</code>,
+ <code title="attr-aria-role-document">document</code>,
+ <code title="attr-aria-role-log">log</code>,
+ <code title="attr-aria-role-main">main</code>,
+ <code title="attr-aria-role-marquee">marquee</code>,
+ <code title="attr-aria-role-region">region</code>,
+ <code title="attr-aria-role-search">search</code>, or
+ <code title="attr-aria-role-status">status</code>
+
+ <tr>
<td><code>embed</code> element
<td><span title="concept-role-none">No role</span>
<td>If specified, role must be either <code title="attr-aria-role-application">application</code>, <code title="attr-aria-role-document">document</code>, or <code title="attr-aria-role-img">img</code>
@@ -20023,6 +20057,7 @@
<li><code>blockquote</code></li>
<li><code>body</code></li>
<li><code>details</code></li>
+ <li><code>dialog</code></li>
<li><code>fieldset</code></li>
<li><code>figure</code></li>
<li><code>td</code></li>
@@ -40370,7 +40405,7 @@
<dl class="domintro">
- <dt><var title="">url</var> = <var title="">canvas</var> . <code title="dom-canvas-toDataURL">toDataURL</code>( [ <var title="">type</var>, ... ])</dt>
+ <dt><var title="">url</var> = <var title="">canvas</var> . <code title="dom-canvas-toDataURL">toDataURL</code>( [ <var title="">type</var>, ... ] )</dt>
<dd>
@@ -40976,7 +41011,7 @@
<dl class="domintro">
- <dt><var title="">styles</var> = new <code title="dom-DrawingStyle">DrawingStyle</code>([ <var title="">element</var> ])</dt>
+ <dt><var title="">styles</var> = new <code title="dom-DrawingStyle">DrawingStyle</code>( [ <var title="">element</var> ] )</dt>
<dd>
@@ -62034,6 +62069,16 @@
to the state <dfn title="attr-fs-method-POST">POST</dfn>, indicating
the HTTP POST method.</li>
+<!--END w3c-html--><!--FORM-DIALOG-->
+ <li>The keyword <dfn
+ title="attr-fs-method-dialog-keyword"><code>dialog</code></dfn>,
+ mapping to the state <dfn
+ title="attr-fs-method-dialog">dialog</dfn>, indicating that
+ submitting the <code>form</code> is intended to close the
+ <code>dialog</code> box in which the form finds itself, if any, and
+ otherwise not submit.</li>
+<!--START w3c-html--><!--FORM-DIALOG-->
+
</ul>
<p>The <i>missing value default</i> for these attributes is the
@@ -63145,13 +63190,19 @@
<li>
- <p>Select the appropriate row in the table below based on the
- value of <var title="">scheme</var> as given by the first cell of
- each row. Then, select the appropriate cell on that row based on
- the value of <var title="">method</var> as given in the first cell
- of each column. Then, jump to the steps named in that cell and
- defined below the table.</p>
+<!--END w3c-html--><!--FORM-DIALOG-->
+ <p>If the value of <var title="">method</var> is <span
+ title="attr-fs-method-dialog">dialog</span> then jump to the <span
+ title="submit-dialog">submit dialog</span> steps.</p>
+<!--START w3c-html--><!--FORM-DIALOG-->
+ <p>Otherwise, select the appropriate row in the table below based
+ on the value of <var title="">scheme</var> as given by the first
+ cell of each row. Then, select the appropriate cell on that row
+ based on the value of <var title="">method</var> as given in the
+ first cell of each column. Then, jump to the steps named in that
+ cell and defined below the table.</p>
+
<table>
<thead>
<tr>
@@ -63388,6 +63439,46 @@
</dd>
+
+<!--END w3c-html--><!--FORM-DIALOG-->
+ <dt><dfn title="submit-dialog">Submit dialog</dfn>
+ <dd>
+
+ <p>Let <var title="">dialog</var> be the nearest ancestor
+ <code>dialog</code> element of <var title="">form</var>, if
+ any.</p>
+
+ <p>If there isn't one, do nothing. Otherwise, proceed as
+ follows:</p>
+
+ <p>If <var title="">submitter</var> is an <code>input</code>
+ element whose <code title="attr-input-type">type</code>
+ attribute is in the <span title="attr-input-type-image">Image
+ Button</span> state, then let <var title="">result</var> be the
+ string formed by concatenating the <span
+ title="concept-input-type-image-coordinate">selected
+ coordinate</span>'s <var title="">x</var>-component, expressed
+ as a base-ten number using the characters U+0030 DIGIT ZERO (0)
+ to U+0039 DIGIT NINE (9) to represent the digits 0 to 9, a
+ U+002C COMMA character (,), and the <span
+ title="concept-input-type-image-coordinate">selected
+ coordinate</span>'s <var title="">y</var>-component, expressed
+ in the same way as the <var title="">x</var>-component.</p>
+
+ <p>Otherwise, if <var title="">submitter</var> has a <span
+ title="concept-fe-value">value</span>, then let <var
+ title="">result</var> be that <span
+ title="concept-fe-value">value</span>.</p>
+
+ <p>Otherwise, there is no <var title="">result</var>.</p>
+
+ <p>Then, <span>close the dialog</span> <var
+ title="">dialog</var>. If there is a <var title="">result</var>,
+ let that be the return value.</p>
+
+ </dd>
+<!--START w3c-html--><!--FORM-DIALOG-->
+
</dl>
<p>The <dfn>appropriate form encoding algorithm</dfn> is
@@ -65130,10 +65221,10 @@
<h4 id="commands">Commands</h4>
<p>A <dfn title="concept-command">command</dfn> is the abstraction
- behind menu items, buttons, and links. Once a command
- is defined, other parts of the interface can refer to the same
- command, allowing many access points to a single feature to share
- facets such as the <span title="command-facet-DisabledState">Disabled State</span>.</p>
+ behind menu items, buttons, and links. Once a command is defined,
+ other parts of the interface can refer to the same command, allowing
+ many access points to a single feature to share facets such as the
+ <span title="command-facet-DisabledState">Disabled State</span>.</p>
<p id="facets">Commands are defined to have the following
<dfn title="concept-facet">facets</dfn>:</p>
@@ -65456,8 +65547,8 @@
otherwise.</p>
<p>The <span title="command-facet-DisabledState">Disabled
- State</span> facet of the command is always false. (The command is
- always enabled.)</p>
+ State</span> facet of the command is true if the element or one of
+ its ancestors is <span>inert</span>, and false otherwise.</p>
<p>The <span title="command-facet-CheckedState">Checked State</span>
of the command is always false. (The command is never checked.)</p>
@@ -65485,8 +65576,10 @@
elements</span> (see the previous section).</p>
<p>The <span title="command-facet-DisabledState">Disabled
- State</span> of the command mirrors the <span
- title="concept-fe-disabled">disabled</span> state of the button.</p>
+ State</span> of the command is true if the element or one of its
+ ancestors is <span>inert</span>, or if the element's <span
+ title="concept-fe-disabled">disabled</span> state is set, and false
+ otherwise.</p>
<h5><dfn title="input-command">Using the <code>input</code> element to define a command</dfn></h5>
@@ -65563,9 +65656,10 @@
otherwise.</p>
<p>The <span title="command-facet-DisabledState">Disabled
- State</span> of the command mirrors the <span
- title="concept-fe-disabled">disabled</span> state of the
- control.</p>
+ State</span> of the command is true if the element or one of its
+ ancestors is <span>inert</span>, or if the element's <span
+ title="concept-fe-disabled">disabled</span> state is set, and false
+ otherwise.</p>
<p>The <span title="command-facet-CheckedState">Checked State</span>
of the command is true if the command is of <span
@@ -65629,11 +65723,11 @@
otherwise.</p>
<p>The <span title="command-facet-DisabledState">Disabled
- State</span> of the command is true (disabled) if the element is
- <span title="concept-option-disabled">disabled</span> or if its
- nearest ancestor <code>select</code> element is <span
- title="concept-fe-disabled">disabled</span>, and false
- otherwise.</p>
+ State</span> of the command is true if the element is <span
+ title="concept-option-disabled">disabled</span>, or if its nearest
+ ancestor <code>select</code> element is <span
+ title="concept-fe-disabled">disabled</span>, or if it or one of its
+ ancestors is <span>inert</span>, and false otherwise.</p>
<p>The <span title="command-facet-CheckedState">Checked State</span>
of the command is true (checked) if the element's <span
@@ -65698,9 +65792,10 @@
otherwise.</p>
<p>The <span title="command-facet-DisabledState">Disabled
- State</span> of the command is true (disabled) if the element has a
- <code title="attr-command-disabled">disabled</code> attribute, and
- false otherwise.</p>
+ State</span> of the command is true if the element or one of its
+ ancestors is <span>inert</span>, or if the element has a <code
+ title="attr-command-disabled">disabled</code> attribute, and false
+ otherwise.</p>
<p>The <span title="command-facet-CheckedState">Checked State</span>
of the command is true (checked) if the element has a <code
@@ -65906,8 +66001,8 @@
otherwise.</p>
<p>The <span title="command-facet-DisabledState">Disabled
- State</span> facet of the command is always false. (The command is
- always enabled.)</p>
+ State</span> of the command is true if the element or one of its
+ ancestors is <span>inert</span>, and false otherwise.</p>
<p>The <span title="command-facet-CheckedState">Checked State</span>
of the command is always false. (The command is never checked.)</p>
@@ -65933,8 +66028,566 @@
</div>
+ <h4>The <dfn><code>dialog</code></dfn> element</h4>
+ <dl class="element">
+ <dt><span title="element-dfn-categories">Categories</span>:</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dd><span>Sectioning root</span>.</dd>
+ <dt><span title="element-dfn-contexts">Contexts in which this element can be used</span>:</dt>
+ <dd>Where <span>flow content</span> is expected.</dd>
+ <dd>As a child of a <code>dt</code> element.</dd>
+ <dd>As a child of a <code>th</code> element.</dd>
+ <dt><span title="element-dfn-content-model">Content model</span>:</dt>
+ <dd><span>Flow content</span>.</dd>
+ <dt><span title="element-dfn-attributes">Content attributes</span>:</dt>
+ <dd><span>Global attributes</span></dd>
+ <dd><code title="attr-dialog-open">open</code></dd>
+ <dt><span title="element-dfn-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
+ <dd>
+<pre class="idl">interface <dfn>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
+ attribute boolean <span title="dom-dialog-open">open</span>;
+ attribute DOMString <span title="dom-dialog-returnValue">returnValue</span>;
+ void show(optional (<span>MouseEvent</span> or <span>Element</span>) anchor);
+ void showModal(optional (<span>MouseEvent</span> or <span>Element</span>) anchor);
+ void close(optional DOMString returnValue);
+};</pre>
+ </dd>
+ </dl><!--TOPIC:HTML-->
+ <p>The <code>dialog</code> element represents a part of an
+ application that a user interacts with to perform a task, for
+ example a dialog box, inspector, or window.</p>
+
+ <p>The <dfn title="attr-dialog-open"><code>open</code></dfn>
+ attribute is a <span>boolean attribute</span>. When specified, it
+ indicates that the <code>dialog</code> element is active and that
+ the user can interact with it.</p>
+
+ <div class="impl">
+
+ <p>A <code>dialog</code> element without an <code
+ title="attr-dialog-open">open</code> attribute specified should not
+ be shown to the user. This requirement may be implemented indirectly
+ through the style layer. For example, user agents that <a
+ href="#renderingUA">support the suggested default rendering</a>
+ implement this requirement using the CSS rules described in the <a
+ href="#rendering">rendering section</a>.</p>
+
+ </div>
+
+<!--TOPIC:DOM APIs-->
+
+ <dl class="domintro">
+
+ <dt><var title="">dialog</var> . <code title="dom-dialog-show">show</code>( [ <var title="">anchor</var> ] )</dt>
+
+ <dd>
+
+ <p>Displays the <code>dialog</code> element.</p>
+
+ <p>The argument, if provided, provides an anchor point to which
+ the element will be fixed.</p>
+
+ </dd>
+
+ <dt><var title="">dialog</var> . <code title="dom-dialog-showModal">showModal</code>( [ <var title="">anchor</var> ] )</dt>
+
+ <dd>
+
+ <p>Displays the <code>dialog</code> element and makes it the top-most modal dialog.</p>
+
+ <p>The argument, if provided, provides an anchor point to which
+ the element will be fixed.</p>
+
+ </dd>
+
+ <dt><var title="">dialog</var> . <code title="dom-dialog-close">close</code>( [ <var title="">result</var> ] )</dt>
+
+ <dd>
+
+ <p>Closes the <code>dialog</code> element.</p>
+
+ <p>The argument, if provided, provides a return value.</p>
+
+ </dd>
+
+ <dt><var title="">dialog</var> . <code title="dom-dialog-returnValue">returnValue</code> [ = <var title="">result</var> ]</dt>
+
+ <dd>
+
+ <p>Returns the <code>dialog</code>'s return value.</p>
+
+ <p>Can be set, to update the return value.</p>
+
+ </dd>
+
+ </dl>
+
+ <div class="impl">
+
+ <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>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.</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>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>
+
+ <ol>
+
+ <li><p>Let <var title="">dialog</var> be the <code>dialog</code>
+ element on which the method was invoked.</p></li>
+
+ <li><p>If <var title="">dialog</var> already has an <code
+ title="attr-dialog-open">open</code> attribute, then throw an
+ <span>InvalidStateError</span> exception and abort these
+ steps.</p></li>
+
+ <li><p>If <var title="">dialog</var> is not <span>in a
+ <code>Document</code></span>, then throw an
+ <span>InvalidStateError</span> exception and abort these
+ steps.</p></li>
+
+ <li><p>Add an <code title="attr-dialog-open">open</code> attribute
+ to <var title="">dialog</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="">dialog</var>, using that argument
+ as the anchor.</p></li>
+
+ <li><p>Let <var title="">dialog</var>'s <code>Document</code> be
+ <span title="blocked by a modal dialog">blocked by the modal
+ dialog</span> <var title="">dialog</var>.</p></li>
+
+ <li><p>Push <var title="">dialog</var> onto <var
+ title="">dialog</var>'s <code>Document</code>'s <span>pending
+ dialog stack</span>.</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>
+
+ <ol>
+
+ <li><p>Let <var title="">dialog</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="">dialog</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
+ 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>
+
+<!--TOPIC:HTML-->
+
+ <p>When a <code>dialog</code> element <var title="">dialog</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="">dialog</var> does not have an <code
+ title="attr-dialog-open">open</code> attribute, then throw an
+ <span>InvalidStateError</span> exception and abort these
+ steps.</p></li>
+
+ <li><p>Remove <var title="">dialog</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 <var title="">dialog</var> is in its <code>Document</code>'s
+ <span>pending dialog stack</span>, then run these substeps:</p>
+
+ <ol>
+
+ <li><p>Remove <var title="">dialog</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="">dialog</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 <code title="event-close">close</code> at <var
+ title="">dialog</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 laast 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 <code
+ title="event-cancel">cancel</code> 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>
+
+ <hr>
+
+ <p>When a user agent is to <dfn>set up the position</dfn> of an
+ element <var title="">dialog</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>
+
+ <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="">dialog</var>, then 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>
+
+ </ol>
+
+ <p>Otherwise, let <var title="">anchor element</var> be <var
+ title="">anchor</var>.</p>
+
+ </li>
+
+ <li><p>Let <var title="">dialog</var> be <span>magically
+ aligned</span> to <var title="">anchor element</var>.</p></li>
+
+ </ol>
+
+ <p>While an element <var title="">A</var> is <dfn>magically
+ aligned</dfn> to an element <var title="">B</var>, <var
+ title="">A</var> and <var title="">B</var> both have rendered boxes,
+ and <var title="">B</var> is not a descendant of <var
+ title="">A</var>, the following requirements apply:</p>
+
+ <ul>
+
+ <li><p><var title="">A</var>'s 'position' property must compute to
+ the keyword '<dfn
+ title="css-position-absolute-anchored">absolute-anchored</dfn>'.</p></li>
+
+ <li>
+
+ <p>Let <var title="">A</var> and <var title="">B</var>'s anchor
+ points be 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>
+
+ <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.
+
+
+ <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>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>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
+ 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>
+
+
+ <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>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>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
+ 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>
+
+
+ <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.
+
+ </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>
+
+ </li>
+
+ </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>When an element's 'position' property must compute to
+ 'absolute-anchored', the 'float', property does not apply and must
+ compute to 'none', the 'display' property must compute to a value as
+ described by the table in <a
+ href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo">the
+ section of CSS 2.1 describing the <cite>relationships between
+ 'display', 'position', and 'float'</cite></a>, and the element's box
+ must be positioned using the rules for absolute positioning but with
+ its static position set such that if the box is positioned in its
+ static position, its anchor point is exactly aligned over the anchor
+ point of the element to which it is <span>magically
+ aligned</span>.</p>
+
+ <p class="note">The 'absolute-anchored' keyword is not a keyword
+ that can be specified in CSS; the 'position' property can only
+ compute to this value if the <code>dialog</code> element is
+ positioned via the APIs described above.</p>
+
+<!--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>
+<!--TOPIC:HTML-->
+
+ </div>
+
+
+ <h5>Anchor points</h5>
+
+ <p class="critical">This section will eventually be moved to a CSS
+ specification; it is specified here only on an interim basis until
+ an editor can be found to own this.</p>
+
+ <table class="css-property">
+ <caption>'anchor-point'</caption>
+ <tr>
+ <th>Value:
+ <td> none | <position>
+ <tr>
+ <th>Initial:
+ <td> none
+ <tr>
+ <th>Applies to:
+ <td> all elements
+ <tr>
+ <th>Inherited:
+ <td> no
+ <tr>
+ <th>Percentages:
+ <td> refer to width or height of box; see prose
+ <tr>
+ <th>Media:
+ <td> visual
+ <tr>
+ <th>Computed value:
+ <td> The specified value, but with any lengths replaced by their corresponding absolute length
+ <tr>
+ <th>Animatable:
+ <td> no
+ <tr>
+ <th>Canonical order:
+ <td> per grammar
+ </table>
+
+ <p>The '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 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>
+
+
<h3 id="links">Links</h3>
<h4>Introduction</h4>
@@ -74614,10 +75267,12 @@
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-window-onbeforeprint">onbeforeprint</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-window-onbeforeunload">onbeforeunload</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-window-onblur">onblur</span>;
+ [TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncancel">oncancel</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncanplay">oncanplay</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncanplaythrough">oncanplaythrough</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-onchange">onchange</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-onclick">onclick</span>;
+ [TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-onclose">onclose</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncontextmenu">oncontextmenu</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-oncuechange">oncuechange</span>;
[TreatNonCallableAsNull] attribute <span>Function</span>? <span title="handler-ondblclick">ondblclick</span>;
@@ -82815,10 +83470,12 @@
<tr><th><span title="event handlers">Event handler</span> <th><span>Event handler event type</span>
<tbody>
<tr><td><dfn title="handler-onabort"><code>onabort</code></dfn> <td> <code title="event-abort">abort</code>
+ <tr><td><dfn title="handler-oncancel"><code>oncancel</code></dfn> <td> <code title="event-media-cancel">cancel</code>
<tr><td><dfn title="handler-oncanplay"><code>oncanplay</code></dfn> <td> <code title="event-media-canplay">canplay</code>
<tr><td><dfn title="handler-oncanplaythrough"><code>oncanplaythrough</code></dfn> <td> <code title="event-media-canplaythrough">canplaythrough</code>
<tr><td><dfn title="handler-onchange"><code>onchange</code></dfn> <td> <code title="event-change">change</code> <!-- widely used -->
<tr><td><dfn title="handler-onclick"><code>onclick</code></dfn> <td> <code title="event-click">click</code> <!-- widely used -->
+ <tr><td><dfn title="handler-onclose"><code>onclose</code></dfn> <td> <code title="event-close">close</code> <!-- new for <dialog> -->
<tr><td><dfn title="handler-oncontextmenu"><code>oncontextmenu</code></dfn> <td> <code title="event-contextmenu">contextmenu</code> <!-- widely used -->
<tr><td><dfn title="handler-oncuechange"><code>oncuechange</code></dfn> <td> <code title="event-cuechange">cuechange</code>
<tr><td><dfn title="handler-ondblclick"><code>ondblclick</code></dfn> <td> <code title="event-dblclick">dblclick</code> <!-- widely used -->
@@ -85381,6 +86038,82 @@
+ <h3>Inert subtrees</h3>
+
+ <p>A subtree of a <code>Document</code> can be marked as
+ <dfn>inert</dfn>. When a node or one of its ancestors is
+ <span>inert</span>, then the user agent must act as if the element
+ was absent for the purposes of targetting user interaction events,
+ may ignore the node for the purposes of text search user interfaces
+ (commonly known as "find in page"), and may prevent the user from
+ selecting text in that node. User agents should allow the user to
+ override the restrictions on search and text selection, however.</p>
+
+ <p class="example">For example, consider a page that consists of
+ just a single <span>inert</span> paragraph positioned in the middle
+ of a <code>body</code>. If a user moves their pointing device from
+ the <code>body</code> over to the <span>inert</span> paragraph and
+ clicks on the paragraph, no <code
+ title="event-mouseover">mouseover</code> event would be fired, and
+ the <code title="event-mousemove">mousemove</code> and <code
+ title="event-click">click</code> events would be fired on the
+ <code>body</code> element rather than the paragraph.</p>
+
+ <p class="note">When a node or one of its ancestors is inert, it
+ also can't be focused (see the <span>focusing steps</span>), and it
+ is disabled if it is a <span
+ title="concept-command">command</span>.</p>
+
+ <p>An entire <code>Document</code> can be marked as <dfn>blocked by
+ a modal dialog</dfn> <var title="">dialog</var>. While a
+ <code>Document</code> is so marked, every node that is <span
+ title="in a Document">in the <code>Document</code></span>, with the
+ exception of the <var title="">dialog</var> element, its ancestors,
+ and its descendants, must be marked <span>inert</span>. (The
+ elements excepted by this paragraph can additionally be marked
+ <span>inert</span> through other means; being part of a modal dialog
+ does not "protect" a node from being marked <span>inert</span>.)</p>
+
+ <p>Only one element at a time can mark a <code>Document</code> as
+ being <span>blocked by a modal dialog</span>. When a new
+ <code>dialog</code> is made to <span title="blocked by a modal
+ dialog">block</span> a <code>Document</code>, the previous element,
+ if any, stops blocking the <code>Document</code>.</p>
+
+ <p class="note">The <code>dialog</code> element's <code
+ title="dom-dialog-showModal">showModal()</code> method makes use of
+ this mechanism.</p>
+
+
+<!--END w3c-html--><!--INERT-->
+ <h4>The <dfn title="attr-inert"><code>inert</code></dfn> attribute</h4>
+
+ <p>The <code title="attr-inert">inert</code> attribute is a
+ <span>boolean attribute</span> that indicates, by its presence, that
+ the element is to be made <span>inert</span>.</p>
+
+ <div class="impl">
+
+ <p>When an element has an <code title="attr-inert">inert</code>
+ attribute, the user agent must mark that element as
+ <span>inert</span>.</p>
+
+ </div>
+
+ <p class="note">By default, there is no visual indication of a
+ subtree being inert. Authors are encouraged to clearly mark what
+ parts of their document are active and which are inert, to avoid
+ user confusion. In particular, it is worth remembering that not all
+ users can see all parts of a page at once; for example, users of
+ screen readers, users on small devices or with magnifiers, and even
+ users just using particularly small windows might not be able to see
+ the active part of a page and may get frustrated if inert sections
+ are not obviously inert. For individual controls, the <code
+ title="attr-input-disabled">disabled</code> attribute is probably
+ more appropriate.</p>
+<!--START w3c-html--><!--INERT-->
+
+
<!--TOPIC:DOM APIs-->
<h3>Activation</h3>
@@ -85684,7 +86417,8 @@
<code>Document</code> has no <span>browsing context</span>, or if
the element's <code>Document</code>'s <span>browsing context</span>
has no <span>top-level browsing context</span>, or if the element
- is not <span>focusable</span>, then abort these steps.</p>
+ is not <span>focusable</span>, or if the element or one of its
+ ancestors is <span>inert</span>, then abort these steps.</p>
<li><p>If focusing the element will remove the focus from another
element, then run the <span>unfocusing steps</span> for that
@@ -102023,9 +102757,9 @@
<!-- the normal ones -->
<dt>A start tag whose tag name is one of: "address", "article",
- "aside", "blockquote", "center", "details", "dir", "div", "dl",
- "fieldset", "figcaption", "figure", "footer", "header", "hgroup",
- "menu", "nav", "ol", "p", "section", "summary", "ul"</dt>
+ "aside", "blockquote", "center", "details", "dialog", "dir", "div",
+ "dl", "fieldset", "figcaption", "figure", "footer", "header",
+ "hgroup", "menu", "nav", "ol", "p", "section", "summary", "ul"</dt>
<dd>
<!-- As of May 2008 this doesn't match any browser exactly, but is
@@ -102252,10 +102986,10 @@
<!-- the normal ones -->
<dt>An end tag whose tag name is one of: "address", "article",
- "aside", "blockquote", "button", "center", "details", "dir", "div",
- "dl", "fieldset", "figcaption", "figure", "footer", "header",
- "hgroup", "listing", "menu", "nav", "ol", "pre", "section",
- "summary", "ul"</dt>
+ "aside", "blockquote", "button", "center", "details", "dialog",
+ "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer",
+ "header", "hgroup", "listing", "menu", "nav", "ol", "pre",
+ "section", "summary", "ul"</dt>
<dd>
<p>If the <span>stack of open elements</span> does not <span
@@ -106670,8 +107404,20 @@
address { font-style: italic; }
listing, plaintext, pre, xmp {
font-family: monospace; white-space: pre;
-}</pre>
+}
+dialog:not([open]) { display: none; }
+dialog {
+ position: absolute;
+ left: 0; right: 0;
+ margin: auto;
+ border: solid;
+ padding: 1em;
+ background: white;
+ color: black;
+}
+dialog::backdrop { background: rgba(0,0,0,0.1); }</pre>
+
<p>The following rules are also expected to apply, as
<span>presentational hints</span>:</p>
@@ -113526,6 +114272,20 @@
</tr>
<tr>
+ <th><code>dialog</code></th>
+ <td>Dialog box or window</td>
+ <td><span title="Flow content">flow</span>;
+ <span title="Sectioning root">sectioning root</span></td>
+ <td><code>dt</code>;
+ <code>th</code>;
+ <span title="Flow content">flow</span></td>
+ <td><span title="Flow content">flow</span></td>
+ <td><span title="global attributes">globals</span>;
+ <code title="attr-dialog-open">open</code></td>
+ <td><code>HTMLDialogElement</code></td>
+ </tr>
+
+ <tr>
<th><code>div</code></th>
<td>Generic flow container</td>
<td><span title="Flow content">flow</span></td>
@@ -114653,6 +115413,7 @@
<code>del</code>;
<code>details</code>;
<code>dfn</code>;
+ <code>dialog</code>;
<code>div</code>;
<code>dl</code>;
<code>em</code>;
@@ -114853,6 +115614,7 @@
<code>blockquote</code>;
<code>body</code>;
<code>details</code>;
+ <code>dialog</code>;
<code>fieldset</code>;
<code>figure</code>;
<code>td</code>
@@ -115363,7 +116125,14 @@
<td> <span title="attr-id">HTML elements</span>
<td> The element's <span title="concept-id">ID</span>
<td> <a href="#attribute-text">Text</a>*
+<!--END w3c-html--><!--INERT-->
<tr>
+ <th> <code title="">inert</code>
+ <td> <span title="attr-inert">HTML elements</span>
+ <td> Whether the element is inert
+ <td> <span>Boolean attribute</span>
+<!--START w3c-html--><!--INERT-->
+ <tr>
<th> <code title="">ismap</code>
<td> <code title="attr-img-ismap">img</code>
<td> Whether the image is a server-side image map
@@ -115480,7 +116249,11 @@
<th> <code title="">method</code>
<td> <code title="attr-fs-method">form</code>
<td> HTTP method to use for <span>form submission</span>
- <td> "<code title="">GET</code>"; "<code title="">POST</code>"
+ <td> "<code title="attr-fs-method-GET-keyword">GET</code>";
+ "<code title="attr-fs-method-POST-keyword">POST</code>";
+<!--END w3c-html--><!--FORM-DIALOG-->
+ "<code title="attr-fs-method-dialog-keyword">dialog</code>"
+<!--START w3c-html--><!--FORM-DIALOG-->
<tr>
<th> <code title="">min</code>
<td> <code title="attr-input-min">input</code>
@@ -115551,6 +116324,11 @@
<td> Whether the details are visible
<td> <span>Boolean attribute</span>
<tr>
+ <th> <code title="">open</code>
+ <td> <code title="attr-dialog-open">dialog</code>
+ <td> Whether the dialog box is showing
+ <td> <span>Boolean attribute</span>
+ <tr>
<th> <code title="">optimum</code>
<td> <code title="attr-meter-optimum">meter</code>
<td> Optimum value in gauge
@@ -115933,6 +116711,12 @@
<td> <span title="event handler content attributes">Event handler content attribute</span>
<tr>
+ <th id="ix-handler-oncancel"> <code title="">oncancel</code>
+ <td> <span title="handler-oncancel">HTML elements</span>
+ <td> <code title="event-media-cancel">cancel</code> event handler
+ <td> <span title="event handler content attributes">Event handler content attribute</span>
+
+ <tr>
<th id="ix-handler-oncanplay"> <code title="">oncanplay</code>
<td> <span title="handler-oncanplay">HTML elements</span>
<td> <code title="event-media-canplay">canplay</code> event handler
@@ -115957,6 +116741,12 @@
<td> <span title="event handler content attributes">Event handler content attribute</span>
<tr>
+ <th id="ix-handler-onclose"> <code title="">onclose</code>
+ <td> <span title="handler-onclose">HTML elements</span>
+ <td> <code title="event-close">close</code> event handler
+ <td> <span title="event handler content attributes">Event handler content attribute</span>
+
+ <tr>
<th id="ix-handler-oncontextmenu"> <code title="">oncontextmenu</code>
<td> <span title="handler-oncontextmenu">HTML elements</span>
<td> <code title="event-contextmenu">contextmenu</code> event handler
@@ -116481,6 +117271,10 @@
<td> <code>HTMLElement</code>
<tr>
+ <td> <code>dialog</code>
+ <td> <code>HTMLDialogElement</code> : <code>HTMLElement</code>
+
+ <tr>
<td> <code>div</code>
<td> <code>HTMLDivElement</code> : <code>HTMLElement</code>
@@ -117214,6 +118008,9 @@
href="http://dev.w3.org/2009/dap/file-system/file-dir-sys.html">File
API: Directories and System</a></cite>, E. Uhrhane. W3C.</dd>
+ <dt id="refsFULLSCREEN">[FULLSCREEN]</dt>
+ <dd><cite><a href="http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html">Fullscreen</a></cite>, A. van Kesteren, T. Çelik.</dd>
+
<dt id="refsGBK">[GBK]</dt>
<dd><cite>Chinese Internal Code Specification</cite>. Chinese IT
Standardization Technical Committee.</dd>
More information about the Commit-Watchers
mailing list