Browse files

[giow] (0) Dialogs in web apps: <dialog>, inert='', <form method=dial…

…og>, and 'anchor-point'.

Affected topics: Canvas, DOM APIs, HTML, HTML Syntax and Parsing, Rendering

git-svn-id: http://svn.whatwg.org/webapps@7050 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 7347857 commit 2fb24fcf3f916236e8767e2cb72b23e5c75b77e9 @Hixie Hixie committed Apr 11, 2012
Showing with 2,411 additions and 256 deletions.
  1. +782 −103 complete.html
  2. +782 −103 index
  3. +847 −50 source
View
885 complete.html
@@ -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 &mdash; Last Updated 9 April 2012</h2>
+ <h2 class="no-num no-toc">Living Standard &mdash; 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 @@ <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 9 April 2012</h2>
<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 @@ <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 9 April 2012</h2>
<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=#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=#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=#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=#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=#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.5.1 </span>Making document regions editable: The <code title=attr-contenteditable>contenteditable</code> content
+ <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 @@ <h6 class=no-toc id=how-do-the-whatwg-and-w3c-specifications-differ?><span class
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 @@ <h6 class=no-toc id=how-do-the-whatwg-and-w3c-specifications-differ?><span class
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,7 +4146,11 @@ <h4 id=dependencies><span class=secno>2.2.2 </span>Dependencies</h4>
<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-->
@@ -9901,10 +9907,12 @@ <h3 id=documents><span class=secno>3.1 </span>Documents</h3>
// <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 @@ <h4 id=elements-in-the-dom><span class=secno>3.2.2 </span>Elements in the DOM</h
// <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 @@ <h4 id=global-attributes><span class=secno>3.2.3 </span><dfn>Global attributes</
<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 @@ <h4 id=global-attributes><span class=secno>3.2.3 </span><dfn>Global attributes</
<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 @@ <h6 id=flow-content-0><span class=secno>3.2.5.1.2 </span>Flow content</h6>
<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 @@ <h4 id=wai-aria><span class=secno>3.2.7 </span><dfn>WAI-ARIA</dfn></h4>
<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 @@ <h4 id=wai-aria><span class=secno>3.2.7 </span><dfn>WAI-ARIA</dfn></h4>
<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 @@ <h4 id=wai-aria><span class=secno>3.2.7 </span><dfn>WAI-ARIA</dfn></h4>
<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 @@ <h4 id=headings-and-sections><span class=secno>4.4.11 </span><dfn>Headings and s
<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 @@ <h4 id=the-canvas-element><span class=secno>4.8.11 </span>The <dfn id=canvas><co
</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 @@ <h6 id=drawingstyle-objects><span class=secno>4.8.11.1.2 </span><code><a href=#d
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 @@ <h5 id=form-submission-0><span class=secno>4.10.19.6 </span>Form submission</h5>
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,12 +54189,16 @@ <h5 id=form-submission-algorithm><span class=secno>4.10.22.3 </span>Form submiss
<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>
@@ -54340,6 +54391,40 @@ <h5 id=form-submission-algorithm><span class=secno>4.10.22.3 </span>Form submiss
</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 @@ <h5 id=toolbars><span class=secno>4.11.4.4 </span><dfn>Toolbars</dfn></h5>
<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 @@ <h5 id=using-the-a-element-to-define-a-command><span class=secno>4.11.5.1 </span
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 @@ <h5 id=using-the-button-element-to-define-a-command><span class=secno>4.11.5.2 <
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 @@ <h5 id=using-the-input-element-to-define-a-command><span class=secno>4.11.5.3 </
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 @@ <h5 id=using-the-option-element-to-define-a-command><span class=secno>4.11.5.4 <
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 @@ <h5 id=using-the-command-element-to-define-a-command><span class=secno>4.11.5.5
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 @@ <h5 id=using-the-accesskey-attribute-to-define-a-command-on-other-elements><span
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,6 +56556,464 @@ <h5 id=using-the-accesskey-attribute-to-define-a-command-on-other-elements><span
</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 | &lt;position&gt;
+ <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 &lt;position&gt;, 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>
@@ -63726,10 +64271,12 @@ <h3 id=the-window-object><span class=secno>6.2 </span>The <code><a href=#window>
[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 @@ <h5 id=event-handlers-on-elements,-document-objects,-and-window-objects><span cl
<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=the-hidden-attribute><span class=secno>8.1 </span>The <dfn title=attr-hid
+ <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 @@ <h3 id=activation><span class=secno>8.2 </span>Activation</h3>
<!--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 @@ <h3 id=focus><span class=secno>8.3 </span>Focus</h3>
</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 @@ <h4 id=sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>
<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 @@ <h4 id=focus-management><span class=secno>8.3.2 </span>Focus management</h4>
<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 @@ <h4 id=focus-management><span class=secno>8.3.2 </span>Focus management</h4>
<!--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 @@ <h4 id=document-level-focus-apis><span class=secno>8.3.3 </span>Document-level f
</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 @@ <h4 id=element-level-focus-apis><span class=secno>8.3.4 </span>Element-level foc
- <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 @@ <h4 id=introduction-7><span class=secno>8.4.1 </span>Introduction</h4>
</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 @@ <h4 id=the-accesskey-attribute><span class=secno>8.4.2 </span>The <dfn title=att
<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 @@ <h4 id=processing-model-3><span class=secno>8.4.3 </span>Processing model</h4>
- <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 @@ <h4 id=contenteditable><span class=secno>8.5.1 </span>Making document regions ed
</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 @@ <h4 id=making-entire-documents-editable:-the-designmode-idl-attribute><span clas
</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=best-practices-for-in-page-editors><span class=secno>8.5.3 </span>Best pr
- <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=editing-apis><span class=secno>8.5.4 </span>Editing APIs</h4>
- <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 @@ <h4 id=spelling-and-grammar-checking><span class=secno>8.5.5 </span>Spelling and
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 @@ <h3 id=dnd><span class=secno>8.6 </span><dfn>Drag and drop</dfn></h3>
</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=introduction-8><span class=secno>8.6.1 </span>Introduction</h4>
- <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 @@ <h4 id=the-drag-data-store><span class=secno>8.6.2 </span>The drag data store</h
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 @@ <h4 id=the-datatransfer-interface><span class=secno>8.6.3 </span>The <code><a hr
</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 @@ <h5 id=the-datatransferitemlist-interface><span class=secno>8.6.3.1 </span>The <
</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 @@ <h5 id=the-datatransferitem-interface><span class=secno>8.6.3.2 </span>The <code
- <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 @@ <h4 id=the-dragevent-interface><span class=secno>8.6.4 </span>The <code><a href=
<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 @@ <h4 id=drag-and-drop-processing-model><span class=secno>8.6.5 </span>Drag-and-dr
</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=dndevents><span class=secno>8.6.6 </span>Events summary</h4>
- <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 @@ <h4 id=the-draggable-attribute><span class=secno>8.6.7 </span>The <dfn title=att
</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 @@ <h4 id=the-dropzone-attribute><span class=secno>8.6.8 </span>The <dfn title=attr
<!--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 @@ <h4 id=security-risks-in-the-drag-and-drop-model><span class=secno>8.6.9 </span>
<!--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 @@ <h6 id=the-before-head-insertion-mode><span class=secno>12.2.5.4.3 </span>The "<
<!-- 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 @@ <h6 id=the-before-head-insertion-mode><span class=secno>12.2.5.4.3 </span>The "<
<!-- 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,7 +92701,19 @@ <h4 id=flow-content-1><span class=secno>14.3.3 </span>Flow content</h4>
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 @@ <h3 class=no-num id=elements-1>Elements</h3>
<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 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<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 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<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 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<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 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<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 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<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 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<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 @@ <h3 class=no-num id=element-content-categories>Element content categories</h3>
<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 @@ <h3 class="no-num">Reflecting IDL attributes</h3>
<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 @@ <h3 class="no-num">Reflecting IDL attributes</h3>
<dd><cite><a href=http://dev.w3.org/csswg/css3-ui/>CSS3 Basic User
Interface Module</a></cite>, T. &Ccedil;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 @@ <h3 class="no-num">Reflecting IDL attributes</h3>
<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. &Ccedil;elik.</dd>
+
<dt id=refsGBK>[GBK]</dt>
<dd><cite>Chinese Internal Code Specification</cite>. Chinese IT
Standardization Technical Committee.</dd>
View
885 index
@@ -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 &mdash; Last Updated 9 April 2012</h2>
+ <h2 class="no-num no-toc">Living Standard &mdash; 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=#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=#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=#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=#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=#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.5.1 </span>Making document regions editable: The <code title=attr-contenteditable>contenteditable</code> content
+ <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,7 +4146,11 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
<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-->
@@ -9901,10 +9907,12 @@ partial interface <dfn id=document>Document</dfn> {
// <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 @@ partial interface <dfn id=document>Document</dfn> {
// <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 @@ interface <dfn id=htmlunknownelement>HTMLUnknownElement</dfn> : <a href=#htmlele
<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 @@ interface <dfn id=htmlunknownelement>HTMLUnknownElement</dfn> : <a href=#htmlele
<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 @@ background: transparent"&gt;blue&lt;/span&gt;.&lt;/p&gt;</pre>
<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 @@ plaintext = *( %x0000-2029 / %x202F-10FFFF )
<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 @@ plaintext = *( %x0000-2029 / %x202F-10FFFF )
<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 @@ plaintext = *( %x0000-2029 / %x202F-10FFFF )
<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 @@ isn't his only passion. He also enjoys other pleasures.&lt;/p&gt;
<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 @@ dictionary <dfn id=trackeventinit>TrackEventInit</dfn> : <a href=#eventinit>Even
</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 @@ idea from Mihai:
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 @@ out of 233&thinsp;257&thinsp;824 bytes available&lt;/meter&gt;&lt;/p&gt;</pre>
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,12 +54189,16 @@ fur
<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>
@@ -54340,6 +54391,40 @@ fur
</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 @@ fur
<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 @@ fur
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 @@ fur
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 @@ fur
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 @@ fur
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 @@ fur
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 @@ fur
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,6 +56556,464 @@ fur
</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.
+