W3C home > Mailing lists > Public > public-html-diffs@w3.org > February 2009

spec/Overview.html 1.1930 2760 Filling in the rendering section: Fill i

From: poot <cvsmail@w3.org>
Date: Thu, 5 Feb 2009 18:54:04 +0900 (JST)
To: public-html-diffs@w3.org
Message-Id: <20090205095404.94A532BC74@toro.w3.mag.keio.ac.jp>

Filling in the rendering section: Fill in more sections -- br, tool
bars, ruby... (whatwg r2760)

its pseudo-elements
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#datagridPseudos
convert a list of dimensions to a list of pixel values
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#convert-a-list-of-dimensions-to-a-list-of-pixel-values
4.11.2 The datagrid element
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#datagrid
10.4.8 The fieldset element
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#the-fieldset-element-0
HTMLAnchorElement
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#htmlanchorelement
10.4.3 Tool bars
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#tool-bars-0
10.4.5 The button element
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#the-button-element-0
contextMenu
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#dom-contextmenu
4.11.5.3 Context menus
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#context-menus
10.4.6 The datagrid element
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#the-datagrid-element
10.4.7 The details element
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#the-details-element-0
10.3.2 Display types
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#display-types
4.11.5.4 Tool bars
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#tool-bars
open
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#dom-details-open
10.4.4 The bb element
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#the-bb-element-0
10.4.11 The input element as a text entry widget
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#the-input-element-as-a-text-entry-widget
4.11.6 Commands
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#commands
10.4.13 The input element as a range control
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#the-input-element-as-a-range-control
open
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#attr-details-open
10.3.3 Margins and padding
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#margins-and-padding
10.3.6 Punctuation and decorations
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1930.html#punctuation-and-decorations

http://people.w3.org/mike/diffs/html5/spec/Overview.diff.html
http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.1929&r2=1.1930&f=h
http://html5.org/tools/web-apps-tracker?from=2759&to=2760

===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.1929
retrieving revision 1.1930
diff -u -d -r1.1929 -r1.1930
--- Overview.html	5 Feb 2009 09:18:13 -0000	1.1929
+++ Overview.html	5 Feb 2009 09:50:55 -0000	1.1930
@@ -555,7 +555,7 @@
        <li><a href=#menus-intro><span class=secno>4.11.5.1 </span>Introduction</a></li>
        <li><a href=#building-menus-and-tool-bars><span class=secno>4.11.5.2 </span>Building menus and tool bars</a></li>
        <li><a href=#context-menus><span class=secno>4.11.5.3 </span>Context menus</a></li>
-       <li><a href=#toolbars><span class=secno>4.11.5.4 </span>Toolbars</a></ol></li>
+       <li><a href=#tool-bars><span class=secno>4.11.5.4 </span>Tool bars</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.6.1 </span>Using the <code>a</code> element to define a command</a></li>
@@ -966,32 +966,28 @@
     <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=#ruby-annotations><span class=secno>10.4.3 </span>Ruby annotations</a></li>
-     <li><a href=#toolbars-0><span class=secno>10.4.4 </span>Toolbars</a>
-      <ol>
-       <li><a href=#the-icon-property><span class=secno>10.4.4.1 </span>The 'icon' property</a></ol></li>
-     <li><a href=#the-bb-element-0><span class=secno>10.4.5 </span>The <code>bb</code> element</a></li>
-     <li><a href=#the-br-element-0><span class=secno>10.4.6 </span>The <code>br</code> element</a></li>
-     <li><a href=#the-button-element-0><span class=secno>10.4.7 </span>The <code>button</code> element</a></li>
-     <li><a href=#the-datagrid-element><span class=secno>10.4.8 </span>The <code>datagrid</code> element</a></li>
-     <li><a href=#the-details-element-0><span class=secno>10.4.9 </span>The <code>details</code> element</a></li>
-     <li><a href=#the-fieldset-element-0><span class=secno>10.4.10 </span>The <code>fieldset</code> element</a></li>
-     <li><a href=#the-figure-element-0><span class=secno>10.4.11 </span>The <code>figure</code> element</a></li>
-     <li><a href=#the-hr-element-0><span class=secno>10.4.12 </span>The <code>hr</code> element</a></li>
-     <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>10.4.13 </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.14 </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.15 </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.16 </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.17 </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.18 </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.19 </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.20 </span>The <code>input</code> element as a button</a></li>
-     <li><a href=#the-marquee-element><span class=secno>10.4.21 </span>The <code>marquee</code> element</a></li>
-     <li><a href=#the-meter-element-0><span class=secno>10.4.22 </span>The <code>meter</code> element</a></li>
-     <li><a href=#the-progress-element-0><span class=secno>10.4.23 </span>The <code>progress</code> element</a></li>
-     <li><a href=#the-select-element-0><span class=secno>10.4.24 </span>The <code>select</code> element</a></li>
-     <li><a href=#the-textarea-element-0><span class=secno>10.4.25 </span>The <code>textarea</code> element</a></li>
-     <li><a href=#the-title-attribute-0><span class=secno>10.4.26 </span>The <code title=attr-title>title</code> attribute</a></ol></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-figure-element-0><span class=secno>10.4.9 </span>The <code>figure</code> element</a></li>
+     <li><a href=#the-hr-element-0><span class=secno>10.4.10 </span>The <code>hr</code> element</a></li>
+     <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>10.4.11 </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.12 </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.13 </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.14 </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.15 </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.16 </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.17 </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.18 </span>The <code>input</code> element as a button</a></li>
+     <li><a href=#the-marquee-element><span class=secno>10.4.19 </span>The <code>marquee</code> element</a></li>
+     <li><a href=#the-meter-element-0><span class=secno>10.4.20 </span>The <code>meter</code> element</a></li>
+     <li><a href=#the-progress-element-0><span class=secno>10.4.21 </span>The <code>progress</code> element</a></li>
+     <li><a href=#the-select-element-0><span class=secno>10.4.22 </span>The <code>select</code> element</a></li>
+     <li><a href=#the-textarea-element-0><span class=secno>10.4.23 </span>The <code>textarea</code> element</a></li>
+     <li><a href=#the-title-attribute-0><span class=secno>10.4.24 </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>
     <ol>
      <li><a href=#hit-testing><span class=secno>10.5.1 </span>Hit testing</a></li>
@@ -10239,7 +10235,7 @@
   otherwise have been placed, if it had been relevant.<p>The <code title=attr-hyperlink-target><a href=#attr-hyperlink-target>target</a></code>, <code title=attr-hyperlink-ping><a href=#ping>ping</a></code>, <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>, <code title=attr-hyperlink-media><a href=#attr-hyperlink-media>media</a></code>, <code title=attr-hyperlink-hreflang><a href=#attr-hyperlink-hreflang>hreflang</a></code>, and <code title=attr-hyperlink-type><a href=#attr-hyperlink-type>type</a></code> attributes must be omitted
   if the <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute is
   not present.<div class=example>
-   <p>If a site uses a consistent navigation toolbar on every page,
+   <p>If a site uses a consistent navigation tool bar on every page,
    then the link that would normally link to the page itself could be
    marked up using an <code><a href=#the-a-element>a</a></code> element:</p>
    <pre>&lt;nav&gt;
@@ -24923,19 +24919,7 @@
   the value <code title="">open</code>. To honour a request for the
   details to be hidden, the user agent must remove the <code title=attr-details-open><a href=#attr-details-open>open</a></code> attribute from the
   element.<p>The <dfn id=dom-details-open title=dom-details-open><code>open</code></dfn>
-  attribute must <a href=#reflect>reflect</a> the <code title=attr-details-open><a href=#attr-details-open>open</a></code> content attribute.<p class=XXX>Rendering will be described in the Rendering
-  section in due course. 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>&lt;template&gt;&#9654;&lt;content
-  includes="legend:first-child"&gt;Details&lt;/content&gt;&lt;/template&gt;</code>,
-  and when it's :open it acts as if it had an XBL binding attached to
-  it whose template was just <code>&lt;template&gt;&#9660;&lt;content
-  includes="legend:first-child"&gt;Details&lt;/content&gt;&lt;content/&gt;&lt;/template&gt;</code>
-  or some such.</p><!--
-Example ideas:
-http://mail.gnome.org/archives/usability/2006-June/msg00015.html
---><div class=bad>
+  attribute must <a href=#reflect>reflect</a> the <code title=attr-details-open><a href=#attr-details-open>open</a></code> content attribute.<div class=bad>
   <h4 id=datagrid><span class=secno>4.11.2 </span>The <dfn><code>datagrid</code></dfn> element</h4>
 
 <p class=XXX>The API here needs rewriting. Don't implement this right now.</p>
@@ -27046,11 +27030,12 @@
   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>The <dfn id=dom-contextmenu title=dom-contextMenu><code>contextMenu</code></dfn>
-  attribute must <a href=#reflect>reflect</a> the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> content attribute.<h5 id=toolbars><span class=secno>4.11.5.4 </span>Toolbars</h5><p><dfn id=toolbars-1>Toolbars</dfn> are a kind of menu that is always visible.<p>When a <code><a href=#menus>menu</a></code> element has a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute with the value <code title="">toolbar</code>, then the user agent must <a href=#building-menus-and-tool-bars title="building menus and tool bars">build</a> the menu for that
-  <code><a href=#menus>menu</a></code> element and <span title=render-toolbar>render</span><!-- XXX xref --> it in the
-  document in a position appropriate for that <code><a href=#menus>menu</a></code>
-  element.<p>The user agent must reflect changes made to the
-  <code><a href=#menus>menu</a></code>'s DOM immediately in the UI.<h4 id=commands><span class=secno>4.11.6 </span>Commands</h4><p>A <dfn id=concept-command title=concept-command>command</dfn> is the abstraction
+  attribute must <a href=#reflect>reflect</a> the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> content attribute.<h5 id=tool-bars><span class=secno>4.11.5.4 </span><dfn>Tool bars</dfn></h5><p>When a <code><a href=#menus>menu</a></code> element has a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#tool-bar-state title="tool bar state">tool bar</a> state, then the user agent
+  must <a href=#building-menus-and-tool-bars title="building menus and tool bars">build</a> the
+  menu for that <code><a href=#menus>menu</a></code> element, and use the result in the
+  rendering.<p>The user agent must reflect changes made to the
+  <code><a href=#menus>menu</a></code>'s DOM, by immediately <a href=#building-menus-and-tool-bars title="building menus
+  and tool bars">rebuilding</a> the menu.<h4 id=commands><span class=secno>4.11.6 </span>Commands</h4><p>A <dfn id=concept-command title=concept-command>command</dfn> is the abstraction
   behind menu items, buttons, and links. Once a command is defined,
   other parts of the interface can refer to the same command, allowing
   many access points to a single feature to share aspects such as the
@@ -46253,7 +46238,7 @@
 address, article, aside, blockquote, body, center, dd, dialog, dir,
 div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr,
 html, layer, legend, listing, menu, multicol, nav, ol, p, plaintext,
-pre, section, ul, xmp { display: block; }
+pre, rp, section, ul, xmp { display: block; }
 
 table { display: table; }
 caption { display: table-caption; }
@@ -46265,7 +46250,11 @@
 tr { display: table-row; }
 td, th { display: table-cell; }
 
-li { display: list-item; }</pre><!-- del, ins, and map are inline. --><p>For the purposes of the CSS table model, the <code><a href=#the-col-element>col</a></code>
+li { display: list-item; }
+
+ruby { display: ruby; }
+rt { display: ruby-text; }
+</pre><!-- del, ins, and map are inline. --><p>For the purposes of the CSS table model, the <code><a href=#the-col-element>col</a></code>
   element is to be treated as if it was present as many times as its
   <code title=attr-col-span><a href=#attr-col-span>span</a></code> attribute <a href=#rules-for-parsing-non-negative-integers title="rules
   for parsing non-negative integers">specifies</a>.<p>For the purposes of the CSS table model, the
@@ -46275,7 +46264,12 @@
   integers">specifies</a>.<p>For the purposes of the CSS table model, the <code title=attr-tdth-colspan><a href=#attr-tdth-colspan>colspan</a></code> and <code title=attr-tdth-rowspan><a href=#attr-tdth-rowspan>rowspan</a></code> attributes on
   <code><a href=#the-td-element>td</a></code> and <code><a href=#the-th-element>th</a></code> elements are expected to <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative integers">provide</a> the
   <i>special knowledge</i> regarding cells spanning rows and
-  columns.<h4 id=margins-and-padding><span class=secno>10.3.3 </span>Margins and padding</h4><pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+  columns.<p>For the purposes of the CSS ruby model, runs of descendants of
+  <code><a href=#the-ruby-element>ruby</a></code> elements that are not <code><a href=#the-rt-element>rt</a></code> or
+  <code><a href=#the-rp-element>rp</a></code> elements are expected to be wrapped in anonymous
+  boxes whose 'display' property has the value 'ruby-base'.<p>User agents that do not support correct ruby rendering are
+  expected to render parentheses around the text of <code><a href=#the-rt-element>rt</a></code>
+  elements in the absence of <code><a href=#the-rp-element>rp</a></code> elements.<h4 id=margins-and-padding><span class=secno>10.3.3 </span>Margins and padding</h4><pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
 
 blockquote, dir, dl, listing, menu, ol, p, plaintext, pre, ul, xmp {
   margin-top: 1em; margin-bottom: 1em;
@@ -46789,6 +46783,10 @@
 td[nowrap], th[nowrap] { white-space: nowrap; }
 pre[wrap] { white-space: pre-wrap; }
 
+br[clear=left] { clear: left; }
+br[clear=right] { clear: right; }
+br[clear=all], br[clear=both] { clear: both; }
+
 ol[type=1], li[type=1] { list-style-type: decimal; }
 ol[type=a], li[type=a] { list-style-type: lower-alpha; }
 ol[type=A], li[type=A] { list-style-type: upper-alpha; }
@@ -46892,7 +46890,9 @@
   border-style: solid;
 }</pre><p>When rendering <code><a href=#the-li-element>li</a></code> elements, user agents are expected
   to use the ordinal value of the <code><a href=#the-li-element>li</a></code> element to render
-  the counter in the list item marker.<p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-border>border</code> attribute <a href=#maps-to-the-pixel-length-property title="maps
+  the counter in the list item marker.<p>The <code><a href=#the-br-element>br</a></code> element is expected to render as if its
+  contents were a single U+000A LINE FEED (LF) character and its
+  'white-space' property was 'pre'.<p>The <code><a href=#the-table-element>table</a></code> element's <code title=attr-table-border>border</code> attribute <a href=#maps-to-the-pixel-length-property title="maps
   to the pixel length property">maps to the pixel length
   properties</a> 'border-top-width', 'border-right-width',
   'border-bottom-width', 'border-left-width' on the element. If the
@@ -47312,32 +47312,43 @@
   proportionally) to each entry whose unit is <i>percentage</i>, then
   equally (not proportionally) to each entry whose unit is
   <i>absolute</i>, and finally, failing all else, to the last
-  entry.<h4 id=ruby-annotations><span class=secno>10.4.3 </span>Ruby annotations</h4><p class=XXX>...</p><!-- XXX ruby, rt, rp 
-  > * note on rt rendering
-  > 
-  > Since there are a number of documents with ruby but without rp, when you
-  > write the rendering section, please include an advice for user agents
-  > that do not support "correct" ruby rendering to render something like
-  > "(" and ")" before and after ruby text (using, e.g., CSS ::before and
-  > ::after) even when there are no rp elements. Otherwise, reading Web
-  > pages without rp is very annoying.
-  --><h4 id=toolbars-0><span class=secno>10.4.4 </span>Toolbars</h4><h5 id=the-icon-property><span class=secno>10.4.4.1 </span>The 'icon' property</h5><p>UAs should use the command's Icon as the default generic icon
-  provided by the user agent when the 'icon' property computes to
-  'auto' on an element that either defines a command or refers to one
-  using the <code title=command-attribute>command</code> attribute,
-  but when the property computes to an actual image, it should use
-  that image instead.<h4 id=the-bb-element-0><span class=secno>10.4.5 </span>The <code><a href=#the-bb-element>bb</a></code> element</h4><p class=XXX>...<h4 id=the-br-element-0><span class=secno>10.4.6 </span>The <code><a href=#the-br-element>br</a></code> element</h4><p class=XXX>...</p><!-- clear="left|right|all|both" --><h4 id=the-button-element-0><span class=secno>10.4.7 </span>The <code><a href=#the-button-element>button</a></code> element</h4><p class=XXX>...<h4 id=the-datagrid-element><span class=secno>10.4.8 </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
+  entry.<h4 id=tool-bars-0><span class=secno>10.4.3 </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>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 class="example XXX">...example with screenshot...<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.<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.<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.<h4 id=the-details-element-0><span class=secno>10.4.9 </span>The <code><a href=#the-details-element>details</a></code> element</h4><p class=XXX>...<h4 id=the-fieldset-element-0><span class=secno>10.4.10 </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-figure-element-0><span class=secno>10.4.11 </span>The <code><a href=#the-figure-element>figure</a></code> element</h4><p class=XXX>...<h4 id=the-hr-element-0><span class=secno>10.4.12 </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:%)
+  concert with CSS. Implementation experience is desired before this
+  section is filled in.<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 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>&lt;template&gt;&#9654;&lt;content
+  includes="legend:first-child"&gt;Details&lt;/content&gt;&lt;/template&gt;</code>,
+  and when it's :open it acts as if it had an XBL binding attached to
+  it whose template was just <code>&lt;template&gt;&#9660;&lt;content
+  includes="legend:first-child"&gt;Details&lt;/content&gt;&lt;content/&gt;&lt;/template&gt;</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-figure-element-0><span class=secno>10.4.9 </span>The <code><a href=#the-figure-element>figure</a></code> element</h4><p class=XXX>...<h4 id=the-hr-element-0><span class=secno>10.4.10 </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.13 </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.14 </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.15 </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.16 </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><spa class=secno>10.4.17 </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, ...<h4 id=the-input-element-as-a-radio-button-widget><span class=secno>10.4.18 </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, ...<h4 id=the-input-element-as-a-file-upload-control><span class=secno>10.4.19 </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>inpt</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, ...<h4 id=the-input-element-as-a-button><span class=secno>10.4.20 </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, ...<h4 id=the-marquee-element><span class=secno>10.4.21 </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=secn>10.4.22 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4><p class=XXX>...<h4 id=the-progress-element-0><span class=secno>10.4.23 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4><p class=XXX>...<h4 id=the-select-element-0><span class=secno>10.4.24 </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.25 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4><p class=XXX>...<h4 id=the-title-attribute-0><span class=secno>10.4.26 </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
+    --><h4 id=the-input-element-as-a-text-entry-widget><span class=secno>10.4.11 </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.12 </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.13 </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.14 </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><spa class=secno>10.4.15 </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, ...<h4 id=the-input-element-as-a-radio-button-widget><span class=secno>10.4.16 </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, ...<h4 id=the-input-element-as-a-file-upload-control><span class=secno>10.4.17 </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>inpt</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, ...<h4 id=the-input-element-as-a-button><span class=secno>10.4.18 </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, ...<h4 id=the-marquee-element><span class=secno>10.4.19 </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=secn>10.4.20 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4><p class=XXX>...<h4 id=the-progress-element-0><span class=secno>10.4.21 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4><p class=XXX>...<h4 id=the-select-element-0><span class=secno>10.4.22 </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.23 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4><p class=XXX>...<h4 id=the-title-attribute-0><span class=secno>10.4.24 </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
Received on Thursday, 5 February 2009 09:54:48 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Saturday, 18 December 2010 06:13:58 GMT