[html5] r2763 - [] (0) Filling in the rendering section: <hr>, and a rearranging of the sections [...]
whatwg at whatwg.org
whatwg at whatwg.org
Thu Feb 5 17:43:04 PST 2009
Author: ianh
Date: 2009-02-05 17:43:03 -0800 (Thu, 05 Feb 2009)
New Revision: 2763
Modified:
index
source
Log:
[] (0) Filling in the rendering section: <hr>, and a rearranging of the sections with minor tweaks. Again.
Modified: index
===================================================================
--- index 2009-02-05 23:33:29 UTC (rev 2762)
+++ index 2009-02-06 01:43:03 UTC (rev 2763)
@@ -34,7 +34,7 @@
<div class=head>
<p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
<h1>HTML 5</h1>
- <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 5 February 2009</h2>
+ <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 6 February 2009</h2>
<p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<dl><dt>Multiple-page version:</dt>
@@ -1029,54 +1029,53 @@
<li><a href=#rendering><span class=secno>10 </span>Rendering</a>
<ol>
<li><a href=#introduction-8><span class=secno>10.1 </span>Introduction</a></li>
- <li><a href=#hidden-elements><span class=secno>10.2 </span>Hidden elements</a></li>
- <li><a href=#simple-defaults><span class=secno>10.3 </span>Simple defaults</a>
+ <li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>10.2 </span>The CSS user agent style sheet and presentational hints</a>
<ol>
- <li><a href=#introduction-9><span class=secno>10.3.1 </span>Introduction</a></li>
- <li><a href=#display-types><span class=secno>10.3.2 </span>Display types</a></li>
- <li><a href=#margins-and-padding><span class=secno>10.3.3 </span>Margins and padding</a></li>
- <li><a href=#alignment><span class=secno>10.3.4 </span>Alignment</a></li>
- <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=#replaced-elements><span class=secno>10.4 </span>Replaced elements</a>
+ <li><a href=#introduction-9><span class=secno>10.2.1 </span>Introduction</a></li>
+ <li><a href=#display-types><span class=secno>10.2.2 </span>Display types</a></li>
+ <li><a href=#margins-and-padding><span class=secno>10.2.3 </span>Margins and padding</a></li>
+ <li><a href=#alignment><span class=secno>10.2.4 </span>Alignment</a></li>
+ <li><a href=#fonts-and-colors><span class=secno>10.2.5 </span>Fonts and colors</a></li>
+ <li><a href=#punctuation-and-decorations><span class=secno>10.2.6 </span>Punctuation and decorations</a></li>
+ <li><a href=#resetting-rules-for-inherited-properties><span class=secno>10.2.7 </span>Resetting rules for inherited properties</a></li>
+ <li><a href=#the-hr-element-0><span class=secno>10.2.8 </span>The <code>hr</code> element</a></li>
+ <li><a href=#the-fieldset-element-0><span class=secno>10.2.9 </span>The <code>fieldset</code> element</a></ol></li>
+ <li><a href=#replaced-elements><span class=secno>10.3 </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=#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>
+ <li><a href=#embedded-content-1><span class=secno>10.3.1 </span>Embedded content</a></li>
+ <li><a href=#images-0><span class=secno>10.3.2 </span>Images</a></li>
+ <li><a href=#attributes-for-embedded-content-and-images><span class=secno>10.3.3 </span>Attributes for embedded content and images</a></li>
+ <li><a href=#tool-bars-0><span class=secno>10.3.4 </span>Tool bars</a></ol></li>
+ <li><a href=#bindings><span class=secno>10.4 </span>Bindings</a>
<ol>
- <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>
+ <li><a href=#introduction-10><span class=secno>10.4.1 </span>Introduction</a></li>
+ <li><a href=#the-bb-element-0><span class=secno>10.4.2 </span>The <code>bb</code> element</a></li>
+ <li><a href=#the-button-element-0><span class=secno>10.4.3 </span>The <code>button</code> element</a></li>
+ <li><a href=#the-datagrid-element><span class=secno>10.4.4 </span>The <code>datagrid</code> element</a></li>
+ <li><a href=#the-details-element-0><span class=secno>10.4.5 </span>The <code>details</code> element</a></li>
+ <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>10.4.6 </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.7 </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.8 </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.9 </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.10 </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.11 </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.12 </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.13 </span>The <code>input</code> element as a button</a></li>
+ <li><a href=#the-marquee-element><span class=secno>10.4.14 </span>The <code>marquee</code> element</a></li>
+ <li><a href=#the-meter-element-0><span class=secno>10.4.15 </span>The <code>meter</code> element</a></li>
+ <li><a href=#the-progress-element-0><span class=secno>10.4.16 </span>The <code>progress</code> element</a></li>
+ <li><a href=#the-select-element-0><span class=secno>10.4.17 </span>The <code>select</code> element</a></li>
+ <li><a href=#the-textarea-element-0><span class=secno>10.4.18 </span>The <code>textarea</code> element</a></ol></li>
+ <li><a href=#frames-and-framesets><span class=secno>10.5 </span>Frames and framesets</a></li>
+ <li><a href=#interactive-media><span class=secno>10.6 </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=#hit-testing><span class=secno>10.6.1 </span>Hit testing</a></li>
+ <li><a href=#links-0><span class=secno>10.6.2 </span>Links</a></li>
+ <li><a href=#the-mark-element-0><span class=secno>10.6.3 </span>The <code>mark</code> element</a></li>
+ <li><a href=#the-contenteditable-attribute><span class=secno>10.6.4 </span>The <code title=attr-contenteditable>contenteditable</code> attribute</a></li>
+ <li><a href=#the-title-attribute-0><span class=secno>10.6.5 </span>The <code title=attr-title>title</code> attribute</a></ol></li>
+ <li><a href=#print-media><span class=secno>10.7 </span>Print media</a></li>
+ <li><a href=#interaction-with-css><span class=secno>10.8 </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><span class=secno>11.1 </span>Self-contained features</a>
@@ -55962,27 +55961,10 @@
this section to their target media.</p>
- <h3 id=hidden-elements><span class=secno>10.2 </span>Hidden elements</h3>
+ <h3 id=the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>10.2 </span>The CSS user agent style sheet and presentational hints</h3>
- <p>User agents are expected to use the following styles in all
- media.</p>
+ <h4 id=introduction-9><span class=secno>10.2.1 </span>Introduction</h4>
- <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
-
-[hidden], area, audio:not([controls]), base, basefont, command,
-datalist, eventsource, head, input[type=hidden], link,
-menu[type=context], meta, noembed, noframes, param, script, source,
-style, title { display: none; }</pre>
-
- <p>This hides all the elements that do not represent anything
- visible.</p>
-
-
-
- <h3 id=simple-defaults><span class=secno>10.3 </span>Simple defaults</h3>
-
- <h4 id=introduction-9><span class=secno>10.3.1 </span>Introduction</h4>
-
<p>The CSS rules given in these subsections are, unless otherwise
specified, expected to be used as part of the user-agent level style
sheet defaults for all documents that contain <a href=#html-elements>HTML
@@ -56018,10 +56000,15 @@
- <h4 id=display-types><span class=secno>10.3.2 </span>Display types</h4>
+ <h4 id=display-types><span class=secno>10.2.2 </span>Display types</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+[hidden], area, audio:not([controls]), base, basefont, command,
+datalist, eventsource, head, input[type=hidden], link,
+menu[type=context], meta, noembed, noframes, param, script, source,
+style, title { display: none; }
+
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,
@@ -56070,9 +56057,13 @@
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.</p>
+ <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>
- <h4 id=margins-and-padding><span class=secno>10.3.3 </span>Margins and padding</h4>
+ <h4 id=margins-and-padding><span class=secno>10.2.3 </span>Margins and padding</h4>
+
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
article, aside, blockquote, dir, dl, figure, listing, menu, nav, ol,
@@ -56227,7 +56218,7 @@
to zero.</p>
- <h4 id=alignment><span class=secno>10.3.4 </span>Alignment</h4>
+ <h4 id=alignment><span class=secno>10.2.4 </span>Alignment</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -56332,7 +56323,7 @@
<code title=attr-align>align</code> attribute.</p>
- <h4 id=fonts-and-colors><span class=secno>10.3.5 </span>Fonts and colors</h4>
+ <h4 id=fonts-and-colors><span class=secno>10.2.5 </span>Fonts and colors</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -56619,7 +56610,7 @@
</li>
- </ol><h4 id=punctuation-and-decorations><span class=secno>10.3.6 </span>Punctuation and decorations</h4>
+ </ol><h4 id=punctuation-and-decorations><span class=secno>10.2.6 </span>Punctuation and decorations</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
@@ -56714,7 +56705,7 @@
table[frames=box],
table[frames=border] { border-style: solid solid solid solid; }
-`table[frames=void] > tr > td, table[frames=void] > tr > th,
+table[frames=void] > tr > td, table[frames=void] > tr > th,
table[frames=above] > tr > td, table[frames=above] > tr > th,
table[frames=below] > > tr > td, table[frames=below] > tr > th,
table[frames=hsides] > tr > td, table[frames=hsides] > tr > th,
@@ -56796,10 +56787,6 @@
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>
- <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>
-
<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',
@@ -56809,7 +56796,7 @@
instead.</p>
- <h4 id=resetting-rules-for-inherited-properties><span class=secno>10.3.7 </span>Resetting rules for inherited properties</h4>
+ <h4 id=resetting-rules-for-inherited-properties><span class=secno>10.2.7 </span>Resetting rules for inherited properties</h4>
<p>The following rules are also expected to be in play, resetting
certain properties to block inheritance by default.</p>
@@ -56834,11 +56821,66 @@
}</pre>
+ <h4 id=the-hr-element-0><span class=secno>10.2.8 </span>The <code><a href=#the-hr-element>hr</a></code> element</h4>
- <h3 id=replaced-elements><span class=secno>10.4 </span>Replaced elements</h3>
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
- <h4 id=embedded-content-1><span class=secno>10.4.1 </span>Embedded content</h4>
+hr { color: gray; border-style: inset; border-width: 1px; }</pre>
+ <p>The following rules are also expected to apply, as
+ <a href=#presentational-hints>presentational hints</a>:</p>
+
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+
+hr[align=left] { margin-left: 0; margin-right: auto; }
+hr[align=right] { margin-left: auto; margin-right: 0; }
+hr[align=center] { margin-left: auto; margin-right: auto; }
+hr[color], hr[noshade] { border-style: solid; }</pre>
+
+ <p>If an <code><a href=#the-hr-element>hr</a></code> element has either a <code title=attr-hr-color>color</code> attribute or a <code title=attr-hr-noshade>noshade</code> attribute, and furthermore
+ also has a <code title=attr-hr-size>size</code> attribute, and
+ parsing that attribute's value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing
+ non-negative integers</a> doesn't generate an error, then the
+ user agent is expected to use the parsed value divided by two as a
+ pixel length for <a href=#presentational-hints>presentational hints</a> for the properties
+ 'border-top-width', 'border-right-width', 'border-bottom-width', and
+ 'border-left-width' on the element.</p>
+
+ <p>Otherwise, if an <code><a href=#the-hr-element>hr</a></code> element has neither a <code title=attr-hr-color>color</code> attribute nor a <code title=attr-hr-noshade>noshade</code> attribute, but does have a
+ <code title=attr-hr-size>size</code> attribute, and parsing that
+ attribute's value using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative
+ integers</a> doesn't generate an error, then: if the parsed value
+ is one, then the user agent is expected to use the attribute as a
+ <a href=#presentational-hints title="presentational hints">presentational hint</a>
+ setting the element's 'border-bottom-width' to 0; otherwise, if the
+ parsed value is greater than one, then the user agent is expected to
+ use the parsed value minus two as a pixel length for
+ <a href=#presentational-hints>presentational hints</a> for the 'height' property on the
+ element.</p>
+
+ <p>The <code title=attr-hr-width>width</code> attribute on an
+ <code><a href=#the-hr-element>hr</a></code> element <a href=#maps-to-the-dimension-property>maps to the dimension property</a>
+ 'width' on the element.</p>
+
+ <p>When an <code><a href=#the-hr-element>hr</a></code> element has a <code title=attr-hr-color>color</code> attribute, its value is expected
+ to be parsed using the <a href=#rules-for-parsing-a-legacy-color-value>rules for parsing a legacy color
+ value</a>, and the user agent is expected to treat the attribute
+ as a <a href=#presentational-hints title="presentational hints">presentational hint</a>
+ setting the element's 'color' property to the resulting color.</p>
+
+
+
+ <h4 id=the-fieldset-element-0><span class=secno>10.2.9 </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"> -->
+
+
+
+ <h3 id=replaced-elements><span class=secno>10.3 </span>Replaced elements</h3>
+
+ <h4 id=embedded-content-1><span class=secno>10.3.1 </span>Embedded content</h4>
+
<p>The <code><a href=#the-applet-element>applet</a></code>, <code><a href=#the-canvas-element>canvas</a></code>, <code><a href=#the-embed-element>embed</a></code>,
<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>
@@ -56860,7 +56902,7 @@
iframe { border: 2px inset; }</pre>
- <h4 id=images-0><span class=secno>10.4.2 </span>Images</h4>
+ <h4 id=images-0><span class=secno>10.3.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
@@ -56928,7 +56970,7 @@
- <h4 id=attributes-for-embedded-content-and-images><span class=secno>10.4.3 </span>Attributes for embedded content and images</h4>
+ <h4 id=attributes-for-embedded-content-and-images><span class=secno>10.3.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>
@@ -57022,7 +57064,7 @@
- <h4 id=tool-bars-0><span class=secno>10.4.4 </span>Tool bars</h4>
+ <h4 id=tool-bars-0><span class=secno>10.3.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
@@ -57037,16 +57079,16 @@
- <h3 id=bindings><span class=secno>10.5 </span>Bindings</h3>
+ <h3 id=bindings><span class=secno>10.4 </span>Bindings</h3>
- <h4 id=introduction-10><span class=secno>10.5.1 </span>Introduction</h4>
+ <h4 id=introduction-10><span class=secno>10.4.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'
+ user-agent-defined value, represented below by keywords like <code title=""><i title="">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>
@@ -57058,32 +57100,32 @@
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>
+ <h4 id=the-bb-element-0><span class=secno>10.4.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>
+bb:empty { binding: <i title="">bb</i>; }</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>
+ <p>When the <i title="">bb</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=the-button-element-0><span class=secno>10.5.3 </span>The <code><a href=#the-button-element>button</a></code> element</h4>
+ <h4 id=the-button-element-0><span class=secno>10.4.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>
+button { binding: <i title="">button</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>
+ <p>When the <i title="">button</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>
+ <h4 id=the-datagrid-element><span class=secno>10.4.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
@@ -57092,15 +57134,16 @@
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>
+ <h4 id=the-details-element-0><span class=secno>10.4.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>
+details { binding: <i title="">details</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
+ <p>When the <i title="">details</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>
@@ -57119,47 +57162,20 @@
<!--
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-input-element-as-a-text-entry-widget><span class=secno>10.4.6 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
-
-
- <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>
+ <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>10.4.7 </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>
@@ -57167,77 +57183,77 @@
- <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>
+ <h4 id=the-input-element-as-a-range-control><span class=secno>10.4.8 </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>
+ <h4 id=the-input-element-as-a-color-well><span class=secno>10.4.9 </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>
+ <h4 id=the-input-element-as-a-check-box-widget><span class=secno>10.4.10 </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>
+ <h4 id=the-input-element-as-a-radio-button-widget><span class=secno>10.4.11 </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>
+ <h4 id=the-input-element-as-a-file-upload-control><span class=secno>10.4.12 </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>
+ <h4 id=the-input-element-as-a-button><span class=secno>10.4.13 </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>
+ <h4 id=the-marquee-element><span class=secno>10.4.14 </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>
+ <h4 id=the-meter-element-0><span class=secno>10.4.15 </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>
+ <h4 id=the-progress-element-0><span class=secno>10.4.16 </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>
+ <h4 id=the-select-element-0><span class=secno>10.4.17 </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>
+ <h4 id=the-textarea-element-0><span class=secno>10.4.18 </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>
+ <h3 id=frames-and-framesets><span class=secno>10.5 </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
@@ -57517,9 +57533,9 @@
- <h3 id=interactive-media><span class=secno>10.7 </span>Interactive media</h3>
+ <h3 id=interactive-media><span class=secno>10.6 </span>Interactive media</h3>
- <h4 id=hit-testing><span class=secno>10.7.1 </span>Hit testing</h4>
+ <h4 id=hit-testing><span class=secno>10.6.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 -->
@@ -57590,7 +57606,7 @@
- <h4 id=links-0><span class=secno>10.7.2 </span>Links</h4>
+ <h4 id=links-0><span class=secno>10.6.2 </span>Links</h4>
<p class=XXX>...</p>
<!-- hyperlinks: hover show url; clicks; opening in new browsing contexts -->
@@ -57598,7 +57614,7 @@
- <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>
+ <h4 id=the-mark-element-0><span class=secno>10.6.3 </span>The <code><a href=#the-mark-element>mark</a></code> element</h4>
<p class=XXX>...</p>
<!-- being able to cycle through them -->
@@ -57612,13 +57628,13 @@
- <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>
+ <h4 id=the-contenteditable-attribute><span class=secno>10.6.4 </span>The <code title=attr-contenteditable><a href=#attr-contenteditable>contenteditable</a></code> attribute</h4>
<p class=XXX>...</p>
- <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>
+ <h4 id=the-title-attribute-0><span class=secno>10.6.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
@@ -57632,7 +57648,7 @@
- <h3 id=print-media><span class=secno>10.8 </span>Print media</h3>
+ <h3 id=print-media><span class=secno>10.7 </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
@@ -57640,7 +57656,7 @@
creating a new view for the print media.</p>
- <h3 id=interaction-with-css><span class=secno>10.9 </span>Interaction with CSS</h3>
+ <h3 id=interaction-with-css><span class=secno>10.8 </span>Interaction with CSS</h3>
<!-- XXX this should be normative, so we'll have to move it out of
this section -->
Modified: source
===================================================================
--- source 2009-02-05 23:33:29 UTC (rev 2762)
+++ source 2009-02-06 01:43:03 UTC (rev 2763)
@@ -61220,25 +61220,8 @@
this section to their target media.</p>
- <h3>Hidden elements</h3>
+ <h3>The CSS user agent style sheet and presentational hints</h3>
- <p>User agents are expected to use the following styles in all
- media.</p>
-
- <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
-
-[hidden], area, audio:not([controls]), base, basefont, command,
-datalist, eventsource, head, input[type=hidden], link,
-menu[type=context], meta, noembed, noframes, param, script, source,
-style, title { display: none; }</pre>
-
- <p>This hides all the elements that do not represent anything
- visible.</p>
-
-
-
- <h3>Simple defaults</h3>
-
<h4>Introduction</h4>
<p>The CSS rules given in these subsections are, unless otherwise
@@ -61292,6 +61275,11 @@
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+[hidden], area, audio:not([controls]), base, basefont, command,
+datalist, eventsource, head, input[type=hidden], link,
+menu[type=context], meta, noembed, noframes, param, script, source,
+style, title { display: none; }
+
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,
@@ -61344,7 +61332,11 @@
expected to render parentheses around the text of <code>rt</code>
elements in the absence of <code>rp</code> elements.</p>
+ <p>The <code>br</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>
+
<h4>Margins and padding</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
@@ -62095,7 +62087,7 @@
table[frames=box],
table[frames=border] { border-style: solid solid solid solid; }
-`table[frames=void] > tr > td, table[frames=void] > tr > th,
+table[frames=void] > tr > td, table[frames=void] > tr > th,
table[frames=above] > tr > td, table[frames=above] > tr > th,
table[frames=below] > > tr > td, table[frames=below] > tr > th,
table[frames=hsides] > tr > td, table[frames=hsides] > tr > th,
@@ -62177,10 +62169,6 @@
to use the ordinal value of the <code>li</code> element to render
the counter in the list item marker.</p>
- <p>The <code>br</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>
-
<p>The <code>table</code> element's <code
title="attr-table-border">border</code> attribute <span title="maps
to the pixel length property">maps to the pixel length
@@ -62216,7 +62204,67 @@
}</pre>
+ <h4>The <code>hr</code> element</h4>
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
+hr { color: gray; border-style: inset; border-width: 1px; }</pre>
+
+ <p>The following rules are also expected to apply, as
+ <span>presentational hints</span>:</p>
+
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
+hr[align=left] { margin-left: 0; margin-right: auto; }
+hr[align=right] { margin-left: auto; margin-right: 0; }
+hr[align=center] { margin-left: auto; margin-right: auto; }
+hr[color], hr[noshade] { border-style: solid; }</pre>
+
+ <p>If an <code>hr</code> element has either a <code
+ title="attr-hr-color">color</code> attribute or a <code
+ title="attr-hr-noshade">noshade</code> attribute, and furthermore
+ also has a <code title="attr-hr-size">size</code> attribute, and
+ parsing that attribute's value using the <span>rules for parsing
+ non-negative integers</span> doesn't generate an error, then the
+ user agent is expected to use the parsed value divided by two as a
+ pixel length for <span>presentational hints</span> for the properties
+ 'border-top-width', 'border-right-width', 'border-bottom-width', and
+ 'border-left-width' on the element.</p>
+
+ <p>Otherwise, if an <code>hr</code> element has neither a <code
+ title="attr-hr-color">color</code> attribute nor a <code
+ title="attr-hr-noshade">noshade</code> attribute, but does have a
+ <code title="attr-hr-size">size</code> attribute, and parsing that
+ attribute's value using the <span>rules for parsing non-negative
+ integers</span> doesn't generate an error, then: if the parsed value
+ is one, then the user agent is expected to use the attribute as a
+ <span title="presentational hints">presentational hint</span>
+ setting the element's 'border-bottom-width' to 0; otherwise, if the
+ parsed value is greater than one, then the user agent is expected to
+ use the parsed value minus two as a pixel length for
+ <span>presentational hints</span> for the 'height' property on the
+ element.</p>
+
+ <p>The <code title="attr-hr-width">width</code> attribute on an
+ <code>hr</code> element <span>maps to the dimension property</span>
+ 'width' on the element.</p>
+
+ <p>When an <code>hr</code> element has a <code
+ title="attr-hr-color">color</code> attribute, its value is expected
+ to be parsed using the <span>rules for parsing a legacy color
+ value</span>, and the user agent is expected to treat the attribute
+ as a <span title="presentational hints">presentational hint</span>
+ setting the element's 'color' property to the resulting color.</p>
+
+
+
+ <h4>The <code>fieldset</code> element</h4>
+
+ <p class="XXX">...</p>
+ <!-- XXX <legend align="left|right|center|bottom|top"> -->
+
+
+
<h3>Replaced elements</h3>
<h4>Embedded content</h4>
@@ -62455,8 +62503,8 @@
<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'
+ title=""><i title="">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>
@@ -62471,25 +62519,25 @@
<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>
+bb:empty { binding: <i title="">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>
+ <p>When the <i title="">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>
+button { binding: <i title="">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>
+ <p>When the <i title="">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>
@@ -62505,12 +62553,13 @@
<h4>The <code>details</code> element</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
-details { binding: <i>details</i>; }</pre>
+details { binding: <i title="">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
+ <p>When the <i title="">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
@@ -62531,38 +62580,11 @@
<!--
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
More information about the Commit-Watchers
mailing list