HTML Standard Tracker

Filter

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
@@ -61342,23 +61342,25 @@ rt { display: ruby-text; }
 
   <p>User agents that do not support correct ruby rendering are
   expected to render parentheses around the text of <code>rt</code>
   elements in the absence of <code>rp</code> elements.</p>
 
 
   <h4>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 {
+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,
 ol dir, ol dl, ol menu, ol ol, ol ul,
 ul dir, ul dl, ul menu, ul ol, ul ul {
   margin-top: 0; margin-bottom: 0;
 }
 
 h1 { margin-top: 0.67em; margin-bottom; 0.67em; }
 h2 { margin-top: 0.83em; margin-bottom; 0.83em; }
@@ -62208,30 +62210,50 @@ table {
   font-style: initial;
   font-variant: initial;
   font-size: initial;
   line-height: initial;
   white-space: initial;
   text-align: initial;
 }</pre>
 
 
 
-  <h3>Self-contained features</h3>
+  <h3>Replaced elements</h3>
 
   <h4>Embedded content</h4>
 
   <p>The <code>applet</code>, <code>canvas</code>, <code>embed</code>,
   <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
   <span>represents</span> an image, it is expected to be treated as a
   replaced element.</p>
 
   <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
   does not <span title="represents">represent</span> an image, but the
@@ -62279,42 +62301,31 @@ table {
   as not to disrupt most text but be easily clickable, for instance 16
   pixels by 16 pixels square, or 1em by 1em if the images are
   scalable. The images are intended to indicate to the user that they
   can be used to get to whatever options the UA provides for images,
   and, where appropriate, are expected to provide access to the
   context menu that would have come up if the user interacted with the
   actual image.</p>
 
   <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>
-
-  <hr>
-
-  <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>
+  <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 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>
+  <h4>Attributes for embedded content and images</h4>
 
   <p>The following CSS rules are expected to apply as
   <span>presentational hints</span>:</p>
 
   <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
 
 iframe[frameborder=0], iframe[frameborder=no] { border: none; }
 
 applet[align=left], embed[align=left], iframe[align=left],
 img[align=left], input[type=image][align=left], object[align=left] {
@@ -62409,33 +62420,270 @@ object[align=bottom] {
   title="attr-dim-height">height</code> attributes on
   <code>applet</code>, <code>embed</code>, <code>iframe</code>,
   <code>img</code>, <code>object</code> or <code>video</code>
   elements, and <code>input</code> elements with a <code
   title="attr-input-type">type</code> attribute in the <span
   title="attr-input-type-image">Image Button</span> state, <span
   title="maps to the pixel length property">map to the dimension
   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>
+
+  <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>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>
+
 
-img[align=left] { margin-right: 3px; }
-img[align=right] { margin-left: 3px; }</pre>
 
+  <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>Frames</h4>
+
+  <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
   surface of the <span>view</span>, instead of applying the usual CSS
   rendering rules.</p>
 
   <p>When rendering a <code>frameset</code> on a surface, the user
   agent is expected to use the following layout algorithm:</p>
 
@@ -62752,238 +63000,20 @@ img[align=right] { margin-left: 3px; }</pre>
   opposed to user agents that can lay frames out with subpixel
   accuracy) are expected to distribute the remainder first the last
   entry whose unit is <i>relative</i>, then equally (not
   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.</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>
-
-
-
-  <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>
 
   <p class="XXX">this should really be in a CSS spec -- hot to decide
   which element is under the cursor -->
 
 <!--
 
 HIT TESTING TRANSPARENCY
@@ -63071,20 +63101,35 @@ target element as follows:
   toggled.</p>
 
 
 
   <h4>The <code title="attr-contenteditable">contenteditable</code> attribute</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>Print media</h3>
 
   <p class="XXX"> must define letting the user "<dfn>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>Interaction with CSS</h3>
 

|