[html5] r7602 - / images
whatwg at whatwg.org
whatwg at whatwg.org
Fri Dec 28 17:23:21 PST 2012
Author: ianh
Date: 2012-12-28 17:23:20 -0800 (Fri, 28 Dec 2012)
New Revision: 7602
Modified:
complete.html
images/content-venn.svg
index
source
Log:
[acgiow] (1) Grand <menu> revamp. Note: This patch includes parser changes.
Affected topics: DOM APIs, HTML, HTML Syntax and Parsing, Rendering
Modified: complete.html
===================================================================
--- complete.html 2012-12-28 02:06:14 UTC (rev 7601)
+++ complete.html 2012-12-29 01:23:20 UTC (rev 7602)
@@ -248,7 +248,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 28 December 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 29 December 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>
@@ -771,28 +771,28 @@
<ol>
<li><a href=#the-details-element><span class=secno>4.11.1 </span>The <code>details</code> element</a></li>
<li><a href=#the-summary-element><span class=secno>4.11.2 </span>The <code>summary</code> element</a></li>
- <li><a href=#the-command-element><span class=secno>4.11.3 </span>The <code>command</code> element</a></li>
- <li><a href=#the-menu-element><span class=secno>4.11.4 </span>The <code>menu</code> element</a>
+ <li><a href=#the-menu-element><span class=secno>4.11.3 </span>The <code>menu</code> element</a></li>
+ <li><a href=#the-menuitem-element><span class=secno>4.11.4 </span>The <code>menuitem</code> element</a></li>
+ <li><a href=#context-menus><span class=secno>4.11.5 </span>Context menus</a>
<ol>
- <li><a href=#menus-intro><span class=secno>4.11.4.1 </span>Introduction</a></li>
- <li><a href=#building-menus-and-toolbars><span class=secno>4.11.4.2 </span>Building menus and toolbars</a></li>
- <li><a href=#context-menus><span class=secno>4.11.4.3 </span>Context menus</a></li>
- <li><a href=#toolbars><span class=secno>4.11.4.4 </span>Toolbars</a></ol></li>
- <li><a href=#commands><span class=secno>4.11.5 </span>Commands</a>
+ <li><a href=#declaring-a-context-menu><span class=secno>4.11.5.1 </span>Declaring a context menu</a></li>
+ <li><a href=#processing-model-2><span class=secno>4.11.5.2 </span>Processing model</a></ol></li>
+ <li><a href=#commands><span class=secno>4.11.6 </span>Commands</a>
<ol>
- <li><a href=#using-the-a-element-to-define-a-command><span class=secno>4.11.5.1 </span>Using the <code>a</code> element to define a command</a></li>
- <li><a href=#using-the-button-element-to-define-a-command><span class=secno>4.11.5.2 </span>Using the <code>button</code> element to define a command</a></li>
- <li><a href=#using-the-input-element-to-define-a-command><span class=secno>4.11.5.3 </span>Using the <code>input</code> element to define a command</a></li>
- <li><a href=#using-the-option-element-to-define-a-command><span class=secno>4.11.5.4 </span>Using the <code>option</code> element to define a command</a></li>
- <li><a href=#using-the-command-element-to-define-a-command><span class=secno>4.11.5.5 </span>Using the <code>command</code> element to define
+ <li><a href=#facets-0><span class=secno>4.11.6.1 </span>Facets</a></li>
+ <li><a href=#using-the-a-element-to-define-a-command><span class=secno>4.11.6.2 </span>Using the <code>a</code> element to define a command</a></li>
+ <li><a href=#using-the-button-element-to-define-a-command><span class=secno>4.11.6.3 </span>Using the <code>button</code> element to define a command</a></li>
+ <li><a href=#using-the-input-element-to-define-a-command><span class=secno>4.11.6.4 </span>Using the <code>input</code> element to define a command</a></li>
+ <li><a href=#using-the-option-element-to-define-a-command><span class=secno>4.11.6.5 </span>Using the <code>option</code> element to define a command</a></li>
+ <li><a href=#using-the-menuitem-element-to-define-a-command><span class=secno>4.11.6.6 </span>Using the <code>menuitem</code> element to define
a command</a></li>
- <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></li>
- <li><a href=#the-dialog-element><span class=secno>4.11.6 </span>The <code>dialog</code> element</a>
+ <li><a href=#using-the-command-attribute-on-menuitem-elements-to-define-a-command-indirectly><span class=secno>4.11.6.7 </span>Using the <code title=attr-menuitem-command>command</code> attribute on <code>menuitem</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.6.8 </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.6.9 </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.6.10 </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.7 </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=#anchor-points><span class=secno>4.11.7.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>
@@ -946,7 +946,7 @@
<ol>
<li><a href=#introduction-6><span class=secno>7.1.1 </span>Introduction</a></li>
<li><a href=#enabling-and-disabling-scripting><span class=secno>7.1.2 </span>Enabling and disabling scripting</a></li>
- <li><a href=#processing-model-2><span class=secno>7.1.3 </span>Processing model</a>
+ <li><a href=#processing-model-3><span class=secno>7.1.3 </span>Processing model</a>
<ol>
<li><a href=#definitions-0><span class=secno>7.1.3.1 </span>Definitions</a></li>
<li><a href=#calling-scripts><span class=secno>7.1.3.2 </span>Calling scripts</a></li>
@@ -958,7 +958,7 @@
<li><a href=#event-loops><span class=secno>7.1.4 </span>Event loops</a>
<ol>
<li><a href=#definitions-1><span class=secno>7.1.4.1 </span>Definitions</a></li>
- <li><a href=#processing-model-3><span class=secno>7.1.4.2 </span>Processing model</a></li>
+ <li><a href=#processing-model-4><span class=secno>7.1.4.2 </span>Processing model</a></li>
<li><a href=#generic-task-sources><span class=secno>7.1.4.3 </span>Generic task sources</a></ol></li>
<li><a href=#javascript-protocol><span class=secno>7.1.5 </span>The <code title="">javascript:</code> URL scheme</a></li>
<li><a href=#events><span class=secno>7.1.6 </span>Events</a>
@@ -1003,7 +1003,7 @@
<ol>
<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-4><span class=secno>8.5.3 </span>Processing model</a></ol></li>
+ <li><a href=#processing-model-5><span class=secno>8.5.3 </span>Processing model</a></ol></li>
<li><a href=#editing-0><span class=secno>8.6 </span>Editing</a>
<ol>
<li><a href=#contenteditable><span class=secno>8.6.1 </span>Making document regions editable: The <code title=attr-contenteditable>contenteditable</code> content
@@ -1052,7 +1052,7 @@
<li><a href=#shared-workers-and-the-sharedworkerglobalscope-interface><span class=secno>9.2.1.3 </span>Shared workers and the <code>SharedWorkerGlobalScope</code> interface</a></ol></li>
<li><a href=#the-event-loop><span class=secno>9.2.2 </span>The event loop</a></li>
<li><a href="#the-worker's-lifetime"><span class=secno>9.2.3 </span>The worker's lifetime</a></li>
- <li><a href=#processing-model-5><span class=secno>9.2.4 </span>Processing model</a></li>
+ <li><a href=#processing-model-6><span class=secno>9.2.4 </span>Processing model</a></li>
<li><a href=#runtime-script-errors-0><span class=secno>9.2.5 </span>Runtime script errors</a></li>
<li><a href=#creating-workers><span class=secno>9.2.6 </span>Creating workers</a>
<ol>
@@ -1072,7 +1072,7 @@
<ol>
<li><a href=#server-sent-events-intro><span class=secno>10.2.1 </span>Introduction</a></li>
<li><a href=#the-eventsource-interface><span class=secno>10.2.2 </span>The <code>EventSource</code> interface</a></li>
- <li><a href=#processing-model-6><span class=secno>10.2.3 </span>Processing model</a></li>
+ <li><a href=#processing-model-7><span class=secno>10.2.3 </span>Processing model</a></li>
<li><a href=#parsing-an-event-stream><span class=secno>10.2.4 </span>Parsing an event stream</a></li>
<li><a href=#event-stream-interpretation><span class=secno>10.2.5 </span>Interpreting an event stream</a></li>
<li><a href=#notes><span class=secno>10.2.6 </span>Notes</a></li>
@@ -1312,8 +1312,7 @@
<li><a href=#embedded-content-2><span class=secno>14.4.1 </span>Embedded content</a></li>
<li><a href=#images-0><span class=secno>14.4.2 </span>Images</a></li>
<li><a href=#attributes-for-embedded-content-and-images><span class=secno>14.4.3 </span>Attributes for embedded content and images</a></li>
- <li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></li>
- <li><a href=#toolbars-0><span class=secno>14.4.5 </span>Toolbars</a></ol></li>
+ <li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></ol></li>
<li><a href=#bindings><span class=secno>14.5 </span>Bindings</a>
<ol>
<li><a href=#introduction-14><span class=secno>14.5.1 </span>Introduction</a></li>
@@ -11855,7 +11854,6 @@
<!-- when updating this also update the category index -->
<ul class="brief category-list"><li><code><a href=#the-base-element>base</a></code></li>
- <li><code><a href=#the-command-element>command</a></code></li>
<li><code><a href=#the-link-element>link</a></code></li>
<li><code><a href=#the-meta-element>meta</a></code></li>
<li><code><a href=#the-noscript-element>noscript</a></code></li>
@@ -11917,7 +11915,6 @@
<li><code><a href=#the-canvas-element>canvas</a></code></li>
<li><code><a href=#the-cite-element>cite</a></code></li>
<li><code><a href=#the-code-element>code</a></code></li>
- <li><code><a href=#the-command-element>command</a></code></li>
<li><code><a href=#the-data-element>data</a></code></li>
<li><code><a href=#the-datalist-element>datalist</a></code></li>
<li><code><a href=#the-del-element>del</a></code></li>
@@ -12039,7 +12036,6 @@
<li><code><a href=#the-canvas-element>canvas</a></code></li>
<li><code><a href=#the-cite-element>cite</a></code></li>
<li><code><a href=#the-code-element>code</a></code></li>
- <li><code><a href=#the-command-element>command</a></code></li>
<li><code><a href=#the-data-element>data</a></code></li>
<li><code><a href=#the-datalist-element>datalist</a></code></li>
<li><code><a href=#the-del-element>del</a></code></li>
@@ -12181,7 +12177,6 @@
<li><code><a href=#the-input-element>input</a></code> (if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state)</li>
<li><code><a href=#the-keygen-element>keygen</a></code></li>
<li><code><a href=#the-label-element>label</a></code></li>
- <li><code><a href=#the-menu-element>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state)</li>
<li><code><a href=#the-object-element>object</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present)<!-- see also comment in <object> section --></li>
<li><code><a href=#the-select-element>select</a></code></li>
<li><code><a href=#the-textarea-element>textarea</a></code></li>
@@ -12376,7 +12371,7 @@
<li><code><a href=#the-map-element>map</a></code></li>
<li><code><a href=#the-mark-element>mark</a></code></li>
<li><code><a href=#math>math</a></code></li>
- <li><code><a href=#the-menu-element>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state or the <a href=#list-state title="list state">list</a> state)</li>
+ <li><code><a href=#the-menu-element>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state)</li>
<li><code><a href=#the-meter-element>meter</a></code></li>
<li><code><a href=#the-nav-element>nav</a></code></li>
<li><code><a href=#the-object-element>object</a></code></li>
@@ -12949,15 +12944,9 @@
<tr><td><code><a href=#the-link-element>link</a></code> element that creates a <a href=#hyperlink>hyperlink</a>
<td><code title=attr-aria-role-link>link</code> role
- <tr><td><code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#context-menu-state title="context menu state">context menu</a> state
+ <tr><td><code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state
<td><a href=#concept-role-none title=concept-role-none>No role</a>
- <tr><td><code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
- <td><code title=attr-aria-role-menu>menu</code> role
-
- <tr><td><code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state
- <td><code title=attr-aria-role-toolbar>toolbar</code> role
-
<tr><td><code><a href=#the-meta-element>meta</a></code> element
<td><a href=#concept-role-none title=concept-role-none>No role</a>
@@ -13012,15 +13001,6 @@
<tr><td><code><a href=#the-title-element>title</a></code> element
<td><a href=#concept-role-none title=concept-role-none>No role</a>
- <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "checkbox", and that is a descendant of a <code><a href=#the-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
- <td><code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "true" if the command's <a href=#command-facet-checkedstate title=command-facet-checkedstate>Checked State</a> facet is true, and "false" otherwise
-
- <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "command", and that is a descendant of a <code><a href=#the-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
- <td><code title=attr-aria-role-menuitem>menuitem</code> role
-
- <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "radio", and that is a descendant of a <code><a href=#the-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
- <td><code title=attr-aria-role-menuitemradio>menuitemradio</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "true" if the command's <a href=#command-facet-checkedstate title=command-facet-checkedstate>Checked State</a> facet is true, and "false" otherwise
-
<tr><td>Element that is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>
<td>The <code title=attr-aria-disabled>aria-disabled</code> state set to "true"
@@ -13051,7 +13031,7 @@
<tbody><tr><td><code><a href=#the-a-element>a</a></code> element that creates a <a href=#hyperlink>hyperlink</a>
<td><code title=attr-aria-role-link>link</code> role
- <td>Role must be either <code title=attr-aria-role-link>link</code>, <code title=attr-aria-role-button>button</code><!--!-->, <code title=attr-aria-role-checkbox>checkbox</code><!--!-->, <code title=attr-aria-role-menuitem>menuitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code><!--!-->, <code title=attr-aria-role-menuitemradio>menuitemradio</code><!--!-->, <code title=attr-aria-role-tab>tab</code>, or <code title=attr-aria-role-treeitem>treeitem</code><!--!-->
+ <td>Role must be either <code title=attr-aria-role-link>link</code>, <code title=attr-aria-role-menuitem>menuitem</code>, <code title=attr-aria-role-tab>tab</code>, or <code title=attr-aria-role-treeitem>treeitem</code>
<tr><td><code><a href=#the-address-element>address</a></code> element
<td><a href=#concept-role-none title=concept-role-none>No role</a>
@@ -13071,7 +13051,7 @@
<tr><td><code><a href=#the-button-element>button</a></code> element
<td><code title=attr-aria-role-button>button</code> role
- <td>Role must be either <code title=attr-aria-role-button>button</code>, <code title=attr-aria-role-link>link</code><!--!-->, <code title=attr-aria-role-menuitem>menuitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code><!--!-->, <code title=attr-aria-role-menuitemradio>menuitemradio</code><!--!-->, <code title=attr-aria-role-radio>radio</code><!--!-->
+ <td>Role must be either <code title=attr-aria-role-button>button</code>, <code title=attr-aria-role-menuitem>menuitem</code>
<tr><td><code><a href=#the-details-element>details</a></code> element
<td><code title=attr-aria-role-group>group</code> role
@@ -13143,7 +13123,7 @@
<tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#button-state-(type=button)" title=attr-input-type-button>Button</a> state
<td><code title=attr-aria-role-button>button</code> role
- <td>Role must be either <code title=attr-aria-role-button>button</code>, <code title=attr-aria-role-link>link</code><!--!-->, <code title=attr-aria-role-menuitem>menuitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code><!--!-->, <code title=attr-aria-role-menuitemradio>menuitemradio</code><!--!-->, <code title=attr-aria-role-radio>radio</code><!--!-->
+ <td>Role must be either <code title=attr-aria-role-button>button</code>, <code title=attr-aria-role-menuitem>menuitem</code>
<tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#checkbox-state-(type=checkbox)" title=attr-input-type-checkbox>Checkbox</a> state
<td><code title=attr-aria-role-checkbox>checkbox</code> role
@@ -13151,7 +13131,7 @@
<tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state
<td><code title=attr-aria-role-button>button</code> role
- <td>Role must be either <code title=attr-aria-role-button>button</code>, <code title=attr-aria-role-link>link</code><!--!-->, <code title=attr-aria-role-menuitem>menuitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code><!--!-->, <code title=attr-aria-role-menuitemradio>menuitemradio</code><!--!-->, <code title=attr-aria-role-radio>radio</code><!--!-->
+ <td>Role must be either <code title=attr-aria-role-button>button</code>, <code title=attr-aria-role-menuitem>menuitem</code>
<tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#radio-button-state-(type=radio)" title=attr-input-type-radio>Radio Button</a> state
<td><code title=attr-aria-role-radio>radio</code> role
@@ -13161,13 +13141,17 @@
<td><code title=attr-aria-role-listitem>listitem</code> role
<td>Role must be either <code title=attr-aria-role-listitem>listitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code>, <code title=attr-aria-role-menuitemradio>menuitemradio</code>, <code title=attr-aria-role-option>option</code>, <code title=attr-aria-role-tab>tab</code>, or <code title=attr-aria-role-treeitem>treeitem</code>
+ <tr><td><code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state
+ <td><code title=attr-aria-role-toolbar>toolbar</code> role
+ <td>Role must be either <code title=attr-aria-role-directory>directory</code>, <code title=attr-aria-role-list>list</code>, <code title=attr-aria-role-listbox>listbox</code>, <code title=attr-aria-role-menu>menu</code>, <code title=attr-aria-role-menubar>menubar</code>, <code title=attr-aria-role-tablist>tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, or <code title=attr-aria-role-tree>tree</code>
+
<tr><td><code><a href=#the-object-element>object</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>
<tr><td><code><a href=#the-ol-element>ol</a></code> element
<td><code title=attr-aria-role-list>list</code> role
- <td>Role must be either <code title=attr-aria-role-directory>directory</code>, <code title=attr-aria-role-list>list</code>, <code title=attr-aria-role-listbox>listbox</code>, <code title=attr-aria-role-menu>menu</code>, <code title=attr-aria-role-menubar>menubar</code>, <code title=attr-aria-role-tablist>tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, <code title=attr-aria-role-tree>tree</code>
+ <td>Role must be either <code title=attr-aria-role-directory>directory</code>, <code title=attr-aria-role-list>list</code>, <code title=attr-aria-role-listbox>listbox</code>, <code title=attr-aria-role-menu>menu</code>, <code title=attr-aria-role-menubar>menubar</code>, <code title=attr-aria-role-tablist>tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, or <code title=attr-aria-role-tree>tree</code>
<tr><td><code><a href=#the-output-element>output</a></code> element
<td><code title=attr-aria-role-status>status</code> role
@@ -19772,7 +19756,7 @@
<dt><a href=#element-dfn-contexts title=element-dfn-contexts>Contexts in which this element can be used</a>:</dt>
<dd>Inside <code><a href=#the-ol-element>ol</a></code> elements.</dd>
<dd>Inside <code><a href=#the-ul-element>ul</a></code> elements.</dd>
- <dd>Inside <code><a href=#the-menu-element>menu</a></code> elements.</dd>
+ <dd>Inside <code><a href=#the-menu-element>menu</a></code> elements whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state.</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>
@@ -19858,12 +19842,6 @@
</figure></pre>
</div>
- <p class=note>If the <code><a href=#the-li-element>li</a></code> element is the child of a
- <code><a href=#the-menu-element>menu</a></code> element and itself has a child that defines a
- <a href=#concept-command title=concept-command>command</a>, then the
- <code><a href=#the-li-element>li</a></code> element will match the <code title=selector-enabled><a href=#selector-enabled>:enabled</a></code> and <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code> pseudo-classes in the
- same way as the first such child element does.</p>
-
<p class=note>While it is conforming to include heading elements
(e.g. <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>) inside <code><a href=#the-li-element>li</a></code> elements, it likely
does not convey the semantics that the author intended. A heading
@@ -51998,6 +51976,7 @@
<dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
<dd><code title=attr-button-type><a href=#attr-button-type>type</a></code></dd>
<dd><code title=attr-button-value><a href=#attr-button-value>value</a></code></dd>
+ <dd><code title=attr-button-menu><a href=#attr-button-menu>menu</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=htmlbuttonelement>HTMLButtonElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
@@ -52012,6 +51991,7 @@
attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
attribute DOMString <a href=#dom-button-type title=dom-button-type>type</a>;
attribute DOMString <a href=#dom-button-value title=dom-button-value>value</a>;
+ attribute <a href=#htmlmenuelement>HTMLMenuElement</a>? <a href=#dom-button-menu title=dom-button-menu>menu</a>;
readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
@@ -52045,6 +52025,9 @@
<tr><td><dfn id=attr-button-type-button title=attr-button-type-button><code>button</code></dfn>
<td><a href=#attr-button-type-button-state title=attr-button-type-button-state>Button</a>
<td>Does nothing.
+ <tr><td><dfn id=attr-button-type-menu title=attr-button-type-menu><code>menu</code></dfn>
+ <td><a href=#attr-button-type-menu-state title=attr-button-type-menu-state>Menu</a>
+ <td>Shows a menu.
</table><p>The <i>missing value default</i> is the <a href=#attr-button-type-submit-state title=attr-button-type-submit-state>Submit Button</a>
state.</p>
@@ -52054,8 +52037,9 @@
<div class=impl>
- <p><strong>Constraint validation</strong>: If the <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is in the <a href=#attr-button-type-reset-state title=attr-button-type-reset-state>Reset Button</a> state or
+ <p><strong>Constraint validation</strong>: If the <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is in the <a href=#attr-button-type-reset-state title=attr-button-type-reset-state>Reset Button</a> state,
the <a href=#attr-button-type-button-state title=attr-button-type-button-state>Button</a> state,
+ or the <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>Menu</a> state,
the element is <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>
<p>When a <code><a href=#the-button-element>button</a></code> element is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, its <a href=#activation-behavior>activation
@@ -52078,6 +52062,23 @@
<dd><p>Do nothing.</dd>
+ <dt> <dfn id=attr-button-type-menu-state title=attr-button-type-menu-state>Menu</dfn>
+
+ <dd>
+
+ <p>The element must follow these steps:</p>
+
+ <ol><li><p>Let <var title="">menu</var> be the element's <a href=#designated-pop-up-menu>designated pop-up menu</a>, if
+ any. If there isn't one, then abort these steps.</li>
+
+ <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title=event-show>show</code> that is
+ cancelable at <var title="">menu</var>. <!-- v2: include modifier key information --></li>
+
+ <li><p>If the event is not canceled, then <a href=#construct-and-show-a-menu title="construct and show a menu">construct and
+ show</a> the menu for <var title="">menu</var>.</li>
+
+ </ol></dd>
+
</dl></div>
<p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
@@ -52108,12 +52109,24 @@
form submission if the button itself was used to initiate the form
submission.</p>
+ <hr><p>If the element's <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is in the <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>Menu</a> state, the <dfn id=attr-button-menu title=attr-button-menu><code>menu</code></dfn> attribute must be specified to give the element's
+ menu. The value must be the <a href=#concept-id title=concept-id>ID</a> of a <code><a href=#the-menu-element>menu</a></code> element in
+ the same <a href=#home-subtree>home subtree</a> whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in
+ the <a href=#popup-menu-state title="popup menu state">popup menu</a> state. The attribute must not be specified if
+ the element's <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is not in the <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>Menu</a> state.</p>
+
<div class=impl>
- <p>The <dfn id=dom-button-value title=dom-button-value><code>value</code></dfn> IDL
- attribute must <a href=#reflect>reflect</a> the content attribute of the
- same name.</p>
+ <p>A <code><a href=#the-button-element>button</a></code> element's <dfn id=designated-pop-up-menu>designated pop-up menu</dfn> is the first element in the
+ <code><a href=#the-button-element>button</a></code>'s <a href=#home-subtree>home subtree</a> whose ID is that given by the <code><a href=#the-button-element>button</a></code>
+ element's <code title=attr-button-menu><a href=#attr-button-menu>menu</a></code> attribute, if there is such an element and
+ its <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu
+ state">popup menu</a> state; otherwise, the element has no <a href=#designated-pop-up-menu>designated pop-up
+ menu</a>.</p>
+ <hr><p>The <dfn id=dom-button-value title=dom-button-value><code>value</code></dfn> and <dfn id=dom-button-menu title=dom-button-menu><code>menu</code></dfn> IDL attributes must <a href=#reflect>reflect</a> the
+ content attributes of the same name.</p>
+
<p>The <dfn id=dom-button-type title=dom-button-type><code>type</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the content attribute of the
same name, <a href=#limited-to-only-known-values>limited to only known values</a>.</p>
@@ -57965,527 +57978,481 @@
+ <h4 id=the-menu-element><span class=secno>4.11.3 </span>The <dfn id=menus><code>menu</code></dfn> element</h4>
- <h4 id=the-command-element><span class=secno>4.11.3 </span>The <dfn id=the-command><code>command</code></dfn> element</h4>
-
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
- <dd><a href=#metadata-content>Metadata content</a>.</dd>
<dd><a href=#flow-content>Flow content</a>.</dd>
- <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dd>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state: <a href=#palpable-content>Palpable content</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=#metadata-content>metadata content</a> is expected.</dd>
- <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
+ <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
+ <dd>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state: as the child of a <code><a href=#the-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state.</dd>
<dt><a href=#element-dfn-content-model title=element-dfn-content-model>Content model</a>:</dt>
- <dd>Empty.</dd>
+ <dd>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state: either zero or more <code><a href=#the-li-element>li</a></code> elements, or <a href=#flow-content>flow content</a>.</dd>
+ <dd>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state: in any order, zero or more <code><a href=#the-menuitem-element>menuitem</a></code> elements, zero or more <code><a href=#the-hr-element>hr</a></code> elements, and zero or more <code><a href=#the-menu-element>menu</a></code> elements whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attributes are in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state.</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-command-type><a href=#attr-command-type>type</a></code></dd>
- <dd><code title=attr-command-label><a href=#attr-command-label>label</a></code></dd>
- <dd><code title=attr-command-icon><a href=#attr-command-icon>icon</a></code></dd>
- <dd><code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code></dd>
- <dd><code title=attr-command-checked><a href=#attr-command-checked>checked</a></code></dd>
- <dd><code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code></dd>
- <!--<dd><code title="attr-command-default">default</code></dd>-->
- <dd><code title=attr-command-command><a href=#attr-command-command>command</a></code></dd>
- <dd>Also, the <code title=attr-command-title><a href=#attr-command-title>title</a></code> attribute has special semantics on this element.</dd>
+ <dd><code title=attr-menu-type><a href=#attr-menu-type>type</a></code></dd>
+ <dd><code title=attr-menu-label><a href=#attr-menu-label>label</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=htmlcommandelement>HTMLCommandElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
- attribute DOMString <a href=#dom-command-type title=dom-command-type>type</a>;
- attribute DOMString <a href=#dom-command-label title=dom-command-label>label</a>;
- attribute DOMString <a href=#dom-command-icon title=dom-command-icon>icon</a>;
- attribute boolean <a href=#dom-command-disabled title=dom-command-disabled>disabled</a>;
- attribute boolean <a href=#dom-command-checked title=dom-command-checked>checked</a>;
- attribute DOMString <a href=#dom-command-radiogroup title=dom-command-radiogroup>radiogroup</a>;<!--
- attribute boolean <span title="dom-command-default">default</span>;-->
- readonly attribute <a href=#htmlelement>HTMLElement</a>? <a href=#dom-command-command title=dom-command-command>command</a>;
+<pre class=idl>interface <dfn id=htmlmenuelement>HTMLMenuElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ attribute DOMString <a href=#dom-menu-type title=dom-menu-type>type</a>;
+ attribute DOMString <a href=#dom-menu-label title=dom-menu-label>label</a>;
};</pre>
- </dd>
- </dl><!--TOPIC:HTML--><p>The <code><a href=#the-command-element>command</a></code> element represents a command that the user
- can invoke.</p>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-menu-element>menu</a></code> element represents a list of commands.</p>
- <p>A command can be explicitly part of a context menu or toolbar,
- using the <code><a href=#the-menu-element>menu</a></code> element. It can also be put anywhere
- else on a page, either just to define a keyboard shortcut, or to
- define a command that is then referenced from other
- <code><a href=#the-command-element>command</a></code> elements.</p>
+ <!-- v2 idea: <menu> should get an icon, like <command> -->
- <p>A <code><a href=#the-command-element>command</a></code> element that uses the
- <code title=attr-command-type><a href=#attr-command-type>type</a></code>,
- <code title=attr-command-label><a href=#attr-command-label>label</a></code>,
- <code title=attr-command-icon><a href=#attr-command-icon>icon</a></code>,
- <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code>,
- <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>,
- <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code>,
- <!--<code title="attr-command-default">default</code>,--> and
- <code title=attr-title><a href=#attr-title>title</a></code> attributes defines a new
- command. A <code><a href=#the-command-element>command</a></code> element that uses the <code title=attr-command-command><a href=#attr-command-command>command</a></code> <em>attribute</em>
- defines a command by reference to another one. This allows authors
- to define a command once, and set its state (e.g. whether it is
- active or disabled) in one place, and have all references to that
- command in the user interface change at the same time.</p>
+ <p>The <dfn id=attr-menu-type title=attr-menu-type><code>type</code></dfn> attribute is an <a href=#enumerated-attribute>enumerated
+ attribute</a> indicating the kind of menu being declared. The attribute has two states. The
+ <code title=attr-menu-type-popup>popup</code> keyword maps to the <dfn id=popup-menu-state title="popup menu
+ state">popup menu</dfn> state, in which the element is declaring a context menu or the menu for a
+ <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>menu button</a>. The <code title=attr-menu-type-toolbar>toolbar</code> keyword maps to the <dfn id=toolbar-state title="toolbar
+ state">toolbar</dfn> state, in which the element is declaring a toolbar. The attribute may also be
+ omitted. The <i>missing value default</i> is the <a href=#popup-menu-state title="popup menu state">popup menu</a>
+ state if the parent element is a <code><a href=#the-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup
+ menu</a> state; otherwise, it is the <a href=#toolbar-state title="toolbar state">toolbar</a> state.</p>
- <hr><p>The <dfn id=attr-command-type title=attr-command-type><code>type</code></dfn>
- attribute indicates the kind of command: either a normal command
- with an associated action, or a state or option that can be toggled,
- or a selection of one item from a list of items.</p>
+ <p>If a <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the
+ <a href=#popup-menu-state title="popup menu state">popup menu</a> state, then the element <a href=#represents>represents</a>
+ the commands of a popup menu, and the user can only examine and interact with the commands if that
+ popup menu is activated through some other element, either via the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> attribute or the <code><a href=#the-button-element>button</a></code> element's <code title=attr-button-menu><a href=#attr-button-menu>menu</a></code> attribute.</p>
- <p>The attribute is an <a href=#enumerated-attribute>enumerated attribute</a> with three
- keywords and states. The "<dfn id=attr-command-type-keyword-command title=attr-command-type-keyword-command><code>command</code></dfn>"
- keyword maps to the <a href=#attr-command-type-state-command title=attr-command-type-state-command>Command</a> state, the
- "<dfn id=attr-command-type-keyword-checkbox title=attr-command-type-keyword-checkbox><code>checkbox</code></dfn>"
- keyword maps to the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state, and
- the "<dfn id=attr-command-type-keyword-radio title=attr-command-type-keyword-radio><code>radio</code></dfn>"
- keyword maps to the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state. The
- <i>missing value default</i> is the <a href=#attr-command-type-state-command title=attr-command-type-state-command>Command</a> state.</p>
+ <p>If a <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the
+ <a href=#toolbar-state title="toolbar state">toolbar</a> state, then the element <a href=#represents>represents</a> a
+ toolbar consisting of its contents, in the form of either an unordered list of items (represented
+ by <code><a href=#the-li-element>li</a></code> elements), each of which represents a command that the user can perform or
+ activate, or, if the element has no <code><a href=#the-li-element>li</a></code> element children, <a href=#flow-content>flow content</a>
+ describing available commands.</p>
- <dl><dt>The <dfn id=attr-command-type-state-command title=attr-command-type-state-command>Command</dfn> state</dt>
+ <p>The <dfn id=attr-menu-label title=attr-menu-label><code>label</code></dfn> attribute gives the label of the
+ menu. It is used by user agents to display nested menus in the UI: a context menu containing
+ another menu would use the nested menu's <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute for
+ the submenu's menu label. The <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute must only be
+ specified on <code><a href=#the-menu-element>menu</a></code> elements whose parent element is a <code><a href=#the-menu-element>menu</a></code> element whose
+ <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup
+ menu</a> state.</p>
- <dd><p>The element <a href=#represents>represents</a> a normal command with an associated action.</dd>
+ <div class=impl>
- <dt>The <dfn id=attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</dfn> state</dt>
+ <hr><p>A <code><a href=#the-menu-element>menu</a></code> is a <dfn id=currently-relevant-menu-element>currently relevant <code>menu</code> element</dfn> if it is the
+ child of a <a href=#currently-relevant-menu-element>currently relevant <code>menu</code> element</a>, or if it is the
+ <a href=#designated-pop-up-menu>designated pop-up menu</a> of a <code><a href=#the-button-element>button</a></code> element that is not
+ <a href=#inert>inert</a>, does not have a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute, and is not
+ the descendant of an element with a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute.</p>
- <dd><p>The element <a href=#represents>represents</a> a state or option that can be toggled.</dd>
+ <hr><p>A pop-up menu consists of a list of zero or more menu items, which can be any of:</p>
- <dt>The <dfn id=attr-command-type-state-radio title=attr-command-type-state-radio>Radio</dfn> state</dt>
+ <ul class=brief><li><a href=#concept-command title=concept-command>Commands</a>, which can be marked as default commands (<code><a href=#the-menuitem-element>menuitem</a></code>)</li>
+ <li>Separators (<code><a href=#the-hr-element>hr</a></code>)</li>
+ <li>Other menus, which allows the list to be nested (<code><a href=#the-menu-element>menu</a></code>)</li>
+ </ul><p>To <dfn id=construct-and-show-a-menu>construct and show a menu</dfn> for a particular <code><a href=#the-menu-element>menu</a></code> element, the user
+ agent must run the following steps:</p>
- <dd><p>The element <a href=#represents>represents</a> a selection of one item from a list of items.</dd>
+ <ol><li><p>Let the menu be an empty list of the type described above.</li>
- </dl><p>The <dfn id=attr-command-label title=attr-command-label><code>label</code></dfn>
- attribute gives the name of the command, as shown to the user. The
- <code title=attr-command-label><a href=#attr-command-label>label</a></code> attribute must be
- specified and must have a value that is not the empty string.</p>
+ <li>
- <p>The <dfn id=attr-command-title title=attr-command-title><code>title</code></dfn>
- attribute gives a hint describing the command, which might be shown
- to the user to help him.</p>
+ <p>Run the <a href=#menu-builder>menu builder</a> steps for the <code><a href=#the-menu-element>menu</a></code> element using the menu
+ prepared in the previous list as the output.</p>
- <p>The <dfn id=attr-command-icon title=attr-command-icon><code>icon</code></dfn>
- attribute gives a picture that represents the command. If the
- attribute is specified, the attribute's value must contain a
- <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
- spaces</a>. <span class=impl>To obtain the <a href=#absolute-url>absolute
- URL</a> of the icon when the attribute's value is not the empty
- string, the attribute's value must be <a href=#resolve-a-url title="resolve a
- url">resolved</a> relative to the element. When the attribute is
- absent, or its value is the empty string, or <a href=#resolve-a-url title="resolve a
- url">resolving</a> its value fails, there is no icon.</span></p>
- <!-- this is affected by the base URL being changed, so users of
- this should cache the image once they've fetched it once, at least
- until the relative url changes again -->
+ <p>The <dfn id=menu-builder>menu builder</dfn> steps for a <code><a href=#the-menu-element>menu</a></code> element using a specific menu as
+ output are as follows: For each child node of the <code><a href=#the-menu-element>menu</a></code> in <a href=#tree-order>tree order</a>,
+ run the appropriate steps from the following list:</p>
- <p>The <dfn id=attr-command-disabled title=attr-command-disabled><code>disabled</code></dfn> attribute
- is a <a href=#boolean-attribute>boolean attribute</a> that, if present, indicates that
- the command is not available in the current state.</p>
+ <dl class=switch><dt>If the child is a <code><a href=#the-menuitem-element>menuitem</a></code> element that <a href=#concept-command title=concept-command>defines a command</a></dt>
- <p class=note>The distinction between <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> and <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> is subtle. A command would be
- disabled if, in the same context, it could be enabled if only
- certain aspects of the situation were changed. A command would be
- marked as hidden if, in that situation, the command will never be
- enabled. For example, in the context menu for a water faucet, the
- command "open" might be disabled if the faucet is already open, but
- the command "eat" would be marked hidden since the faucet could
- never be eaten.</p>
+ <dd>Append the command to the menu, respecting its <a href=#concept-facet title=concept-facet>facets</a><!--
+ we might need to be explicit about what this means for each facet, if testing shows this isn't
+ well-implemented. e.g.: If there's an Icon facet for the command, it should be <span
+ title="fetch">fetched</span><!- -FETCH- -> (this would be http-origin privacy-sensitive), and
+ then that image should be associated with the command, such that each command only has its image
+ fetched once, to prevent changes to the base URL from having effects after the image has been
+ fetched once. (no need to resolve the Icon facet, it's an absolute URL) -->. If the
+ <code><a href=#the-menuitem-element>menuitem</a></code> element has a <code title=attr-menuitem-default><a href=#attr-menuitem-default>default</a></code> attribute,
+ mark the command as being a default command.</dd>
- <p>The <dfn id=attr-command-checked title=attr-command-checked><code>checked</code></dfn>
- attribute is a <a href=#boolean-attribute>boolean attribute</a> that, if present,
- indicates that the command is selected. The attribute must be
- omitted unless the <code title=attr-command-type><a href=#attr-command-type>type</a></code>
- attribute is in either the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state or
- the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a>
- state.</p>
- <p>The <dfn id=attr-command-radiogroup title=attr-command-radiogroup><code>radiogroup</code></dfn>
- attribute gives the name of the group of commands that will be
- toggled when the command itself is toggled, for commands whose <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute has the value "<code title="">radio</code>". The scope of the name is the child list of
- the parent element. The attribute must be omitted unless the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is in the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state.</p>
+ <dt>If the child is an <code><a href=#the-hr-element>hr</a></code> element</dt>
-<!--
- <p>If the <code>command</code> element is used when <span
- title="menu generation">generating</span> a <span>context
- menu</span>, then the <dfn
- title="attr-command-default"><code>default</code></dfn> attribute
- indicates, if present, that the command is the one that would have
- been invoked if the user had directly activated the menu's subject
- instead of using its context menu. The <code
- title="attr-command-default">default</code> attribute is a
- <span>boolean attribute</span>. The attribute must be omitted unless
- the <code title="attr-command-type">type</code> attribute is in the
- <span title="attr-command-type-state-command">Command</span>
- state.</p>
+ <dd>Append a separator to the menu.</dd>
- <div class="example">
- ...an example that shows an element that, if double-clicked,
- invokes an action, but that also has a context menu, showing the
- various <code>command</code> attributes off, and that has a default
- command...
+ <dt>If the child is a <code><a href=#the-menu-element>menu</a></code> element with no <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
- </div>
--->
+ <dd>Append a separator to the menu, then run the <a href=#menu-builder>menu builder</a> steps using this
+ child <code><a href=#the-menu-element>menu</a></code> element for the same menu, then append another separator to the
+ menu.</dd>
- <hr><p>If a <code><a href=#the-command-element>command</a></code> element <var title="">slave</var> has a
- <dfn id=attr-command-command title=attr-command-command><code>command</code></dfn>
- attribute, and <var title="">slave</var> is <a href=#in-a-document>in a
- <code>Document</code></a>, and there is an element in that
- <code><a href=#document>Document</a></code> whose <a href=#concept-id title=concept-id>ID</a> has a
- value equal to the value of <var title="">slave</var>'s <code title=attr-command-command><a href=#attr-command-command>command</a></code> attribute, and the first
- such element in <a href=#tree-order>tree order</a>, hereafter <var title="">master</var>, itself <a href=#concept-command title=concept-command>defines
- a command</a> and either is not a <code><a href=#the-command-element>command</a></code> element or
- does not itself have a <code title=attr-command-command><a href=#attr-command-command>command</a></code> attribute, then the
- <dfn id=master-command>master command</dfn> of <var title="">slave</var> is <var title="">master</var>.</p>
- <p>An element with a
- <code title=attr-command-command><a href=#attr-command-command>command</a></code>
- attribute must have a <a href=#master-command>master command</a> and must not have any
- <code title=attr-command-type><a href=#attr-command-type>type</a></code>,
- <code title=attr-command-label><a href=#attr-command-label>label</a></code>,
- <code title=attr-command-icon><a href=#attr-command-icon>icon</a></code>,
- <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code>,
- <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>, or
- <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code>
- attributes.</p>
+ <dt>If the child is a <code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
- <hr><div class=impl>
+ <dd>Create a new submenu as an empty list of the type described above, and construct it by
+ running the <a href=#menu-builder>menu builder</a> steps for the child <code><a href=#the-menu-element>menu</a></code> element using the
+ new submenu as the output. Then, append the submenu to the menu, using the value of the child
+ <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute as the label
+ of the submenu.</dd>
- <p>The <dfn id=dom-command-type title=dom-command-type><code>type</code></dfn> IDL
- attribute must <a href=#reflect>reflect</a> the content attribute of the
- same name, <a href=#limited-to-only-known-values>limited to only known values</a>.</p>
- <p>The <dfn id=dom-command-label title=dom-command-label><code>label</code></dfn>, <dfn id=dom-command-icon title=dom-command-icon><code>icon</code></dfn>, <dfn id=dom-command-disabled title=dom-command-disabled><code>disabled</code></dfn>, <dfn id=dom-command-checked title=dom-command-checked><code>checked</code></dfn>, and <dfn id=dom-command-radiogroup title=dom-command-radiogroup><code>radiogroup</code></dfn><!--,
- and <dfn title="dom-command-default"><code>default</code></dfn>-->
- IDL attributes must <a href=#reflect>reflect</a> the respective content
- attributes of the same name.</p>
+ <dt>Any other node</dt>
- <p>The <dfn id=dom-command-command title=dom-command-command><code>command</code></dfn>
- IDL attribute must return the <a href=#master-command>master command</a>, if any,
- or null otherwise.</p>
+ <dd><a href=#ignore>Ignore</a> the node.</dd>
- <hr><p>If the element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> is false
- (enabled) then the element's <a href=#activation-behavior>activation behavior</a>
- depends on the element's <code title=attr-command-type><a href=#attr-command-type>type</a></code>
- and <code title=attr-command-command><a href=#attr-command-command>command</a></code> attributes, as
- follows:</p>
+ </dl></li>
- <dl class=switch><dt>If the element has a <a href=#master-command>master command</a> set by its
- <code title=attr-command-command><a href=#attr-command-command>command</a></code> attribute</dt>
+ <li><p>Remove any submenu with no label, or whose label is the empty string, in the menu or any submenus.</li>
- <dd><p>The user agent must <a href=#run-synthetic-click-activation-steps>run synthetic click activation
- steps</a> on the element's <a href=#master-command>master command</a>.</dd>
- <!-- we know it has a defined <span>activation behavior</span> if
- we get here -->
+ <li><p>Remove any menu item with no label, or whose label is the empty string, in the menu or any submenus.</li>
+ <li><p>Collapse all sequences of two or more adjacent separators in the menu or any submenus to a single separator.</li>
- <dt>If the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is
- in the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state</dt>
+ <li><p>Remove all separators at the start or end of the menu and any submenus.</li>
- <dd><p>If the element has a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, the UA must
- remove that attribute. Otherwise, the UA must add a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, with the
- literal value <code title="">checked</code>.</dd>
+ <li>
+ <p>Display the menu to the user, and let the algorithm that invoked this one continue.</p>
- <dt>If the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is
- in the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state</dt>
+ <p>If the user selects a menu item that corresponds to an element that still represents a <a href=#concept-command title=concept-command>command</a> when the user selects it, then the UA must invoke that
+ command's <a href=#command-facet-action title=command-facet-Action>Action</a>.</p>
- <dd><p>If the element has a parent, then the UA must walk the list
- of child nodes of that parent element, and for each node that is a
- <code><a href=#the-command-element>command</a></code> element, if that element has a <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code> attribute whose
- value exactly matches the current element's (treating missing <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code> attributes as if
- they were the empty string), and has a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, must remove
- that attribute.</p>
+ <p>Pop-up menus must not, while being shown, reflect changes in the DOM. The menu is constructed
+ from the DOM before being shown, and is then immutable.</p>
- <p>Then, the element's <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute attribute
- must be set to the literal value <code title="">checked</code>.</dd>
+ </li>
+ </ol><hr><p>The <dfn id=dom-menu-type title=dom-menu-type><code>type</code></dfn> and <dfn id=dom-menu-label title=dom-menu-label><code>label</code></dfn> IDL attributes must <a href=#reflect>reflect</a> the
+ respective content attributes of the same name.</p>
- <dt>Otherwise</dt>
-
- <dd><p>The element's <a href=#activation-behavior>activation behavior</a> is to do
- nothing.</dd>
-
- </dl><p class=note>Firing a synthetic <code title=event-click><a href=#event-click>click</a></code> event at the element does not cause
- any of the actions described above to happen.</p>
-
- <!-- v2COMMAND: Expose the Triggers facet again. -->
-
- <p>If the element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> is true
- (disabled) then the element has no <a href=#activation-behavior>activation
- behavior</a>.</p>
-
</div>
- <p class=note><code><a href=#the-command-element>command</a></code> elements are not rendered
- unless they <a href=#the-menu-element title=menu>form part of a menu</a>.</p>
-
<div class=example>
- <p>Here is an example of a toolbar with three buttons that let the
- user toggle between left, center, and right alignment. One could
- imagine such a toolbar as part of a text editor. The toolbar also
- has a separator followed by another button labeled "Publish",
- though that button is disabled.</p>
+ <p>In this example, the <code><a href=#the-menu-element>menu</a></code> element is used to describe a toolbar with three menu
+ buttons on it, each of which has a dropdown menu with a series of options:</p>
- <pre><menu type="toolbar">
- <command type="radio" radiogroup="alignment" checked="checked"
- label="Left" icon="icons/alL.png" onclick="setAlign('left')">
- <command type="radio" radiogroup="alignment"
- label="Center" icon="icons/alC.png" onclick="setAlign('center')">
- <command type="radio" radiogroup="alignment"
- label="Right" icon="icons/alR.png" onclick="setAlign('right')">
- <hr>
- <command type="command" disabled
- label="Publish" icon="icons/pub.png" onclick="publish()">
+ <pre><menu> <!-- type="toolbar" implied -->
+ <li>
+ <button type=menu value="File" menu="filemenu">
+ <menu id="filemenu" type="popup">
+ <menuitem onclick="fnew()" label="New...">
+ <menuitem onclick="fopen()" label="Open...">
+ <menuitem onclick="fsave()" label="Save">
+ <menuitem onclick="fsaveas()" label="Save as...">
+ </menu>
+ </li>
+ <li>
+ <button type=menu value="Edit" menu="editmenu">
+ <menu id="editmenu" type="popup">
+ <menuitem onclick="ecopy()" label="Copy">
+ <menuitem onclick="ecut()" label="Cut">
+ <menuitem onclick="epaste()" label="Paste">
+ </menu>
+ </li>
+ <li>
+ <button type=menu value="Help" menu="helpmenu">
+ <menu id="helpmenu" type="popup">
+ <menuitem onclick="location='help.html'" label="Help">
+ <menuitem onclick="location='about.html'" label="About">
+ </menu>
+ </li>
</menu></pre>
+ <p>In a supporting user agent, this might look like this (assuming the user has just activated the
+ second button):</p>
+
+ <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." height=101 src=http://images.whatwg.org/sample-toolbar-1.png width=303></p>
+
</div>
- <h4 id=the-menu-element><span class=secno>4.11.4 </span>The <dfn id=menus><code>menu</code></dfn> element</h4>
+ <h4 id=the-menuitem-element><span class=secno>4.11.4 </span>The <dfn><code>menuitem</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>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state: <a href=#interactive-content>Interactive content</a>.</dd>
- <dd>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state or the <a href=#list-state title="list state">list</a> state: <a href=#palpable-content>Palpable content</a>.</dd>
+ <dd>None.</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-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state.</dd>
<dt><a href=#element-dfn-content-model title=element-dfn-content-model>Content model</a>:</dt>
- <dd>Either: Zero or more <code><a href=#the-li-element>li</a></code> elements.</dd>
- <dd>Or: <a href=#flow-content>Flow content</a>.</dd>
+ <dd>Empty.</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-menu-type><a href=#attr-menu-type>type</a></code></dd>
- <dd><code title=attr-menu-label><a href=#attr-menu-label>label</a></code></dd>
+ <dd><code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code></dd>
+ <dd><code title=attr-menuitem-label><a href=#attr-menuitem-label>label</a></code></dd>
+ <dd><code title=attr-menuitem-icon><a href=#attr-menuitem-icon>icon</a></code></dd>
+ <dd><code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code></dd>
+ <dd><code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code></dd>
+ <dd><code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>radiogroup</a></code></dd>
+ <dd><code title=attr-menuitem-default><a href=#attr-menuitem-default>default</a></code></dd>
+ <dd><code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code></dd>
+ <dd>Also, the <code title=attr-menuitem-title><a href=#attr-menuitem-title>title</a></code> attribute has special semantics on this element.</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=htmlmenuelement>HTMLMenuElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
- attribute DOMString <a href=#dom-menu-type title=dom-menu-type>type</a>;
- attribute DOMString <a href=#dom-menu-label title=dom-menu-label>label</a>;
+<pre class=idl>interface <dfn id=htmlmenuitemelement>HTMLMenuItemElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ attribute DOMString <a href=#dom-menuitem-type title=dom-menuitem-type>type</a>;
+ attribute DOMString <a href=#dom-menuitem-label title=dom-menuitem-label>label</a>;
+ attribute DOMString <a href=#dom-menuitem-icon title=dom-menuitem-icon>icon</a>;
+ attribute boolean <a href=#dom-menuitem-disabled title=dom-menuitem-disabled>disabled</a>;
+ attribute boolean <a href=#dom-menuitem-checked title=dom-menuitem-checked>checked</a>;
+ attribute DOMString <a href=#dom-menuitem-radiogroup title=dom-menuitem-radiogroup>radiogroup</a>;
+ attribute boolean <a href=#dom-menuitem-default title=dom-menuitem-default>default</a>;
+ readonly attribute <a href=#htmlelement>HTMLElement</a>? <a href=#dom-menuitem-command title=dom-menuitem-command>command</a>;
};</pre>
- </dl><!--TOPIC:HTML--><p>The <code><a href=#the-menu-element>menu</a></code> element represents a list of commands.</p>
+ </dd>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-menuitem-element>menuitem</a></code> element represents a command that the user can invoke from a popup
+ menu (either a <a href=#attr-contextmenu title=attr-contextmenu>context menu</a> or the menu of a <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>menu button</a>).</p>
- <!-- v2 idea: <menu> should get an icon, like <command> -->
+ <p>A <code><a href=#the-menuitem-element>menuitem</a></code> element that uses one or more of the
+ <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code>,
+ <code title=attr-menuitem-label><a href=#attr-menuitem-label>label</a></code>,
+ <code title=attr-menuitem-icon><a href=#attr-menuitem-icon>icon</a></code>,
+ <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code>,
+ <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code>, and
+ <code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>radiogroup</a></code>
+ attributes defines a new command.</p>
- <p>The <dfn id=attr-menu-type title=attr-menu-type><code>type</code></dfn> attribute
- is an <a href=#enumerated-attribute>enumerated attribute</a> indicating the kind of menu
- being declared. The attribute has three states. The <code title=attr-menu-type-context>context</code> keyword maps to the
- <dfn id=context-menu-state title="context menu state">context menu</dfn> state, in which
- the element is declaring a context menu. The <code title=attr-menu-type-toolbar>toolbar</code> keyword maps to the
- <dfn id=toolbar-state title="toolbar state">toolbar</dfn> state, in which the
- element is declaring a toolbar. The attribute may also be
- omitted. The <i>missing value default</i> is the <dfn id=list-state title="list
- state">list</dfn> state, which indicates that the element is merely
- a list of commands that is neither declaring a context menu nor
- defining a toolbar.</p>
+ <p>A <code><a href=#the-menuitem-element>menuitem</a></code> element that uses the <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute defines a command by reference to another
+ one. This allows authors to define a command once, and set its state (e.g. whether it is active or
+ disabled) in one place, and have all references to that command in the user interface change at
+ the same time.</p>
- <p>If a <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#context-menu-state title="context menu state">context menu</a> state, then the
- element <a href=#represents>represents</a> the commands of a context menu, and
- the user can only interact with the commands if that context menu is
- activated.</p>
+ <p>If the <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute is specified, the element
+ is in the <dfn id=indirect-command>indirect command</dfn> mode. If it is not specified, it is in the <dfn id=explicit-command>explicit
+ command</dfn> mode. When the element is in the <a href=#indirect-command>indirect command</a> mode, the element
+ must not have any of the following attributes specified:
+ <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code>,
+ <code title=attr-menuitem-label><a href=#attr-menuitem-label>label</a></code>,
+ <code title=attr-menuitem-icon><a href=#attr-menuitem-icon>icon</a></code>,
+ <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code>,
+ <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code>,
+ <code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>radiogroup</a></code>.
+ </p>
- <p>If a <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, then the element
- <a href=#represents>represents</a> a list of active commands that the user can
- immediately interact with.</p>
+ <hr><p>The <dfn id=attr-menuitem-type title=attr-menuitem-type><code>type</code></dfn> attribute indicates the kind of
+ command: either a normal command with an associated action, or a state or option that can be
+ toggled, or a selection of one item from a list of items.</p>
- <p>If a <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#list-state title="list state">list</a> state, then the element either
- <a href=#represents>represents</a> an unordered list of items (each represented
- by an <code><a href=#the-li-element>li</a></code> element), each of which represents a command
- that the user can perform or activate, or, if the element has no
- <code><a href=#the-li-element>li</a></code> element children, <a href=#flow-content>flow content</a>
- describing available commands.</p>
+ <p>The attribute is an <a href=#enumerated-attribute>enumerated attribute</a> with three keywords and states. The "<dfn id=attr-menuitem-type-keyword-command title=attr-menuitem-type-keyword-command><code>command</code></dfn>" keyword maps to the <a href=#attr-menuitem-type-state-command title=attr-menuitem-type-state-command>Command</a> state, the "<dfn id=attr-menuitem-type-keyword-checkbox title=attr-menuitem-type-keyword-checkbox><code>checkbox</code></dfn>" keyword maps to the <a href=#attr-menuitem-type-state-checkbox title=attr-menuitem-type-state-checkbox>Checkbox</a> state, and the "<dfn id=attr-menuitem-type-keyword-radio title=attr-menuitem-type-keyword-radio><code>radio</code></dfn>" keyword maps to the <a href=#attr-menuitem-type-state-radio title=attr-menuitem-type-state-radio>Radio</a> state. The <i>missing value default</i> is the
+ <a href=#attr-menuitem-type-state-command title=attr-menuitem-type-state-command>Command</a> state.</p>
- <p>The <dfn id=attr-menu-label title=attr-menu-label><code>label</code></dfn>
- attribute gives the label of the menu. It is used by user agents to
- display nested menus in the UI. For example, a context menu
- containing another menu would use the nested menu's <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute for the submenu's
- menu label.</p>
+ <dl><dt>The <dfn id=attr-menuitem-type-state-command title=attr-menuitem-type-state-command>Command</dfn> state</dt>
- <div class=impl>
+ <dd><p>The element <a href=#represents>represents</a> a normal command with an associated action.</dd>
- <p>The <dfn id=dom-menu-type title=dom-menu-type><code>type</code></dfn> and <dfn id=dom-menu-label title=dom-menu-label><code>label</code></dfn> IDL attributes must
- <a href=#reflect>reflect</a> the respective content attributes of the same
- name.</p>
+ <dt>The <dfn id=attr-menuitem-type-state-checkbox title=attr-menuitem-type-state-checkbox>Checkbox</dfn> state</dt>
- </div>
+ <dd><p>The element <a href=#represents>represents</a> a state or option that can be toggled.</dd>
+ <dt>The <dfn id=attr-menuitem-type-state-radio title=attr-menuitem-type-state-radio>Radio</dfn> state</dt>
+ <dd><p>The element <a href=#represents>represents</a> a selection of one item from a list of items.</dd>
- <h5 id=menus-intro><span class=secno>4.11.4.1 </span>Introduction</h5>
+ </dl><p>The <dfn id=attr-menuitem-label title=attr-menuitem-label><code>label</code></dfn> attribute gives the name of the
+ command, as shown to the user. The <code title=attr-menuitem-label><a href=#attr-menuitem-label>label</a></code> attribute must
+ be specified if the element is in the <a href=#explicit-command>explicit command</a> mode. If the attribute is
+ specified, it must have a value that is not the empty string.</p>
- <p><i>This section is non-normative.</i></p>
+ <p>The <dfn id=attr-menuitem-icon title=attr-menuitem-icon><code>icon</code></dfn> attribute gives a picture that
+ represents the command. If the attribute is specified, the attribute's value must contain a
+ <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a>. <span class=impl>To obtain
+ the <a href=#absolute-url>absolute URL</a> of the icon when the attribute's value is not the empty string, the
+ attribute's value must be <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the element.
+ When the attribute is absent, or its value is the empty string, or <a href=#resolve-a-url title="resolve a
+ url">resolving</a> its value fails, there is no icon.</span></p> <!-- this is affected by the
+ base URL being changed, so users of this should cache the image once they've fetched it once, at
+ least until the relative url changes again -->
- <p>The <code><a href=#the-menu-element>menu</a></code> element is used to define context menus and
- toolbars.</p>
+ <p>The <dfn id=attr-menuitem-disabled title=attr-menuitem-disabled><code>disabled</code></dfn> attribute is a
+ <a href=#boolean-attribute>boolean attribute</a> that, if present, indicates that the command is not available in
+ the current state.</p>
- <p>For example, the following represents a toolbar with three menu
- buttons on it, each of which has a dropdown menu with a series of
- options:</p>
+ <p class=note>The distinction between <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code> and
+ <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> is subtle. A command would be disabled if, in the same
+ context, it could be enabled if only certain aspects of the situation were changed. A command
+ would be marked as hidden if, in that situation, the command will never be enabled. For example,
+ in the context menu for a water faucet, the command "open" might be disabled if the faucet is
+ already open, but the command "eat" would be marked hidden since the faucet could never be
+ eaten.</p>
- <pre><menu type="toolbar">
- <li>
- <menu label="File">
- <button type="button" onclick="fnew()">New...</button>
- <button type="button" onclick="fopen()">Open...</button>
- <button type="button" onclick="fsave()">Save</button>
- <button type="button" onclick="fsaveas()">Save as...</button>
- </menu>
- </li>
- <li>
- <menu label="Edit">
- <button type="button" onclick="ecopy()">Copy</button>
- <button type="button" onclick="ecut()">Cut</button>
- <button type="button" onclick="epaste()">Paste</button>
- </menu>
- </li>
- <li>
- <menu label="Help">
- <li><a href="help.html">Help</a></li>
- <li><a href="about.html">About</a></li>
- </menu>
- </li>
-</menu></pre>
+ <p>The <dfn id=attr-menuitem-checked title=attr-menuitem-checked><code>checked</code></dfn> attribute is a <a href=#boolean-attribute>boolean
+ attribute</a> that, if present, indicates that the command is selected. The attribute must be
+ omitted unless the <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is in either the <a href=#attr-menuitem-type-state-checkbox title=attr-menuitem-type-state-checkbox>Checkbox</a> state or the <a href=#attr-menuitem-type-state-radio title=attr-menuitem-type-state-radio>Radio</a> state.</p>
- <p>In a supporting user agent, this might look like this:</p>
+ <p>The <dfn id=attr-menuitem-radiogroup title=attr-menuitem-radiogroup><code>radiogroup</code></dfn> attribute gives the
+ name of the group of commands that will be toggled when the command itself is toggled, for
+ commands whose <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute has the value "<code title="">radio</code>". The scope of the name is the child list of the parent element. The
+ attribute must be omitted unless the <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is in
+ the <a href=#attr-menuitem-type-state-radio title=attr-menuitem-type-state-radio>Radio</a> state.</p>
- <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." height=101 src=http://images.whatwg.org/sample-toolbar-1.png width=303></p>
+ <hr><p>If a <code><a href=#the-menuitem-element>menuitem</a></code> element <var title="">slave</var> has a <dfn id=attr-menuitem-command title=attr-menuitem-command><code>command</code></dfn> attribute, and <var title="">slave</var>
+ is <a href=#in-a-document>in a <code>Document</code></a>, and there is an element in that <code><a href=#document>Document</a></code>
+ whose <a href=#concept-id title=concept-id>ID</a> has a value equal to the value of <var title="">slave</var>'s <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute, and the first
+ such element in <a href=#tree-order>tree order</a>, hereafter <var title="">master</var>, itself <a href=#concept-command title=concept-command>defines a command</a> and either is not a <code><a href=#the-menuitem-element>menuitem</a></code> element
+ or does not itself have a <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute, then the
+ <dfn id=master-command>master command</dfn> of <var title="">slave</var> is <var title="">master</var>.</p>
- <p>In a legacy user agent, the above would look like a bulleted list
- with three items, the first of which has four buttons, the second of
- which has three, and the third of which has two nested bullet points
- with two items consisting of links.</p>
+ <p>An element with a <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute must have a
+ <a href=#master-command>master command</a>.</p>
- <hr><p>The following implements a similar toolbar, with a single button
- whose values, when selected, redirect the user to Web sites.</p>
+ <hr><p>The <dfn id=attr-menuitem-title title=attr-menuitem-title><code>title</code></dfn> attribute gives a hint describing
+ the command, which might be shown to the user to help him.</p>
- <pre><form action="redirect.cgi">
- <menu type="toolbar">
- <label for="goto">Go to...</label>
- <menu label="Go">
- <select id="goto"<!--
- onchange="if (this.options[this.selectedIndex].value)
- window.location = this.options[this.selectedIndex].value"-->>
- <option value="" selected="selected"> Select site: </option>
- <option value="http://www.apple.com/"> Apple </option>
- <option value="http://www.mozilla.org/"> Mozilla </option>
- <option value="http://www.opera.com/"> Opera </option>
- </select>
- <span><input type="submit" value="Go"></span>
- </menu>
+ <p>The <dfn id=attr-menuitem-default title=attr-menuitem-default><code>default</code></dfn> attribute indicates, if
+ present, that the command is the one that would have been invoked if the user had directly
+ activated the menu's subject instead of using the menu. The <code title=attr-menuitem-default><a href=#attr-menuitem-default>default</a></code> attribute is a <a href=#boolean-attribute>boolean attribute</a>.</p>
+
+ <div class=example>
+
+ <p>In this trivial example, a submit button is given a context menu that has two options, one to
+ reset the form, and one to submit the form. The submit command is marked as being the default.</p>
+
+ <pre><form action="dosearch.pl">
+ <p><label>Enter search terms: <input type="text" name="terms"></label></p>
+ <p><input type=submit contextmenu=formmenu id="submitbutton"></p>
+ <p hidden><input type=reset id="resetbutton"></p>
+ <menu type=popup id=formmenu>
+ <menuitem command="submitbutton" default>
+ <menuitem command="resetbutton">
</menu>
</form></pre>
- <p>The behavior in supporting user agents is similar to the example
- above, but here the legacy behavior consists of a single
- <code><a href=#the-select-element>select</a></code> element with a submit button. The submit button
- doesn't appear in the toolbar, because it is not a child of the
- <code><a href=#the-menu-element>menu</a></code> element or of its <code><a href=#the-li-element>li</a></code> children.</p>
+ </div>
+ <div class=impl>
+ <hr><p>The <dfn id=dom-menuitem-type title=dom-menuitem-type><code>type</code></dfn> IDL
+ attribute must <a href=#reflect>reflect</a> the content attribute of the
+ same name, <a href=#limited-to-only-known-values>limited to only known values</a>.</p>
- <div class=impl>
+ <p>The <dfn id=dom-menuitem-label title=dom-menuitem-label><code>label</code></dfn>, <dfn id=dom-menuitem-icon title=dom-menuitem-icon><code>icon</code></dfn>, <dfn id=dom-menuitem-disabled title=dom-menuitem-disabled><code>disabled</code></dfn>, <dfn id=dom-menuitem-checked title=dom-menuitem-checked><code>checked</code></dfn>, and <dfn id=dom-menuitem-radiogroup title=dom-menuitem-radiogroup><code>radiogroup</code></dfn>,
+ and <dfn id=dom-menuitem-default title=dom-menuitem-default><code>default</code></dfn>
+ IDL attributes must <a href=#reflect>reflect</a> the respective content
+ attributes of the same name.</p>
- <h5 id=building-menus-and-toolbars><span class=secno>4.11.4.2 </span><dfn>Building menus and toolbars</dfn></h5>
+ <p>The <dfn id=dom-menuitem-command title=dom-menuitem-command><code>command</code></dfn>
+ IDL attribute must return the <a href=#master-command>master command</a>, if any,
+ or null otherwise.</p>
- <p>A menu (or toolbar) consists of a list of zero or more of the
- following components:</p>
+ <hr><p>If the element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> is false
+ (enabled) then the element's <a href=#activation-behavior>activation behavior</a>
+ depends on the element's <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code>
+ and <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attributes, as
+ follows:</p>
- <ul class=brief><li><a href=#concept-command title=concept-command>Commands</a>, which can be marked as default commands</li>
- <li>Separators</li>
- <li>Other menus (which allows the list to be nested)</li>
- </ul><p>The list corresponding to a particular <code><a href=#the-menu-element>menu</a></code> element
- is built by iterating over its child nodes. For each child node in
- <a href=#tree-order>tree order</a>, the required behavior depends on what the
- node is, as follows:</p>
+ <dl class=switch><dt>If the element has a <a href=#master-command>master command</a> set by its
+ <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute</dt>
- <dl class=switch><dt>An element that <a href=#concept-command title=concept-command>defines a command</a></dt>
+ <dd><p>The user agent must <a href=#run-synthetic-click-activation-steps>run synthetic click activation
+ steps</a> on the element's <a href=#master-command>master command</a>.</dd>
+ <!-- we know it has a defined <span>activation behavior</span> if
+ we get here -->
- <dd>Append the command to the menu, respecting its <a href=#concept-facet title=concept-facet>facets</a><!-- we might need to be
- explicit about what this means for each facet, if testing shows
- this isn't well-implemented. e.g.: If there's an Icon facet for the
- command, it should be <span title="fetch">fetched</span><!- -FETCH-
- -> (this would be http-origin privacy-sensitive), and then that
- image should be associated with the command, such that each command
- only has its image fetched once, to prevent changes to the base URL
- from having effects after the image has been fetched once. (no need
- to resolve the Icon facet, it's an absolute URL) -->. <!--If the
- element is a <code>command</code> element with a <code
- title="attr-command-default">default</code> attribute, mark the
- command as being a default command.--></dd>
+ <dt>If the <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is
+ in the <a href=#attr-menuitem-type-state-checkbox title=attr-menuitem-type-state-checkbox>Checkbox</a> state</dt>
- <dt>An <code><a href=#the-hr-element>hr</a></code> element</dt>
- <dt>An <code><a href=#the-option-element>option</a></code> element that has a <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute set to the empty
- string, and has a <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> attribute, and whose
- <code><a href=#textcontent>textContent</a></code> consists of a string of one or more
- hyphens (U+002D HYPHEN-MINUS)</dt>
+ <dd><p>If the element has a <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code> attribute, the UA must
+ remove that attribute. Otherwise, the UA must add a <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code> attribute, with the
+ literal value <code title="">checked</code>.</dd>
- <dd>Append a separator to the menu.</dd>
+ <dt>If the <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is
+ in the <a href=#attr-menuitem-type-state-radio title=attr-menuitem-type-state-radio>Radio</a> state</dt>
- <dt>An <code><a href=#the-li-element>li</a></code> element</dt>
- <dt>A <code><a href=#the-label-element>label</a></code> element</dt>
+ <dd><p>If the element has a parent, then the UA must walk the list
+ of child nodes of that parent element, and for each node that is a
+ <code><a href=#the-menuitem-element>menuitem</a></code> element, if that element has a <code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>radiogroup</a></code> attribute whose
+ value exactly matches the current element's (treating missing <code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>radiogroup</a></code> attributes as if
+ they were the empty string), and has a <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code> attribute, must remove
+ that attribute.</p>
- <dd>Iterate over the children of the element.</dd>
+ <p>Then, the element's <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code> attribute attribute
+ must be set to the literal value <code title="">checked</code>.</dd>
- <dt>A <code><a href=#the-menu-element>menu</a></code> element with no <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
- <dt>A <code><a href=#the-select-element>select</a></code> element</dt>
+ <dt>Otherwise</dt>
- <dd>Append a separator to the menu, then iterate over the children
- of the <code><a href=#the-menu-element>menu</a></code> or <code><a href=#the-select-element>select</a></code> element, then
- append another separator.</dd>
+ <dd><p>The element's <a href=#activation-behavior>activation behavior</a> is to do
+ nothing.</dd>
- <!-- v2: we might want to support <select> in <label> as giving a named submenu -->
+ </dl><p class=note>Firing a synthetic <code title=event-click><a href=#event-click>click</a></code> event at the element does not cause
+ any of the actions described above to happen.</p>
+ <!-- v2COMMAND: Expose the Triggers facet again. -->
- <dt>A <code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
- <dt>An <code><a href=#the-optgroup-element>optgroup</a></code> element with a <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
+ <p>If the element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> is true
+ (disabled) then the element has no <a href=#activation-behavior>activation
+ behavior</a>.</p>
- <dd>Append a submenu to the menu, using the value of the element's
- <code title="">label</code> attribute as the label of the menu. The
- submenu must be constructed by taking the element and creating a
- new menu for it using the complete process described in this
- section.</dd>
+ </div>
+ <p class=note>The <code><a href=#the-menuitem-element>menuitem</a></code> element is not rendered except as <a href=#the-menu-element title=menu>part of a popup menu</a>.</p>
- <dt>Any other node</dt>
+ <div class=example>
- <dd><a href=#ignore>Ignore</a> the node.</dd>
+ <p>Here is an example of a pop-up menu button with three options that let the user toggle between
+ left, center, and right alignment. One could imagine such a toolbar as part of a text editor. The
+ menu also has a separator followed by another menu item labeled "Publish", though that menu item
+ is disabled.</p>
- </dl><p>Once all the nodes have been processed as described above, the
- user agent must the post-process the menu as follows:</p>
+ <pre><button type=menu menu=editmenu>Commands...</button>
+<menu type="popup" id="editmenu">
+ <menuitem type="radio" radiogroup="alignment" checked="checked"
+ label="Left" icon="icons/alL.png" onclick="setAlign('left')">
+ <menuitem type="radio" radiogroup="alignment"
+ label="Center" icon="icons/alC.png" onclick="setAlign('center')">
+ <menuitem type="radio" radiogroup="alignment"
+ label="Right" icon="icons/alR.png" onclick="setAlign('right')">
+ <hr>
+ <menuitem type="command" disabled
+ label="Publish" icon="icons/pub.png" onclick="publish()">
+</menu></pre>
- <ol><li>Except for separators, any menu item with no label, or whose
- label is the empty string, must be removed.</li>
+ </div>
- <li>Any sequence of two or more separators in a row must be
- collapsed to a single separator.</li>
- <li>Any separator at the start or end of the menu must be
- removed.</li>
+ <h4 id=context-menus><span class=secno>4.11.5 </span>Context menus</h4>
- </ol></div>
+ <h5 id=declaring-a-context-menu><span class=secno>4.11.5.1 </span>Declaring a context menu</h5>
+ <p>The <dfn id=attr-contextmenu title=attr-contextmenu><code>contextmenu</code></dfn> attribute gives the element's
+ context menu. The value must be the <a href=#concept-id title=concept-id>ID</a> of a <code><a href=#the-menu-element>menu</a></code>
+ element in the same <a href=#home-subtree>home subtree</a> whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code>
+ attribute is in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state.</p>
+ <p class=note>When a user right-clicks on an element with a <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> attribute, the user agent will first fire a <code title=event-contextmenu>contextmenu</code> event at the element, and then, if that event is not
+ canceled, a <code title=event-show>show</code> event at the <code><a href=#the-menu-element>menu</a></code> element.</p>
+ <div class=example>
- <h5 id=context-menus><span class=secno>4.11.4.3 </span><dfn>Context menus</dfn></h5>
+ <p>Here is an example of a context menu for an input control:</p>
- <p>The <dfn id=attr-contextmenu title=attr-contextmenu><code>contextmenu</code></dfn>
- attribute gives the element's <a href=#context-menus title="context menus">context
- menu</a>. The value must be the <a href=#concept-id title=concept-id>ID</a> of a <code><a href=#the-menu-element>menu</a></code> element in the
- DOM. <span class=impl>If the node that would be obtained by
- invoking the <code title=dom-Document-getElementById><a href=#dom-document-getelementbyid>getElementById()</a></code> method
- using the attribute's value as the only argument is null or not a
- <code><a href=#the-menu-element>menu</a></code> element, then the element has no assigned context
- menu. Otherwise, the element's assigned context menu is the element
- so identified.</span></p>
+ <pre><form name="npc">
+ <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
+ <menu type=popup id=namemenu>
+ <menuitem label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
+ <menuitem label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
+ </menu>
+</form></pre>
+ <p>This adds two items to the control's context menu, one called "Pick random name", and one
+ called "Prefill other fields based on name". They invoke scripts that are not shown in the
+ example above.</p>
+
+ </div>
+
+
+
<div class=impl>
- <p>When an element's context menu is requested (e.g. by the user
- right-clicking the element, or pressing a context menu key), the
- user agent must apply the appropriate rules from the following
+ <h5 id=processing-model-2><span class=secno>4.11.5.2 </span>Processing model</h5>
+
+ <p>If the there is no element with the ID given by an element's <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> attribute's value in the element's <a href=#home-subtree>home
+ subtree</a>, or if the first such element is not a <code><a href=#the-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup
+ menu</a> state, then the element has no assigned context menu. Otherwise, the element's
+ assigned context menu is the first such element.</p>
+
+ <p>When an element's context menu is requested (e.g. by the user right-clicking the element, or
+ pressing a context menu key), the user agent must apply the appropriate rules from the following
list:</p>
<dl class=switch><dt>If the user requested a context menu using a pointing device</dt>
@@ -58498,99 +58465,49 @@
<dt>Otherwise</dt>
- <dd><p>The user agent must <a href=#fire-a-synthetic-mouse-event title="fire a synthetic mouse
- event">fire a synthetic mouse event named <code title=event-contextmenu>contextmenu</code></a> that bubbles
- and is cancelable at the element for which the menu was
- requested.</dd>
+ <dd><p>The user agent must <a href=#fire-a-synthetic-mouse-event title="fire a synthetic mouse event">fire a synthetic mouse
+ event named <code title=event-contextmenu>contextmenu</code></a> that bubbles and is
+ cancelable at the element for which the menu was requested.</dd>
- </dl><p class=note>Typically, therefore, the firing of the <code title=event-contextmenu>contextmenu</code> event will be the
- default action of a <code title=mouseup>mouseup</code> or <code title=event-keyup>keyup</code> event. The exact sequence of events
- is UA-dependent, as it will vary based on platform conventions.</p>
+ </dl><p class=note>Typically, therefore, the firing of the <code title=event-contextmenu>contextmenu</code> event will be the default action of a <code title=mouseup>mouseup</code> or <code title=event-keyup>keyup</code> event. The exact sequence
+ of events is UA-dependent, as it will vary based on platform conventions.</p>
<p>The default action of the <code title=event-contextmenu>contextmenu</code> event depends on
- whether the element or one of its ancestors has a context menu
- assigned (using the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> attribute) or not. If
- there is no context menu assigned, the default action must be for
- the user agent to show its default context menu, if it has one.</p>
+ whether or not the element or one of its ancestors has a context menu assigned (using the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> attribute) when the event dispatch has completed. If
+ there is no context menu assigned, the default action must be for the user agent to show its
+ default context menu, if it has one.</p>
- <p>If the element or one of its ancestors <em>does</em> have a
- context menu assigned, then the user agent must <a href=#fire-a-simple-event>fire a simple
- event</a> named <code title=event-show>show</code> at the
- <code><a href=#the-menu-element>menu</a></code> element of the context menu of the nearest
- ancestor (including the element itself) with one assigned.</p>
- <!-- v2: include modifier key information -->
+ <p>If the element or one of its ancestors <em>does</em> have a context menu assigned, then the
+ user agent must <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-show>show</code> that
+ is cancelable at the <code><a href=#the-menu-element>menu</a></code> element of the context menu of the nearest ancestor
+ (including the element itself) with one assigned.</p> <!-- v2: include modifier key information
+ -->
- <p>The default action of <em>this</em> event is that the user agent
- must show a context menu <a href=#building-menus-and-toolbars title="building menus and
- toolbars">built</a> from the <code><a href=#the-menu-element>menu</a></code> element.</p>
+ <p>The default action of <em>this</em> event is that the user agent must <a href=#construct-and-show-a-menu title="construct
+ and show a menu">construct and show</a> the menu for the <code><a href=#the-menu-element>menu</a></code> element.</p>
- <p>The user agent may also provide access to its default context
- menu, if any, with the context menu shown. For example, it could
- merge the menu items from the two menus together, or provide the
+ <p>The user agent may also provide access to its default context menu, if any, with the context
+ menu shown. For example, it could merge the menu items from the two menus together, or provide the
page's context menu as a submenu of the default menu.</p>
- <p>If the user dismisses the menu without making a selection,
- nothing in particular happens.</p>
+ <p>User agents may provide means for bypassing the context menu processing model, ensuring that
+ the user can always access the UA's default context menus. For example, the user agent could
+ handle right-clicks that have the Shift key depressed in such a way that it does not fire the
+ <code title=event-contextmenu>contextmenu</code> event and instead always shows the default
+ context menu.</p>
- <p>If the user selects a menu item that represents a <a href=#concept-command title=concept-command>command</a>, then the UA must invoke
- that command's <a href=#command-facet-action title=command-facet-Action>Action</a>.</p>
+ <p>The <dfn id=dom-contextmenu title=dom-contextMenu><code>contextMenu</code></dfn> IDL attribute must
+ <a href=#reflect>reflect</a> the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> content attribute.</p>
- <p>Context menus must not, while being shown, reflect changes in the
- DOM; they are constructed as the default action of the <code title=event-show>show</code> event and must remain as constructed
- until dismissed.</p>
-
- <p>User agents may provide means for bypassing the context menu
- processing model, ensuring that the user can always access the UA's
- default context menus. For example, the user agent could handle
- right-clicks that have the Shift key depressed in such a way that it
- does not fire the <code title=event-contextmenu>contextmenu</code>
- event and instead always shows the default context menu.</p>
-
- <p>The <dfn id=dom-contextmenu title=dom-contextMenu><code>contextMenu</code></dfn>
- IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> content attribute.</p>
-
</div>
- <div class=example>
- <p>Here is an example of a context menu for an input control:</p>
- <pre><form name="npc">
- <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
- <menu type=context id=namemenu>
- <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
- <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
- </menu>
-</form></pre>
- <p>This adds two items to the control's context menu, one called
- "Pick random name", and one called "Prefill other fields based on
- name". They invoke scripts that are not shown in the example
- above.</p>
+ <h4 id=commands><span class=secno>4.11.6 </span>Commands</h4>
- </div>
+ <h5 id=facets-0><span class=secno>4.11.6.1 </span>Facets</h5>
-
-
- <div class=impl>
-
- <h5 id=toolbars><span class=secno>4.11.4.4 </span><dfn>Toolbars</dfn></h5>
-
- <p>When a <code><a href=#the-menu-element>menu</a></code> element has a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, then the user agent
- must <a href=#building-menus-and-toolbars title="building menus and toolbars">build</a> the
- menu for that <code><a href=#the-menu-element>menu</a></code> element, and use the result in the
- rendering.</p>
-
- <p>The user agent must reflect changes made to the
- <code><a href=#the-menu-element>menu</a></code>'s DOM, by immediately <a href=#building-menus-and-toolbars title="building menus
- and toolbars">rebuilding</a> the menu.</p>
-
- </div>
-
-
-
- <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
@@ -58828,17 +58745,28 @@
</div>
<!--TOPIC:HTML-->
- <hr><p>User agents may expose the <a href=#concept-command title=concept-command>commands</a> whose <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a> facet is false
- (visible) and whose elements are <a href=#in-a-document>in a
- <code>Document</code></a>. For example, such commands could be
- listed in the user agent's menu bar. User agents are encouraged to
- do this especially for commands that have <a href=#command-facet-accesskey title=command-facet-AccessKey>Access Keys</a>, as a way to
- advertise those keys to the user.</p>
+ <hr><p id=expose-commands-in-ui>User agents may expose the <a href=#concept-command title=concept-command>commands</a> that match the following criteria:</p>
+ <ul class=brief><li>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a> facet is false (visible)</li>
+ <li>The element is <a href=#in-a-document>in a <code>Document</code></a> that has an associated <a href=#browsing-context>browsing
+ context</a>.</li>
+
+ <li>Neither the element nor any of its ancestors has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>
+ attribute specified.</li>
+
+ <li>The element is not a <code><a href=#the-menuitem-element>menuitem</a></code> element, or it is a child of a <a href=#currently-relevant-menu-element>currently
+ relevant <code>menu</code> element</a>, or it has an <a href=#command-facet-accesskey title=command-facet-accesskey>Access Key</a>.</li>
+
+ </ul><p>User agents are encouraged to do this especially for commands that have <a href=#command-facet-accesskey title=command-facet-AccessKey>Access Keys</a>, as a way to advertise those keys to the
+ user.</p>
+
+ <p class=example>For example, such commands could be listed in the user agent's menu bar.</p>
+
+
<div class=impl>
- <h5 id=using-the-a-element-to-define-a-command><span class=secno>4.11.5.1 </span><dfn title=a-command>Using the <code>a</code> element to define a command</dfn></h5>
+ <h5 id=using-the-a-element-to-define-a-command><span class=secno>4.11.6.2 </span><dfn title=a-command>Using the <code>a</code> element to define a command</dfn></h5>
<p>An <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute <a href=#concept-command title=concept-command>defines a command</a>.</p>
@@ -58889,7 +58817,7 @@
element.</p>
- <h5 id=using-the-button-element-to-define-a-command><span class=secno>4.11.5.2 </span><dfn title=button-command>Using the <code>button</code> element to define a command</dfn></h5>
+ <h5 id=using-the-button-element-to-define-a-command><span class=secno>4.11.6.3 </span><dfn title=button-command>Using the <code>button</code> element to define a command</dfn></h5>
<p>A <code><a href=#the-button-element>button</a></code> element always <a href=#concept-command title=concept-command>defines a command</a>.</p>
@@ -58903,14 +58831,14 @@
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>
+ <h5 id=using-the-input-element-to-define-a-command><span class=secno>4.11.6.4 </span><dfn title=input-command>Using the <code>input</code> element to define a command</dfn></h5>
<p>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 one of the <a href="#submit-button-state-(type=submit)" title=attr-input-type-submit>Submit Button</a>, <a href="#reset-button-state-(type=reset)" title=attr-input-type-reset>Reset Button</a>, <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a>, <a href="#button-state-(type=button)" title=attr-input-type-button>Button</a>, <a href="#radio-button-state-(type=radio)" title=attr-input-type-radio>Radio Button</a>, or <a href="#checkbox-state-(type=checkbox)" title=attr-input-type-checkbox>Checkbox</a> states <a href=#concept-command title=concept-command>defines a command</a>.</p>
<p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
is "radio" if the <code title=attr-input-type><a href=#attr-input-type>type</a></code>
- attribute is in the <code title=attr-input-type-radio><a href="#radio-button-state-(type=radio)">Radio
- Button</a></code> state, "checkbox" if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <code title=attr-input-type-checkbox><a href="#checkbox-state-(type=checkbox)">Checkbox</a></code> state, and
+ attribute is in the <a href="#radio-button-state-(type=radio)" title=attr-input-type-radio>Radio
+ Button</a> state, "checkbox" if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href="#checkbox-state-(type=checkbox)" title=attr-input-type-checkbox>Checkbox</a> state, and
"command" otherwise.</p>
<p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
@@ -58975,7 +58903,7 @@
element.</p>
- <h5 id=using-the-option-element-to-define-a-command><span class=secno>4.11.5.4 </span><dfn title=option-command>Using the <code>option</code> element to define a command</dfn></h5>
+ <h5 id=using-the-option-element-to-define-a-command><span class=secno>4.11.6.5 </span><dfn title=option-command>Using the <code>option</code> element to define a command</dfn></h5>
<p>An <code><a href=#the-option-element>option</a></code> element with an ancestor
<code><a href=#the-select-element>select</a></code> element and either no <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute or a <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute that is not the
@@ -59031,13 +58959,13 @@
- <h5 id=using-the-command-element-to-define-a-command><span class=secno>4.11.5.5 </span>Using the <dfn title=command-element><code>command</code></dfn> element to define
+ <h5 id=using-the-menuitem-element-to-define-a-command><span class=secno>4.11.6.6 </span>Using the <dfn title=command-element><code>menuitem</code></dfn> element to define
a command</h5>
- <p>A <code><a href=#the-command-element>command</a></code> element that does not have a <code title=attr-command-command><a href=#attr-command-command>command</a></code> attribute <a href=#concept-command title=concept-command>defines a command</a>.</p>
+ <p>A <code><a href=#the-menuitem-element>menuitem</a></code> element that does not have a <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute <a href=#concept-command title=concept-command>defines a command</a>.</p>
<p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
- is "radio" if the <code><a href=#the-command-element>command</a></code>'s <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is
+ is "radio" if the <code><a href=#the-menuitem-element>menuitem</a></code>'s <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is
"<code>radio</code>", "checkbox" if the attribute's value is
"<code>checkbox</code>", and "command" otherwise.</p>
@@ -59047,16 +58975,16 @@
command is an <a href=#anonymous-command>anonymous command</a>.</p>
<p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
- is the value of the element's <code title=attr-command-label><a href=#attr-command-label>label</a></code> attribute, if there is one,
+ is the value of the element's <code title=attr-menuitem-label><a href=#attr-menuitem-label>label</a></code> attribute, if there is one,
or the empty string if it doesn't.</p>
<p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
- is the string given by the element's <code title=attr-command-title><a href=#attr-command-title>title</a></code> attribute, if any, and the
+ is the string given by the element's <code title=attr-menuitem-title><a href=#attr-menuitem-title>title</a></code> attribute, if any, and the
empty string if the attribute is absent.</p>
<p>The <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the command
is the <a href=#absolute-url>absolute URL</a> obtained from <a href=#resolve-a-url title="resolve
- a url">resolving</a> the value of the element's <code title=attr-command-icon><a href=#attr-command-icon>icon</a></code> attribute, relative to the
+ a url">resolving</a> the value of the element's <code title=attr-menuitem-icon><a href=#attr-menuitem-icon>icon</a></code> attribute, relative to the
element, if it has such an attribute and resolving it is
successful. Otherwise, there is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the command.</p>
@@ -59070,11 +58998,11 @@
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
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
+ ancestors is <a href=#inert>inert</a>, or if the element has a <code title=attr-menuitem-disabled><a href=#attr-menuitem-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
+ of the command is true (checked) if the element has a <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code> attribute, and false
otherwise.</p>
<p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the
@@ -59086,9 +59014,9 @@
- <h5 id=using-the-command-attribute-on-command-elements-to-define-a-command-indirectly><span class=secno>4.11.5.6 </span><dfn title=command-command-command>Using the <code title=attr-command-command>command</code> attribute on <code>command</code> elements to define a command indirectly</dfn></h5>
+ <h5 id=using-the-command-attribute-on-menuitem-elements-to-define-a-command-indirectly><span class=secno>4.11.6.7 </span><dfn title=command-menuitem-command>Using the <code title=attr-menuitem-command>command</code> attribute on <code>menuitem</code> elements to define a command indirectly</dfn></h5>
- <p>A <code><a href=#the-command-element>command</a></code> element with a <a href=#master-command>master command</a>
+ <p>A <code><a href=#the-menuitem-element>menuitem</a></code> element with a <a href=#master-command>master command</a>
<a href=#concept-command title=concept-command>defines a command</a>.</p>
<p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
@@ -59135,7 +59063,7 @@
- <h5 id=using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.5.7 </span><dfn title=label-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</dfn></h5>
+ <h5 id=using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.6.8 </span><dfn title=label-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</dfn></h5>
<p>A <code><a href=#the-label-element>label</a></code> element that has an <a href=#assigned-access-key>assigned access
key</a> and a <a href=#labeled-control>labeled control</a> and whose
@@ -59176,7 +59104,7 @@
- <h5 id=using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.5.8 </span><dfn title=legend-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</dfn></h5>
+ <h5 id=using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.6.9 </span><dfn title=legend-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</dfn></h5>
<p>A <code><a href=#the-legend-element>legend</a></code> element that has an <a href=#assigned-access-key>assigned access
key</a> and is a child of a <code><a href=#the-fieldset-element>fieldset</a></code> element that
@@ -59220,7 +59148,7 @@
- <h5 id=using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.9 </span><dfn title=accesskey-command>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</dfn></h5>
+ <h5 id=using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.6.10 </span><dfn title=accesskey-command>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</dfn></h5>
<p>An element that has an <a href=#assigned-access-key>assigned access key</a> <a href=#concept-command title=concept-command>defines a command</a>.</p>
@@ -59283,7 +59211,7 @@
</ol></div>
- <h4 id=the-dialog-element><span class=secno>4.11.6 </span>The <dfn><code>dialog</code></dfn> element</h4>
+ <h4 id=the-dialog-element><span class=secno>4.11.7 </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>
@@ -59737,7 +59665,7 @@
</div>
- <h5 id=anchor-points><span class=secno>4.11.6.1 </span>Anchor points</h5>
+ <h5 id=anchor-points><span class=secno>4.11.7.1 </span>Anchor points</h5>
<p class=critical>This section will eventually be moved to a CSS
specification; it is specified here only on an interim basis until
@@ -61927,14 +61855,8 @@
<li><code><a href=#the-option-element>option</a></code> elements that are <a href=#concept-option-disabled title=concept-option-disabled>disabled</a></li>
- <li><code><a href=#the-command-element>command</a></code> elements that have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
+ <li><code><a href=#the-menuitem-element>menuitem</a></code> elements that have a <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code> attribute</li>
- <li><code><a href=#the-li-element>li</a></code> elements that are children of
- <code><a href=#the-menu-element>menu</a></code> elements, and that have a child element that
- defines a <a href=#concept-command title=concept-command>command</a>, if the
- first such element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet
- is true (disabled)</li>
-
<li><code><a href=#the-fieldset-element>fieldset</a></code> elements that have a <code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code> attribute</li>
</ul><p class=note>This definition is used to determine what elements can be <a href=#specially-focusable title="tabindex
@@ -62030,7 +61952,7 @@
<li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href="#submit-button-state-(type=submit)" title=attr-input-type-submit>Submit Button</a>, <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a>, <a href="#reset-button-state-(type=reset)" title=attr-input-type-reset>Reset Button</a>, or <a href="#button-state-(type=button)" title=attr-input-type-button>Button</a> state</li>
- <li><code><a href=#the-command-element>command</a></code> elements that do not have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
+ <li><code><a href=#the-menuitem-element>menuitem</a></code> elements that do not have a <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code> attribute</li>
<li>elements that have their <a href=#specially-focusable>tabindex focus flag</a> set</li>
@@ -62148,14 +62070,8 @@
<li><code><a href=#the-option-element>option</a></code> elements that are not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a></li>
- <li><code><a href=#the-command-element>command</a></code> elements that do not have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
+ <li><code><a href=#the-menuitem-element>menuitem</a></code> elements that do not have a <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code> attribute</li>
- <li><code><a href=#the-li-element>li</a></code> elements that are children of
- <code><a href=#the-menu-element>menu</a></code> elements, and that have a child element that
- defines a <a href=#concept-command title=concept-command>command</a>, if the
- first such element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet
- is false (not disabled)</li>
-
<li><code><a href=#the-fieldset-element>fieldset</a></code> elements that do not have a <code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code> attribute</li>
</ul></dd>
@@ -62190,12 +62106,12 @@
<li><code><a href=#the-option-element>option</a></code> elements whose <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is
true</li>
- <li><code><a href=#the-command-element>command</a></code> elements whose <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is in the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state
- and that have a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>
+ <li><code><a href=#the-menuitem-element>menuitem</a></code> elements whose <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is in the <a href=#attr-menuitem-type-state-checkbox title=attr-menuitem-type-state-checkbox>Checkbox</a> state
+ and that have a <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code>
attribute</li>
- <li><code><a href=#the-command-element>command</a></code> elements whose <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is in the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state and that
- have a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>
+ <li><code><a href=#the-menuitem-element>menuitem</a></code> elements whose <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is in the <a href=#attr-menuitem-type-state-radio title=attr-menuitem-type-state-radio>Radio</a> state and that
+ have a <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code>
attribute</li>
</ul></dd>
@@ -62240,8 +62156,8 @@
<li><code><a href=#the-option-element>option</a></code> elements that have a <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute</li>
<!--
- <li><code>command</code> elements that have a <code
- title="attr-command-default">default</code> attribute</li>
+ <li><code>menuitem</code> elements that have a <code
+ title="attr-menuitem-default">default</code> attribute</li>
-->
</ul></dd>
@@ -73029,7 +72945,7 @@
<div class=impl>
<!-- SCRIPT EXEC (marks areas related to creation of scripts) -->
- <h4 id=processing-model-2><span class=secno>7.1.3 </span>Processing model</h4>
+ <h4 id=processing-model-3><span class=secno>7.1.3 </span>Processing model</h4>
<h5 id=definitions-0><span class=secno>7.1.3.1 </span>Definitions</h5>
@@ -73582,7 +73498,7 @@
release the <a href=#storage-mutex>storage mutex</a>.</p>
- <h5 id=processing-model-3><span class=secno>7.1.4.2 </span>Processing model</h5>
+ <h5 id=processing-model-4><span class=secno>7.1.4.2 </span>Processing model</h5>
<p>An <a href=#event-loop>event loop</a> must continually run through the
following steps for as long as it exists:</p>
@@ -77064,7 +76980,7 @@
<li><code><a href=#the-textarea-element>textarea</a></code> elements</li>
- <li><code><a href=#the-command-element>command</a></code> elements</li>
+ <li><code><a href=#the-menuitem-element>menuitem</a></code> elements</li>
<li>Elements with a <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code>
attribute set, if that would enable the user agent to allow the
@@ -77578,7 +77494,7 @@
<div class=impl>
- <h4 id=processing-model-4><span class=secno>8.5.3 </span>Processing model</h4>
+ <h4 id=processing-model-5><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.
@@ -77629,19 +77545,17 @@
<a href=#assigned-access-key>assigned access key</a> unless the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute is changed
or the element is moved to another <code><a href=#document>Document</a></code>.</p>
- <p>When the user presses the key combination corresponding to the
- <a href=#assigned-access-key>assigned access key</a> for an element, if the element
- <a href=#concept-command title=concept-command>defines a command</a>, the
- command's <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden
- State</a> facet is false (visible), the command's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet is
- also false (enabled), and the element is <a href=#in-a-document>in a
- <code>Document</code></a>, then the user agent must trigger the
- <a href=#command-facet-action title=command-facet-Action>Action</a> of the command.</p>
+ <p>When the user presses the key combination corresponding to the <a href=#assigned-access-key>assigned access key</a>
+ for an element, if the element <a href=#concept-command title=concept-command>defines a command</a>, the
+ command's <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a> facet is false (visible),
+ the command's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet is also false
+ (enabled), the element is <a href=#in-a-document>in a <code>Document</code></a> that has an associated
+ <a href=#browsing-context>browsing context</a>, and neither the element nor any of its ancestors has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute specified, then the user agent must trigger the <a href=#command-facet-action title=command-facet-Action>Action</a> of the command.</p>
- <p class=note>User agents might expose elements that have an <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute in other ways as
- well, e.g. in a menu displayed in response to a specific key
- combination.</p> <!-- the actual conformance criteria for this is in
- the section that defines commands -->
+ <p class=note>User agents <a href=#expose-commands-in-ui>might expose</a> elements that have
+ an <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute in other ways as well, e.g. in a menu
+ displayed in response to a specific key combination.</p> <!-- the actual conformance criteria for
+ this is in the section that defines commands -->
<hr><p>The <dfn id=dom-accesskey title=dom-accessKey><code>accessKey</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute.</p>
@@ -81809,7 +81723,7 @@
<a href=#permissible-worker>permissible worker</a>.</p>
- <h4 id=processing-model-5><span class=secno>9.2.4 </span>Processing model</h4>
+ <h4 id=processing-model-6><span class=secno>9.2.4 </span>Processing model</h4>
<p>When a user agent is to <dfn id=run-a-worker>run a worker</dfn> for a script with
<a href=#url>URL</a> <var title="">url</var>, a <a href=#browsing-context>browsing
@@ -83138,7 +83052,7 @@
</ul><p>These values are not currently exposed on the interface.</p>
- <h4 id=processing-model-6><span class=secno>10.2.3 </span>Processing model</h4>
+ <h4 id=processing-model-7><span class=secno>10.2.3 </span>Processing model</h4>
<p>The resource indicated in the argument to the <code title=dom-EventSource><a href=#dom-eventsource>EventSource</a></code> constructor is <a href=#fetch title=fetch>fetched</a> when the constructor is run.</p>
@@ -86606,12 +86520,10 @@
<dl><dt><dfn id=void-elements>Void elements</dfn></dt>
- <dd><code><a href=#the-area-element>area</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#the-br-element>br</a></code>,
- <code><a href=#the-col-element>col</a></code>, <code><a href=#the-command-element>command</a></code>, <code><a href=#the-embed-element>embed</a></code>,
- <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>,
- <code><a href=#the-keygen-element>keygen</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#the-meta-element>meta</a></code>,
- <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>, <code><a href=#the-track-element>track</a></code>,
- <code><a href=#the-wbr-element>wbr</a></code></dd>
+ <dd><code><a href=#the-area-element>area</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#the-br-element>br</a></code>, <code><a href=#the-col-element>col</a></code>, <code><a href=#the-embed-element>embed</a></code>,
+ <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#the-keygen-element>keygen</a></code>, <code><a href=#the-link-element>link</a></code>,
+ <code><a href=#the-menuitem-element>menuitem</a></code>, <code><a href=#the-meta-element>meta</a></code>, <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>,
+ <code><a href=#the-track-element>track</a></code>, <code><a href=#the-wbr-element>wbr</a></code></dd>
<!-- see also other places that say VOIDLIST -->
<dt><dfn id=raw-text-elements>Raw text elements</dfn></dt>
@@ -88485,7 +88397,7 @@
<code><a href=#the-base-element>base</a></code>, <code><a href=#basefont>basefont</a></code>, <code><a href=#bgsound>bgsound</a></code>,
<code><a href=#the-blockquote-element>blockquote</a></code>, <code><a href=#the-body-element>body</a></code>, <code><a href=#the-br-element>br</a></code>,
<code><a href=#the-button-element>button</a></code>, <code><a href=#the-caption-element>caption</a></code>, <code><a href=#center>center</a></code>,
- <code><a href=#the-col-element>col</a></code>, <code><a href=#the-colgroup-element>colgroup</a></code>, <code><a href=#the-command-element>command</a></code>,
+ <code><a href=#the-col-element>col</a></code>, <code><a href=#the-colgroup-element>colgroup</a></code>, <code><a href=#the-menuitem-element>menuitem</a></code>,
<code><a href=#the-dd-element>dd</a></code>, <code><a href=#the-details-element>details</a></code>, <code><a href=#dir>dir</a></code>,
<code><a href=#the-div-element>div</a></code>, <code><a href=#the-dl-element>dl</a></code>, <code><a href=#the-dt-element>dt</a></code>,
<code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-fieldset-element>fieldset</a></code>, <code><a href=#the-figcaption-element>figcaption</a></code>,
@@ -95324,15 +95236,13 @@
<p>Append a U+003E GREATER-THAN SIGN character (>).</p>
- <p>If <var title="">current node</var> is an
- <code><a href=#the-area-element>area</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#basefont>basefont</a></code>,
- <code><a href=#bgsound>bgsound</a></code>, <code><a href=#the-br-element>br</a></code>, <code><a href=#the-col-element>col</a></code>,
- <code><a href=#the-command-element>command</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#frame>frame</a></code>,
- <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>,
- <code><a href=#the-keygen-element>keygen</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#the-meta-element>meta</a></code>,
- <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>, <code><a href=#the-track-element>track</a></code> or
- <code><a href=#the-wbr-element>wbr</a></code> element, then continue on to the next child
- node at this point.</p> <!-- VOIDLIST superset -->
+ <p>If <var title="">current node</var> is an <code><a href=#the-area-element>area</a></code>, <code><a href=#the-base-element>base</a></code>,
+ <code><a href=#basefont>basefont</a></code>, <code><a href=#bgsound>bgsound</a></code>, <code><a href=#the-br-element>br</a></code>, <code><a href=#the-col-element>col</a></code>,
+ <code><a href=#the-embed-element>embed</a></code>, <code><a href=#frame>frame</a></code>, <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-img-element>img</a></code>,
+ <code><a href=#the-input-element>input</a></code>, <code><a href=#the-keygen-element>keygen</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#the-menuitem-element>menuitem</a></code>,
+ <code><a href=#the-meta-element>meta</a></code>, <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>, <code><a href=#the-track-element>track</a></code> or
+ <code><a href=#the-wbr-element>wbr</a></code> element, then continue on to the next child node at this point.</p>
+ <!-- VOIDLIST superset -->
<!-- also, i guess: image and isindex, but we don't list those
because we don't consider those "elements", more "macros", and
thus we should never serialize them -->
@@ -96108,7 +96018,7 @@
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
[hidden], area, base, basefont, command, datalist, head,
-input[type=hidden i], link, menu[type=context i], meta, noembed, noframes,
+input[type=hidden i], link, menu[type=popup i], meta, noembed, noframes,
param, rp, script, source, style, track, title {
display: none;
}
@@ -97626,22 +97536,6 @@
<div class=impl>
- <h4 id=toolbars-0><span class=secno>14.4.5 </span>Toolbars</h4>
-
- <p>When a <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, the element is
- expected to be treated as a replaced element with a height about two
- lines high and a width derived from the contents of the element.</p>
-
- <p>The element is expected to have, by default, the appearance of a
- toolbar on the user agent's platform. It is expected to contain the
- menu that is <a href=#building-menus-and-toolbars title="building menus and toolbars">built</a>
- from the element.</p>
-
- </div>
-
-
- <div class=impl>
-
<h3 id=bindings><span class=secno>14.5 </span>Bindings</h3>
<h4 id=introduction-14><span class=secno>14.5.1 </span>Introduction</h4>
@@ -97678,6 +97572,11 @@
'inline-block' box rendered as a button whose contents are the
contents of the element.</p>
+ <p>When the <code><a href=#the-button-element>button</a></code> element's <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is
+ in the <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>Menu</a> state, the user agent is expected to
+ indicate that activating the element will display a menu, e.g. by displaying a down-pointing
+ triangle after the button's label.</p>
+
</div>
@@ -101235,7 +101134,7 @@
<td><a href=#global-attributes title="global attributes">globals</a>;
<code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code></td>
<td><code><a href=#htmltablecolelement>HTMLTableColElement</a></code></td>
- <tr><th><code><a href=#the-command-element>command</a></code></th>
+ <tr><th><code><a href=#the-menuitem-element>menuitem</a></code></th>
<td>Menu command</td>
<td><a href=#metadata-content title="Metadata content">metadata</a>;
<a href=#flow-content title="Flow content">flow</a>;
@@ -101244,14 +101143,14 @@
<a href=#phrasing-content title="Phrasing content">phrasing</a></td>
<td>empty</td>
<td><a href=#global-attributes title="global attributes">globals</a>;
- <code title=attr-command-type><a href=#attr-command-type>type</a></code>;
- <code title=attr-command-label><a href=#attr-command-label>label</a></code>;
- <code title=attr-command-icon><a href=#attr-command-icon>icon</a></code>;
- <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code>;
- <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>;
- <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code>;
- <code title=attr-command-command><a href=#attr-command-command>command</a></code></td>
- <td><code><a href=#htmlcommandelement>HTMLCommandElement</a></code></td>
+ <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code>;
+ <code title=attr-menuitem-label><a href=#attr-menuitem-label>label</a></code>;
+ <code title=attr-menuitem-icon><a href=#attr-menuitem-icon>icon</a></code>;
+ <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code>;
+ <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code>;
+ <code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>radiogroup</a></code>;
+ <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code></td>
+ <td><code><a href=#htmlmenuitemelement>HTMLMenuItemElement</a></code></td>
<tr><th><code><a href=#the-data-element>data</a></code></th>
<td>Machine-readable equivalent</td>
<td><a href=#flow-content title="Flow content">flow</a>;
@@ -101609,7 +101508,7 @@
<tr><th><code><a href=#the-li-element>li</a></code></th>
<td>List item</td>
<td>none</td>
- <td><code><a href=#the-ol-element>ol</a></code>; <code><a href=#the-ul-element>ul</a></code>; <code><a href=#the-menu-element>menu</a></code></td>
+ <td><code><a href=#the-ol-element>ol</a></code>; <code><a href=#the-ul-element>ul</a></code>; <code><a href=#the-menu-element>menu</a></code>*</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-li-value><a href=#attr-li-value>value</a></code>*</td>
@@ -101652,11 +101551,14 @@
<td><code><a href=#htmlelement>HTMLElement</a></code></td>
<tr><th><code><a href=#the-menu-element>menu</a></code></th>
<td>Menu of commands</td>
- <td><a href=#flow-content title="Flow content">flow</a>;
- <a href=#interactive-content title="Interactive content">interactive</a>*</td>
<td><a href=#flow-content title="Flow content">flow</a></td>
+ <td><a href=#flow-content title="Flow content">flow</a>;
+ <code><a href=#the-menu-element>menu</a></code>*</td>
<td><code><a href=#the-li-element>li</a></code>*;
- <a href=#flow-content title="Flow content">flow</a></td>
+ <a href=#flow-content title="Flow content">flow</a>*;
+ <code><a href=#the-menuitem-element>menuitem</a></code>*;
+ <code><a href=#the-hr-element>hr</a></code>*;
+ <code><a href=#the-menu-element>menu</a></code>*</td>
<td><a href=#global-attributes title="global attributes">globals</a>;
<code title=attr-menu-type><a href=#attr-menu-type>type</a></code>;
<code title=attr-menu-label><a href=#attr-menu-label>label</a></code></td>
@@ -102153,15 +102055,12 @@
</table><p class=tablenote><small>An asterisk (*) in a cell indicates that the actual rules are more
complicated than indicated in the table above.</small></p>
- <p>† Categories in the "Parents" column refer to parents that
- list the given categories in their content model, not to elements
- that themselves are in those categories. For example, the
- <code><a href=#the-a-element>a</a></code> element's "Parents" column says "phrasing", so any
- element whose content model contains the "phrasing" category could
- be a parent of an <code><a href=#the-a-element>a</a></code> element. Since the "flow" category
- includes all the "phrasing" elements, that means the
- <code><a href=#the-address-element>address</a></code> element could be a parent to an <code><a href=#the-a-element>a</a></code>
- element.</p>
+ <p>† Categories in the "Parents" column refer to parents that list the given categories in
+ their content model, not to elements that themselves are in those categories. For example, the
+ <code><a href=#the-a-element>a</a></code> element's "Parents" column says "phrasing", so any element whose content model
+ contains the "phrasing" category could be a parent of an <code><a href=#the-a-element>a</a></code> element. Since the "flow"
+ category includes all the "phrasing" elements, that means the <code><a href=#the-th-element>th</a></code> element could be a
+ parent to an <code><a href=#the-a-element>a</a></code> element.</p>
@@ -102178,7 +102077,6 @@
<tbody><tr><td> <a href=#metadata-content>Metadata content</a>
<td>
<code><a href=#the-base-element>base</a></code>;
- <code><a href=#the-command-element>command</a></code>;
<code><a href=#the-link-element>link</a></code>;
<code><a href=#the-meta-element>meta</a></code>;
<code><a href=#the-noscript-element>noscript</a></code>;
@@ -102205,7 +102103,6 @@
<code><a href=#the-canvas-element>canvas</a></code>;
<code><a href=#the-cite-element>cite</a></code>;
<code><a href=#the-code-element>code</a></code>;
- <code><a href=#the-command-element>command</a></code>;
<code><a href=#the-data-element>data</a></code>;
<code><a href=#the-datalist-element>datalist</a></code>;
<code><a href=#the-del-element>del</a></code>;
@@ -102312,7 +102209,6 @@
<code><a href=#the-canvas-element>canvas</a></code>;
<code><a href=#the-cite-element>cite</a></code>;
<code><a href=#the-code-element>code</a></code>;
- <code><a href=#the-command-element>command</a></code>;
<code><a href=#the-data-element>data</a></code>;
<code><a href=#the-datalist-element>datalist</a></code>;
<code><a href=#the-del-element>del</a></code>;
@@ -102388,7 +102284,6 @@
<code><a href=#the-audio-element>audio</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present);
<code><a href=#the-img-element>img</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present);
<code><a href=#the-input-element>input</a></code> (if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state);
- <code><a href=#the-menu-element>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state);
<code><a href=#the-object-element>object</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present)<!-- see also comment in <object> section -->;
<code><a href=#the-video-element>video</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present)
@@ -102537,7 +102432,7 @@
<code><a href=#the-audio-element>audio</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present);
<code><a href=#the-dl-element>dl</a></code> (if the element's children include at least one name-value group);
<code><a href=#the-input-element>input</a></code> (if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state);
- <code><a href=#the-menu-element>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state or the <a href=#list-state title="list state">list</a> state);
+ <code><a href=#the-menu-element>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state);
<code><a href=#the-ol-element>ol</a></code> (if the element's children include at least one <code><a href=#the-li-element>li</a></code> element);
<code><a href=#the-ul-element>ul</a></code> (if the element's children include at least one <code><a href=#the-li-element>li</a></code> element);
<a href=#text-content title="text content">Text</a> that is not <a href=#inter-element-whitespace>inter-element whitespace</a>
@@ -102621,7 +102516,7 @@
<td> Character encoding of the external script resource
<td> <a href=#preferred-mime-name>Preferred MIME name</a> of a character encoding*
<tr><th> <code title="">checked</code>
- <td> <code title=attr-command-checked><a href=#attr-command-checked>command</a></code>;
+ <td> <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>menuitem</a></code>;
<code title=attr-input-checked><a href=#attr-input-checked>input</a></code>
<td> Whether the command or control is checked
<td> <a href=#boolean-attribute>Boolean attribute</a>
@@ -102646,7 +102541,7 @@
<td> Number of columns that the cell is to span
<td> <a href=#valid-non-negative-integer>Valid non-negative integer</a> greater than zero
<tr><th> <code title="">command</code>
- <td> <code title=attr-command-command><a href=#attr-command-command>command</a></code>
+ <td> <code title=attr-menuitem-command><a href=#attr-menuitem-command>menuitem</a></code>
<td> Command definition
<td> <a href=#concept-id title=concept-id>ID</a>*
<tr><th> <code title="">content</code>
@@ -102719,7 +102614,7 @@
<td> <a href=#attribute-text>Text</a>*
<tr><th> <code title="">disabled</code>
<td> <code title=attr-fe-disabled><a href=#attr-fe-disabled>button</a></code>;
- <code title=attr-command-disabled><a href=#attr-command-disabled>command</a></code>;
+ <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>menuitem</a></code>;
<code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>fieldset</a></code>;
<code title=attr-fe-disabled><a href=#attr-fe-disabled>input</a></code>;
<code title=attr-fe-disabled><a href=#attr-fe-disabled>keygen</a></code>;
@@ -102838,7 +102733,7 @@
<td> Pragma directive
<td> <a href=#attribute-text>Text</a>*
<tr><th> <code title="">icon</code>
- <td> <code title=attr-command-icon><a href=#attr-command-icon>command</a></code>
+ <td> <code title=attr-menuitem-icon><a href=#attr-menuitem-icon>menuitem</a></code>
<td> Icon for the command
<td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
<tr><th> <code title="">id</code>
@@ -102902,7 +102797,7 @@
"<code title=attr-track-kind-chapters><a href=#attr-track-kind-chapters>chapters</a></code>";
"<code title=attr-track-kind-metadata><a href=#attr-track-kind-metadata>metadata</a></code>"
<tr><th> <code title="">label</code>
- <td> <code title=attr-command-label><a href=#attr-command-label>command</a></code>;
+ <td> <code title=attr-menuitem-label><a href=#attr-menuitem-label>menuitem</a></code>;
<code title=attr-menu-label><a href=#attr-menu-label>menu</a></code>;
<code title=attr-optgroup-label><a href=#attr-optgroup-label>optgroup</a></code>;
<code title=attr-option-label><a href=#attr-option-label>option</a></code>;
@@ -103054,7 +102949,7 @@
"<code title=attr-media-preload-metadata><a href=#attr-media-preload-metadata>metadata</a></code>";
"<code title=attr-media-preload-auto><a href=#attr-media-preload-auto>auto</a></code>"
<tr><th> <code title="">radiogroup</code>
- <td> <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>command</a></code>
+ <td> <code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>menuitem</a></code>
<td> Name of group of commands to treat as a radio button group
<td> <a href=#attribute-text>Text</a>
<tr><th> <code title="">readonly</code>
@@ -103204,7 +103099,7 @@
<td> Full term or expansion of abbreviation
<td> <a href=#attribute-text>Text</a>
<tr><th> <code title="">title</code>
- <td> <code title=attr-command-title><a href=#attr-command-title>command</a></code>
+ <td> <code title=attr-menuitem-title><a href=#attr-menuitem-title>menuitem</a></code>
<td> Hint describing the command
<td> <a href=#attribute-text>Text</a>
<tr><th> <code title="">title</code>
@@ -103231,13 +103126,14 @@
<td> Type of button
<td> "<code title=attr-button-type-submit><a href=#attr-button-type-submit>submit</a></code>";
"<code title=attr-button-type-reset><a href=#attr-button-type-reset>reset</a></code>";
- "<code title=attr-button-type-button><a href=#attr-button-type-button>button</a></code>"
+ "<code title=attr-button-type-button><a href=#attr-button-type-button>button</a></code>";
+ "<code title=attr-button-type-menu><a href=#attr-button-type-menu>menu</a></code>"
<tr><th> <code title="">type</code>
- <td> <code title=attr-command-type><a href=#attr-command-type>command</a></code>
+ <td> <code title=attr-menuitem-type><a href=#attr-menuitem-type>menuitem</a></code>
<td> Type of command
- <td> "<code title=attr-command-type-keyword-command><a href=#attr-command-type-keyword-command>command</a></code>";
- "<code title=attr-command-type-keyword-checkbox><a href=#attr-command-type-keyword-checkbox>checkbox</a></code>";
- "<code title=attr-command-type-keyword-radio><a href=#attr-command-type-keyword-radio>radio</a></code>"
+ <td> "<code title=attr-menuitem-type-keyword-command><a href=#attr-menuitem-type-keyword-command>command</a></code>";
+ "<code title=attr-menuitem-type-keyword-checkbox><a href=#attr-menuitem-type-keyword-checkbox>checkbox</a></code>";
+ "<code title=attr-menuitem-type-keyword-radio><a href=#attr-menuitem-type-keyword-radio>radio</a></code>"
<tr><th> <code title="">type</code>
<td> <code title=attr-embed-type><a href=#attr-embed-type>embed</a></code>;
<code title=attr-object-type><a href=#attr-object-type>object</a></code>;
@@ -103253,7 +103149,7 @@
<tr><th> <code title="">type</code>
<td> <code title=attr-menu-type><a href=#attr-menu-type>menu</a></code>
<td> Type of menu
- <td> "<code title="context menu state"><a href=#context-menu-state>context</a></code>"; "<code title="toolbar state"><a href=#toolbar-state>toolbar</a></code>"
+ <td> "<code title="popup menu state"><a href=#popup-menu-state>popup</a></code>"; "<code title="toolbar state"><a href=#toolbar-state>toolbar</a></code>"
<tr><th> <code title="">typemustmatch</code>
<td> <code title=attr-object-typemustmatch><a href=#attr-object-typemustmatch>object</a></code>
<td> Whether the <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute and the <a href=#content-type>Content-Type</a> value need to match for the resource to be used
@@ -103789,8 +103685,8 @@
<tr><td> <code><a href=#the-colgroup-element>colgroup</a></code>
<td> <code><a href=#htmltablecolelement>HTMLTableColElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
- <tr><td> <code><a href=#the-command-element>command</a></code>
- <td> <code><a href=#htmlcommandelement>HTMLCommandElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+ <tr><td> <code><a href=#the-menuitem-element>menuitem</a></code>
+ <td> <code><a href=#htmlmenuitemelement>HTMLMenuItemElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
<tr><td> <code><a href=#the-data-element>data</a></code>
<td> <code><a href=#htmldataelement>HTMLDataElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
@@ -104098,7 +103994,6 @@
<li><code><a href=#htmlbodyelement>HTMLBodyElement</a></code>
<li><code><a href=#htmlbuttonelement>HTMLButtonElement</a></code>
<li><code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>
- <li><code><a href=#htmlcommandelement>HTMLCommandElement</a></code>
<li><code><a href=#htmldlistelement>HTMLDListElement</a></code>
<li><code><a href=#htmldataelement>HTMLDataElement</a></code>
<li><code><a href=#htmldatalistelement>HTMLDataListElement</a></code>
@@ -104130,6 +104025,7 @@
<li><code><a href=#htmlmarqueeelement>HTMLMarqueeElement</a></code>
<li><code><a href=#htmlmediaelement>HTMLMediaElement</a></code>
<li><code><a href=#htmlmenuelement>HTMLMenuElement</a></code>
+ <li><code><a href=#htmlmenuitemelement>HTMLMenuItemElement</a></code>
<li><code><a href=#htmlmetaelement>HTMLMetaElement</a></code>
<li><code><a href=#htmlmeterelement>HTMLMeterElement</a></code>
<li><code><a href=#htmlmodelement>HTMLModElement</a></code>
Modified: images/content-venn.svg
===================================================================
--- images/content-venn.svg 2012-12-28 02:06:14 UTC (rev 7601)
+++ images/content-venn.svg 2012-12-29 01:23:20 UTC (rev 7602)
@@ -37,7 +37,6 @@
<li><code>canvas</code></li>
<li><code>cite</code></li>
<li><code>code</code></li>
- <li><code>command</code></li>
<li><code>data</code></li>
<li><code>date</code></li>
<li><code>datalist</code></li>
@@ -154,7 +153,6 @@
<h1>Metadata content</h1>
<ul>
<li><code>base</code></li>
- <li><code>command</code></li>
<li><code>link</code></li>
<li><code>meta</code></li>
<li><code>noscript</code></li>
@@ -182,7 +180,6 @@
<li><code>input</code>*</li>
<li><code>keygen</code></li>
<li><code>label</code></li>
- <li><code>menu</code>*</li>
<li><code>object</code>*</li>
<li><code>select</code></li>
<li><code>textarea</code></li>
@@ -211,7 +208,6 @@
<li><code>canvas</code></li>
<li><code>cite</code></li>
<li><code>code</code></li>
- <li><code>command</code></li>
<li><code>data</code></li>
<li><code>date</code></li>
<li><code>datalist</code></li>
Modified: index
===================================================================
--- index 2012-12-28 02:06:14 UTC (rev 7601)
+++ index 2012-12-29 01:23:20 UTC (rev 7602)
@@ -248,7 +248,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 28 December 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 29 December 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>
@@ -771,28 +771,28 @@
<ol>
<li><a href=#the-details-element><span class=secno>4.11.1 </span>The <code>details</code> element</a></li>
<li><a href=#the-summary-element><span class=secno>4.11.2 </span>The <code>summary</code> element</a></li>
- <li><a href=#the-command-element><span class=secno>4.11.3 </span>The <code>command</code> element</a></li>
- <li><a href=#the-menu-element><span class=secno>4.11.4 </span>The <code>menu</code> element</a>
+ <li><a href=#the-menu-element><span class=secno>4.11.3 </span>The <code>menu</code> element</a></li>
+ <li><a href=#the-menuitem-element><span class=secno>4.11.4 </span>The <code>menuitem</code> element</a></li>
+ <li><a href=#context-menus><span class=secno>4.11.5 </span>Context menus</a>
<ol>
- <li><a href=#menus-intro><span class=secno>4.11.4.1 </span>Introduction</a></li>
- <li><a href=#building-menus-and-toolbars><span class=secno>4.11.4.2 </span>Building menus and toolbars</a></li>
- <li><a href=#context-menus><span class=secno>4.11.4.3 </span>Context menus</a></li>
- <li><a href=#toolbars><span class=secno>4.11.4.4 </span>Toolbars</a></ol></li>
- <li><a href=#commands><span class=secno>4.11.5 </span>Commands</a>
+ <li><a href=#declaring-a-context-menu><span class=secno>4.11.5.1 </span>Declaring a context menu</a></li>
+ <li><a href=#processing-model-2><span class=secno>4.11.5.2 </span>Processing model</a></ol></li>
+ <li><a href=#commands><span class=secno>4.11.6 </span>Commands</a>
<ol>
- <li><a href=#using-the-a-element-to-define-a-command><span class=secno>4.11.5.1 </span>Using the <code>a</code> element to define a command</a></li>
- <li><a href=#using-the-button-element-to-define-a-command><span class=secno>4.11.5.2 </span>Using the <code>button</code> element to define a command</a></li>
- <li><a href=#using-the-input-element-to-define-a-command><span class=secno>4.11.5.3 </span>Using the <code>input</code> element to define a command</a></li>
- <li><a href=#using-the-option-element-to-define-a-command><span class=secno>4.11.5.4 </span>Using the <code>option</code> element to define a command</a></li>
- <li><a href=#using-the-command-element-to-define-a-command><span class=secno>4.11.5.5 </span>Using the <code>command</code> element to define
+ <li><a href=#facets-0><span class=secno>4.11.6.1 </span>Facets</a></li>
+ <li><a href=#using-the-a-element-to-define-a-command><span class=secno>4.11.6.2 </span>Using the <code>a</code> element to define a command</a></li>
+ <li><a href=#using-the-button-element-to-define-a-command><span class=secno>4.11.6.3 </span>Using the <code>button</code> element to define a command</a></li>
+ <li><a href=#using-the-input-element-to-define-a-command><span class=secno>4.11.6.4 </span>Using the <code>input</code> element to define a command</a></li>
+ <li><a href=#using-the-option-element-to-define-a-command><span class=secno>4.11.6.5 </span>Using the <code>option</code> element to define a command</a></li>
+ <li><a href=#using-the-menuitem-element-to-define-a-command><span class=secno>4.11.6.6 </span>Using the <code>menuitem</code> element to define
a command</a></li>
- <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></li>
- <li><a href=#the-dialog-element><span class=secno>4.11.6 </span>The <code>dialog</code> element</a>
+ <li><a href=#using-the-command-attribute-on-menuitem-elements-to-define-a-command-indirectly><span class=secno>4.11.6.7 </span>Using the <code title=attr-menuitem-command>command</code> attribute on <code>menuitem</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.6.8 </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.6.9 </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.6.10 </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.7 </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=#anchor-points><span class=secno>4.11.7.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>
@@ -946,7 +946,7 @@
<ol>
<li><a href=#introduction-6><span class=secno>7.1.1 </span>Introduction</a></li>
<li><a href=#enabling-and-disabling-scripting><span class=secno>7.1.2 </span>Enabling and disabling scripting</a></li>
- <li><a href=#processing-model-2><span class=secno>7.1.3 </span>Processing model</a>
+ <li><a href=#processing-model-3><span class=secno>7.1.3 </span>Processing model</a>
<ol>
<li><a href=#definitions-0><span class=secno>7.1.3.1 </span>Definitions</a></li>
<li><a href=#calling-scripts><span class=secno>7.1.3.2 </span>Calling scripts</a></li>
@@ -958,7 +958,7 @@
<li><a href=#event-loops><span class=secno>7.1.4 </span>Event loops</a>
<ol>
<li><a href=#definitions-1><span class=secno>7.1.4.1 </span>Definitions</a></li>
- <li><a href=#processing-model-3><span class=secno>7.1.4.2 </span>Processing model</a></li>
+ <li><a href=#processing-model-4><span class=secno>7.1.4.2 </span>Processing model</a></li>
<li><a href=#generic-task-sources><span class=secno>7.1.4.3 </span>Generic task sources</a></ol></li>
<li><a href=#javascript-protocol><span class=secno>7.1.5 </span>The <code title="">javascript:</code> URL scheme</a></li>
<li><a href=#events><span class=secno>7.1.6 </span>Events</a>
@@ -1003,7 +1003,7 @@
<ol>
<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-4><span class=secno>8.5.3 </span>Processing model</a></ol></li>
+ <li><a href=#processing-model-5><span class=secno>8.5.3 </span>Processing model</a></ol></li>
<li><a href=#editing-0><span class=secno>8.6 </span>Editing</a>
<ol>
<li><a href=#contenteditable><span class=secno>8.6.1 </span>Making document regions editable: The <code title=attr-contenteditable>contenteditable</code> content
@@ -1052,7 +1052,7 @@
<li><a href=#shared-workers-and-the-sharedworkerglobalscope-interface><span class=secno>9.2.1.3 </span>Shared workers and the <code>SharedWorkerGlobalScope</code> interface</a></ol></li>
<li><a href=#the-event-loop><span class=secno>9.2.2 </span>The event loop</a></li>
<li><a href="#the-worker's-lifetime"><span class=secno>9.2.3 </span>The worker's lifetime</a></li>
- <li><a href=#processing-model-5><span class=secno>9.2.4 </span>Processing model</a></li>
+ <li><a href=#processing-model-6><span class=secno>9.2.4 </span>Processing model</a></li>
<li><a href=#runtime-script-errors-0><span class=secno>9.2.5 </span>Runtime script errors</a></li>
<li><a href=#creating-workers><span class=secno>9.2.6 </span>Creating workers</a>
<ol>
@@ -1072,7 +1072,7 @@
<ol>
<li><a href=#server-sent-events-intro><span class=secno>10.2.1 </span>Introduction</a></li>
<li><a href=#the-eventsource-interface><span class=secno>10.2.2 </span>The <code>EventSource</code> interface</a></li>
- <li><a href=#processing-model-6><span class=secno>10.2.3 </span>Processing model</a></li>
+ <li><a href=#processing-model-7><span class=secno>10.2.3 </span>Processing model</a></li>
<li><a href=#parsing-an-event-stream><span class=secno>10.2.4 </span>Parsing an event stream</a></li>
<li><a href=#event-stream-interpretation><span class=secno>10.2.5 </span>Interpreting an event stream</a></li>
<li><a href=#notes><span class=secno>10.2.6 </span>Notes</a></li>
@@ -1312,8 +1312,7 @@
<li><a href=#embedded-content-2><span class=secno>14.4.1 </span>Embedded content</a></li>
<li><a href=#images-0><span class=secno>14.4.2 </span>Images</a></li>
<li><a href=#attributes-for-embedded-content-and-images><span class=secno>14.4.3 </span>Attributes for embedded content and images</a></li>
- <li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></li>
- <li><a href=#toolbars-0><span class=secno>14.4.5 </span>Toolbars</a></ol></li>
+ <li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></ol></li>
<li><a href=#bindings><span class=secno>14.5 </span>Bindings</a>
<ol>
<li><a href=#introduction-14><span class=secno>14.5.1 </span>Introduction</a></li>
@@ -11855,7 +11854,6 @@
<!-- when updating this also update the category index -->
<ul class="brief category-list"><li><code><a href=#the-base-element>base</a></code></li>
- <li><code><a href=#the-command-element>command</a></code></li>
<li><code><a href=#the-link-element>link</a></code></li>
<li><code><a href=#the-meta-element>meta</a></code></li>
<li><code><a href=#the-noscript-element>noscript</a></code></li>
@@ -11917,7 +11915,6 @@
<li><code><a href=#the-canvas-element>canvas</a></code></li>
<li><code><a href=#the-cite-element>cite</a></code></li>
<li><code><a href=#the-code-element>code</a></code></li>
- <li><code><a href=#the-command-element>command</a></code></li>
<li><code><a href=#the-data-element>data</a></code></li>
<li><code><a href=#the-datalist-element>datalist</a></code></li>
<li><code><a href=#the-del-element>del</a></code></li>
@@ -12039,7 +12036,6 @@
<li><code><a href=#the-canvas-element>canvas</a></code></li>
<li><code><a href=#the-cite-element>cite</a></code></li>
<li><code><a href=#the-code-element>code</a></code></li>
- <li><code><a href=#the-command-element>command</a></code></li>
<li><code><a href=#the-data-element>data</a></code></li>
<li><code><a href=#the-datalist-element>datalist</a></code></li>
<li><code><a href=#the-del-element>del</a></code></li>
@@ -12181,7 +12177,6 @@
<li><code><a href=#the-input-element>input</a></code> (if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state)</li>
<li><code><a href=#the-keygen-element>keygen</a></code></li>
<li><code><a href=#the-label-element>label</a></code></li>
- <li><code><a href=#the-menu-element>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state)</li>
<li><code><a href=#the-object-element>object</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present)<!-- see also comment in <object> section --></li>
<li><code><a href=#the-select-element>select</a></code></li>
<li><code><a href=#the-textarea-element>textarea</a></code></li>
@@ -12376,7 +12371,7 @@
<li><code><a href=#the-map-element>map</a></code></li>
<li><code><a href=#the-mark-element>mark</a></code></li>
<li><code><a href=#math>math</a></code></li>
- <li><code><a href=#the-menu-element>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state or the <a href=#list-state title="list state">list</a> state)</li>
+ <li><code><a href=#the-menu-element>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state)</li>
<li><code><a href=#the-meter-element>meter</a></code></li>
<li><code><a href=#the-nav-element>nav</a></code></li>
<li><code><a href=#the-object-element>object</a></code></li>
@@ -12949,15 +12944,9 @@
<tr><td><code><a href=#the-link-element>link</a></code> element that creates a <a href=#hyperlink>hyperlink</a>
<td><code title=attr-aria-role-link>link</code> role
- <tr><td><code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#context-menu-state title="context menu state">context menu</a> state
+ <tr><td><code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state
<td><a href=#concept-role-none title=concept-role-none>No role</a>
- <tr><td><code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
- <td><code title=attr-aria-role-menu>menu</code> role
-
- <tr><td><code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state
- <td><code title=attr-aria-role-toolbar>toolbar</code> role
-
<tr><td><code><a href=#the-meta-element>meta</a></code> element
<td><a href=#concept-role-none title=concept-role-none>No role</a>
@@ -13012,15 +13001,6 @@
<tr><td><code><a href=#the-title-element>title</a></code> element
<td><a href=#concept-role-none title=concept-role-none>No role</a>
- <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "checkbox", and that is a descendant of a <code><a href=#the-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
- <td><code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "true" if the command's <a href=#command-facet-checkedstate title=command-facet-checkedstate>Checked State</a> facet is true, and "false" otherwise
-
- <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "command", and that is a descendant of a <code><a href=#the-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
- <td><code title=attr-aria-role-menuitem>menuitem</code> role
-
- <tr><td>An element that <a href=#concept-command title=concept-command>defines a command</a>, whose <a href=#command-facet-type title=command-facet-type>Type</a> facet is "radio", and that is a descendant of a <code><a href=#the-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#list-state title="list state">list</a> state
- <td><code title=attr-aria-role-menuitemradio>menuitemradio</code> role, with the <code title=attr-aria-checked>aria-checked</code> state set to "true" if the command's <a href=#command-facet-checkedstate title=command-facet-checkedstate>Checked State</a> facet is true, and "false" otherwise
-
<tr><td>Element that is <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>
<td>The <code title=attr-aria-disabled>aria-disabled</code> state set to "true"
@@ -13051,7 +13031,7 @@
<tbody><tr><td><code><a href=#the-a-element>a</a></code> element that creates a <a href=#hyperlink>hyperlink</a>
<td><code title=attr-aria-role-link>link</code> role
- <td>Role must be either <code title=attr-aria-role-link>link</code>, <code title=attr-aria-role-button>button</code><!--!-->, <code title=attr-aria-role-checkbox>checkbox</code><!--!-->, <code title=attr-aria-role-menuitem>menuitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code><!--!-->, <code title=attr-aria-role-menuitemradio>menuitemradio</code><!--!-->, <code title=attr-aria-role-tab>tab</code>, or <code title=attr-aria-role-treeitem>treeitem</code><!--!-->
+ <td>Role must be either <code title=attr-aria-role-link>link</code>, <code title=attr-aria-role-menuitem>menuitem</code>, <code title=attr-aria-role-tab>tab</code>, or <code title=attr-aria-role-treeitem>treeitem</code>
<tr><td><code><a href=#the-address-element>address</a></code> element
<td><a href=#concept-role-none title=concept-role-none>No role</a>
@@ -13071,7 +13051,7 @@
<tr><td><code><a href=#the-button-element>button</a></code> element
<td><code title=attr-aria-role-button>button</code> role
- <td>Role must be either <code title=attr-aria-role-button>button</code>, <code title=attr-aria-role-link>link</code><!--!-->, <code title=attr-aria-role-menuitem>menuitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code><!--!-->, <code title=attr-aria-role-menuitemradio>menuitemradio</code><!--!-->, <code title=attr-aria-role-radio>radio</code><!--!-->
+ <td>Role must be either <code title=attr-aria-role-button>button</code>, <code title=attr-aria-role-menuitem>menuitem</code>
<tr><td><code><a href=#the-details-element>details</a></code> element
<td><code title=attr-aria-role-group>group</code> role
@@ -13143,7 +13123,7 @@
<tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#button-state-(type=button)" title=attr-input-type-button>Button</a> state
<td><code title=attr-aria-role-button>button</code> role
- <td>Role must be either <code title=attr-aria-role-button>button</code>, <code title=attr-aria-role-link>link</code><!--!-->, <code title=attr-aria-role-menuitem>menuitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code><!--!-->, <code title=attr-aria-role-menuitemradio>menuitemradio</code><!--!-->, <code title=attr-aria-role-radio>radio</code><!--!-->
+ <td>Role must be either <code title=attr-aria-role-button>button</code>, <code title=attr-aria-role-menuitem>menuitem</code>
<tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#checkbox-state-(type=checkbox)" title=attr-input-type-checkbox>Checkbox</a> state
<td><code title=attr-aria-role-checkbox>checkbox</code> role
@@ -13151,7 +13131,7 @@
<tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a> state
<td><code title=attr-aria-role-button>button</code> role
- <td>Role must be either <code title=attr-aria-role-button>button</code>, <code title=attr-aria-role-link>link</code><!--!-->, <code title=attr-aria-role-menuitem>menuitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code><!--!-->, <code title=attr-aria-role-menuitemradio>menuitemradio</code><!--!-->, <code title=attr-aria-role-radio>radio</code><!--!-->
+ <td>Role must be either <code title=attr-aria-role-button>button</code>, <code title=attr-aria-role-menuitem>menuitem</code>
<tr><td><code><a href=#the-input-element>input</a></code> element with a <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#radio-button-state-(type=radio)" title=attr-input-type-radio>Radio Button</a> state
<td><code title=attr-aria-role-radio>radio</code> role
@@ -13161,13 +13141,17 @@
<td><code title=attr-aria-role-listitem>listitem</code> role
<td>Role must be either <code title=attr-aria-role-listitem>listitem</code>, <code title=attr-aria-role-menuitemcheckbox>menuitemcheckbox</code>, <code title=attr-aria-role-menuitemradio>menuitemradio</code>, <code title=attr-aria-role-option>option</code>, <code title=attr-aria-role-tab>tab</code>, or <code title=attr-aria-role-treeitem>treeitem</code>
+ <tr><td><code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state
+ <td><code title=attr-aria-role-toolbar>toolbar</code> role
+ <td>Role must be either <code title=attr-aria-role-directory>directory</code>, <code title=attr-aria-role-list>list</code>, <code title=attr-aria-role-listbox>listbox</code>, <code title=attr-aria-role-menu>menu</code>, <code title=attr-aria-role-menubar>menubar</code>, <code title=attr-aria-role-tablist>tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, or <code title=attr-aria-role-tree>tree</code>
+
<tr><td><code><a href=#the-object-element>object</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>
<tr><td><code><a href=#the-ol-element>ol</a></code> element
<td><code title=attr-aria-role-list>list</code> role
- <td>Role must be either <code title=attr-aria-role-directory>directory</code>, <code title=attr-aria-role-list>list</code>, <code title=attr-aria-role-listbox>listbox</code>, <code title=attr-aria-role-menu>menu</code>, <code title=attr-aria-role-menubar>menubar</code>, <code title=attr-aria-role-tablist>tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, <code title=attr-aria-role-tree>tree</code>
+ <td>Role must be either <code title=attr-aria-role-directory>directory</code>, <code title=attr-aria-role-list>list</code>, <code title=attr-aria-role-listbox>listbox</code>, <code title=attr-aria-role-menu>menu</code>, <code title=attr-aria-role-menubar>menubar</code>, <code title=attr-aria-role-tablist>tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, or <code title=attr-aria-role-tree>tree</code>
<tr><td><code><a href=#the-output-element>output</a></code> element
<td><code title=attr-aria-role-status>status</code> role
@@ -19772,7 +19756,7 @@
<dt><a href=#element-dfn-contexts title=element-dfn-contexts>Contexts in which this element can be used</a>:</dt>
<dd>Inside <code><a href=#the-ol-element>ol</a></code> elements.</dd>
<dd>Inside <code><a href=#the-ul-element>ul</a></code> elements.</dd>
- <dd>Inside <code><a href=#the-menu-element>menu</a></code> elements.</dd>
+ <dd>Inside <code><a href=#the-menu-element>menu</a></code> elements whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state.</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>
@@ -19858,12 +19842,6 @@
</figure></pre>
</div>
- <p class=note>If the <code><a href=#the-li-element>li</a></code> element is the child of a
- <code><a href=#the-menu-element>menu</a></code> element and itself has a child that defines a
- <a href=#concept-command title=concept-command>command</a>, then the
- <code><a href=#the-li-element>li</a></code> element will match the <code title=selector-enabled><a href=#selector-enabled>:enabled</a></code> and <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code> pseudo-classes in the
- same way as the first such child element does.</p>
-
<p class=note>While it is conforming to include heading elements
(e.g. <code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code>) inside <code><a href=#the-li-element>li</a></code> elements, it likely
does not convey the semantics that the author intended. A heading
@@ -51998,6 +51976,7 @@
<dd><code title=attr-fe-name><a href=#attr-fe-name>name</a></code></dd>
<dd><code title=attr-button-type><a href=#attr-button-type>type</a></code></dd>
<dd><code title=attr-button-value><a href=#attr-button-value>value</a></code></dd>
+ <dd><code title=attr-button-menu><a href=#attr-button-menu>menu</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=htmlbuttonelement>HTMLButtonElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
@@ -52012,6 +51991,7 @@
attribute DOMString <a href=#dom-fe-name title=dom-fe-name>name</a>;
attribute DOMString <a href=#dom-button-type title=dom-button-type>type</a>;
attribute DOMString <a href=#dom-button-value title=dom-button-value>value</a>;
+ attribute <a href=#htmlmenuelement>HTMLMenuElement</a>? <a href=#dom-button-menu title=dom-button-menu>menu</a>;
readonly attribute boolean <a href=#dom-cva-willvalidate title=dom-cva-willValidate>willValidate</a>;
readonly attribute <a href=#validitystate>ValidityState</a> <a href=#dom-cva-validity title=dom-cva-validity>validity</a>;
@@ -52045,6 +52025,9 @@
<tr><td><dfn id=attr-button-type-button title=attr-button-type-button><code>button</code></dfn>
<td><a href=#attr-button-type-button-state title=attr-button-type-button-state>Button</a>
<td>Does nothing.
+ <tr><td><dfn id=attr-button-type-menu title=attr-button-type-menu><code>menu</code></dfn>
+ <td><a href=#attr-button-type-menu-state title=attr-button-type-menu-state>Menu</a>
+ <td>Shows a menu.
</table><p>The <i>missing value default</i> is the <a href=#attr-button-type-submit-state title=attr-button-type-submit-state>Submit Button</a>
state.</p>
@@ -52054,8 +52037,9 @@
<div class=impl>
- <p><strong>Constraint validation</strong>: If the <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is in the <a href=#attr-button-type-reset-state title=attr-button-type-reset-state>Reset Button</a> state or
+ <p><strong>Constraint validation</strong>: If the <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is in the <a href=#attr-button-type-reset-state title=attr-button-type-reset-state>Reset Button</a> state,
the <a href=#attr-button-type-button-state title=attr-button-type-button-state>Button</a> state,
+ or the <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>Menu</a> state,
the element is <a href=#barred-from-constraint-validation>barred from constraint validation</a>.</p>
<p>When a <code><a href=#the-button-element>button</a></code> element is not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>, its <a href=#activation-behavior>activation
@@ -52078,6 +52062,23 @@
<dd><p>Do nothing.</dd>
+ <dt> <dfn id=attr-button-type-menu-state title=attr-button-type-menu-state>Menu</dfn>
+
+ <dd>
+
+ <p>The element must follow these steps:</p>
+
+ <ol><li><p>Let <var title="">menu</var> be the element's <a href=#designated-pop-up-menu>designated pop-up menu</a>, if
+ any. If there isn't one, then abort these steps.</li>
+
+ <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title=event-show>show</code> that is
+ cancelable at <var title="">menu</var>. <!-- v2: include modifier key information --></li>
+
+ <li><p>If the event is not canceled, then <a href=#construct-and-show-a-menu title="construct and show a menu">construct and
+ show</a> the menu for <var title="">menu</var>.</li>
+
+ </ol></dd>
+
</dl></div>
<p>The <code title=attr-fae-form><a href=#attr-fae-form>form</a></code> attribute is used to
@@ -52108,12 +52109,24 @@
form submission if the button itself was used to initiate the form
submission.</p>
+ <hr><p>If the element's <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is in the <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>Menu</a> state, the <dfn id=attr-button-menu title=attr-button-menu><code>menu</code></dfn> attribute must be specified to give the element's
+ menu. The value must be the <a href=#concept-id title=concept-id>ID</a> of a <code><a href=#the-menu-element>menu</a></code> element in
+ the same <a href=#home-subtree>home subtree</a> whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in
+ the <a href=#popup-menu-state title="popup menu state">popup menu</a> state. The attribute must not be specified if
+ the element's <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is not in the <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>Menu</a> state.</p>
+
<div class=impl>
- <p>The <dfn id=dom-button-value title=dom-button-value><code>value</code></dfn> IDL
- attribute must <a href=#reflect>reflect</a> the content attribute of the
- same name.</p>
+ <p>A <code><a href=#the-button-element>button</a></code> element's <dfn id=designated-pop-up-menu>designated pop-up menu</dfn> is the first element in the
+ <code><a href=#the-button-element>button</a></code>'s <a href=#home-subtree>home subtree</a> whose ID is that given by the <code><a href=#the-button-element>button</a></code>
+ element's <code title=attr-button-menu><a href=#attr-button-menu>menu</a></code> attribute, if there is such an element and
+ its <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu
+ state">popup menu</a> state; otherwise, the element has no <a href=#designated-pop-up-menu>designated pop-up
+ menu</a>.</p>
+ <hr><p>The <dfn id=dom-button-value title=dom-button-value><code>value</code></dfn> and <dfn id=dom-button-menu title=dom-button-menu><code>menu</code></dfn> IDL attributes must <a href=#reflect>reflect</a> the
+ content attributes of the same name.</p>
+
<p>The <dfn id=dom-button-type title=dom-button-type><code>type</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the content attribute of the
same name, <a href=#limited-to-only-known-values>limited to only known values</a>.</p>
@@ -57965,527 +57978,481 @@
+ <h4 id=the-menu-element><span class=secno>4.11.3 </span>The <dfn id=menus><code>menu</code></dfn> element</h4>
- <h4 id=the-command-element><span class=secno>4.11.3 </span>The <dfn id=the-command><code>command</code></dfn> element</h4>
-
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
- <dd><a href=#metadata-content>Metadata content</a>.</dd>
<dd><a href=#flow-content>Flow content</a>.</dd>
- <dd><a href=#phrasing-content>Phrasing content</a>.</dd>
+ <dd>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state: <a href=#palpable-content>Palpable content</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=#metadata-content>metadata content</a> is expected.</dd>
- <dd>Where <a href=#phrasing-content>phrasing content</a> is expected.</dd>
+ <dd>Where <a href=#flow-content>flow content</a> is expected.</dd>
+ <dd>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state: as the child of a <code><a href=#the-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state.</dd>
<dt><a href=#element-dfn-content-model title=element-dfn-content-model>Content model</a>:</dt>
- <dd>Empty.</dd>
+ <dd>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state: either zero or more <code><a href=#the-li-element>li</a></code> elements, or <a href=#flow-content>flow content</a>.</dd>
+ <dd>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state: in any order, zero or more <code><a href=#the-menuitem-element>menuitem</a></code> elements, zero or more <code><a href=#the-hr-element>hr</a></code> elements, and zero or more <code><a href=#the-menu-element>menu</a></code> elements whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attributes are in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state.</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-command-type><a href=#attr-command-type>type</a></code></dd>
- <dd><code title=attr-command-label><a href=#attr-command-label>label</a></code></dd>
- <dd><code title=attr-command-icon><a href=#attr-command-icon>icon</a></code></dd>
- <dd><code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code></dd>
- <dd><code title=attr-command-checked><a href=#attr-command-checked>checked</a></code></dd>
- <dd><code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code></dd>
- <!--<dd><code title="attr-command-default">default</code></dd>-->
- <dd><code title=attr-command-command><a href=#attr-command-command>command</a></code></dd>
- <dd>Also, the <code title=attr-command-title><a href=#attr-command-title>title</a></code> attribute has special semantics on this element.</dd>
+ <dd><code title=attr-menu-type><a href=#attr-menu-type>type</a></code></dd>
+ <dd><code title=attr-menu-label><a href=#attr-menu-label>label</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=htmlcommandelement>HTMLCommandElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
- attribute DOMString <a href=#dom-command-type title=dom-command-type>type</a>;
- attribute DOMString <a href=#dom-command-label title=dom-command-label>label</a>;
- attribute DOMString <a href=#dom-command-icon title=dom-command-icon>icon</a>;
- attribute boolean <a href=#dom-command-disabled title=dom-command-disabled>disabled</a>;
- attribute boolean <a href=#dom-command-checked title=dom-command-checked>checked</a>;
- attribute DOMString <a href=#dom-command-radiogroup title=dom-command-radiogroup>radiogroup</a>;<!--
- attribute boolean <span title="dom-command-default">default</span>;-->
- readonly attribute <a href=#htmlelement>HTMLElement</a>? <a href=#dom-command-command title=dom-command-command>command</a>;
+<pre class=idl>interface <dfn id=htmlmenuelement>HTMLMenuElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ attribute DOMString <a href=#dom-menu-type title=dom-menu-type>type</a>;
+ attribute DOMString <a href=#dom-menu-label title=dom-menu-label>label</a>;
};</pre>
- </dd>
- </dl><!--TOPIC:HTML--><p>The <code><a href=#the-command-element>command</a></code> element represents a command that the user
- can invoke.</p>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-menu-element>menu</a></code> element represents a list of commands.</p>
- <p>A command can be explicitly part of a context menu or toolbar,
- using the <code><a href=#the-menu-element>menu</a></code> element. It can also be put anywhere
- else on a page, either just to define a keyboard shortcut, or to
- define a command that is then referenced from other
- <code><a href=#the-command-element>command</a></code> elements.</p>
+ <!-- v2 idea: <menu> should get an icon, like <command> -->
- <p>A <code><a href=#the-command-element>command</a></code> element that uses the
- <code title=attr-command-type><a href=#attr-command-type>type</a></code>,
- <code title=attr-command-label><a href=#attr-command-label>label</a></code>,
- <code title=attr-command-icon><a href=#attr-command-icon>icon</a></code>,
- <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code>,
- <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>,
- <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code>,
- <!--<code title="attr-command-default">default</code>,--> and
- <code title=attr-title><a href=#attr-title>title</a></code> attributes defines a new
- command. A <code><a href=#the-command-element>command</a></code> element that uses the <code title=attr-command-command><a href=#attr-command-command>command</a></code> <em>attribute</em>
- defines a command by reference to another one. This allows authors
- to define a command once, and set its state (e.g. whether it is
- active or disabled) in one place, and have all references to that
- command in the user interface change at the same time.</p>
+ <p>The <dfn id=attr-menu-type title=attr-menu-type><code>type</code></dfn> attribute is an <a href=#enumerated-attribute>enumerated
+ attribute</a> indicating the kind of menu being declared. The attribute has two states. The
+ <code title=attr-menu-type-popup>popup</code> keyword maps to the <dfn id=popup-menu-state title="popup menu
+ state">popup menu</dfn> state, in which the element is declaring a context menu or the menu for a
+ <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>menu button</a>. The <code title=attr-menu-type-toolbar>toolbar</code> keyword maps to the <dfn id=toolbar-state title="toolbar
+ state">toolbar</dfn> state, in which the element is declaring a toolbar. The attribute may also be
+ omitted. The <i>missing value default</i> is the <a href=#popup-menu-state title="popup menu state">popup menu</a>
+ state if the parent element is a <code><a href=#the-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup
+ menu</a> state; otherwise, it is the <a href=#toolbar-state title="toolbar state">toolbar</a> state.</p>
- <hr><p>The <dfn id=attr-command-type title=attr-command-type><code>type</code></dfn>
- attribute indicates the kind of command: either a normal command
- with an associated action, or a state or option that can be toggled,
- or a selection of one item from a list of items.</p>
+ <p>If a <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the
+ <a href=#popup-menu-state title="popup menu state">popup menu</a> state, then the element <a href=#represents>represents</a>
+ the commands of a popup menu, and the user can only examine and interact with the commands if that
+ popup menu is activated through some other element, either via the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> attribute or the <code><a href=#the-button-element>button</a></code> element's <code title=attr-button-menu><a href=#attr-button-menu>menu</a></code> attribute.</p>
- <p>The attribute is an <a href=#enumerated-attribute>enumerated attribute</a> with three
- keywords and states. The "<dfn id=attr-command-type-keyword-command title=attr-command-type-keyword-command><code>command</code></dfn>"
- keyword maps to the <a href=#attr-command-type-state-command title=attr-command-type-state-command>Command</a> state, the
- "<dfn id=attr-command-type-keyword-checkbox title=attr-command-type-keyword-checkbox><code>checkbox</code></dfn>"
- keyword maps to the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state, and
- the "<dfn id=attr-command-type-keyword-radio title=attr-command-type-keyword-radio><code>radio</code></dfn>"
- keyword maps to the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state. The
- <i>missing value default</i> is the <a href=#attr-command-type-state-command title=attr-command-type-state-command>Command</a> state.</p>
+ <p>If a <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the
+ <a href=#toolbar-state title="toolbar state">toolbar</a> state, then the element <a href=#represents>represents</a> a
+ toolbar consisting of its contents, in the form of either an unordered list of items (represented
+ by <code><a href=#the-li-element>li</a></code> elements), each of which represents a command that the user can perform or
+ activate, or, if the element has no <code><a href=#the-li-element>li</a></code> element children, <a href=#flow-content>flow content</a>
+ describing available commands.</p>
- <dl><dt>The <dfn id=attr-command-type-state-command title=attr-command-type-state-command>Command</dfn> state</dt>
+ <p>The <dfn id=attr-menu-label title=attr-menu-label><code>label</code></dfn> attribute gives the label of the
+ menu. It is used by user agents to display nested menus in the UI: a context menu containing
+ another menu would use the nested menu's <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute for
+ the submenu's menu label. The <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute must only be
+ specified on <code><a href=#the-menu-element>menu</a></code> elements whose parent element is a <code><a href=#the-menu-element>menu</a></code> element whose
+ <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup
+ menu</a> state.</p>
- <dd><p>The element <a href=#represents>represents</a> a normal command with an associated action.</dd>
+ <div class=impl>
- <dt>The <dfn id=attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</dfn> state</dt>
+ <hr><p>A <code><a href=#the-menu-element>menu</a></code> is a <dfn id=currently-relevant-menu-element>currently relevant <code>menu</code> element</dfn> if it is the
+ child of a <a href=#currently-relevant-menu-element>currently relevant <code>menu</code> element</a>, or if it is the
+ <a href=#designated-pop-up-menu>designated pop-up menu</a> of a <code><a href=#the-button-element>button</a></code> element that is not
+ <a href=#inert>inert</a>, does not have a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute, and is not
+ the descendant of an element with a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute.</p>
- <dd><p>The element <a href=#represents>represents</a> a state or option that can be toggled.</dd>
+ <hr><p>A pop-up menu consists of a list of zero or more menu items, which can be any of:</p>
- <dt>The <dfn id=attr-command-type-state-radio title=attr-command-type-state-radio>Radio</dfn> state</dt>
+ <ul class=brief><li><a href=#concept-command title=concept-command>Commands</a>, which can be marked as default commands (<code><a href=#the-menuitem-element>menuitem</a></code>)</li>
+ <li>Separators (<code><a href=#the-hr-element>hr</a></code>)</li>
+ <li>Other menus, which allows the list to be nested (<code><a href=#the-menu-element>menu</a></code>)</li>
+ </ul><p>To <dfn id=construct-and-show-a-menu>construct and show a menu</dfn> for a particular <code><a href=#the-menu-element>menu</a></code> element, the user
+ agent must run the following steps:</p>
- <dd><p>The element <a href=#represents>represents</a> a selection of one item from a list of items.</dd>
+ <ol><li><p>Let the menu be an empty list of the type described above.</li>
- </dl><p>The <dfn id=attr-command-label title=attr-command-label><code>label</code></dfn>
- attribute gives the name of the command, as shown to the user. The
- <code title=attr-command-label><a href=#attr-command-label>label</a></code> attribute must be
- specified and must have a value that is not the empty string.</p>
+ <li>
- <p>The <dfn id=attr-command-title title=attr-command-title><code>title</code></dfn>
- attribute gives a hint describing the command, which might be shown
- to the user to help him.</p>
+ <p>Run the <a href=#menu-builder>menu builder</a> steps for the <code><a href=#the-menu-element>menu</a></code> element using the menu
+ prepared in the previous list as the output.</p>
- <p>The <dfn id=attr-command-icon title=attr-command-icon><code>icon</code></dfn>
- attribute gives a picture that represents the command. If the
- attribute is specified, the attribute's value must contain a
- <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
- spaces</a>. <span class=impl>To obtain the <a href=#absolute-url>absolute
- URL</a> of the icon when the attribute's value is not the empty
- string, the attribute's value must be <a href=#resolve-a-url title="resolve a
- url">resolved</a> relative to the element. When the attribute is
- absent, or its value is the empty string, or <a href=#resolve-a-url title="resolve a
- url">resolving</a> its value fails, there is no icon.</span></p>
- <!-- this is affected by the base URL being changed, so users of
- this should cache the image once they've fetched it once, at least
- until the relative url changes again -->
+ <p>The <dfn id=menu-builder>menu builder</dfn> steps for a <code><a href=#the-menu-element>menu</a></code> element using a specific menu as
+ output are as follows: For each child node of the <code><a href=#the-menu-element>menu</a></code> in <a href=#tree-order>tree order</a>,
+ run the appropriate steps from the following list:</p>
- <p>The <dfn id=attr-command-disabled title=attr-command-disabled><code>disabled</code></dfn> attribute
- is a <a href=#boolean-attribute>boolean attribute</a> that, if present, indicates that
- the command is not available in the current state.</p>
+ <dl class=switch><dt>If the child is a <code><a href=#the-menuitem-element>menuitem</a></code> element that <a href=#concept-command title=concept-command>defines a command</a></dt>
- <p class=note>The distinction between <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> and <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> is subtle. A command would be
- disabled if, in the same context, it could be enabled if only
- certain aspects of the situation were changed. A command would be
- marked as hidden if, in that situation, the command will never be
- enabled. For example, in the context menu for a water faucet, the
- command "open" might be disabled if the faucet is already open, but
- the command "eat" would be marked hidden since the faucet could
- never be eaten.</p>
+ <dd>Append the command to the menu, respecting its <a href=#concept-facet title=concept-facet>facets</a><!--
+ we might need to be explicit about what this means for each facet, if testing shows this isn't
+ well-implemented. e.g.: If there's an Icon facet for the command, it should be <span
+ title="fetch">fetched</span><!- -FETCH- -> (this would be http-origin privacy-sensitive), and
+ then that image should be associated with the command, such that each command only has its image
+ fetched once, to prevent changes to the base URL from having effects after the image has been
+ fetched once. (no need to resolve the Icon facet, it's an absolute URL) -->. If the
+ <code><a href=#the-menuitem-element>menuitem</a></code> element has a <code title=attr-menuitem-default><a href=#attr-menuitem-default>default</a></code> attribute,
+ mark the command as being a default command.</dd>
- <p>The <dfn id=attr-command-checked title=attr-command-checked><code>checked</code></dfn>
- attribute is a <a href=#boolean-attribute>boolean attribute</a> that, if present,
- indicates that the command is selected. The attribute must be
- omitted unless the <code title=attr-command-type><a href=#attr-command-type>type</a></code>
- attribute is in either the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state or
- the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a>
- state.</p>
- <p>The <dfn id=attr-command-radiogroup title=attr-command-radiogroup><code>radiogroup</code></dfn>
- attribute gives the name of the group of commands that will be
- toggled when the command itself is toggled, for commands whose <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute has the value "<code title="">radio</code>". The scope of the name is the child list of
- the parent element. The attribute must be omitted unless the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is in the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state.</p>
+ <dt>If the child is an <code><a href=#the-hr-element>hr</a></code> element</dt>
-<!--
- <p>If the <code>command</code> element is used when <span
- title="menu generation">generating</span> a <span>context
- menu</span>, then the <dfn
- title="attr-command-default"><code>default</code></dfn> attribute
- indicates, if present, that the command is the one that would have
- been invoked if the user had directly activated the menu's subject
- instead of using its context menu. The <code
- title="attr-command-default">default</code> attribute is a
- <span>boolean attribute</span>. The attribute must be omitted unless
- the <code title="attr-command-type">type</code> attribute is in the
- <span title="attr-command-type-state-command">Command</span>
- state.</p>
+ <dd>Append a separator to the menu.</dd>
- <div class="example">
- ...an example that shows an element that, if double-clicked,
- invokes an action, but that also has a context menu, showing the
- various <code>command</code> attributes off, and that has a default
- command...
+ <dt>If the child is a <code><a href=#the-menu-element>menu</a></code> element with no <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
- </div>
--->
+ <dd>Append a separator to the menu, then run the <a href=#menu-builder>menu builder</a> steps using this
+ child <code><a href=#the-menu-element>menu</a></code> element for the same menu, then append another separator to the
+ menu.</dd>
- <hr><p>If a <code><a href=#the-command-element>command</a></code> element <var title="">slave</var> has a
- <dfn id=attr-command-command title=attr-command-command><code>command</code></dfn>
- attribute, and <var title="">slave</var> is <a href=#in-a-document>in a
- <code>Document</code></a>, and there is an element in that
- <code><a href=#document>Document</a></code> whose <a href=#concept-id title=concept-id>ID</a> has a
- value equal to the value of <var title="">slave</var>'s <code title=attr-command-command><a href=#attr-command-command>command</a></code> attribute, and the first
- such element in <a href=#tree-order>tree order</a>, hereafter <var title="">master</var>, itself <a href=#concept-command title=concept-command>defines
- a command</a> and either is not a <code><a href=#the-command-element>command</a></code> element or
- does not itself have a <code title=attr-command-command><a href=#attr-command-command>command</a></code> attribute, then the
- <dfn id=master-command>master command</dfn> of <var title="">slave</var> is <var title="">master</var>.</p>
- <p>An element with a
- <code title=attr-command-command><a href=#attr-command-command>command</a></code>
- attribute must have a <a href=#master-command>master command</a> and must not have any
- <code title=attr-command-type><a href=#attr-command-type>type</a></code>,
- <code title=attr-command-label><a href=#attr-command-label>label</a></code>,
- <code title=attr-command-icon><a href=#attr-command-icon>icon</a></code>,
- <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code>,
- <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>, or
- <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code>
- attributes.</p>
+ <dt>If the child is a <code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
- <hr><div class=impl>
+ <dd>Create a new submenu as an empty list of the type described above, and construct it by
+ running the <a href=#menu-builder>menu builder</a> steps for the child <code><a href=#the-menu-element>menu</a></code> element using the
+ new submenu as the output. Then, append the submenu to the menu, using the value of the child
+ <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute as the label
+ of the submenu.</dd>
- <p>The <dfn id=dom-command-type title=dom-command-type><code>type</code></dfn> IDL
- attribute must <a href=#reflect>reflect</a> the content attribute of the
- same name, <a href=#limited-to-only-known-values>limited to only known values</a>.</p>
- <p>The <dfn id=dom-command-label title=dom-command-label><code>label</code></dfn>, <dfn id=dom-command-icon title=dom-command-icon><code>icon</code></dfn>, <dfn id=dom-command-disabled title=dom-command-disabled><code>disabled</code></dfn>, <dfn id=dom-command-checked title=dom-command-checked><code>checked</code></dfn>, and <dfn id=dom-command-radiogroup title=dom-command-radiogroup><code>radiogroup</code></dfn><!--,
- and <dfn title="dom-command-default"><code>default</code></dfn>-->
- IDL attributes must <a href=#reflect>reflect</a> the respective content
- attributes of the same name.</p>
+ <dt>Any other node</dt>
- <p>The <dfn id=dom-command-command title=dom-command-command><code>command</code></dfn>
- IDL attribute must return the <a href=#master-command>master command</a>, if any,
- or null otherwise.</p>
+ <dd><a href=#ignore>Ignore</a> the node.</dd>
- <hr><p>If the element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> is false
- (enabled) then the element's <a href=#activation-behavior>activation behavior</a>
- depends on the element's <code title=attr-command-type><a href=#attr-command-type>type</a></code>
- and <code title=attr-command-command><a href=#attr-command-command>command</a></code> attributes, as
- follows:</p>
+ </dl></li>
- <dl class=switch><dt>If the element has a <a href=#master-command>master command</a> set by its
- <code title=attr-command-command><a href=#attr-command-command>command</a></code> attribute</dt>
+ <li><p>Remove any submenu with no label, or whose label is the empty string, in the menu or any submenus.</li>
- <dd><p>The user agent must <a href=#run-synthetic-click-activation-steps>run synthetic click activation
- steps</a> on the element's <a href=#master-command>master command</a>.</dd>
- <!-- we know it has a defined <span>activation behavior</span> if
- we get here -->
+ <li><p>Remove any menu item with no label, or whose label is the empty string, in the menu or any submenus.</li>
+ <li><p>Collapse all sequences of two or more adjacent separators in the menu or any submenus to a single separator.</li>
- <dt>If the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is
- in the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state</dt>
+ <li><p>Remove all separators at the start or end of the menu and any submenus.</li>
- <dd><p>If the element has a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, the UA must
- remove that attribute. Otherwise, the UA must add a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, with the
- literal value <code title="">checked</code>.</dd>
+ <li>
+ <p>Display the menu to the user, and let the algorithm that invoked this one continue.</p>
- <dt>If the <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is
- in the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state</dt>
+ <p>If the user selects a menu item that corresponds to an element that still represents a <a href=#concept-command title=concept-command>command</a> when the user selects it, then the UA must invoke that
+ command's <a href=#command-facet-action title=command-facet-Action>Action</a>.</p>
- <dd><p>If the element has a parent, then the UA must walk the list
- of child nodes of that parent element, and for each node that is a
- <code><a href=#the-command-element>command</a></code> element, if that element has a <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code> attribute whose
- value exactly matches the current element's (treating missing <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code> attributes as if
- they were the empty string), and has a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute, must remove
- that attribute.</p>
+ <p>Pop-up menus must not, while being shown, reflect changes in the DOM. The menu is constructed
+ from the DOM before being shown, and is then immutable.</p>
- <p>Then, the element's <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code> attribute attribute
- must be set to the literal value <code title="">checked</code>.</dd>
+ </li>
+ </ol><hr><p>The <dfn id=dom-menu-type title=dom-menu-type><code>type</code></dfn> and <dfn id=dom-menu-label title=dom-menu-label><code>label</code></dfn> IDL attributes must <a href=#reflect>reflect</a> the
+ respective content attributes of the same name.</p>
- <dt>Otherwise</dt>
-
- <dd><p>The element's <a href=#activation-behavior>activation behavior</a> is to do
- nothing.</dd>
-
- </dl><p class=note>Firing a synthetic <code title=event-click><a href=#event-click>click</a></code> event at the element does not cause
- any of the actions described above to happen.</p>
-
- <!-- v2COMMAND: Expose the Triggers facet again. -->
-
- <p>If the element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> is true
- (disabled) then the element has no <a href=#activation-behavior>activation
- behavior</a>.</p>
-
</div>
- <p class=note><code><a href=#the-command-element>command</a></code> elements are not rendered
- unless they <a href=#the-menu-element title=menu>form part of a menu</a>.</p>
-
<div class=example>
- <p>Here is an example of a toolbar with three buttons that let the
- user toggle between left, center, and right alignment. One could
- imagine such a toolbar as part of a text editor. The toolbar also
- has a separator followed by another button labeled "Publish",
- though that button is disabled.</p>
+ <p>In this example, the <code><a href=#the-menu-element>menu</a></code> element is used to describe a toolbar with three menu
+ buttons on it, each of which has a dropdown menu with a series of options:</p>
- <pre><menu type="toolbar">
- <command type="radio" radiogroup="alignment" checked="checked"
- label="Left" icon="icons/alL.png" onclick="setAlign('left')">
- <command type="radio" radiogroup="alignment"
- label="Center" icon="icons/alC.png" onclick="setAlign('center')">
- <command type="radio" radiogroup="alignment"
- label="Right" icon="icons/alR.png" onclick="setAlign('right')">
- <hr>
- <command type="command" disabled
- label="Publish" icon="icons/pub.png" onclick="publish()">
+ <pre><menu> <!-- type="toolbar" implied -->
+ <li>
+ <button type=menu value="File" menu="filemenu">
+ <menu id="filemenu" type="popup">
+ <menuitem onclick="fnew()" label="New...">
+ <menuitem onclick="fopen()" label="Open...">
+ <menuitem onclick="fsave()" label="Save">
+ <menuitem onclick="fsaveas()" label="Save as...">
+ </menu>
+ </li>
+ <li>
+ <button type=menu value="Edit" menu="editmenu">
+ <menu id="editmenu" type="popup">
+ <menuitem onclick="ecopy()" label="Copy">
+ <menuitem onclick="ecut()" label="Cut">
+ <menuitem onclick="epaste()" label="Paste">
+ </menu>
+ </li>
+ <li>
+ <button type=menu value="Help" menu="helpmenu">
+ <menu id="helpmenu" type="popup">
+ <menuitem onclick="location='help.html'" label="Help">
+ <menuitem onclick="location='about.html'" label="About">
+ </menu>
+ </li>
</menu></pre>
+ <p>In a supporting user agent, this might look like this (assuming the user has just activated the
+ second button):</p>
+
+ <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." height=101 src=http://images.whatwg.org/sample-toolbar-1.png width=303></p>
+
</div>
- <h4 id=the-menu-element><span class=secno>4.11.4 </span>The <dfn id=menus><code>menu</code></dfn> element</h4>
+ <h4 id=the-menuitem-element><span class=secno>4.11.4 </span>The <dfn><code>menuitem</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>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state: <a href=#interactive-content>Interactive content</a>.</dd>
- <dd>If the element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state or the <a href=#list-state title="list state">list</a> state: <a href=#palpable-content>Palpable content</a>.</dd>
+ <dd>None.</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-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state.</dd>
<dt><a href=#element-dfn-content-model title=element-dfn-content-model>Content model</a>:</dt>
- <dd>Either: Zero or more <code><a href=#the-li-element>li</a></code> elements.</dd>
- <dd>Or: <a href=#flow-content>Flow content</a>.</dd>
+ <dd>Empty.</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-menu-type><a href=#attr-menu-type>type</a></code></dd>
- <dd><code title=attr-menu-label><a href=#attr-menu-label>label</a></code></dd>
+ <dd><code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code></dd>
+ <dd><code title=attr-menuitem-label><a href=#attr-menuitem-label>label</a></code></dd>
+ <dd><code title=attr-menuitem-icon><a href=#attr-menuitem-icon>icon</a></code></dd>
+ <dd><code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code></dd>
+ <dd><code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code></dd>
+ <dd><code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>radiogroup</a></code></dd>
+ <dd><code title=attr-menuitem-default><a href=#attr-menuitem-default>default</a></code></dd>
+ <dd><code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code></dd>
+ <dd>Also, the <code title=attr-menuitem-title><a href=#attr-menuitem-title>title</a></code> attribute has special semantics on this element.</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=htmlmenuelement>HTMLMenuElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
- attribute DOMString <a href=#dom-menu-type title=dom-menu-type>type</a>;
- attribute DOMString <a href=#dom-menu-label title=dom-menu-label>label</a>;
+<pre class=idl>interface <dfn id=htmlmenuitemelement>HTMLMenuItemElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+ attribute DOMString <a href=#dom-menuitem-type title=dom-menuitem-type>type</a>;
+ attribute DOMString <a href=#dom-menuitem-label title=dom-menuitem-label>label</a>;
+ attribute DOMString <a href=#dom-menuitem-icon title=dom-menuitem-icon>icon</a>;
+ attribute boolean <a href=#dom-menuitem-disabled title=dom-menuitem-disabled>disabled</a>;
+ attribute boolean <a href=#dom-menuitem-checked title=dom-menuitem-checked>checked</a>;
+ attribute DOMString <a href=#dom-menuitem-radiogroup title=dom-menuitem-radiogroup>radiogroup</a>;
+ attribute boolean <a href=#dom-menuitem-default title=dom-menuitem-default>default</a>;
+ readonly attribute <a href=#htmlelement>HTMLElement</a>? <a href=#dom-menuitem-command title=dom-menuitem-command>command</a>;
};</pre>
- </dl><!--TOPIC:HTML--><p>The <code><a href=#the-menu-element>menu</a></code> element represents a list of commands.</p>
+ </dd>
+ </dl><!--TOPIC:HTML--><p>The <code><a href=#the-menuitem-element>menuitem</a></code> element represents a command that the user can invoke from a popup
+ menu (either a <a href=#attr-contextmenu title=attr-contextmenu>context menu</a> or the menu of a <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>menu button</a>).</p>
- <!-- v2 idea: <menu> should get an icon, like <command> -->
+ <p>A <code><a href=#the-menuitem-element>menuitem</a></code> element that uses one or more of the
+ <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code>,
+ <code title=attr-menuitem-label><a href=#attr-menuitem-label>label</a></code>,
+ <code title=attr-menuitem-icon><a href=#attr-menuitem-icon>icon</a></code>,
+ <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code>,
+ <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code>, and
+ <code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>radiogroup</a></code>
+ attributes defines a new command.</p>
- <p>The <dfn id=attr-menu-type title=attr-menu-type><code>type</code></dfn> attribute
- is an <a href=#enumerated-attribute>enumerated attribute</a> indicating the kind of menu
- being declared. The attribute has three states. The <code title=attr-menu-type-context>context</code> keyword maps to the
- <dfn id=context-menu-state title="context menu state">context menu</dfn> state, in which
- the element is declaring a context menu. The <code title=attr-menu-type-toolbar>toolbar</code> keyword maps to the
- <dfn id=toolbar-state title="toolbar state">toolbar</dfn> state, in which the
- element is declaring a toolbar. The attribute may also be
- omitted. The <i>missing value default</i> is the <dfn id=list-state title="list
- state">list</dfn> state, which indicates that the element is merely
- a list of commands that is neither declaring a context menu nor
- defining a toolbar.</p>
+ <p>A <code><a href=#the-menuitem-element>menuitem</a></code> element that uses the <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute defines a command by reference to another
+ one. This allows authors to define a command once, and set its state (e.g. whether it is active or
+ disabled) in one place, and have all references to that command in the user interface change at
+ the same time.</p>
- <p>If a <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#context-menu-state title="context menu state">context menu</a> state, then the
- element <a href=#represents>represents</a> the commands of a context menu, and
- the user can only interact with the commands if that context menu is
- activated.</p>
+ <p>If the <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute is specified, the element
+ is in the <dfn id=indirect-command>indirect command</dfn> mode. If it is not specified, it is in the <dfn id=explicit-command>explicit
+ command</dfn> mode. When the element is in the <a href=#indirect-command>indirect command</a> mode, the element
+ must not have any of the following attributes specified:
+ <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code>,
+ <code title=attr-menuitem-label><a href=#attr-menuitem-label>label</a></code>,
+ <code title=attr-menuitem-icon><a href=#attr-menuitem-icon>icon</a></code>,
+ <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code>,
+ <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code>,
+ <code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>radiogroup</a></code>.
+ </p>
- <p>If a <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, then the element
- <a href=#represents>represents</a> a list of active commands that the user can
- immediately interact with.</p>
+ <hr><p>The <dfn id=attr-menuitem-type title=attr-menuitem-type><code>type</code></dfn> attribute indicates the kind of
+ command: either a normal command with an associated action, or a state or option that can be
+ toggled, or a selection of one item from a list of items.</p>
- <p>If a <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#list-state title="list state">list</a> state, then the element either
- <a href=#represents>represents</a> an unordered list of items (each represented
- by an <code><a href=#the-li-element>li</a></code> element), each of which represents a command
- that the user can perform or activate, or, if the element has no
- <code><a href=#the-li-element>li</a></code> element children, <a href=#flow-content>flow content</a>
- describing available commands.</p>
+ <p>The attribute is an <a href=#enumerated-attribute>enumerated attribute</a> with three keywords and states. The "<dfn id=attr-menuitem-type-keyword-command title=attr-menuitem-type-keyword-command><code>command</code></dfn>" keyword maps to the <a href=#attr-menuitem-type-state-command title=attr-menuitem-type-state-command>Command</a> state, the "<dfn id=attr-menuitem-type-keyword-checkbox title=attr-menuitem-type-keyword-checkbox><code>checkbox</code></dfn>" keyword maps to the <a href=#attr-menuitem-type-state-checkbox title=attr-menuitem-type-state-checkbox>Checkbox</a> state, and the "<dfn id=attr-menuitem-type-keyword-radio title=attr-menuitem-type-keyword-radio><code>radio</code></dfn>" keyword maps to the <a href=#attr-menuitem-type-state-radio title=attr-menuitem-type-state-radio>Radio</a> state. The <i>missing value default</i> is the
+ <a href=#attr-menuitem-type-state-command title=attr-menuitem-type-state-command>Command</a> state.</p>
- <p>The <dfn id=attr-menu-label title=attr-menu-label><code>label</code></dfn>
- attribute gives the label of the menu. It is used by user agents to
- display nested menus in the UI. For example, a context menu
- containing another menu would use the nested menu's <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute for the submenu's
- menu label.</p>
+ <dl><dt>The <dfn id=attr-menuitem-type-state-command title=attr-menuitem-type-state-command>Command</dfn> state</dt>
- <div class=impl>
+ <dd><p>The element <a href=#represents>represents</a> a normal command with an associated action.</dd>
- <p>The <dfn id=dom-menu-type title=dom-menu-type><code>type</code></dfn> and <dfn id=dom-menu-label title=dom-menu-label><code>label</code></dfn> IDL attributes must
- <a href=#reflect>reflect</a> the respective content attributes of the same
- name.</p>
+ <dt>The <dfn id=attr-menuitem-type-state-checkbox title=attr-menuitem-type-state-checkbox>Checkbox</dfn> state</dt>
- </div>
+ <dd><p>The element <a href=#represents>represents</a> a state or option that can be toggled.</dd>
+ <dt>The <dfn id=attr-menuitem-type-state-radio title=attr-menuitem-type-state-radio>Radio</dfn> state</dt>
+ <dd><p>The element <a href=#represents>represents</a> a selection of one item from a list of items.</dd>
- <h5 id=menus-intro><span class=secno>4.11.4.1 </span>Introduction</h5>
+ </dl><p>The <dfn id=attr-menuitem-label title=attr-menuitem-label><code>label</code></dfn> attribute gives the name of the
+ command, as shown to the user. The <code title=attr-menuitem-label><a href=#attr-menuitem-label>label</a></code> attribute must
+ be specified if the element is in the <a href=#explicit-command>explicit command</a> mode. If the attribute is
+ specified, it must have a value that is not the empty string.</p>
- <p><i>This section is non-normative.</i></p>
+ <p>The <dfn id=attr-menuitem-icon title=attr-menuitem-icon><code>icon</code></dfn> attribute gives a picture that
+ represents the command. If the attribute is specified, the attribute's value must contain a
+ <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a>. <span class=impl>To obtain
+ the <a href=#absolute-url>absolute URL</a> of the icon when the attribute's value is not the empty string, the
+ attribute's value must be <a href=#resolve-a-url title="resolve a url">resolved</a> relative to the element.
+ When the attribute is absent, or its value is the empty string, or <a href=#resolve-a-url title="resolve a
+ url">resolving</a> its value fails, there is no icon.</span></p> <!-- this is affected by the
+ base URL being changed, so users of this should cache the image once they've fetched it once, at
+ least until the relative url changes again -->
- <p>The <code><a href=#the-menu-element>menu</a></code> element is used to define context menus and
- toolbars.</p>
+ <p>The <dfn id=attr-menuitem-disabled title=attr-menuitem-disabled><code>disabled</code></dfn> attribute is a
+ <a href=#boolean-attribute>boolean attribute</a> that, if present, indicates that the command is not available in
+ the current state.</p>
- <p>For example, the following represents a toolbar with three menu
- buttons on it, each of which has a dropdown menu with a series of
- options:</p>
+ <p class=note>The distinction between <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code> and
+ <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> is subtle. A command would be disabled if, in the same
+ context, it could be enabled if only certain aspects of the situation were changed. A command
+ would be marked as hidden if, in that situation, the command will never be enabled. For example,
+ in the context menu for a water faucet, the command "open" might be disabled if the faucet is
+ already open, but the command "eat" would be marked hidden since the faucet could never be
+ eaten.</p>
- <pre><menu type="toolbar">
- <li>
- <menu label="File">
- <button type="button" onclick="fnew()">New...</button>
- <button type="button" onclick="fopen()">Open...</button>
- <button type="button" onclick="fsave()">Save</button>
- <button type="button" onclick="fsaveas()">Save as...</button>
- </menu>
- </li>
- <li>
- <menu label="Edit">
- <button type="button" onclick="ecopy()">Copy</button>
- <button type="button" onclick="ecut()">Cut</button>
- <button type="button" onclick="epaste()">Paste</button>
- </menu>
- </li>
- <li>
- <menu label="Help">
- <li><a href="help.html">Help</a></li>
- <li><a href="about.html">About</a></li>
- </menu>
- </li>
-</menu></pre>
+ <p>The <dfn id=attr-menuitem-checked title=attr-menuitem-checked><code>checked</code></dfn> attribute is a <a href=#boolean-attribute>boolean
+ attribute</a> that, if present, indicates that the command is selected. The attribute must be
+ omitted unless the <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is in either the <a href=#attr-menuitem-type-state-checkbox title=attr-menuitem-type-state-checkbox>Checkbox</a> state or the <a href=#attr-menuitem-type-state-radio title=attr-menuitem-type-state-radio>Radio</a> state.</p>
- <p>In a supporting user agent, this might look like this:</p>
+ <p>The <dfn id=attr-menuitem-radiogroup title=attr-menuitem-radiogroup><code>radiogroup</code></dfn> attribute gives the
+ name of the group of commands that will be toggled when the command itself is toggled, for
+ commands whose <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute has the value "<code title="">radio</code>". The scope of the name is the child list of the parent element. The
+ attribute must be omitted unless the <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is in
+ the <a href=#attr-menuitem-type-state-radio title=attr-menuitem-type-state-radio>Radio</a> state.</p>
- <p><img alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'." height=101 src=http://images.whatwg.org/sample-toolbar-1.png width=303></p>
+ <hr><p>If a <code><a href=#the-menuitem-element>menuitem</a></code> element <var title="">slave</var> has a <dfn id=attr-menuitem-command title=attr-menuitem-command><code>command</code></dfn> attribute, and <var title="">slave</var>
+ is <a href=#in-a-document>in a <code>Document</code></a>, and there is an element in that <code><a href=#document>Document</a></code>
+ whose <a href=#concept-id title=concept-id>ID</a> has a value equal to the value of <var title="">slave</var>'s <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute, and the first
+ such element in <a href=#tree-order>tree order</a>, hereafter <var title="">master</var>, itself <a href=#concept-command title=concept-command>defines a command</a> and either is not a <code><a href=#the-menuitem-element>menuitem</a></code> element
+ or does not itself have a <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute, then the
+ <dfn id=master-command>master command</dfn> of <var title="">slave</var> is <var title="">master</var>.</p>
- <p>In a legacy user agent, the above would look like a bulleted list
- with three items, the first of which has four buttons, the second of
- which has three, and the third of which has two nested bullet points
- with two items consisting of links.</p>
+ <p>An element with a <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute must have a
+ <a href=#master-command>master command</a>.</p>
- <hr><p>The following implements a similar toolbar, with a single button
- whose values, when selected, redirect the user to Web sites.</p>
+ <hr><p>The <dfn id=attr-menuitem-title title=attr-menuitem-title><code>title</code></dfn> attribute gives a hint describing
+ the command, which might be shown to the user to help him.</p>
- <pre><form action="redirect.cgi">
- <menu type="toolbar">
- <label for="goto">Go to...</label>
- <menu label="Go">
- <select id="goto"<!--
- onchange="if (this.options[this.selectedIndex].value)
- window.location = this.options[this.selectedIndex].value"-->>
- <option value="" selected="selected"> Select site: </option>
- <option value="http://www.apple.com/"> Apple </option>
- <option value="http://www.mozilla.org/"> Mozilla </option>
- <option value="http://www.opera.com/"> Opera </option>
- </select>
- <span><input type="submit" value="Go"></span>
- </menu>
+ <p>The <dfn id=attr-menuitem-default title=attr-menuitem-default><code>default</code></dfn> attribute indicates, if
+ present, that the command is the one that would have been invoked if the user had directly
+ activated the menu's subject instead of using the menu. The <code title=attr-menuitem-default><a href=#attr-menuitem-default>default</a></code> attribute is a <a href=#boolean-attribute>boolean attribute</a>.</p>
+
+ <div class=example>
+
+ <p>In this trivial example, a submit button is given a context menu that has two options, one to
+ reset the form, and one to submit the form. The submit command is marked as being the default.</p>
+
+ <pre><form action="dosearch.pl">
+ <p><label>Enter search terms: <input type="text" name="terms"></label></p>
+ <p><input type=submit contextmenu=formmenu id="submitbutton"></p>
+ <p hidden><input type=reset id="resetbutton"></p>
+ <menu type=popup id=formmenu>
+ <menuitem command="submitbutton" default>
+ <menuitem command="resetbutton">
</menu>
</form></pre>
- <p>The behavior in supporting user agents is similar to the example
- above, but here the legacy behavior consists of a single
- <code><a href=#the-select-element>select</a></code> element with a submit button. The submit button
- doesn't appear in the toolbar, because it is not a child of the
- <code><a href=#the-menu-element>menu</a></code> element or of its <code><a href=#the-li-element>li</a></code> children.</p>
+ </div>
+ <div class=impl>
+ <hr><p>The <dfn id=dom-menuitem-type title=dom-menuitem-type><code>type</code></dfn> IDL
+ attribute must <a href=#reflect>reflect</a> the content attribute of the
+ same name, <a href=#limited-to-only-known-values>limited to only known values</a>.</p>
- <div class=impl>
+ <p>The <dfn id=dom-menuitem-label title=dom-menuitem-label><code>label</code></dfn>, <dfn id=dom-menuitem-icon title=dom-menuitem-icon><code>icon</code></dfn>, <dfn id=dom-menuitem-disabled title=dom-menuitem-disabled><code>disabled</code></dfn>, <dfn id=dom-menuitem-checked title=dom-menuitem-checked><code>checked</code></dfn>, and <dfn id=dom-menuitem-radiogroup title=dom-menuitem-radiogroup><code>radiogroup</code></dfn>,
+ and <dfn id=dom-menuitem-default title=dom-menuitem-default><code>default</code></dfn>
+ IDL attributes must <a href=#reflect>reflect</a> the respective content
+ attributes of the same name.</p>
- <h5 id=building-menus-and-toolbars><span class=secno>4.11.4.2 </span><dfn>Building menus and toolbars</dfn></h5>
+ <p>The <dfn id=dom-menuitem-command title=dom-menuitem-command><code>command</code></dfn>
+ IDL attribute must return the <a href=#master-command>master command</a>, if any,
+ or null otherwise.</p>
- <p>A menu (or toolbar) consists of a list of zero or more of the
- following components:</p>
+ <hr><p>If the element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> is false
+ (enabled) then the element's <a href=#activation-behavior>activation behavior</a>
+ depends on the element's <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code>
+ and <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attributes, as
+ follows:</p>
- <ul class=brief><li><a href=#concept-command title=concept-command>Commands</a>, which can be marked as default commands</li>
- <li>Separators</li>
- <li>Other menus (which allows the list to be nested)</li>
- </ul><p>The list corresponding to a particular <code><a href=#the-menu-element>menu</a></code> element
- is built by iterating over its child nodes. For each child node in
- <a href=#tree-order>tree order</a>, the required behavior depends on what the
- node is, as follows:</p>
+ <dl class=switch><dt>If the element has a <a href=#master-command>master command</a> set by its
+ <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute</dt>
- <dl class=switch><dt>An element that <a href=#concept-command title=concept-command>defines a command</a></dt>
+ <dd><p>The user agent must <a href=#run-synthetic-click-activation-steps>run synthetic click activation
+ steps</a> on the element's <a href=#master-command>master command</a>.</dd>
+ <!-- we know it has a defined <span>activation behavior</span> if
+ we get here -->
- <dd>Append the command to the menu, respecting its <a href=#concept-facet title=concept-facet>facets</a><!-- we might need to be
- explicit about what this means for each facet, if testing shows
- this isn't well-implemented. e.g.: If there's an Icon facet for the
- command, it should be <span title="fetch">fetched</span><!- -FETCH-
- -> (this would be http-origin privacy-sensitive), and then that
- image should be associated with the command, such that each command
- only has its image fetched once, to prevent changes to the base URL
- from having effects after the image has been fetched once. (no need
- to resolve the Icon facet, it's an absolute URL) -->. <!--If the
- element is a <code>command</code> element with a <code
- title="attr-command-default">default</code> attribute, mark the
- command as being a default command.--></dd>
+ <dt>If the <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is
+ in the <a href=#attr-menuitem-type-state-checkbox title=attr-menuitem-type-state-checkbox>Checkbox</a> state</dt>
- <dt>An <code><a href=#the-hr-element>hr</a></code> element</dt>
- <dt>An <code><a href=#the-option-element>option</a></code> element that has a <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute set to the empty
- string, and has a <code title=attr-option-disabled><a href=#attr-option-disabled>disabled</a></code> attribute, and whose
- <code><a href=#textcontent>textContent</a></code> consists of a string of one or more
- hyphens (U+002D HYPHEN-MINUS)</dt>
+ <dd><p>If the element has a <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code> attribute, the UA must
+ remove that attribute. Otherwise, the UA must add a <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code> attribute, with the
+ literal value <code title="">checked</code>.</dd>
- <dd>Append a separator to the menu.</dd>
+ <dt>If the <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is
+ in the <a href=#attr-menuitem-type-state-radio title=attr-menuitem-type-state-radio>Radio</a> state</dt>
- <dt>An <code><a href=#the-li-element>li</a></code> element</dt>
- <dt>A <code><a href=#the-label-element>label</a></code> element</dt>
+ <dd><p>If the element has a parent, then the UA must walk the list
+ of child nodes of that parent element, and for each node that is a
+ <code><a href=#the-menuitem-element>menuitem</a></code> element, if that element has a <code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>radiogroup</a></code> attribute whose
+ value exactly matches the current element's (treating missing <code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>radiogroup</a></code> attributes as if
+ they were the empty string), and has a <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code> attribute, must remove
+ that attribute.</p>
- <dd>Iterate over the children of the element.</dd>
+ <p>Then, the element's <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code> attribute attribute
+ must be set to the literal value <code title="">checked</code>.</dd>
- <dt>A <code><a href=#the-menu-element>menu</a></code> element with no <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
- <dt>A <code><a href=#the-select-element>select</a></code> element</dt>
+ <dt>Otherwise</dt>
- <dd>Append a separator to the menu, then iterate over the children
- of the <code><a href=#the-menu-element>menu</a></code> or <code><a href=#the-select-element>select</a></code> element, then
- append another separator.</dd>
+ <dd><p>The element's <a href=#activation-behavior>activation behavior</a> is to do
+ nothing.</dd>
- <!-- v2: we might want to support <select> in <label> as giving a named submenu -->
+ </dl><p class=note>Firing a synthetic <code title=event-click><a href=#event-click>click</a></code> event at the element does not cause
+ any of the actions described above to happen.</p>
+ <!-- v2COMMAND: Expose the Triggers facet again. -->
- <dt>A <code><a href=#the-menu-element>menu</a></code> element with a <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
- <dt>An <code><a href=#the-optgroup-element>optgroup</a></code> element with a <code title=attr-menu-label><a href=#attr-menu-label>label</a></code> attribute</dt>
+ <p>If the element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> is true
+ (disabled) then the element has no <a href=#activation-behavior>activation
+ behavior</a>.</p>
- <dd>Append a submenu to the menu, using the value of the element's
- <code title="">label</code> attribute as the label of the menu. The
- submenu must be constructed by taking the element and creating a
- new menu for it using the complete process described in this
- section.</dd>
+ </div>
+ <p class=note>The <code><a href=#the-menuitem-element>menuitem</a></code> element is not rendered except as <a href=#the-menu-element title=menu>part of a popup menu</a>.</p>
- <dt>Any other node</dt>
+ <div class=example>
- <dd><a href=#ignore>Ignore</a> the node.</dd>
+ <p>Here is an example of a pop-up menu button with three options that let the user toggle between
+ left, center, and right alignment. One could imagine such a toolbar as part of a text editor. The
+ menu also has a separator followed by another menu item labeled "Publish", though that menu item
+ is disabled.</p>
- </dl><p>Once all the nodes have been processed as described above, the
- user agent must the post-process the menu as follows:</p>
+ <pre><button type=menu menu=editmenu>Commands...</button>
+<menu type="popup" id="editmenu">
+ <menuitem type="radio" radiogroup="alignment" checked="checked"
+ label="Left" icon="icons/alL.png" onclick="setAlign('left')">
+ <menuitem type="radio" radiogroup="alignment"
+ label="Center" icon="icons/alC.png" onclick="setAlign('center')">
+ <menuitem type="radio" radiogroup="alignment"
+ label="Right" icon="icons/alR.png" onclick="setAlign('right')">
+ <hr>
+ <menuitem type="command" disabled
+ label="Publish" icon="icons/pub.png" onclick="publish()">
+</menu></pre>
- <ol><li>Except for separators, any menu item with no label, or whose
- label is the empty string, must be removed.</li>
+ </div>
- <li>Any sequence of two or more separators in a row must be
- collapsed to a single separator.</li>
- <li>Any separator at the start or end of the menu must be
- removed.</li>
+ <h4 id=context-menus><span class=secno>4.11.5 </span>Context menus</h4>
- </ol></div>
+ <h5 id=declaring-a-context-menu><span class=secno>4.11.5.1 </span>Declaring a context menu</h5>
+ <p>The <dfn id=attr-contextmenu title=attr-contextmenu><code>contextmenu</code></dfn> attribute gives the element's
+ context menu. The value must be the <a href=#concept-id title=concept-id>ID</a> of a <code><a href=#the-menu-element>menu</a></code>
+ element in the same <a href=#home-subtree>home subtree</a> whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code>
+ attribute is in the <a href=#popup-menu-state title="popup menu state">popup menu</a> state.</p>
+ <p class=note>When a user right-clicks on an element with a <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> attribute, the user agent will first fire a <code title=event-contextmenu>contextmenu</code> event at the element, and then, if that event is not
+ canceled, a <code title=event-show>show</code> event at the <code><a href=#the-menu-element>menu</a></code> element.</p>
+ <div class=example>
- <h5 id=context-menus><span class=secno>4.11.4.3 </span><dfn>Context menus</dfn></h5>
+ <p>Here is an example of a context menu for an input control:</p>
- <p>The <dfn id=attr-contextmenu title=attr-contextmenu><code>contextmenu</code></dfn>
- attribute gives the element's <a href=#context-menus title="context menus">context
- menu</a>. The value must be the <a href=#concept-id title=concept-id>ID</a> of a <code><a href=#the-menu-element>menu</a></code> element in the
- DOM. <span class=impl>If the node that would be obtained by
- invoking the <code title=dom-Document-getElementById><a href=#dom-document-getelementbyid>getElementById()</a></code> method
- using the attribute's value as the only argument is null or not a
- <code><a href=#the-menu-element>menu</a></code> element, then the element has no assigned context
- menu. Otherwise, the element's assigned context menu is the element
- so identified.</span></p>
+ <pre><form name="npc">
+ <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
+ <menu type=popup id=namemenu>
+ <menuitem label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
+ <menuitem label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
+ </menu>
+</form></pre>
+ <p>This adds two items to the control's context menu, one called "Pick random name", and one
+ called "Prefill other fields based on name". They invoke scripts that are not shown in the
+ example above.</p>
+
+ </div>
+
+
+
<div class=impl>
- <p>When an element's context menu is requested (e.g. by the user
- right-clicking the element, or pressing a context menu key), the
- user agent must apply the appropriate rules from the following
+ <h5 id=processing-model-2><span class=secno>4.11.5.2 </span>Processing model</h5>
+
+ <p>If the there is no element with the ID given by an element's <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> attribute's value in the element's <a href=#home-subtree>home
+ subtree</a>, or if the first such element is not a <code><a href=#the-menu-element>menu</a></code> element whose <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#popup-menu-state title="popup menu state">popup
+ menu</a> state, then the element has no assigned context menu. Otherwise, the element's
+ assigned context menu is the first such element.</p>
+
+ <p>When an element's context menu is requested (e.g. by the user right-clicking the element, or
+ pressing a context menu key), the user agent must apply the appropriate rules from the following
list:</p>
<dl class=switch><dt>If the user requested a context menu using a pointing device</dt>
@@ -58498,99 +58465,49 @@
<dt>Otherwise</dt>
- <dd><p>The user agent must <a href=#fire-a-synthetic-mouse-event title="fire a synthetic mouse
- event">fire a synthetic mouse event named <code title=event-contextmenu>contextmenu</code></a> that bubbles
- and is cancelable at the element for which the menu was
- requested.</dd>
+ <dd><p>The user agent must <a href=#fire-a-synthetic-mouse-event title="fire a synthetic mouse event">fire a synthetic mouse
+ event named <code title=event-contextmenu>contextmenu</code></a> that bubbles and is
+ cancelable at the element for which the menu was requested.</dd>
- </dl><p class=note>Typically, therefore, the firing of the <code title=event-contextmenu>contextmenu</code> event will be the
- default action of a <code title=mouseup>mouseup</code> or <code title=event-keyup>keyup</code> event. The exact sequence of events
- is UA-dependent, as it will vary based on platform conventions.</p>
+ </dl><p class=note>Typically, therefore, the firing of the <code title=event-contextmenu>contextmenu</code> event will be the default action of a <code title=mouseup>mouseup</code> or <code title=event-keyup>keyup</code> event. The exact sequence
+ of events is UA-dependent, as it will vary based on platform conventions.</p>
<p>The default action of the <code title=event-contextmenu>contextmenu</code> event depends on
- whether the element or one of its ancestors has a context menu
- assigned (using the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> attribute) or not. If
- there is no context menu assigned, the default action must be for
- the user agent to show its default context menu, if it has one.</p>
+ whether or not the element or one of its ancestors has a context menu assigned (using the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> attribute) when the event dispatch has completed. If
+ there is no context menu assigned, the default action must be for the user agent to show its
+ default context menu, if it has one.</p>
- <p>If the element or one of its ancestors <em>does</em> have a
- context menu assigned, then the user agent must <a href=#fire-a-simple-event>fire a simple
- event</a> named <code title=event-show>show</code> at the
- <code><a href=#the-menu-element>menu</a></code> element of the context menu of the nearest
- ancestor (including the element itself) with one assigned.</p>
- <!-- v2: include modifier key information -->
+ <p>If the element or one of its ancestors <em>does</em> have a context menu assigned, then the
+ user agent must <a href=#fire-a-simple-event>fire a simple event</a> named <code title=event-show>show</code> that
+ is cancelable at the <code><a href=#the-menu-element>menu</a></code> element of the context menu of the nearest ancestor
+ (including the element itself) with one assigned.</p> <!-- v2: include modifier key information
+ -->
- <p>The default action of <em>this</em> event is that the user agent
- must show a context menu <a href=#building-menus-and-toolbars title="building menus and
- toolbars">built</a> from the <code><a href=#the-menu-element>menu</a></code> element.</p>
+ <p>The default action of <em>this</em> event is that the user agent must <a href=#construct-and-show-a-menu title="construct
+ and show a menu">construct and show</a> the menu for the <code><a href=#the-menu-element>menu</a></code> element.</p>
- <p>The user agent may also provide access to its default context
- menu, if any, with the context menu shown. For example, it could
- merge the menu items from the two menus together, or provide the
+ <p>The user agent may also provide access to its default context menu, if any, with the context
+ menu shown. For example, it could merge the menu items from the two menus together, or provide the
page's context menu as a submenu of the default menu.</p>
- <p>If the user dismisses the menu without making a selection,
- nothing in particular happens.</p>
+ <p>User agents may provide means for bypassing the context menu processing model, ensuring that
+ the user can always access the UA's default context menus. For example, the user agent could
+ handle right-clicks that have the Shift key depressed in such a way that it does not fire the
+ <code title=event-contextmenu>contextmenu</code> event and instead always shows the default
+ context menu.</p>
- <p>If the user selects a menu item that represents a <a href=#concept-command title=concept-command>command</a>, then the UA must invoke
- that command's <a href=#command-facet-action title=command-facet-Action>Action</a>.</p>
+ <p>The <dfn id=dom-contextmenu title=dom-contextMenu><code>contextMenu</code></dfn> IDL attribute must
+ <a href=#reflect>reflect</a> the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> content attribute.</p>
- <p>Context menus must not, while being shown, reflect changes in the
- DOM; they are constructed as the default action of the <code title=event-show>show</code> event and must remain as constructed
- until dismissed.</p>
-
- <p>User agents may provide means for bypassing the context menu
- processing model, ensuring that the user can always access the UA's
- default context menus. For example, the user agent could handle
- right-clicks that have the Shift key depressed in such a way that it
- does not fire the <code title=event-contextmenu>contextmenu</code>
- event and instead always shows the default context menu.</p>
-
- <p>The <dfn id=dom-contextmenu title=dom-contextMenu><code>contextMenu</code></dfn>
- IDL attribute must <a href=#reflect>reflect</a> the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> content attribute.</p>
-
</div>
- <div class=example>
- <p>Here is an example of a context menu for an input control:</p>
- <pre><form name="npc">
- <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
- <menu type=context id=namemenu>
- <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
- <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
- </menu>
-</form></pre>
- <p>This adds two items to the control's context menu, one called
- "Pick random name", and one called "Prefill other fields based on
- name". They invoke scripts that are not shown in the example
- above.</p>
+ <h4 id=commands><span class=secno>4.11.6 </span>Commands</h4>
- </div>
+ <h5 id=facets-0><span class=secno>4.11.6.1 </span>Facets</h5>
-
-
- <div class=impl>
-
- <h5 id=toolbars><span class=secno>4.11.4.4 </span><dfn>Toolbars</dfn></h5>
-
- <p>When a <code><a href=#the-menu-element>menu</a></code> element has a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, then the user agent
- must <a href=#building-menus-and-toolbars title="building menus and toolbars">build</a> the
- menu for that <code><a href=#the-menu-element>menu</a></code> element, and use the result in the
- rendering.</p>
-
- <p>The user agent must reflect changes made to the
- <code><a href=#the-menu-element>menu</a></code>'s DOM, by immediately <a href=#building-menus-and-toolbars title="building menus
- and toolbars">rebuilding</a> the menu.</p>
-
- </div>
-
-
-
- <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
@@ -58828,17 +58745,28 @@
</div>
<!--TOPIC:HTML-->
- <hr><p>User agents may expose the <a href=#concept-command title=concept-command>commands</a> whose <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a> facet is false
- (visible) and whose elements are <a href=#in-a-document>in a
- <code>Document</code></a>. For example, such commands could be
- listed in the user agent's menu bar. User agents are encouraged to
- do this especially for commands that have <a href=#command-facet-accesskey title=command-facet-AccessKey>Access Keys</a>, as a way to
- advertise those keys to the user.</p>
+ <hr><p id=expose-commands-in-ui>User agents may expose the <a href=#concept-command title=concept-command>commands</a> that match the following criteria:</p>
+ <ul class=brief><li>The <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a> facet is false (visible)</li>
+ <li>The element is <a href=#in-a-document>in a <code>Document</code></a> that has an associated <a href=#browsing-context>browsing
+ context</a>.</li>
+
+ <li>Neither the element nor any of its ancestors has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code>
+ attribute specified.</li>
+
+ <li>The element is not a <code><a href=#the-menuitem-element>menuitem</a></code> element, or it is a child of a <a href=#currently-relevant-menu-element>currently
+ relevant <code>menu</code> element</a>, or it has an <a href=#command-facet-accesskey title=command-facet-accesskey>Access Key</a>.</li>
+
+ </ul><p>User agents are encouraged to do this especially for commands that have <a href=#command-facet-accesskey title=command-facet-AccessKey>Access Keys</a>, as a way to advertise those keys to the
+ user.</p>
+
+ <p class=example>For example, such commands could be listed in the user agent's menu bar.</p>
+
+
<div class=impl>
- <h5 id=using-the-a-element-to-define-a-command><span class=secno>4.11.5.1 </span><dfn title=a-command>Using the <code>a</code> element to define a command</dfn></h5>
+ <h5 id=using-the-a-element-to-define-a-command><span class=secno>4.11.6.2 </span><dfn title=a-command>Using the <code>a</code> element to define a command</dfn></h5>
<p>An <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute <a href=#concept-command title=concept-command>defines a command</a>.</p>
@@ -58889,7 +58817,7 @@
element.</p>
- <h5 id=using-the-button-element-to-define-a-command><span class=secno>4.11.5.2 </span><dfn title=button-command>Using the <code>button</code> element to define a command</dfn></h5>
+ <h5 id=using-the-button-element-to-define-a-command><span class=secno>4.11.6.3 </span><dfn title=button-command>Using the <code>button</code> element to define a command</dfn></h5>
<p>A <code><a href=#the-button-element>button</a></code> element always <a href=#concept-command title=concept-command>defines a command</a>.</p>
@@ -58903,14 +58831,14 @@
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>
+ <h5 id=using-the-input-element-to-define-a-command><span class=secno>4.11.6.4 </span><dfn title=input-command>Using the <code>input</code> element to define a command</dfn></h5>
<p>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 one of the <a href="#submit-button-state-(type=submit)" title=attr-input-type-submit>Submit Button</a>, <a href="#reset-button-state-(type=reset)" title=attr-input-type-reset>Reset Button</a>, <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a>, <a href="#button-state-(type=button)" title=attr-input-type-button>Button</a>, <a href="#radio-button-state-(type=radio)" title=attr-input-type-radio>Radio Button</a>, or <a href="#checkbox-state-(type=checkbox)" title=attr-input-type-checkbox>Checkbox</a> states <a href=#concept-command title=concept-command>defines a command</a>.</p>
<p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
is "radio" if the <code title=attr-input-type><a href=#attr-input-type>type</a></code>
- attribute is in the <code title=attr-input-type-radio><a href="#radio-button-state-(type=radio)">Radio
- Button</a></code> state, "checkbox" if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <code title=attr-input-type-checkbox><a href="#checkbox-state-(type=checkbox)">Checkbox</a></code> state, and
+ attribute is in the <a href="#radio-button-state-(type=radio)" title=attr-input-type-radio>Radio
+ Button</a> state, "checkbox" if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href="#checkbox-state-(type=checkbox)" title=attr-input-type-checkbox>Checkbox</a> state, and
"command" otherwise.</p>
<p>The <a href=#command-facet-id title=command-facet-ID>ID</a> of the command is
@@ -58975,7 +58903,7 @@
element.</p>
- <h5 id=using-the-option-element-to-define-a-command><span class=secno>4.11.5.4 </span><dfn title=option-command>Using the <code>option</code> element to define a command</dfn></h5>
+ <h5 id=using-the-option-element-to-define-a-command><span class=secno>4.11.6.5 </span><dfn title=option-command>Using the <code>option</code> element to define a command</dfn></h5>
<p>An <code><a href=#the-option-element>option</a></code> element with an ancestor
<code><a href=#the-select-element>select</a></code> element and either no <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute or a <code title=attr-option-value><a href=#attr-option-value>value</a></code> attribute that is not the
@@ -59031,13 +58959,13 @@
- <h5 id=using-the-command-element-to-define-a-command><span class=secno>4.11.5.5 </span>Using the <dfn title=command-element><code>command</code></dfn> element to define
+ <h5 id=using-the-menuitem-element-to-define-a-command><span class=secno>4.11.6.6 </span>Using the <dfn title=command-element><code>menuitem</code></dfn> element to define
a command</h5>
- <p>A <code><a href=#the-command-element>command</a></code> element that does not have a <code title=attr-command-command><a href=#attr-command-command>command</a></code> attribute <a href=#concept-command title=concept-command>defines a command</a>.</p>
+ <p>A <code><a href=#the-menuitem-element>menuitem</a></code> element that does not have a <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code> attribute <a href=#concept-command title=concept-command>defines a command</a>.</p>
<p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
- is "radio" if the <code><a href=#the-command-element>command</a></code>'s <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is
+ is "radio" if the <code><a href=#the-menuitem-element>menuitem</a></code>'s <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is
"<code>radio</code>", "checkbox" if the attribute's value is
"<code>checkbox</code>", and "command" otherwise.</p>
@@ -59047,16 +58975,16 @@
command is an <a href=#anonymous-command>anonymous command</a>.</p>
<p>The <a href=#command-facet-label title=command-facet-Label>Label</a> of the command
- is the value of the element's <code title=attr-command-label><a href=#attr-command-label>label</a></code> attribute, if there is one,
+ is the value of the element's <code title=attr-menuitem-label><a href=#attr-menuitem-label>label</a></code> attribute, if there is one,
or the empty string if it doesn't.</p>
<p>The <a href=#command-facet-hint title=command-facet-Hint>Hint</a> of the command
- is the string given by the element's <code title=attr-command-title><a href=#attr-command-title>title</a></code> attribute, if any, and the
+ is the string given by the element's <code title=attr-menuitem-title><a href=#attr-menuitem-title>title</a></code> attribute, if any, and the
empty string if the attribute is absent.</p>
<p>The <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the command
is the <a href=#absolute-url>absolute URL</a> obtained from <a href=#resolve-a-url title="resolve
- a url">resolving</a> the value of the element's <code title=attr-command-icon><a href=#attr-command-icon>icon</a></code> attribute, relative to the
+ a url">resolving</a> the value of the element's <code title=attr-menuitem-icon><a href=#attr-menuitem-icon>icon</a></code> attribute, relative to the
element, if it has such an attribute and resolving it is
successful. Otherwise, there is no <a href=#command-facet-icon title=command-facet-Icon>Icon</a> for the command.</p>
@@ -59070,11 +58998,11 @@
<p>The <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled
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
+ ancestors is <a href=#inert>inert</a>, or if the element has a <code title=attr-menuitem-disabled><a href=#attr-menuitem-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
+ of the command is true (checked) if the element has a <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code> attribute, and false
otherwise.</p>
<p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the
@@ -59086,9 +59014,9 @@
- <h5 id=using-the-command-attribute-on-command-elements-to-define-a-command-indirectly><span class=secno>4.11.5.6 </span><dfn title=command-command-command>Using the <code title=attr-command-command>command</code> attribute on <code>command</code> elements to define a command indirectly</dfn></h5>
+ <h5 id=using-the-command-attribute-on-menuitem-elements-to-define-a-command-indirectly><span class=secno>4.11.6.7 </span><dfn title=command-menuitem-command>Using the <code title=attr-menuitem-command>command</code> attribute on <code>menuitem</code> elements to define a command indirectly</dfn></h5>
- <p>A <code><a href=#the-command-element>command</a></code> element with a <a href=#master-command>master command</a>
+ <p>A <code><a href=#the-menuitem-element>menuitem</a></code> element with a <a href=#master-command>master command</a>
<a href=#concept-command title=concept-command>defines a command</a>.</p>
<p>The <a href=#command-facet-type title=command-facet-Type>Type</a> of the command
@@ -59135,7 +59063,7 @@
- <h5 id=using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.5.7 </span><dfn title=label-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</dfn></h5>
+ <h5 id=using-the-accesskey-attribute-on-a-label-element-to-define-a-command><span class=secno>4.11.6.8 </span><dfn title=label-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>label</code> element to define a command</dfn></h5>
<p>A <code><a href=#the-label-element>label</a></code> element that has an <a href=#assigned-access-key>assigned access
key</a> and a <a href=#labeled-control>labeled control</a> and whose
@@ -59176,7 +59104,7 @@
- <h5 id=using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.5.8 </span><dfn title=legend-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</dfn></h5>
+ <h5 id=using-the-accesskey-attribute-on-a-legend-element-to-define-a-command><span class=secno>4.11.6.9 </span><dfn title=legend-command>Using the <code title=attr-accesskey>accesskey</code> attribute on a <code>legend</code> element to define a command</dfn></h5>
<p>A <code><a href=#the-legend-element>legend</a></code> element that has an <a href=#assigned-access-key>assigned access
key</a> and is a child of a <code><a href=#the-fieldset-element>fieldset</a></code> element that
@@ -59220,7 +59148,7 @@
- <h5 id=using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.5.9 </span><dfn title=accesskey-command>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</dfn></h5>
+ <h5 id=using-the-accesskey-attribute-to-define-a-command-on-other-elements><span class=secno>4.11.6.10 </span><dfn title=accesskey-command>Using the <code title=attr-accesskey>accesskey</code> attribute to define a command on other elements</dfn></h5>
<p>An element that has an <a href=#assigned-access-key>assigned access key</a> <a href=#concept-command title=concept-command>defines a command</a>.</p>
@@ -59283,7 +59211,7 @@
</ol></div>
- <h4 id=the-dialog-element><span class=secno>4.11.6 </span>The <dfn><code>dialog</code></dfn> element</h4>
+ <h4 id=the-dialog-element><span class=secno>4.11.7 </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>
@@ -59737,7 +59665,7 @@
</div>
- <h5 id=anchor-points><span class=secno>4.11.6.1 </span>Anchor points</h5>
+ <h5 id=anchor-points><span class=secno>4.11.7.1 </span>Anchor points</h5>
<p class=critical>This section will eventually be moved to a CSS
specification; it is specified here only on an interim basis until
@@ -61927,14 +61855,8 @@
<li><code><a href=#the-option-element>option</a></code> elements that are <a href=#concept-option-disabled title=concept-option-disabled>disabled</a></li>
- <li><code><a href=#the-command-element>command</a></code> elements that have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
+ <li><code><a href=#the-menuitem-element>menuitem</a></code> elements that have a <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code> attribute</li>
- <li><code><a href=#the-li-element>li</a></code> elements that are children of
- <code><a href=#the-menu-element>menu</a></code> elements, and that have a child element that
- defines a <a href=#concept-command title=concept-command>command</a>, if the
- first such element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet
- is true (disabled)</li>
-
<li><code><a href=#the-fieldset-element>fieldset</a></code> elements that have a <code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code> attribute</li>
</ul><p class=note>This definition is used to determine what elements can be <a href=#specially-focusable title="tabindex
@@ -62030,7 +61952,7 @@
<li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href="#submit-button-state-(type=submit)" title=attr-input-type-submit>Submit Button</a>, <a href="#image-button-state-(type=image)" title=attr-input-type-image>Image Button</a>, <a href="#reset-button-state-(type=reset)" title=attr-input-type-reset>Reset Button</a>, or <a href="#button-state-(type=button)" title=attr-input-type-button>Button</a> state</li>
- <li><code><a href=#the-command-element>command</a></code> elements that do not have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
+ <li><code><a href=#the-menuitem-element>menuitem</a></code> elements that do not have a <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code> attribute</li>
<li>elements that have their <a href=#specially-focusable>tabindex focus flag</a> set</li>
@@ -62148,14 +62070,8 @@
<li><code><a href=#the-option-element>option</a></code> elements that are not <a href=#concept-option-disabled title=concept-option-disabled>disabled</a></li>
- <li><code><a href=#the-command-element>command</a></code> elements that do not have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
+ <li><code><a href=#the-menuitem-element>menuitem</a></code> elements that do not have a <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code> attribute</li>
- <li><code><a href=#the-li-element>li</a></code> elements that are children of
- <code><a href=#the-menu-element>menu</a></code> elements, and that have a child element that
- defines a <a href=#concept-command title=concept-command>command</a>, if the
- first such element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet
- is false (not disabled)</li>
-
<li><code><a href=#the-fieldset-element>fieldset</a></code> elements that do not have a <code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code> attribute</li>
</ul></dd>
@@ -62190,12 +62106,12 @@
<li><code><a href=#the-option-element>option</a></code> elements whose <a href=#concept-option-selectedness title=concept-option-selectedness>selectedness</a> is
true</li>
- <li><code><a href=#the-command-element>command</a></code> elements whose <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is in the <a href=#attr-command-type-state-checkbox title=attr-command-type-state-checkbox>Checkbox</a> state
- and that have a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>
+ <li><code><a href=#the-menuitem-element>menuitem</a></code> elements whose <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is in the <a href=#attr-menuitem-type-state-checkbox title=attr-menuitem-type-state-checkbox>Checkbox</a> state
+ and that have a <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code>
attribute</li>
- <li><code><a href=#the-command-element>command</a></code> elements whose <code title=attr-command-type><a href=#attr-command-type>type</a></code> attribute is in the <a href=#attr-command-type-state-radio title=attr-command-type-state-radio>Radio</a> state and that
- have a <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>
+ <li><code><a href=#the-menuitem-element>menuitem</a></code> elements whose <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code> attribute is in the <a href=#attr-menuitem-type-state-radio title=attr-menuitem-type-state-radio>Radio</a> state and that
+ have a <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code>
attribute</li>
</ul></dd>
@@ -62240,8 +62156,8 @@
<li><code><a href=#the-option-element>option</a></code> elements that have a <code title=attr-option-selected><a href=#attr-option-selected>selected</a></code> attribute</li>
<!--
- <li><code>command</code> elements that have a <code
- title="attr-command-default">default</code> attribute</li>
+ <li><code>menuitem</code> elements that have a <code
+ title="attr-menuitem-default">default</code> attribute</li>
-->
</ul></dd>
@@ -73029,7 +72945,7 @@
<div class=impl>
<!-- SCRIPT EXEC (marks areas related to creation of scripts) -->
- <h4 id=processing-model-2><span class=secno>7.1.3 </span>Processing model</h4>
+ <h4 id=processing-model-3><span class=secno>7.1.3 </span>Processing model</h4>
<h5 id=definitions-0><span class=secno>7.1.3.1 </span>Definitions</h5>
@@ -73582,7 +73498,7 @@
release the <a href=#storage-mutex>storage mutex</a>.</p>
- <h5 id=processing-model-3><span class=secno>7.1.4.2 </span>Processing model</h5>
+ <h5 id=processing-model-4><span class=secno>7.1.4.2 </span>Processing model</h5>
<p>An <a href=#event-loop>event loop</a> must continually run through the
following steps for as long as it exists:</p>
@@ -77064,7 +76980,7 @@
<li><code><a href=#the-textarea-element>textarea</a></code> elements</li>
- <li><code><a href=#the-command-element>command</a></code> elements</li>
+ <li><code><a href=#the-menuitem-element>menuitem</a></code> elements</li>
<li>Elements with a <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code>
attribute set, if that would enable the user agent to allow the
@@ -77578,7 +77494,7 @@
<div class=impl>
- <h4 id=processing-model-4><span class=secno>8.5.3 </span>Processing model</h4>
+ <h4 id=processing-model-5><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.
@@ -77629,19 +77545,17 @@
<a href=#assigned-access-key>assigned access key</a> unless the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute is changed
or the element is moved to another <code><a href=#document>Document</a></code>.</p>
- <p>When the user presses the key combination corresponding to the
- <a href=#assigned-access-key>assigned access key</a> for an element, if the element
- <a href=#concept-command title=concept-command>defines a command</a>, the
- command's <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden
- State</a> facet is false (visible), the command's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet is
- also false (enabled), and the element is <a href=#in-a-document>in a
- <code>Document</code></a>, then the user agent must trigger the
- <a href=#command-facet-action title=command-facet-Action>Action</a> of the command.</p>
+ <p>When the user presses the key combination corresponding to the <a href=#assigned-access-key>assigned access key</a>
+ for an element, if the element <a href=#concept-command title=concept-command>defines a command</a>, the
+ command's <a href=#command-facet-hiddenstate title=command-facet-HiddenState>Hidden State</a> facet is false (visible),
+ the command's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet is also false
+ (enabled), the element is <a href=#in-a-document>in a <code>Document</code></a> that has an associated
+ <a href=#browsing-context>browsing context</a>, and neither the element nor any of its ancestors has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute specified, then the user agent must trigger the <a href=#command-facet-action title=command-facet-Action>Action</a> of the command.</p>
- <p class=note>User agents might expose elements that have an <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute in other ways as
- well, e.g. in a menu displayed in response to a specific key
- combination.</p> <!-- the actual conformance criteria for this is in
- the section that defines commands -->
+ <p class=note>User agents <a href=#expose-commands-in-ui>might expose</a> elements that have
+ an <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> attribute in other ways as well, e.g. in a menu
+ displayed in response to a specific key combination.</p> <!-- the actual conformance criteria for
+ this is in the section that defines commands -->
<hr><p>The <dfn id=dom-accesskey title=dom-accessKey><code>accessKey</code></dfn> IDL
attribute must <a href=#reflect>reflect</a> the <code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute.</p>
@@ -81809,7 +81723,7 @@
<a href=#permissible-worker>permissible worker</a>.</p>
- <h4 id=processing-model-5><span class=secno>9.2.4 </span>Processing model</h4>
+ <h4 id=processing-model-6><span class=secno>9.2.4 </span>Processing model</h4>
<p>When a user agent is to <dfn id=run-a-worker>run a worker</dfn> for a script with
<a href=#url>URL</a> <var title="">url</var>, a <a href=#browsing-context>browsing
@@ -83138,7 +83052,7 @@
</ul><p>These values are not currently exposed on the interface.</p>
- <h4 id=processing-model-6><span class=secno>10.2.3 </span>Processing model</h4>
+ <h4 id=processing-model-7><span class=secno>10.2.3 </span>Processing model</h4>
<p>The resource indicated in the argument to the <code title=dom-EventSource><a href=#dom-eventsource>EventSource</a></code> constructor is <a href=#fetch title=fetch>fetched</a> when the constructor is run.</p>
@@ -86606,12 +86520,10 @@
<dl><dt><dfn id=void-elements>Void elements</dfn></dt>
- <dd><code><a href=#the-area-element>area</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#the-br-element>br</a></code>,
- <code><a href=#the-col-element>col</a></code>, <code><a href=#the-command-element>command</a></code>, <code><a href=#the-embed-element>embed</a></code>,
- <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>,
- <code><a href=#the-keygen-element>keygen</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#the-meta-element>meta</a></code>,
- <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>, <code><a href=#the-track-element>track</a></code>,
- <code><a href=#the-wbr-element>wbr</a></code></dd>
+ <dd><code><a href=#the-area-element>area</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#the-br-element>br</a></code>, <code><a href=#the-col-element>col</a></code>, <code><a href=#the-embed-element>embed</a></code>,
+ <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>, <code><a href=#the-keygen-element>keygen</a></code>, <code><a href=#the-link-element>link</a></code>,
+ <code><a href=#the-menuitem-element>menuitem</a></code>, <code><a href=#the-meta-element>meta</a></code>, <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>,
+ <code><a href=#the-track-element>track</a></code>, <code><a href=#the-wbr-element>wbr</a></code></dd>
<!-- see also other places that say VOIDLIST -->
<dt><dfn id=raw-text-elements>Raw text elements</dfn></dt>
@@ -88485,7 +88397,7 @@
<code><a href=#the-base-element>base</a></code>, <code><a href=#basefont>basefont</a></code>, <code><a href=#bgsound>bgsound</a></code>,
<code><a href=#the-blockquote-element>blockquote</a></code>, <code><a href=#the-body-element>body</a></code>, <code><a href=#the-br-element>br</a></code>,
<code><a href=#the-button-element>button</a></code>, <code><a href=#the-caption-element>caption</a></code>, <code><a href=#center>center</a></code>,
- <code><a href=#the-col-element>col</a></code>, <code><a href=#the-colgroup-element>colgroup</a></code>, <code><a href=#the-command-element>command</a></code>,
+ <code><a href=#the-col-element>col</a></code>, <code><a href=#the-colgroup-element>colgroup</a></code>, <code><a href=#the-menuitem-element>menuitem</a></code>,
<code><a href=#the-dd-element>dd</a></code>, <code><a href=#the-details-element>details</a></code>, <code><a href=#dir>dir</a></code>,
<code><a href=#the-div-element>div</a></code>, <code><a href=#the-dl-element>dl</a></code>, <code><a href=#the-dt-element>dt</a></code>,
<code><a href=#the-embed-element>embed</a></code>, <code><a href=#the-fieldset-element>fieldset</a></code>, <code><a href=#the-figcaption-element>figcaption</a></code>,
@@ -95324,15 +95236,13 @@
<p>Append a U+003E GREATER-THAN SIGN character (>).</p>
- <p>If <var title="">current node</var> is an
- <code><a href=#the-area-element>area</a></code>, <code><a href=#the-base-element>base</a></code>, <code><a href=#basefont>basefont</a></code>,
- <code><a href=#bgsound>bgsound</a></code>, <code><a href=#the-br-element>br</a></code>, <code><a href=#the-col-element>col</a></code>,
- <code><a href=#the-command-element>command</a></code>, <code><a href=#the-embed-element>embed</a></code>, <code><a href=#frame>frame</a></code>,
- <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>,
- <code><a href=#the-keygen-element>keygen</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#the-meta-element>meta</a></code>,
- <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>, <code><a href=#the-track-element>track</a></code> or
- <code><a href=#the-wbr-element>wbr</a></code> element, then continue on to the next child
- node at this point.</p> <!-- VOIDLIST superset -->
+ <p>If <var title="">current node</var> is an <code><a href=#the-area-element>area</a></code>, <code><a href=#the-base-element>base</a></code>,
+ <code><a href=#basefont>basefont</a></code>, <code><a href=#bgsound>bgsound</a></code>, <code><a href=#the-br-element>br</a></code>, <code><a href=#the-col-element>col</a></code>,
+ <code><a href=#the-embed-element>embed</a></code>, <code><a href=#frame>frame</a></code>, <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-img-element>img</a></code>,
+ <code><a href=#the-input-element>input</a></code>, <code><a href=#the-keygen-element>keygen</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#the-menuitem-element>menuitem</a></code>,
+ <code><a href=#the-meta-element>meta</a></code>, <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>, <code><a href=#the-track-element>track</a></code> or
+ <code><a href=#the-wbr-element>wbr</a></code> element, then continue on to the next child node at this point.</p>
+ <!-- VOIDLIST superset -->
<!-- also, i guess: image and isindex, but we don't list those
because we don't consider those "elements", more "macros", and
thus we should never serialize them -->
@@ -96108,7 +96018,7 @@
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
[hidden], area, base, basefont, command, datalist, head,
-input[type=hidden i], link, menu[type=context i], meta, noembed, noframes,
+input[type=hidden i], link, menu[type=popup i], meta, noembed, noframes,
param, rp, script, source, style, track, title {
display: none;
}
@@ -97626,22 +97536,6 @@
<div class=impl>
- <h4 id=toolbars-0><span class=secno>14.4.5 </span>Toolbars</h4>
-
- <p>When a <code><a href=#the-menu-element>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, the element is
- expected to be treated as a replaced element with a height about two
- lines high and a width derived from the contents of the element.</p>
-
- <p>The element is expected to have, by default, the appearance of a
- toolbar on the user agent's platform. It is expected to contain the
- menu that is <a href=#building-menus-and-toolbars title="building menus and toolbars">built</a>
- from the element.</p>
-
- </div>
-
-
- <div class=impl>
-
<h3 id=bindings><span class=secno>14.5 </span>Bindings</h3>
<h4 id=introduction-14><span class=secno>14.5.1 </span>Introduction</h4>
@@ -97678,6 +97572,11 @@
'inline-block' box rendered as a button whose contents are the
contents of the element.</p>
+ <p>When the <code><a href=#the-button-element>button</a></code> element's <code title=attr-button-type><a href=#attr-button-type>type</a></code> attribute is
+ in the <a href=#attr-button-type-menu-state title=attr-button-type-menu-state>Menu</a> state, the user agent is expected to
+ indicate that activating the element will display a menu, e.g. by displaying a down-pointing
+ triangle after the button's label.</p>
+
</div>
@@ -101235,7 +101134,7 @@
<td><a href=#global-attributes title="global attributes">globals</a>;
<code title=attr-colgroup-span><a href=#attr-colgroup-span>span</a></code></td>
<td><code><a href=#htmltablecolelement>HTMLTableColElement</a></code></td>
- <tr><th><code><a href=#the-command-element>command</a></code></th>
+ <tr><th><code><a href=#the-menuitem-element>menuitem</a></code></th>
<td>Menu command</td>
<td><a href=#metadata-content title="Metadata content">metadata</a>;
<a href=#flow-content title="Flow content">flow</a>;
@@ -101244,14 +101143,14 @@
<a href=#phrasing-content title="Phrasing content">phrasing</a></td>
<td>empty</td>
<td><a href=#global-attributes title="global attributes">globals</a>;
- <code title=attr-command-type><a href=#attr-command-type>type</a></code>;
- <code title=attr-command-label><a href=#attr-command-label>label</a></code>;
- <code title=attr-command-icon><a href=#attr-command-icon>icon</a></code>;
- <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code>;
- <code title=attr-command-checked><a href=#attr-command-checked>checked</a></code>;
- <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>radiogroup</a></code>;
- <code title=attr-command-command><a href=#attr-command-command>command</a></code></td>
- <td><code><a href=#htmlcommandelement>HTMLCommandElement</a></code></td>
+ <code title=attr-menuitem-type><a href=#attr-menuitem-type>type</a></code>;
+ <code title=attr-menuitem-label><a href=#attr-menuitem-label>label</a></code>;
+ <code title=attr-menuitem-icon><a href=#attr-menuitem-icon>icon</a></code>;
+ <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>disabled</a></code>;
+ <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>checked</a></code>;
+ <code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>radiogroup</a></code>;
+ <code title=attr-menuitem-command><a href=#attr-menuitem-command>command</a></code></td>
+ <td><code><a href=#htmlmenuitemelement>HTMLMenuItemElement</a></code></td>
<tr><th><code><a href=#the-data-element>data</a></code></th>
<td>Machine-readable equivalent</td>
<td><a href=#flow-content title="Flow content">flow</a>;
@@ -101609,7 +101508,7 @@
<tr><th><code><a href=#the-li-element>li</a></code></th>
<td>List item</td>
<td>none</td>
- <td><code><a href=#the-ol-element>ol</a></code>; <code><a href=#the-ul-element>ul</a></code>; <code><a href=#the-menu-element>menu</a></code></td>
+ <td><code><a href=#the-ol-element>ol</a></code>; <code><a href=#the-ul-element>ul</a></code>; <code><a href=#the-menu-element>menu</a></code>*</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-li-value><a href=#attr-li-value>value</a></code>*</td>
@@ -101652,11 +101551,14 @@
<td><code><a href=#htmlelement>HTMLElement</a></code></td>
<tr><th><code><a href=#the-menu-element>menu</a></code></th>
<td>Menu of commands</td>
- <td><a href=#flow-content title="Flow content">flow</a>;
- <a href=#interactive-content title="Interactive content">interactive</a>*</td>
<td><a href=#flow-content title="Flow content">flow</a></td>
+ <td><a href=#flow-content title="Flow content">flow</a>;
+ <code><a href=#the-menu-element>menu</a></code>*</td>
<td><code><a href=#the-li-element>li</a></code>*;
- <a href=#flow-content title="Flow content">flow</a></td>
+ <a href=#flow-content title="Flow content">flow</a>*;
+ <code><a href=#the-menuitem-element>menuitem</a></code>*;
+ <code><a href=#the-hr-element>hr</a></code>*;
+ <code><a href=#the-menu-element>menu</a></code>*</td>
<td><a href=#global-attributes title="global attributes">globals</a>;
<code title=attr-menu-type><a href=#attr-menu-type>type</a></code>;
<code title=attr-menu-label><a href=#attr-menu-label>label</a></code></td>
@@ -102153,15 +102055,12 @@
</table><p class=tablenote><small>An asterisk (*) in a cell indicates that the actual rules are more
complicated than indicated in the table above.</small></p>
- <p>† Categories in the "Parents" column refer to parents that
- list the given categories in their content model, not to elements
- that themselves are in those categories. For example, the
- <code><a href=#the-a-element>a</a></code> element's "Parents" column says "phrasing", so any
- element whose content model contains the "phrasing" category could
- be a parent of an <code><a href=#the-a-element>a</a></code> element. Since the "flow" category
- includes all the "phrasing" elements, that means the
- <code><a href=#the-address-element>address</a></code> element could be a parent to an <code><a href=#the-a-element>a</a></code>
- element.</p>
+ <p>† Categories in the "Parents" column refer to parents that list the given categories in
+ their content model, not to elements that themselves are in those categories. For example, the
+ <code><a href=#the-a-element>a</a></code> element's "Parents" column says "phrasing", so any element whose content model
+ contains the "phrasing" category could be a parent of an <code><a href=#the-a-element>a</a></code> element. Since the "flow"
+ category includes all the "phrasing" elements, that means the <code><a href=#the-th-element>th</a></code> element could be a
+ parent to an <code><a href=#the-a-element>a</a></code> element.</p>
@@ -102178,7 +102077,6 @@
<tbody><tr><td> <a href=#metadata-content>Metadata content</a>
<td>
<code><a href=#the-base-element>base</a></code>;
- <code><a href=#the-command-element>command</a></code>;
<code><a href=#the-link-element>link</a></code>;
<code><a href=#the-meta-element>meta</a></code>;
<code><a href=#the-noscript-element>noscript</a></code>;
@@ -102205,7 +102103,6 @@
<code><a href=#the-canvas-element>canvas</a></code>;
<code><a href=#the-cite-element>cite</a></code>;
<code><a href=#the-code-element>code</a></code>;
- <code><a href=#the-command-element>command</a></code>;
<code><a href=#the-data-element>data</a></code>;
<code><a href=#the-datalist-element>datalist</a></code>;
<code><a href=#the-del-element>del</a></code>;
@@ -102312,7 +102209,6 @@
<code><a href=#the-canvas-element>canvas</a></code>;
<code><a href=#the-cite-element>cite</a></code>;
<code><a href=#the-code-element>code</a></code>;
- <code><a href=#the-command-element>command</a></code>;
<code><a href=#the-data-element>data</a></code>;
<code><a href=#the-datalist-element>datalist</a></code>;
<code><a href=#the-del-element>del</a></code>;
@@ -102388,7 +102284,6 @@
<code><a href=#the-audio-element>audio</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present);
<code><a href=#the-img-element>img</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present);
<code><a href=#the-input-element>input</a></code> (if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state);
- <code><a href=#the-menu-element>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state);
<code><a href=#the-object-element>object</a></code> (if the <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute is present)<!-- see also comment in <object> section -->;
<code><a href=#the-video-element>video</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present)
@@ -102537,7 +102432,7 @@
<code><a href=#the-audio-element>audio</a></code> (if the <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute is present);
<code><a href=#the-dl-element>dl</a></code> (if the element's children include at least one name-value group);
<code><a href=#the-input-element>input</a></code> (if the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is <em>not</em> in the <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state);
- <code><a href=#the-menu-element>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state or the <a href=#list-state title="list state">list</a> state);
+ <code><a href=#the-menu-element>menu</a></code> (if the <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state);
<code><a href=#the-ol-element>ol</a></code> (if the element's children include at least one <code><a href=#the-li-element>li</a></code> element);
<code><a href=#the-ul-element>ul</a></code> (if the element's children include at least one <code><a href=#the-li-element>li</a></code> element);
<a href=#text-content title="text content">Text</a> that is not <a href=#inter-element-whitespace>inter-element whitespace</a>
@@ -102621,7 +102516,7 @@
<td> Character encoding of the external script resource
<td> <a href=#preferred-mime-name>Preferred MIME name</a> of a character encoding*
<tr><th> <code title="">checked</code>
- <td> <code title=attr-command-checked><a href=#attr-command-checked>command</a></code>;
+ <td> <code title=attr-menuitem-checked><a href=#attr-menuitem-checked>menuitem</a></code>;
<code title=attr-input-checked><a href=#attr-input-checked>input</a></code>
<td> Whether the command or control is checked
<td> <a href=#boolean-attribute>Boolean attribute</a>
@@ -102646,7 +102541,7 @@
<td> Number of columns that the cell is to span
<td> <a href=#valid-non-negative-integer>Valid non-negative integer</a> greater than zero
<tr><th> <code title="">command</code>
- <td> <code title=attr-command-command><a href=#attr-command-command>command</a></code>
+ <td> <code title=attr-menuitem-command><a href=#attr-menuitem-command>menuitem</a></code>
<td> Command definition
<td> <a href=#concept-id title=concept-id>ID</a>*
<tr><th> <code title="">content</code>
@@ -102719,7 +102614,7 @@
<td> <a href=#attribute-text>Text</a>*
<tr><th> <code title="">disabled</code>
<td> <code title=attr-fe-disabled><a href=#attr-fe-disabled>button</a></code>;
- <code title=attr-command-disabled><a href=#attr-command-disabled>command</a></code>;
+ <code title=attr-menuitem-disabled><a href=#attr-menuitem-disabled>menuitem</a></code>;
<code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>fieldset</a></code>;
<code title=attr-fe-disabled><a href=#attr-fe-disabled>input</a></code>;
<code title=attr-fe-disabled><a href=#attr-fe-disabled>keygen</a></code>;
@@ -102838,7 +102733,7 @@
<td> Pragma directive
<td> <a href=#attribute-text>Text</a>*
<tr><th> <code title="">icon</code>
- <td> <code title=attr-command-icon><a href=#attr-command-icon>command</a></code>
+ <td> <code title=attr-menuitem-icon><a href=#attr-menuitem-icon>menuitem</a></code>
<td> Icon for the command
<td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
<tr><th> <code title="">id</code>
@@ -102902,7 +102797,7 @@
"<code title=attr-track-kind-chapters><a href=#attr-track-kind-chapters>chapters</a></code>";
"<code title=attr-track-kind-metadata><a href=#attr-track-kind-metadata>metadata</a></code>"
<tr><th> <code title="">label</code>
- <td> <code title=attr-command-label><a href=#attr-command-label>command</a></code>;
+ <td> <code title=attr-menuitem-label><a href=#attr-menuitem-label>menuitem</a></code>;
<code title=attr-menu-label><a href=#attr-menu-label>menu</a></code>;
<code title=attr-optgroup-label><a href=#attr-optgroup-label>optgroup</a></code>;
<code title=attr-option-label><a href=#attr-option-label>option</a></code>;
@@ -103054,7 +102949,7 @@
"<code title=attr-media-preload-metadata><a href=#attr-media-preload-metadata>metadata</a></code>";
"<code title=attr-media-preload-auto><a href=#attr-media-preload-auto>auto</a></code>"
<tr><th> <code title="">radiogroup</code>
- <td> <code title=attr-command-radiogroup><a href=#attr-command-radiogroup>command</a></code>
+ <td> <code title=attr-menuitem-radiogroup><a href=#attr-menuitem-radiogroup>menuitem</a></code>
<td> Name of group of commands to treat as a radio button group
<td> <a href=#attribute-text>Text</a>
<tr><th> <code title="">readonly</code>
@@ -103204,7 +103099,7 @@
<td> Full term or expansion of abbreviation
<td> <a href=#attribute-text>Text</a>
<tr><th> <code title="">title</code>
- <td> <code title=attr-command-title><a href=#attr-command-title>command</a></code>
+ <td> <code title=attr-menuitem-title><a href=#attr-menuitem-title>menuitem</a></code>
<td> Hint describing the command
<td> <a href=#attribute-text>Text</a>
<tr><th> <code title="">title</code>
@@ -103231,13 +103126,14 @@
<td> Type of button
<td> "<code title=attr-button-type-submit><a href=#attr-button-type-submit>submit</a></code>";
"<code title=attr-button-type-reset><a href=#attr-button-type-reset>reset</a></code>";
- "<code title=attr-button-type-button><a href=#attr-button-type-button>button</a></code>"
+ "<code title=attr-button-type-button><a href=#attr-button-type-button>button</a></code>";
+ "<code title=attr-button-type-menu><a href=#attr-button-type-menu>menu</a></code>"
<tr><th> <code title="">type</code>
- <td> <code title=attr-command-type><a href=#attr-command-type>command</a></code>
+ <td> <code title=attr-menuitem-type><a href=#attr-menuitem-type>menuitem</a></code>
<td> Type of command
- <td> "<code title=attr-command-type-keyword-command><a href=#attr-command-type-keyword-command>command</a></code>";
- "<code title=attr-command-type-keyword-checkbox><a href=#attr-command-type-keyword-checkbox>checkbox</a></code>";
- "<code title=attr-command-type-keyword-radio><a href=#attr-command-type-keyword-radio>radio</a></code>"
+ <td> "<code title=attr-menuitem-type-keyword-command><a href=#attr-menuitem-type-keyword-command>command</a></code>";
+ "<code title=attr-menuitem-type-keyword-checkbox><a href=#attr-menuitem-type-keyword-checkbox>checkbox</a></code>";
+ "<code title=attr-menuitem-type-keyword-radio><a href=#attr-menuitem-type-keyword-radio>radio</a></code>"
<tr><th> <code title="">type</code>
<td> <code title=attr-embed-type><a href=#attr-embed-type>embed</a></code>;
<code title=attr-object-type><a href=#attr-object-type>object</a></code>;
@@ -103253,7 +103149,7 @@
<tr><th> <code title="">type</code>
<td> <code title=attr-menu-type><a href=#attr-menu-type>menu</a></code>
<td> Type of menu
- <td> "<code title="context menu state"><a href=#context-menu-state>context</a></code>"; "<code title="toolbar state"><a href=#toolbar-state>toolbar</a></code>"
+ <td> "<code title="popup menu state"><a href=#popup-menu-state>popup</a></code>"; "<code title="toolbar state"><a href=#toolbar-state>toolbar</a></code>"
<tr><th> <code title="">typemustmatch</code>
<td> <code title=attr-object-typemustmatch><a href=#attr-object-typemustmatch>object</a></code>
<td> Whether the <code title=attr-object-type><a href=#attr-object-type>type</a></code> attribute and the <a href=#content-type>Content-Type</a> value need to match for the resource to be used
@@ -103789,8 +103685,8 @@
<tr><td> <code><a href=#the-colgroup-element>colgroup</a></code>
<td> <code><a href=#htmltablecolelement>HTMLTableColElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
- <tr><td> <code><a href=#the-command-element>command</a></code>
- <td> <code><a href=#htmlcommandelement>HTMLCommandElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+ <tr><td> <code><a href=#the-menuitem-element>menuitem</a></code>
+ <td> <code><a href=#htmlmenuitemelement>HTMLMenuItemElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
<tr><td> <code><a href=#the-data-element>data</a></code>
<td> <code><a href=#htmldataelement>HTMLDataElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
@@ -104098,7 +103994,6 @@
<li><code><a href=#htmlbodyelement>HTMLBodyElement</a></code>
<li><code><a href=#htmlbuttonelement>HTMLButtonElement</a></code>
<li><code><a href=#htmlcanvaselement>HTMLCanvasElement</a></code>
- <li><code><a href=#htmlcommandelement>HTMLCommandElement</a></code>
<li><code><a href=#htmldlistelement>HTMLDListElement</a></code>
<li><code><a href=#htmldataelement>HTMLDataElement</a></code>
<li><code><a href=#htmldatalistelement>HTMLDataListElement</a></code>
@@ -104130,6 +104025,7 @@
<li><code><a href=#htmlmarqueeelement>HTMLMarqueeElement</a></code>
<li><code><a href=#htmlmediaelement>HTMLMediaElement</a></code>
<li><code><a href=#htmlmenuelement>HTMLMenuElement</a></code>
+ <li><code><a href=#htmlmenuitemelement>HTMLMenuItemElement</a></code>
<li><code><a href=#htmlmetaelement>HTMLMetaElement</a></code>
<li><code><a href=#htmlmeterelement>HTMLMeterElement</a></code>
<li><code><a href=#htmlmodelement>HTMLModElement</a></code>
Modified: source
===================================================================
--- source 2012-12-28 02:06:14 UTC (rev 7601)
+++ source 2012-12-29 01:23:20 UTC (rev 7602)
@@ -12123,7 +12123,6 @@
<!-- when updating this also update the category index -->
<ul class="brief category-list">
<li><code>base</code></li>
- <li><code>command</code></li>
<li><code>link</code></li>
<li><code>meta</code></li>
<li><code>noscript</code></li>
@@ -12188,7 +12187,6 @@
<li><code>canvas</code></li>
<li><code>cite</code></li>
<li><code>code</code></li>
- <li><code>command</code></li>
<li><code>data</code></li>
<li><code>datalist</code></li>
<li><code>del</code></li>
@@ -12324,7 +12322,6 @@
<li><code>canvas</code></li>
<li><code>cite</code></li>
<li><code>code</code></li>
- <li><code>command</code></li>
<li><code>data</code></li>
<li><code>datalist</code></li>
<li><code>del</code></li>
@@ -12472,7 +12469,6 @@
<li><code>input</code> (if the <code title="attr-input-type">type</code> attribute is <em>not</em> in the <span title="attr-input-type-hidden">Hidden</span> state)</li>
<li><code>keygen</code></li>
<li><code>label</code></li>
- <li><code>menu</code> (if the <code title="attr-menu-type">type</code> attribute is in the <span title="toolbar state">toolbar</span> state)</li>
<li><code>object</code> (if the <code title="attr-hyperlink-usemap">usemap</code> attribute is present)<!-- see also comment in <object> section --></li>
<li><code>select</code></li>
<li><code>textarea</code></li>
@@ -12688,7 +12684,7 @@
<li><code>map</code></li>
<li><code>mark</code></li>
<li><code>math</code></li>
- <li><code>menu</code> (if the <code title="attr-menu-type">type</code> attribute is in the <span title="toolbar state">toolbar</span> state or the <span title="list state">list</span> state)</li>
+ <li><code>menu</code> (if the <code title="attr-menu-type">type</code> attribute is in the <span title="toolbar state">toolbar</span> state)</li>
<li><code>meter</code></li>
<li><code>nav</code></li>
<li><code>object</code></li>
@@ -13334,18 +13330,10 @@
<td><code title="attr-aria-role-link">link</code> role
<tr>
- <td><code>menu</code> element with a <code title="attr-menu-type">type</code> attribute in the <span title="context menu state">context menu</span> state
+ <td><code>menu</code> element with a <code title="attr-menu-type">type</code> attribute in the <span title="popup menu state">popup menu</span> state
<td><span title="concept-role-none">No role</span>
<tr>
- <td><code>menu</code> element with a <code title="attr-menu-type">type</code> attribute in the <span title="list state">list</span> state
- <td><code title="attr-aria-role-menu">menu</code> role
-
- <tr>
- <td><code>menu</code> element with a <code title="attr-menu-type">type</code> attribute in the <span title="toolbar state">toolbar</span> state
- <td><code title="attr-aria-role-toolbar">toolbar</code> role
-
- <tr>
<td><code>meta</code> element
<td><span title="concept-role-none">No role</span>
@@ -13418,18 +13406,6 @@
<td><span title="concept-role-none">No role</span>
<tr>
- <td>An element that <span title="concept-command">defines a command</span>, whose <span title="command-facet-type">Type</span> facet is "checkbox", and that is a descendant of a <code>menu</code> element whose <code title="attr-menu-type">type</code> attribute in the <span title="list state">list</span> state
- <td><code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the command's <span title="command-facet-checkedstate">Checked State</span> facet is true, and "false" otherwise
-
- <tr>
- <td>An element that <span title="concept-command">defines a command</span>, whose <span title="command-facet-type">Type</span> facet is "command", and that is a descendant of a <code>menu</code> element whose <code title="attr-menu-type">type</code> attribute in the <span title="list state">list</span> state
- <td><code title="attr-aria-role-menuitem">menuitem</code> role
-
- <tr>
- <td>An element that <span title="concept-command">defines a command</span>, whose <span title="command-facet-type">Type</span> facet is "radio", and that is a descendant of a <code>menu</code> element whose <code title="attr-menu-type">type</code> attribute in the <span title="list state">list</span> state
- <td><code title="attr-aria-role-menuitemradio">menuitemradio</code> role, with the <code title="attr-aria-checked">aria-checked</code> state set to "true" if the command's <span title="command-facet-checkedstate">Checked State</span> facet is true, and "false" otherwise
-
- <tr>
<td>Element that is <span title="concept-fe-disabled">disabled</span>
<td>The <code title="attr-aria-disabled">aria-disabled</code> state set to "true"
@@ -13472,7 +13448,7 @@
<tr>
<td><code>a</code> element that creates a <span>hyperlink</span>
<td><code title="attr-aria-role-link">link</code> role
- <td>Role must be either <code title="attr-aria-role-link">link</code>, <code title="attr-aria-role-button">button</code><!--!-->, <code title="attr-aria-role-checkbox">checkbox</code><!--!-->, <code title="attr-aria-role-menuitem">menuitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code><!--!-->, <code title="attr-aria-role-menuitemradio">menuitemradio</code><!--!-->, <code title="attr-aria-role-tab">tab</code>, or <code title="attr-aria-role-treeitem">treeitem</code><!--!-->
+ <td>Role must be either <code title="attr-aria-role-link">link</code>, <code title="attr-aria-role-menuitem">menuitem</code>, <code title="attr-aria-role-tab">tab</code>, or <code title="attr-aria-role-treeitem">treeitem</code>
<tr>
<td><code>address</code> element
@@ -13497,7 +13473,7 @@
<tr>
<td><code>button</code> element
<td><code title="attr-aria-role-button">button</code> role
- <td>Role must be either <code title="attr-aria-role-button">button</code>, <code title="attr-aria-role-link">link</code><!--!-->, <code title="attr-aria-role-menuitem">menuitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code><!--!-->, <code title="attr-aria-role-menuitemradio">menuitemradio</code><!--!-->, <code title="attr-aria-role-radio">radio</code><!--!-->
+ <td>Role must be either <code title="attr-aria-role-button">button</code>, <code title="attr-aria-role-menuitem">menuitem</code>
<tr>
<td><code>details</code> element
@@ -13584,7 +13560,7 @@
<tr>
<td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-button">Button</span> state
<td><code title="attr-aria-role-button">button</code> role
- <td>Role must be either <code title="attr-aria-role-button">button</code>, <code title="attr-aria-role-link">link</code><!--!-->, <code title="attr-aria-role-menuitem">menuitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code><!--!-->, <code title="attr-aria-role-menuitemradio">menuitemradio</code><!--!-->, <code title="attr-aria-role-radio">radio</code><!--!-->
+ <td>Role must be either <code title="attr-aria-role-button">button</code>, <code title="attr-aria-role-menuitem">menuitem</code>
<tr>
<td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-checkbox">Checkbox</span> state
@@ -13594,7 +13570,7 @@
<tr>
<td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-image">Image Button</span> state
<td><code title="attr-aria-role-button">button</code> role
- <td>Role must be either <code title="attr-aria-role-button">button</code>, <code title="attr-aria-role-link">link</code><!--!-->, <code title="attr-aria-role-menuitem">menuitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code><!--!-->, <code title="attr-aria-role-menuitemradio">menuitemradio</code><!--!-->, <code title="attr-aria-role-radio">radio</code><!--!-->
+ <td>Role must be either <code title="attr-aria-role-button">button</code>, <code title="attr-aria-role-menuitem">menuitem</code>
<tr>
<td><code>input</code> element with a <code title="attr-input-type">type</code> attribute in the <span title="attr-input-type-radio">Radio Button</span> state
@@ -13607,6 +13583,11 @@
<td>Role must be either <code title="attr-aria-role-listitem">listitem</code>, <code title="attr-aria-role-menuitemcheckbox">menuitemcheckbox</code>, <code title="attr-aria-role-menuitemradio">menuitemradio</code>, <code title="attr-aria-role-option">option</code>, <code title="attr-aria-role-tab">tab</code>, or <code title="attr-aria-role-treeitem">treeitem</code>
<tr>
+ <td><code>menu</code> element with a <code title="attr-menu-type">type</code> attribute in the <span title="toolbar state">toolbar</span> state
+ <td><code title="attr-aria-role-toolbar">toolbar</code> role
+ <td>Role must be either <code title="attr-aria-role-directory">directory</code>, <code title="attr-aria-role-list">list</code>, <code title="attr-aria-role-listbox">listbox</code>, <code title="attr-aria-role-menu">menu</code>, <code title="attr-aria-role-menubar">menubar</code>, <code title="attr-aria-role-tablist">tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, or <code title="attr-aria-role-tree">tree</code>
+
+ <tr>
<td><code>object</code> element
<td><span title="concept-role-none">No role</span>
<td>If specified, role must be either <code title="attr-aria-role-application">application</code>, <code title="attr-aria-role-document">document</code>, or <code title="attr-aria-role-img">img</code>
@@ -13614,7 +13595,7 @@
<tr>
<td><code>ol</code> element
<td><code title="attr-aria-role-list">list</code> role
- <td>Role must be either <code title="attr-aria-role-directory">directory</code>, <code title="attr-aria-role-list">list</code>, <code title="attr-aria-role-listbox">listbox</code>, <code title="attr-aria-role-menu">menu</code>, <code title="attr-aria-role-menubar">menubar</code>, <code title="attr-aria-role-tablist">tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, <code title="attr-aria-role-tree">tree</code>
+ <td>Role must be either <code title="attr-aria-role-directory">directory</code>, <code title="attr-aria-role-list">list</code>, <code title="attr-aria-role-listbox">listbox</code>, <code title="attr-aria-role-menu">menu</code>, <code title="attr-aria-role-menubar">menubar</code>, <code title="attr-aria-role-tablist">tablist</code>, <code title="attr-aria-role-toolbar ">toolbar</code>, or <code title="attr-aria-role-tree">tree</code>
<tr>
<td><code>output</code> element
@@ -20928,7 +20909,7 @@
<dt><span title="element-dfn-contexts">Contexts in which this element can be used</span>:</dt>
<dd>Inside <code>ol</code> elements.</dd>
<dd>Inside <code>ul</code> elements.</dd>
- <dd>Inside <code>menu</code> elements.</dd>
+ <dd>Inside <code>menu</code> elements whose <code title="attr-menu-type">type</code> attribute is in the <span title="toolbar state">toolbar</span> state.</dd>
<dt><span title="element-dfn-content-model">Content model</span>:</dt>
<dd><span>Flow content</span>.</dd>
<dt><span title="element-dfn-attributes">Content attributes</span>:</dt>
@@ -21018,14 +20999,6 @@
</figure></pre>
</div>
- <p class="note">If the <code>li</code> element is the child of a
- <code>menu</code> element and itself has a child that defines a
- <span title="concept-command">command</span>, then the
- <code>li</code> element will match the <code
- title="selector-enabled">:enabled</code> and <code
- title="selector-disabled">:disabled</code> pseudo-classes in the
- same way as the first such child element does.</p>
-
<p class="note">While it is conforming to include heading elements
(e.g. <code>h1</code>) inside <code>li</code> elements, it likely
does not convey the semantics that the author intended. A heading
@@ -60643,6 +60616,7 @@
<dd><code title="attr-fe-name">name</code></dd>
<dd><code title="attr-button-type">type</code></dd>
<dd><code title="attr-button-value">value</code></dd>
+ <dd><code title="attr-button-menu">menu</code></dd>
<dt><span title="element-dfn-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
<dd>
<pre class="idl">interface <dfn>HTMLButtonElement</dfn> : <span>HTMLElement</span> {
@@ -60657,6 +60631,7 @@
attribute DOMString <span title="dom-fe-name">name</span>;
attribute DOMString <span title="dom-button-type">type</span>;
attribute DOMString <span title="dom-button-value">value</span>;
+ attribute <span>HTMLMenuElement</span>? <span title="dom-button-menu">menu</span>;
readonly attribute boolean <span title="dom-cva-willValidate">willValidate</span>;
readonly attribute <span>ValidityState</span> <span title="dom-cva-validity">validity</span>;
@@ -60699,6 +60674,10 @@
<td><dfn title="attr-button-type-button"><code>button</code></dfn>
<td><span title="attr-button-type-button-state">Button</span>
<td>Does nothing.
+ <tr>
+ <td><dfn title="attr-button-type-menu"><code>menu</code></dfn>
+ <td><span title="attr-button-type-menu-state">Menu</span>
+ <td>Shows a menu.
</table>
<p>The <i>missing value default</i> is the <span
@@ -60714,8 +60693,9 @@
<p><strong>Constraint validation</strong>: If the <code
title="attr-button-type">type</code> attribute is in the <span
- title="attr-button-type-reset-state">Reset Button</span> state or
+ title="attr-button-type-reset-state">Reset Button</span> state,
the <span title="attr-button-type-button-state">Button</span> state,
+ or the <span title="attr-button-type-menu-state">Menu</span> state,
the element is <span>barred from constraint validation</span>.</p>
<p>When a <code>button</code> element is not <span
@@ -60742,6 +60722,27 @@
<dd><p>Do nothing.</p></dd>
+ <dt> <dfn title="attr-button-type-menu-state">Menu</dfn>
+
+ <dd>
+
+ <p>The element must follow these steps:</p>
+
+ <ol>
+
+ <li><p>Let <var title="">menu</var> be the element's <span>designated pop-up menu</span>, if
+ any. If there isn't one, then abort these steps.</p></li>
+
+ <li><p><span>Fire a simple event</span> named <code title="event-show">show</code> that is
+ cancelable at <var title="">menu</var>. <!-- v2: include modifier key information --></p></li>
+
+ <li><p>If the event is not canceled, then <span title="construct and show a menu">construct and
+ show</span> the menu for <var title="">menu</var>.</p></li>
+
+ </ol>
+
+ </dd>
+
</dl>
</div>
@@ -60787,12 +60788,32 @@
form submission if the button itself was used to initiate the form
submission.</p>
+ <hr>
+
+ <p>If the element's <code title="attr-button-type">type</code> attribute is in the <span
+ title="attr-button-type-menu-state">Menu</span> state, the <dfn
+ title="attr-button-menu"><code>menu</code></dfn> attribute must be specified to give the element's
+ menu. The value must be the <span title="concept-id">ID</span> of a <code>menu</code> element in
+ the same <span>home subtree</span> whose <code title="attr-menu-type">type</code> attribute is in
+ the <span title="popup menu state">popup menu</span> state. The attribute must not be specified if
+ the element's <code title="attr-button-type">type</code> attribute is not in the <span
+ title="attr-button-type-menu-state">Menu</span> state.</p>
+
<div class="impl">
- <p>The <dfn title="dom-button-value"><code>value</code></dfn> IDL
- attribute must <span>reflect</span> the content attribute of the
- same name.</p>
+ <p>A <code>button</code> element's <dfn>designated pop-up menu</dfn> is the first element in the
+ <code>button</code>'s <span>home subtree</span> whose ID is that given by the <code>button</code>
+ element's <code title="attr-button-menu">menu</code> attribute, if there is such an element and
+ its <code title="attr-menu-type">type</code> attribute is in the <span title="popup menu
+ state">popup menu</span> state; otherwise, the element has no <span>designated pop-up
+ menu</span>.</p>
+ <hr>
+
+ <p>The <dfn title="dom-button-value"><code>value</code></dfn> and <dfn
+ title="dom-button-menu"><code>menu</code></dfn> IDL attributes must <span>reflect</span> the
+ content attributes of the same name.</p>
+
<p>The <dfn title="dom-button-type"><code>type</code></dfn> IDL
attribute must <span>reflect</span> the content attribute of the
same name, <span>limited to only known values</span>.</p>
@@ -67797,614 +67818,564 @@
+ <h4 id="the-menu-element">The <dfn id="menus"><code>menu</code></dfn> element</h4>
- <h4 id="the-command-element">The <dfn id="the-command"><code>command</code></dfn> element</h4>
-
<dl class="element">
<dt><span title="element-dfn-categories">Categories</span>:</dt>
- <dd><span>Metadata content</span>.</dd>
<dd><span>Flow content</span>.</dd>
- <dd><span>Phrasing content</span>.</dd>
+ <dd>If the element's <code title="attr-menu-type">type</code> attribute is in the <span title="toolbar state">toolbar</span> state: <span>Palpable content</span>.</dd>
<dt><span title="element-dfn-contexts">Contexts in which this element can be used</span>:</dt>
- <dd>Where <span>metadata content</span> is expected.</dd>
- <dd>Where <span>phrasing content</span> is expected.</dd>
+ <dd>Where <span>flow content</span> is expected.</dd>
+ <dd>If the element's <code title="attr-menu-type">type</code> attribute is in the <span title="popup menu state">popup menu</span> state: as the child of a <code>menu</code> element whose <code title="attr-menu-type">type</code> attribute is in the <span title="popup menu state">popup menu</span> state.</dd>
<dt><span title="element-dfn-content-model">Content model</span>:</dt>
- <dd>Empty.</dd>
+ <dd>If the element's <code title="attr-menu-type">type</code> attribute is in the <span title="toolbar state">toolbar</span> state: either zero or more <code>li</code> elements, or <span>flow content</span>.</dd>
+ <dd>If the element's <code title="attr-menu-type">type</code> attribute is in the <span title="popup menu state">popup menu</span> state: in any order, zero or more <code>menuitem</code> elements, zero or more <code>hr</code> elements, and zero or more <code>menu</code> elements whose <code title="attr-menu-type">type</code> attributes are in the <span title="popup menu state">popup menu</span> state.</dd>
<dt><span title="element-dfn-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
- <dd><code title="attr-command-type">type</code></dd>
- <dd><code title="attr-command-label">label</code></dd>
- <dd><code title="attr-command-icon">icon</code></dd>
- <dd><code title="attr-command-disabled">disabled</code></dd>
- <dd><code title="attr-command-checked">checked</code></dd>
- <dd><code title="attr-command-radiogroup">radiogroup</code></dd>
- <!--<dd><code title="attr-command-default">default</code></dd>-->
- <dd><code title="attr-command-command">command</code></dd>
- <dd>Also, the <code title="attr-command-title">title</code> attribute has special semantics on this element.</dd>
+ <dd><code title="attr-menu-type">type</code></dd>
+ <dd><code title="attr-menu-label">label</code></dd>
<dt><span title="element-dfn-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
<dd>
-<pre class="idl">interface <dfn>HTMLCommandElement</dfn> : <span>HTMLElement</span> {
- attribute DOMString <span title="dom-command-type">type</span>;
- attribute DOMString <span title="dom-command-label">label</span>;
- attribute DOMString <span title="dom-command-icon">icon</span>;
- attribute boolean <span title="dom-command-disabled">disabled</span>;
- attribute boolean <span title="dom-command-checked">checked</span>;
- attribute DOMString <span title="dom-command-radiogroup">radiogroup</span>;<!--
- attribute boolean <span title="dom-command-default">default</span>;-->
- readonly attribute <span>HTMLElement</span>? <span title="dom-command-command">command</span>;
+<pre class="idl">interface <dfn>HTMLMenuElement</dfn> : <span>HTMLElement</span> {
+ attribute DOMString <span title="dom-menu-type">type</span>;
+ attribute DOMString <span title="dom-menu-label">label</span>;
};</pre>
- </dd>
</dl><!--TOPIC:HTML-->
- <p>The <code>command</code> element represents a command that the user
- can invoke.</p>
+ <p>The <code>menu</code> element represents a list of commands.</p>
- <p>A command can be explicitly part of a context menu or toolbar,
- using the <code>menu</code> element. It can also be put anywhere
- else on a page, either just to define a keyboard shortcut, or to
- define a command that is then referenced from other
- <code>command</code> elements.</p>
+ <!-- v2 idea: <menu> should get an icon, like <command> -->
- <p>A <code>command</code> element that uses the
- <code title="attr-command-type">type</code>,
- <code title="attr-command-label">label</code>,
- <code title="attr-command-icon">icon</code>,
- <code title="attr-command-disabled">disabled</code>,
- <code title="attr-command-checked">checked</code>,
- <code title="attr-command-radiogroup">radiogroup</code>,
- <!--<code title="attr-command-default">default</code>,--> and
- <code title="attr-title">title</code> attributes defines a new
- command. A <code>command</code> element that uses the <code
- title="attr-command-command">command</code> <em>attribute</em>
- defines a command by reference to another one. This allows authors
- to define a command once, and set its state (e.g. whether it is
- active or disabled) in one place, and have all references to that
- command in the user interface change at the same time.</p>
+ <p>The <dfn title="attr-menu-type"><code>type</code></dfn> attribute is an <span>enumerated
+ attribute</span> indicating the kind of menu being declared. The attribute has two states. The
+ <code title="attr-menu-type-popup">popup</code> keyword maps to the <dfn title="popup menu
+ state">popup menu</dfn> state, in which the element is declaring a context menu or the menu for a
+ <span title="attr-button-type-menu-state">menu button</span>. The <code
+ title="attr-menu-type-toolbar">toolbar</code> keyword maps to the <dfn title="toolbar
+ state">toolbar</dfn> state, in which the element is declaring a toolbar. The attribute may also be
+ omitted. The <i>missing value default</i> is the <span title="popup menu state">popup menu</span>
+ state if the parent element is a <code>menu</code> element whose <code
+ title="attr-menu-type">type</code> attribute is in the <span title="popup menu state">popup
+ menu</span> state; otherwise, it is the <span title="toolbar state">toolbar</span> state.</p>
- <hr>
+ <p>If a <code>menu</code> element's <code title="attr-menu-type">type</code> attribute is in the
+ <span title="popup menu state">popup menu</span> state, then the element <span>represents</span>
+ the commands of a popup menu, and the user can only examine and interact with the commands if that
+ popup menu is activated through some other element, either via the <code
+ title="attr-contextmenu">contextmenu</code> attribute or the <code>button</code> element's <code
+ title="attr-button-menu">menu</code> attribute.</p>
- <p>The <dfn title="attr-command-type"><code>type</code></dfn>
- attribute indicates the kind of command: either a normal command
- with an associated action, or a state or option that can be toggled,
- or a selection of one item from a list of items.</p>
+ <p>If a <code>menu</code> element's <code title="attr-menu-type">type</code> attribute is in the
+ <span title="toolbar state">toolbar</span> state, then the element <span>represents</span> a
+ toolbar consisting of its contents, in the form of either an unordered list of items (represented
+ by <code>li</code> elements), each of which represents a command that the user can perform or
+ activate, or, if the element has no <code>li</code> element children, <span>flow content</span>
+ describing available commands.</p>
- <p>The attribute is an <span>enumerated attribute</span> with three
- keywords and states. The "<dfn
- title="attr-command-type-keyword-command"><code>command</code></dfn>"
- keyword maps to the <span
- title="attr-command-type-state-command">Command</span> state, the
- "<dfn
- title="attr-command-type-keyword-checkbox"><code>checkbox</code></dfn>"
- keyword maps to the <span
- title="attr-command-type-state-checkbox">Checkbox</span> state, and
- the "<dfn
- title="attr-command-type-keyword-radio"><code>radio</code></dfn>"
- keyword maps to the <span
- title="attr-command-type-state-radio">Radio</span> state. The
- <i>missing value default</i> is the <span
- title="attr-command-type-state-command">Command</span> state.</p>
+ <p>The <dfn title="attr-menu-label"><code>label</code></dfn> attribute gives the label of the
+ menu. It is used by user agents to display nested menus in the UI: a context menu containing
+ another menu would use the nested menu's <code title="attr-menu-label">label</code> attribute for
+ the submenu's menu label. The <code title="attr-menu-label">label</code> attribute must only be
+ specified on <code>menu</code> elements whose parent element is a <code>menu</code> element whose
+ <code title="attr-menu-type">type</code> attribute is in the <span title="popup menu state">popup
+ menu</span> state.</p>
- <dl>
+ <div class="impl">
- <dt>The <dfn title="attr-command-type-state-command">Command</dfn> state</dt>
+ <hr>
- <dd><p>The element <span>represents</span> a normal command with an associated action.</p></dd>
+ <p>A <code>menu</code> is a <dfn>currently relevant <code>menu</code> element</dfn> if it is the
+ child of a <span>currently relevant <code>menu</code> element</span>, or if it is the
+ <span>designated pop-up menu</span> of a <code>button</code> element that is not
+ <span>inert</span>, does not have a <code title="attr-hidden">hidden</code> attribute, and is not
+ the descendant of an element with a <code title="attr-hidden">hidden</code> attribute.</p>
- <dt>The <dfn title="attr-command-type-state-checkbox">Checkbox</dfn> state</dt>
+ <hr>
- <dd><p>The element <span>represents</span> a state or option that can be toggled.</p></dd>
+ <p>A pop-up menu consists of a list of zero or more menu items, which can be any of:</p>
- <dt>The <dfn title="attr-command-type-state-radio">Radio</dfn> state</dt>
+ <ul class="brief">
+ <li><span title="concept-command">Commands</span>, which can be marked as default commands (<code>menuitem</code>)</li>
+ <li>Separators (<code>hr</code>)</li>
+ <li>Other menus, which allows the list to be nested (<code>menu</code>)</li>
+ </ul>
- <dd><p>The element <span>represents</span> a selection of one item from a list of items.</p></dd>
+ <p>To <dfn>construct and show a menu</dfn> for a particular <code>menu</code> element, the user
+ agent must run the following steps:</p>
- </dl>
+ <ol>
- <p>The <dfn title="attr-command-label"><code>label</code></dfn>
- attribute gives the name of the command, as shown to the user. The
- <code title="attr-command-label">label</code> attribute must be
- specified and must have a value that is not the empty string.</p>
+ <li><p>Let the menu be an empty list of the type described above.</p></li>
- <p>The <dfn title="attr-command-title"><code>title</code></dfn>
- attribute gives a hint describing the command, which might be shown
- to the user to help him.</p>
+ <li>
- <p>The <dfn title="attr-command-icon"><code>icon</code></dfn>
- attribute gives a picture that represents the command. If the
- attribute is specified, the attribute's value must contain a
- <span>valid non-empty URL potentially surrounded by
- spaces</span>. <span class="impl">To obtain the <span>absolute
- URL</span> of the icon when the attribute's value is not the empty
- string, the attribute's value must be <span title="resolve a
- url">resolved</span> relative to the element. When the attribute is
- absent, or its value is the empty string, or <span title="resolve a
- url">resolving</span> its value fails, there is no icon.</span></p>
- <!-- this is affected by the base URL being changed, so users of
- this should cache the image once they've fetched it once, at least
- until the relative url changes again -->
+ <p>Run the <span>menu builder</span> steps for the <code>menu</code> element using the menu
+ prepared in the previous list as the output.</p>
- <p>The <dfn
- title="attr-command-disabled"><code>disabled</code></dfn> attribute
- is a <span>boolean attribute</span> that, if present, indicates that
- the command is not available in the current state.</p>
+ <p>The <dfn>menu builder</dfn> steps for a <code>menu</code> element using a specific menu as
+ output are as follows: For each child node of the <code>menu</code> in <span>tree order</span>,
+ run the appropriate steps from the following list:</p>
- <p class="note">The distinction between <code
- title="attr-command-disabled">disabled</code> and <code
- title="attr-hidden">hidden</code> is subtle. A command would be
- disabled if, in the same context, it could be enabled if only
- certain aspects of the situation were changed. A command would be
- marked as hidden if, in that situation, the command will never be
- enabled. For example, in the context menu for a water faucet, the
- command "open" might be disabled if the faucet is already open, but
- the command "eat" would be marked hidden since the faucet could
- never be eaten.</p>
+ <dl class="switch">
- <p>The <dfn title="attr-command-checked"><code>checked</code></dfn>
- attribute is a <span>boolean attribute</span> that, if present,
- indicates that the command is selected. The attribute must be
- omitted unless the <code title="attr-command-type">type</code>
- attribute is in either the <span
- title="attr-command-type-state-checkbox">Checkbox</span> state or
- the <span title="attr-command-type-state-radio">Radio</span>
- state.</p>
+ <dt>If the child is a <code>menuitem</code> element that <span title="concept-command">defines a command</span></dt>
- <p>The <dfn
- title="attr-command-radiogroup"><code>radiogroup</code></dfn>
- attribute gives the name of the group of commands that will be
- toggled when the command itself is toggled, for commands whose <code
- title="attr-command-type">type</code> attribute has the value "<code
- title="">radio</code>". The scope of the name is the child list of
- the parent element. The attribute must be omitted unless the <code
- title="attr-command-type">type</code> attribute is in the <span
- title="attr-command-type-state-radio">Radio</span> state.</p>
+ <dd>Append the command to the menu, respecting its <span title="concept-facet">facets</span><!--
+ we might need to be explicit about what this means for each facet, if testing shows this isn't
+ well-implemented. e.g.: If there's an Icon facet for the command, it should be <span
+ title="fetch">fetched</span><!- -FETCH- -> (this would be http-origin privacy-sensitive), and
+ then that image should be associated with the command, such that each command only has its image
+ fetched once, to prevent changes to the base URL from having effects after the image has been
+ fetched once. (no need to resolve the Icon facet, it's an absolute URL) -->. If the
+ <code>menuitem</code> element has a <code title="attr-menuitem-default">default</code> attribute,
+ mark the command as being a default command.</dd>
-<!--
- <p>If the <code>command</code> element is used when <span
- title="menu generation">generating</span> a <span>context
- menu</span>, then the <dfn
- title="attr-command-default"><code>default</code></dfn> attribute
- indicates, if present, that the command is the one that would have
- been invoked if the user had directly activated the menu's subject
- instead of using its context menu. The <code
- title="attr-command-default">default</code> attribute is a
- <span>boolean attribute</span>. The attribute must be omitted unless
- the <code title="attr-command-type">type</code> attribute is in the
- <span title="attr-command-type-state-command">Command</span>
- state.</p>
- <div class="example">
+ <dt>If the child is an <code>hr</code> element</dt>
- ...an example that shows an element that, if double-clicked,
- invokes an action, but that also has a context menu, showing the
- various <code>command</code> attributes off, and that has a default
- command...
+ <dd>Append a separator to the menu.</dd>
- </div>
--->
- <hr>
+ <dt>If the child is a <code>menu</code> element with no <code title="attr-menu-label">label</code> attribute</dt>
- <p>If a <code>command</code> element <var title="">slave</var> has a
- <dfn title="attr-command-command"><code>command</code></dfn>
- attribute, and <var title="">slave</var> is <span>in a
- <code>Document</code></span>, and there is an element in that
- <code>Document</code> whose <span title="concept-id">ID</span> has a
- value equal to the value of <var title="">slave</var>'s <code
- title="attr-command-command">command</code> attribute, and the first
- such element in <span>tree order</span>, hereafter <var
- title="">master</var>, itself <span title="concept-command">defines
- a command</span> and either is not a <code>command</code> element or
- does not itself have a <code
- title="attr-command-command">command</code> attribute, then the
- <dfn>master command</dfn> of <var title="">slave</var> is <var
- title="">master</var>.</p>
+ <dd>Append a separator to the menu, then run the <span>menu builder</span> steps using this
+ child <code>menu</code> element for the same menu, then append another separator to the
+ menu.</dd>
- <p>An element with a
- <code title="attr-command-command">command</code>
- attribute must have a <span>master command</span> and must not have any
- <code title="attr-command-type">type</code>,
- <code title="attr-command-label">label</code>,
- <code title="attr-command-icon">icon</code>,
- <code title="attr-command-disabled">disabled</code>,
- <code title="attr-command-checked">checked</code>, or
- <code title="attr-command-radiogroup">radiogroup</code>
- attributes.</p>
- <hr>
+ <dt>If the child is a <code>menu</code> element with a <code title="attr-menu-label">label</code> attribute</dt>
- <div class="impl">
+ <dd>Create a new submenu as an empty list of the type described above, and construct it by
+ running the <span>menu builder</span> steps for the child <code>menu</code> element using the
+ new submenu as the output. Then, append the submenu to the menu, using the value of the child
+ <code>menu</code> element's <code title="attr-menu-label">label</code> attribute as the label
+ of the submenu.</dd>
- <p>The <dfn title="dom-command-type"><code>type</code></dfn> IDL
- attribute must <span>reflect</span> the content attribute of the
- same name, <span>limited to only known values</span>.</p>
- <p>The <dfn title="dom-command-label"><code>label</code></dfn>, <dfn
- title="dom-command-icon"><code>icon</code></dfn>, <dfn
- title="dom-command-disabled"><code>disabled</code></dfn>, <dfn
- title="dom-command-checked"><code>checked</code></dfn>, and <dfn
- title="dom-command-radiogroup"><code>radiogroup</code></dfn><!--,
- and <dfn title="dom-command-default"><code>default</code></dfn>-->
- IDL attributes must <span>reflect</span> the respective content
- attributes of the same name.</p>
+ <dt>Any other node</dt>
- <p>The <dfn title="dom-command-command"><code>command</code></dfn>
- IDL attribute must return the <span>master command</span>, if any,
- or null otherwise.</p>
+ <dd><span>Ignore</span> the node.</dd>
- <hr>
-
- <p>If the element's <span
- title="command-facet-DisabledState">Disabled State</span> is false
- (enabled) then the element's <span>activation behavior</span>
- depends on the element's <code title="attr-command-type">type</code>
- and <code title="attr-command-command">command</code> attributes, as
- follows:</p>
+ </dl>
- <dl class="switch">
+ </li>
- <dt>If the element has a <span>master command</span> set by its
- <code title="attr-command-command">command</code> attribute</dt>
+ <li><p>Remove any submenu with no label, or whose label is the empty string, in the menu or any submenus.</p></li>
- <dd><p>The user agent must <span>run synthetic click activation
- steps</span> on the element's <span>master command</span>.</p></dd>
- <!-- we know it has a defined <span>activation behavior</span> if
- we get here -->
+ <li><p>Remove any menu item with no label, or whose label is the empty string, in the menu or any submenus.</p></li>
+ <li><p>Collapse all sequences of two or more adjacent separators in the menu or any submenus to a single separator.</p></li>
- <dt>If the <code title="attr-command-type">type</code> attribute is
- in the <span
- title="attr-command-type-state-checkbox">Checkbox</span> state</dt>
+ <li><p>Remove all separators at the start or end of the menu and any submenus.</p></li>
- <dd><p>If the element has a <code
- title="attr-command-checked">checked</code> attribute, the UA must
- remove that attribute. Otherwise, the UA must add a <code
- title="attr-command-checked">checked</code> attribute, with the
- literal value <code title="">checked</code>.</p></dd>
+ <li>
+ <p>Display the menu to the user, and let the algorithm that invoked this one continue.</p>
- <dt>If the <code title="attr-command-type">type</code> attribute is
- in the <span
- title="attr-command-type-state-radio">Radio</span> state</dt>
+ <p>If the user selects a menu item that corresponds to an element that still represents a <span
+ title="concept-command">command</span> when the user selects it, then the UA must invoke that
+ command's <span title="command-facet-Action">Action</span>.</p>
- <dd><p>If the element has a parent, then the UA must walk the list
- of child nodes of that parent element, and for each node that is a
- <code>command</code> element, if that element has a <code
- title="attr-command-radiogroup">radiogroup</code> attribute whose
- value exactly matches the current element's (treating missing <code
- title="attr-command-radiogroup">radiogroup</code> attributes as if
- they were the empty string), and has a <code
- title="attr-command-checked">checked</code> attribute, must remove
- that attribute.</p>
+ <p>Pop-up menus must not, while being shown, reflect changes in the DOM. The menu is constructed
+ from the DOM before being shown, and is then immutable.</p>
- <p>Then, the element's <code
- title="attr-command-checked">checked</code> attribute attribute
- must be set to the literal value <code
- title="">checked</code>.</p></dd>
+ </li>
+ </ol>
- <dt>Otherwise</dt>
+ <hr>
- <dd><p>The element's <span>activation behavior</span> is to do
- nothing.</p></dd>
+ <p>The <dfn title="dom-menu-type"><code>type</code></dfn> and <dfn
+ title="dom-menu-label"><code>label</code></dfn> IDL attributes must <span>reflect</span> the
+ respective content attributes of the same name.</p>
- </dl>
-
- <p class="note">Firing a synthetic <code
- title="event-click">click</code> event at the element does not cause
- any of the actions described above to happen.</p>
-
- <!-- v2COMMAND: Expose the Triggers facet again. -->
-
- <p>If the element's <span
- title="command-facet-DisabledState">Disabled State</span> is true
- (disabled) then the element has no <span>activation
- behavior</span>.</p>
-
</div>
- <p class="note"><code>command</code> elements are not rendered
- unless they <span title="menu">form part of a menu</span>.</p>
-
<div class="example">
- <p>Here is an example of a toolbar with three buttons that let the
- user toggle between left, center, and right alignment. One could
- imagine such a toolbar as part of a text editor. The toolbar also
- has a separator followed by another button labeled "Publish",
- though that button is disabled.</p>
+ <p>In this example, the <code>menu</code> element is used to describe a toolbar with three menu
+ buttons on it, each of which has a dropdown menu with a series of options:</p>
- <pre><menu type="toolbar">
- <command type="radio" radiogroup="alignment" checked="checked"
- label="Left" icon="icons/alL.png" onclick="setAlign('left')">
- <command type="radio" radiogroup="alignment"
- label="Center" icon="icons/alC.png" onclick="setAlign('center')">
- <command type="radio" radiogroup="alignment"
- label="Right" icon="icons/alR.png" onclick="setAlign('right')">
- <hr>
- <command type="command" disabled
- label="Publish" icon="icons/pub.png" onclick="publish()">
+ <pre><menu> <!-- type="toolbar" implied -->
+ <li>
+ <button type=menu value="File" menu="filemenu">
+ <menu id="filemenu" type="popup">
+ <menuitem onclick="fnew()" label="New...">
+ <menuitem onclick="fopen()" label="Open...">
+ <menuitem onclick="fsave()" label="Save">
+ <menuitem onclick="fsaveas()" label="Save as...">
+ </menu>
+ </li>
+ <li>
+ <button type=menu value="Edit" menu="editmenu">
+ <menu id="editmenu" type="popup">
+ <menuitem onclick="ecopy()" label="Copy">
+ <menuitem onclick="ecut()" label="Cut">
+ <menuitem onclick="epaste()" label="Paste">
+ </menu>
+ </li>
+ <li>
+ <button type=menu value="Help" menu="helpmenu">
+ <menu id="helpmenu" type="popup">
+ <menuitem onclick="location='help.html'" label="Help">
+ <menuitem onclick="location='about.html'" label="About">
+ </menu>
+ </li>
</menu></pre>
+ <p>In a supporting user agent, this might look like this (assuming the user has just activated the
+ second button):</p>
+
+ <p><img src="images/sample-toolbar-1.png" width="303" height="101" alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'."></p>
+
</div>
- <h4 id="the-menu-element">The <dfn id="menus"><code>menu</code></dfn> element</h4>
+ <h4 id="the-menuitem-element">The <dfn><code>menuitem</code></dfn> element</h4>
<dl class="element">
<dt><span title="element-dfn-categories">Categories</span>:</dt>
- <dd><span>Flow content</span>.</dd>
- <dd>If the element's <code title="attr-menu-type">type</code> attribute is in the <span title="toolbar state">toolbar</span> state: <span>Interactive content</span>.</dd>
- <dd>If the element's <code title="attr-menu-type">type</code> attribute is in the <span title="toolbar state">toolbar</span> state or the <span title="list state">list</span> state: <span>Palpable content</span>.</dd>
+ <dd>None.</dd>
<dt><span title="element-dfn-contexts">Contexts in which this element can be used</span>:</dt>
- <dd>Where <span>flow content</span> is expected.</dd>
+ <dd>As a child of a <code>menu</code> element whose <code title="attr-menu-type">type</code> attribute is in the <span title="popup menu state">popup menu</span> state.</dd>
<dt><span title="element-dfn-content-model">Content model</span>:</dt>
- <dd>Either: Zero or more <code>li</code> elements.</dd>
- <dd>Or: <span>Flow content</span>.</dd>
+ <dd>Empty.</dd>
<dt><span title="element-dfn-attributes">Content attributes</span>:</dt>
<dd><span>Global attributes</span></dd>
- <dd><code title="attr-menu-type">type</code></dd>
- <dd><code title="attr-menu-label">label</code></dd>
+ <dd><code title="attr-menuitem-type">type</code></dd>
+ <dd><code title="attr-menuitem-label">label</code></dd>
+ <dd><code title="attr-menuitem-icon">icon</code></dd>
+ <dd><code title="attr-menuitem-disabled">disabled</code></dd>
+ <dd><code title="attr-menuitem-checked">checked</code></dd>
+ <dd><code title="attr-menuitem-radiogroup">radiogroup</code></dd>
+ <dd><code title="attr-menuitem-default">default</code></dd>
+ <dd><code title="attr-menuitem-command">command</code></dd>
+ <dd>Also, the <code title="attr-menuitem-title">title</code> attribute has special semantics on this element.</dd>
<dt><span title="element-dfn-dom">DOM interface</span>:</dt><!--TOPIC:DOM APIs-->
<dd>
-<pre class="idl">interface <dfn>HTMLMenuElement</dfn> : <span>HTMLElement</span> {
- attribute DOMString <span title="dom-menu-type">type</span>;
- attribute DOMString <span title="dom-menu-label">label</span>;
+<pre class="idl">interface <dfn>HTMLMenuItemElement</dfn> : <span>HTMLElement</span> {
+ attribute DOMString <span title="dom-menuitem-type">type</span>;
+ attribute DOMString <span title="dom-menuitem-label">label</span>;
+ attribute DOMString <span title="dom-menuitem-icon">icon</span>;
+ attribute boolean <span title="dom-menuitem-disabled">disabled</span>;
+ attribute boolean <span title="dom-menuitem-checked">checked</span>;
+ attribute DOMString <span title="dom-menuitem-radiogroup">radiogroup</span>;
+ attribute boolean <span title="dom-menuitem-default">default</span>;
+ readonly attribute <span>HTMLElement</span>? <span title="dom-menuitem-command">command</span>;
};</pre>
+ </dd>
</dl><!--TOPIC:HTML-->
- <p>The <code>menu</code> element represents a list of commands.</p>
+ <p>The <code>menuitem</code> element represents a command that the user can invoke from a popup
+ menu (either a <span title="attr-contextmenu">context menu</span> or the menu of a <span
+ title="attr-button-type-menu-state">menu button</span>).</p>
- <!-- v2 idea: <menu> should get an icon, like <command> -->
+ <p>A <code>menuitem</code> element that uses one or more of the
+ <code title="attr-menuitem-type">type</code>,
+ <code title="attr-menuitem-label">label</code>,
+ <code title="attr-menuitem-icon">icon</code>,
+ <code title="attr-menuitem-disabled">disabled</code>,
+ <code title="attr-menuitem-checked">checked</code>, and
+ <code title="attr-menuitem-radiogroup">radiogroup</code>
+ attributes defines a new command.</p>
- <p>The <dfn title="attr-menu-type"><code>type</code></dfn> attribute
- is an <span>enumerated attribute</span> indicating the kind of menu
- being declared. The attribute has three states. The <code
- title="attr-menu-type-context">context</code> keyword maps to the
- <dfn title="context menu state">context menu</dfn> state, in which
- the element is declaring a context menu. The <code
- title="attr-menu-type-toolbar">toolbar</code> keyword maps to the
- <dfn title="toolbar state">toolbar</dfn> state, in which the
- element is declaring a toolbar. The attribute may also be
- omitted. The <i>missing value default</i> is the <dfn title="list
- state">list</dfn> state, which indicates that the element is merely
- a list of commands that is neither declaring a context menu nor
- defining a toolbar.</p>
+ <p>A <code>menuitem</code> element that uses the <code
+ title="attr-menuitem-command">command</code> attribute defines a command by reference to another
+ one. This allows authors to define a command once, and set its state (e.g. whether it is active or
+ disabled) in one place, and have all references to that command in the user interface change at
+ the same time.</p>
- <p>If a <code>menu</code> element's <code
- title="attr-menu-type">type</code> attribute is in the <span
- title="context menu state">context menu</span> state, then the
- element <span>represents</span> the commands of a context menu, and
- the user can only interact with the commands if that context menu is
- activated.</p>
+ <p>If the <code title="attr-menuitem-command">command</code> attribute is specified, the element
+ is in the <dfn>indirect command</dfn> mode. If it is not specified, it is in the <dfn>explicit
+ command</dfn> mode. When the element is in the <span>indirect command</span> mode, the element
+ must not have any of the following attributes specified:
+ <code title="attr-menuitem-type">type</code>,
+ <code title="attr-menuitem-label">label</code>,
+ <code title="attr-menuitem-icon">icon</code>,
+ <code title="attr-menuitem-disabled">disabled</code>,
+ <code title="attr-menuitem-checked">checked</code>,
+ <code title="attr-menuitem-radiogroup">radiogroup</code>.
+ </p>
- <p>If a <code>menu</code> element's <code
- title="attr-menu-type">type</code> attribute is in the <span
- title="toolbar state">toolbar</span> state, then the element
- <span>represents</span> a list of active commands that the user can
- immediately interact with.</p>
+ <hr>
- <p>If a <code>menu</code> element's <code
- title="attr-menu-type">type</code> attribute is in the <span
- title="list state">list</span> state, then the element either
- <span>represents</span> an unordered list of items (each represented
- by an <code>li</code> element), each of which represents a command
- that the user can perform or activate, or, if the element has no
- <code>li</code> element children, <span>flow content</span>
- describing available commands.</p>
+ <p>The <dfn title="attr-menuitem-type"><code>type</code></dfn> attribute indicates the kind of
+ command: either a normal command with an associated action, or a state or option that can be
+ toggled, or a selection of one item from a list of items.</p>
- <p>The <dfn title="attr-menu-label"><code>label</code></dfn>
- attribute gives the label of the menu. It is used by user agents to
- display nested menus in the UI. For example, a context menu
- containing another menu would use the nested menu's <code
- title="attr-menu-label">label</code> attribute for the submenu's
- menu label.</p>
+ <p>The attribute is an <span>enumerated attribute</span> with three keywords and states. The "<dfn
+ title="attr-menuitem-type-keyword-command"><code>command</code></dfn>" keyword maps to the <span
+ title="attr-menuitem-type-state-command">Command</span> state, the "<dfn
+ title="attr-menuitem-type-keyword-checkbox"><code>checkbox</code></dfn>" keyword maps to the <span
+ title="attr-menuitem-type-state-checkbox">Checkbox</span> state, and the "<dfn
+ title="attr-menuitem-type-keyword-radio"><code>radio</code></dfn>" keyword maps to the <span
+ title="attr-menuitem-type-state-radio">Radio</span> state. The <i>missing value default</i> is the
+ <span title="attr-menuitem-type-state-command">Command</span> state.</p>
- <div class="impl">
+ <dl>
- <p>The <dfn title="dom-menu-type"><code>type</code></dfn> and <dfn
- title="dom-menu-label"><code>label</code></dfn> IDL attributes must
- <span>reflect</span> the respective content attributes of the same
- name.</p>
+ <dt>The <dfn title="attr-menuitem-type-state-command">Command</dfn> state</dt>
- </div>
+ <dd><p>The element <span>represents</span> a normal command with an associated action.</p></dd>
+ <dt>The <dfn title="attr-menuitem-type-state-checkbox">Checkbox</dfn> state</dt>
+ <dd><p>The element <span>represents</span> a state or option that can be toggled.</p></dd>
- <h5 id="menus-intro">Introduction</h5>
+ <dt>The <dfn title="attr-menuitem-type-state-radio">Radio</dfn> state</dt>
- <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+ <dd><p>The element <span>represents</span> a selection of one item from a list of items.</p></dd>
- <p>The <code>menu</code> element is used to define context menus and
- toolbars.</p>
+ </dl>
- <p>For example, the following represents a toolbar with three menu
- buttons on it, each of which has a dropdown menu with a series of
- options:</p>
+ <p>The <dfn title="attr-menuitem-label"><code>label</code></dfn> attribute gives the name of the
+ command, as shown to the user. The <code title="attr-menuitem-label">label</code> attribute must
+ be specified if the element is in the <span>explicit command</span> mode. If the attribute is
+ specified, it must have a value that is not the empty string.</p>
- <pre><menu type="toolbar">
- <li>
- <menu label="File">
- <button type="button" onclick="fnew()">New...</button>
- <button type="button" onclick="fopen()">Open...</button>
- <button type="button" onclick="fsave()">Save</button>
- <button type="button" onclick="fsaveas()">Save as...</button>
- </menu>
- </li>
- <li>
- <menu label="Edit">
- <button type="button" onclick="ecopy()">Copy</button>
- <button type="button" onclick="ecut()">Cut</button>
- <button type="button" onclick="epaste()">Paste</button>
- </menu>
- </li>
- <li>
- <menu label="Help">
- <li><a href="help.html">Help</a></li>
- <li><a href="about.html">About</a></li>
- </menu>
- </li>
-</menu></pre>
+ <p>The <dfn title="attr-menuitem-icon"><code>icon</code></dfn> attribute gives a picture that
+ represents the command. If the attribute is specified, the attribute's value must contain a
+ <span>valid non-empty URL potentially surrounded by spaces</span>. <span class="impl">To obtain
+ the <span>absolute URL</span> of the icon when the attribute's value is not the empty string, the
+ attribute's value must be <span title="resolve a url">resolved</span> relative to the element.
+ When the attribute is absent, or its value is the empty string, or <span title="resolve a
+ url">resolving</span> its value fails, there is no icon.</span></p> <!-- this is affected by the
+ base URL being changed, so users of this should cache the image once they've fetched it once, at
+ least until the relative url changes again -->
- <p>In a supporting user agent, this might look like this:</p>
+ <p>The <dfn title="attr-menuitem-disabled"><code>disabled</code></dfn> attribute is a
+ <span>boolean attribute</span> that, if present, indicates that the command is not available in
+ the current state.</p>
- <p><img src="images/sample-toolbar-1.png" width="303" height="101" alt="A toolbar with three buttons, labeled 'File', 'Edit', and 'Help'; where if you select the 'Edit' button you get a drop-down menu with three more options, 'Copy', 'Cut', and 'Paste'."></p>
+ <p class="note">The distinction between <code title="attr-menuitem-disabled">disabled</code> and
+ <code title="attr-hidden">hidden</code> is subtle. A command would be disabled if, in the same
+ context, it could be enabled if only certain aspects of the situation were changed. A command
+ would be marked as hidden if, in that situation, the command will never be enabled. For example,
+ in the context menu for a water faucet, the command "open" might be disabled if the faucet is
+ already open, but the command "eat" would be marked hidden since the faucet could never be
+ eaten.</p>
- <p>In a legacy user agent, the above would look like a bulleted list
- with three items, the first of which has four buttons, the second of
- which has three, and the third of which has two nested bullet points
- with two items consisting of links.</p>
+ <p>The <dfn title="attr-menuitem-checked"><code>checked</code></dfn> attribute is a <span>boolean
+ attribute</span> that, if present, indicates that the command is selected. The attribute must be
+ omitted unless the <code title="attr-menuitem-type">type</code> attribute is in either the <span
+ title="attr-menuitem-type-state-checkbox">Checkbox</span> state or the <span
+ title="attr-menuitem-type-state-radio">Radio</span> state.</p>
+ <p>The <dfn title="attr-menuitem-radiogroup"><code>radiogroup</code></dfn> attribute gives the
+ name of the group of commands that will be toggled when the command itself is toggled, for
+ commands whose <code title="attr-menuitem-type">type</code> attribute has the value "<code
+ title="">radio</code>". The scope of the name is the child list of the parent element. The
+ attribute must be omitted unless the <code title="attr-menuitem-type">type</code> attribute is in
+ the <span title="attr-menuitem-type-state-radio">Radio</span> state.</p>
+
<hr>
- <p>The following implements a similar toolbar, with a single button
- whose values, when selected, redirect the user to Web sites.</p>
+ <p>If a <code>menuitem</code> element <var title="">slave</var> has a <dfn
+ title="attr-menuitem-command"><code>command</code></dfn> attribute, and <var title="">slave</var>
+ is <span>in a <code>Document</code></span>, and there is an element in that <code>Document</code>
+ whose <span title="concept-id">ID</span> has a value equal to the value of <var
+ title="">slave</var>'s <code title="attr-menuitem-command">command</code> attribute, and the first
+ such element in <span>tree order</span>, hereafter <var title="">master</var>, itself <span
+ title="concept-command">defines a command</span> and either is not a <code>menuitem</code> element
+ or does not itself have a <code title="attr-menuitem-command">command</code> attribute, then the
+ <dfn>master command</dfn> of <var title="">slave</var> is <var title="">master</var>.</p>
- <pre><form action="redirect.cgi">
- <menu type="toolbar">
- <label for="goto">Go to...</label>
- <menu label="Go">
- <select id="goto"<!--
- onchange="if (this.options[this.selectedIndex].value)
- window.location = this.options[this.selectedIndex].value"-->>
- <option value="" selected="selected"> Select site: </option>
- <option value="http://www.apple.com/"> Apple </option>
- <option value="http://www.mozilla.org/"> Mozilla </option>
- <option value="http://www.opera.com/"> Opera </option>
- </select>
- <span><input type="submit" value="Go"></span>
- </menu>
- </menu>
-</form></pre>
+ <p>An element with a <code title="attr-menuitem-command">command</code> attribute must have a
+ <span>master command</span>.</p>
- <p>The behavior in supporting user agents is similar to the example
- above, but here the legacy behavior consists of a single
- <code>select</code> element with a submit button. The submit button
- doesn't appear in the toolbar, because it is not a child of the
- <code>menu</code> element or of its <code>li</code> children.</p>
+ <hr>
+ <p>The <dfn title="attr-menuitem-title"><code>title</code></dfn> attribute gives a hint describing
+ the command, which might be shown to the user to help him.</p>
+ <p>The <dfn title="attr-menuitem-default"><code>default</code></dfn> attribute indicates, if
+ present, that the command is the one that would have been invoked if the user had directly
+ activated the menu's subject instead of using the menu. The <code
+ title="attr-menuitem-default">default</code> attribute is a <span>boolean attribute</span>.</p>
+ <div class="example">
+
+ <p>In this trivial example, a submit button is given a context menu that has two options, one to
+ reset the form, and one to submit the form. The submit command is marked as being the default.</p>
+
+ <pre><form action="dosearch.pl">
+ <p><label>Enter search terms: <input type="text" name="terms"></label></p>
+ <p><input type=submit contextmenu=formmenu id="submitbutton"></p>
+ <p hidden><input type=reset id="resetbutton"></p>
+ <menu type=popup id=formmenu>
+ <menuitem command="submitbutton" default>
+ <menuitem command="resetbutton">
+ </menu>
+</form></pre>
+
+ </div>
+
<div class="impl">
- <h5><dfn>Building menus and toolbars</dfn></h5>
+ <hr>
- <p>A menu (or toolbar) consists of a list of zero or more of the
- following components:</p>
+ <p>The <dfn title="dom-menuitem-type"><code>type</code></dfn> IDL
+ attribute must <span>reflect</span> the content attribute of the
+ same name, <span>limited to only known values</span>.</p>
- <ul class="brief">
- <li><span title="concept-command">Commands</span>, which can be marked as default commands</li>
- <li>Separators</li>
- <li>Other menus (which allows the list to be nested)</li>
- </ul>
+ <p>The <dfn title="dom-menuitem-label"><code>label</code></dfn>, <dfn
+ title="dom-menuitem-icon"><code>icon</code></dfn>, <dfn
+ title="dom-menuitem-disabled"><code>disabled</code></dfn>, <dfn
+ title="dom-menuitem-checked"><code>checked</code></dfn>, and <dfn
+ title="dom-menuitem-radiogroup"><code>radiogroup</code></dfn>,
+ and <dfn title="dom-menuitem-default"><code>default</code></dfn>
+ IDL attributes must <span>reflect</span> the respective content
+ attributes of the same name.</p>
- <p>The list corresponding to a particular <code>menu</code> element
- is built by iterating over its child nodes. For each child node in
- <span>tree order</span>, the required behavior depends on what the
- node is, as follows:</p>
+ <p>The <dfn title="dom-menuitem-command"><code>command</code></dfn>
+ IDL attribute must return the <span>master command</span>, if any,
+ or null otherwise.</p>
+ <hr>
+
+ <p>If the element's <span
+ title="command-facet-DisabledState">Disabled State</span> is false
+ (enabled) then the element's <span>activation behavior</span>
+ depends on the element's <code title="attr-menuitem-type">type</code>
+ and <code title="attr-menuitem-command">command</code> attributes, as
+ follows:</p>
+
<dl class="switch">
- <dt>An element that <span title="concept-command">defines a command</span></dt>
+ <dt>If the element has a <span>master command</span> set by its
+ <code title="attr-menuitem-command">command</code> attribute</dt>
- <dd>Append the command to the menu, respecting its <span
- title="concept-facet">facets</span><!-- we might need to be
- explicit about what this means for each facet, if testing shows
- this isn't well-implemented. e.g.: If there's an Icon facet for the
- command, it should be <span title="fetch">fetched</span><!- -FETCH-
- -> (this would be http-origin privacy-sensitive), and then that
- image should be associated with the command, such that each command
- only has its image fetched once, to prevent changes to the base URL
- from having effects after the image has been fetched once. (no need
- to resolve the Icon facet, it's an absolute URL) -->. <!--If the
- element is a <code>command</code> element with a <code
- title="attr-command-default">default</code> attribute, mark the
- command as being a default command.--></dd>
+ <dd><p>The user agent must <span>run synthetic click activation
+ steps</span> on the element's <span>master command</span>.</p></dd>
+ <!-- we know it has a defined <span>activation behavior</span> if
+ we get here -->
- <dt>An <code>hr</code> element</dt>
- <dt>An <code>option</code> element that has a <code
- title="attr-option-value">value</code> attribute set to the empty
- string, and has a <code
- title="attr-option-disabled">disabled</code> attribute, and whose
- <code>textContent</code> consists of a string of one or more
- hyphens (U+002D HYPHEN-MINUS)</dt>
+ <dt>If the <code title="attr-menuitem-type">type</code> attribute is
+ in the <span
+ title="attr-menuitem-type-state-checkbox">Checkbox</span> state</dt>
- <dd>Append a separator to the menu.</dd>
+ <dd><p>If the element has a <code
+ title="attr-menuitem-checked">checked</code> attribute, the UA must
+ remove that attribute. Otherwise, the UA must add a <code
+ title="attr-menuitem-checked">checked</code> attribute, with the
+ literal value <code title="">checked</code>.</p></dd>
- <dt>An <code>li</code> element</dt>
- <dt>A <code>label</code> element</dt>
+ <dt>If the <code title="attr-menuitem-type">type</code> attribute is
+ in the <span
+ title="attr-menuitem-type-state-radio">Radio</span> state</dt>
- <dd>Iterate over the children of the element.</dd>
+ <dd><p>If the element has a parent, then the UA must walk the list
+ of child nodes of that parent element, and for each node that is a
+ <code>menuitem</code> element, if that element has a <code
+ title="attr-menuitem-radiogroup">radiogroup</code> attribute whose
+ value exactly matches the current element's (treating missing <code
+ title="attr-menuitem-radiogroup">radiogroup</code> attributes as if
+ they were the empty string), and has a <code
+ title="attr-menuitem-checked">checked</code> attribute, must remove
+ that attribute.</p>
+ <p>Then, the element's <code
+ title="attr-menuitem-checked">checked</code> attribute attribute
+ must be set to the literal value <code
+ title="">checked</code>.</p></dd>
- <dt>A <code>menu</code> element with no <code title="attr-menu-label">label</code> attribute</dt>
- <dt>A <code>select</code> element</dt>
- <dd>Append a separator to the menu, then iterate over the children
- of the <code>menu</code> or <code>select</code> element, then
- append another separator.</dd>
+ <dt>Otherwise</dt>
- <!-- v2: we might want to support <select> in <label> as giving a named submenu -->
+ <dd><p>The element's <span>activation behavior</span> is to do
+ nothing.</p></dd>
+ </dl>
- <dt>A <code>menu</code> element with a <code title="attr-menu-label">label</code> attribute</dt>
- <dt>An <code>optgroup</code> element with a <code title="attr-menu-label">label</code> attribute</dt>
+ <p class="note">Firing a synthetic <code
+ title="event-click">click</code> event at the element does not cause
+ any of the actions described above to happen.</p>
- <dd>Append a submenu to the menu, using the value of the element's
- <code title="">label</code> attribute as the label of the menu. The
- submenu must be constructed by taking the element and creating a
- new menu for it using the complete process described in this
- section.</dd>
+ <!-- v2COMMAND: Expose the Triggers facet again. -->
+ <p>If the element's <span
+ title="command-facet-DisabledState">Disabled State</span> is true
+ (disabled) then the element has no <span>activation
+ behavior</span>.</p>
- <dt>Any other node</dt>
+ </div>
- <dd><span>Ignore</span> the node.</dd>
+ <p class="note">The <code>menuitem</code> element is not rendered except as <span
+ title="menu">part of a popup menu</span>.</p>
- </dl>
+ <div class="example">
- <p>Once all the nodes have been processed as described above, the
- user agent must the post-process the menu as follows:</p>
+ <p>Here is an example of a pop-up menu button with three options that let the user toggle between
+ left, center, and right alignment. One could imagine such a toolbar as part of a text editor. The
+ menu also has a separator followed by another menu item labeled "Publish", though that menu item
+ is disabled.</p>
- <ol>
+ <pre><button type=menu menu=editmenu>Commands...</button>
+<menu type="popup" id="editmenu">
+ <menuitem type="radio" radiogroup="alignment" checked="checked"
+ label="Left" icon="icons/alL.png" onclick="setAlign('left')">
+ <menuitem type="radio" radiogroup="alignment"
+ label="Center" icon="icons/alC.png" onclick="setAlign('center')">
+ <menuitem type="radio" radiogroup="alignment"
+ label="Right" icon="icons/alR.png" onclick="setAlign('right')">
+ <hr>
+ <menuitem type="command" disabled
+ label="Publish" icon="icons/pub.png" onclick="publish()">
+</menu></pre>
- <li>Except for separators, any menu item with no label, or whose
- label is the empty string, must be removed.</li>
+ </div>
- <li>Any sequence of two or more separators in a row must be
- collapsed to a single separator.</li>
- <li>Any separator at the start or end of the menu must be
- removed.</li>
+ <h4>Context menus</h4>
- </ol>
+ <h5>Declaring a context menu</h5>
- </div>
+ <p>The <dfn title="attr-contextmenu"><code>contextmenu</code></dfn> attribute gives the element's
+ context menu. The value must be the <span title="concept-id">ID</span> of a <code>menu</code>
+ element in the same <span>home subtree</span> whose <code title="attr-menu-type">type</code>
+ attribute is in the <span title="popup menu state">popup menu</span> state.</p>
+ <p class="note">When a user right-clicks on an element with a <code
+ title="attr-contextmenu">contextmenu</code> attribute, the user agent will first fire a <code
+ title="event-contextmenu">contextmenu</code> event at the element, and then, if that event is not
+ canceled, a <code title="event-show">show</code> event at the <code>menu</code> element.</p>
+ <div class="example">
+ <p>Here is an example of a context menu for an input control:</p>
- <h5><dfn>Context menus</dfn></h5>
+ <pre><form name="npc">
+ <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
+ <menu type=popup id=namemenu>
+ <menuitem label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
+ <menuitem label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
+ </menu>
+</form></pre>
- <p>The <dfn title="attr-contextmenu"><code>contextmenu</code></dfn>
- attribute gives the element's <span title="context menus">context
- menu</span>. The value must be the <span
- title="concept-id">ID</span> of a <code>menu</code> element in the
- DOM. <span class="impl">If the node that would be obtained by
- invoking the <code
- title="dom-Document-getElementById">getElementById()</code> method
- using the attribute's value as the only argument is null or not a
- <code>menu</code> element, then the element has no assigned context
- menu. Otherwise, the element's assigned context menu is the element
- so identified.</span></p>
+ <p>This adds two items to the control's context menu, one called "Pick random name", and one
+ called "Prefill other fields based on name". They invoke scripts that are not shown in the
+ example above.</p>
+ </div>
+
+
+
<div class="impl">
- <p>When an element's context menu is requested (e.g. by the user
- right-clicking the element, or pressing a context menu key), the
- user agent must apply the appropriate rules from the following
+ <h5>Processing model</h5>
+
+ <p>If the there is no element with the ID given by an element's <code
+ title="attr-contextmenu">contextmenu</code> attribute's value in the element's <span>home
+ subtree</span>, or if the first such element is not a <code>menu</code> element whose <code
+ title="attr-menu-type">type</code> attribute is in the <span title="popup menu state">popup
+ menu</span> state, then the element has no assigned context menu. Otherwise, the element's
+ assigned context menu is the first such element.</p>
+
+ <p>When an element's context menu is requested (e.g. by the user right-clicking the element, or
+ pressing a context menu key), the user agent must apply the appropriate rules from the following
list:</p>
<dl class="switch">
@@ -68421,111 +68392,54 @@
<dt>Otherwise</dt>
- <dd><p>The user agent must <span title="fire a synthetic mouse
- event">fire a synthetic mouse event named <code
- title="event-contextmenu">contextmenu</code></span> that bubbles
- and is cancelable at the element for which the menu was
- requested.</p></dd>
+ <dd><p>The user agent must <span title="fire a synthetic mouse event">fire a synthetic mouse
+ event named <code title="event-contextmenu">contextmenu</code></span> that bubbles and is
+ cancelable at the element for which the menu was requested.</p></dd>
</dl>
<p class="note">Typically, therefore, the firing of the <code
- title="event-contextmenu">contextmenu</code> event will be the
- default action of a <code title="mouseup">mouseup</code> or <code
- title="event-keyup">keyup</code> event. The exact sequence of events
- is UA-dependent, as it will vary based on platform conventions.</p>
+ title="event-contextmenu">contextmenu</code> event will be the default action of a <code
+ title="mouseup">mouseup</code> or <code title="event-keyup">keyup</code> event. The exact sequence
+ of events is UA-dependent, as it will vary based on platform conventions.</p>
- <p>The default action of the <code
- title="event-contextmenu">contextmenu</code> event depends on
- whether the element or one of its ancestors has a context menu
- assigned (using the <code
- title="attr-contextmenu">contextmenu</code> attribute) or not. If
- there is no context menu assigned, the default action must be for
- the user agent to show its default context menu, if it has one.</p>
+ <p>The default action of the <code title="event-contextmenu">contextmenu</code> event depends on
+ whether or not the element or one of its ancestors has a context menu assigned (using the <code
+ title="attr-contextmenu">contextmenu</code> attribute) when the event dispatch has completed. If
+ there is no context menu assigned, the default action must be for the user agent to show its
+ default context menu, if it has one.</p>
- <p>If the element or one of its ancestors <em>does</em> have a
- context menu assigned, then the user agent must <span>fire a simple
- event</span> named <code title="event-show">show</code> at the
- <code>menu</code> element of the context menu of the nearest
- ancestor (including the element itself) with one assigned.</p>
- <!-- v2: include modifier key information -->
+ <p>If the element or one of its ancestors <em>does</em> have a context menu assigned, then the
+ user agent must <span>fire a simple event</span> named <code title="event-show">show</code> that
+ is cancelable at the <code>menu</code> element of the context menu of the nearest ancestor
+ (including the element itself) with one assigned.</p> <!-- v2: include modifier key information
+ -->
- <p>The default action of <em>this</em> event is that the user agent
- must show a context menu <span title="building menus and
- toolbars">built</span> from the <code>menu</code> element.</p>
+ <p>The default action of <em>this</em> event is that the user agent must <span title="construct
+ and show a menu">construct and show</span> the menu for the <code>menu</code> element.</p>
- <p>The user agent may also provide access to its default context
- menu, if any, with the context menu shown. For example, it could
- merge the menu items from the two menus together, or provide the
+ <p>The user agent may also provide access to its default context menu, if any, with the context
+ menu shown. For example, it could merge the menu items from the two menus together, or provide the
page's context menu as a submenu of the default menu.</p>
- <p>If the user dismisses the menu without making a selection,
- nothing in particular happens.</p>
+ <p>User agents may provide means for bypassing the context menu processing model, ensuring that
+ the user can always access the UA's default context menus. For example, the user agent could
+ handle right-clicks that have the Shift key depressed in such a way that it does not fire the
+ <code title="event-contextmenu">contextmenu</code> event and instead always shows the default
+ context menu.</p>
- <p>If the user selects a menu item that represents a <span
- title="concept-command">command</span>, then the UA must invoke
- that command's <span title="command-facet-Action">Action</span>.</p>
+ <p>The <dfn title="dom-contextMenu"><code>contextMenu</code></dfn> IDL attribute must
+ <span>reflect</span> the <code title="attr-contextmenu">contextmenu</code> content attribute.</p>
- <p>Context menus must not, while being shown, reflect changes in the
- DOM; they are constructed as the default action of the <code
- title="event-show">show</code> event and must remain as constructed
- until dismissed.</p>
-
- <p>User agents may provide means for bypassing the context menu
- processing model, ensuring that the user can always access the UA's
- default context menus. For example, the user agent could handle
- right-clicks that have the Shift key depressed in such a way that it
- does not fire the <code title="event-contextmenu">contextmenu</code>
- event and instead always shows the default context menu.</p>
-
- <p>The <dfn title="dom-contextMenu"><code>contextMenu</code></dfn>
- IDL attribute must <span>reflect</span> the <code
- title="attr-contextmenu">contextmenu</code> content attribute.</p>
-
</div>
- <div class="example">
- <p>Here is an example of a context menu for an input control:</p>
- <pre><form name="npc">
- <label>Character name: <input name=char type=text contextmenu=namemenu required></label>
- <menu type=context id=namemenu>
- <command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
- <command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
- </menu>
-</form></pre>
- <p>This adds two items to the control's context menu, one called
- "Pick random name", and one called "Prefill other fields based on
- name". They invoke scripts that are not shown in the example
- above.</p>
-
- </div>
-
-
-
- <div class="impl">
-
- <h5><dfn>Toolbars</dfn></h5>
-
- <p>When a <code>menu</code> element has a <code
- title="attr-menu-type">type</code> attribute in the <span
- title="toolbar state">toolbar</span> state, then the user agent
- must <span title="building menus and toolbars">build</span> the
- menu for that <code>menu</code> element, and use the result in the
- rendering.</p>
-
- <p>The user agent must reflect changes made to the
- <code>menu</code>'s DOM, by immediately <span title="building menus
- and toolbars">rebuilding</span> the menu.</p>
-
- </div>
-
-
-
<h4 id="commands">Commands</h4>
+ <h5>Facets</h5>
+
<p>A <dfn title="concept-command">command</dfn> is the abstraction
behind menu items, buttons, and links. Once a command is defined,
other parts of the interface can refer to the same command, allowing
@@ -68798,17 +68712,32 @@
<hr>
- <p>User agents may expose the <span
- title="concept-command">commands</span> whose <span
- title="command-facet-HiddenState">Hidden State</span> facet is false
- (visible) and whose elements are <span>in a
- <code>Document</code></span>. For example, such commands could be
- listed in the user agent's menu bar. User agents are encouraged to
- do this especially for commands that have <span
- title="command-facet-AccessKey">Access Keys</span>, as a way to
- advertise those keys to the user.</p>
+ <p id="expose-commands-in-ui">User agents may expose the <span
+ title="concept-command">commands</span> that match the following criteria:</p>
+ <ul class="brief">
+ <li>The <span title="command-facet-HiddenState">Hidden State</span> facet is false (visible)</li>
+
+ <li>The element is <span>in a <code>Document</code></span> that has an associated <span>browsing
+ context</span>.</li>
+
+ <li>Neither the element nor any of its ancestors has a <code title="attr-hidden">hidden</code>
+ attribute specified.</li>
+
+ <li>The element is not a <code>menuitem</code> element, or it is a child of a <span>currently
+ relevant <code>menu</code> element</span>, or it has an <span
+ title="command-facet-accesskey">Access Key</span>.</li>
+
+ </ul>
+
+ <p>User agents are encouraged to do this especially for commands that have <span
+ title="command-facet-AccessKey">Access Keys</span>, as a way to advertise those keys to the
+ user.</p>
+
+ <p class="example">For example, such commands could be listed in the user agent's menu bar.</p>
+
+
<div class="impl">
<h5><dfn title="a-command">Using the <code>a</code> element to define a command</dfn></h5>
@@ -68905,10 +68834,10 @@
<p>The <span title="command-facet-Type">Type</span> of the command
is "radio" if the <code title="attr-input-type">type</code>
- attribute is in the <code title="attr-input-type-radio">Radio
- Button</code> state, "checkbox" if the <code
- title="attr-input-type">type</code> attribute is in the <code
- title="attr-input-type-checkbox">Checkbox</code> state, and
+ attribute is in the <span title="attr-input-type-radio">Radio
+ Button</span> state, "checkbox" if the <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-checkbox">Checkbox</span> state, and
"command" otherwise.</p>
<p>The <span title="command-facet-ID">ID</span> of the command is
@@ -69055,16 +68984,16 @@
<h5>Using the <dfn
- title="command-element"><code>command</code></dfn> element to define
+ title="command-element"><code>menuitem</code></dfn> element to define
a command</h5>
- <p>A <code>command</code> element that does not have a <code
- title="attr-command-command">command</code> attribute <span
+ <p>A <code>menuitem</code> element that does not have a <code
+ title="attr-menuitem-command">command</code> attribute <span
title="concept-command">defines a command</span>.</p>
<p>The <span title="command-facet-Type">Type</span> of the command
- is "radio" if the <code>command</code>'s <code
- title="attr-command-type">type</code> attribute is
+ is "radio" if the <code>menuitem</code>'s <code
+ title="attr-menuitem-type">type</code> attribute is
"<code>radio</code>", "checkbox" if the attribute's value is
"<code>checkbox</code>", and "command" otherwise.</p>
@@ -69075,18 +69004,18 @@
<p>The <span title="command-facet-Label">Label</span> of the command
is the value of the element's <code
- title="attr-command-label">label</code> attribute, if there is one,
+ title="attr-menuitem-label">label</code> attribute, if there is one,
or the empty string if it doesn't.</p>
<p>The <span title="command-facet-Hint">Hint</span> of the command
is the string given by the element's <code
- title="attr-command-title">title</code> attribute, if any, and the
+ title="attr-menuitem-title">title</code> attribute, if any, and the
empty string if the attribute is absent.</p>
<p>The <span title="command-facet-Icon">Icon</span> for the command
is the <span>absolute URL</span> obtained from <span title="resolve
a url">resolving</span> the value of the element's <code
- title="attr-command-icon">icon</code> attribute, relative to the
+ title="attr-menuitem-icon">icon</code> attribute, relative to the
element, if it has such an attribute and resolving it is
successful. Otherwise, there is no <span
title="command-facet-Icon">Icon</span> for the command.</p>
@@ -69103,12 +69032,12 @@
<p>The <span title="command-facet-DisabledState">Disabled
State</span> of the command is true if the element or one of its
ancestors is <span>inert</span>, or if the element has a <code
- title="attr-command-disabled">disabled</code> attribute, and false
+ title="attr-menuitem-disabled">disabled</code> attribute, and false
otherwise.</p>
<p>The <span title="command-facet-CheckedState">Checked State</span>
of the command is true (checked) if the element has a <code
- title="attr-command-checked">checked</code> attribute, and false
+ title="attr-menuitem-checked">checked</code> attribute, and false
otherwise.</p>
<p>The <span title="command-facet-Action">Action</span> of the
@@ -69120,9 +69049,9 @@
- <h5><dfn title="command-command-command">Using the <code title="attr-command-command">command</code> attribute on <code>command</code> elements to define a command indirectly</dfn></h5>
+ <h5><dfn title="command-menuitem-command">Using the <code title="attr-menuitem-command">command</code> attribute on <code>menuitem</code> elements to define a command indirectly</dfn></h5>
- <p>A <code>command</code> element with a <span>master command</span>
+ <p>A <code>menuitem</code> element with a <span>master command</span>
<span title="concept-command">defines a command</span>.</p>
<p>The <span title="command-facet-Type">Type</span> of the command
@@ -72344,16 +72273,9 @@
<li><code>option</code> elements that are <span
title="concept-option-disabled">disabled</span></li>
- <li><code>command</code> elements that have a <code
- title="attr-command-disabled">disabled</code> attribute</li>
+ <li><code>menuitem</code> elements that have a <code
+ title="attr-menuitem-disabled">disabled</code> attribute</li>
- <li><code>li</code> elements that are children of
- <code>menu</code> elements, and that have a child element that
- defines a <span title="concept-command">command</span>, if the
- first such element's <span
- title="command-facet-DisabledState">Disabled State</span> facet
- is true (disabled)</li>
-
<li><code>fieldset</code> elements that have a <code
title="attr-fieldset-disabled">disabled</code> attribute</li>
@@ -72476,8 +72398,8 @@
title="attr-input-type-reset">Reset Button</span>, or <span
title="attr-input-type-button">Button</span> state</li>
- <li><code>command</code> elements that do not have a <code
- title="attr-command-disabled">disabled</code> attribute</li>
+ <li><code>menuitem</code> elements that do not have a <code
+ title="attr-menuitem-disabled">disabled</code> attribute</li>
<li>elements that have their <span>tabindex focus flag</span> set</li>
@@ -72625,16 +72547,9 @@
<li><code>option</code> elements that are not <span
title="concept-option-disabled">disabled</span></li>
- <li><code>command</code> elements that do not have a <code
- title="attr-command-disabled">disabled</code> attribute</li>
+ <li><code>menuitem</code> elements that do not have a <code
+ title="attr-menuitem-disabled">disabled</code> attribute</li>
- <li><code>li</code> elements that are children of
- <code>menu</code> elements, and that have a child element that
- defines a <span title="concept-command">command</span>, if the
- first such element's <span
- title="command-facet-DisabledState">Disabled State</span> facet
- is false (not disabled)</li>
-
<li><code>fieldset</code> elements that do not have a <code
title="attr-fieldset-disabled">disabled</code> attribute</li>
@@ -72679,16 +72594,16 @@
title="concept-option-selectedness">selectedness</span> is
true</li>
- <li><code>command</code> elements whose <code
- title="attr-command-type">type</code> attribute is in the <span
- title="attr-command-type-state-checkbox">Checkbox</span> state
- and that have a <code title="attr-command-checked">checked</code>
+ <li><code>menuitem</code> elements whose <code
+ title="attr-menuitem-type">type</code> attribute is in the <span
+ title="attr-menuitem-type-state-checkbox">Checkbox</span> state
+ and that have a <code title="attr-menuitem-checked">checked</code>
attribute</li>
- <li><code>command</code> elements whose <code
- title="attr-command-type">type</code> attribute is in the <span
- title="attr-command-type-state-radio">Radio</span> state and that
- have a <code title="attr-command-checked">checked</code>
+ <li><code>menuitem</code> elements whose <code
+ title="attr-menuitem-type">type</code> attribute is in the <span
+ title="attr-menuitem-type-state-radio">Radio</span> state and that
+ have a <code title="attr-menuitem-checked">checked</code>
attribute</li>
</ul>
@@ -72749,8 +72664,8 @@
<li><code>option</code> elements that have a <code
title="attr-option-selected">selected</code> attribute</li>
<!--
- <li><code>command</code> elements that have a <code
- title="attr-command-default">default</code> attribute</li>
+ <li><code>menuitem</code> elements that have a <code
+ title="attr-menuitem-default">default</code> attribute</li>
-->
</ul>
@@ -90048,7 +89963,7 @@
<li><code>textarea</code> elements</li>
- <li><code>command</code> elements</li>
+ <li><code>menuitem</code> elements</li>
<li>Elements with a <code title="attr-draggable">draggable</code>
attribute set, if that would enable the user agent to allow the
@@ -90690,21 +90605,19 @@
title="attr-accesskey">accesskey</code> content attribute is changed
or the element is moved to another <code>Document</code>.</p>
- <p>When the user presses the key combination corresponding to the
- <span>assigned access key</span> for an element, if the element
- <span title="concept-command">defines a command</span>, the
- command's <span title="command-facet-HiddenState">Hidden
- State</span> facet is false (visible), the command's <span
- title="command-facet-DisabledState">Disabled State</span> facet is
- also false (enabled), and the element is <span>in a
- <code>Document</code></span>, then the user agent must trigger the
- <span title="command-facet-Action">Action</span> of the command.</p>
+ <p>When the user presses the key combination corresponding to the <span>assigned access key</span>
+ for an element, if the element <span title="concept-command">defines a command</span>, the
+ command's <span title="command-facet-HiddenState">Hidden State</span> facet is false (visible),
+ the command's <span title="command-facet-DisabledState">Disabled State</span> facet is also false
+ (enabled), the element is <span>in a <code>Document</code></span> that has an associated
+ <span>browsing context</span>, and neither the element nor any of its ancestors has a <code
+ title="attr-hidden">hidden</code> attribute specified, then the user agent must trigger the <span
+ title="command-facet-Action">Action</span> of the command.</p>
- <p class="note">User agents might expose elements that have an <code
- title="attr-accesskey">accesskey</code> attribute in other ways as
- well, e.g. in a menu displayed in response to a specific key
- combination.</p> <!-- the actual conformance criteria for this is in
- the section that defines commands -->
+ <p class="note">User agents <a href="#expose-commands-in-ui">might expose</a> elements that have
+ an <code title="attr-accesskey">accesskey</code> attribute in other ways as well, e.g. in a menu
+ displayed in response to a specific key combination.</p> <!-- the actual conformance criteria for
+ this is in the section that defines commands -->
<hr>
@@ -100516,12 +100429,10 @@
<dt><dfn>Void elements</dfn></dt>
- <dd><code>area</code>, <code>base</code>, <code>br</code>,
- <code>col</code>, <code>command</code>, <code>embed</code>,
- <code>hr</code>, <code>img</code>, <code>input</code>,
- <code>keygen</code>, <code>link</code>, <code>meta</code>,
- <code>param</code>, <code>source</code>, <code>track</code>,
- <code>wbr</code></dd>
+ <dd><code>area</code>, <code>base</code>, <code>br</code>, <code>col</code>, <code>embed</code>,
+ <code>hr</code>, <code>img</code>, <code>input</code>, <code>keygen</code>, <code>link</code>,
+ <code>menuitem</code>, <code>meta</code>, <code>param</code>, <code>source</code>,
+ <code>track</code>, <code>wbr</code></dd>
<!-- see also other places that say VOIDLIST -->
<dt><dfn>Raw text elements</dfn></dt>
@@ -102686,7 +102597,7 @@
<code>base</code>, <code>basefont</code>, <code>bgsound</code>,
<code>blockquote</code>, <code>body</code>, <code>br</code>,
<code>button</code>, <code>caption</code>, <code>center</code>,
- <code>col</code>, <code>colgroup</code>, <code>command</code>,
+ <code>col</code>, <code>colgroup</code>, <code>menuitem</code>,
<code>dd</code>, <code>details</code>, <code>dir</code>,
<code>div</code>, <code>dl</code>, <code>dt</code>,
<code>embed</code>, <code>fieldset</code>, <code>figcaption</code>,
@@ -110397,15 +110308,13 @@
<p>Append a U+003E GREATER-THAN SIGN character (>).</p>
- <p>If <var title="">current node</var> is an
- <code>area</code>, <code>base</code>, <code>basefont</code>,
- <code>bgsound</code>, <code>br</code>, <code>col</code>,
- <code>command</code>, <code>embed</code>, <code>frame</code>,
- <code>hr</code>, <code>img</code>, <code>input</code>,
- <code>keygen</code>, <code>link</code>, <code>meta</code>,
- <code>param</code>, <code>source</code>, <code>track</code> or
- <code>wbr</code> element, then continue on to the next child
- node at this point.</p> <!-- VOIDLIST superset -->
+ <p>If <var title="">current node</var> is an <code>area</code>, <code>base</code>,
+ <code>basefont</code>, <code>bgsound</code>, <code>br</code>, <code>col</code>,
+ <code>embed</code>, <code>frame</code>, <code>hr</code>, <code>img</code>,
+ <code>input</code>, <code>keygen</code>, <code>link</code>, <code>menuitem</code>,
+ <code>meta</code>, <code>param</code>, <code>source</code>, <code>track</code> or
+ <code>wbr</code> element, then continue on to the next child node at this point.</p>
+ <!-- VOIDLIST superset -->
<!-- also, i guess: image and isindex, but we don't list those
because we don't consider those "elements", more "macros", and
thus we should never serialize them -->
@@ -111303,7 +111212,7 @@
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
[hidden], area, base, basefont, command, datalist, head,
-input[type=hidden i], link, menu[type=context i], meta, noembed, noframes,
+input[type=hidden i], link, menu[type=popup i], meta, noembed, noframes,
param, rp, script, source, style, track, title {
display: none;
}
@@ -114068,24 +113977,6 @@
<div class="impl">
- <h4>Toolbars</h4>
-
- <p>When a <code>menu</code> element's <code
- title="attr-menu-type">type</code> attribute is in the <span
- title="toolbar state">toolbar</span> state, the element is
- expected to be treated as a replaced element with a height about two
- lines high and a width derived from the contents of the element.</p>
-
- <p>The element is expected to have, by default, the appearance of a
- toolbar on the user agent's platform. It is expected to contain the
- menu that is <span title="building menus and toolbars">built</span>
- from the element.</p>
-
- </div>
-
-
- <div class="impl">
-
<h3>Bindings</h3>
<h4>Introduction</h4>
@@ -114123,6 +114014,11 @@
'inline-block' box rendered as a button whose contents are the
contents of the element.</p>
+ <p>When the <code>button</code> element's <code title="attr-button-type">type</code> attribute is
+ in the <span title="attr-button-type-menu-state">Menu</span> state, the user agent is expected to
+ indicate that activating the element will display a menu, e.g. by displaying a down-pointing
+ triangle after the button's label.</p>
+
</div>
@@ -118363,7 +118259,7 @@
</tr>
<tr>
- <th><code>command</code></th>
+ <th><code>menuitem</code></th>
<td>Menu command</td>
<td><span title="Metadata content">metadata</span>;
<span title="Flow content">flow</span>;
@@ -118372,14 +118268,14 @@
<span title="Phrasing content">phrasing</span></td>
<td>empty</td>
<td><span title="global attributes">globals</span>;
- <code title="attr-command-type">type</code>;
- <code title="attr-command-label">label</code>;
- <code title="attr-command-icon">icon</code>;
- <code title="attr-command-disabled">disabled</code>;
- <code title="attr-command-checked">checked</code>;
- <code title="attr-command-radiogroup">radiogroup</code>;
- <code title="attr-command-command">command</code></td>
- <td><code>HTMLCommandElement</code></td>
+ <code title="attr-menuitem-type">type</code>;
+ <code title="attr-menuitem-label">label</code>;
+ <code title="attr-menuitem-icon">icon</code>;
+ <code title="attr-menuitem-disabled">disabled</code>;
+ <code title="attr-menuitem-checked">checked</code>;
+ <code title="attr-menuitem-radiogroup">radiogroup</code>;
+ <code title="attr-menuitem-command">command</code></td>
+ <td><code>HTMLMenuItemElement</code></td>
</tr>
<tr>
@@ -118836,7 +118732,7 @@
<th><code>li</code></th>
<td>List item</td>
<td>none</td>
- <td><code>ol</code>; <code>ul</code>; <code>menu</code></td>
+ <td><code>ol</code>; <code>ul</code>; <code>menu</code>*</td>
<td><span title="Flow content">flow</span></td>
<td><span title="global attributes">globals</span>;
<code title="attr-li-value">value</code>*</td>
@@ -118891,11 +118787,14 @@
<tr>
<th><code>menu</code></th>
<td>Menu of commands</td>
- <td><span title="Flow content">flow</span>;
- <span title="Interactive content">interactive</span>*</td>
<td><span title="Flow content">flow</span></td>
+ <td><span title="Flow content">flow</span>;
+ <code>menu</code>*</td>
<td><code>li</code>*;
- <span title="Flow content">flow</span></td>
+ <span title="Flow content">flow</span>*;
+ <code>menuitem</code>*;
+ <code>hr</code>*;
+ <code>menu</code>*</td>
<td><span title="global attributes">globals</span>;
<code title="attr-menu-type">type</code>;
<code title="attr-menu-label">label</code></td>
@@ -119534,15 +119433,12 @@
<p class="tablenote"><small>An asterisk (*) in a cell indicates that the actual rules are more
complicated than indicated in the table above.</small></p>
- <p>† Categories in the "Parents" column refer to parents that
- list the given categories in their content model, not to elements
- that themselves are in those categories. For example, the
- <code>a</code> element's "Parents" column says "phrasing", so any
- element whose content model contains the "phrasing" category could
- be a parent of an <code>a</code> element. Since the "flow" category
- includes all the "phrasing" elements, that means the
- <code>address</code> element could be a parent to an <code>a</code>
- element.</p>
+ <p>† Categories in the "Parents" column refer to parents that list the given categories in
+ their content model, not to elements that themselves are in those categories. For example, the
+ <code>a</code> element's "Parents" column says "phrasing", so any element whose content model
+ contains the "phrasing" category could be a parent of an <code>a</code> element. Since the "flow"
+ category includes all the "phrasing" elements, that means the <code>th</code> element could be a
+ parent to an <code>a</code> element.</p>
@@ -119564,7 +119460,6 @@
<td> <span>Metadata content</span>
<td>
<code>base</code>;
- <code>command</code>;
<code>link</code>;
<code>meta</code>;
<code>noscript</code>;
@@ -119592,7 +119487,6 @@
<code>canvas</code>;
<code>cite</code>;
<code>code</code>;
- <code>command</code>;
<code>data</code>;
<code>datalist</code>;
<code>del</code>;
@@ -119702,7 +119596,6 @@
<code>canvas</code>;
<code>cite</code>;
<code>code</code>;
- <code>command</code>;
<code>data</code>;
<code>datalist</code>;
<code>del</code>;
@@ -119780,7 +119673,6 @@
<code>audio</code> (if the <code title="attr-media-controls">controls</code> attribute is present);
<code>img</code> (if the <code title="attr-hyperlink-usemap">usemap</code> attribute is present);
<code>input</code> (if the <code title="attr-input-type">type</code> attribute is <em>not</em> in the <span title="attr-input-type-hidden">Hidden</span> state);
- <code>menu</code> (if the <code title="attr-menu-type">type</code> attribute is in the <span title="toolbar state">toolbar</span> state);
<code>object</code> (if the <code title="attr-hyperlink-usemap">usemap</code> attribute is present)<!-- see also comment in <object> section -->;
<code>video</code> (if the <code title="attr-media-controls">controls</code> attribute is present)
@@ -119936,7 +119828,7 @@
<code>audio</code> (if the <code title="attr-media-controls">controls</code> attribute is present);
<code>dl</code> (if the element's children include at least one name-value group);
<code>input</code> (if the <code title="attr-input-type">type</code> attribute is <em>not</em> in the <span title="attr-input-type-hidden">Hidden</span> state);
- <code>menu</code> (if the <code title="attr-menu-type">type</code> attribute is in the <span title="toolbar state">toolbar</span> state or the <span title="list state">list</span> state);
+ <code>menu</code> (if the <code title="attr-menu-type">type</code> attribute is in the <span title="toolbar state">toolbar</span> state);
<code>ol</code> (if the element's children include at least one <code>li</code> element);
<code>ul</code> (if the element's children include at least one <code>li</code> element);
<span title="text content">Text</span> that is not <span>inter-element whitespace</span>
@@ -120044,7 +119936,7 @@
<td> <span>Preferred MIME name</span> of a character encoding*
<tr>
<th> <code title="">checked</code>
- <td> <code title="attr-command-checked">command</code>;
+ <td> <code title="attr-menuitem-checked">menuitem</code>;
<code title="attr-input-checked">input</code>
<td> Whether the command or control is checked
<td> <span>Boolean attribute</span>
@@ -120074,7 +119966,7 @@
<td> <span>Valid non-negative integer</span> greater than zero
<tr>
<th> <code title="">command</code>
- <td> <code title="attr-command-command">command</code>
+ <td> <code title="attr-menuitem-command">menuitem</code>
<td> Command definition
<td> <span title="concept-id">ID</span>*
<tr>
@@ -120161,7 +120053,7 @@
<tr>
<th> <code title="">disabled</code>
<td> <code title="attr-fe-disabled">button</code>;
- <code title="attr-command-disabled">command</code>;
+ <code title="attr-menuitem-disabled">menuitem</code>;
<code title="attr-fieldset-disabled">fieldset</code>;
<code title="attr-fe-disabled">input</code>;
<code title="attr-fe-disabled">keygen</code>;
@@ -120302,7 +120194,7 @@
<td> <a href="#attribute-text">Text</a>*
<tr>
<th> <code title="">icon</code>
- <td> <code title="attr-command-icon">command</code>
+ <td> <code title="attr-menuitem-icon">menuitem</code>
<td> Icon for the command
<td> <span>Valid non-empty URL potentially surrounded by spaces</span>
<tr>
@@ -120378,7 +120270,7 @@
"<code title="attr-track-kind-metadata">metadata</code>"
<tr>
<th> <code title="">label</code>
- <td> <code title="attr-command-label">command</code>;
+ <td> <code title="attr-menuitem-label">menuitem</code>;
<code title="attr-menu-label">menu</code>;
<code title="attr-optgroup-label">optgroup</code>;
<code title="attr-option-label">option</code>;
@@ -120561,7 +120453,7 @@
"<code title="attr-media-preload-auto">auto</code>"
<tr>
<th> <code title="">radiogroup</code>
- <td> <code title="attr-command-radiogroup">command</code>
+ <td> <code title="attr-menuitem-radiogroup">menuitem</code>
<td> Name of group of commands to treat as a radio button group
<td> <a href="#attribute-text">Text</a>
<tr>
@@ -120741,7 +120633,7 @@
<td> <a href="#attribute-text">Text</a>
<tr>
<th> <code title="">title</code>
- <td> <code title="attr-command-title">command</code>
+ <td> <code title="attr-menuitem-title">menuitem</code>
<td> Hint describing the command
<td> <a href="#attribute-text">Text</a>
<tr>
@@ -120773,14 +120665,15 @@
<td> Type of button
<td> "<code title="attr-button-type-submit">submit</code>";
"<code title="attr-button-type-reset">reset</code>";
- "<code title="attr-button-type-button">button</code>"
+ "<code title="attr-button-type-button">button</code>";
+ "<code title="attr-button-type-menu">menu</code>"
<tr>
<th> <code title="">type</code>
- <td> <code title="attr-command-type">command</code>
+ <td> <code title="attr-menuitem-type">menuitem</code>
<td> Type of command
- <td> "<code title="attr-command-type-keyword-command">command</code>";
- "<code title="attr-command-type-keyword-checkbox">checkbox</code>";
- "<code title="attr-command-type-keyword-radio">radio</code>"
+ <td> "<code title="attr-menuitem-type-keyword-command">command</code>";
+ "<code title="attr-menuitem-type-keyword-checkbox">checkbox</code>";
+ "<code title="attr-menuitem-type-keyword-radio">radio</code>"
<tr>
<th> <code title="">type</code>
<td> <code title="attr-embed-type">embed</code>;
@@ -120799,7 +120692,7 @@
<th> <code title="">type</code>
<td> <code title="attr-menu-type">menu</code>
<td> Type of menu
- <td> "<code title="context menu state">context</code>"; "<code title="toolbar state">toolbar</code>"
+ <td> "<code title="popup menu state">popup</code>"; "<code title="toolbar state">toolbar</code>"
<tr>
<th> <code title="">typemustmatch</code>
<td> <code title="attr-object-typemustmatch">object</code>
@@ -121462,8 +121355,8 @@
<td> <code>HTMLTableColElement</code> : <code>HTMLElement</code>
<tr>
- <td> <code>command</code>
- <td> <code>HTMLCommandElement</code> : <code>HTMLElement</code>
+ <td> <code>menuitem</code>
+ <td> <code>HTMLMenuItemElement</code> : <code>HTMLElement</code>
<tr>
<td> <code>data</code>
More information about the Commit-Watchers
mailing list