HTML Standard Tracker

Diff (omit for latest revision)
Filter

Short URL: http://html5.org/r/4531

File a bug

SVNBugCommentTime (UTC)
45318554[Authors] [Conformance Checkers] [Gecko] [Internet Explorer] [Opera] [Webkit] Make <progress>, <meter>, and <output> labelable with <label>.2010-01-07 03:40
Index: source
===================================================================
--- source	(revision 4530)
+++ source	(revision 4531)
@@ -18209,534 +18209,6 @@
   </div>
 
 
-  <h4>The <dfn><code>progress</code></dfn> element</h4>
-
-  <dl class="element">
-   <dt>Categories</dt>
-   <dd><span>Flow content</span>.</dd>
-   <dd><span>Phrasing content</span>.</dd>
-   <dt>Contexts in which this element may be used:</dt>
-   <dd>Where <span>phrasing content</span> is expected.</dd>
-   <dt>Content model:</dt>
-   <dd><span>Phrasing content</span>, but there must be no <code>progress</code> element descendants.</dd>
-   <dt>Content attributes:</dt>
-   <dd><span>Global attributes</span></dd>
-   <dd><code title="attr-progress-value">value</code></dd>
-   <dd><code title="attr-progress-max">max</code></dd>
-   <dt>DOM interface:</dt>
-   <dd>
-<pre class="idl">interface <dfn>HTMLProgressElement</dfn> : <span>HTMLElement</span> {
-           attribute float <span title="dom-progress-value">value</span>;
-           attribute float <span title="dom-progress-max">max</span>;
-  readonly attribute float <span title="dom-progress-position">position</span>;
-};</pre>
-   </dd>
-  </dl>
-
-  <p>The <code>progress</code> element <span>represents</span> the
-  completion progress of a task. The progress is either indeterminate,
-  indicating that progress is being made but that it is not clear how
-  much more work remains to be done before the task is complete
-  (e.g. because the task is waiting for a remote host to respond), or
-  the progress is a number in the range zero to a maximum, giving the
-  fraction of work that has so far been completed.</p>
-
-  <p>There are two attributes that determine the current task
-  completion represented by the element.</p>
-
-  <p>The <dfn title="attr-progress-value"><code>value</code></dfn>
-  attribute specifies how much of the task has been completed, and the
-  <dfn title="attr-progress-max"><code>max</code></dfn> attribute
-  specifies how much work the task requires in total. The units are
-  arbitrary and not specified.</p>
-
-  <p>Authors are encouraged to also include the current value and the
-  maximum value inline as text inside the element, so that the
-  progress is made available to users of legacy user agents.</p>
-
-  <div class="example">
-   <p>Here is a snippet of a Web application that shows the progress
-   of some automated task:</p>
-   <pre>&lt;section>
- &lt;h2>Task Progress&lt;/h2>
- &lt;p>Progress: &lt;progress id="p" max=100>&lt;span>0&lt;/span>%&lt;/progress>&lt;/p>
- &lt;script>
-  var progressBar = document.getElementById('p');
-  function updateProgress(newValue) {
-    progressBar.value = newValue;
-    progressBar.getElementsByTagName('span')[0].textContent = newValue;
-  }
- &lt;/script>
-&lt;/section></pre>
-   <p>(The <code>updateProgress()</code> method in this example would
-   be called by some other code on the page to update the actual
-   progress bar as the task progressed.)</p>
-  </div>
-
-  <p>The <code title="attr-progress-value">value</code> and <code
-  title="attr-progress-max">max</code> attributes, when present, must
-  have values that are <span title="valid floating point number">valid
-  floating point numbers</span>. The <code
-  title="attr-progress-value">value</code> attribute, if present, must
-  have a value equal to or greater than zero, and less than or equal
-  to the value of the <code title="attr-progress-max">max</code>
-  attribute, if present, or 1.0, otherwise. The <code
-  title="attr-progress-max">max</code> attribute, if present, must
-  have a value greater than zero.</p>
-
-  <p class="note">The <code>progress</code> element is the wrong
-  element to use for something that is just a gauge, as opposed to
-  task progress. For instance, indicating disk space usage using
-  <code>progress</code> would be inappropriate. Instead, the
-  <code>meter</code> element is available for such use cases.</p>
-
-  <div class="impl">
-
-  <p><strong>User agent requirements</strong>: If the <code
-  title="attr-progress-value">value</code> attribute is omitted, then
-  the progress bar is an indeterminate progress bar. Otherwise, it is
-  a determinate progress bar.</p>
-
-  <p>If the progress bar is a determinate progress bar and the element
-  has a <code title="attr-progress-max">max</code> attribute, the user
-  agent must parse the <code title="attr-progress-max">max</code>
-  attribute's value according to the <span>rules for parsing floating
-  point number values</span>. If this does not result in an error, and
-  if the parsed value is greater than zero, then the maximum value of
-  the progress bar is that value. Otherwise, if the element has no
-  <code title="attr-progress-max">max</code> attribute, or if it has
-  one but parsing it resulted in an error, or if the parsed value was
-  less than or equal to zero, then the maximum value of the progress
-  bar is 1.0.</p>
-
-  <p>If the progress bar is a determinate progress bar, user agents
-  must parse the <code title="attr-progress-value">value</code>
-  attribute's value according to the <span>rules for parsing floating
-  point number values</span>. If this does not result in an error, and
-  if the parsed value is less than the maximum value and greater than
-  zero, then the current value of the progress bar is that parsed
-  value. Otherwise, if the parsed value was greater than or equal to
-  the maximum value, then the current value of the progress bar is the
-  maximum value of the progress bar. Otherwise, if parsing the <code
-  title="attr-progress-value">value</code> attribute's value resulted
-  in an error, or a number less than or equal to zero, then the
-  current value of the progress bar is zero.</p>
-
-  <p><strong>UA requirements for showing the progress bar</strong>:
-  When representing a <code>progress</code> element to the user, the
-  UA should indicate whether it is a determinate or indeterminate
-  progress bar, and in the former case, should indicate the relative
-  position of the current value relative to the maximum value.</p>
-
-  <p>The <dfn title="dom-progress-max"><code>max</code></dfn> and <dfn
-  title="dom-progress-value"><code>value</code></dfn> IDL attributes
-  must <span>reflect</span> the respective content attributes of the
-  same name. When the relevant content attributes are absent, the IDL
-  attributes must return zero.</p>
-
-  </div>
-
-  <dl class="domintro">
-
-   <dt><var title="">progress</var> . <code title="dom-progress-position">position</code></dt>
-
-   <dd>
-
-    <p>For a determinate progress bar (one with known current and
-    maximum values), returns the result of dividing the current value
-    by the maximum value.</p>
-
-    <p>For an indeterminate progress bar, returns &#x2212;1.</p>
-
-  </dl>
-
-  <div class="impl">
-
-  <p>If the progress bar is an indeterminate progress bar, then the
-  <dfn title="dom-progress-position"><code>position</code></dfn> IDL
-  attribute must return &#x2212;1. Otherwise, it must return the result of
-  dividing the current value by the maximum value.</p>
-
-  </div>
-
-
-
-  <h4>The <dfn><code>meter</code></dfn> element</h4>
-  <!-- Keep this after <progress> and NOT close to <time> -->
-
-  <dl class="element">
-   <dt>Categories</dt>
-   <dd><span>Flow content</span>.</dd>
-   <dd><span>Phrasing content</span>.</dd>
-   <dt>Contexts in which this element may be used:</dt>
-   <dd>Where <span>phrasing content</span> is expected.</dd>
-   <dt>Content model:</dt>
-   <dd><span>Phrasing content</span>, but there must be no <code>meter</code> element descendants.</dd>
-   <dt>Content attributes:</dt>
-   <dd><span>Global attributes</span></dd>
-   <dd><code title="attr-meter-value">value</code></dd>
-   <dd><code title="attr-meter-min">min</code></dd>
-   <dd><code title="attr-meter-low">low</code></dd>
-   <dd><code title="attr-meter-high">high</code></dd>
-   <dd><code title="attr-meter-max">max</code></dd>
-   <dd><code title="attr-meter-optimum">optimum</code></dd>
-   <dt>DOM interface:</dt>
-   <dd>
-<pre class="idl">interface <dfn>HTMLMeterElement</dfn> : <span>HTMLElement</span> {
-           attribute float <span title="dom-meter-value">value</span>;
-           attribute float <span title="dom-meter-min">min</span>;
-           attribute float <span title="dom-meter-max">max</span>;
-           attribute float <span title="dom-meter-low">low</span>;
-           attribute float <span title="dom-meter-high">high</span>;
-           attribute float <span title="dom-meter-optimum">optimum</span>;
-};</pre>
-   </dd>
-  </dl>
-
-  <p>The <code>meter</code> element <span>represents</span> a scalar
-  measurement within a known range, or a fractional value; for example
-  disk usage, the relevance of a query result, or the fraction of a
-  voting population to have selected a particular candidate.</p>
-
-  <p>This is also known as a gauge.</p>
-
-  <p class="note">The <code>meter</code> element should not be used to
-  indicate progress (as in a progress bar). For that role, HTML
-  provides a separate <code>progress</code> element.</p>
-
-  <p class="note">The <code>meter</code> element also does not
-  represent a scalar value of arbitrary range &mdash; for example, it
-  would be wrong to use this to report a weight, or height, unless
-  there is a known maximum value.</p>
-
-  <p>There are six attributes that determine the semantics of the
-  gauge represented by the element.</p>
-
-  <p>The <dfn title="attr-meter-min"><code>min</code></dfn> attribute
-  specifies the lower bound of the range, and the <dfn
-  title="attr-meter-max"><code>max</code></dfn> attribute specifies
-  the upper bound. The <dfn
-  title="attr-meter-value"><code>value</code></dfn> attribute
-  specifies the value to have the gauge indicate as the "measured"
-  value.</p>
-
-  <p>The other three attributes can be used to segment the gauge's
-  range into "low", "medium", and "high" parts, and to indicate which
-  part of the gauge is the "optimum" part. The <dfn
-  title="attr-meter-low"><code>low</code></dfn> attribute specifies
-  the range that is considered to be the "low" part, and the <dfn
-  title="attr-meter-high"><code>high</code></dfn> attribute specifies
-  the range that is considered to be the "high" part. The <dfn
-  title="attr-meter-optimum"><code>optimum</code></dfn> attribute
-  gives the position that is "optimum"; if that is higher than the
-  "high" value  then this indicates that the higher the value, the
-  better; if it's lower than the "low" mark then it indicates that
-  lower values are better, and naturally if it is in between then it
-  indicates that neither high nor low values are good.</p>
-
-  <p><strong class="impl">Authoring requirements</strong>: The <code
-  title="attr-meter-value">value</code> attribute must be
-  specified. The <code title="attr-meter-value">value</code>, <code
-  title="attr-meter-min">min</code>, <code
-  title="attr-meter-low">low</code>, <code
-  title="attr-meter-high">high</code>, <code
-  title="attr-meter-max">max</code>, and <code
-  title="attr-meter-optimum">optimum</code> attributes, when present,
-  must have values that are <span title="valid floating point
-  number">valid floating point numbers</span>.</p>
-
-  <p>In addition, the attributes' values are further constrained:</p>
-
-  <p>Let <var title="">value</var> be the <code
-  title="attr-meter-value">value</code> attribute's number.</p>
-
-  <p>If the <code title="attr-meter-min">min</code> attribute
-  attribute is specified, then let <var title="">minimum</var> be that
-  attribute's value; otherwise, let it be zero.</p>
-
-  <p>If the <code title="attr-meter-max">max</code> attribute
-  attribute is specified, then let <var title="">maximum</var> be that
-  attribute's value; otherwise, let it be 1.0.</p>
-
-  <p>The following inequalities must hold, as applicable:</p>
-
-  <ul class="brief">
-   <li><var title="">minimum</var> &le; <var title="">value</var> &le; <var title="">maximum</var></li>
-   <li><var title="">minimum</var> &le; <code title="attr-meter-low">low</code> &le; <var title="">maximum</var> (if <code title="attr-meter-low">low</code> is specified)</li>
-   <li><var title="">minimum</var> &le; <code title="attr-meter-high">high</code> &le; <var title="">maximum</var> (if <code title="attr-meter-high">high</code> is specified)</li>
-   <li><var title="">minimum</var> &le; <code title="attr-meter-optimum">optimum</code> &le; <var title="">maximum</var> (if <code title="attr-meter-optimum">optimum</code> is specified)</li>
-  </ul>
-
-  <p>If both the <code title="attr-meter-low">low</code> and <code
-  title="attr-meter-high">high</code> attributes are specified, then
-  the <code title="attr-meter-low">low</code> attribute's value must
-  be less than or equal to the value of the <code
-  title="attr-meter-high">high</code> attribute.</p>
-
-  <p class="note">If no minimum or maximum is specified, then the
-  range is assumed to be 0..1, and the value thus has to be within
-  that range.</p>
-
-  <p>Authors are encouraged to include a textual representation of the
-  gauge's state in the element's contents, for users of user agents
-  that do not support the <code>meter</code> element.</p>
-
-  <div class="example">
-
-   <p>The following examples show three gauges that would all be
-   three-quarters full:</p>
-
-   <pre>Storage space usage: &lt;meter value=6 max=8>6 blocks used (out of 8 total)&lt;/meter>
-Voter turnout: &lt;meter value=0.75>&lt;img alt="75%" src="graph75.png">&lt;/meter>
-Tickets sold: &lt;meter min="0" max="100" value="75">&lt;/meter></pre>
-
-   <p>The following example is incorrect use of the element, because
-   it doesn't give a range (and since the default maximum is 1, both
-   of the gauges would end up looking maxed out):</p>
-
-   <pre class="bad">&lt;p>The grapefruit pie had a radius of &lt;meter value=12>12cm&lt;/meter>
-and a height of &lt;meter value=2>2cm&lt;/meter>.&lt;/p> &lt;!-- <strong>BAD!</strong> --></pre>
-
-   <p>Instead, one would either not include the meter element, or use
-   the meter element with a defined range to give the dimensions in
-   context compared to other pies:</p>
-
-   <pre>&lt;p>The grapefruit pie had a radius of 12cm and a height of
-2cm.&lt;/p>
-&lt;dl>
- &lt;dt>Radius: &lt;dd> &lt;meter min=0 max=20 value=12>12cm&lt;/meter>
- &lt;dt>Height: &lt;dd> &lt;meter min=0 max=10 value=2>2cm&lt;/meter>
-&lt;/dl></pre>
-
-  </div>
-
-  <p>There is no explicit way to specify units in the
-  <code>meter</code> element, but the units may be specified in the
-  <code title="attr-title">title</code> attribute in free-form text.</p>
-
-  <div class="example">
-
-   <p>The example above could be extended to mention the units:</p>
-
-   <pre>&lt;dl>
- &lt;dt>Radius: &lt;dd> &lt;meter min=0 max=20 value=12 title="centimeters">12cm&lt;/meter>
- &lt;dt>Height: &lt;dd> &lt;meter min=0 max=10 value=2 title="centimeters">2cm&lt;/meter>
-&lt;/dl></pre>
-
-  </div>
-
-  <div class="impl">
-
-  <p><strong>User agent requirements</strong>: User agents must parse
-  the <code title="attr-meter-min">min</code>, <code
-  title="attr-meter-max">max</code>, <code
-  title="attr-meter-value">value</code>, <code
-  title="attr-meter-low">low</code>, <code
-  title="attr-meter-high">high</code>, and <code
-  title="attr-meter-optimum">optimum</code> attributes using the
-  <span>rules for parsing floating point number values</span>.</p>
-
-  <p>User agents must then use all these numbers to obtain values for
-  six points on the gauge, as follows. (The order in which these are
-  evaluated is important, as some of the values refer to earlier
-  ones.)</p>
-
-  <dl>
-
-   <dt>The minimum value</dt>
-
-   <dd>
-    <p>If the <code title="attr-meter-min">min</code> attribute is
-    specified and a value could be parsed out of it, then the minimum
-    value is that value. Otherwise, the minimum value is zero.</p>
-   </dd>
-
-   <dt>The maximum value</dt>
-
-   <dd>
-
-    <p>If the <code title="attr-meter-max">max</code> attribute is
-    specified and a value could be parsed out of it, the maximum value
-    is that value. Otherwise, the maximum value is 1.0.</p>
-
-    <p>If the maximum value would be less than the minimum value, then
-    the maximum value is actually the same as the minimum value.</p>
-
-   </dd>
-
-   <dt>The actual value</dt>
-
-   <dd>
-
-    <p>If the <code title="attr-meter-value">value</code> attribute is
-    specified and a value could be parsed out of it, then that value
-    is the actual value. Otherwise, the actual value is zero.</p>
-
-    <p>If the actual value would be less than the minimum value, then
-    the actual value is actually the same as the minimum value.</p>
-
-    <p>If, on the other hand, the actual value would be greater than
-    the maximum value, then the actual value is the maximum value.</p>
-
-   </dd>
-
-   <dt>The low boundary</dt>
-
-   <dd>
-
-    <p>If the <code title="attr-meter-low">low</code> attribute is
-    specified and a value could be parsed out of it, then the low
-    boundary is that value. Otherwise, the low boundary is the same as
-    the minimum value.</p>
-
-    <p>If the low boundary is then less than the minimum value, then
-    the low boundary is actually the same as the minimum
-    value. Similarly, if the low boundary is greater than the maximum
-    value, then it is actually the maximum value instead.</p>
-
-   </dd>
-
-   <dt>The high boundary</dt>
-
-   <dd>
-
-    <p>If the <code title="attr-meter-high">high</code> attribute is
-    specified and a value could be parsed out of it, then the high
-    boundary is that value. Otherwise, the high boundary is the same
-    as the maximum value.</p>
-
-    <p>If the high boundary is then less than the low boundary, then
-    the high boundary is actually the same as the low
-    boundary. Similarly, if the high boundary is greater than the
-    maximum value, then it is actually the maximum value instead.</p>
-
-   </dd>
-
-   <dt>The optimum point</dt>
-
-   <dd>
-
-    <p>If the <code title="attr-meter-optimum">optimum</code>
-    attribute is specified and a value could be parsed out of it, then
-    the optimum point is that value. Otherwise, the optimum point is
-    the midpoint between the minimum value and the maximum value.</p>
-
-    <p>If the optimum point is then less than the minimum value, then
-    the optimum point is actually the same as the minimum
-    value. Similarly, if the optimum point is greater than the maximum
-    value, then it is actually the maximum value instead.</p>
-
-   </dd>
-
-  </dl>
-
-  <p>All of which will result in the following inequalities all being
-  true:</p>
-
-  <ul class="brief">
-   <li>minimum value &le; actual value &le; maximum value</li>
-   <li>minimum value &le; low boundary &le; high boundary &le; maximum value</li>
-   <li>minimum value &le; optimum point &le; maximum value</li>
-  </ul>
-
-  <!-- next two paragraphs are duplicated in the <datagrid> section [v2DATAGRID] -->
-
-  <p><strong>UA requirements for regions of the gauge</strong>: If the
-  optimum point is equal to the low boundary or the high boundary, or
-  anywhere in between them, then the region between the low and high
-  boundaries of the gauge must be treated as the optimum region, and
-  the low and high parts, if any, must be treated as
-  suboptimal. Otherwise, if the optimum point is less than the low
-  boundary, then the region between the minimum value and the low
-  boundary must be treated as the optimum region, the region between
-  the low boundary and the high boundary must be treated as a
-  suboptimal region, and the region between the high boundary and the
-  maximum value must be treated as an even less good region. Finally,
-  if the optimum point is higher than the high boundary, then the
-  situation is reversed; the region between the high boundary and the
-  maximum value must be treated as the optimum region, the region
-  between the high boundary and the low boundary must be treated as a
-  suboptimal region, and the remaining region between the low boundary
-  and the minimum value must be treated as an even less good
-  region.</p>
-
-  <p><strong>UA requirements for showing the gauge</strong>: When
-  representing a <code>meter</code> element to the user, the UA should
-  indicate the relative position of the actual value to the minimum
-  and maximum values, and the relationship between the actual value
-  and the three regions of the gauge.</p>
-
-  </div>
-
-  <div class="example">
-   <p>The following markup:</p>
-   <pre>&lt;h3>Suggested groups&lt;/h3>
-&lt;menu type="toolbar">
- &lt;a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups&lt;/a>
-&lt;/menu>
-&lt;ul>
- &lt;li>
-  &lt;p>&lt;a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets&lt;/a> -
-     &lt;a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join&lt;/a>&lt;/p>
-  &lt;p>Group description: &lt;strong>Layout/presentation on the WWW.&lt;/strong>&lt;/p>
-  &lt;p><strong>&lt;meter value="0.5">Moderate activity,&lt;/meter></strong> Usenet, 618 subscribers&lt;/p>
- &lt;/li>
- &lt;li>
-  &lt;p>&lt;a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall&lt;/a> -
-     &lt;a href="/group/netscape.public.mozilla.xpinstall/subscribe">join&lt;/a>&lt;/p>
-  &lt;p>Group description: &lt;strong>Mozilla XPInstall discussion.&lt;/strong>&lt;/p>
-  &lt;p><strong>&lt;meter value="0.25">Low activity,&lt;/meter></strong> Usenet, 22 subscribers&lt;/p>
- &lt;/li>
- &lt;li>
-  &lt;p>&lt;a href="/group/mozilla.dev.general/view">mozilla.dev.general&lt;/a> -
-     &lt;a href="/group/mozilla.dev.general/subscribe">join&lt;/a>&lt;/p>
-  &lt;p><strong>&lt;meter value="0.25">Low activity,&lt;/meter></strong> Usenet, 66 subscribers&lt;/p>
- &lt;/li>
-&lt;/ul></pre>
-   <p>Might be rendered as follows:</p>
-   <p><img src="images/sample-meter.png" alt="With the &lt;meter> elements rendered as inline green bars of varying lengths."></p>
-  </div>
-
-  <p>User agents <span class="impl">may</span> combine the value of
-  the <code title="attr-title">title</code> attribute and the other
-  attributes to provide context-sensitive help or inline text
-  detailing the actual values.</p>
-
-  <div class="example">
-   <p>For example, the following snippet:</p>
-   <pre>&lt;meter min=0 max=60 value=23.2 title=seconds>&lt;/meter></pre>
-   <p>...might cause the user agent to display a gauge with a tooltip
-   saying "Value: 23.2 out of 60." on one line and "seconds" on a
-   second line.</p>
-  </div>
-
-  <div class="impl">
-
-  <p>The <dfn title="dom-meter-min"><code>min</code></dfn>, <dfn
-  title="dom-meter-max"><code>max</code></dfn>, <dfn
-  title="dom-meter-value"><code>value</code></dfn>, <dfn
-  title="dom-meter-low"><code>low</code></dfn>, <dfn
-  title="dom-meter-high"><code>high</code></dfn>, and <dfn
-  title="dom-meter-optimum"><code>optimum</code></dfn> IDL attributes
-  must <span>reflect</span> the respective content attributes of the
-  same name. When the relevant content attributes are absent, the IDL
-  attributes must return zero.</p>
-
-  </div>
-
-  <div class="example">
-
-   <p>The following example shows how a gauge could fall back to
-   localized or pretty-printed text.</p>
-
-   <pre>&lt;p>Disk usage: &lt;meter min=0 value=170261928 max=233257824>170&#x2009;261&#x2009;928 bytes used
-out of 233&#x2009;257&#x2009;824 bytes available&lt;/meter>&lt;/p></pre>
-
-  </div>
-
-
-
-
   <h4>The <dfn><code>ruby</code></dfn> element</h4>
 
   <dl class="element">
@@ -19121,16 +18593,6 @@
      <td><pre class="example">Elderflower cordial, with one <strong>&lt;mark>part&lt;/mark></strong> cordial to ten <strong>&lt;mark>part&lt;/mark></strong>s water, stands a<strong>&lt;mark>part&lt;/mark></strong> from the rest.</pre>
 
     <tr>
-     <td><code>progress</code>
-     <td>Progress bar
-     <td><pre class="example">Copying: <strong>&lt;progress value=0.75>75%&lt;/progress></strong></pre>
-
-    <tr>
-     <td><code>meter</code>
-     <td>Gauge
-     <td><pre class="example">Disk space remaining: <strong>&lt;meter value=0.75>75%&lt;meter></strong></pre>
-
-    <tr>
      <td><code>ruby</code>, <code>rt</code>, <code>rp</code>
      <td>Ruby annotations
      <td><pre class="example"><strong>&lt;ruby> OJ &lt;rp>(&lt;rt>Orange Juice&lt;rp>)&lt;/ruby></strong></pre>
@@ -33849,8 +33311,10 @@
    <li><code>input</code></li>
    <li><code>keygen</code></li>
    <li><code>label</code></li>
+   <li><code>meter</code></li>
    <li><code>object</code></li>
    <li><code>output</code></li>
+   <li><code>progress</code></li>
    <li><code>select</code></li>
    <li><code>textarea</code></li>
   </ul>
@@ -33893,6 +33357,9 @@
      <li><code>button</code></li>
      <li><code>input</code></li>
      <li><code>keygen</code></li>
+     <li><code>meter</code></li>
+     <li><code>output</code></li>
+     <li><code>progress</code></li>
      <li><code>select</code></li>
      <li><code>textarea</code></li>
     </ul>
@@ -42429,14 +41896,13 @@
 
 
 
-
   <h4>The <dfn><code>output</code></dfn> element</h4>
 
   <dl class="element">
    <dt>Categories</dt>
    <dd><span>Flow content</span>.</dd>
    <dd><span>Phrasing content</span>.</dd>
-   <dd><span title="category-listed">Listed</span> and <span title="category-reset">resettable</span> <span>form-associated element</span>.</dd>
+   <dd><span title="category-listed">Listed</span>, <span title="category-label">labelable</span>, and <span title="category-reset">resettable</span> <span>form-associated element</span>.</dd>
    <dt>Contexts in which this element may be used:</dt>
    <dd>Where <span>phrasing content</span> is expected.</dd>
    <dt>Content model:</dt>
@@ -42462,6 +41928,8 @@
   readonly attribute DOMString <span title="dom-cva-validationMessage">validationMessage</span>;
   boolean <span title="dom-cva-checkValidatity">checkValidity</span>();
   void <span title="dom-cva-setCustomValidity">setCustomValidity</span>(in DOMString error);
+
+  readonly attribute <span>NodeList</span> <span title="dom-lfe-labels">labels</span>;
 };</pre>
    </dd>
   </dl>
@@ -42594,7 +42062,9 @@
   title="dom-cva-checkValidatity">checkValidity()</code> and
   <code
   title="dom-cva-setCustomValidity">setCustomValidity()</code>
-  methods, are part of the <span>constraint validation API</span>.</p>
+  methods, are part of the <span>constraint validation API</span>. The
+  <code title="dom-lfe-labels">labels</code> attribute provides a list
+  of the element's <code>label</code>s.</p>
 
   <p><strong>Constraint validation</strong>: <code>output</code>
   elements are always <span>barred from constraint
@@ -42617,6 +42087,564 @@
 
 
 
+  <h4>The <dfn><code>progress</code></dfn> element</h4>
+
+  <dl class="element">
+   <dt>Categories</dt>
+   <dd><span>Flow content</span>.</dd>
+   <dd><span>Phrasing content</span>.</dd>
+   <dd><span title="category-label">Labelable</span> <span>form-associated element</span>.</dd>
+   <dt>Contexts in which this element may be used:</dt>
+   <dd>Where <span>phrasing content</span> is expected.</dd>
+   <dt>Content model:</dt>
+   <dd><span>Phrasing content</span>, but there must be no <code>progress</code> element descendants.</dd>
+   <dt>Content attributes:</dt>
+   <dd><span>Global attributes</span></dd>
+   <dd><code title="attr-progress-value">value</code></dd>
+   <dd><code title="attr-progress-max">max</code></dd>
+   <dd><code title="attr-fae-form">form</code></dd>
+   <dt>DOM interface:</dt>
+   <dd>
+<pre class="idl">interface <dfn>HTMLProgressElement</dfn> : <span>HTMLElement</span> {
+           attribute float <span title="dom-progress-value">value</span>;
+           attribute float <span title="dom-progress-max">max</span>;
+  readonly attribute float <span title="dom-progress-position">position</span>;
+  readonly attribute <span>HTMLFormElement</span> <span title="dom-fae-form">form</span>;
+  readonly attribute <span>NodeList</span> <span title="dom-lfe-labels">labels</span>;
+};</pre>
+   </dd>
+  </dl>
+
+  <p>The <code>progress</code> element <span>represents</span> the
+  completion progress of a task. The progress is either indeterminate,
+  indicating that progress is being made but that it is not clear how
+  much more work remains to be done before the task is complete
+  (e.g. because the task is waiting for a remote host to respond), or
+  the progress is a number in the range zero to a maximum, giving the
+  fraction of work that has so far been completed.</p>
+
+  <p>There are two attributes that determine the current task
+  completion represented by the element.</p>
+
+  <p>The <dfn title="attr-progress-value"><code>value</code></dfn>
+  attribute specifies how much of the task has been completed, and the
+  <dfn title="attr-progress-max"><code>max</code></dfn> attribute
+  specifies how much work the task requires in total. The units are
+  arbitrary and not specified.</p>
+
+  <p>Authors are encouraged to also include the current value and the
+  maximum value inline as text inside the element, so that the
+  progress is made available to users of legacy user agents.</p>
+
+  <div class="example">
+   <p>Here is a snippet of a Web application that shows the progress
+   of some automated task:</p>
+   <pre>&lt;section>
+ &lt;h2>Task Progress&lt;/h2>
+ &lt;p>Progress: &lt;progress id="p" max=100>&lt;span>0&lt;/span>%&lt;/progress>&lt;/p>
+ &lt;script>
+  var progressBar = document.getElementById('p');
+  function updateProgress(newValue) {
+    progressBar.value = newValue;
+    progressBar.getElementsByTagName('span')[0].textContent = newValue;
+  }
+ &lt;/script>
+&lt;/section></pre>
+   <p>(The <code>updateProgress()</code> method in this example would
+   be called by some other code on the page to update the actual
+   progress bar as the task progressed.)</p>
+  </div>
+
+  <p>The <code title="attr-progress-value">value</code> and <code
+  title="attr-progress-max">max</code> attributes, when present, must
+  have values that are <span title="valid floating point number">valid
+  floating point numbers</span>. The <code
+  title="attr-progress-value">value</code> attribute, if present, must
+  have a value equal to or greater than zero, and less than or equal
+  to the value of the <code title="attr-progress-max">max</code>
+  attribute, if present, or 1.0, otherwise. The <code
+  title="attr-progress-max">max</code> attribute, if present, must
+  have a value greater than zero.</p>
+
+  <p class="note">The <code>progress</code> element is the wrong
+  element to use for something that is just a gauge, as opposed to
+  task progress. For instance, indicating disk space usage using
+  <code>progress</code> would be inappropriate. Instead, the
+  <code>meter</code> element is available for such use cases.</p>
+
+  <div class="impl">
+
+  <p><strong>User agent requirements</strong>: If the <code
+  title="attr-progress-value">value</code> attribute is omitted, then
+  the progress bar is an indeterminate progress bar. Otherwise, it is
+  a determinate progress bar.</p>
+
+  <p>If the progress bar is a determinate progress bar and the element
+  has a <code title="attr-progress-max">max</code> attribute, the user
+  agent must parse the <code title="attr-progress-max">max</code>
+  attribute's value according to the <span>rules for parsing floating
+  point number values</span>. If this does not result in an error, and
+  if the parsed value is greater than zero, then the maximum value of
+  the progress bar is that value. Otherwise, if the element has no
+  <code title="attr-progress-max">max</code> attribute, or if it has
+  one but parsing it resulted in an error, or if the parsed value was
+  less than or equal to zero, then the maximum value of the progress
+  bar is 1.0.</p>
+
+  <p>If the progress bar is a determinate progress bar, user agents
+  must parse the <code title="attr-progress-value">value</code>
+  attribute's value according to the <span>rules for parsing floating
+  point number values</span>. If this does not result in an error, and
+  if the parsed value is less than the maximum value and greater than
+  zero, then the current value of the progress bar is that parsed
+  value. Otherwise, if the parsed value was greater than or equal to
+  the maximum value, then the current value of the progress bar is the
+  maximum value of the progress bar. Otherwise, if parsing the <code
+  title="attr-progress-value">value</code> attribute's value resulted
+  in an error, or a number less than or equal to zero, then the
+  current value of the progress bar is zero.</p>
+
+  <p><strong>UA requirements for showing the progress bar</strong>:
+  When representing a <code>progress</code> element to the user, the
+  UA should indicate whether it is a determinate or indeterminate
+  progress bar, and in the former case, should indicate the relative
+  position of the current value relative to the maximum value.</p>
+
+  <p>The <dfn title="dom-progress-max"><code>max</code></dfn> and <dfn
+  title="dom-progress-value"><code>value</code></dfn> IDL attributes
+  must <span>reflect</span> the respective content attributes of the
+  same name. When the relevant content attributes are absent, the IDL
+  attributes must return zero.</p>
+
+  <p>The <code title="attr-fae-form">form</code> attribute is used to
+  explicitly associate the <code>progress</code> element with its
+  <span>form owner</span>.</p>
+
+  <p><strong>Constraint validation</strong>: <code>progress</code>
+  elements are always <span>barred from constraint
+  validation</span>.</p>
+
+  </div>
+
+  <dl class="domintro">
+
+   <dt><var title="">progress</var> . <code title="dom-progress-position">position</code></dt>
+
+   <dd>
+
+    <p>For a determinate progress bar (one with known current and
+    maximum values), returns the result of dividing the current value
+    by the maximum value.</p>
+
+    <p>For an indeterminate progress bar, returns &#x2212;1.</p>
+
+  </dl>
+
+  <div class="impl">
+
+  <p>If the progress bar is an indeterminate progress bar, then the
+  <dfn title="dom-progress-position"><code>position</code></dfn> IDL
+  attribute must return &#x2212;1. Otherwise, it must return the result of
+  dividing the current value by the maximum value.</p>
+
+  <p>The <code title="dom-lfe-labels">labels</code> attribute provides
+  a list of the element's <code>label</code>s.</p>
+
+  </div>
+
+
+
+  <h4>The <dfn><code>meter</code></dfn> element</h4>
+  <!-- Keep this after <progress> and NOT close to <time> -->
+
+  <dl class="element">
+   <dt>Categories</dt>
+   <dd><span>Flow content</span>.</dd>
+   <dd><span>Phrasing content</span>.</dd>
+   <dd><span title="category-label">Labelable</span> <span>form-associated element</span>.</dd>
+   <dt>Contexts in which this element may be used:</dt>
+   <dd>Where <span>phrasing content</span> is expected.</dd>
+   <dt>Content model:</dt>
+   <dd><span>Phrasing content</span>, but there must be no <code>meter</code> element descendants.</dd>
+   <dt>Content attributes:</dt>
+   <dd><span>Global attributes</span></dd>
+   <dd><code title="attr-meter-value">value</code></dd>
+   <dd><code title="attr-meter-min">min</code></dd>
+   <dd><code title="attr-meter-max">max</code></dd>
+   <dd><code title="attr-meter-low">low</code></dd>
+   <dd><code title="attr-meter-high">high</code></dd>
+   <dd><code title="attr-meter-optimum">optimum</code></dd>
+   <dd><code title="attr-fae-form">form</code></dd>
+   <dt>DOM interface:</dt>
+   <dd>
+<pre class="idl">interface <dfn>HTMLMeterElement</dfn> : <span>HTMLElement</span> {
+           attribute float <span title="dom-meter-value">value</span>;
+           attribute float <span title="dom-meter-min">min</span>;
+           attribute float <span title="dom-meter-max">max</span>;
+           attribute float <span title="dom-meter-low">low</span>;
+           attribute float <span title="dom-meter-high">high</span>;
+           attribute float <span title="dom-meter-optimum">optimum</span>;
+  readonly attribute <span>HTMLFormElement</span> <span title="dom-fae-form">form</span>;
+  readonly attribute <span>NodeList</span> <span title="dom-lfe-labels">labels</span>;
+};</pre>
+   </dd>
+  </dl>
+
+  <p>The <code>meter</code> element <span>represents</span> a scalar
+  measurement within a known range, or a fractional value; for example
+  disk usage, the relevance of a query result, or the fraction of a
+  voting population to have selected a particular candidate.</p>
+
+  <p>This is also known as a gauge.</p>
+
+  <p class="note">The <code>meter</code> element should not be used to
+  indicate progress (as in a progress bar). For that role, HTML
+  provides a separate <code>progress</code> element.</p>
+
+  <p class="note">The <code>meter</code> element also does not
+  represent a scalar value of arbitrary range &mdash; for example, it
+  would be wrong to use this to report a weight, or height, unless
+  there is a known maximum value.</p>
+
+  <p>There are six attributes that determine the semantics of the
+  gauge represented by the element.</p>
+
+  <p>The <dfn title="attr-meter-min"><code>min</code></dfn> attribute
+  specifies the lower bound of the range, and the <dfn
+  title="attr-meter-max"><code>max</code></dfn> attribute specifies
+  the upper bound. The <dfn
+  title="attr-meter-value"><code>value</code></dfn> attribute
+  specifies the value to have the gauge indicate as the "measured"
+  value.</p>
+
+  <p>The other three attributes can be used to segment the gauge's
+  range into "low", "medium", and "high" parts, and to indicate which
+  part of the gauge is the "optimum" part. The <dfn
+  title="attr-meter-low"><code>low</code></dfn> attribute specifies
+  the range that is considered to be the "low" part, and the <dfn
+  title="attr-meter-high"><code>high</code></dfn> attribute specifies
+  the range that is considered to be the "high" part. The <dfn
+  title="attr-meter-optimum"><code>optimum</code></dfn> attribute
+  gives the position that is "optimum"; if that is higher than the
+  "high" value  then this indicates that the higher the value, the
+  better; if it's lower than the "low" mark then it indicates that
+  lower values are better, and naturally if it is in between then it
+  indicates that neither high nor low values are good.</p>
+
+  <p><strong class="impl">Authoring requirements</strong>: The <code
+  title="attr-meter-value">value</code> attribute must be
+  specified. The <code title="attr-meter-value">value</code>, <code
+  title="attr-meter-min">min</code>, <code
+  title="attr-meter-low">low</code>, <code
+  title="attr-meter-high">high</code>, <code
+  title="attr-meter-max">max</code>, and <code
+  title="attr-meter-optimum">optimum</code> attributes, when present,
+  must have values that are <span title="valid floating point
+  number">valid floating point numbers</span>.</p>
+
+  <p>In addition, the attributes' values are further constrained:</p>
+
+  <p>Let <var title="">value</var> be the <code
+  title="attr-meter-value">value</code> attribute's number.</p>
+
+  <p>If the <code title="attr-meter-min">min</code> attribute
+  attribute is specified, then let <var title="">minimum</var> be that
+  attribute's value; otherwise, let it be zero.</p>
+
+  <p>If the <code title="attr-meter-max">max</code> attribute
+  attribute is specified, then let <var title="">maximum</var> be that
+  attribute's value; otherwise, let it be 1.0.</p>
+
+  <p>The following inequalities must hold, as applicable:</p>
+
+  <ul class="brief">
+   <li><var title="">minimum</var> &le; <var title="">value</var> &le; <var title="">maximum</var></li>
+   <li><var title="">minimum</var> &le; <code title="attr-meter-low">low</code> &le; <var title="">maximum</var> (if <code title="attr-meter-low">low</code> is specified)</li>
+   <li><var title="">minimum</var> &le; <code title="attr-meter-high">high</code> &le; <var title="">maximum</var> (if <code title="attr-meter-high">high</code> is specified)</li>
+   <li><var title="">minimum</var> &le; <code title="attr-meter-optimum">optimum</code> &le; <var title="">maximum</var> (if <code title="attr-meter-optimum">optimum</code> is specified)</li>
+  </ul>
+
+  <p>If both the <code title="attr-meter-low">low</code> and <code
+  title="attr-meter-high">high</code> attributes are specified, then
+  the <code title="attr-meter-low">low</code> attribute's value must
+  be less than or equal to the value of the <code
+  title="attr-meter-high">high</code> attribute.</p>
+
+  <p class="note">If no minimum or maximum is specified, then the
+  range is assumed to be 0..1, and the value thus has to be within
+  that range.</p>
+
+  <p>Authors are encouraged to include a textual representation of the
+  gauge's state in the element's contents, for users of user agents
+  that do not support the <code>meter</code> element.</p>
+
+  <div class="example">
+
+   <p>The following examples show three gauges that would all be
+   three-quarters full:</p>
+
+   <pre>Storage space usage: &lt;meter value=6 max=8>6 blocks used (out of 8 total)&lt;/meter>
+Voter turnout: &lt;meter value=0.75>&lt;img alt="75%" src="graph75.png">&lt;/meter>
+Tickets sold: &lt;meter min="0" max="100" value="75">&lt;/meter></pre>
+
+   <p>The following example is incorrect use of the element, because
+   it doesn't give a range (and since the default maximum is 1, both
+   of the gauges would end up looking maxed out):</p>
+
+   <pre class="bad">&lt;p>The grapefruit pie had a radius of &lt;meter value=12>12cm&lt;/meter>
+and a height of &lt;meter value=2>2cm&lt;/meter>.&lt;/p> &lt;!-- <strong>BAD!</strong> --></pre>
+
+   <p>Instead, one would either not include the meter element, or use
+   the meter element with a defined range to give the dimensions in
+   context compared to other pies:</p>
+
+   <pre>&lt;p>The grapefruit pie had a radius of 12cm and a height of
+2cm.&lt;/p>
+&lt;dl>
+ &lt;dt>Radius: &lt;dd> &lt;meter min=0 max=20 value=12>12cm&lt;/meter>
+ &lt;dt>Height: &lt;dd> &lt;meter min=0 max=10 value=2>2cm&lt;/meter>
+&lt;/dl></pre>
+
+  </div>
+
+  <p>There is no explicit way to specify units in the
+  <code>meter</code> element, but the units may be specified in the
+  <code title="attr-title">title</code> attribute in free-form text.</p>
+
+  <div class="example">
+
+   <p>The example above could be extended to mention the units:</p>
+
+   <pre>&lt;dl>
+ &lt;dt>Radius: &lt;dd> &lt;meter min=0 max=20 value=12 title="centimeters">12cm&lt;/meter>
+ &lt;dt>Height: &lt;dd> &lt;meter min=0 max=10 value=2 title="centimeters">2cm&lt;/meter>
+&lt;/dl></pre>
+
+  </div>
+
+  <div class="impl">
+
+  <p><strong>User agent requirements</strong>: User agents must parse
+  the <code title="attr-meter-min">min</code>, <code
+  title="attr-meter-max">max</code>, <code
+  title="attr-meter-value">value</code>, <code
+  title="attr-meter-low">low</code>, <code
+  title="attr-meter-high">high</code>, and <code
+  title="attr-meter-optimum">optimum</code> attributes using the
+  <span>rules for parsing floating point number values</span>.</p>
+
+  <p>User agents must then use all these numbers to obtain values for
+  six points on the gauge, as follows. (The order in which these are
+  evaluated is important, as some of the values refer to earlier
+  ones.)</p>
+
+  <dl>
+
+   <dt>The minimum value</dt>
+
+   <dd>
+    <p>If the <code title="attr-meter-min">min</code> attribute is
+    specified and a value could be parsed out of it, then the minimum
+    value is that value. Otherwise, the minimum value is zero.</p>
+   </dd>
+
+   <dt>The maximum value</dt>
+
+   <dd>
+
+    <p>If the <code title="attr-meter-max">max</code> attribute is
+    specified and a value could be parsed out of it, the maximum value
+    is that value. Otherwise, the maximum value is 1.0.</p>
+
+    <p>If the maximum value would be less than the minimum value, then
+    the maximum value is actually the same as the minimum value.</p>
+
+   </dd>
+
+   <dt>The actual value</dt>
+
+   <dd>
+
+    <p>If the <code title="attr-meter-value">value</code> attribute is
+    specified and a value could be parsed out of it, then that value
+    is the actual value. Otherwise, the actual value is zero.</p>
+
+    <p>If the actual value would be less than the minimum value, then
+    the actual value is actually the same as the minimum value.</p>
+
+    <p>If, on the other hand, the actual value would be greater than
+    the maximum value, then the actual value is the maximum value.</p>
+
+   </dd>
+
+   <dt>The low boundary</dt>
+
+   <dd>
+
+    <p>If the <code title="attr-meter-low">low</code> attribute is
+    specified and a value could be parsed out of it, then the low
+    boundary is that value. Otherwise, the low boundary is the same as
+    the minimum value.</p>
+
+    <p>If the low boundary is then less than the minimum value, then
+    the low boundary is actually the same as the minimum
+    value. Similarly, if the low boundary is greater than the maximum
+    value, then it is actually the maximum value instead.</p>
+
+   </dd>
+
+   <dt>The high boundary</dt>
+
+   <dd>
+
+    <p>If the <code title="attr-meter-high">high</code> attribute is
+    specified and a value could be parsed out of it, then the high
+    boundary is that value. Otherwise, the high boundary is the same
+    as the maximum value.</p>
+
+    <p>If the high boundary is then less than the low boundary, then
+    the high boundary is actually the same as the low
+    boundary. Similarly, if the high boundary is greater than the
+    maximum value, then it is actually the maximum value instead.</p>
+
+   </dd>
+
+   <dt>The optimum point</dt>
+
+   <dd>
+
+    <p>If the <code title="attr-meter-optimum">optimum</code>
+    attribute is specified and a value could be parsed out of it, then
+    the optimum point is that value. Otherwise, the optimum point is
+    the midpoint between the minimum value and the maximum value.</p>
+
+    <p>If the optimum point is then less than the minimum value, then
+    the optimum point is actually the same as the minimum
+    value. Similarly, if the optimum point is greater than the maximum
+    value, then it is actually the maximum value instead.</p>
+
+   </dd>
+
+  </dl>
+
+  <p>All of which will result in the following inequalities all being
+  true:</p>
+
+  <ul class="brief">
+   <li>minimum value &le; actual value &le; maximum value</li>
+   <li>minimum value &le; low boundary &le; high boundary &le; maximum value</li>
+   <li>minimum value &le; optimum point &le; maximum value</li>
+  </ul>
+
+  <!-- next two paragraphs are duplicated in the <datagrid> section [v2DATAGRID] -->
+
+  <p><strong>UA requirements for regions of the gauge</strong>: If the
+  optimum point is equal to the low boundary or the high boundary, or
+  anywhere in between them, then the region between the low and high
+  boundaries of the gauge must be treated as the optimum region, and
+  the low and high parts, if any, must be treated as
+  suboptimal. Otherwise, if the optimum point is less than the low
+  boundary, then the region between the minimum value and the low
+  boundary must be treated as the optimum region, the region between
+  the low boundary and the high boundary must be treated as a
+  suboptimal region, and the region between the high boundary and the
+  maximum value must be treated as an even less good region. Finally,
+  if the optimum point is higher than the high boundary, then the
+  situation is reversed; the region between the high boundary and the
+  maximum value must be treated as the optimum region, the region
+  between the high boundary and the low boundary must be treated as a
+  suboptimal region, and the remaining region between the low boundary
+  and the minimum value must be treated as an even less good
+  region.</p>
+
+  <p><strong>UA requirements for showing the gauge</strong>: When
+  representing a <code>meter</code> element to the user, the UA should
+  indicate the relative position of the actual value to the minimum
+  and maximum values, and the relationship between the actual value
+  and the three regions of the gauge.</p>
+
+  </div>
+
+  <div class="example">
+   <p>The following markup:</p>
+   <pre>&lt;h3>Suggested groups&lt;/h3>
+&lt;menu type="toolbar">
+ &lt;a href="?cmd=hsg" onclick="hideSuggestedGroups()">Hide suggested groups&lt;/a>
+&lt;/menu>
+&lt;ul>
+ &lt;li>
+  &lt;p>&lt;a href="/group/comp.infosystems.www.authoring.stylesheets/view">comp.infosystems.www.authoring.stylesheets&lt;/a> -
+     &lt;a href="/group/comp.infosystems.www.authoring.stylesheets/subscribe">join&lt;/a>&lt;/p>
+  &lt;p>Group description: &lt;strong>Layout/presentation on the WWW.&lt;/strong>&lt;/p>
+  &lt;p><strong>&lt;meter value="0.5">Moderate activity,&lt;/meter></strong> Usenet, 618 subscribers&lt;/p>
+ &lt;/li>
+ &lt;li>
+  &lt;p>&lt;a href="/group/netscape.public.mozilla.xpinstall/view">netscape.public.mozilla.xpinstall&lt;/a> -
+     &lt;a href="/group/netscape.public.mozilla.xpinstall/subscribe">join&lt;/a>&lt;/p>
+  &lt;p>Group description: &lt;strong>Mozilla XPInstall discussion.&lt;/strong>&lt;/p>
+  &lt;p><strong>&lt;meter value="0.25">Low activity,&lt;/meter></strong> Usenet, 22 subscribers&lt;/p>
+ &lt;/li>
+ &lt;li>
+  &lt;p>&lt;a href="/group/mozilla.dev.general/view">mozilla.dev.general&lt;/a> -
+     &lt;a href="/group/mozilla.dev.general/subscribe">join&lt;/a>&lt;/p>
+  &lt;p><strong>&lt;meter value="0.25">Low activity,&lt;/meter></strong> Usenet, 66 subscribers&lt;/p>
+ &lt;/li>
+&lt;/ul></pre>
+   <p>Might be rendered as follows:</p>
+   <p><img src="images/sample-meter.png" alt="With the &lt;meter> elements rendered as inline green bars of varying lengths."></p>
+  </div>
+
+  <p>User agents <span class="impl">may</span> combine the value of
+  the <code title="attr-title">title</code> attribute and the other
+  attributes to provide context-sensitive help or inline text
+  detailing the actual values.</p>
+
+  <div class="example">
+   <p>For example, the following snippet:</p>
+   <pre>&lt;meter min=0 max=60 value=23.2 title=seconds>&lt;/meter></pre>
+   <p>...might cause the user agent to display a gauge with a tooltip
+   saying "Value: 23.2 out of 60." on one line and "seconds" on a
+   second line.</p>
+  </div>
+
+  <p>The <code title="attr-fae-form">form</code> attribute is used to
+  explicitly associate the <code>meter</code> element with its
+  <span>form owner</span>.</p>
+
+  <p><strong>Constraint validation</strong>: <code>meter</code>
+  elements are always <span>barred from constraint
+  validation</span>.</p>
+
+  <div class="impl">
+
+  <p>The <dfn title="dom-meter-min"><code>min</code></dfn>, <dfn
+  title="dom-meter-max"><code>max</code></dfn>, <dfn
+  title="dom-meter-value"><code>value</code></dfn>, <dfn
+  title="dom-meter-low"><code>low</code></dfn>, <dfn
+  title="dom-meter-high"><code>high</code></dfn>, and <dfn
+  title="dom-meter-optimum"><code>optimum</code></dfn> IDL attributes
+  must <span>reflect</span> the respective content attributes of the
+  same name. When the relevant content attributes are absent, the IDL
+  attributes must return zero.</p>
+
+  <p>The <code title="dom-lfe-labels">labels</code> attribute provides
+  a list of the element's <code>label</code>s.</p>
+
+  </div>
+
+  <div class="example">
+
+   <p>The following example shows how a gauge could fall back to
+   localized or pretty-printed text.</p>
+
+   <pre>&lt;p>Disk usage: &lt;meter min=0 value=170261928 max=233257824>170&#x2009;261&#x2009;928 bytes used
+out of 233&#x2009;257&#x2009;824 bytes available&lt;/meter>&lt;/p></pre>
+
+  </div>
+
+
+
+
   <h4>Association of controls and forms</h4>
 
   <p>A <span>form-associated element</span> can have a relationship
@@ -42761,6 +42789,9 @@
 
   <div class="impl">
 
+  <!-- XXX should mention dom-fae-form in the various sections
+  defining elements that have it -->
+
   <p><span title="form-associated element">Form-associated
   elements</span> have a <dfn
   title="dom-fae-form"><code>form</code></dfn> IDL attribute, which,
@@ -42793,6 +42824,9 @@
   the empty string, then it is <span>barred from constraint
   validation</span>.</p>
 
+  <!-- XXX should mention dom-fe-name in the various sections
+  defining elements that have it -->
+
   <p>The <dfn title="dom-fe-name"><code>name</code></dfn> IDL
   attribute must <span>reflect</span> the <code
   title="attr-fe-name">name</code> content attribute.</p>
@@ -42825,6 +42859,9 @@
   title="concept-fe-disabled">disabled</span>, it is <span>barred from
   constraint validation</span>.</p>
 
+  <!-- XXX should mention dom-fe-disabled in the various sections
+  defining elements that have it -->
+
   <p>The <dfn title="dom-fe-disabled"><code>disabled</code></dfn> IDL
   attribute must <span>reflect</span> the <code
   title="attr-fe-disabled">disabled</code> content attribute.</p>
@@ -42882,6 +42919,9 @@
   <p class="note">Focusing the control does not imply that the user
   agent must focus the browser window if it has lost focus.</p>
 
+  <!-- XXX should mention dom-fe-autofocus in the various sections
+  defining elements that have it -->
+
   <p>The <dfn title="dom-fe-autofocus"><code>autofocus</code></dfn>
   IDL attribute must <span>reflect</span> the content attribute of the
   same name.</p>
@@ -93253,7 +93293,7 @@
      <td><span title="Flow content">flow</span>;
          <span title="Phrasing content">phrasing</span>;
          <span title="Interactive content">interactive</span>;
-         <span title="category-listed">Listed</span>;
+         <span title="category-listed">listed</span>;
          <span title="category-label">labelable</span>;
          <span title="category-submit">submittable</span>;
          <span title="Form-associated element">form-associated</span></td>
@@ -93870,16 +93910,19 @@
      <th><code>meter</code></th>
      <td>Gauge</td>
      <td><span title="Flow content">flow</span>;
-         <span title="Phrasing content">phrasing</span></td>
+         <span title="Phrasing content">phrasing</span>;
+         <span title="category-label">labelable</span>;
+         <span title="Form-associated element">form-associated</span></td>
      <td><span title="Phrasing content">phrasing</span></td>
      <td><span title="Phrasing content">phrasing</span>*</td>
      <td><span title="global attributes">globals</span>;
          <code title="attr-meter-value">value</code>;
          <code title="attr-meter-min">min</code>;
+         <code title="attr-meter-max">max</code>;
          <code title="attr-meter-low">low</code>;
          <code title="attr-meter-high">high</code>;
-         <code title="attr-meter-max">max</code>;
-         <code title="attr-meter-optimum">optimum</code></td>
+         <code title="attr-meter-optimum">optimum</code>;
+         <code title="attr-fae-form">form</code></td>
      <td><code>HTMLMeterElement</code></td>
     </tr>
 
@@ -93978,6 +94021,7 @@
      <td><span title="Flow content">flow</span>;
          <span title="Phrasing content">phrasing</span>;
          <span title="category-listed">listed</span>;
+         <span title="category-label">labelable</span>;
          <span title="category-reset">resettable</span>;
          <span title="Form-associated element">form-associated</span></td>
      <td><span title="Phrasing content">phrasing</span></td>
@@ -94027,12 +94071,15 @@
      <th><code>progress</code></th>
      <td>Progress bar</td>
      <td><span title="Flow content">flow</span>;
-         <span title="Phrasing content">phrasing</span></td>
+         <span title="Phrasing content">phrasing</span>;
+         <span title="category-label">labelable</span>;
+         <span title="Form-associated element">form-associated</span></td>
      <td><span title="Phrasing content">phrasing</span></td>
      <td><span title="Phrasing content">phrasing</span>*</td>
      <td><span title="global attributes">globals</span>;
          <code title="attr-progress-value">value</code>;
-         <code title="attr-progress-max">max</code></td>
+         <code title="attr-progress-max">max</code>;
+         <code title="attr-fae-form">form</code></td>
      <td><code>HTMLProgressElement</code></td>
     </tr>
 
@@ -94624,8 +94671,10 @@
           <code title="attr-fae-form">input</code>;
           <code title="attr-fae-form">keygen</code>;
           <code title="attr-fae-form">label</code>;
+          <code title="attr-fae-form">meter</code>;
           <code title="attr-fae-form">object</code>;
           <code title="attr-fae-form">output</code>;
+          <code title="attr-fae-form">progress</code>;
           <code title="attr-fae-form">select</code>;
           <code title="attr-fae-form">textarea</code>
      <td> Associates the control with a <code>form</code> element

|