[html5] r5067 - [giow] (0) Captions - Stage 1: the <track> element.

whatwg at whatwg.org whatwg at whatwg.org
Mon May 3 18:41:36 PDT 2010


Author: ianh
Date: 2010-05-03 18:41:35 -0700 (Mon, 03 May 2010)
New Revision: 5067

Modified:
   complete.html
   index
   source
Log:
[giow] (0) Captions - Stage 1: the <track> element.

Modified: complete.html
===================================================================
--- complete.html	2010-04-30 23:13:28 UTC (rev 5066)
+++ complete.html	2010-05-04 01:41:35 UTC (rev 5067)
@@ -186,7 +186,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
    <hgroup><h1>Web Applications 1.0</h1>
-    <h2 class="no-num no-toc">Draft Standard — 30 April 2010</h2>
+    <h2 class="no-num no-toc">Draft Standard — 4 May 2010</h2>
    </hgroup><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>
    <!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -515,50 +515,52 @@
      <li><a href=#video><span class=secno>4.8.6 </span>The <code>video</code> element</a></li>
      <li><a href=#audio><span class=secno>4.8.7 </span>The <code>audio</code> element</a></li>
      <li><a href=#the-source-element><span class=secno>4.8.8 </span>The <code>source</code> element</a></li>
-     <li><a href=#media-elements><span class=secno>4.8.9 </span>Media elements</a>
+     <li><a href=#the-track-element><span class=secno>4.8.9 </span>The <code>track</code> element</a></li>
+     <li><a href=#media-elements><span class=secno>4.8.10 </span>Media elements</a>
       <ol>
-       <li><a href=#error-codes><span class=secno>4.8.9.1 </span>Error codes</a></li>
-       <li><a href=#location-of-the-media-resource><span class=secno>4.8.9.2 </span>Location of the media resource</a></li>
-       <li><a href=#mime-types><span class=secno>4.8.9.3 </span>MIME types</a></li>
-       <li><a href=#network-states><span class=secno>4.8.9.4 </span>Network states</a></li>
-       <li><a href=#loading-the-media-resource><span class=secno>4.8.9.5 </span>Loading the media resource</a></li>
-       <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.9.6 </span>Offsets into the media resource</a></li>
-       <li><a href=#the-ready-states><span class=secno>4.8.9.7 </span>The ready states</a></li>
-       <li><a href=#playing-the-media-resource><span class=secno>4.8.9.8 </span>Playing the media resource</a></li>
-       <li><a href=#seeking><span class=secno>4.8.9.9 </span>Seeking</a></li>
-       <li><a href=#user-interface><span class=secno>4.8.9.10 </span>User interface</a></li>
-       <li><a href=#time-ranges><span class=secno>4.8.9.11 </span>Time ranges</a></li>
-       <li><a href=#mediaevents><span class=secno>4.8.9.12 </span>Event summary</a></li>
-       <li><a href=#security-and-privacy-considerations><span class=secno>4.8.9.13 </span>Security and privacy considerations</a></ol></li>
-     <li><a href=#the-canvas-element><span class=secno>4.8.10 </span>The <code>canvas</code> element</a>
+       <li><a href=#error-codes><span class=secno>4.8.10.1 </span>Error codes</a></li>
+       <li><a href=#location-of-the-media-resource><span class=secno>4.8.10.2 </span>Location of the media resource</a></li>
+       <li><a href=#mime-types><span class=secno>4.8.10.3 </span>MIME types</a></li>
+       <li><a href=#network-states><span class=secno>4.8.10.4 </span>Network states</a></li>
+       <li><a href=#loading-the-media-resource><span class=secno>4.8.10.5 </span>Loading the media resource</a></li>
+       <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.10.6 </span>Offsets into the media resource</a></li>
+       <li><a href=#the-ready-states><span class=secno>4.8.10.7 </span>The ready states</a></li>
+       <li><a href=#playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</a></li>
+       <li><a href=#seeking><span class=secno>4.8.10.9 </span>Seeking</a></li>
+       <li><a href=#timed-tracks><span class=secno>4.8.10.10 </span>Timed tracks</a></li>
+       <li><a href=#user-interface><span class=secno>4.8.10.11 </span>User interface</a></li>
+       <li><a href=#time-ranges><span class=secno>4.8.10.12 </span>Time ranges</a></li>
+       <li><a href=#mediaevents><span class=secno>4.8.10.13 </span>Event summary</a></li>
+       <li><a href=#security-and-privacy-considerations><span class=secno>4.8.10.14 </span>Security and privacy considerations</a></ol></li>
+     <li><a href=#the-canvas-element><span class=secno>4.8.11 </span>The <code>canvas</code> element</a>
       <ol>
-       <li><a href=#2dcontext><span class=secno>4.8.10.1 </span>The 2D context</a>
+       <li><a href=#2dcontext><span class=secno>4.8.11.1 </span>The 2D context</a>
         <ol>
-         <li><a href=#the-canvas-state><span class=secno>4.8.10.1.1 </span>The canvas state</a></li>
-         <li><a href=#transformations><span class=secno>4.8.10.1.2 </span>Transformations</a></li>
-         <li><a href=#compositing><span class=secno>4.8.10.1.3 </span>Compositing</a></li>
-         <li><a href=#colors-and-styles><span class=secno>4.8.10.1.4 </span>Colors and styles</a></li>
-         <li><a href=#line-styles><span class=secno>4.8.10.1.5 </span>Line styles</a></li>
-         <li><a href=#shadows><span class=secno>4.8.10.1.6 </span>Shadows</a></li>
-         <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.10.1.7 </span>Simple shapes (rectangles)</a></li>
-         <li><a href=#complex-shapes-(paths)><span class=secno>4.8.10.1.8 </span>Complex shapes (paths)</a></li>
-         <li><a href=#focus-management-0><span class=secno>4.8.10.1.9 </span>Focus management</a></li>
-         <li><a href=#text-0><span class=secno>4.8.10.1.10 </span>Text</a></li>
-         <li><a href=#images><span class=secno>4.8.10.1.11 </span>Images</a></li>
-         <li><a href=#pixel-manipulation><span class=secno>4.8.10.1.12 </span>Pixel manipulation</a></li>
-         <li><a href=#drawing-model><span class=secno>4.8.10.1.13 </span>Drawing model</a></li>
-         <li><a href=#examples><span class=secno>4.8.10.1.14 </span>Examples</a></ol></li>
-       <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.10.2 </span>Color spaces and color correction</a></li>
-       <li><a href=#security-with-canvas-elements><span class=secno>4.8.10.3 </span>Security with <code>canvas</code> elements</a></ol></li>
-     <li><a href=#the-map-element><span class=secno>4.8.11 </span>The <code>map</code> element</a></li>
-     <li><a href=#the-area-element><span class=secno>4.8.12 </span>The <code>area</code> element</a></li>
-     <li><a href=#image-maps><span class=secno>4.8.13 </span>Image maps</a>
+         <li><a href=#the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</a></li>
+         <li><a href=#transformations><span class=secno>4.8.11.1.2 </span>Transformations</a></li>
+         <li><a href=#compositing><span class=secno>4.8.11.1.3 </span>Compositing</a></li>
+         <li><a href=#colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</a></li>
+         <li><a href=#line-styles><span class=secno>4.8.11.1.5 </span>Line styles</a></li>
+         <li><a href=#shadows><span class=secno>4.8.11.1.6 </span>Shadows</a></li>
+         <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</a></li>
+         <li><a href=#complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</a></li>
+         <li><a href=#focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</a></li>
+         <li><a href=#text-0><span class=secno>4.8.11.1.10 </span>Text</a></li>
+         <li><a href=#images><span class=secno>4.8.11.1.11 </span>Images</a></li>
+         <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
+         <li><a href=#drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</a></li>
+         <li><a href=#examples><span class=secno>4.8.11.1.14 </span>Examples</a></ol></li>
+       <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
+       <li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
+     <li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
+     <li><a href=#the-area-element><span class=secno>4.8.13 </span>The <code>area</code> element</a></li>
+     <li><a href=#image-maps><span class=secno>4.8.14 </span>Image maps</a>
       <ol>
-       <li><a href=#authoring><span class=secno>4.8.13.1 </span>Authoring</a></li>
-       <li><a href=#processing-model><span class=secno>4.8.13.2 </span>Processing model</a></ol></li>
-     <li><a href=#mathml><span class=secno>4.8.14 </span>MathML</a></li>
-     <li><a href=#svg-0><span class=secno>4.8.15 </span>SVG</a></li>
-     <li><a href=#dimension-attributes><span class=secno>4.8.16 </span>Dimension attributes</a></ol></li>
+       <li><a href=#authoring><span class=secno>4.8.14.1 </span>Authoring</a></li>
+       <li><a href=#processing-model><span class=secno>4.8.14.2 </span>Processing model</a></ol></li>
+     <li><a href=#mathml><span class=secno>4.8.15 </span>MathML</a></li>
+     <li><a href=#svg-0><span class=secno>4.8.16 </span>SVG</a></li>
+     <li><a href=#dimension-attributes><span class=secno>4.8.17 </span>Dimension attributes</a></ol></li>
    <li><a href=#tabular-data><span class=secno>4.9 </span>Tabular data</a>
     <ol>
      <li><a href=#the-table-element><span class=secno>4.9.1 </span>The <code>table</code> element</a></li>
@@ -1249,10 +1251,11 @@
    <li><a href=#replaced-elements><span class=secno>14.3 </span>Replaced elements</a>
     <ol>
      <li><a href=#embedded-content-2><span class=secno>14.3.1 </span>Embedded content</a></li>
-     <li><a href=#images-0><span class=secno>14.3.2 </span>Images</a></li>
-     <li><a href=#attributes-for-embedded-content-and-images><span class=secno>14.3.3 </span>Attributes for embedded content and images</a></li>
-     <li><a href=#image-maps-0><span class=secno>14.3.4 </span>Image maps</a></li>
-     <li><a href=#toolbars-0><span class=secno>14.3.5 </span>Toolbars</a></ol></li>
+     <li><a href=#timed-tracks-0><span class=secno>14.3.2 </span>Timed tracks</a></li>
+     <li><a href=#images-0><span class=secno>14.3.3 </span>Images</a></li>
+     <li><a href=#attributes-for-embedded-content-and-images><span class=secno>14.3.4 </span>Attributes for embedded content and images</a></li>
+     <li><a href=#image-maps-0><span class=secno>14.3.5 </span>Image maps</a></li>
+     <li><a href=#toolbars-0><span class=secno>14.3.6 </span>Toolbars</a></ol></li>
    <li><a href=#bindings><span class=secno>14.4 </span>Bindings</a>
     <ol>
      <li><a href=#introduction-13><span class=secno>14.4.1 </span>Introduction</a></li>
@@ -22928,8 +22931,8 @@
    <dt>Contexts in which this element may be used:</dt>
    <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
    <dt>Content model:</dt>
-   <dd>If the element has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
-   <dd>If the element does not have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: one or more <code><a href=#the-source-element>source</a></code> elements, then, <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
+   <dd>If the element has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: zero or more <code><a href=#the-track-element>track</a></code> elements, then <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
+   <dd>If the element does not have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: one or more <code><a href=#the-source-element>source</a></code> elements, then zero or more <code><a href=#the-track-element>track</a></code> elements, then <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
    <dt>Content attributes:</dt>
    <dd><a href=#global-attributes>Global attributes</a></dd>
    <dd><code title=attr-media-src><a href=#attr-media-src>src</a></code></dd>
@@ -23218,8 +23221,8 @@
    <dt>Contexts in which this element may be used:</dt>
    <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
    <dt>Content model:</dt>
-   <dd>If the element has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
-   <dd>If the element does not have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: one or more <code><a href=#the-source-element>source</a></code> elements, then, <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
+   <dd>If the element has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: zero or more <code><a href=#the-track-element>track</a></code> elements, then <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
+   <dd>If the element does not have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: one or more <code><a href=#the-source-element>source</a></code> elements, then zero or more <code><a href=#the-track-element>track</a></code> elements, then <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
    <dt>Content attributes:</dt>
    <dd><a href=#global-attributes>Global attributes</a></dd>
    <dd><code title=attr-media-src><a href=#attr-media-src>src</a></code></dd>
@@ -23349,7 +23352,7 @@
   <dl class=element><dt>Categories</dt>
    <dd>None.</dd>
    <dt>Contexts in which this element may be used:</dt>
-   <dd>As a child of a <a href=#media-element>media element</a>, before any <a href=#flow-content>flow content</a>.</dd>
+   <dd>As a child of a <a href=#media-element>media element</a>, before any <a href=#flow-content>flow content</a> or <code><a href=#the-track-element>track</a></code> elements.</dd>
    <dt>Content model:</dt>
    <dd>Empty.</dd>
    <dt>Content attributes:</dt>
@@ -23524,8 +23527,94 @@
 
 
 
-  <h4 id=media-elements><span class=secno>4.8.9 </span>Media elements</h4>
+  <h4 id=the-track-element><span class=secno>4.8.9 </span>The <dfn><code>track</code></dfn> element</h4>
 
+  <dl class=element><dt>Categories</dt>
+   <dd>None.</dd>
+   <dt>Contexts in which this element may be used:</dt>
+   <dd>As a child of a <a href=#media-element>media element</a>, before any <a href=#flow-content>flow content</a>.</dd>
+   <dt>Content model:</dt>
+   <dd>Empty.</dd>
+   <dt>Content attributes:</dt>
+   <dd><a href=#global-attributes>Global attributes</a></dd>
+   <dd><code title=attr-track-kind><a href=#attr-track-kind>kind</a></code></dd>
+   <dd><code title=attr-track-label><a href=#attr-track-label>label</a></code></dd>
+   <dd><code title=attr-track-src><a href=#attr-track-src>src</a></code></dd>
+   <dd><code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code></dd>
+   <dt>DOM interface:</dt>
+   <dd>
+<pre class=idl>interface <dfn id=htmltrackelement>HTMLTrackElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+           attribute DOMString <a href=#dom-track-kind title=dom-track-kind>kind</a>;
+           attribute DOMString <a href=#dom-track-label title=dom-track-label>label</a>;
+           attribute DOMString <a href=#dom-track-src title=dom-track-src>src</a>;
+           attribute DOMString <a href=#dom-track-srclang title=dom-track-srclang>srclang</a>;
+};</pre>
+   </dd>
+  </dl><p>The <code><a href=#the-track-element>track</a></code> element allows authors to specify explicit
+  external timed tracks for <a href=#media-element title="media element">media
+  elements</a>. It does not <a href=#represents title=represents>represent</a> anything on its own.</p>
+
+  <p>The <dfn id=attr-track-kind title=attr-track-kind><code>kind</code></dfn>
+  attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The following
+  table lists the keywords defined for this attribute. The states
+  given in the first cell of the rows with keywords give the states to
+  which those keywords map.</p>
+
+  <table><thead><tr><th>State
+     <th>Keywords
+     <th>Brief description
+   <tbody><tr><td><span title=attr-track-kind-subtitle>Subtitles</span>
+     <td><dfn id=attr-track-kind-keyword-subtitles title=attr-track-kind-keyword-subtitles><code>subtitles</code></dfn>
+     <td>Translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the <a href=#media-resource>media resource</a>'s soundtrack).
+    <tr><td><span title=attr-track-kind-caption>Captions</span>
+     <td><dfn id=attr-track-kind-keyword-captions title=attr-track-kind-keyword-captions><code>captions</code></dfn>
+     <td>Transcription of the dialogue, suitable for when the soundtrack is unavailable (e.g. because it is muted or because the user is deaf). 
+    <tr><td><span title=attr-track-kind-descriptions>Descriptions</span>
+     <td><dfn id=attr-track-kind-keyword-descriptions title=attr-track-kind-keyword-descriptions><code>descriptions</code></dfn>
+     <td>Textual descriptions of the video component of the <a href=#media-resource>media resource</a>, intended for audio synthesis when the visual component is unavailable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind).
+    <tr><td><span title=attr-track-kind-chapters>Chapters</span>
+     <td><dfn id=attr-track-kind-keyword-chapters title=attr-track-kind-keyword-chapters><code>chapters</code></dfn>
+     <td>Chapter titles, intended to be used for navigating the <a href=#media-resource>media resource</a>.
+    <tr><td><span title=attr-track-kind-metadata>Metadata</span>
+     <td><dfn id=attr-track-kind-keyword-metadata title=attr-track-kind-keyword-metadata><code>metadata</code></dfn>
+     <td>Tracks intended for use from script.
+  </table><p>The attribute may be omitted. The <i>missing value default</i> is
+  the <span title=attr-track-kind-captions>captions</span> state.</p>
+
+  <p>The <dfn id=attr-track-src title=attr-track-src><code>src</code></dfn> attribute
+  gives the address of the time track data. The value must be a
+  <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
+  spaces</a>. This attribute must be present.</p>
+
+  <p>The <dfn id=attr-track-srclang title=attr-track-srclang><code>srclang</code></dfn>
+  attribute gives the language of the time track data. The value must
+  be a valid BCP 47 language tag. This attribute must be present if
+  the element's <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code> attribute is
+  in the <span title=attr-track-kind-subtitles>subtitles</span>
+  state. <a href=#refsBCP47>[BCP47]</a></p>
+
+  <p>The <dfn id=attr-track-label title=attr-track-label><code>label</code></dfn>
+  attribute gives a user-readable title for the track.</p>
+
+  <p>There must not be two <code><a href=#the-track-element>track</a></code> element children of the
+  same <a href=#media-element>media element</a> whose <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code> attributes are in the same
+  state, whose <code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code>
+  attributes are both missing or have values that represent the same
+  language, and whose <code title=attr-track-label><a href=#attr-track-label>label</a></code>
+  attributes are again both missing or both have the same value.</p>
+
+  <div class=impl>
+
+  <p>The IDL attributes <dfn id=dom-track-kind title=dom-track-kind><code>kind</code></dfn>, <dfn id=dom-track-label title=dom-track-label><code>label</code></dfn>, <dfn id=dom-track-src title=dom-track-src><code>src</code></dfn>, and <dfn id=dom-track-srclang title=dom-track-srclang><code>srclang</code></dfn> must
+  <a href=#reflect>reflect</a> the respective content attributes of the same
+  name.</p>
+
+  </div>
+
+
+
+  <h4 id=media-elements><span class=secno>4.8.10 </span>Media elements</h4>
+
   <p><dfn id=media-element title="media element">Media elements</dfn> implement the
   following interface:</p>
 
@@ -23656,7 +23745,7 @@
 
 
 
-  <h5 id=error-codes><span class=secno>4.8.9.1 </span>Error codes</h5>
+  <h5 id=error-codes><span class=secno>4.8.10.1 </span>Error codes</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-error><a href=#dom-media-error>error</a></code></dt>
 
@@ -23725,7 +23814,7 @@
 
    <dd>The <a href=#media-resource>media resource</a> indicated by the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute was not suitable.</dd>
 
-  </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.9.2 </span>Location of the media resource</h5>
+  </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.10.2 </span>Location of the media resource</h5>
 
   <p>The <dfn id=attr-media-src title=attr-media-src><code>src</code></dfn> content
   attribute on <a href=#media-element title="media element">media elements</a> gives
@@ -23773,7 +23862,7 @@
 
 
 
-  <h5 id=mime-types><span class=secno>4.8.9.3 </span>MIME types</h5>
+  <h5 id=mime-types><span class=secno>4.8.10.3 </span>MIME types</h5>
 
   <p>A <a href=#media-resource>media resource</a> can be described in terms of its
   <em>type</em>, specifically a <a href=#mime-type>MIME type</a>, optionally
@@ -23869,7 +23958,7 @@
   render.</p>
 
 
-  <h5 id=network-states><span class=secno>4.8.9.4 </span>Network states</h5>
+  <h5 id=network-states><span class=secno>4.8.10.4 </span>Network states</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code></dt>
 
@@ -23922,7 +24011,7 @@
 
 
 
-  <h5 id=loading-the-media-resource><span class=secno>4.8.9.5 </span>Loading the media resource</h5>
+  <h5 id=loading-the-media-resource><span class=secno>4.8.10.5 </span>Loading the media resource</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-load><a href=#dom-media-load>load</a></code>()</dt>
 
@@ -24714,7 +24803,7 @@
 
 
 
-  <h5 id=offsets-into-the-media-resource><span class=secno>4.8.9.6 </span>Offsets into the media resource</h5>
+  <h5 id=offsets-into-the-media-resource><span class=secno>4.8.10.6 </span>Offsets into the media resource</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code></dt>
 
@@ -24852,7 +24941,7 @@
 
 
 
-  <h5 id=the-ready-states><span class=secno>4.8.9.7 </span>The ready states</h5>
+  <h5 id=the-ready-states><span class=secno>4.8.10.7 </span>The ready states</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code></dt>
 
@@ -25164,7 +25253,7 @@
 -->
 
 
-  <h5 id=playing-the-media-resource><span class=secno>4.8.9.8 </span>Playing the media resource</h5>
+  <h5 id=playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code></dt>
 
@@ -25602,7 +25691,7 @@
 
 
 
-  <h5 id=seeking><span class=secno>4.8.9.9 </span>Seeking</h5>
+  <h5 id=seeking><span class=secno>4.8.10.9 </span>Seeking</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code></dt>
 
@@ -25741,8 +25830,13 @@
   </div>
 
 
-  <h5 id=user-interface><span class=secno>4.8.9.10 </span>User interface</h5>
+  <h5 id=timed-tracks><span class=secno>4.8.10.10 </span>Timed tracks</h5>
 
+  <p class=XXX>processing model for timed tracks</p>
+
+
+  <h5 id=user-interface><span class=secno>4.8.10.11 </span>User interface</h5>
+
   <p>The <dfn id=attr-media-controls title=attr-media-controls><code>controls</code></dfn>
   attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present, it
   indicates that the author has not provided a scripted controller and
@@ -25846,7 +25940,7 @@
 
 
 
-  <h5 id=time-ranges><span class=secno>4.8.9.11 </span>Time ranges</h5>
+  <h5 id=time-ranges><span class=secno>4.8.10.12 </span>Time ranges</h5>
 
   <p>Objects implementing the <code><a href=#timeranges>TimeRanges</a></code> interface
   represent a list of ranges (periods) of time.</p>
@@ -25924,7 +26018,7 @@
   </div>
 
 
-  <h5 id=mediaevents><span class=secno>4.8.9.12 </span>Event summary</h5>
+  <h5 id=mediaevents><span class=secno>4.8.10.13 </span>Event summary</h5>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -26032,7 +26126,7 @@
      <td>
   </table><div class=impl>
 
-  <h5 id=security-and-privacy-considerations><span class=secno>4.8.9.13 </span>Security and privacy considerations</h5>
+  <h5 id=security-and-privacy-considerations><span class=secno>4.8.10.14 </span>Security and privacy considerations</h5>
 
   <p>The main security and privacy implications of the
   <code><a href=#video>video</a></code> and <code><a href=#audio>audio</a></code> elements come from the
@@ -26080,7 +26174,7 @@
   </div>
 
 
-  <h4 id=the-canvas-element><span class=secno>4.8.10 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>
+  <h4 id=the-canvas-element><span class=secno>4.8.11 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -26334,7 +26428,7 @@
 
   
 
-  <h5 id=2dcontext><span class=secno>4.8.10.1 </span>The 2D context</h5>
+  <h5 id=2dcontext><span class=secno>4.8.11.1 </span>The 2D context</h5>
 
   <!-- v2: we're on v4. suggestions for next version are marked v5. -->
 
@@ -26536,7 +26630,7 @@
 
 
 
-  <h6 id=the-canvas-state><span class=secno>4.8.10.1.1 </span>The canvas state</h6>
+  <h6 id=the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</h6>
 
   <p>Each context maintains a stack of drawing states. <dfn id=drawing-state title="drawing state">Drawing states</dfn> consist of:</p>
 
@@ -26596,7 +26690,7 @@
   </div>
 
 
-  <h6 id=transformations><span class=secno>4.8.10.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
+  <h6 id=transformations><span class=secno>4.8.11.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
 
   <p>The transformation matrix is applied to coordinates when creating
   shapes and paths.</p> <!-- conformance criteria for actual drawing
@@ -26701,7 +26795,7 @@
   </div>
 
 
-  <h6 id=compositing><span class=secno>4.8.10.1.3 </span>Compositing</h6>
+  <h6 id=compositing><span class=secno>4.8.11.1.3 </span>Compositing</h6>
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -26857,7 +26951,7 @@
   </div>
 
 
-  <h6 id=colors-and-styles><span class=secno>4.8.10.1.4 </span>Colors and styles</h6>
+  <h6 id=colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</h6>
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -27225,7 +27319,7 @@
 
 
 
-  <h6 id=line-styles><span class=secno>4.8.10.1.5 </span>Line styles</h6>
+  <h6 id=line-styles><span class=secno>4.8.11.1.5 </span>Line styles</h6>
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -27400,7 +27494,7 @@
   </div>
 
 
-  <h6 id=shadows><span class=secno>4.8.10.1.6 </span><dfn>Shadows</dfn></h6>
+  <h6 id=shadows><span class=secno>4.8.11.1.6 </span><dfn>Shadows</dfn></h6>
 
   <p>All drawing operations are affected by the four global shadow
   attributes.</p>
@@ -27535,7 +27629,7 @@
   (since the shape will overwrite the shadow).</p>
 
 
-  <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.10.1.7 </span>Simple shapes (rectangles)</h6>
+  <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</h6>
 
   <p>There are three methods that immediately draw rectangles to the
   bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
@@ -27605,7 +27699,7 @@
   </div>
 
 
-  <h6 id=complex-shapes-(paths)><span class=secno>4.8.10.1.8 </span>Complex shapes (paths)</h6>
+  <h6 id=complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</h6>
 
   <p>The context always has a current path. There is only one current
   path, it is not part of the <a href=#drawing-state>drawing state</a>.</p>
@@ -27962,7 +28056,7 @@
   </div>
 
 
-  <h6 id=focus-management-0><span class=secno>4.8.10.1.9 </span>Focus management</h6> <!-- a v4 feature -->
+  <h6 id=focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</h6> <!-- a v4 feature -->
 
   <p>When a canvas is interactive, authors should include focusable
   elements in the element's fallback content corresponding to each
@@ -28106,7 +28200,7 @@
   </div>
 
 
-  <h6 id=text-0><span class=secno>4.8.10.1.10 </span>Text</h6> <!-- a v3 feature -->
+  <h6 id=text-0><span class=secno>4.8.11.1.10 </span>Text</h6> <!-- a v3 feature -->
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -28615,7 +28709,7 @@
 
 
 
-  <h6 id=images><span class=secno>4.8.10.1.11 </span>Images</h6>
+  <h6 id=images><span class=secno>4.8.11.1.11 </span>Images</h6>
 
   <p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
   can be used.</p>
@@ -28739,7 +28833,7 @@
 
 
 
-  <h6 id=pixel-manipulation><span class=secno>4.8.10.1.12 </span><dfn>Pixel manipulation</dfn></h6>
+  <h6 id=pixel-manipulation><span class=secno>4.8.11.1.12 </span><dfn>Pixel manipulation</dfn></h6>
 
   <dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
 
@@ -29099,7 +29193,7 @@
 
   <div class=impl>
 
-  <h6 id=drawing-model><span class=secno>4.8.10.1.13 </span>Drawing model</h6>
+  <h6 id=drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</h6>
 
   <p>When a shape or image is painted, user agents must follow these
   steps, in the order given (or act as if they do):</p>
@@ -29129,7 +29223,7 @@
   </ol></div>
 
 
-  <h6 id=examples><span class=secno>4.8.10.1.14 </span>Examples</h6>
+  <h6 id=examples><span class=secno>4.8.11.1.14 </span>Examples</h6>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -29182,7 +29276,7 @@
 
   <div class=impl>
 
-  <h5 id=color-spaces-and-color-correction><span class=secno>4.8.10.2 </span>Color spaces and color correction</h5>
+  <h5 id=color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</h5>
 
   <p>The <code><a href=#the-canvas-element>canvas</a></code> APIs must perform color correction at
   only two points: when rendering images with their own gamma
@@ -29224,7 +29318,7 @@
 
   <div class=impl>
 
-  <h5 id=security-with-canvas-elements><span class=secno>4.8.10.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
+  <h5 id=security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
 
   <p><strong>Information leakage</strong> can occur if scripts from
   one <a href=#origin>origin</a> can access information (e.g. read pixels)
@@ -29292,7 +29386,7 @@
 
 
 
-  <h4 id=the-map-element><span class=secno>4.8.11 </span>The <dfn><code>map</code></dfn> element</h4>
+  <h4 id=the-map-element><span class=secno>4.8.12 </span>The <dfn><code>map</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -29363,7 +29457,7 @@
 
 
 
-  <h4 id=the-area-element><span class=secno>4.8.12 </span>The <dfn><code>area</code></dfn> element</h4>
+  <h4 id=the-area-element><span class=secno>4.8.13 </span>The <dfn><code>area</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -29584,7 +29678,7 @@
   </div>
 
 
-  <h4 id=image-maps><span class=secno>4.8.13 </span>Image maps</h4>
+  <h4 id=image-maps><span class=secno>4.8.14 </span>Image maps</h4>
 
   <!-- TESTS
   http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%3E%0A%3Cmap%20name%3Da%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%25%200%25%20100%25%20100%25%27%20href%3Djavascript%3A%3E%0A%3C/map%3E
@@ -29595,7 +29689,7 @@
 
   <div class=impl>
 
-  <h5 id=authoring><span class=secno>4.8.13.1 </span>Authoring</h5>
+  <h5 id=authoring><span class=secno>4.8.14.1 </span>Authoring</h5>
 
   </div>
 
@@ -29637,7 +29731,7 @@
 
   <div class=impl>
 
-  <h5 id=processing-model><span class=secno>4.8.13.2 </span>Processing model</h5>
+  <h5 id=processing-model><span class=secno>4.8.14.2 </span>Processing model</h5>
 
   <p>If an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-object-element>object</a></code> element
   representing an image has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute specified,
@@ -29837,7 +29931,7 @@
 
 
 
-  <h4 id=mathml><span class=secno>4.8.14 </span>MathML</h4>
+  <h4 id=mathml><span class=secno>4.8.15 </span>MathML</h4>
 
   <p>The <dfn id=math><code>math</code></dfn> element from the <a href=#mathml-namespace>MathML
   namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
@@ -29911,7 +30005,7 @@
 
 
 
-  <h4 id=svg-0><span class=secno>4.8.15 </span>SVG</h4>
+  <h4 id=svg-0><span class=secno>4.8.16 </span>SVG</h4>
 
   <p>The <dfn id=svg><code>svg</code></dfn> element from the <a href=#svg-namespace>SVG
   namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
@@ -29951,7 +30045,7 @@
 
 
 
-  <h4 id=dimension-attributes><span class=secno>4.8.16 </span><dfn>Dimension attributes</dfn></h4>
+  <h4 id=dimension-attributes><span class=secno>4.8.17 </span><dfn>Dimension attributes</dfn></h4>
 
   <p><span class=impl><strong>Author requirements</strong>:</span>
   The <dfn id=attr-dim-width title=attr-dim-width><code>width</code></dfn> and <dfn id=attr-dim-height title=attr-dim-height><code>height</code></dfn> attributes on
@@ -73204,7 +73298,8 @@
    <code><a href=#the-col-element>col</a></code>, <code><a href=#the-command>command</a></code>, <code><a href=#the-embed-element>embed</a></code>,
    <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>,
    <code><a href=#the-keygen-element>keygen</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#meta>meta</a></code>,
-   <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>, <code><a href=#the-wbr-element>wbr</a></code></dd>
+   <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>, <code><a href=#the-track-element>track</a></code>,
+   <code><a href=#the-wbr-element>wbr</a></code></dd>
 
    <dt><dfn id=raw-text-elements>Raw text elements</dfn></dt>
 
@@ -79142,7 +79237,7 @@
 
    </dd>
 
-   <dt>A start tag whose tag name is one of: "param", "source"</dt>
+   <dt>A start tag whose tag name is one of: "param", "source", "track"</dt>
    <dd>
 
     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
@@ -79457,7 +79552,7 @@
    "basefont", "bgsound", "command", "embed", "hr", "iframe", "image",
    "img", "input", "isindex", "keygen", "link", "meta", "noembed",
    "noframes", "param", "script", "select", "source", "style",
-   "table", "textarea", "title", "wbr"</dt>-->
+   "table", "textarea", "title", "track", "wbr"</dt>-->
    <!--<dt>An end tag whose tag name is "noscript", if the
    <span>scripting flag</span> is enabled</dt>-->
    <dd>
@@ -82261,7 +82356,7 @@
 
 [hidden], area, base, basefont, command, datalist, head,
 input[type=hidden], link, menu[type=context], meta, noembed, noframes,
-param, rp, script, source, style, title { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
+param, rp, script, source, style, track, title { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   display: none;
 }
 
@@ -83216,6 +83311,8 @@
   the <code><a href=#video>video</a></code> element itself, and is expected to be
   centered in the <code><a href=#video>video</a></code> element.</p>
 
+  <p class=XXX>pointer to rendering model for timed tracks</p>
+
   <p class=note>Resizing <code><a href=#video>video</a></code> and <code><a href=#the-canvas-element>canvas</a></code>
   elements does not interrupt video playback or clear the canvas.</p>
 
@@ -83230,8 +83327,19 @@
 
   <div class=impl>
 
-  <h4 id=images-0><span class=secno>14.3.2 </span>Images</h4>
+  <h4 id=timed-tracks-0><span class=secno>14.3.2 </span>Timed tracks</h4>
 
+  <p class=XXX>rendering model for timed tracks</p>
+
+  <p class=XXX>CSS extensions</p>
+
+  </div>
+
+
+  <div class=impl>
+
+  <h4 id=images-0><span class=secno>14.3.3 </span>Images</h4>
+
   <p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element
   when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
   the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state
@@ -83302,7 +83410,7 @@
 
   <div class=impl>
 
-  <h4 id=attributes-for-embedded-content-and-images><span class=secno>14.3.3 </span>Attributes for embedded content and images</h4>
+  <h4 id=attributes-for-embedded-content-and-images><span class=secno>14.3.4 </span>Attributes for embedded content and images</h4>
 
   <p>The following CSS rules are expected to apply as
   <a href=#presentational-hints>presentational hints</a>:</p>
@@ -83400,7 +83508,7 @@
 
   <div class=impl>
 
-  <h4 id=image-maps-0><span class=secno>14.3.4 </span>Image maps</h4>
+  <h4 id=image-maps-0><span class=secno>14.3.5 </span>Image maps</h4>
 
   <p>Shapes on an <a href=#image-map>image map</a> are expected to act, for the
   purpose of the CSS cascade, as elements independent of the original
@@ -83428,7 +83536,7 @@
 
   <div class=impl>
 
-  <h4 id=toolbars-0><span class=secno>14.3.5 </span>Toolbars</h4>
+  <h4 id=toolbars-0><span class=secno>14.3.6 </span>Toolbars</h4>
 
   <p>When a <code><a href=#menus>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, the element is
   expected to be treated as a replaced element with a height about two
@@ -87593,6 +87701,18 @@
          <code><a href=#the-td-element>td</a></code></td>
      <td><a href=#global-attributes title="global attributes">globals</a></td>
      <td><code><a href=#htmltablerowelement>HTMLTableRowElement</a></code></td>
+    <tr><th><code><a href=#the-track-element>track</a></code></th>
+     <td>Timed track</td>
+     <td>none</td>
+     <td><code><a href=#audio>audio</a></code>;
+         <code><a href=#video>video</a></code></td>
+     <td>empty</td>
+     <td><a href=#global-attributes title="global attributes">globals</a>;
+         <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code>;
+         <code title=attr-track-label><a href=#attr-track-label>label</a></code>;
+         <code title=attr-track-src><a href=#attr-track-src>src</a></code>;
+         <code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code></td>
+     <td><code><a href=#htmltrackelement>HTMLTrackElement</a></code></td>
     <tr><th><code><a href=#the-ul-element>ul</a></code></th>
      <td>List</td>
      <td><a href=#flow-content title="Flow content">flow</a></td>
@@ -88248,11 +88368,20 @@
      <td> <code title=attr-keygen-keytype><a href=#attr-keygen-keytype>keygen</a></code>
      <td> The type of cryptographic key to generate
      <td> <a href=#attribute-text>Text</a>*
+    <tr><th> <code title="">kind</code>
+     <td> <code title=attr-track-kind><a href=#attr-track-kind>track</a></code>
+     <td> The type of timed track
+     <td> "<code title=attr-track-kind-subtitles>subtitles</code>";
+          "<code title=attr-track-kind-captions>captions</code>";
+          "<code title=attr-track-kind-descriptions>descriptions</code>";
+          "<code title=attr-track-kind-chapters>chapters</code>";
+          "<code title=attr-track-kind-metadata>metadata</code>"
     <tr><th> <code title="">label</code>
      <td> <code title=attr-command-label><a href=#attr-command-label>command</a></code>;
           <code title=attr-menu-label><a href=#attr-menu-label>menu</a></code>;
           <code title=attr-optgroup-label><a href=#attr-optgroup-label>optgroup</a></code>;
-          <code title=attr-option-label><a href=#attr-option-label>option</a></code>
+          <code title=attr-option-label><a href=#attr-option-label>option</a></code>;
+          <code title=attr-track-label><a href=#attr-track-label>track</a></code>
      <td> User-visible label
      <td> <a href=#attribute-text>Text</a>
     <tr><th> <code title="">lang</code>
@@ -88481,6 +88610,7 @@
           <code title=attr-input-src><a href=#attr-input-src>input</a></code>;
           <code title=attr-script-src><a href=#attr-script-src>script</a></code>;
           <code title=attr-source-src><a href=#attr-source-src>source</a></code>;
+          <code title=attr-track-src><a href=#attr-track-src>track</a></code>;
           <code title=attr-media-src><a href=#attr-media-src>video</a></code>
      <td> Address of the resource
      <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
@@ -88488,6 +88618,10 @@
      <td> <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>iframe</a></code>
      <td> A document to render in the <code><a href=#the-iframe-element>iframe</a></code>
      <td> The source of <a href=#an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</a>*
+    <tr><th> <code title="">srclang</code>
+     <td> <code title=attr-track-srclang><a href=#attr-track-srclang>track</a></code>
+     <td> Language of the timed track
+     <td> Valid BCP 47 language tag
     <tr><th> <code title="">start</code>
      <td> <code title=attr-ol-start><a href=#attr-ol-start>ol</a></code>
      <td> Ordinal value of the first item
@@ -89287,17 +89421,23 @@
     <tr><td> <code><a href=#the-table-element>table</a></code>
      <td> <code><a href=#htmltableelement>HTMLTableElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
+    <tr><td> <code><a href=#the-tbody-element>tbody</a></code>
+     <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+
     <tr><td> <code><a href=#the-td-element>td</a></code>
      <td> <code><a href=#htmltabledatacellelement>HTMLTableDataCellElement</a></code> : <code><a href=#htmltablecellelement>HTMLTableCellElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
     <tr><td> <code><a href=#the-textarea-element>textarea</a></code>
      <td> <code><a href=#htmltextareaelement>HTMLTextAreaElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
+    <tr><td> <code><a href=#the-tfoot-element>tfoot</a></code>
+     <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+
     <tr><td> <code><a href=#the-th-element>th</a></code>
      <td> <code><a href=#htmltableheadercellelement>HTMLTableHeaderCellElement</a></code> : <code><a href=#htmltablecellelement>HTMLTableCellElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
     <tr><td> <code><a href=#the-thead-element>thead</a></code>
-     <td> <code><a href=#htmltablerowelement>HTMLTableRowElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+     <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
     <tr><td> <code><a href=#the-time-element>time</a></code>
      <td> <code><a href=#htmltimeelement>HTMLTimeElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
@@ -89305,6 +89445,12 @@
     <tr><td> <code><a href=#the-title-element-0>title</a></code>
      <td> <code><a href=#htmltitleelement>HTMLTitleElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
+    <tr><td> <code><a href=#the-tr-element>tr</a></code>
+     <td> <code><a href=#htmltablerowelement>HTMLTableRowElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+
+    <tr><td> <code><a href=#the-track-element>track</a></code>
+     <td> <code><a href=#htmltrackelement>HTMLTrackElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+
     <tr><td> <code><a href=#the-ul-element>ul</a></code>
      <td> <code><a href=#htmlulistelement>HTMLUListElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 

Modified: index
===================================================================
--- index	2010-04-30 23:13:28 UTC (rev 5066)
+++ index	2010-05-04 01:41:35 UTC (rev 5067)
@@ -190,7 +190,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
    <hgroup><h1>HTML5 (including next generation additions still in development)</h1>
-    <h2 class="no-num no-toc">Draft Standard — 30 April 2010</h2>
+    <h2 class="no-num no-toc">Draft Standard — 4 May 2010</h2>
    </hgroup><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>
    <!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -524,50 +524,52 @@
      <li><a href=#video><span class=secno>4.8.6 </span>The <code>video</code> element</a></li>
      <li><a href=#audio><span class=secno>4.8.7 </span>The <code>audio</code> element</a></li>
      <li><a href=#the-source-element><span class=secno>4.8.8 </span>The <code>source</code> element</a></li>
-     <li><a href=#media-elements><span class=secno>4.8.9 </span>Media elements</a>
+     <li><a href=#the-track-element><span class=secno>4.8.9 </span>The <code>track</code> element</a></li>
+     <li><a href=#media-elements><span class=secno>4.8.10 </span>Media elements</a>
       <ol>
-       <li><a href=#error-codes><span class=secno>4.8.9.1 </span>Error codes</a></li>
-       <li><a href=#location-of-the-media-resource><span class=secno>4.8.9.2 </span>Location of the media resource</a></li>
-       <li><a href=#mime-types><span class=secno>4.8.9.3 </span>MIME types</a></li>
-       <li><a href=#network-states><span class=secno>4.8.9.4 </span>Network states</a></li>
-       <li><a href=#loading-the-media-resource><span class=secno>4.8.9.5 </span>Loading the media resource</a></li>
-       <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.9.6 </span>Offsets into the media resource</a></li>
-       <li><a href=#the-ready-states><span class=secno>4.8.9.7 </span>The ready states</a></li>
-       <li><a href=#playing-the-media-resource><span class=secno>4.8.9.8 </span>Playing the media resource</a></li>
-       <li><a href=#seeking><span class=secno>4.8.9.9 </span>Seeking</a></li>
-       <li><a href=#user-interface><span class=secno>4.8.9.10 </span>User interface</a></li>
-       <li><a href=#time-ranges><span class=secno>4.8.9.11 </span>Time ranges</a></li>
-       <li><a href=#mediaevents><span class=secno>4.8.9.12 </span>Event summary</a></li>
-       <li><a href=#security-and-privacy-considerations><span class=secno>4.8.9.13 </span>Security and privacy considerations</a></ol></li>
-     <li><a href=#the-canvas-element><span class=secno>4.8.10 </span>The <code>canvas</code> element</a>
+       <li><a href=#error-codes><span class=secno>4.8.10.1 </span>Error codes</a></li>
+       <li><a href=#location-of-the-media-resource><span class=secno>4.8.10.2 </span>Location of the media resource</a></li>
+       <li><a href=#mime-types><span class=secno>4.8.10.3 </span>MIME types</a></li>
+       <li><a href=#network-states><span class=secno>4.8.10.4 </span>Network states</a></li>
+       <li><a href=#loading-the-media-resource><span class=secno>4.8.10.5 </span>Loading the media resource</a></li>
+       <li><a href=#offsets-into-the-media-resource><span class=secno>4.8.10.6 </span>Offsets into the media resource</a></li>
+       <li><a href=#the-ready-states><span class=secno>4.8.10.7 </span>The ready states</a></li>
+       <li><a href=#playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</a></li>
+       <li><a href=#seeking><span class=secno>4.8.10.9 </span>Seeking</a></li>
+       <li><a href=#timed-tracks><span class=secno>4.8.10.10 </span>Timed tracks</a></li>
+       <li><a href=#user-interface><span class=secno>4.8.10.11 </span>User interface</a></li>
+       <li><a href=#time-ranges><span class=secno>4.8.10.12 </span>Time ranges</a></li>
+       <li><a href=#mediaevents><span class=secno>4.8.10.13 </span>Event summary</a></li>
+       <li><a href=#security-and-privacy-considerations><span class=secno>4.8.10.14 </span>Security and privacy considerations</a></ol></li>
+     <li><a href=#the-canvas-element><span class=secno>4.8.11 </span>The <code>canvas</code> element</a>
       <ol>
-       <li><a href=#2dcontext><span class=secno>4.8.10.1 </span>The 2D context</a>
+       <li><a href=#2dcontext><span class=secno>4.8.11.1 </span>The 2D context</a>
         <ol>
-         <li><a href=#the-canvas-state><span class=secno>4.8.10.1.1 </span>The canvas state</a></li>
-         <li><a href=#transformations><span class=secno>4.8.10.1.2 </span>Transformations</a></li>
-         <li><a href=#compositing><span class=secno>4.8.10.1.3 </span>Compositing</a></li>
-         <li><a href=#colors-and-styles><span class=secno>4.8.10.1.4 </span>Colors and styles</a></li>
-         <li><a href=#line-styles><span class=secno>4.8.10.1.5 </span>Line styles</a></li>
-         <li><a href=#shadows><span class=secno>4.8.10.1.6 </span>Shadows</a></li>
-         <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.10.1.7 </span>Simple shapes (rectangles)</a></li>
-         <li><a href=#complex-shapes-(paths)><span class=secno>4.8.10.1.8 </span>Complex shapes (paths)</a></li>
-         <li><a href=#focus-management-0><span class=secno>4.8.10.1.9 </span>Focus management</a></li>
-         <li><a href=#text-0><span class=secno>4.8.10.1.10 </span>Text</a></li>
-         <li><a href=#images><span class=secno>4.8.10.1.11 </span>Images</a></li>
-         <li><a href=#pixel-manipulation><span class=secno>4.8.10.1.12 </span>Pixel manipulation</a></li>
-         <li><a href=#drawing-model><span class=secno>4.8.10.1.13 </span>Drawing model</a></li>
-         <li><a href=#examples><span class=secno>4.8.10.1.14 </span>Examples</a></ol></li>
-       <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.10.2 </span>Color spaces and color correction</a></li>
-       <li><a href=#security-with-canvas-elements><span class=secno>4.8.10.3 </span>Security with <code>canvas</code> elements</a></ol></li>
-     <li><a href=#the-map-element><span class=secno>4.8.11 </span>The <code>map</code> element</a></li>
-     <li><a href=#the-area-element><span class=secno>4.8.12 </span>The <code>area</code> element</a></li>
-     <li><a href=#image-maps><span class=secno>4.8.13 </span>Image maps</a>
+         <li><a href=#the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</a></li>
+         <li><a href=#transformations><span class=secno>4.8.11.1.2 </span>Transformations</a></li>
+         <li><a href=#compositing><span class=secno>4.8.11.1.3 </span>Compositing</a></li>
+         <li><a href=#colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</a></li>
+         <li><a href=#line-styles><span class=secno>4.8.11.1.5 </span>Line styles</a></li>
+         <li><a href=#shadows><span class=secno>4.8.11.1.6 </span>Shadows</a></li>
+         <li><a href=#simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</a></li>
+         <li><a href=#complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</a></li>
+         <li><a href=#focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</a></li>
+         <li><a href=#text-0><span class=secno>4.8.11.1.10 </span>Text</a></li>
+         <li><a href=#images><span class=secno>4.8.11.1.11 </span>Images</a></li>
+         <li><a href=#pixel-manipulation><span class=secno>4.8.11.1.12 </span>Pixel manipulation</a></li>
+         <li><a href=#drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</a></li>
+         <li><a href=#examples><span class=secno>4.8.11.1.14 </span>Examples</a></ol></li>
+       <li><a href=#color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</a></li>
+       <li><a href=#security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code>canvas</code> elements</a></ol></li>
+     <li><a href=#the-map-element><span class=secno>4.8.12 </span>The <code>map</code> element</a></li>
+     <li><a href=#the-area-element><span class=secno>4.8.13 </span>The <code>area</code> element</a></li>
+     <li><a href=#image-maps><span class=secno>4.8.14 </span>Image maps</a>
       <ol>
-       <li><a href=#authoring><span class=secno>4.8.13.1 </span>Authoring</a></li>
-       <li><a href=#processing-model><span class=secno>4.8.13.2 </span>Processing model</a></ol></li>
-     <li><a href=#mathml><span class=secno>4.8.14 </span>MathML</a></li>
-     <li><a href=#svg-0><span class=secno>4.8.15 </span>SVG</a></li>
-     <li><a href=#dimension-attributes><span class=secno>4.8.16 </span>Dimension attributes</a></ol></li>
+       <li><a href=#authoring><span class=secno>4.8.14.1 </span>Authoring</a></li>
+       <li><a href=#processing-model><span class=secno>4.8.14.2 </span>Processing model</a></ol></li>
+     <li><a href=#mathml><span class=secno>4.8.15 </span>MathML</a></li>
+     <li><a href=#svg-0><span class=secno>4.8.16 </span>SVG</a></li>
+     <li><a href=#dimension-attributes><span class=secno>4.8.17 </span>Dimension attributes</a></ol></li>
    <li><a href=#tabular-data><span class=secno>4.9 </span>Tabular data</a>
     <ol>
      <li><a href=#the-table-element><span class=secno>4.9.1 </span>The <code>table</code> element</a></li>
@@ -1121,10 +1123,11 @@
    <li><a href=#replaced-elements><span class=secno>12.3 </span>Replaced elements</a>
     <ol>
      <li><a href=#embedded-content-2><span class=secno>12.3.1 </span>Embedded content</a></li>
-     <li><a href=#images-0><span class=secno>12.3.2 </span>Images</a></li>
-     <li><a href=#attributes-for-embedded-content-and-images><span class=secno>12.3.3 </span>Attributes for embedded content and images</a></li>
-     <li><a href=#image-maps-0><span class=secno>12.3.4 </span>Image maps</a></li>
-     <li><a href=#toolbars-0><span class=secno>12.3.5 </span>Toolbars</a></ol></li>
+     <li><a href=#timed-tracks-0><span class=secno>12.3.2 </span>Timed tracks</a></li>
+     <li><a href=#images-0><span class=secno>12.3.3 </span>Images</a></li>
+     <li><a href=#attributes-for-embedded-content-and-images><span class=secno>12.3.4 </span>Attributes for embedded content and images</a></li>
+     <li><a href=#image-maps-0><span class=secno>12.3.5 </span>Image maps</a></li>
+     <li><a href=#toolbars-0><span class=secno>12.3.6 </span>Toolbars</a></ol></li>
    <li><a href=#bindings><span class=secno>12.4 </span>Bindings</a>
     <ol>
      <li><a href=#introduction-10><span class=secno>12.4.1 </span>Introduction</a></li>
@@ -22829,8 +22832,8 @@
    <dt>Contexts in which this element may be used:</dt>
    <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
    <dt>Content model:</dt>
-   <dd>If the element has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
-   <dd>If the element does not have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: one or more <code><a href=#the-source-element>source</a></code> elements, then, <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
+   <dd>If the element has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: zero or more <code><a href=#the-track-element>track</a></code> elements, then <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
+   <dd>If the element does not have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: one or more <code><a href=#the-source-element>source</a></code> elements, then zero or more <code><a href=#the-track-element>track</a></code> elements, then <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
    <dt>Content attributes:</dt>
    <dd><a href=#global-attributes>Global attributes</a></dd>
    <dd><code title=attr-media-src><a href=#attr-media-src>src</a></code></dd>
@@ -23119,8 +23122,8 @@
    <dt>Contexts in which this element may be used:</dt>
    <dd>Where <a href=#embedded-content>embedded content</a> is expected.</dd>
    <dt>Content model:</dt>
-   <dd>If the element has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
-   <dd>If the element does not have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: one or more <code><a href=#the-source-element>source</a></code> elements, then, <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
+   <dd>If the element has a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: zero or more <code><a href=#the-track-element>track</a></code> elements, then <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
+   <dd>If the element does not have a <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute: one or more <code><a href=#the-source-element>source</a></code> elements, then zero or more <code><a href=#the-track-element>track</a></code> elements, then <a href=#transparent>transparent</a>, but with no <a href=#media-element>media element</a> descendants.</dd>
    <dt>Content attributes:</dt>
    <dd><a href=#global-attributes>Global attributes</a></dd>
    <dd><code title=attr-media-src><a href=#attr-media-src>src</a></code></dd>
@@ -23250,7 +23253,7 @@
   <dl class=element><dt>Categories</dt>
    <dd>None.</dd>
    <dt>Contexts in which this element may be used:</dt>
-   <dd>As a child of a <a href=#media-element>media element</a>, before any <a href=#flow-content>flow content</a>.</dd>
+   <dd>As a child of a <a href=#media-element>media element</a>, before any <a href=#flow-content>flow content</a> or <code><a href=#the-track-element>track</a></code> elements.</dd>
    <dt>Content model:</dt>
    <dd>Empty.</dd>
    <dt>Content attributes:</dt>
@@ -23425,8 +23428,94 @@
 
 
 
-  <h4 id=media-elements><span class=secno>4.8.9 </span>Media elements</h4>
+  <h4 id=the-track-element><span class=secno>4.8.9 </span>The <dfn><code>track</code></dfn> element</h4>
 
+  <dl class=element><dt>Categories</dt>
+   <dd>None.</dd>
+   <dt>Contexts in which this element may be used:</dt>
+   <dd>As a child of a <a href=#media-element>media element</a>, before any <a href=#flow-content>flow content</a>.</dd>
+   <dt>Content model:</dt>
+   <dd>Empty.</dd>
+   <dt>Content attributes:</dt>
+   <dd><a href=#global-attributes>Global attributes</a></dd>
+   <dd><code title=attr-track-kind><a href=#attr-track-kind>kind</a></code></dd>
+   <dd><code title=attr-track-label><a href=#attr-track-label>label</a></code></dd>
+   <dd><code title=attr-track-src><a href=#attr-track-src>src</a></code></dd>
+   <dd><code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code></dd>
+   <dt>DOM interface:</dt>
+   <dd>
+<pre class=idl>interface <dfn id=htmltrackelement>HTMLTrackElement</dfn> : <a href=#htmlelement>HTMLElement</a> {
+           attribute DOMString <a href=#dom-track-kind title=dom-track-kind>kind</a>;
+           attribute DOMString <a href=#dom-track-label title=dom-track-label>label</a>;
+           attribute DOMString <a href=#dom-track-src title=dom-track-src>src</a>;
+           attribute DOMString <a href=#dom-track-srclang title=dom-track-srclang>srclang</a>;
+};</pre>
+   </dd>
+  </dl><p>The <code><a href=#the-track-element>track</a></code> element allows authors to specify explicit
+  external timed tracks for <a href=#media-element title="media element">media
+  elements</a>. It does not <a href=#represents title=represents>represent</a> anything on its own.</p>
+
+  <p>The <dfn id=attr-track-kind title=attr-track-kind><code>kind</code></dfn>
+  attribute is an <a href=#enumerated-attribute>enumerated attribute</a>. The following
+  table lists the keywords defined for this attribute. The states
+  given in the first cell of the rows with keywords give the states to
+  which those keywords map.</p>
+
+  <table><thead><tr><th>State
+     <th>Keywords
+     <th>Brief description
+   <tbody><tr><td><span title=attr-track-kind-subtitle>Subtitles</span>
+     <td><dfn id=attr-track-kind-keyword-subtitles title=attr-track-kind-keyword-subtitles><code>subtitles</code></dfn>
+     <td>Translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the <a href=#media-resource>media resource</a>'s soundtrack).
+    <tr><td><span title=attr-track-kind-caption>Captions</span>
+     <td><dfn id=attr-track-kind-keyword-captions title=attr-track-kind-keyword-captions><code>captions</code></dfn>
+     <td>Transcription of the dialogue, suitable for when the soundtrack is unavailable (e.g. because it is muted or because the user is deaf). 
+    <tr><td><span title=attr-track-kind-descriptions>Descriptions</span>
+     <td><dfn id=attr-track-kind-keyword-descriptions title=attr-track-kind-keyword-descriptions><code>descriptions</code></dfn>
+     <td>Textual descriptions of the video component of the <a href=#media-resource>media resource</a>, intended for audio synthesis when the visual component is unavailable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind).
+    <tr><td><span title=attr-track-kind-chapters>Chapters</span>
+     <td><dfn id=attr-track-kind-keyword-chapters title=attr-track-kind-keyword-chapters><code>chapters</code></dfn>
+     <td>Chapter titles, intended to be used for navigating the <a href=#media-resource>media resource</a>.
+    <tr><td><span title=attr-track-kind-metadata>Metadata</span>
+     <td><dfn id=attr-track-kind-keyword-metadata title=attr-track-kind-keyword-metadata><code>metadata</code></dfn>
+     <td>Tracks intended for use from script.
+  </table><p>The attribute may be omitted. The <i>missing value default</i> is
+  the <span title=attr-track-kind-captions>captions</span> state.</p>
+
+  <p>The <dfn id=attr-track-src title=attr-track-src><code>src</code></dfn> attribute
+  gives the address of the time track data. The value must be a
+  <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
+  spaces</a>. This attribute must be present.</p>
+
+  <p>The <dfn id=attr-track-srclang title=attr-track-srclang><code>srclang</code></dfn>
+  attribute gives the language of the time track data. The value must
+  be a valid BCP 47 language tag. This attribute must be present if
+  the element's <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code> attribute is
+  in the <span title=attr-track-kind-subtitles>subtitles</span>
+  state. <a href=#refsBCP47>[BCP47]</a></p>
+
+  <p>The <dfn id=attr-track-label title=attr-track-label><code>label</code></dfn>
+  attribute gives a user-readable title for the track.</p>
+
+  <p>There must not be two <code><a href=#the-track-element>track</a></code> element children of the
+  same <a href=#media-element>media element</a> whose <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code> attributes are in the same
+  state, whose <code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code>
+  attributes are both missing or have values that represent the same
+  language, and whose <code title=attr-track-label><a href=#attr-track-label>label</a></code>
+  attributes are again both missing or both have the same value.</p>
+
+  <div class=impl>
+
+  <p>The IDL attributes <dfn id=dom-track-kind title=dom-track-kind><code>kind</code></dfn>, <dfn id=dom-track-label title=dom-track-label><code>label</code></dfn>, <dfn id=dom-track-src title=dom-track-src><code>src</code></dfn>, and <dfn id=dom-track-srclang title=dom-track-srclang><code>srclang</code></dfn> must
+  <a href=#reflect>reflect</a> the respective content attributes of the same
+  name.</p>
+
+  </div>
+
+
+
+  <h4 id=media-elements><span class=secno>4.8.10 </span>Media elements</h4>
+
   <p><dfn id=media-element title="media element">Media elements</dfn> implement the
   following interface:</p>
 
@@ -23557,7 +23646,7 @@
 
 
 
-  <h5 id=error-codes><span class=secno>4.8.9.1 </span>Error codes</h5>
+  <h5 id=error-codes><span class=secno>4.8.10.1 </span>Error codes</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-error><a href=#dom-media-error>error</a></code></dt>
 
@@ -23626,7 +23715,7 @@
 
    <dd>The <a href=#media-resource>media resource</a> indicated by the <code title=attr-media-src><a href=#attr-media-src>src</a></code> attribute was not suitable.</dd>
 
-  </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.9.2 </span>Location of the media resource</h5>
+  </dl><h5 id=location-of-the-media-resource><span class=secno>4.8.10.2 </span>Location of the media resource</h5>
 
   <p>The <dfn id=attr-media-src title=attr-media-src><code>src</code></dfn> content
   attribute on <a href=#media-element title="media element">media elements</a> gives
@@ -23674,7 +23763,7 @@
 
 
 
-  <h5 id=mime-types><span class=secno>4.8.9.3 </span>MIME types</h5>
+  <h5 id=mime-types><span class=secno>4.8.10.3 </span>MIME types</h5>
 
   <p>A <a href=#media-resource>media resource</a> can be described in terms of its
   <em>type</em>, specifically a <a href=#mime-type>MIME type</a>, optionally
@@ -23770,7 +23859,7 @@
   render.</p>
 
 
-  <h5 id=network-states><span class=secno>4.8.9.4 </span>Network states</h5>
+  <h5 id=network-states><span class=secno>4.8.10.4 </span>Network states</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-networkState><a href=#dom-media-networkstate>networkState</a></code></dt>
 
@@ -23823,7 +23912,7 @@
 
 
 
-  <h5 id=loading-the-media-resource><span class=secno>4.8.9.5 </span>Loading the media resource</h5>
+  <h5 id=loading-the-media-resource><span class=secno>4.8.10.5 </span>Loading the media resource</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-load><a href=#dom-media-load>load</a></code>()</dt>
 
@@ -24615,7 +24704,7 @@
 
 
 
-  <h5 id=offsets-into-the-media-resource><span class=secno>4.8.9.6 </span>Offsets into the media resource</h5>
+  <h5 id=offsets-into-the-media-resource><span class=secno>4.8.10.6 </span>Offsets into the media resource</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-duration><a href=#dom-media-duration>duration</a></code></dt>
 
@@ -24753,7 +24842,7 @@
 
 
 
-  <h5 id=the-ready-states><span class=secno>4.8.9.7 </span>The ready states</h5>
+  <h5 id=the-ready-states><span class=secno>4.8.10.7 </span>The ready states</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-readyState><a href=#dom-media-readystate>readyState</a></code></dt>
 
@@ -25065,7 +25154,7 @@
 -->
 
 
-  <h5 id=playing-the-media-resource><span class=secno>4.8.9.8 </span>Playing the media resource</h5>
+  <h5 id=playing-the-media-resource><span class=secno>4.8.10.8 </span>Playing the media resource</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-paused><a href=#dom-media-paused>paused</a></code></dt>
 
@@ -25503,7 +25592,7 @@
 
 
 
-  <h5 id=seeking><span class=secno>4.8.9.9 </span>Seeking</h5>
+  <h5 id=seeking><span class=secno>4.8.10.9 </span>Seeking</h5>
 
   <dl class=domintro><dt><var title="">media</var> . <code title=dom-media-seeking><a href=#dom-media-seeking>seeking</a></code></dt>
 
@@ -25642,8 +25731,13 @@
   </div>
 
 
-  <h5 id=user-interface><span class=secno>4.8.9.10 </span>User interface</h5>
+  <h5 id=timed-tracks><span class=secno>4.8.10.10 </span>Timed tracks</h5>
 
+  <p class=XXX>processing model for timed tracks</p>
+
+
+  <h5 id=user-interface><span class=secno>4.8.10.11 </span>User interface</h5>
+
   <p>The <dfn id=attr-media-controls title=attr-media-controls><code>controls</code></dfn>
   attribute is a <a href=#boolean-attribute>boolean attribute</a>. If present, it
   indicates that the author has not provided a scripted controller and
@@ -25747,7 +25841,7 @@
 
 
 
-  <h5 id=time-ranges><span class=secno>4.8.9.11 </span>Time ranges</h5>
+  <h5 id=time-ranges><span class=secno>4.8.10.12 </span>Time ranges</h5>
 
   <p>Objects implementing the <code><a href=#timeranges>TimeRanges</a></code> interface
   represent a list of ranges (periods) of time.</p>
@@ -25825,7 +25919,7 @@
   </div>
 
 
-  <h5 id=mediaevents><span class=secno>4.8.9.12 </span>Event summary</h5>
+  <h5 id=mediaevents><span class=secno>4.8.10.13 </span>Event summary</h5>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -25933,7 +26027,7 @@
      <td>
   </table><div class=impl>
 
-  <h5 id=security-and-privacy-considerations><span class=secno>4.8.9.13 </span>Security and privacy considerations</h5>
+  <h5 id=security-and-privacy-considerations><span class=secno>4.8.10.14 </span>Security and privacy considerations</h5>
 
   <p>The main security and privacy implications of the
   <code><a href=#video>video</a></code> and <code><a href=#audio>audio</a></code> elements come from the
@@ -25981,7 +26075,7 @@
   </div>
 
 
-  <h4 id=the-canvas-element><span class=secno>4.8.10 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>
+  <h4 id=the-canvas-element><span class=secno>4.8.11 </span>The <dfn id=canvas><code>canvas</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -26235,7 +26329,7 @@
 
   
 
-  <h5 id=2dcontext><span class=secno>4.8.10.1 </span>The 2D context</h5>
+  <h5 id=2dcontext><span class=secno>4.8.11.1 </span>The 2D context</h5>
 
   <!-- v2: we're on v4. suggestions for next version are marked v5. -->
 
@@ -26437,7 +26531,7 @@
 
 
 
-  <h6 id=the-canvas-state><span class=secno>4.8.10.1.1 </span>The canvas state</h6>
+  <h6 id=the-canvas-state><span class=secno>4.8.11.1.1 </span>The canvas state</h6>
 
   <p>Each context maintains a stack of drawing states. <dfn id=drawing-state title="drawing state">Drawing states</dfn> consist of:</p>
 
@@ -26497,7 +26591,7 @@
   </div>
 
 
-  <h6 id=transformations><span class=secno>4.8.10.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
+  <h6 id=transformations><span class=secno>4.8.11.1.2 </span><dfn title=dom-context-2d-transformation>Transformations</dfn></h6>
 
   <p>The transformation matrix is applied to coordinates when creating
   shapes and paths.</p> <!-- conformance criteria for actual drawing
@@ -26602,7 +26696,7 @@
   </div>
 
 
-  <h6 id=compositing><span class=secno>4.8.10.1.3 </span>Compositing</h6>
+  <h6 id=compositing><span class=secno>4.8.11.1.3 </span>Compositing</h6>
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-globalAlpha><a href=#dom-context-2d-globalalpha>globalAlpha</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -26758,7 +26852,7 @@
   </div>
 
 
-  <h6 id=colors-and-styles><span class=secno>4.8.10.1.4 </span>Colors and styles</h6>
+  <h6 id=colors-and-styles><span class=secno>4.8.11.1.4 </span>Colors and styles</h6>
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-strokeStyle><a href=#dom-context-2d-strokestyle>strokeStyle</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -27126,7 +27220,7 @@
 
 
 
-  <h6 id=line-styles><span class=secno>4.8.10.1.5 </span>Line styles</h6>
+  <h6 id=line-styles><span class=secno>4.8.11.1.5 </span>Line styles</h6>
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-lineWidth><a href=#dom-context-2d-linewidth>lineWidth</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -27301,7 +27395,7 @@
   </div>
 
 
-  <h6 id=shadows><span class=secno>4.8.10.1.6 </span><dfn>Shadows</dfn></h6>
+  <h6 id=shadows><span class=secno>4.8.11.1.6 </span><dfn>Shadows</dfn></h6>
 
   <p>All drawing operations are affected by the four global shadow
   attributes.</p>
@@ -27436,7 +27530,7 @@
   (since the shape will overwrite the shadow).</p>
 
 
-  <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.10.1.7 </span>Simple shapes (rectangles)</h6>
+  <h6 id=simple-shapes-(rectangles)><span class=secno>4.8.11.1.7 </span>Simple shapes (rectangles)</h6>
 
   <p>There are three methods that immediately draw rectangles to the
   bitmap. They each take four arguments; the first two give the <var title="">x</var> and <var title="">y</var> coordinates of the top
@@ -27506,7 +27600,7 @@
   </div>
 
 
-  <h6 id=complex-shapes-(paths)><span class=secno>4.8.10.1.8 </span>Complex shapes (paths)</h6>
+  <h6 id=complex-shapes-(paths)><span class=secno>4.8.11.1.8 </span>Complex shapes (paths)</h6>
 
   <p>The context always has a current path. There is only one current
   path, it is not part of the <a href=#drawing-state>drawing state</a>.</p>
@@ -27863,7 +27957,7 @@
   </div>
 
 
-  <h6 id=focus-management-0><span class=secno>4.8.10.1.9 </span>Focus management</h6> <!-- a v4 feature -->
+  <h6 id=focus-management-0><span class=secno>4.8.11.1.9 </span>Focus management</h6> <!-- a v4 feature -->
 
   <p>When a canvas is interactive, authors should include focusable
   elements in the element's fallback content corresponding to each
@@ -28007,7 +28101,7 @@
   </div>
 
 
-  <h6 id=text-0><span class=secno>4.8.10.1.10 </span>Text</h6> <!-- a v3 feature -->
+  <h6 id=text-0><span class=secno>4.8.11.1.10 </span>Text</h6> <!-- a v3 feature -->
 
   <dl class=domintro><dt><var title="">context</var> . <code title=dom-context-2d-font><a href=#dom-context-2d-font>font</a></code> [ = <var title="">value</var> ]</dt>
 
@@ -28516,7 +28610,7 @@
 
 
 
-  <h6 id=images><span class=secno>4.8.10.1.11 </span>Images</h6>
+  <h6 id=images><span class=secno>4.8.11.1.11 </span>Images</h6>
 
   <p>To draw images onto the canvas, the <dfn id=dom-context-2d-drawimage title=dom-context-2d-drawImage><code>drawImage</code></dfn> method
   can be used.</p>
@@ -28640,7 +28734,7 @@
 
 
 
-  <h6 id=pixel-manipulation><span class=secno>4.8.10.1.12 </span><dfn>Pixel manipulation</dfn></h6>
+  <h6 id=pixel-manipulation><span class=secno>4.8.11.1.12 </span><dfn>Pixel manipulation</dfn></h6>
 
   <dl class=domintro><dt><var title="">imagedata</var> = <var title="">context</var> . <code title=dom-context-2d-createImageData><a href=#dom-context-2d-createimagedata>createImageData</a></code>(<var title="">sw</var>, <var title="">sh</var>)</dt>
 
@@ -29000,7 +29094,7 @@
 
   <div class=impl>
 
-  <h6 id=drawing-model><span class=secno>4.8.10.1.13 </span>Drawing model</h6>
+  <h6 id=drawing-model><span class=secno>4.8.11.1.13 </span>Drawing model</h6>
 
   <p>When a shape or image is painted, user agents must follow these
   steps, in the order given (or act as if they do):</p>
@@ -29030,7 +29124,7 @@
   </ol></div>
 
 
-  <h6 id=examples><span class=secno>4.8.10.1.14 </span>Examples</h6>
+  <h6 id=examples><span class=secno>4.8.11.1.14 </span>Examples</h6>
 
   <p><i>This section is non-normative.</i></p>
 
@@ -29083,7 +29177,7 @@
 
   <div class=impl>
 
-  <h5 id=color-spaces-and-color-correction><span class=secno>4.8.10.2 </span>Color spaces and color correction</h5>
+  <h5 id=color-spaces-and-color-correction><span class=secno>4.8.11.2 </span>Color spaces and color correction</h5>
 
   <p>The <code><a href=#the-canvas-element>canvas</a></code> APIs must perform color correction at
   only two points: when rendering images with their own gamma
@@ -29125,7 +29219,7 @@
 
   <div class=impl>
 
-  <h5 id=security-with-canvas-elements><span class=secno>4.8.10.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
+  <h5 id=security-with-canvas-elements><span class=secno>4.8.11.3 </span>Security with <code><a href=#the-canvas-element>canvas</a></code> elements</h5>
 
   <p><strong>Information leakage</strong> can occur if scripts from
   one <a href=#origin>origin</a> can access information (e.g. read pixels)
@@ -29193,7 +29287,7 @@
 
 
 
-  <h4 id=the-map-element><span class=secno>4.8.11 </span>The <dfn><code>map</code></dfn> element</h4>
+  <h4 id=the-map-element><span class=secno>4.8.12 </span>The <dfn><code>map</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -29264,7 +29358,7 @@
 
 
 
-  <h4 id=the-area-element><span class=secno>4.8.12 </span>The <dfn><code>area</code></dfn> element</h4>
+  <h4 id=the-area-element><span class=secno>4.8.13 </span>The <dfn><code>area</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>
    <dd><a href=#flow-content>Flow content</a>.</dd>
@@ -29485,7 +29579,7 @@
   </div>
 
 
-  <h4 id=image-maps><span class=secno>4.8.13 </span>Image maps</h4>
+  <h4 id=image-maps><span class=secno>4.8.14 </span>Image maps</h4>
 
   <!-- TESTS
   http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20html%3E%0A%3Cimg%20src%3D%22http%3A//hixie.ch/resources/images/smallcats%22%20usemap%3D%23a%20onclick%3Dw%28%27img%27%29%3E%0A%3Cmap%20name%3Da%3E%0A%20%3Carea%20onclick%3Dw%28%271%27%29%20coords%3D%270%25%200%25%20100%25%20100%25%27%20href%3Djavascript%3A%3E%0A%3C/map%3E
@@ -29496,7 +29590,7 @@
 
   <div class=impl>
 
-  <h5 id=authoring><span class=secno>4.8.13.1 </span>Authoring</h5>
+  <h5 id=authoring><span class=secno>4.8.14.1 </span>Authoring</h5>
 
   </div>
 
@@ -29538,7 +29632,7 @@
 
   <div class=impl>
 
-  <h5 id=processing-model><span class=secno>4.8.13.2 </span>Processing model</h5>
+  <h5 id=processing-model><span class=secno>4.8.14.2 </span>Processing model</h5>
 
   <p>If an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-object-element>object</a></code> element
   representing an image has a <code title=attr-hyperlink-usemap><a href=#attr-hyperlink-usemap>usemap</a></code> attribute specified,
@@ -29738,7 +29832,7 @@
 
 
 
-  <h4 id=mathml><span class=secno>4.8.14 </span>MathML</h4>
+  <h4 id=mathml><span class=secno>4.8.15 </span>MathML</h4>
 
   <p>The <dfn id=math><code>math</code></dfn> element from the <a href=#mathml-namespace>MathML
   namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
@@ -29812,7 +29906,7 @@
 
 
 
-  <h4 id=svg-0><span class=secno>4.8.15 </span>SVG</h4>
+  <h4 id=svg-0><span class=secno>4.8.16 </span>SVG</h4>
 
   <p>The <dfn id=svg><code>svg</code></dfn> element from the <a href=#svg-namespace>SVG
   namespace</a> falls into the <a href=#embedded-content>embedded content</a>,
@@ -29852,7 +29946,7 @@
 
 
 
-  <h4 id=dimension-attributes><span class=secno>4.8.16 </span><dfn>Dimension attributes</dfn></h4>
+  <h4 id=dimension-attributes><span class=secno>4.8.17 </span><dfn>Dimension attributes</dfn></h4>
 
   <p><span class=impl><strong>Author requirements</strong>:</span>
   The <dfn id=attr-dim-width title=attr-dim-width><code>width</code></dfn> and <dfn id=attr-dim-height title=attr-dim-height><code>height</code></dfn> attributes on
@@ -66447,7 +66541,8 @@
    <code><a href=#the-col-element>col</a></code>, <code><a href=#the-command>command</a></code>, <code><a href=#the-embed-element>embed</a></code>,
    <code><a href=#the-hr-element>hr</a></code>, <code><a href=#the-img-element>img</a></code>, <code><a href=#the-input-element>input</a></code>,
    <code><a href=#the-keygen-element>keygen</a></code>, <code><a href=#the-link-element>link</a></code>, <code><a href=#meta>meta</a></code>,
-   <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>, <code><a href=#the-wbr-element>wbr</a></code></dd>
+   <code><a href=#the-param-element>param</a></code>, <code><a href=#the-source-element>source</a></code>, <code><a href=#the-track-element>track</a></code>,
+   <code><a href=#the-wbr-element>wbr</a></code></dd>
 
    <dt><dfn id=raw-text-elements>Raw text elements</dfn></dt>
 
@@ -72385,7 +72480,7 @@
 
    </dd>
 
-   <dt>A start tag whose tag name is one of: "param", "source"</dt>
+   <dt>A start tag whose tag name is one of: "param", "source", "track"</dt>
    <dd>
 
     <p><a href=#insert-an-html-element>Insert an HTML element</a> for the token. Immediately
@@ -72700,7 +72795,7 @@
    "basefont", "bgsound", "command", "embed", "hr", "iframe", "image",
    "img", "input", "isindex", "keygen", "link", "meta", "noembed",
    "noframes", "param", "script", "select", "source", "style",
-   "table", "textarea", "title", "wbr"</dt>-->
+   "table", "textarea", "title", "track", "wbr"</dt>-->
    <!--<dt>An end tag whose tag name is "noscript", if the
    <span>scripting flag</span> is enabled</dt>-->
    <dd>
@@ -75504,7 +75599,7 @@
 
 [hidden], area, base, basefont, command, datalist, head,
 input[type=hidden], link, menu[type=context], meta, noembed, noframes,
-param, rp, script, source, style, title { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
+param, rp, script, source, style, track, title { /* <a href=#case-insensitive-selector-exception>case-insensitive</a> */
   display: none;
 }
 
@@ -76459,6 +76554,8 @@
   the <code><a href=#video>video</a></code> element itself, and is expected to be
   centered in the <code><a href=#video>video</a></code> element.</p>
 
+  <p class=XXX>pointer to rendering model for timed tracks</p>
+
   <p class=note>Resizing <code><a href=#video>video</a></code> and <code><a href=#the-canvas-element>canvas</a></code>
   elements does not interrupt video playback or clear the canvas.</p>
 
@@ -76473,8 +76570,19 @@
 
   <div class=impl>
 
-  <h4 id=images-0><span class=secno>12.3.2 </span>Images</h4>
+  <h4 id=timed-tracks-0><span class=secno>12.3.2 </span>Timed tracks</h4>
 
+  <p class=XXX>rendering model for timed tracks</p>
+
+  <p class=XXX>CSS extensions</p>
+
+  </div>
+
+
+  <div class=impl>
+
+  <h4 id=images-0><span class=secno>12.3.3 </span>Images</h4>
+
   <p>When an <code><a href=#the-img-element>img</a></code> element or an <code><a href=#the-input-element>input</a></code> element
   when its <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
   the <a href=#image-button-state title=attr-input-type-image>Image Button</a> state
@@ -76545,7 +76653,7 @@
 
   <div class=impl>
 
-  <h4 id=attributes-for-embedded-content-and-images><span class=secno>12.3.3 </span>Attributes for embedded content and images</h4>
+  <h4 id=attributes-for-embedded-content-and-images><span class=secno>12.3.4 </span>Attributes for embedded content and images</h4>
 
   <p>The following CSS rules are expected to apply as
   <a href=#presentational-hints>presentational hints</a>:</p>
@@ -76643,7 +76751,7 @@
 
   <div class=impl>
 
-  <h4 id=image-maps-0><span class=secno>12.3.4 </span>Image maps</h4>
+  <h4 id=image-maps-0><span class=secno>12.3.5 </span>Image maps</h4>
 
   <p>Shapes on an <a href=#image-map>image map</a> are expected to act, for the
   purpose of the CSS cascade, as elements independent of the original
@@ -76671,7 +76779,7 @@
 
   <div class=impl>
 
-  <h4 id=toolbars-0><span class=secno>12.3.5 </span>Toolbars</h4>
+  <h4 id=toolbars-0><span class=secno>12.3.6 </span>Toolbars</h4>
 
   <p>When a <code><a href=#menus>menu</a></code> element's <code title=attr-menu-type><a href=#attr-menu-type>type</a></code> attribute is in the <a href=#toolbar-state title="toolbar state">toolbar</a> state, the element is
   expected to be treated as a replaced element with a height about two
@@ -80836,6 +80944,18 @@
          <code><a href=#the-td-element>td</a></code></td>
      <td><a href=#global-attributes title="global attributes">globals</a></td>
      <td><code><a href=#htmltablerowelement>HTMLTableRowElement</a></code></td>
+    <tr><th><code><a href=#the-track-element>track</a></code></th>
+     <td>Timed track</td>
+     <td>none</td>
+     <td><code><a href=#audio>audio</a></code>;
+         <code><a href=#video>video</a></code></td>
+     <td>empty</td>
+     <td><a href=#global-attributes title="global attributes">globals</a>;
+         <code title=attr-track-kind><a href=#attr-track-kind>kind</a></code>;
+         <code title=attr-track-label><a href=#attr-track-label>label</a></code>;
+         <code title=attr-track-src><a href=#attr-track-src>src</a></code>;
+         <code title=attr-track-srclang><a href=#attr-track-srclang>srclang</a></code></td>
+     <td><code><a href=#htmltrackelement>HTMLTrackElement</a></code></td>
     <tr><th><code><a href=#the-ul-element>ul</a></code></th>
      <td>List</td>
      <td><a href=#flow-content title="Flow content">flow</a></td>
@@ -81491,11 +81611,20 @@
      <td> <code title=attr-keygen-keytype><a href=#attr-keygen-keytype>keygen</a></code>
      <td> The type of cryptographic key to generate
      <td> <a href=#attribute-text>Text</a>*
+    <tr><th> <code title="">kind</code>
+     <td> <code title=attr-track-kind><a href=#attr-track-kind>track</a></code>
+     <td> The type of timed track
+     <td> "<code title=attr-track-kind-subtitles>subtitles</code>";
+          "<code title=attr-track-kind-captions>captions</code>";
+          "<code title=attr-track-kind-descriptions>descriptions</code>";
+          "<code title=attr-track-kind-chapters>chapters</code>";
+          "<code title=attr-track-kind-metadata>metadata</code>"
     <tr><th> <code title="">label</code>
      <td> <code title=attr-command-label><a href=#attr-command-label>command</a></code>;
           <code title=attr-menu-label><a href=#attr-menu-label>menu</a></code>;
           <code title=attr-optgroup-label><a href=#attr-optgroup-label>optgroup</a></code>;
-          <code title=attr-option-label><a href=#attr-option-label>option</a></code>
+          <code title=attr-option-label><a href=#attr-option-label>option</a></code>;
+          <code title=attr-track-label><a href=#attr-track-label>track</a></code>
      <td> User-visible label
      <td> <a href=#attribute-text>Text</a>
     <tr><th> <code title="">lang</code>
@@ -81724,6 +81853,7 @@
           <code title=attr-input-src><a href=#attr-input-src>input</a></code>;
           <code title=attr-script-src><a href=#attr-script-src>script</a></code>;
           <code title=attr-source-src><a href=#attr-source-src>source</a></code>;
+          <code title=attr-track-src><a href=#attr-track-src>track</a></code>;
           <code title=attr-media-src><a href=#attr-media-src>video</a></code>
      <td> Address of the resource
      <td> <a href=#valid-non-empty-url-potentially-surrounded-by-spaces>Valid non-empty URL potentially surrounded by spaces</a>
@@ -81731,6 +81861,10 @@
      <td> <code title=attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>iframe</a></code>
      <td> A document to render in the <code><a href=#the-iframe-element>iframe</a></code>
      <td> The source of <a href=#an-iframe-srcdoc-document>an <code>iframe</code> <code title=attr-iframe-srcdoc>srcdoc</code> document</a>*
+    <tr><th> <code title="">srclang</code>
+     <td> <code title=attr-track-srclang><a href=#attr-track-srclang>track</a></code>
+     <td> Language of the timed track
+     <td> Valid BCP 47 language tag
     <tr><th> <code title="">start</code>
      <td> <code title=attr-ol-start><a href=#attr-ol-start>ol</a></code>
      <td> Ordinal value of the first item
@@ -82530,17 +82664,23 @@
     <tr><td> <code><a href=#the-table-element>table</a></code>
      <td> <code><a href=#htmltableelement>HTMLTableElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
+    <tr><td> <code><a href=#the-tbody-element>tbody</a></code>
+     <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+
     <tr><td> <code><a href=#the-td-element>td</a></code>
      <td> <code><a href=#htmltabledatacellelement>HTMLTableDataCellElement</a></code> : <code><a href=#htmltablecellelement>HTMLTableCellElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
     <tr><td> <code><a href=#the-textarea-element>textarea</a></code>
      <td> <code><a href=#htmltextareaelement>HTMLTextAreaElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
+    <tr><td> <code><a href=#the-tfoot-element>tfoot</a></code>
+     <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+
     <tr><td> <code><a href=#the-th-element>th</a></code>
      <td> <code><a href=#htmltableheadercellelement>HTMLTableHeaderCellElement</a></code> : <code><a href=#htmltablecellelement>HTMLTableCellElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
     <tr><td> <code><a href=#the-thead-element>thead</a></code>
-     <td> <code><a href=#htmltablerowelement>HTMLTableRowElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+     <td> <code><a href=#htmltablesectionelement>HTMLTableSectionElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
     <tr><td> <code><a href=#the-time-element>time</a></code>
      <td> <code><a href=#htmltimeelement>HTMLTimeElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
@@ -82548,6 +82688,12 @@
     <tr><td> <code><a href=#the-title-element-0>title</a></code>
      <td> <code><a href=#htmltitleelement>HTMLTitleElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 
+    <tr><td> <code><a href=#the-tr-element>tr</a></code>
+     <td> <code><a href=#htmltablerowelement>HTMLTableRowElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+
+    <tr><td> <code><a href=#the-track-element>track</a></code>
+     <td> <code><a href=#htmltrackelement>HTMLTrackElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
+
     <tr><td> <code><a href=#the-ul-element>ul</a></code>
      <td> <code><a href=#htmlulistelement>HTMLUListElement</a></code> : <code><a href=#htmlelement>HTMLElement</a></code>
 

Modified: source
===================================================================
--- source	2010-04-30 23:13:28 UTC (rev 5066)
+++ source	2010-05-04 01:41:35 UTC (rev 5067)
@@ -8,6 +8,7 @@
  !    - rendering
  !    - obsolete section
  !    - element, attribute, content model, and interface indexes
+ !    - section for the element itself
  !
  !-->
 <!--START validation-->
@@ -24492,8 +24493,8 @@
    <dt>Contexts in which this element may be used:</dt>
    <dd>Where <span>embedded content</span> is expected.</dd>
    <dt>Content model:</dt>
-   <dd>If the element has a <code title="attr-media-src">src</code> attribute: <span>transparent</span>, but with no <span>media element</span> descendants.</dd>
-   <dd>If the element does not have a <code title="attr-media-src">src</code> attribute: one or more <code>source</code> elements, then, <span>transparent</span>, but with no <span>media element</span> descendants.</dd>
+   <dd>If the element has a <code title="attr-media-src">src</code> attribute: zero or more <code>track</code> elements, then <span>transparent</span>, but with no <span>media element</span> descendants.</dd>
+   <dd>If the element does not have a <code title="attr-media-src">src</code> attribute: one or more <code>source</code> elements, then zero or more <code>track</code> elements, then <span>transparent</span>, but with no <span>media element</span> descendants.</dd>
    <dt>Content attributes:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code title="attr-media-src">src</code></dd>
@@ -24818,8 +24819,8 @@
    <dt>Contexts in which this element may be used:</dt>
    <dd>Where <span>embedded content</span> is expected.</dd>
    <dt>Content model:</dt>
-   <dd>If the element has a <code title="attr-media-src">src</code> attribute: <span>transparent</span>, but with no <span>media element</span> descendants.</dd>
-   <dd>If the element does not have a <code title="attr-media-src">src</code> attribute: one or more <code>source</code> elements, then, <span>transparent</span>, but with no <span>media element</span> descendants.</dd>
+   <dd>If the element has a <code title="attr-media-src">src</code> attribute: zero or more <code>track</code> elements, then <span>transparent</span>, but with no <span>media element</span> descendants.</dd>
+   <dd>If the element does not have a <code title="attr-media-src">src</code> attribute: one or more <code>source</code> elements, then zero or more <code>track</code> elements, then <span>transparent</span>, but with no <span>media element</span> descendants.</dd>
    <dt>Content attributes:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code title="attr-media-src">src</code></dd>
@@ -24971,7 +24972,7 @@
    <dt>Categories</dt>
    <dd>None.</dd>
    <dt>Contexts in which this element may be used:</dt>
-   <dd>As a child of a <span>media element</span>, before any <span>flow content</span>.</dd>
+   <dd>As a child of a <span>media element</span>, before any <span>flow content</span> or <code>track</code> elements.</dd>
    <dt>Content model:</dt>
    <dd>Empty.</dd>
    <dt>Content attributes:</dt>
@@ -25163,6 +25164,112 @@
 
 
 
+  <h4>The <dfn><code>track</code></dfn> element</h4>
+
+  <dl class="element">
+   <dt>Categories</dt>
+   <dd>None.</dd>
+   <dt>Contexts in which this element may be used:</dt>
+   <dd>As a child of a <span>media element</span>, before any <span>flow content</span>.</dd>
+   <dt>Content model:</dt>
+   <dd>Empty.</dd>
+   <dt>Content attributes:</dt>
+   <dd><span>Global attributes</span></dd>
+   <dd><code title="attr-track-kind">kind</code></dd>
+   <dd><code title="attr-track-label">label</code></dd>
+   <dd><code title="attr-track-src">src</code></dd>
+   <dd><code title="attr-track-srclang">srclang</code></dd>
+   <dt>DOM interface:</dt>
+   <dd>
+<pre class="idl">interface <dfn>HTMLTrackElement</dfn> : <span>HTMLElement</span> {
+           attribute DOMString <span title="dom-track-kind">kind</span>;
+           attribute DOMString <span title="dom-track-label">label</span>;
+           attribute DOMString <span title="dom-track-src">src</span>;
+           attribute DOMString <span title="dom-track-srclang">srclang</span>;
+};</pre>
+   </dd>
+  </dl>
+
+  <p>The <code>track</code> element allows authors to specify explicit
+  external timed tracks for <span title="media element">media
+  elements</span>. It does not <span
+  title="represents">represent</span> anything on its own.</p>
+
+  <p>The <dfn title="attr-track-kind"><code>kind</code></dfn>
+  attribute is an <span>enumerated attribute</span>. The following
+  table lists the keywords defined for this attribute. The states
+  given in the first cell of the rows with keywords give the states to
+  which those keywords map.</p>
+
+  <table>
+   <thead>
+    <tr>
+     <th>State
+     <th>Keywords
+     <th>Brief description
+   <tbody>
+    <tr>
+     <td><span title="attr-track-kind-subtitle">Subtitles</span>
+     <td><dfn title="attr-track-kind-keyword-subtitles"><code>subtitles</code></dfn>
+     <td>Translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the <span>media resource</span>'s soundtrack).
+    <tr>
+     <td><span title="attr-track-kind-caption">Captions</span>
+     <td><dfn title="attr-track-kind-keyword-captions"><code>captions</code></dfn>
+     <td>Transcription of the dialogue, suitable for when the soundtrack is unavailable (e.g. because it is muted or because the user is deaf). 
+    <tr>
+     <td><span title="attr-track-kind-descriptions">Descriptions</span>
+     <td><dfn title="attr-track-kind-keyword-descriptions"><code>descriptions</code></dfn>
+     <td>Textual descriptions of the video component of the <span>media resource</span>, intended for audio synthesis when the visual component is unavailable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind).
+    <tr>
+     <td><span title="attr-track-kind-chapters">Chapters</span>
+     <td><dfn title="attr-track-kind-keyword-chapters"><code>chapters</code></dfn>
+     <td>Chapter titles, intended to be used for navigating the <span>media resource</span>.
+    <tr>
+     <td><span title="attr-track-kind-metadata">Metadata</span>
+     <td><dfn title="attr-track-kind-keyword-metadata"><code>metadata</code></dfn>
+     <td>Tracks intended for use from script.
+  </table>
+
+  <p>The attribute may be omitted. The <i>missing value default</i> is
+  the <span title="attr-track-kind-captions">captions</span> state.</p>
+
+  <p>The <dfn title="attr-track-src"><code>src</code></dfn> attribute
+  gives the address of the time track data. The value must be a
+  <span>valid non-empty URL potentially surrounded by
+  spaces</span>. This attribute must be present.</p>
+
+  <p>The <dfn title="attr-track-srclang"><code>srclang</code></dfn>
+  attribute gives the language of the time track data. The value must
+  be a valid BCP 47 language tag. This attribute must be present if
+  the element's <code title="attr-track-kind">kind</code> attribute is
+  in the <span title="attr-track-kind-subtitles">subtitles</span>
+  state. <a href="#refsBCP47">[BCP47]</a></p>
+
+  <p>The <dfn title="attr-track-label"><code>label</code></dfn>
+  attribute gives a user-readable title for the track.</p>
+
+  <p>There must not be two <code>track</code> element children of the
+  same <span>media element</span> whose <code
+  title="attr-track-kind">kind</code> attributes are in the same
+  state, whose <code title="attr-track-srclang">srclang</code>
+  attributes are both missing or have values that represent the same
+  language, and whose <code title="attr-track-label">label</code>
+  attributes are again both missing or both have the same value.</p>
+
+  <div class="impl">
+
+  <p>The IDL attributes <dfn
+  title="dom-track-kind"><code>kind</code></dfn>, <dfn
+  title="dom-track-label"><code>label</code></dfn>, <dfn
+  title="dom-track-src"><code>src</code></dfn>, and <dfn
+  title="dom-track-srclang"><code>srclang</code></dfn> must
+  <span>reflect</span> the respective content attributes of the same
+  name.</p>
+
+  </div>
+
+
+
   <h4>Media elements</h4>
 
   <p><dfn title="media element">Media elements</dfn> implement the
@@ -27797,6 +27904,11 @@
   </div>
 
 
+  <h5>Timed tracks</h5>
+
+  <p class="XXX">processing model for timed tracks</p>
+
+
   <h5>User interface</h5>
 
   <p>The <dfn title="attr-media-controls"><code>controls</code></dfn>
@@ -83389,7 +83501,8 @@
    <code>col</code>, <code>command</code>, <code>embed</code>,
    <code>hr</code>, <code>img</code>, <code>input</code>,
    <code>keygen</code>, <code>link</code>, <code>meta</code>,
-   <code>param</code>, <code>source</code>, <code>wbr</code></dd>
+   <code>param</code>, <code>source</code>, <code>track</code>,
+   <code>wbr</code></dd>
 
    <dt><dfn>Raw text elements</dfn></dt>
 
@@ -90169,7 +90282,7 @@
 
    </dd>
 
-   <dt>A start tag whose tag name is one of: "param", "source"</dt>
+   <dt>A start tag whose tag name is one of: "param", "source", "track"</dt>
    <dd>
 
     <p><span>Insert an HTML element</span> for the token. Immediately
@@ -90494,7 +90607,7 @@
    "basefont", "bgsound", "command", "embed", "hr", "iframe", "image",
    "img", "input", "isindex", "keygen", "link", "meta", "noembed",
    "noframes", "param", "script", "select", "source", "style",
-   "table", "textarea", "title", "wbr"</dt>-->
+   "table", "textarea", "title", "track", "wbr"</dt>-->
    <!--<dt>An end tag whose tag name is "noscript", if the
    <span>scripting flag</span> is enabled</dt>-->
    <dd>
@@ -93650,7 +93763,7 @@
 
 [hidden], area, base, basefont, command, datalist, head,
 input[type=hidden], link, menu[type=context], meta, noembed, noframes,
-param, rp, script, source, style, title { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
+param, rp, script, source, style, track, title { /* <a href="#case-insensitive-selector-exception">case-insensitive</a> */
   display: none;
 }
 
@@ -94738,6 +94851,8 @@
   the <code>video</code> element itself, and is expected to be
   centered in the <code>video</code> element.</p>
 
+  <p class="XXX">pointer to rendering model for timed tracks</p>
+
   <p class="note">Resizing <code>video</code> and <code>canvas</code>
   elements does not interrupt video playback or clear the canvas.</p>
 
@@ -94754,6 +94869,17 @@
 
   <div class="impl">
 
+  <h4>Timed tracks</h4>
+
+  <p class="XXX">rendering model for timed tracks</p>
+
+  <p class="XXX">CSS extensions</p>
+
+  </div>
+
+
+  <div class="impl">
+
   <h4>Images</h4>
 
   <p>When an <code>img</code> element or an <code>input</code> element
@@ -99970,6 +100096,21 @@
     </tr>
 
     <tr>
+     <th><code>track</code></th>
+     <td>Timed track</td>
+     <td>none</td>
+     <td><code>audio</code>;
+         <code>video</code></td>
+     <td>empty</td>
+     <td><span title="global attributes">globals</span>;
+         <code title="attr-track-kind">kind</code>;
+         <code title="attr-track-label">label</code>;
+         <code title="attr-track-src">src</code>;
+         <code title="attr-track-srclang">srclang</code></td>
+     <td><code>HTMLTrackElement</code></td>
+    </tr>
+
+    <tr>
      <th><code>ul</code></th>
      <td>List</td>
      <td><span title="Flow content">flow</span></td>
@@ -100720,11 +100861,21 @@
      <td> The type of cryptographic key to generate
      <td> <a href="#attribute-text">Text</a>*
     <tr>
+     <th> <code title="">kind</code>
+     <td> <code title="attr-track-kind">track</code>
+     <td> The type of timed track
+     <td> "<code title="attr-track-kind-subtitles">subtitles</code>";
+          "<code title="attr-track-kind-captions">captions</code>";
+          "<code title="attr-track-kind-descriptions">descriptions</code>";
+          "<code title="attr-track-kind-chapters">chapters</code>";
+          "<code title="attr-track-kind-metadata">metadata</code>"
+    <tr>
      <th> <code title="">label</code>
      <td> <code title="attr-command-label">command</code>;
           <code title="attr-menu-label">menu</code>;
           <code title="attr-optgroup-label">optgroup</code>;
-          <code title="attr-option-label">option</code>
+          <code title="attr-option-label">option</code>;
+          <code title="attr-track-label">track</code>
      <td> User-visible label
      <td> <a href="#attribute-text">Text</a>
     <tr>
@@ -100999,6 +101150,7 @@
           <code title="attr-input-src">input</code>;
           <code title="attr-script-src">script</code>;
           <code title="attr-source-src">source</code>;
+          <code title="attr-track-src">track</code>;
           <code title="attr-media-src">video</code>
      <td> Address of the resource
      <td> <span>Valid non-empty URL potentially surrounded by spaces</span>
@@ -101008,6 +101160,11 @@
      <td> A document to render in the <code>iframe</code>
      <td> The source of <span>an <code>iframe</code> <code title="attr-iframe-srcdoc">srcdoc</code> document</span>*
     <tr>
+     <th> <code title="">srclang</code>
+     <td> <code title="attr-track-srclang">track</code>
+     <td> Language of the timed track
+     <td> Valid BCP 47 language tag
+    <tr>
      <th> <code title="">start</code>
      <td> <code title="attr-ol-start">ol</code>
      <td> Ordinal value of the first item
@@ -102012,6 +102169,10 @@
      <td> <code>HTMLTableElement</code> : <code>HTMLElement</code>
 
     <tr>
+     <td> <code>tbody</code>
+     <td> <code>HTMLTableSectionElement</code> : <code>HTMLElement</code>
+
+    <tr>
      <td> <code>td</code>
      <td> <code>HTMLTableDataCellElement</code> : <code>HTMLTableCellElement</code> : <code>HTMLElement</code>
 
@@ -102020,12 +102181,16 @@
      <td> <code>HTMLTextAreaElement</code> : <code>HTMLElement</code>
 
     <tr>
+     <td> <code>tfoot</code>
+     <td> <code>HTMLTableSectionElement</code> : <code>HTMLElement</code>
+
+    <tr>
      <td> <code>th</code>
      <td> <code>HTMLTableHeaderCellElement</code> : <code>HTMLTableCellElement</code> : <code>HTMLElement</code>
 
     <tr>
      <td> <code>thead</code>
-     <td> <code>HTMLTableRowElement</code> : <code>HTMLElement</code>
+     <td> <code>HTMLTableSectionElement</code> : <code>HTMLElement</code>
 
     <tr>
      <td> <code>time</code>
@@ -102036,6 +102201,14 @@
      <td> <code>HTMLTitleElement</code> : <code>HTMLElement</code>
 
     <tr>
+     <td> <code>tr</code>
+     <td> <code>HTMLTableRowElement</code> : <code>HTMLElement</code>
+
+    <tr>
+     <td> <code>track</code>
+     <td> <code>HTMLTrackElement</code> : <code>HTMLElement</code>
+
+    <tr>
      <td> <code>ul</code>
      <td> <code>HTMLUListElement</code> : <code>HTMLElement</code>
 




More information about the Commit-Watchers mailing list