HTML Standard Tracker

Diff (omit for latest revision)
Filter

Short URL: http://html5.org/r/2762

File a bug

SVNBugCommentTime (UTC)
2762Filling in the rendering section: <bb>, <button>, <details>, and a rearranging of the sections with minor tweaks.2009-02-05 23:33
Index: source
===================================================================
--- source	(revision 2761)
+++ source	(revision 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&nbsp;>&nbsp;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>&lt;template>&#x25B6;&lt;content
-  includes="legend:first-child"&gt;Details&lt;/content>&lt;/template></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>&#x25BC;&lt;content
-  includes="legend:first-child"&gt;Details&lt;/content>&lt;content/>&lt;/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

|