[html5] r2762 - [] (0) Filling in the rendering section: <bb>, <button>, <details>, and a rearra [...]
whatwg at whatwg.org
whatwg at whatwg.org
Thu Feb 5 15:33:29 PST 2009
Author: ianh
Date: 2009-02-05 15:33:29 -0800 (Thu, 05 Feb 2009)
New Revision: 2762
Modified:
index
source
Log:
[] (0) Filling in the rendering section: <bb>, <button>, <details>, and a rearranging of the sections with minor tweaks.
Modified: index
===================================================================
--- index 2009-02-05 09:55:07 UTC (rev 2761)
+++ index 2009-02-05 23:33:29 UTC (rev 2762)
@@ -1039,42 +1039,47 @@
<li><a href=#fonts-and-colors><span class=secno>10.3.5 </span>Fonts and colors</a></li>
<li><a href=#punctuation-and-decorations><span class=secno>10.3.6 </span>Punctuation and decorations</a></li>
<li><a href=#resetting-rules-for-inherited-properties><span class=secno>10.3.7 </span>Resetting rules for inherited properties</a></ol></li>
- <li><a href=#self-contained-features><span class=secno>10.4 </span>Self-contained features</a>
+ <li><a href=#replaced-elements><span class=secno>10.4 </span>Replaced elements</a>
<ol>
<li><a href=#embedded-content-1><span class=secno>10.4.1 </span>Embedded content</a></li>
- <li><a href=#frames><span class=secno>10.4.2 </span>Frames</a></li>
- <li><a href=#tool-bars-0><span class=secno>10.4.3 </span>Tool bars</a></li>
- <li><a href=#the-bb-element-0><span class=secno>10.4.4 </span>The <code>bb</code> element</a></li>
- <li><a href=#the-button-element-0><span class=secno>10.4.5 </span>The <code>button</code> element</a></li>
- <li><a href=#the-datagrid-element><span class=secno>10.4.6 </span>The <code>datagrid</code> element</a></li>
- <li><a href=#the-details-element-0><span class=secno>10.4.7 </span>The <code>details</code> element</a></li>
- <li><a href=#the-fieldset-element-0><span class=secno>10.4.8 </span>The <code>fieldset</code> element</a></li>
- <li><a href=#the-hr-element-0><span class=secno>10.4.9 </span>The <code>hr</code> element</a></li>
- <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>10.4.10 </span>The <code>input</code> element as a text entry widget</a></li>
- <li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>10.4.11 </span>The <code>input</code> element as domain-specific widgets</a></li>
- <li><a href=#the-input-element-as-a-range-control><span class=secno>10.4.12 </span>The <code>input</code> element as a range control</a></li>
- <li><a href=#the-input-element-as-a-color-well><span class=secno>10.4.13 </span>The <code>input</code> element as a color well</a></li>
- <li><a href=#the-input-element-as-a-check-box-widget><span class=secno>10.4.14 </span>The <code>input</code> element as a check box widget</a></li>
- <li><a href=#the-input-element-as-a-radio-button-widget><span class=secno>10.4.15 </span>The <code>input</code> element as a radio button widget</a></li>
- <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>10.4.16 </span>The <code>input</code> element as a file upload control</a></li>
- <li><a href=#the-input-element-as-a-button><span class=secno>10.4.17 </span>The <code>input</code> element as a button</a></li>
- <li><a href=#the-marquee-element><span class=secno>10.4.18 </span>The <code>marquee</code> element</a></li>
- <li><a href=#the-meter-element-0><span class=secno>10.4.19 </span>The <code>meter</code> element</a></li>
- <li><a href=#the-progress-element-0><span class=secno>10.4.20 </span>The <code>progress</code> element</a></li>
- <li><a href=#the-select-element-0><span class=secno>10.4.21 </span>The <code>select</code> element</a></li>
- <li><a href=#the-textarea-element-0><span class=secno>10.4.22 </span>The <code>textarea</code> element</a></li>
- <li><a href=#the-title-attribute-0><span class=secno>10.4.23 </span>The <code title=attr-title>title</code> attribute</a></ol></li>
- <li><a href=#interactive-media><span class=secno>10.5 </span>Interactive media</a>
+ <li><a href=#images-0><span class=secno>10.4.2 </span>Images</a></li>
+ <li><a href=#attributes-for-embedded-content-and-images><span class=secno>10.4.3 </span>Attributes for embedded content and images</a></li>
+ <li><a href=#tool-bars-0><span class=secno>10.4.4 </span>Tool bars</a></ol></li>
+ <li><a href=#bindings><span class=secno>10.5 </span>Bindings</a>
<ol>
- <li><a href=#hit-testing><span class=secno>10.5.1 </span>Hit testing</a></li>
- <li><a href=#links-0><span class=secno>10.5.2 </span>Links</a></li>
- <li><a href=#the-mark-element-0><span class=secno>10.5.3 </span>The <code>mark</code> element</a></li>
- <li><a href=#the-contenteditable-attribute><span class=secno>10.5.4 </span>The <code title=attr-contenteditable>contenteditable</code> attribute</a></ol></li>
- <li><a href=#print-media><span class=secno>10.6 </span>Print media</a></li>
- <li><a href=#interaction-with-css><span class=secno>10.7 </span>Interaction with CSS</a></ol></li>
+ <li><a href=#introduction-10><span class=secno>10.5.1 </span>Introduction</a></li>
+ <li><a href=#the-bb-element-0><span class=secno>10.5.2 </span>The <code>bb</code> element</a></li>
+ <li><a href=#the-button-element-0><span class=secno>10.5.3 </span>The <code>button</code> element</a></li>
+ <li><a href=#the-datagrid-element><span class=secno>10.5.4 </span>The <code>datagrid</code> element</a></li>
+ <li><a href=#the-details-element-0><span class=secno>10.5.5 </span>The <code>details</code> element</a></li>
+ <li><a href=#the-fieldset-element-0><span class=secno>10.5.6 </span>The <code>fieldset</code> element</a></li>
+ <li><a href=#the-hr-element-0><span class=secno>10.5.7 </span>The <code>hr</code> element</a></li>
+ <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>10.5.8 </span>The <code>input</code> element as a text entry widget</a></li>
+ <li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>10.5.9 </span>The <code>input</code> element as domain-specific widgets</a></li>
+ <li><a href=#the-input-element-as-a-range-control><span class=secno>10.5.10 </span>The <code>input</code> element as a range control</a></li>
+ <li><a href=#the-input-element-as-a-color-well><span class=secno>10.5.11 </span>The <code>input</code> element as a color well</a></li>
+ <li><a href=#the-input-element-as-a-check-box-widget><span class=secno>10.5.12 </span>The <code>input</code> element as a check box widget</a></li>
+ <li><a href=#the-input-element-as-a-radio-button-widget><span class=secno>10.5.13 </span>The <code>input</code> element as a radio button widget</a></li>
+ <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>10.5.14 </span>The <code>input</code> element as a file upload control</a></li>
+ <li><a href=#the-input-element-as-a-button><span class=secno>10.5.15 </span>The <code>input</code> element as a button</a></li>
+ <li><a href=#the-marquee-element><span class=secno>10.5.16 </span>The <code>marquee</code> element</a></li>
+ <li><a href=#the-meter-element-0><span class=secno>10.5.17 </span>The <code>meter</code> element</a></li>
+ <li><a href=#the-progress-element-0><span class=secno>10.5.18 </span>The <code>progress</code> element</a></li>
+ <li><a href=#the-select-element-0><span class=secno>10.5.19 </span>The <code>select</code> element</a></li>
+ <li><a href=#the-textarea-element-0><span class=secno>10.5.20 </span>The <code>textarea</code> element</a></ol></li>
+ <li><a href=#frames-and-framesets><span class=secno>10.6 </span>Frames and framesets</a></li>
+ <li><a href=#interactive-media><span class=secno>10.7 </span>Interactive media</a>
+ <ol>
+ <li><a href=#hit-testing><span class=secno>10.7.1 </span>Hit testing</a></li>
+ <li><a href=#links-0><span class=secno>10.7.2 </span>Links</a></li>
+ <li><a href=#the-mark-element-0><span class=secno>10.7.3 </span>The <code>mark</code> element</a></li>
+ <li><a href=#the-contenteditable-attribute><span class=secno>10.7.4 </span>The <code title=attr-contenteditable>contenteditable</code> attribute</a></li>
+ <li><a href=#the-title-attribute-0><span class=secno>10.7.5 </span>The <code title=attr-title>title</code> attribute</a></ol></li>
+ <li><a href=#print-media><span class=secno>10.8 </span>Print media</a></li>
+ <li><a href=#interaction-with-css><span class=secno>10.9 </span>Interaction with CSS</a></ol></li>
<li><a href=#obsolete-features><span class=secno>11 </span>Obsolete features</a>
<ol>
- <li><a href=#self-contained-features-0><span class=secno>11.1 </span>Self-contained features</a>
+ <li><a href=#self-contained-features><span class=secno>11.1 </span>Self-contained features</a>
<ol>
<li><a href=#the-applet-element><span class=secno>11.1.1 </span>The <code>applet</code> element</a></li>
<li><a href=#the-marquee-element-0><span class=secno>11.1.2 </span>The <code>marquee</code> element</a></ol></li>
@@ -56070,9 +56075,11 @@
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
-blockquote, dir, dl, listing, menu, ol, p, plaintext, pre, ul, xmp {
+article, aside, blockquote, dir, dl, figure, listing, menu, nav, ol,
+p, plaintext, pre, section, ul, xmp {
margin-top: 1em; margin-bottom: 1em;
}
+
dir dir, dir dl, dir menu, dir ol, dir ul,
dl dir, dl dl, dl menu, dl ol, dl ul,
menu dir, menu dl, menu menu, menu ol, menu ul,
@@ -56828,7 +56835,7 @@
- <h3 id=self-contained-features><span class=secno>10.4 </span>Self-contained features</h3>
+ <h3 id=replaced-elements><span class=secno>10.4 </span>Replaced elements</h3>
<h4 id=embedded-content-1><span class=secno>10.4.1 </span>Embedded content</h4>
@@ -56836,7 +56843,26 @@
<code><a href=#the-iframe-element>iframe</a></code>, and <code><a href=#video>video</a></code> elements are expected to
be treated as replaced elements.</p>
- <hr><p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element
+ <p>An <code><a href=#the-object-element>object</a></code> element that <a href=#represents>represents</a> an
+ image, plugin, or <a href=#nested-browsing-context>nested browsing context</a> is expected
+ to be treated as a replaced element. Other <code><a href=#the-object-element>object</a></code>
+ elements are expected to be treated as ordinary elements in the
+ rendering model.</p>
+
+ <p>The <code><a href=#audio>audio</a></code> element, when it has a <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute, is expected
+ to be treated as a replaced element about one line high, as wide as
+ is necessary to expose the user agent's user interface features.</p>
+
+ <hr><p>The following CSS rules are expected to apply:</p>
+
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+
+iframe { border: 2px inset; }</pre>
+
+
+ <h4 id=images-0><span class=secno>10.4.2 </span>Images</h4>
+
+ <p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element
when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state
<a href=#represents>represents</a> an image, it is expected to be treated as a
@@ -56892,23 +56918,19 @@
context menu that would have come up if the user interacted with the
actual image.</p>
- <hr><p>An <code><a href=#the-object-element>object</a></code> element that <a href=#represents>represents</a> an
- image, plugin, or <a href=#nested-browsing-context>nested browsing context</a> is expected
- to be treated as a replaced element. Other <code><a href=#the-object-element>object</a></code>
- elements are expected to be treated as ordinary elements in the
- rendering model.</p>
+ <hr><p>The following CSS rules are expected to apply when the
+ <code>Document</code> is in <a href=#quirks-mode>quirks mode</a>:</p>
- <hr><p>The <code><a href=#audio>audio</a></code> element, when it has a <code title=attr-media-controls><a href=#attr-media-controls>controls</a></code> attribute, is expected
- to be treated as a replaced element about one line high, as wide as
- is necessary to expose the user agent's user interface features.</p>
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
- <hr><p>The following CSS rules are expected to apply:</p>
+img[align=left] { margin-right: 3px; }
+img[align=right] { margin-left: 3px; }</pre>
- <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
-iframe { border: 2px inset; }</pre>
- <hr><p>The following CSS rules are expected to apply as
+ <h4 id=attributes-for-embedded-content-and-images><span class=secno>10.4.3 </span>Attributes for embedded content and images</h4>
+
+ <p>The following CSS rules are expected to apply as
<a href=#presentational-hints>presentational hints</a>:</p>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -56998,18 +57020,225 @@
properties</a> 'width' and 'height' on the element
respectively.</p>
- <hr><p>The following CSS rules are expected to apply when the
- <code>Document</code> is in <a href=#quirks-mode>quirks mode</a>:</p>
+
+ <h4 id=tool-bars-0><span class=secno>10.4.4 </span>Tool bars</h4>
+
+ <p>When a <code><a href=#menus>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#tool-bar-state title="tool bar state">tool bar</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
+ tool bar on the user agent's platform. It is expected to contain the
+ menu that is <a href=#building-menus-and-tool-bars title="building menus and tool bars">built</a>
+ from the element.</p>
+
+ <p class="example XXX">...example with screenshot...</p>
+
+
+
+ <h3 id=bindings><span class=secno>10.5 </span>Bindings</h3>
+
+ <h4 id=introduction-10><span class=secno>10.5.1 </span>Introduction</h4>
+
+ <p>A number of elements have their rendering defined in terms of the
+ 'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
+
+ <p>The CSS snippets below set the 'binding' property to a
+ user-agent-defined value, represented below by keywords like <code title=""><i><a href=#the-bb-element>bb</a></i></code>. The rules then described for these
+ bindings are only expected to apply if the element's 'binding'
+ property has not been overriden (e.g. by the author) to have another
+ value.</p>
+
+ <p>Exactly how the bindings are implemented is not specified by this
+ specification. User agents are encouraged to make their bindings set
+ the 'appearance' CSS property appropriately to achieve
+ platform-native appearances for widgets, and are expected to
+ implement any relevant animations, etc, that are appropriate for the
+ platform. <a href=#refsCSSUI>[CSSUI]</a></p>
+
+
+ <h4 id=the-bb-element-0><span class=secno>10.5.2 </span>The <code><a href=#the-bb-element>bb</a></code> element</h4>
+
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+bb:empty { binding: <i><a href=#the-bb-element>bb</a></i>; }</pre>
-img[align=left] { margin-right: 3px; }
-img[align=right] { margin-left: 3px; }</pre>
+ <p>When the <i><a href=#the-bb-element>bb</a></i> binding applies to a <code><a href=#the-bb-element>bb</a></code> element,
+ the element is expected to render as an 'inline-block' box rendered
+ as a button, about one line high, containing text derived from the
+ element's <code title=attr-bb-type><a href=#attr-bb-type>type</a></code> attribute in a
+ user-agent-defined (and probably locale-specific) fashion.</p>
- <h4 id=frames><span class=secno>10.4.2 </span>Frames</h4>
+ <h4 id=the-button-element-0><span class=secno>10.5.3 </span>The <code><a href=#the-button-element>button</a></code> element</h4>
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+button { binding: <i><a href=#the-button-element>button</a></i>; }</pre>
+
+ <p>When the <i><a href=#the-button-element>button</a></i> binding applies to a <code><a href=#the-button-element>button</a></code>
+ element, the element is expected to render as an 'inline-block' box
+ rendered as a button whose contents are the contents of the
+ element.</p>
+
+
+
+ <h4 id=the-datagrid-element><span class=secno>10.5.4 </span>The <code><a href=#datagrid>datagrid</a></code> element</h4>
+
+ <p class=XXX>This section will probably include details on how to
+ render DATAGRID (including <span id=datagridPseudos>its
+ pseudo-elements</span>), drag-and-drop, etc, in a visual medium, in
+ concert with CSS. Implementation experience is desired before this
+ section is filled in.</p>
+
+
+ <h4 id=the-details-element-0><span class=secno>10.5.5 </span>The <code><a href=#the-details-element>details</a></code> element</h4>
+
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+details { binding: <i><a href=#the-details-element>details</a></i>; }</pre>
+
+ <p>When the <i><a href=#the-details-element>details</a></i> binding applies to a <code><a href=#the-details-element>details</a></code>
+ element, the element is expected to render as a 'block' box with its
+ 'padding-left' property set to '40px'. The element's shadow tree is
+ expected to take a child element that matches the selector <code title="">:bound-element > legend:first-child</code> and
+ place it in a first 'block' box container, and then take the
+ remaining child nodes and place them in a later 'block' box
+ container.</p>
+
+ <p>The first container is expected to contain at least one line box,
+ and that line box is expected to contain a triangle widget,
+ horizontally positioned within the left padding of the
+ <code><a href=#the-details-element>details</a></code> element. That widget is expected to allow the
+ user to request that the details be shown or hidden.</p>
+
+ <p>The later container is expected to have its 'overflow' property
+ set to 'hidden'. When the <code><a href=#the-details-element>details</a></code> element has an <code title=attr-details-open><a href=#attr-details-open>open</a></code> attribute, the later container
+ is expected to have its 'height' set to 'auto'; when it does not,
+ the later container is expected to have its 'height' set to 0.
+
+<!--
+XXX examples with screenshots
+http://mail.gnome.org/archives/usability/2006-June/msg00015.html
+want to show at least one that uses a triangle:
+
+ > No issues found
+ Viruses: 0
+ Trojans: 0
+
+...and one that uses a button widget instead of a triangle.
+-->
+
+
+
+ <h4 id=the-fieldset-element-0><span class=secno>10.5.6 </span>The <code><a href=#the-fieldset-element>fieldset</a></code> element</h4>
+
+ <p class=XXX>...</p>
+ <!-- XXX <legend align="left|right|center|bottom|top"> -->
+
+
+
+ <h4 id=the-hr-element-0><span class=secno>10.5.7 </span>The <code><a href=#the-hr-element>hr</a></code> element</h4>
+
+ <p class=XXX>...</p>
+ <!-- align=left|right|center (as auto margins), width=(int=>width:px; %->width:%)
+ color (color implies noshade); sets 'color' which then propagates to border-color; defaults to 'gray'
+ size=int, noshade
+ with noshade: border-width = size/2 (default size=2 => 1px per side); solid borders; rounded corners
+ without no shade: inset borders
+ without noshade, size>1: height = size-2; border-width=1px
+ without noshade, size=1: height = 0; border-top-width=1px only
+ -->
+
+
+
+ <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>10.5.8 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
+
+ <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>, <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>, <a href=#url-state title=attr-input-type-url>URL</a>, <a href=#e-mail-state title=attr-input-type-email>E-mail</a>, or <a href=#password-state title=attr-input-type-password>Password</a> state, ...</p>
+ <!-- datalist presentation -->
+
+ <!-- size: http://mxr.mozilla.org/mozilla-central/ident?i=CalcIntrinsicSize -->
+
+
+ <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>10.5.9 </span>The <code><a href=#the-input-element>input</a></code> element as domain-specific widgets</h4>
+
+ <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a>, <a href=#date-state title=attr-input-type-date>Date</a>, <a href=#month-state title=attr-input-type-month>Month</a>, <a href=#week-state title=attr-input-type-week>Week</a>, <a href=#time-state title=attr-input-type-time>Time</a>, <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a> or
+ <a href=#number-state title=attr-input-type-number>Number</a> state...</p>
+ <!-- datalist presentation -->
+
+
+
+ <h4 id=the-input-element-as-a-range-control><span class=secno>10.5.10 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>
+
+ <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#range-state title=attr-input-type-range>Range</a> state, ...</p>
+ <!-- datalist presentation -->
+
+
+
+ <h4 id=the-input-element-as-a-color-well><span class=secno>10.5.11 </span>The <code><a href=#the-input-element>input</a></code> element as a color well</h4>
+
+ <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#color-state title=attr-input-type-color>Color</a> state, ...</p>
+ <!-- datalist presentation -->
+
+
+
+ <h4 id=the-input-element-as-a-check-box-widget><span class=secno>10.5.12 </span>The <code><a href=#the-input-element>input</a></code> element as a check box widget</h4>
+
+ <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state, ...</p>
+
+
+
+ <h4 id=the-input-element-as-a-radio-button-widget><span class=secno>10.5.13 </span>The <code><a href=#the-input-element>input</a></code> element as a radio button widget</h4>
+
+ <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state, ...</p>
+
+
+
+ <h4 id=the-input-element-as-a-file-upload-control><span class=secno>10.5.14 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>
+
+ <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state, ...</p>
+
+
+
+ <h4 id=the-input-element-as-a-button><span class=secno>10.5.15 </span>The <code><a href=#the-input-element>input</a></code> element as a button</h4>
+
+ <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a> <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, or <a href=#button-state title=attr-input-type-button>Button</a> state, ...</p>
+
+
+
+ <h4 id=the-marquee-element><span class=secno>10.5.16 </span>The <code><a href=#the-marquee-element-0>marquee</a></code> element</h4>
+
+ <p class=XXX>...</p>
+ <!-- XXX attributes: height/width; direction is case insensitive; bgcolor; hspace/vspace -->
+
+
+
+ <h4 id=the-meter-element-0><span class=secno>10.5.17 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
+
+ <p class=XXX>...</p>
+
+
+
+ <h4 id=the-progress-element-0><span class=secno>10.5.18 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>
+
+ <p class=XXX>...</p>
+
+
+
+ <h4 id=the-select-element-0><span class=secno>10.5.19 </span>The <code><a href=#the-select-element>select</a></code> element</h4>
+
+ <p class=XXX>...</p>
+ <!-- multiple, size; optgroup -->
+
+
+
+ <h4 id=the-textarea-element-0><span class=secno>10.5.20 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>
+
+ <p class=XXX>...</p>
+
+
+
+ <h3 id=frames-and-framesets><span class=secno>10.6 </span>Frames and framesets</h3>
+
<p>When an <code><a href=#the-html-element>html</a></code> element's second child element is a
<code>frameset</code> element, the user agent is expected to render
the <code>frameset</code> element as described below across the
@@ -57288,197 +57517,10 @@
- <h4 id=tool-bars-0><span class=secno>10.4.3 </span>Tool bars</h4>
+ <h3 id=interactive-media><span class=secno>10.7 </span>Interactive media</h3>
- <p>When a <code><a href=#menus>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#tool-bar-state title="tool bar state">tool bar</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>
+ <h4 id=hit-testing><span class=secno>10.7.1 </span>Hit testing</h4>
- <p>The element is expected to have, by default, the appearance of a
- tool bar on the user agent's platform. It is expected to contain the
- menu that is <a href=#building-menus-and-tool-bars title="building menus and tool bars">built</a>
- from the element.</p>
-
- <p class="example XXX">...example with screenshot...</p>
-
-
-
- <h4 id=the-bb-element-0><span class=secno>10.4.4 </span>The <code><a href=#the-bb-element>bb</a></code> element</h4>
-
- <p>When the <code><a href=#the-bb-element>bb</a></code> element <a href=#represents>represents</a> a
- browser button, it is expected to render as a replaced element
- consisting of a regular one-line-high button, with a width based on
- the text in the button, which is itself based on its <code title=attr-bb-type><a href=#attr-bb-type>type</a></code> attribute in a user-agent-defined
- (and probably locale-specific) fashion. When it does not, it is
- expected to render as per the regular CSS rules.</p>
-
-
-
- <h4 id=the-button-element-0><span class=secno>10.4.5 </span>The <code><a href=#the-button-element>button</a></code> element</h4>
-
- <p>The <code><a href=#the-button-element>button</a></code> element is expected to render as a
- replaced element whose contents are styled as per the regular CSS
- rules. Its intrinisic dimensions are the shrink-wrap dimensions of
- its contents.</p>
-
-
-
- <h4 id=the-datagrid-element><span class=secno>10.4.6 </span>The <code><a href=#datagrid>datagrid</a></code> element</h4>
-
- <p class=XXX>This section will probably include details on how to
- render DATAGRID (including <span id=datagridPseudos>its
- pseudo-elements</span>), drag-and-drop, etc, in a visual medium, in
- concert with CSS. Implementation experience is desired before this
- section is filled in.</p>
-
-
-
- <h4 id=the-details-element-0><span class=secno>10.4.7 </span>The <code><a href=#the-details-element>details</a></code> element</h4>
-
- <p class=XXX>The <code><a href=#the-details-element>details</a></code> element, ...</p>
-
- <p class=XXX>Basically CSS :open and :closed match the
- element, it's a block-level element by default, and when it matches
- :closed it renders as if it had an XBL binding attached to it whose
- template was just <code><template>▶<content
- includes="legend:first-child">Details</content></template></code>,
- and when it's :open it acts as if it had an XBL binding attached to
- it whose template was just <code><template>▼<content
- includes="legend:first-child">Details</content><content/></template></code>
- or some such.</p>
-
-<!--
-Example ideas:
-http://mail.gnome.org/archives/usability/2006-June/msg00015.html
--->
-
-
-
- <h4 id=the-fieldset-element-0><span class=secno>10.4.8 </span>The <code><a href=#the-fieldset-element>fieldset</a></code> element</h4>
-
- <p class=XXX>...</p>
- <!-- XXX <legend align="left|right|center|bottom|top"> -->
-
-
-
- <h4 id=the-hr-element-0><span class=secno>10.4.9 </span>The <code><a href=#the-hr-element>hr</a></code> element</h4>
-
- <p class=XXX>...</p>
- <!-- align=left|right|center (as auto margins), width=(int=>width:px; %->width:%)
- color (color implies noshade); sets 'color' which then propagates to border-color; defaults to 'gray'
- size=int, noshade
- with noshade: border-width = size/2 (default size=2 => 1px per side); solid borders; rounded corners
- without no shade: inset borders
- without noshade, size>1: height = size-2; border-width=1px
- without noshade, size=1: height = 0; border-top-width=1px only
- -->
-
-
-
- <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>10.4.10 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
-
- <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>, <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>, <a href=#url-state title=attr-input-type-url>URL</a>, <a href=#e-mail-state title=attr-input-type-email>E-mail</a>, or <a href=#password-state title=attr-input-type-password>Password</a> state, ...</p>
- <!-- datalist presentation -->
-
- <!-- size: http://mxr.mozilla.org/mozilla-central/ident?i=CalcIntrinsicSize -->
-
-
- <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>10.4.11 </span>The <code><a href=#the-input-element>input</a></code> element as domain-specific widgets</h4>
-
- <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a>, <a href=#date-state title=attr-input-type-date>Date</a>, <a href=#month-state title=attr-input-type-month>Month</a>, <a href=#week-state title=attr-input-type-week>Week</a>, <a href=#time-state title=attr-input-type-time>Time</a>, <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a> or
- <a href=#number-state title=attr-input-type-number>Number</a> state...</p>
- <!-- datalist presentation -->
-
-
-
- <h4 id=the-input-element-as-a-range-control><span class=secno>10.4.12 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>
-
- <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#range-state title=attr-input-type-range>Range</a> state, ...</p>
- <!-- datalist presentation -->
-
-
-
- <h4 id=the-input-element-as-a-color-well><span class=secno>10.4.13 </span>The <code><a href=#the-input-element>input</a></code> element as a color well</h4>
-
- <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#color-state title=attr-input-type-color>Color</a> state, ...</p>
- <!-- datalist presentation -->
-
-
-
- <h4 id=the-input-element-as-a-check-box-widget><span class=secno>10.4.14 </span>The <code><a href=#the-input-element>input</a></code> element as a check box widget</h4>
-
- <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state, ...</p>
-
-
-
- <h4 id=the-input-element-as-a-radio-button-widget><span class=secno>10.4.15 </span>The <code><a href=#the-input-element>input</a></code> element as a radio button widget</h4>
-
- <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state, ...</p>
-
-
-
- <h4 id=the-input-element-as-a-file-upload-control><span class=secno>10.4.16 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>
-
- <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state, ...</p>
-
-
-
- <h4 id=the-input-element-as-a-button><span class=secno>10.4.17 </span>The <code><a href=#the-input-element>input</a></code> element as a button</h4>
-
- <p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a> <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, or <a href=#button-state title=attr-input-type-button>Button</a> state, ...</p>
-
-
-
- <h4 id=the-marquee-element><span class=secno>10.4.18 </span>The <code><a href=#the-marquee-element-0>marquee</a></code> element</h4>
-
- <p class=XXX>...</p>
- <!-- XXX attributes: height/width; direction is case insensitive; bgcolor; hspace/vspace -->
-
-
-
- <h4 id=the-meter-element-0><span class=secno>10.4.19 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
-
- <p class=XXX>...</p>
-
-
-
- <h4 id=the-progress-element-0><span class=secno>10.4.20 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>
-
- <p class=XXX>...</p>
-
-
-
- <h4 id=the-select-element-0><span class=secno>10.4.21 </span>The <code><a href=#the-select-element>select</a></code> element</h4>
-
- <p class=XXX>...</p>
- <!-- multiple, size; optgroup -->
-
-
-
- <h4 id=the-textarea-element-0><span class=secno>10.4.22 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>
-
- <p class=XXX>...</p>
-
-
-
- <h4 id=the-title-attribute-0><span class=secno>10.4.23 </span>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute</h4>
-
- <p>Given an element (e.g. the element designated by the mouse
- cursor), if the element, or one of its ancestors, has a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute, and the nearest such
- attribute has a value that is not the empty string, it is expected
- that the user agent will expose the contents of that attribute as a
- tooltip.</p>
-
- <p>U+000A LINE FEED (LF) characters are expected to cause line
- breaks in the tooltip.</p>
-
-
-
-
- <h3 id=interactive-media><span class=secno>10.5 </span>Interactive media</h3>
-
- <h4 id=hit-testing><span class=secno>10.5.1 </span>Hit testing</h4>
-
<p class=XXX>this should really be in a CSS spec -- hot to decide
which element is under the cursor -->
@@ -57548,7 +57590,7 @@
- <h4 id=links-0><span class=secno>10.5.2 </span>Links</h4>
+ <h4 id=links-0><span class=secno>10.7.2 </span>Links</h4>
<p class=XXX>...</p>
<!-- hyperlinks: hover show url; clicks; opening in new browsing contexts -->
@@ -57556,7 +57598,7 @@
- <h4 id=the-mark-element-0><span class=secno>10.5.3 </span>The <code><a href=#the-mark-element>mark</a></code> element</h4>
+ <h4 id=the-mark-element-0><span class=secno>10.7.3 </span>The <code><a href=#the-mark-element>mark</a></code> element</h4>
<p class=XXX>...</p>
<!-- being able to cycle through them -->
@@ -57570,21 +57612,35 @@
- <h4 id=the-contenteditable-attribute><span class=secno>10.5.4 </span>The <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute</h4>
+ <h4 id=the-contenteditable-attribute><span class=secno>10.7.4 </span>The <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute</h4>
<p class=XXX>...</p>
- <h3 id=print-media><span class=secno>10.6 </span>Print media</h3>
+ <h4 id=the-title-attribute-0><span class=secno>10.7.5 </span>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute</h4>
+ <p>Given an element (e.g. the element designated by the mouse
+ cursor), if the element, or one of its ancestors, has a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute, and the nearest such
+ attribute has a value that is not the empty string, it is expected
+ that the user agent will expose the contents of that attribute as a
+ tooltip.</p>
+
+ <p>U+000A LINE FEED (LF) characters are expected to cause line
+ breaks in the tooltip.</p>
+
+
+
+
+ <h3 id=print-media><span class=secno>10.8 </span>Print media</h3>
+
<p class=XXX> must define letting the user "<dfn id=obtain-a-physical-form>obtain a
physical form</dfn> (or a representation of a physical form)" of a
document (printing) and what this means for the UA, in particular
creating a new view for the print media.</p>
- <h3 id=interaction-with-css><span class=secno>10.7 </span>Interaction with CSS</h3>
+ <h3 id=interaction-with-css><span class=secno>10.9 </span>Interaction with CSS</h3>
<!-- XXX this should be normative, so we'll have to move it out of
this section -->
@@ -57623,7 +57679,7 @@
S SPACER STRIKE TT U -->
- <h3 id=self-contained-features-0><span class=secno>11.1 </span>Self-contained features</h3>
+ <h3 id=self-contained-features><span class=secno>11.1 </span>Self-contained features</h3>
<h4 id=the-applet-element><span class=secno>11.1.1 </span>The <dfn><code>applet</code></dfn> element</h4>
Modified: source
===================================================================
--- source 2009-02-05 09:55:07 UTC (rev 2761)
+++ source 2009-02-05 23:33:29 UTC (rev 2762)
@@ -61349,9 +61349,11 @@
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
-blockquote, dir, dl, listing, menu, ol, p, plaintext, pre, ul, xmp {
+article, aside, blockquote, dir, dl, figure, listing, menu, nav, ol,
+p, plaintext, pre, section, ul, xmp {
margin-top: 1em; margin-bottom: 1em;
}
+
dir dir, dir dl, dir menu, dir ol, dir ul,
dl dir, dl dl, dl menu, dl ol, dl ul,
menu dir, menu dl, menu menu, menu ol, menu ul,
@@ -62215,7 +62217,7 @@
- <h3>Self-contained features</h3>
+ <h3>Replaced elements</h3>
<h4>Embedded content</h4>
@@ -62223,8 +62225,28 @@
<code>iframe</code>, and <code>video</code> elements are expected to
be treated as replaced elements.</p>
+ <p>An <code>object</code> element that <span>represents</span> an
+ image, plugin, or <span>nested browsing context</span> is expected
+ to be treated as a replaced element. Other <code>object</code>
+ elements are expected to be treated as ordinary elements in the
+ rendering model.</p>
+
+ <p>The <code>audio</code> element, when it has a <code
+ title="attr-media-controls">controls</code> attribute, is expected
+ to be treated as a replaced element about one line high, as wide as
+ is necessary to expose the user agent's user interface features.</p>
+
<hr>
+ <p>The following CSS rules are expected to apply:</p>
+
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
+iframe { border: 2px inset; }</pre>
+
+
+ <h4>Images</h4>
+
<p>When an <code>img</code> element or an <code>input</code> element
when its <code title="attr-input-type">type</code> attribute is in
the <span title="attr-input-type-image">Image Button</span> state
@@ -62286,29 +62308,18 @@
<hr>
- <p>An <code>object</code> element that <span>represents</span> an
- image, plugin, or <span>nested browsing context</span> is expected
- to be treated as a replaced element. Other <code>object</code>
- elements are expected to be treated as ordinary elements in the
- rendering model.</p>
+ <p>The following CSS rules are expected to apply when the
+ <code>Document</code> is in <span>quirks mode</span>:</p>
- <hr>
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
- <p>The <code>audio</code> element, when it has a <code
- title="attr-media-controls">controls</code> attribute, is expected
- to be treated as a replaced element about one line high, as wide as
- is necessary to expose the user agent's user interface features.</p>
+img[align=left] { margin-right: 3px; }
+img[align=right] { margin-left: 3px; }</pre>
- <hr>
- <p>The following CSS rules are expected to apply:</p>
- <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+ <h4>Attributes for embedded content and images</h4>
-iframe { border: 2px inset; }</pre>
-
- <hr>
-
<p>The following CSS rules are expected to apply as
<span>presentational hints</span>:</p>
@@ -62416,20 +62427,257 @@
properties</span> 'width' and 'height' on the element
respectively.</p>
- <hr>
- <p>The following CSS rules are expected to apply when the
- <code>Document</code> is in <span>quirks mode</span>:</p>
+ <h4>Tool bars</h4>
+
+ <p>When a <code>menu</code> element's <code
+ title="attr-menu-type">type</code> attribute is in the <span
+ title="tool bar state">tool bar</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
+ tool bar on the user agent's platform. It is expected to contain the
+ menu that is <span title="building menus and tool bars">built</span>
+ from the element.</p>
+
+ <p class="example XXX">...example with screenshot...</p>
+
+
+
+ <h3>Bindings</h3>
+
+ <h4>Introduction</h4>
+
+ <p>A number of elements have their rendering defined in terms of the
+ 'binding' property. <a href="#refsBECSS">[BECSS]</a></p>
+
+ <p>The CSS snippets below set the 'binding' property to a
+ user-agent-defined value, represented below by keywords like <code
+ title=""><i>bb</i></code>. The rules then described for these
+ bindings are only expected to apply if the element's 'binding'
+ property has not been overriden (e.g. by the author) to have another
+ value.</p>
+
+ <p>Exactly how the bindings are implemented is not specified by this
+ specification. User agents are encouraged to make their bindings set
+ the 'appearance' CSS property appropriately to achieve
+ platform-native appearances for widgets, and are expected to
+ implement any relevant animations, etc, that are appropriate for the
+ platform. <a href="#refsCSSUI">[CSSUI]</a></p>
+
+
+ <h4>The <code>bb</code> element</h4>
+
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+bb:empty { binding: <i>bb</i>; }</pre>
-img[align=left] { margin-right: 3px; }
-img[align=right] { margin-left: 3px; }</pre>
+ <p>When the <i>bb</i> binding applies to a <code>bb</code> element,
+ the element is expected to render as an 'inline-block' box rendered
+ as a button, about one line high, containing text derived from the
+ element's <code title="attr-bb-type">type</code> attribute in a
+ user-agent-defined (and probably locale-specific) fashion.</p>
- <h4>Frames</h4>
+ <h4>The <code>button</code> element</h4>
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+button { binding: <i>button</i>; }</pre>
+
+ <p>When the <i>button</i> binding applies to a <code>button</code>
+ element, the element is expected to render as an 'inline-block' box
+ rendered as a button whose contents are the contents of the
+ element.</p>
+
+
+
+ <h4>The <code>datagrid</code> element</h4>
+
+ <p class="XXX">This section will probably include details on how to
+ render DATAGRID (including <span id="datagridPseudos">its
+ pseudo-elements</span>), drag-and-drop, etc, in a visual medium, in
+ concert with CSS. Implementation experience is desired before this
+ section is filled in.</p>
+
+
+ <h4>The <code>details</code> element</h4>
+
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+details { binding: <i>details</i>; }</pre>
+
+ <p>When the <i>details</i> binding applies to a <code>details</code>
+ element, the element is expected to render as a 'block' box with its
+ 'padding-left' property set to '40px'. The element's shadow tree is
+ expected to take a child element that matches the selector <code
+ title="">:bound-element > legend:first-child</code> and
+ place it in a first 'block' box container, and then take the
+ remaining child nodes and place them in a later 'block' box
+ container.</p>
+
+ <p>The first container is expected to contain at least one line box,
+ and that line box is expected to contain a triangle widget,
+ horizontally positioned within the left padding of the
+ <code>details</code> element. That widget is expected to allow the
+ user to request that the details be shown or hidden.</p>
+
+ <p>The later container is expected to have its 'overflow' property
+ set to 'hidden'. When the <code>details</code> element has an <code
+ title="attr-details-open">open</code> attribute, the later container
+ is expected to have its 'height' set to 'auto'; when it does not,
+ the later container is expected to have its 'height' set to 0.
+
+<!--
+XXX examples with screenshots
+http://mail.gnome.org/archives/usability/2006-June/msg00015.html
+want to show at least one that uses a triangle:
+
+ > No issues found
+ Viruses: 0
+ Trojans: 0
+
+...and one that uses a button widget instead of a triangle.
+-->
+
+
+
+ <h4>The <code>fieldset</code> element</h4>
+
+ <p class="XXX">...</p>
+ <!-- XXX <legend align="left|right|center|bottom|top"> -->
+
+
+
+ <h4>The <code>hr</code> element</h4>
+
+ <p class="XXX">...</p>
+ <!-- align=left|right|center (as auto margins), width=(int=>width:px; %->width:%)
+ color (color implies noshade); sets 'color' which then propagates to border-color; defaults to 'gray'
+ size=int, noshade
+ with noshade: border-width = size/2 (default size=2 => 1px per side); solid borders; rounded corners
+ without no shade: inset borders
+ without noshade, size>1: height = size-2; border-width=1px
+ without noshade, size=1: height = 0; border-top-width=1px only
+ -->
+
+
+
+ <h4>The <code>input</code> element as a text entry widget</h4>
+
+ <p class="XXX">When an <code>input</code> element's <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-text">Text</span>, <span
+ title="attr-input-type-search">Search</span>, <span
+ title="attr-input-type-url">URL</span>, <span
+ title="attr-input-type-email">E-mail</span>, or <span
+ title="attr-input-type-password">Password</span> state, ...</p>
+ <!-- datalist presentation -->
+
+ <!-- size: http://mxr.mozilla.org/mozilla-central/ident?i=CalcIntrinsicSize -->
+
+
+ <h4>The <code>input</code> element as domain-specific widgets</h4>
+
+ <p class="XXX">When an <code>input</code> element's <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-datetime">Date and Time</span>, <span
+ title="attr-input-type-date">Date</span>, <span
+ title="attr-input-type-month">Month</span>, <span
+ title="attr-input-type-week">Week</span>, <span
+ title="attr-input-type-time">Time</span>, <span
+ title="attr-input-type-datetime-local">Local Date and Time</span> or
+ <span title="attr-input-type-number">Number</span> state...</p>
+ <!-- datalist presentation -->
+
+
+
+ <h4>The <code>input</code> element as a range control</h4>
+
+ <p class="XXX">When an <code>input</code> element's <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-range">Range</span> state, ...</p>
+ <!-- datalist presentation -->
+
+
+
+ <h4>The <code>input</code> element as a color well</h4>
+
+ <p class="XXX">When an <code>input</code> element's <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-color">Color</span> state, ...</p>
+ <!-- datalist presentation -->
+
+
+
+ <h4>The <code>input</code> element as a check box widget</h4>
+
+ <p class="XXX">When an <code>input</code> element's <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-checkbox">Checkbox</span> state, ...</p>
+
+
+
+ <h4>The <code>input</code> element as a radio button widget</h4>
+
+ <p class="XXX">When an <code>input</code> element's <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-radio">Radio Button</span> state, ...</p>
+
+
+
+ <h4>The <code>input</code> element as a file upload control</h4>
+
+ <p class="XXX">When an <code>input</code> element's <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-file">File Upload</span> state, ...</p>
+
+
+
+ <h4>The <code>input</code> element as a button</h4>
+
+ <p class="XXX">When an <code>input</code> element's <code
+ title="attr-input-type">type</code> attribute is in the <span
+ title="attr-input-type-submit">Submit Button</span> <span
+ title="attr-input-type-reset">Reset Button</span>, or <span
+ title="attr-input-type-button">Button</span> state, ...</p>
+
+
+
+ <h4>The <code>marquee</code> element</h4>
+
+ <p class="XXX">...</p>
+ <!-- XXX attributes: height/width; direction is case insensitive; bgcolor; hspace/vspace -->
+
+
+
+ <h4>The <code>meter</code> element</h4>
+
+ <p class="XXX">...</p>
+
+
+
+ <h4>The <code>progress</code> element</h4>
+
+ <p class="XXX">...</p>
+
+
+
+ <h4>The <code>select</code> element</h4>
+
+ <p class="XXX">...</p>
+ <!-- multiple, size; optgroup -->
+
+
+
+ <h4>The <code>textarea</code> element</h4>
+
+ <p class="XXX">...</p>
+
+
+
+ <h3>Frames and framesets</h3>
+
<p>When an <code>html</code> element's second child element is a
<code>frameset</code> element, the user agent is expected to render
the <code>frameset</code> element as described below across the
@@ -62759,224 +63007,6 @@
- <h4>Tool bars</h4>
-
- <p>When a <code>menu</code> element's <code
- title="attr-menu-type">type</code> attribute is in the <span
- title="tool bar state">tool bar</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
- tool bar on the user agent's platform. It is expected to contain the
- menu that is <span title="building menus and tool bars">built</span>
- from the element.</p>
-
- <p class="example XXX">...example with screenshot...</p>
-
-
-
- <h4>The <code>bb</code> element</h4>
-
- <p>When the <code>bb</code> element <span>represents</span> a
- browser button, it is expected to render as a replaced element
- consisting of a regular one-line-high button, with a width based on
- the text in the button, which is itself based on its <code
- title="attr-bb-type">type</code> attribute in a user-agent-defined
- (and probably locale-specific) fashion. When it does not, it is
- expected to render as per the regular CSS rules.</p>
-
-
-
- <h4>The <code>button</code> element</h4>
-
- <p>The <code>button</code> element is expected to render as a
- replaced element whose contents are styled as per the regular CSS
- rules. Its intrinisic dimensions are the shrink-wrap dimensions of
- its contents.</p>
-
-
-
- <h4>The <code>datagrid</code> element</h4>
-
- <p class="XXX">This section will probably include details on how to
- render DATAGRID (including <span id="datagridPseudos">its
- pseudo-elements</span>), drag-and-drop, etc, in a visual medium, in
- concert with CSS. Implementation experience is desired before this
- section is filled in.</p>
-
-
-
- <h4>The <code>details</code> element</h4>
-
- <p class="XXX">The <code>details</code> element, ...</p>
-
- <p class="XXX">Basically CSS :open and :closed match the
- element, it's a block-level element by default, and when it matches
- :closed it renders as if it had an XBL binding attached to it whose
- template was just <code><template>▶<content
- includes="legend:first-child">Details</content></template></code>,
- and when it's :open it acts as if it had an XBL binding attached to
- it whose template was just <code><template>▼<content
- includes="legend:first-child">Details</content><content/></template></code>
- or some such.</p>
-
-<!--
-Example ideas:
-http://mail.gnome.org/archives/usability/2006-June/msg00015.html
--->
-
-
-
- <h4>The <code>fieldset</code> element</h4>
-
- <p class="XXX">...</p>
- <!-- XXX <legend align="left|right|center|bottom|top"> -->
-
-
-
- <h4>The <code>hr</code> element</h4>
-
- <p class="XXX">...</p>
- <!-- align=left|right|center (as auto margins), width=(int=>width:px; %->width:%)
- color (color implies noshade); sets 'color' which then propagates to border-color; defaults to 'gray'
- size=int, noshade
- with noshade: border-width = size/2 (default size=2 => 1px per side); solid borders; rounded corners
- without no shade: inset borders
- without noshade, size>1: height = size-2; border-width=1px
- without noshade, size=1: height = 0; border-top-width=1px only
- -->
-
-
-
- <h4>The <code>input</code> element as a text entry widget</h4>
-
- <p class="XXX">When an <code>input</code> element's <code
- title="attr-input-type">type</code> attribute is in the <span
- title="attr-input-type-text">Text</span>, <span
- title="attr-input-type-search">Search</span>, <span
- title="attr-input-type-url">URL</span>, <span
- title="attr-input-type-email">E-mail</span>, or <span
- title="attr-input-type-password">Password</span> state, ...</p>
- <!-- datalist presentation -->
-
- <!-- size: http://mxr.mozilla.org/mozilla-central/ident?i=CalcIntrinsicSize -->
-
-
- <h4>The <code>input</code> element as domain-specific widgets</h4>
-
- <p class="XXX">When an <code>input</code> element's <code
- title="attr-input-type">type</code> attribute is in the <span
- title="attr-input-type-datetime">Date and Time</span>, <span
- title="attr-input-type-date">Date</span>, <span
- title="attr-input-type-month">Month</span>, <span
- title="attr-input-type-week">Week</span>, <span
- title="attr-input-type-time">Time</span>, <span
- title="attr-input-type-datetime-local">Local Date and Time</span> or
- <span title="attr-input-type-number">Number</span> state...</p>
- <!-- datalist presentation -->
-
-
-
- <h4>The <code>input</code> element as a range control</h4>
-
- <p class="XXX">When an <code>input</code> element's <code
- title="attr-input-type">type</code> attribute is in the <span
- title="attr-input-type-range">Range</span> state, ...</p>
- <!-- datalist presentation -->
-
-
-
- <h4>The <code>input</code> element as a color well</h4>
-
- <p class="XXX">When an <code>input</code> element's <code
- title="attr-input-type">type</code> attribute is in the <span
- title="attr-input-type-color">Color</span> state, ...</p>
- <!-- datalist presentation -->
-
-
-
- <h4>The <code>input</code> element as a check box widget</h4>
-
- <p class="XXX">When an <code>input</code> element's <code
- title="attr-input-type">type</code> attribute is in the <span
- title="attr-input-type-checkbox">Checkbox</span> state, ...</p>
-
-
-
- <h4>The <code>input</code> element as a radio button widget</h4>
-
- <p class="XXX">When an <code>input</code> element's <code
- title="attr-input-type">type</code> attribute is in the <span
- title="attr-input-type-radio">Radio Button</span> state, ...</p>
-
-
-
- <h4>The <code>input</code> element as a file upload control</h4>
-
- <p class="XXX">When an <code>input</code> element's <code
- title="attr-input-type">type</code> attribute is in the <span
- title="attr-input-type-file">File Upload</span> state, ...</p>
-
-
-
- <h4>The <code>input</code> element as a button</h4>
-
- <p class="XXX">When an <code>input</code> element's <code
- title="attr-input-type">type</code> attribute is in the <span
- title="attr-input-type-submit">Submit Button</span> <span
- title="attr-input-type-reset">Reset Button</span>, or <span
- title="attr-input-type-button">Button</span> state, ...</p>
-
-
-
- <h4>The <code>marquee</code> element</h4>
-
- <p class="XXX">...</p>
- <!-- XXX attributes: height/width; direction is case insensitive; bgcolor; hspace/vspace -->
-
-
-
- <h4>The <code>meter</code> element</h4>
-
- <p class="XXX">...</p>
-
-
-
- <h4>The <code>progress</code> element</h4>
-
- <p class="XXX">...</p>
-
-
-
- <h4>The <code>select</code> element</h4>
-
- <p class="XXX">...</p>
- <!-- multiple, size; optgroup -->
-
-
-
- <h4>The <code>textarea</code> element</h4>
-
- <p class="XXX">...</p>
-
-
-
- <h4>The <code title="attr-title">title</code> attribute</h4>
-
- <p>Given an element (e.g. the element designated by the mouse
- cursor), if the element, or one of its ancestors, has a <code
- title="attr-title">title</code> attribute, and the nearest such
- attribute has a value that is not the empty string, it is expected
- that the user agent will expose the contents of that attribute as a
- tooltip.</p>
-
- <p>U+000A LINE FEED (LF) characters are expected to cause line
- breaks in the tooltip.</p>
-
-
-
-
<h3>Interactive media</h3>
<h4>Hit testing</h4>
@@ -63078,6 +63108,21 @@
+ <h4>The <code title="attr-title">title</code> attribute</h4>
+
+ <p>Given an element (e.g. the element designated by the mouse
+ cursor), if the element, or one of its ancestors, has a <code
+ title="attr-title">title</code> attribute, and the nearest such
+ attribute has a value that is not the empty string, it is expected
+ that the user agent will expose the contents of that attribute as a
+ tooltip.</p>
+
+ <p>U+000A LINE FEED (LF) characters are expected to cause line
+ breaks in the tooltip.</p>
+
+
+
+
<h3>Print media</h3>
<p class="XXX"> must define letting the user "<dfn>obtain a
More information about the Commit-Watchers
mailing list