[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