Permalink
Browse files

[] (0) Filling in the rendering section: Fill in more sections -- br,…

… tool bars, ruby...

git-svn-id: http://svn.whatwg.org/webapps@2760 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
1 parent 169d94f commit 36f272afe70429a99dfe6b160a4a3f2f8db85900 @Hixie Hixie committed Feb 5, 2009
Showing with 187 additions and 178 deletions.
  1. +113 −111 index
  2. +74 −67 source
View
224 index
@@ -632,7 +632,7 @@
<li><a href=#menus-intro><span class=secno>4.11.5.1 </span>Introduction</a></li>
<li><a href=#building-menus-and-tool-bars><span class=secno>4.11.5.2 </span>Building menus and tool bars</a></li>
<li><a href=#context-menus><span class=secno>4.11.5.3 </span>Context menus</a></li>
- <li><a href=#toolbars><span class=secno>4.11.5.4 </span>Toolbars</a></ol></li>
+ <li><a href=#tool-bars><span class=secno>4.11.5.4 </span>Tool bars</a></ol></li>
<li><a href=#commands><span class=secno>4.11.6 </span>Commands</a>
<ol>
<li><a href=#using-the-a-element-to-define-a-command><span class=secno>4.11.6.1 </span>Using the <code>a</code> element to define a command</a></li>
@@ -1043,32 +1043,28 @@
<ol>
<li><a href=#embedded-content-1><span class=secno>10.4.1 </span>Embedded content</a></li>
<li><a href=#frames><span class=secno>10.4.2 </span>Frames</a></li>
- <li><a href=#ruby-annotations><span class=secno>10.4.3 </span>Ruby annotations</a></li>
- <li><a href=#toolbars-0><span class=secno>10.4.4 </span>Toolbars</a>
- <ol>
- <li><a href="#the-'icon'-property"><span class=secno>10.4.4.1 </span>The 'icon' property</a></ol></li>
- <li><a href=#the-bb-element-0><span class=secno>10.4.5 </span>The <code>bb</code> element</a></li>
- <li><a href=#the-br-element-0><span class=secno>10.4.6 </span>The <code>br</code> element</a></li>
- <li><a href=#the-button-element-0><span class=secno>10.4.7 </span>The <code>button</code> element</a></li>
- <li><a href=#the-datagrid-element><span class=secno>10.4.8 </span>The <code>datagrid</code> element</a></li>
- <li><a href=#the-details-element-0><span class=secno>10.4.9 </span>The <code>details</code> element</a></li>
- <li><a href=#the-fieldset-element-0><span class=secno>10.4.10 </span>The <code>fieldset</code> element</a></li>
- <li><a href=#the-figure-element-0><span class=secno>10.4.11 </span>The <code>figure</code> element</a></li>
- <li><a href=#the-hr-element-0><span class=secno>10.4.12 </span>The <code>hr</code> element</a></li>
- <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>10.4.13 </span>The <code>input</code> element as a text entry widget</a></li>
- <li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>10.4.14 </span>The <code>input</code> element as domain-specific widgets</a></li>
- <li><a href=#the-input-element-as-a-range-control><span class=secno>10.4.15 </span>The <code>input</code> element as a range control</a></li>
- <li><a href=#the-input-element-as-a-color-well><span class=secno>10.4.16 </span>The <code>input</code> element as a color well</a></li>
- <li><a href=#the-input-element-as-a-check-box-widget><span class=secno>10.4.17 </span>The <code>input</code> element as a check box widget</a></li>
- <li><a href=#the-input-element-as-a-radio-button-widget><span class=secno>10.4.18 </span>The <code>input</code> element as a radio button widget</a></li>
- <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>10.4.19 </span>The <code>input</code> element as a file upload control</a></li>
- <li><a href=#the-input-element-as-a-button><span class=secno>10.4.20 </span>The <code>input</code> element as a button</a></li>
- <li><a href=#the-marquee-element><span class=secno>10.4.21 </span>The <code>marquee</code> element</a></li>
- <li><a href=#the-meter-element-0><span class=secno>10.4.22 </span>The <code>meter</code> element</a></li>
- <li><a href=#the-progress-element-0><span class=secno>10.4.23 </span>The <code>progress</code> element</a></li>
- <li><a href=#the-select-element-0><span class=secno>10.4.24 </span>The <code>select</code> element</a></li>
- <li><a href=#the-textarea-element-0><span class=secno>10.4.25 </span>The <code>textarea</code> element</a></li>
- <li><a href=#the-title-attribute-0><span class=secno>10.4.26 </span>The <code title=attr-title>title</code> attribute</a></ol></li>
+ <li><a href=#tool-bars-0><span class=secno>10.4.3 </span>Tool bars</a></li>
+ <li><a href=#the-bb-element-0><span class=secno>10.4.4 </span>The <code>bb</code> element</a></li>
+ <li><a href=#the-button-element-0><span class=secno>10.4.5 </span>The <code>button</code> element</a></li>
+ <li><a href=#the-datagrid-element><span class=secno>10.4.6 </span>The <code>datagrid</code> element</a></li>
+ <li><a href=#the-details-element-0><span class=secno>10.4.7 </span>The <code>details</code> element</a></li>
+ <li><a href=#the-fieldset-element-0><span class=secno>10.4.8 </span>The <code>fieldset</code> element</a></li>
+ <li><a href=#the-figure-element-0><span class=secno>10.4.9 </span>The <code>figure</code> element</a></li>
+ <li><a href=#the-hr-element-0><span class=secno>10.4.10 </span>The <code>hr</code> element</a></li>
+ <li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>10.4.11 </span>The <code>input</code> element as a text entry widget</a></li>
+ <li><a href=#the-input-element-as-domain-specific-widgets><span class=secno>10.4.12 </span>The <code>input</code> element as domain-specific widgets</a></li>
+ <li><a href=#the-input-element-as-a-range-control><span class=secno>10.4.13 </span>The <code>input</code> element as a range control</a></li>
+ <li><a href=#the-input-element-as-a-color-well><span class=secno>10.4.14 </span>The <code>input</code> element as a color well</a></li>
+ <li><a href=#the-input-element-as-a-check-box-widget><span class=secno>10.4.15 </span>The <code>input</code> element as a check box widget</a></li>
+ <li><a href=#the-input-element-as-a-radio-button-widget><span class=secno>10.4.16 </span>The <code>input</code> element as a radio button widget</a></li>
+ <li><a href=#the-input-element-as-a-file-upload-control><span class=secno>10.4.17 </span>The <code>input</code> element as a file upload control</a></li>
+ <li><a href=#the-input-element-as-a-button><span class=secno>10.4.18 </span>The <code>input</code> element as a button</a></li>
+ <li><a href=#the-marquee-element><span class=secno>10.4.19 </span>The <code>marquee</code> element</a></li>
+ <li><a href=#the-meter-element-0><span class=secno>10.4.20 </span>The <code>meter</code> element</a></li>
+ <li><a href=#the-progress-element-0><span class=secno>10.4.21 </span>The <code>progress</code> element</a></li>
+ <li><a href=#the-select-element-0><span class=secno>10.4.22 </span>The <code>select</code> element</a></li>
+ <li><a href=#the-textarea-element-0><span class=secno>10.4.23 </span>The <code>textarea</code> element</a></li>
+ <li><a href=#the-title-attribute-0><span class=secno>10.4.24 </span>The <code title=attr-title>title</code> attribute</a></ol></li>
<li><a href=#interactive-media><span class=secno>10.5 </span>Interactive media</a>
<ol>
<li><a href=#hit-testing><span class=secno>10.5.1 </span>Hit testing</a></li>
@@ -12489,7 +12485,7 @@ first matching case):&lt;/p&gt;
not present.</p>
<div class=example>
- <p>If a site uses a consistent navigation toolbar on every page,
+ <p>If a site uses a consistent navigation tool bar on every page,
then the link that would normally link to the page itself could be
marked up using an <code><a href=#the-a-element>a</a></code> element:</p>
<pre>&lt;nav&gt;
@@ -30657,22 +30653,6 @@ interface <dfn id=htmloptionelement>HTMLOptionElement</dfn> : <a href=#htmleleme
<p>The <dfn id=dom-details-open title=dom-details-open><code>open</code></dfn>
attribute must <a href=#reflect>reflect</a> the <code title=attr-details-open><a href=#attr-details-open>open</a></code> content attribute.</p>
- <p class=XXX>Rendering will be described in the Rendering
- section in due course. Basically CSS :open and :closed match the
- element, it's a block-level element by default, and when it matches
- :closed it renders as if it had an XBL binding attached to it whose
- template was just <code>&lt;template&gt;&#9654;&lt;content
- includes="legend:first-child"&gt;Details&lt;/content&gt;&lt;/template&gt;</code>,
- and when it's :open it acts as if it had an XBL binding attached to
- it whose template was just <code>&lt;template&gt;&#9660;&lt;content
- includes="legend:first-child"&gt;Details&lt;/content&gt;&lt;content/&gt;&lt;/template&gt;</code>
- or some such.</p>
-
-<!--
-Example ideas:
-http://mail.gnome.org/archives/usability/2006-June/msg00015.html
--->
-
<div class=bad>
@@ -32941,17 +32921,16 @@ explain that only direct children of the <menu> matter
attribute must <a href=#reflect>reflect</a> the <code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code> content attribute.</p>
- <h5 id=toolbars><span class=secno>4.11.5.4 </span>Toolbars</h5>
-
- <p><dfn id=toolbars-1>Toolbars</dfn> are a kind of menu that is always visible.</p>
+ <h5 id=tool-bars><span class=secno>4.11.5.4 </span><dfn>Tool bars</dfn></h5>
- <p>When a <code><a href=#menus>menu</a></code> element has a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute with the value <code title="">toolbar</code>, then the user agent must <a href=#building-menus-and-tool-bars title="building menus and tool bars">build</a> the menu for that
- <code><a href=#menus>menu</a></code> element and <span title=render-toolbar>render</span><!-- XXX xref --> it in the
- document in a position appropriate for that <code><a href=#menus>menu</a></code>
- element.</p>
+ <p>When a <code><a href=#menus>menu</a></code> element has a <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute in the <a href=#tool-bar-state title="tool bar state">tool bar</a> state, then the user agent
+ must <a href=#building-menus-and-tool-bars title="building menus and tool bars">build</a> the
+ menu for that <code><a href=#menus>menu</a></code> element, and use the result in the
+ rendering.</p>
<p>The user agent must reflect changes made to the
- <code><a href=#menus>menu</a></code>'s DOM immediately in the UI.</p>
+ <code><a href=#menus>menu</a></code>'s DOM, by immediately <a href=#building-menus-and-tool-bars title="building menus
+ and tool bars">rebuilding</a> the menu.</p>
@@ -56042,7 +56021,7 @@ style, title { display: none; }</pre>
address, article, aside, blockquote, body, center, dd, dialog, dir,
div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr,
html, layer, legend, listing, menu, multicol, nav, ol, p, plaintext,
-pre, section, ul, xmp { display: block; }
+pre, rp, section, ul, xmp { display: block; }
table { display: table; }
caption { display: table-caption; }
@@ -56054,7 +56033,11 @@ tfoot { display: table-footer-group; }
tr { display: table-row; }
td, th { display: table-cell; }
-li { display: list-item; }</pre>
+li { display: list-item; }
+
+ruby { display: ruby; }
+rt { display: ruby-text; }
+</pre>
<!-- del, ins, and map are inline. -->
@@ -56074,6 +56057,15 @@ li { display: list-item; }</pre>
<i>special knowledge</i> regarding cells spanning rows and
columns.</p>
+ <p>For the purposes of the CSS ruby model, runs of descendants of
+ <code><a href=#the-ruby-element>ruby</a></code> elements that are not <code><a href=#the-rt-element>rt</a></code> or
+ <code><a href=#the-rp-element>rp</a></code> elements are expected to be wrapped in anonymous
+ boxes whose 'display' property has the value 'ruby-base'.</p>
+
+ <p>User agents that do not support correct ruby rendering are
+ expected to render parentheses around the text of <code><a href=#the-rt-element>rt</a></code>
+ elements in the absence of <code><a href=#the-rp-element>rp</a></code> elements.</p>
+
<h4 id=margins-and-padding><span class=secno>10.3.3 </span>Margins and padding</h4>
@@ -56686,6 +56678,10 @@ bdo[dir=ltr], bdo[dir=rtl] { unicode-bidi: bidi-override; }</pre>
td[nowrap], th[nowrap] { white-space: nowrap; }
pre[wrap] { white-space: pre-wrap; }
+br[clear=left] { clear: left; }
+br[clear=right] { clear: right; }
+br[clear=all], br[clear=both] { clear: both; }
+
ol[type=1], li[type=1] { list-style-type: decimal; }
ol[type=a], li[type=a] { list-style-type: lower-alpha; }
ol[type=A], li[type=A] { list-style-type: upper-alpha; }
@@ -56793,6 +56789,10 @@ table[rules=all] &gt; tfoot &gt; tr &gt; td, table[rules=all] &gt; tfoot &gt; tr
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',
@@ -57288,84 +57288,86 @@ img[align=right] { margin-left: 3px; }</pre>
- <h4 id=ruby-annotations><span class=secno>10.4.3 </span>Ruby annotations</h4>
-
- <p class=XXX>...</p>
-
- <!-- XXX ruby, rt, rp
- > * note on rt rendering
- >
- > Since there are a number of documents with ruby but without rp, when you
- > write the rendering section, please include an advice for user agents
- > that do not support "correct" ruby rendering to render something like
- > "(" and ")" before and after ruby text (using, e.g., CSS ::before and
- > ::after) even when there are no rp elements. Otherwise, reading Web
- > pages without rp is very annoying.
- -->
+ <h4 id=tool-bars-0><span class=secno>10.4.3 </span>Tool bars</h4>
+ <p>When a <code><a href=#menus>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#tool-bar-state title="tool bar state">tool bar</a> state, the element is
+ expected to be treated as a replaced element with a height about two
+ lines high and a width derived from the contents of the element.</p>
+ <p>The element is expected to have, by default, the appearance of a
+ tool bar on the user agent's platform. It is expected to contain the
+ menu that is <a href=#building-menus-and-tool-bars title="building menus and tool bars">built</a>
+ from the element.</p>
- <h4 id=toolbars-0><span class=secno>10.4.4 </span>Toolbars</h4>
+ <p class="example XXX">...example with screenshot...</p>
- <h5 id="the-'icon'-property"><span class=secno>10.4.4.1 </span>The 'icon' property</h5>
- <p>UAs should use the command's Icon as the default generic icon
- provided by the user agent when the 'icon' property computes to
- 'auto' on an element that either defines a command or refers to one
- using the <code title=command-attribute>command</code> attribute,
- but when the property computes to an actual image, it should use
- that image instead.</p>
+ <h4 id=the-bb-element-0><span class=secno>10.4.4 </span>The <code><a href=#the-bb-element>bb</a></code> element</h4>
+ <p>When the <code><a href=#the-bb-element>bb</a></code> element <a href=#represents>represents</a> a
+ browser button, it is expected to render as a replaced element
+ consisting of a regular one-line-high button, with a width based on
+ the text in the button, which is itself based on its <code title=attr-bb-type><a href=#attr-bb-type>type</a></code> attribute in a user-agent-defined
+ (and probably locale-specific) fashion. When it does not, it is
+ expected to render as per the regular CSS rules.</p>
- <h4 id=the-bb-element-0><span class=secno>10.4.5 </span>The <code><a href=#the-bb-element>bb</a></code> element</h4>
- <p class=XXX>...</p>
+ <h4 id=the-button-element-0><span class=secno>10.4.5 </span>The <code><a href=#the-button-element>button</a></code> element</h4>
-
- <h4 id=the-br-element-0><span class=secno>10.4.6 </span>The <code><a href=#the-br-element>br</a></code> element</h4>
-
- <p class=XXX>...</p>
- <!-- clear="left|right|all|both" -->
+ <p>The <code><a href=#the-button-element>button</a></code> element is expected to render as a
+ replaced element whose contents are styled as per the regular CSS
+ rules. Its intrinisic dimensions are the shrink-wrap dimensions of
+ its contents.</p>
- <h4 id=the-button-element-0><span class=secno>10.4.7 </span>The <code><a href=#the-button-element>button</a></code> element</h4>
-
- <p class=XXX>...</p>
-
+ <h4 id=the-datagrid-element><span class=secno>10.4.6 </span>The <code><a href=#datagrid>datagrid</a></code> element</h4>
+ <p class=XXX>This section will probably include details on how to
+ render DATAGRID (including <span id=datagridPseudos>its
+ pseudo-elements</span>), drag-and-drop, etc, in a visual medium, in
+ concert with CSS. Implementation experience is desired before this
+ section is filled in.</p>
- <h4 id=the-datagrid-element><span class=secno>10.4.8 </span>The <code><a href=#datagrid>datagrid</a></code> element</h4>
- <p class=XXX>This section will probably include details on
- how to render DATAGRID (including <span id=datagridPseudos>its
- pseudo-elements</span>), drag-and-drop, etc, in a visual medium, in
- concert with CSS.</p>
+ <h4 id=the-details-element-0><span class=secno>10.4.7 </span>The <code><a href=#the-details-element>details</a></code> element</h4>
+ <p class=XXX>The <code><a href=#the-details-element>details</a></code> element, ...</p>
- <h4 id=the-details-element-0><span class=secno>10.4.9 </span>The <code><a href=#the-details-element>details</a></code> element</h4>
+ <p class=XXX>Basically CSS :open and :closed match the
+ element, it's a block-level element by default, and when it matches
+ :closed it renders as if it had an XBL binding attached to it whose
+ template was just <code>&lt;template&gt;&#9654;&lt;content
+ includes="legend:first-child"&gt;Details&lt;/content&gt;&lt;/template&gt;</code>,
+ and when it's :open it acts as if it had an XBL binding attached to
+ it whose template was just <code>&lt;template&gt;&#9660;&lt;content
+ includes="legend:first-child"&gt;Details&lt;/content&gt;&lt;content/&gt;&lt;/template&gt;</code>
+ or some such.</p>
- <p class=XXX>...</p>
+<!--
+Example ideas:
+http://mail.gnome.org/archives/usability/2006-June/msg00015.html
+-->
- <h4 id=the-fieldset-element-0><span class=secno>10.4.10 </span>The <code><a href=#the-fieldset-element>fieldset</a></code> element</h4>
+ <h4 id=the-fieldset-element-0><span class=secno>10.4.8 </span>The <code><a href=#the-fieldset-element>fieldset</a></code> element</h4>
<p class=XXX>...</p>
<!-- XXX <legend align="left|right|center|bottom|top"> -->
- <h4 id=the-figure-element-0><span class=secno>10.4.11 </span>The <code><a href=#the-figure-element>figure</a></code> element</h4>
+ <h4 id=the-figure-element-0><span class=secno>10.4.9 </span>The <code><a href=#the-figure-element>figure</a></code> element</h4>
<p class=XXX>...</p>
- <h4 id=the-hr-element-0><span class=secno>10.4.12 </span>The <code><a href=#the-hr-element>hr</a></code> element</h4>
+ <h4 id=the-hr-element-0><span class=secno>10.4.10 </span>The <code><a href=#the-hr-element>hr</a></code> element</h4>
<p class=XXX>...</p>
<!-- align=left|right|center (as auto margins), width=(int=>width:px; %->width:%)
@@ -57379,93 +57381,93 @@ img[align=right] { margin-left: 3px; }</pre>
- <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>10.4.13 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
+ <h4 id=the-input-element-as-a-text-entry-widget><span class=secno>10.4.11 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a>, <a href=#text-state-and-search-state title=attr-input-type-search>Search</a>, <a href=#url-state title=attr-input-type-url>URL</a>, <a href=#e-mail-state title=attr-input-type-email>E-mail</a>, or <a href=#password-state title=attr-input-type-password>Password</a> state, ...</p>
<!-- datalist presentation -->
<!-- size: http://mxr.mozilla.org/mozilla-central/ident?i=CalcIntrinsicSize -->
- <h4 id=the-input-element-as-domain-specific-widgets><span class=secno>10.4.14 </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.12 </span>The <code><a href=#the-input-element>input</a></code> element as domain-specific widgets</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#date-and-time-state title=attr-input-type-datetime>Date and Time</a>, <a href=#date-state title=attr-input-type-date>Date</a>, <a href=#month-state title=attr-input-type-month>Month</a>, <a href=#week-state title=attr-input-type-week>Week</a>, <a href=#time-state title=attr-input-type-time>Time</a>, <a href=#local-date-and-time-state title=attr-input-type-datetime-local>Local Date and Time</a> or
<a href=#number-state title=attr-input-type-number>Number</a> state...</p>
<!-- datalist presentation -->
- <h4 id=the-input-element-as-a-range-control><span class=secno>10.4.15 </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.13 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#range-state title=attr-input-type-range>Range</a> state, ...</p>
<!-- datalist presentation -->
- <h4 id=the-input-element-as-a-color-well><span class=secno>10.4.16 </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.14 </span>The <code><a href=#the-input-element>input</a></code> element as a color well</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#color-state title=attr-input-type-color>Color</a> state, ...</p>
<!-- datalist presentation -->
- <h4 id=the-input-element-as-a-check-box-widget><span class=secno>10.4.17 </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.15 </span>The <code><a href=#the-input-element>input</a></code> element as a check box widget</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#checkbox-state title=attr-input-type-checkbox>Checkbox</a> state, ...</p>
- <h4 id=the-input-element-as-a-radio-button-widget><span class=secno>10.4.18 </span>The <code><a href=#the-input-element>input</a></code> element as a radio button widget</h4>
+ <h4 id=the-input-element-as-a-radio-button-widget><span class=secno>10.4.16 </span>The <code><a href=#the-input-element>input</a></code> element as a radio button widget</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#radio-button-state title=attr-input-type-radio>Radio Button</a> state, ...</p>
- <h4 id=the-input-element-as-a-file-upload-control><span class=secno>10.4.19 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>
+ <h4 id=the-input-element-as-a-file-upload-control><span class=secno>10.4.17 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#file-upload-state title=attr-input-type-file>File Upload</a> state, ...</p>
- <h4 id=the-input-element-as-a-button><span class=secno>10.4.20 </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.18 </span>The <code><a href=#the-input-element>input</a></code> element as a button</h4>
<p class=XXX>When an <code><a href=#the-input-element>input</a></code> element's <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in the <a href=#submit-button-state title=attr-input-type-submit>Submit Button</a> <a href=#reset-button-state title=attr-input-type-reset>Reset Button</a>, or <a href=#button-state title=attr-input-type-button>Button</a> state, ...</p>
- <h4 id=the-marquee-element><span class=secno>10.4.21 </span>The <code><a href=#the-marquee-element-0>marquee</a></code> element</h4>
+ <h4 id=the-marquee-element><span class=secno>10.4.19 </span>The <code><a href=#the-marquee-element-0>marquee</a></code> element</h4>
<p class=XXX>...</p>
<!-- XXX attributes: height/width; direction is case insensitive; bgcolor; hspace/vspace -->
- <h4 id=the-meter-element-0><span class=secno>10.4.22 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
+ <h4 id=the-meter-element-0><span class=secno>10.4.20 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
<p class=XXX>...</p>
- <h4 id=the-progress-element-0><span class=secno>10.4.23 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>
+ <h4 id=the-progress-element-0><span class=secno>10.4.21 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>
<p class=XXX>...</p>
- <h4 id=the-select-element-0><span class=secno>10.4.24 </span>The <code><a href=#the-select-element>select</a></code> element</h4>
+ <h4 id=the-select-element-0><span class=secno>10.4.22 </span>The <code><a href=#the-select-element>select</a></code> element</h4>
<p class=XXX>...</p>
<!-- multiple, size; optgroup -->
- <h4 id=the-textarea-element-0><span class=secno>10.4.25 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>
+ <h4 id=the-textarea-element-0><span class=secno>10.4.23 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>
<p class=XXX>...</p>
- <h4 id=the-title-attribute-0><span class=secno>10.4.26 </span>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute</h4>
+ <h4 id=the-title-attribute-0><span class=secno>10.4.24 </span>The <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute</h4>
<p>Given an element (e.g. the element designated by the mouse
cursor), if the element, or one of its ancestors, has a <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute, and the nearest such
View
141 source
@@ -13228,7 +13228,7 @@ first matching case):&lt;/p&gt;
not present.</p>
<div class="example">
- <p>If a site uses a consistent navigation toolbar on every page,
+ <p>If a site uses a consistent navigation tool bar on every page,
then the link that would normally link to the page itself could be
marked up using an <code>a</code> element:</p>
<pre>&lt;nav>
@@ -34541,22 +34541,6 @@ interface <dfn>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
attribute must <span>reflect</span> the <code
title="attr-details-open">open</code> content attribute.</p>
- <p class="XXX">Rendering will be described in the Rendering
- section in due course. Basically CSS :open and :closed match the
- element, it's a block-level element by default, and when it matches
- :closed it renders as if it had an XBL binding attached to it whose
- template was just <code>&lt;template>&#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
--->
-
<div class="bad">
@@ -37292,21 +37276,18 @@ explain that only direct children of the <menu> matter
title="attr-contextmenu">contextmenu</code> content attribute.</p>
- <h5>Toolbars</h5>
-
- <p><dfn>Toolbars</dfn> are a kind of menu that is always visible.</p>
+ <h5><dfn>Tool bars</dfn></h5>
<p>When a <code>menu</code> element has a <code
- title="attr-menu-type">type</code> attribute with the value <code
- title="">toolbar</code>, then the user agent must <span
- title="building menus and tool bars">build</span> the menu for that
- <code>menu</code> element and <span
- title="render-toolbar">render</span><!-- XXX xref --> it in the
- document in a position appropriate for that <code>menu</code>
- element.</p>
+ title="attr-menu-type">type</code> attribute in the <span
+ title="tool bar state">tool bar</span> state, then the user agent
+ must <span title="building menus and tool bars">build</span> the
+ menu for that <code>menu</code> element, and use the result in the
+ rendering.</p>
<p>The user agent must reflect changes made to the
- <code>menu</code>'s DOM immediately in the UI.</p>
+ <code>menu</code>'s DOM, by immediately <span title="building menus
+ and tool bars">rebuilding</span> the menu.</p>
@@ -61314,7 +61295,7 @@ style, title { display: none; }</pre>
address, article, aside, blockquote, body, center, dd, dialog, dir,
div, dl, dt, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr,
html, layer, legend, listing, menu, multicol, nav, ol, p, plaintext,
-pre, section, ul, xmp { display: block; }
+pre, rp, section, ul, xmp { display: block; }
table { display: table; }
caption { display: table-caption; }
@@ -61326,7 +61307,11 @@ tfoot { display: table-footer-group; }
tr { display: table-row; }
td, th { display: table-cell; }
-li { display: list-item; }</pre>
+li { display: list-item; }
+
+ruby { display: ruby; }
+rt { display: ruby-text; }
+</pre>
<!-- del, ins, and map are inline. -->
@@ -61350,6 +61335,15 @@ li { display: list-item; }</pre>
<i>special knowledge</i> regarding cells spanning rows and
columns.</p>
+ <p>For the purposes of the CSS ruby model, runs of descendants of
+ <code>ruby</code> elements that are not <code>rt</code> or
+ <code>rp</code> elements are expected to be wrapped in anonymous
+ boxes whose 'display' property has the value 'ruby-base'.</p>
+
+ <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>
@@ -62069,6 +62063,10 @@ bdo[dir=ltr], bdo[dir=rtl] { unicode-bidi: bidi-override; }</pre>
td[nowrap], th[nowrap] { white-space: nowrap; }
pre[wrap] { white-space: pre-wrap; }
+br[clear=left] { clear: left; }
+br[clear=right] { clear: right; }
+br[clear=all], br[clear=both] { clear: both; }
+
ol[type=1], li[type=1] { list-style-type: decimal; }
ol[type=a], li[type=a] { list-style-type: lower-alpha; }
ol[type=A], li[type=A] { list-style-type: upper-alpha; }
@@ -62176,6 +62174,10 @@ table[rules=all] > tfoot > tr > td, table[rules=all] > tfoot > tr > th {
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
@@ -62756,67 +62758,72 @@ img[align=right] { margin-left: 3px; }</pre>
- <h4>Ruby annotations</h4>
-
- <p class="XXX">...</p>
-
- <!-- XXX ruby, rt, rp
- > * note on rt rendering
- >
- > Since there are a number of documents with ruby but without rp, when you
- > write the rendering section, please include an advice for user agents
- > that do not support "correct" ruby rendering to render something like
- > "(" and ")" before and after ruby text (using, e.g., CSS ::before and
- > ::after) even when there are no rp elements. Otherwise, reading Web
- > pages without rp is very annoying.
- -->
-
-
+ <h4>Tool bars</h4>
- <h4>Toolbars</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>
- <h5>The 'icon' property</h5>
+ <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>UAs should use the command's Icon as the default generic icon
- provided by the user agent when the 'icon' property computes to
- 'auto' on an element that either defines a command or refers to one
- using the <code title="command-attribute">command</code> attribute,
- but when the property computes to an actual image, it should use
- that image instead.</p>
+ <p class="example XXX">...example with screenshot...</p>
<h4>The <code>bb</code> element</h4>
- <p class="XXX">...</p>
-
-
-
- <h4>The <code>br</code> element</h4>
-
- <p class="XXX">...</p>
- <!-- clear="left|right|all|both" -->
+ <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 class="XXX">...</p>
+ <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
+ <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.</p>
+ concert with CSS. Implementation experience is desired before this
+ section is filled in.</p>
<h4>The <code>details</code> element</h4>
- <p class="XXX">...</p>
+ <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
+-->

0 comments on commit 36f272a

Please sign in to comment.