Skip to content
Permalink
Browse files

[] (0) Filling in the rendering section: <select>, <progress>, <meter…

…>; minor editorial fixes here and there.

git-svn-id: http://svn.whatwg.org/webapps@2768 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
Hixie committed Feb 10, 2009
1 parent 961573e commit 0b30687634b22f2e64e81d8718277822f2ec70cd
Showing with 279 additions and 35 deletions.
  1. +136 −18 index
  2. +143 −17 source
154 index
@@ -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-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 7 February 2009</h2>
<h2 class="no-num no-toc" id=draft-recommendation-&mdash;-date:-01-jan-1901>Draft Recommendation &mdash; 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>


<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
// 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)

<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>
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-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>
<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
<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
<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>
<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>; }
<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
<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>

<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
<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>

<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
<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>

<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>






0 comments on commit 0b30687

Please sign in to comment.
You can’t perform that action at this time.