This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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>
<!-- 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
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>
<h4 id=the-input-element-as-a-text-entry-widget><span class=secno>10.4.6 </span>The <code><a href=#the-input-element>input</a></code> element as a text entry widget</h4>
<h4 id=the-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>
<h4 id=the-input-element-as-a-range-control><span class=secno>10.4.8 </span>The <code><a href=#the-input-element>input</a></code> element as a range control</h4>
<p>When the <i title="">input-range</i> binding applies to an
<code><a href=#the-input-element>input</a></code> element whose <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, the element is
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>
<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>
<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>
<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>
<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>
