[html5] r2768 - [] (0) Filling in the rendering section: <select>, <progress>, <meter>; minor ed [...]
whatwg at whatwg.org
whatwg at whatwg.org
Mon Feb 9 16:06:08 PST 2009
Author: ianh
Date: 2009-02-09 16:06:07 -0800 (Mon, 09 Feb 2009)
New Revision: 2768
Modified:
index
source
Log:
[] (0) Filling in the rendering section: <select>, <progress>, <meter>; minor editorial fixes here and there.
Modified: index
===================================================================
--- index 2009-02-07 00:21:48 UTC (rev 2767)
+++ index 2009-02-10 00:06:07 UTC (rev 2768)
@@ -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 — 7 February 2009</h2>
+ <h2 class="no-num no-toc" id=draft-recommendation-—-date:-01-jan-1901>Draft Recommendation — 9 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>
@@ -19828,6 +19828,7 @@
<h5 id=the-2d-context><span class=secno>4.8.11.1 </span>The 2D context</h5>
+ <!-- v2: we're on v3. suggestions for next version are marked v4. -->
<p>When the <code title=dom-canvas-getContext><a href=#dom-canvas-getcontext>getContext()</a></code>
method of a <code><a href=#the-canvas-element>canvas</a></code> element is invoked with <dfn id=canvas-context-2d title=canvas-context-2d><code>2d</code></dfn> as the argument, a
@@ -19865,7 +19866,12 @@
// compositing
attribute float <a href=#dom-context-2d-globalalpha title=dom-context-2d-globalAlpha>globalAlpha</a>; // (default 1.0)
attribute DOMString <a href=#dom-context-2d-globalcompositeoperation title=dom-context-2d-globalCompositeOperation>globalCompositeOperation</a>; // (default source-over)
-
+<!--
+ // XXXv4 we've also received requests for:
+ - turning off antialiasing to avoid seams when patterns are painted next to each other
+ - might be better to overdraw?
+ - might be better to just draw at a higher res then downsample, like for 3d?
+-->
// colors and styles
attribute any <a href=#dom-context-2d-strokestyle title=dom-context-2d-strokeStyle>strokeStyle</a>; // (default black)
attribute any <a href=#dom-context-2d-fillstyle title=dom-context-2d-fillStyle>fillStyle</a>; // (default black)
@@ -35105,8 +35111,8 @@
<ol><li><p>Run the oldest task on one of the <a href=#event-loop>event loop</a>'s
<a href=#task-queue title="task queue">task queues</a>, ignoring tasks whose
- associated <code>Document</code>s are not <a href=#active-document title="active
- document">active</a>. The user agent may pick any <a href=#task-queue>task
+ associated <code>Document</code>s are not <a href=#fully-active>fully
+ active</a>. The user agent may pick any <a href=#task-queue>task
queue</a>.</li>
<li><p>Remove that task from its <a href=#task-queue>task queue</a>.</li>
@@ -55989,9 +55995,6 @@
are expected to be flipped around on elements whose 'direction'
property is 'rtl'.</p>
- <p class=XXX>Please send feedback if you can accurately describe
- rules required by legacy content.</p>
-
<hr><p>When the text below says that an attribute <var title="">attribute</var> on an element <var title="">element</var>
<dfn id=maps-to-the-pixel-length-property>maps to the pixel length property</dfn> (or properties) <var title="">properties</var>, it means that if <var title="">element</var> has an attribute <var title="">attribute</var> set, and parsing that attribute's value
using the <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a>
@@ -57141,6 +57144,7 @@
<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 title="">bb</i>; }</pre>
<p>When the <i title="">bb</i> binding applies to a <code><a href=#the-bb-element>bb</a></code>
@@ -57154,6 +57158,7 @@
<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 title="">button</i>; }</pre>
<p>When the <i title="">button</i> binding applies to a
@@ -57175,6 +57180,7 @@
<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 title="">details</i>; }</pre>
<p>When the <i title="">details</i> binding applies to a
@@ -57207,6 +57213,7 @@
<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>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+
input { binding: <i title="">input-textfield</i>; }
input[type=password] { binding: <i title="">input-password</i>; }
/* later rules override this for other values of type="" */</pre>
@@ -57251,6 +57258,7 @@
<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>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+
input[type=datetime] { binding: <i title="">input-datetime</i>; }
input[type=date] { binding: <i title="">input-date</i>; }
input[type=month] { binding: <i title="">input-month</i>; }
@@ -57302,6 +57310,7 @@
<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>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+
input[type=range] { binding: <i title="">input-range</i>; }</pre>
<p>When the <i title="">input-range</i> binding applies to an
@@ -57309,12 +57318,12 @@
expected to render as an 'inline-block' box depicting a slider
control.</p>
- <p>When the control is wider than it is tall, the control is
- expected to be a horizontal slider, with the lowest value on the
- right if the 'direction' property on this element has a computed
- value of 'rtl', and on the left otherwise. When the control is
- taller than it is wide, it is expected to be a vertical slider, with
- the lowest value on the top.</p>
+ <p>When the control is wider than it is tall (or square), the
+ control is expected to be a horizontal slider, with the lowest value
+ on the right if the 'direction' property on this element has a
+ computed value of 'rtl', and on the left otherwise. When the control
+ is taller than it is wide, it is expected to be a vertical slider,
+ with the lowest value on the bottom.</p>
<p>Predefined suggested values (provided by the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute) are expected to be
shown as tick marks on the slider, which the slider can snap to.</p>
@@ -57324,6 +57333,7 @@
<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>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+
input[type=color] { binding: <i title="">input-color</i>; }</pre>
<p>When the <i title="">input-color</i> binding applies to an
@@ -57342,6 +57352,7 @@
<h4 id=the-input-element-as-a-check-box-and-radio-button-widgets><span class=secno>10.4.10 </span>The <code><a href=#the-input-element>input</a></code> element as a check box and radio button widgets</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+
input[type=checkbox] { binding: <i title="">input-checkbox</i>; }
input[type=radio] { binding: <i title="">input-radio</i>; }</pre>
@@ -57360,6 +57371,7 @@
<h4 id=the-input-element-as-a-file-upload-control><span class=secno>10.4.11 </span>The <code><a href=#the-input-element>input</a></code> element as a file upload control</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+
input[type=file] { binding: <i title="">input-file</i>; }</pre>
<p>When the <i title="">input-file</i> binding applies to an
@@ -57374,6 +57386,7 @@
<h4 id=the-input-element-as-a-button><span class=secno>10.4.12 </span>The <code><a href=#the-input-element>input</a></code> element as a button</h4>
<pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+
input[type=submit], input[type=reset], input[type=button] {
binding: <i title="">input-button</i>;
}</pre>
@@ -57390,30 +57403,135 @@
<h4 id=the-marquee-element><span class=secno>10.4.13 </span>The <code><a href=#the-marquee-element-0>marquee</a></code> element</h4>
- <p class=XXX>...</p>
+ <p class=XXX>...(Waiting til I've specced the DOM side of this)...</p>
<!-- XXX attributes: height/width; direction is case insensitive; bgcolor; hspace/vspace -->
<h4 id=the-meter-element-0><span class=secno>10.4.14 </span>The <code><a href=#the-meter-element>meter</a></code> element</h4>
- <p class=XXX>...</p>
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+meter {
+ binding: <i title="">meter</i>;
+}</pre>
+ <p>When the <i title="">meter</i> binding applies to a
+ <code><a href=#the-meter-element>meter</a></code> element, the element is expected to render as an
+ 'inline-block' box with a 'height' of '1em' and a 'width' of '5em',
+ a 'vertical-align' of '-0.2em', and with its contents depicting a
+ gauge.</p>
+ <p>When the element is wider than it is tall (or square), the
+ depiction is expected to be of a horizontal gauge, with the minimum
+ value on the right if the 'direction' property on this element has a
+ computed value of 'rtl', and on the left otherwise. When the element
+ is taller than it is wide, it is expected to depict a vertical
+ gauge, with the minimum value on the bottom.</p>
+
+ <p>User agents are expected to use a presentation consistent with
+ platform conventions for gauges, if any.</p>
+
+ <p class=note>Requirements for what must be depicted in the gauge
+ are included in the definition of the <code><a href=#the-meter-element>meter</a></code>
+ element.</p>
+
+
+
<h4 id=the-progress-element-0><span class=secno>10.4.15 </span>The <code><a href=#the-progress-element>progress</a></code> element</h4>
- <p class=XXX>...</p>
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+progress {
+ binding: <i title="">progress</i>;
+}</pre>
+ <p>When the <i title="">progress</i> binding applies to a
+ <code><a href=#the-progress-element>progress</a></code> element, the element is expected to render as
+ an 'inline-block' box with a 'height' of '1em' and a 'width' of
+ '10em', a 'vertical-align' of '-0.2em', and with its contents
+ depicting a horizontal progress bar, with the start on the right and
+ the end on the left if the 'direction' property on this element has
+ a computed value of 'rtl', and with the start on the left and the
+ end on the right otherwise.</p>
+ <p>User agents are expected to use a presentation consistent with
+ platform conventions for progress bars. In particular, user agents
+ are expected to use different presentations for determinate and
+ indeterminate progress bars. User agents are also expected to vary
+ the presentation based on the dimensions of the element.</p>
+
+ <p class=example>For example, on some platforms for showing
+ indeterminate progress there is an asychronous progress indicator
+ with square dimensions, which could be used when the element is
+ square, and an indeterminate progress bar, which could be used when
+ the element is wide.</p>
+
+ <p class=note>Requirements for how to determine if the progress
+ bar is determinate or indeterminate, and what progress a determinate
+ progress bar is to show, are included in the definition of the
+ <code><a href=#the-progress-element>progress</a></code> element.</p>
+
+
+
<h4 id=the-select-element-0><span class=secno>10.4.16 </span>The <code><a href=#the-select-element>select</a></code> element</h4>
- <p class=XXX>...</p>
- <!-- multiple, size; optgroup -->
+ <pre class=css>@namespace url(http://www.w3.org/1999/xhtml);
+select {
+ binding: <i title="">select</i>;
+}</pre>
+ <p>When the <i title="">select</i> binding applies to a
+ <code><a href=#the-select-element>select</a></code> element whose <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is present,
+ the element is expected to render as a multi-select list box.</p>
+ <p>When the <i title="">select</i> binding applies to a
+ <code><a href=#the-select-element>select</a></code> element whose <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is absent,
+ and the element's <code title=attr-select-size><a href=#attr-select-size>size</a></code>
+ attribute <a href=#rules-for-parsing-non-negative-integers title="rules for parsing non-negative
+ integers">specifies</a> a value greater than 1, the element is
+ expected to render as a single-select list box.</p>
+
+ <p>When the element renders as a list box, it is expected to render
+ as an 'inline-block' box whose 'height' is the height necessary to
+ contain as many rows for items as <a href=#rules-for-parsing-non-negative-integers title="rules for parsing
+ non-negative integers">specified</a> by the element's <code title=attr-select-size><a href=#attr-select-size>size</a></code> attribute, and whose 'width' is
+ the <a href="#width-of-the-select's-labels">width of the <code>select</code>'s labels</a>, plus the
+ width of a scrollbar.</p>
+
+ <p>When the <i title="">select</i> binding applies to a
+ <code><a href=#the-select-element>select</a></code> element whose <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute is absent,
+ and the element's <code title=attr-select-size><a href=#attr-select-size>size</a></code>
+ attribute is either absent or <a href=#rules-for-parsing-non-negative-integers title="rules for parsing
+ non-negative integers">specifies</a> a value less than or equal
+ to 1, the element is expected to render as a one-line drop down box
+ whose width is the <a href="#width-of-the-select's-labels">width of the <code>select</code>'s
+ labels</a>.</p>
+
+ <p>In either case (list box or drop-down box), the element's items
+ are expected to be the element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a>, with the
+ element's <code><a href=#the-optgroup-element>optgroup</a></code> element children providing headers
+ for groups of options where applicable.</p>
+
+ <p>The <dfn id="width-of-the-select's-labels">width of the <code>select</code>'s labels</dfn> is the
+ wider of the width necessary to render the widest
+ <code><a href=#the-optgroup-element>optgroup</a></code>, and the width necessary to render the widest
+ <code><a href=#the-option-element>option</a></code> element in the element's <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> (including
+ its indent, if any).</p>
+
+ <p>An <code><a href=#the-optgroup-element>optgroup</a></code> element is expected to be rendered by
+ displaying the element's <code title=attr-optgroup-label><a href=#attr-optgroup-label>label</a></code> attribute.</p>
+
+ <p>An <code><a href=#the-option-element>option</a></code> element is expected to be rendered by
+ displaying the element's <code title=concept-option-label><a href=#concept-option-label>label</a></code>, indented under its
+ <code><a href=#the-optgroup-element>optgroup</a></code> element if it has one.</p>
+
+
+
+
+
+
<h4 id=the-textarea-element-0><span class=secno>10.4.17 </span>The <code><a href=#the-textarea-element>textarea</a></code> element</h4>
<p class=XXX>...</p>
Modified: source
===================================================================
--- source 2009-02-07 00:21:48 UTC (rev 2767)
+++ source 2009-02-10 00:06:07 UTC (rev 2768)
@@ -21480,6 +21480,7 @@
<h5>The 2D context</h5>
+ <!-- v2: we're on v3. suggestions for next version are marked v4. -->
<p>When the <code title="dom-canvas-getContext">getContext()</code>
method of a <code>canvas</code> element is invoked with <dfn
@@ -21520,7 +21521,12 @@
// compositing
attribute float <span title="dom-context-2d-globalAlpha">globalAlpha</span>; // (default 1.0)
attribute DOMString <span title="dom-context-2d-globalCompositeOperation">globalCompositeOperation</span>; // (default source-over)
-
+<!--
+ // XXXv4 we've also received requests for:
+ - turning off antialiasing to avoid seams when patterns are painted next to each other
+ - might be better to overdraw?
+ - might be better to just draw at a higher res then downsample, like for 3d?
+-->
// colors and styles
attribute any <span title="dom-context-2d-strokeStyle">strokeStyle</span>; // (default black)
attribute any <span title="dom-context-2d-fillStyle">fillStyle</span>; // (default black)
@@ -39825,8 +39831,8 @@
<li><p>Run the oldest task on one of the <span>event loop</span>'s
<span title="task queue">task queues</span>, ignoring tasks whose
- associated <code>Document</code>s are not <span title="active
- document">active</span>. The user agent may pick any <span>task
+ associated <code>Document</code>s are not <span>fully
+ active</span>. The user agent may pick any <span>task
queue</span>.</p></li>
<li><p>Remove that task from its <span>task queue</span>.</p></li>
@@ -61250,9 +61256,6 @@
are expected to be flipped around on elements whose 'direction'
property is 'rtl'.</p>
- <p class="XXX">Please send feedback if you can accurately describe
- rules required by legacy content.</p>
-
<hr>
<p>When the text below says that an attribute <var
@@ -62571,6 +62574,7 @@
<h4>The <code>bb</code> element</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
bb:empty { binding: <i title="">bb</i>; }</pre>
<p>When the <i title="">bb</i> binding applies to a <code>bb</code>
@@ -62584,6 +62588,7 @@
<h4>The <code>button</code> element</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
button { binding: <i title="">button</i>; }</pre>
<p>When the <i title="">button</i> binding applies to a
@@ -62605,6 +62610,7 @@
<h4>The <code>details</code> element</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
details { binding: <i title="">details</i>; }</pre>
<p>When the <i title="">details</i> binding applies to a
@@ -62639,6 +62645,7 @@
<h4>The <code>input</code> element as a text entry widget</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
input { binding: <i title="">input-textfield</i>; }
input[type=password] { binding: <i title="">input-password</i>; }
/* later rules override this for other values of type="" */</pre>
@@ -62695,6 +62702,7 @@
<h4>The <code>input</code> element as domain-specific widgets</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
input[type=datetime] { binding: <i title="">input-datetime</i>; }
input[type=date] { binding: <i title="">input-date</i>; }
input[type=month] { binding: <i title="">input-month</i>; }
@@ -62760,6 +62768,7 @@
<h4>The <code>input</code> element as a range control</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
input[type=range] { binding: <i title="">input-range</i>; }</pre>
<p>When the <i title="">input-range</i> binding applies to an
@@ -62769,12 +62778,12 @@
expected to render as an 'inline-block' box depicting a slider
control.</p>
- <p>When the control is wider than it is tall, the control is
- expected to be a horizontal slider, with the lowest value on the
- right if the 'direction' property on this element has a computed
- value of 'rtl', and on the left otherwise. When the control is
- taller than it is wide, it is expected to be a vertical slider, with
- the lowest value on the top.</p>
+ <p>When the control is wider than it is tall (or square), the
+ control is expected to be a horizontal slider, with the lowest value
+ on the right if the 'direction' property on this element has a
+ computed value of 'rtl', and on the left otherwise. When the control
+ is taller than it is wide, it is expected to be a vertical slider,
+ with the lowest value on the bottom.</p>
<p>Predefined suggested values (provided by the <code
title="attr-input-list">list</code> attribute) are expected to be
@@ -62785,6 +62794,7 @@
<h4>The <code>input</code> element as a color well</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
input[type=color] { binding: <i title="">input-color</i>; }</pre>
<p>When the <i title="">input-color</i> binding applies to an
@@ -62806,6 +62816,7 @@
<h4>The <code>input</code> element as a check box and radio button widgets</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
input[type=checkbox] { binding: <i title="">input-checkbox</i>; }
input[type=radio] { binding: <i title="">input-radio</i>; }</pre>
@@ -62828,6 +62839,7 @@
<h4>The <code>input</code> element as a file upload control</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
input[type=file] { binding: <i title="">input-file</i>; }</pre>
<p>When the <i title="">input-file</i> binding applies to an
@@ -62845,6 +62857,7 @@
<h4>The <code>input</code> element as a button</h4>
<pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+
input[type=submit], input[type=reset], input[type=button] {
binding: <i title="">input-button</i>;
}</pre>
@@ -62866,30 +62879,143 @@
<h4>The <code>marquee</code> element</h4>
- <p class="XXX">...</p>
+ <p class="XXX">...(Waiting til I've specced the DOM side of this)...</p>
<!-- XXX attributes: height/width; direction is case insensitive; bgcolor; hspace/vspace -->
<h4>The <code>meter</code> element</h4>
- <p class="XXX">...</p>
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+meter {
+ binding: <i title="">meter</i>;
+}</pre>
+ <p>When the <i title="">meter</i> binding applies to a
+ <code>meter</code> element, the element is expected to render as an
+ 'inline-block' box with a 'height' of '1em' and a 'width' of '5em',
+ a 'vertical-align' of '-0.2em', and with its contents depicting a
+ gauge.</p>
+ <p>When the element is wider than it is tall (or square), the
+ depiction is expected to be of a horizontal gauge, with the minimum
+ value on the right if the 'direction' property on this element has a
+ computed value of 'rtl', and on the left otherwise. When the element
+ is taller than it is wide, it is expected to depict a vertical
+ gauge, with the minimum value on the bottom.</p>
+
+ <p>User agents are expected to use a presentation consistent with
+ platform conventions for gauges, if any.</p>
+
+ <p class="note">Requirements for what must be depicted in the gauge
+ are included in the definition of the <code>meter</code>
+ element.</p>
+
+
+
<h4>The <code>progress</code> element</h4>
- <p class="XXX">...</p>
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+progress {
+ binding: <i title="">progress</i>;
+}</pre>
+ <p>When the <i title="">progress</i> binding applies to a
+ <code>progress</code> element, the element is expected to render as
+ an 'inline-block' box with a 'height' of '1em' and a 'width' of
+ '10em', a 'vertical-align' of '-0.2em', and with its contents
+ depicting a horizontal progress bar, with the start on the right and
+ the end on the left if the 'direction' property on this element has
+ a computed value of 'rtl', and with the start on the left and the
+ end on the right otherwise.</p>
+ <p>User agents are expected to use a presentation consistent with
+ platform conventions for progress bars. In particular, user agents
+ are expected to use different presentations for determinate and
+ indeterminate progress bars. User agents are also expected to vary
+ the presentation based on the dimensions of the element.</p>
+
+ <p class="example">For example, on some platforms for showing
+ indeterminate progress there is an asychronous progress indicator
+ with square dimensions, which could be used when the element is
+ square, and an indeterminate progress bar, which could be used when
+ the element is wide.</p>
+
+ <p class="note">Requirements for how to determine if the progress
+ bar is determinate or indeterminate, and what progress a determinate
+ progress bar is to show, are included in the definition of the
+ <code>progress</code> element.</p>
+
+
+
<h4>The <code>select</code> element</h4>
- <p class="XXX">...</p>
- <!-- multiple, size; optgroup -->
+ <pre class="css">@namespace url(http://www.w3.org/1999/xhtml);
+select {
+ binding: <i title="">select</i>;
+}</pre>
+ <p>When the <i title="">select</i> binding applies to a
+ <code>select</code> element whose <code
+ title="attr-select-multiple">multiple</code> attribute is present,
+ the element is expected to render as a multi-select list box.</p>
+ <p>When the <i title="">select</i> binding applies to a
+ <code>select</code> element whose <code
+ title="attr-select-multiple">multiple</code> attribute is absent,
+ and the element's <code title="attr-select-size">size</code>
+ attribute <span title="rules for parsing non-negative
+ integers">specifies</span> a value greater than 1, the element is
+ expected to render as a single-select list box.</p>
+
+ <p>When the element renders as a list box, it is expected to render
+ as an 'inline-block' box whose 'height' is the height necessary to
+ contain as many rows for items as <span title="rules for parsing
+ non-negative integers">specified</span> by the element's <code
+ title="attr-select-size">size</code> attribute, and whose 'width' is
+ the <span>width of the <code>select</code>'s labels</span>, plus the
+ width of a scrollbar.</p>
+
+ <p>When the <i title="">select</i> binding applies to a
+ <code>select</code> element whose <code
+ title="attr-select-multiple">multiple</code> attribute is absent,
+ and the element's <code title="attr-select-size">size</code>
+ attribute is either absent or <span title="rules for parsing
+ non-negative integers">specifies</span> a value less than or equal
+ to 1, the element is expected to render as a one-line drop down box
+ whose width is the <span>width of the <code>select</code>'s
+ labels</span>.</p>
+
+ <p>In either case (list box or drop-down box), the element's items
+ are expected to be the element's <span
+ title="concept-select-option-list">list of options</span>, with the
+ element's <code>optgroup</code> element children providing headers
+ for groups of options where applicable.</p>
+
+ <p>The <dfn>width of the <code>select</code>'s labels</dfn> is the
+ wider of the width necessary to render the widest
+ <code>optgroup</code>, and the width necessary to render the widest
+ <code>option</code> element in the element's <span
+ title="concept-select-option-list">list of options</span> (including
+ its indent, if any).</p>
+
+ <p>An <code>optgroup</code> element is expected to be rendered by
+ displaying the element's <code
+ title="attr-optgroup-label">label</code> attribute.</p>
+
+ <p>An <code>option</code> element is expected to be rendered by
+ displaying the element's <code
+ title="concept-option-label">label</code>, indented under its
+ <code>optgroup</code> element if it has one.</p>
+
+
+
+
+
+
<h4>The <code>textarea</code> element</h4>
<p class="XXX">...</p>
More information about the Commit-Watchers
mailing list