[html5] r8436 - [e] (0) Move <input type=range> examples Fixing https://www.w3.org/Bugs/Public/s [...]
whatwg at whatwg.org
whatwg at whatwg.org
Wed Jan 29 16:14:47 PST 2014
Author: ianh
Date: 2014-01-29 16:14:46 -0800 (Wed, 29 Jan 2014)
New Revision: 8436
Modified:
complete.html
index
source
Log:
[e] (0) Move <input type=range> examples
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=13154
Affected topics: HTML
Modified: complete.html
===================================================================
--- complete.html 2014-01-29 20:40:26 UTC (rev 8435)
+++ complete.html 2014-01-30 00:14:46 UTC (rev 8436)
@@ -298,7 +298,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 29 January 2014</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 30 January 2014</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -41970,6 +41970,73 @@
</div>
+ <div class=example>
+
+ <p>Here is an example of a range control using an autocomplete list with the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute. This could be useful if there are values along the
+ full range of the control that are especially important, such as preconfigured light levels or
+ typical speed limits in a range control used as a speed control. The following markup
+ fragment:</p>
+
+ <pre><input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
+<datalist id="powers">
+ <option value="0">
+ <option value="-30">
+ <option value="30">
+<span class=bad> <option value="++50"></span>
+</datalist>
+</pre>
+
+ <p>...with the following style sheet applied:</p>
+
+ <pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>
+
+ <p>...might render as:</p>
+
+ <p><img src=http://images.whatwg.org/sample-range.png width=49 alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height=75><p>Note how the UA determined the orientation of the control from the ratio of the
+ style-sheet-specified height and width properties. The colors were similarly derived from the
+ style sheet. The tick marks, however, were derived from the markup. In particular, the <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute has not affected the placement of tick marks, the
+ UA deciding to only use the author-specified completion values and then adding longer tick marks
+ at the extremes.</p>
+
+ <p>Note also how the invalid value <code title="">++50</code> was completely ignored.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>For another example, consider the following markup fragment:</p>
+
+ <pre><input name=x type=range min=100 max=700 step=9.09090909 value=509.090909></pre>
+
+ <p>A user agent could display in a variety of ways, for instance:</p>
+
+ <p><img src=http://images.whatwg.org/sample-range-2a.png width=231 alt="As a dial." height=57></p>
+
+ <p>Or, alternatively, for instance:</p>
+
+ <p><img src=http://images.whatwg.org/sample-range-2b.png width=445 alt="As a long horizontal slider with tick marks." height=56></p>
+
+ <p>The user agent could pick which one to display based on the dimensions given in the style
+ sheet. This would allow it to maintain the same resolution for the tick marks, despite the
+ differences in width.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>Finally, here is an example of a range control with two labeled values:</p>
+
+ <pre><input type="range" name="a" list="a-values">
+<datalist id="a-values">
+ <option value="10" label="Low">
+ <option value="90" label="High">
+</datalist>
+</pre>
+
+ <p>With styles that make the control draw vertically, it might look as follows:</p>
+
+ <p><img src=http://images.whatwg.org/sample-range-labels.png width=103 alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'." height=164></div>
+
</dd>
<dt>When the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute <em>is</em> specified on
@@ -42168,77 +42235,8 @@
</div>
- <!--CLEANUP--><!-- move these into the relevant subsection above -->
- <div class=example>
- <p>Here is an example of a range control using an autocomplete list with the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute. This could be useful if there are values along the
- full range of the control that are especially important, such as preconfigured light levels or
- typical speed limits in a range control used as a speed control. The following markup
- fragment:</p>
-
- <pre><input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
-<datalist id="powers">
- <option value="0">
- <option value="-30">
- <option value="30">
-<span class=bad> <option value="++50"></span>
-</datalist>
-</pre>
-
- <p>...with the following style sheet applied:</p>
-
- <pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>
-
- <p>...might render as:</p>
-
- <p><img src=http://images.whatwg.org/sample-range.png width=49 alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height=75><p>Note how the UA determined the orientation of the control from the ratio of the
- style-sheet-specified height and width properties. The colors were similarly derived from the
- style sheet. The tick marks, however, were derived from the markup. In particular, the <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute has not affected the placement of tick marks, the
- UA deciding to only use the author-specified completion values and then adding longer tick marks
- at the extremes.</p>
-
- <p>Note also how the invalid value <code title="">++50</code> was completely ignored.</p>
-
- </div>
-
- <div class=example>
-
- <p>For another example, consider the following markup fragment:</p>
-
- <pre><input name=x type=range min=100 max=700 step=9.09090909 value=509.090909></pre>
-
- <p>A user agent could display in a variety of ways, for instance:</p>
-
- <p><img src=http://images.whatwg.org/sample-range-2a.png width=231 alt="As a dial." height=57></p>
-
- <p>Or, alternatively, for instance:</p>
-
- <p><img src=http://images.whatwg.org/sample-range-2b.png width=445 alt="As a long horizontal slider with tick marks." height=56></p>
-
- <p>The user agent could pick which one to display based on the dimensions given in the style
- sheet. This would allow it to maintain the same resolution for the tick marks, despite the
- differences in width.</p>
-
- </div>
-
- <div class=example>
-
- <p>Finally, here is an example of a range control with two labeled values:</p>
-
- <pre><input type="range" name="a" list="a-values">
-<datalist id="a-values">
- <option value="10" label="Low">
- <option value="90" label="High">
-</datalist>
-</pre>
-
- <p>With styles that make the control draw vertically, it might look as follows:</p>
-
- <p><img src=http://images.whatwg.org/sample-range-labels.png width=103 alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'." height=164></div>
-
-
-
<h6 id="color-state-(type=color)"><span class=secno>4.10.5.1.15 </span><dfn title=attr-input-type-color>Color</dfn> state (<code title="">type=color</code>)</h6>
<div class=impl>
Modified: index
===================================================================
--- index 2014-01-29 20:40:26 UTC (rev 8435)
+++ index 2014-01-30 00:14:46 UTC (rev 8436)
@@ -298,7 +298,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 29 January 2014</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 30 January 2014</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -41970,6 +41970,73 @@
</div>
+ <div class=example>
+
+ <p>Here is an example of a range control using an autocomplete list with the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute. This could be useful if there are values along the
+ full range of the control that are especially important, such as preconfigured light levels or
+ typical speed limits in a range control used as a speed control. The following markup
+ fragment:</p>
+
+ <pre><input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
+<datalist id="powers">
+ <option value="0">
+ <option value="-30">
+ <option value="30">
+<span class=bad> <option value="++50"></span>
+</datalist>
+</pre>
+
+ <p>...with the following style sheet applied:</p>
+
+ <pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>
+
+ <p>...might render as:</p>
+
+ <p><img src=http://images.whatwg.org/sample-range.png width=49 alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height=75><p>Note how the UA determined the orientation of the control from the ratio of the
+ style-sheet-specified height and width properties. The colors were similarly derived from the
+ style sheet. The tick marks, however, were derived from the markup. In particular, the <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute has not affected the placement of tick marks, the
+ UA deciding to only use the author-specified completion values and then adding longer tick marks
+ at the extremes.</p>
+
+ <p>Note also how the invalid value <code title="">++50</code> was completely ignored.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>For another example, consider the following markup fragment:</p>
+
+ <pre><input name=x type=range min=100 max=700 step=9.09090909 value=509.090909></pre>
+
+ <p>A user agent could display in a variety of ways, for instance:</p>
+
+ <p><img src=http://images.whatwg.org/sample-range-2a.png width=231 alt="As a dial." height=57></p>
+
+ <p>Or, alternatively, for instance:</p>
+
+ <p><img src=http://images.whatwg.org/sample-range-2b.png width=445 alt="As a long horizontal slider with tick marks." height=56></p>
+
+ <p>The user agent could pick which one to display based on the dimensions given in the style
+ sheet. This would allow it to maintain the same resolution for the tick marks, despite the
+ differences in width.</p>
+
+ </div>
+
+ <div class=example>
+
+ <p>Finally, here is an example of a range control with two labeled values:</p>
+
+ <pre><input type="range" name="a" list="a-values">
+<datalist id="a-values">
+ <option value="10" label="Low">
+ <option value="90" label="High">
+</datalist>
+</pre>
+
+ <p>With styles that make the control draw vertically, it might look as follows:</p>
+
+ <p><img src=http://images.whatwg.org/sample-range-labels.png width=103 alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'." height=164></div>
+
</dd>
<dt>When the <code title=attr-input-multiple><a href=#attr-input-multiple>multiple</a></code> attribute <em>is</em> specified on
@@ -42168,77 +42235,8 @@
</div>
- <!--CLEANUP--><!-- move these into the relevant subsection above -->
- <div class=example>
- <p>Here is an example of a range control using an autocomplete list with the <code title=attr-input-list><a href=#attr-input-list>list</a></code> attribute. This could be useful if there are values along the
- full range of the control that are especially important, such as preconfigured light levels or
- typical speed limits in a range control used as a speed control. The following markup
- fragment:</p>
-
- <pre><input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
-<datalist id="powers">
- <option value="0">
- <option value="-30">
- <option value="30">
-<span class=bad> <option value="++50"></span>
-</datalist>
-</pre>
-
- <p>...with the following style sheet applied:</p>
-
- <pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>
-
- <p>...might render as:</p>
-
- <p><img src=http://images.whatwg.org/sample-range.png width=49 alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint." height=75><p>Note how the UA determined the orientation of the control from the ratio of the
- style-sheet-specified height and width properties. The colors were similarly derived from the
- style sheet. The tick marks, however, were derived from the markup. In particular, the <code title=attr-input-step><a href=#attr-input-step>step</a></code> attribute has not affected the placement of tick marks, the
- UA deciding to only use the author-specified completion values and then adding longer tick marks
- at the extremes.</p>
-
- <p>Note also how the invalid value <code title="">++50</code> was completely ignored.</p>
-
- </div>
-
- <div class=example>
-
- <p>For another example, consider the following markup fragment:</p>
-
- <pre><input name=x type=range min=100 max=700 step=9.09090909 value=509.090909></pre>
-
- <p>A user agent could display in a variety of ways, for instance:</p>
-
- <p><img src=http://images.whatwg.org/sample-range-2a.png width=231 alt="As a dial." height=57></p>
-
- <p>Or, alternatively, for instance:</p>
-
- <p><img src=http://images.whatwg.org/sample-range-2b.png width=445 alt="As a long horizontal slider with tick marks." height=56></p>
-
- <p>The user agent could pick which one to display based on the dimensions given in the style
- sheet. This would allow it to maintain the same resolution for the tick marks, despite the
- differences in width.</p>
-
- </div>
-
- <div class=example>
-
- <p>Finally, here is an example of a range control with two labeled values:</p>
-
- <pre><input type="range" name="a" list="a-values">
-<datalist id="a-values">
- <option value="10" label="Low">
- <option value="90" label="High">
-</datalist>
-</pre>
-
- <p>With styles that make the control draw vertically, it might look as follows:</p>
-
- <p><img src=http://images.whatwg.org/sample-range-labels.png width=103 alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'." height=164></div>
-
-
-
<h6 id="color-state-(type=color)"><span class=secno>4.10.5.1.15 </span><dfn title=attr-input-type-color>Color</dfn> state (<code title="">type=color</code>)</h6>
<div class=impl>
Modified: source
===================================================================
--- source 2014-01-29 20:40:26 UTC (rev 8435)
+++ source 2014-01-30 00:14:46 UTC (rev 8436)
@@ -45831,6 +45831,79 @@
</div>
+ <div class="example">
+
+ <p>Here is an example of a range control using an autocomplete list with the <code
+ data-x="attr-input-list">list</code> attribute. This could be useful if there are values along the
+ full range of the control that are especially important, such as preconfigured light levels or
+ typical speed limits in a range control used as a speed control. The following markup
+ fragment:</p>
+
+ <pre><input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
+<datalist id="powers">
+ <option value="0">
+ <option value="-30">
+ <option value="30">
+<span class="bad"> <option value="++50"></span>
+</datalist>
+</pre>
+
+ <p>...with the following style sheet applied:</p>
+
+ <pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>
+
+ <p>...might render as:</p>
+
+ <p><img src="images/sample-range.png" width="49" height="75" alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint.">
+
+ <p>Note how the UA determined the orientation of the control from the ratio of the
+ style-sheet-specified height and width properties. The colors were similarly derived from the
+ style sheet. The tick marks, however, were derived from the markup. In particular, the <code
+ data-x="attr-input-step">step</code> attribute has not affected the placement of tick marks, the
+ UA deciding to only use the author-specified completion values and then adding longer tick marks
+ at the extremes.</p>
+
+ <p>Note also how the invalid value <code data-x="">++50</code> was completely ignored.</p>
+
+ </div>
+
+ <div class="example">
+
+ <p>For another example, consider the following markup fragment:</p>
+
+ <pre><input name=x type=range min=100 max=700 step=9.09090909 value=509.090909></pre>
+
+ <p>A user agent could display in a variety of ways, for instance:</p>
+
+ <p><img src="images/sample-range-2a.png" width="231" height="57" alt="As a dial."></p>
+
+ <p>Or, alternatively, for instance:</p>
+
+ <p><img src="images/sample-range-2b.png" width="445" height="56" alt="As a long horizontal slider with tick marks."></p>
+
+ <p>The user agent could pick which one to display based on the dimensions given in the style
+ sheet. This would allow it to maintain the same resolution for the tick marks, despite the
+ differences in width.</p>
+
+ </div>
+
+ <div class="example">
+
+ <p>Finally, here is an example of a range control with two labeled values:</p>
+
+ <pre><input type="range" name="a" list="a-values">
+<datalist id="a-values">
+ <option value="10" label="Low">
+ <option value="90" label="High">
+</datalist>
+</pre>
+
+ <p>With styles that make the control draw vertically, it might look as follows:</p>
+
+ <p><img src="images/sample-range-labels.png" width="103" height="164" alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'.">
+
+ </div>
+
</dd>
<dt>When the <code data-x="attr-input-multiple">multiple</code> attribute <em>is</em> specified on
@@ -46057,83 +46130,8 @@
</div>
- <!--CLEANUP--><!-- move these into the relevant subsection above -->
- <div class="example">
- <p>Here is an example of a range control using an autocomplete list with the <code
- data-x="attr-input-list">list</code> attribute. This could be useful if there are values along the
- full range of the control that are especially important, such as preconfigured light levels or
- typical speed limits in a range control used as a speed control. The following markup
- fragment:</p>
-
- <pre><input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
-<datalist id="powers">
- <option value="0">
- <option value="-30">
- <option value="30">
-<span class="bad"> <option value="++50"></span>
-</datalist>
-</pre>
-
- <p>...with the following style sheet applied:</p>
-
- <pre>input { height: 75px; width: 49px; background: #D5CCBB; color: black; }</pre>
-
- <p>...might render as:</p>
-
- <p><img src="images/sample-range.png" width="49" height="75" alt="A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint.">
-
- <p>Note how the UA determined the orientation of the control from the ratio of the
- style-sheet-specified height and width properties. The colors were similarly derived from the
- style sheet. The tick marks, however, were derived from the markup. In particular, the <code
- data-x="attr-input-step">step</code> attribute has not affected the placement of tick marks, the
- UA deciding to only use the author-specified completion values and then adding longer tick marks
- at the extremes.</p>
-
- <p>Note also how the invalid value <code data-x="">++50</code> was completely ignored.</p>
-
- </div>
-
- <div class="example">
-
- <p>For another example, consider the following markup fragment:</p>
-
- <pre><input name=x type=range min=100 max=700 step=9.09090909 value=509.090909></pre>
-
- <p>A user agent could display in a variety of ways, for instance:</p>
-
- <p><img src="images/sample-range-2a.png" width="231" height="57" alt="As a dial."></p>
-
- <p>Or, alternatively, for instance:</p>
-
- <p><img src="images/sample-range-2b.png" width="445" height="56" alt="As a long horizontal slider with tick marks."></p>
-
- <p>The user agent could pick which one to display based on the dimensions given in the style
- sheet. This would allow it to maintain the same resolution for the tick marks, despite the
- differences in width.</p>
-
- </div>
-
- <div class="example">
-
- <p>Finally, here is an example of a range control with two labeled values:</p>
-
- <pre><input type="range" name="a" list="a-values">
-<datalist id="a-values">
- <option value="10" label="Low">
- <option value="90" label="High">
-</datalist>
-</pre>
-
- <p>With styles that make the control draw vertically, it might look as follows:</p>
-
- <p><img src="images/sample-range-labels.png" width="103" height="164" alt="A vertical slider control with two tick marks, one near the top labeled 'High', and one near the bottom labeled 'Low'.">
-
- </div>
-
-
-
<h6><dfn data-x="attr-input-type-color">Color</dfn> state (<code data-x="">type=color</code>)</h6>
<div class="impl">
More information about the Commit-Watchers
mailing list