Adding the region-relevant interfaces to the TextTrack API.
authorSilvia Pfeiffer
Tue, 25 Jun 2013 16:02:32 -0400
changeset 106 982050a276de
parent 105 831d1bb300f1
child 107 88cfde941d0c
Adding the region-relevant interfaces to the TextTrack API.
webvtt/webvtt.html
--- a/webvtt/webvtt.html	Tue Jun 25 13:09:22 2013 -0400
+++ b/webvtt/webvtt.html	Tue Jun 25 16:02:32 2013 -0400
@@ -505,6 +505,8 @@
    <li><dfn>Alphanumeric ASCII characters</dfn>
    <li><dfn>Space character</dfn>
    <li><dfn>Skip whitespace</dfn>
+   <li><dfn>Supported property indices</dfn>
+   <li><dfn>Determine the value of an indexed property</dfn>
    <li><dfn>Split a string on spaces</dfn>
    <li><dfn>HTML namespace</dfn>
    <li><dfn>Media element</dfn>
@@ -514,6 +516,7 @@
    <li><dfn>Text track</dfn>
    <li><dfn>Text track kind</dfn>
    <li><dfn>Text track mode</dfn>
+   <li><dfn>Text track disabled</dfn>
    <li><dfn>Text track showing</dfn>
    <li><dfn>Text track cue</dfn>
    <li><dfn>Text track list of cues</dfn>
@@ -528,6 +531,7 @@
    <li><dfn>Rules for updating the text track rendering</dfn>
    <li><dfn>Rules for rendering the cue in isolation</dfn>
    <li><dfn><code>TextTrackCue</code></dfn> interface
+   <li><dfn><code>TextTrack</code></dfn> interface
   </ul>
   </section>
   </section>
@@ -1324,9 +1328,9 @@
   <ol>
    <li><p>The string "<code>width</code>".</p></li>
    <li><p>A U+003D EQUALS SIGN character (=).</p></li>
-   <li><p>One or more <span>ASCII digits</span>.</p></li>
+   <li><p>One or more <a>ASCII digits</a>.</p></li>
    <li><p>An optional U+002E DOT character (.).</p></li>
-   <li><p>One or more <span>ASCII digits</span>.</p></li>
+   <li><p>One or more <a>ASCII digits</a>.</p></li>
    <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
   </ol>
   <p class ="note">The <a>WebVTT region width setting</a> provides
@@ -1338,7 +1342,7 @@
   <ol>
    <li><p>The string "<code>lines</code>".</p></li>
    <li><p>A U+003D EQUALS SIGN character (=).</p></li>
-   <li><p>One or more <span>ASCII digits</span>.</p></li>
+   <li><p>One or more <a>ASCII digits</a>.</p></li>
   </ol>
   <p class ="note">The <a>WebVTT region lines setting</a> provides
   a fixed height as a number of lines for the region into which cues are rendered. As such, it
@@ -1349,14 +1353,14 @@
   <ol>
    <li><p>The string "<code>regionanchor</code>".</p></li>
    <li><p>A U+003D EQUALS SIGN character (=).</p></li>
-   <li><p>One or more <span>ASCII digits</span>.</p></li>
+   <li><p>One or more <a>ASCII digits</a>.</p></li>
    <li><p>An optional U+002E DOT character (.).</p></li>
-   <li><p>One or more <span>ASCII digits</span>.</p></li>
+   <li><p>One or more <a>ASCII digits</a>.</p></li>
    <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
    <li><p>A U+002C COMMA character (,).</p></li>
-   <li><p>One or more <span>ASCII digits</span>.</p></li>
+   <li><p>One or more <a>ASCII digits</a>.</p></li>
    <li><p>An optional U+002E DOT character (.).</p></li>
-   <li><p>One or more <span>ASCII digits</span>.</p></li>
+   <li><p>One or more <a>ASCII digits</a>.</p></li>
    <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
   </ol>
   <p class ="note">The <a>WebVTT region anchor setting</a> provides
@@ -1371,14 +1375,14 @@
   <ol>
    <li><p>The string "<code>viewportanchor</code>".</p></li>
    <li><p>A U+003D EQUALS SIGN character (=).</p></li>
-   <li><p>One or more <span>ASCII digits</span>.</p></li>
+   <li><p>One or more <a>ASCII digits</a>.</p></li>
    <li><p>An optional U+002E DOT character (.).</p></li>
-   <li><p>One or more <span>ASCII digits</span>.</p></li>
+   <li><p>One or more <a>ASCII digits</a>.</p></li>
    <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
    <li><p>A U+002C COMMA character (,).</p></li>
-   <li><p>One or more <span>ASCII digits</span>.</p></li>
+   <li><p>One or more <a>ASCII digits</a>.</p></li>
    <li><p>An optional U+002E DOT character (.).</p></li>
-   <li><p>One or more <span>ASCII digits</span>.</p></li>
+   <li><p>One or more <a>ASCII digits</a>.</p></li>
    <li><p>A U+0025 PERCENT SIGN character (%).</p></li>
   </ol>
   <p class ="note">The <a>WebVTT region viewport
@@ -2043,7 +2047,7 @@
 
   <p>When the <a>WebVTT parser</a> requires that the user agent <dfn>collect WebVTT region settings</dfn> from a string <var>input</var> for a <a>text track</a>, the user agent must run the following algorithm.</p>
   
-  <p>A <dfn>WebVTT region object</dfn> is a conceptual construct to represent a <a>WebVTT region</a> that is used as a root node for <a title="List of WebVTT node objects">lists of WebVTT node objects</a>. This algorithm returns a list of WebVTT Region Objects.</p>
+  <p>A <dfn>WebVTT region object</dfn> is a conceptual construct to represent a <a>WebVTT region</a> that is used as a root node for <a title="List of WebVTT node objects">lists of WebVTT node objects</a>. This algorithm returns a list of <a title="WebVTT region object">WebVTT Region Objects</a>.</p>
 
   <ol>
     <li><p>Let <var>settings</var> be the result of <a title="split a string on spaces">splitting <var>input</var> on spaces</a>.</p></li>
@@ -2071,7 +2075,7 @@
           <dt>Otherwise if <var>name</var> is a <a>case-sensitive</a> match for "<code>lines</code>"</dt>
           <dd>
             <ol>
-              <li><p>If <var>value</var> contains any characters other than <span>ASCII digits</span>, then jump to the step labeled <i>next setting</i>.</p></li>
+              <li><p>If <var>value</var> contains any characters other than <a>ASCII digits</a>, then jump to the step labeled <i>next setting</i>.</p></li>
 
               <li><p>Interpret <var>value</var> as an integer, and let <var>number</var> be that number.</p></li>
 
@@ -2129,7 +2133,7 @@
   <ol>
    <li><p>Let <var>input</var> be the string being parsed.</p></li>
 
-   <li><p>If <var>input</var> contains any characters other than U+0025 PERCENT SIGN characters (%), U+002E DOT characters (.) and <span>ASCII digits</span>, then fail.</p></li>
+   <li><p>If <var>input</var> contains any characters other than U+0025 PERCENT SIGN characters (%), U+002E DOT characters (.) and <a>ASCII digits</a>, then fail.</p></li>
 
    <li><p>If <var>input</var> does not contain at least one <a href="http://www.w3.org/TR/html5/single-page.html#ascii-digits" class="externalDFN">ASCII digit</a>, then fail.</p></li>
 
@@ -3599,7 +3603,7 @@
    of cues</a> that have their <a>text track cue active
    flag</a> set.</p></li>
 
-   <li><p>If <var>reset</var> is false, then, for each <span>text track region</span> <var>region</var> in <var>regions</var> let <var>regionNode</var> be a <a>WebVTT region object</a>.</p></li>
+   <li><p>If <var>reset</var> is false, then, for each <a>text track region</a> <var>region</var> in <var>regions</var> let <var>regionNode</var> be a <a>WebVTT region object</a>.</p></li>
 
    <li><p>Apply the following steps for each <var>regionNode</var>:</p>
 
@@ -3629,7 +3633,7 @@
      </ol>
    </li>
 
-   <li><p>If <var>reset</var> is false, then, for each <span>text track cue</span> <var>cue</var> in <var>cues</var>: if <var>cue</var>'s <span>text track cue display state</span> has a set of CSS boxes, then:</p>
+   <li><p>If <var>reset</var> is false, then, for each <a>text track cue</a> <var>cue</var> in <var>cues</var>: if <var>cue</var>'s <a>text track cue display state</a> has a set of CSS boxes, then:</p>
 
      <ul>
        <li><p>if there is a <a>WebVTT region</a> whose <a title="WebVTT region identifier">region identifier</a> is identical to <var>cue</var>'s <a>text track cue region identifier</a>:</p>
@@ -4417,9 +4421,9 @@
 
          <li><p>If <var>region</var>'s <a>text track region scroll</a> setting is '<code>up</code>' and <var>region</var> already has one child, set <var>region</var>'s 'transition-property' to 'top' and 'transition-duration' to '0.433s'.</p></li>
 
-         <li><p>Let <var>nodes</var> be the <span>list of WebVTT Node Objects</span> obtained by applying the <span>WebVTT cue text parsing rules</span> to the <var>cue</var>'s <span>text track cue text</span>.</p></li>
-
-         <li><p>Apply the Unicode Bidirectional Algorithm's Paragraph Level steps to the concatenation of the values of each <span>WebVTT Text Object</span> in <var>nodes</var>, in a pre-order, depth-first traversal, excluding <span>WebVTT Ruby Text Objects</span> and their descendants, to determine the <i>paragraph embedding level</i> of the first
+         <li><p>Let <var>nodes</var> be the <a>list of WebVTT Node Objects</a> obtained by applying the <a>WebVTT cue text parsing rules</a> to the <var>cue</var>'s <a>text track cue text</a>.</p></li>
+
+         <li><p>Apply the Unicode Bidirectional Algorithm's Paragraph Level steps to the concatenation of the values of each <a>WebVTT Text Object</a> in <var>nodes</var>, in a pre-order, depth-first traversal, excluding <a title="WebVTT Ruby Text Object">WebVTT Ruby Text Objects</a> and their descendants, to determine the <i>paragraph embedding level</i> of the first
 Unicode paragraph of the cue. <a href="#refsBIDI">[BIDI]</a></p>
            <p class="note">Within a cue, paragraph boundaries are only denoted by Type B characters, such as U+000A LINE FEED (LF), U+0085 NEXT LINE (NEL), and U+2029 PARAGRAPH SEPARATOR. (This means each line of the cue is reordered as if it was a separate paragraph.)</p>
          </li>
@@ -4427,7 +4431,7 @@
          <li><p>If the <i>paragraph embedding level</i> determined in the previous step is even (the <i>paragraph direction</i> is left-to-right), let <var>direction</var> be 'ltr', otherwise, let it be 'rtl'.</p>
          </li>
 
-         <li><p>Let <var>offset</var> be the <span>text track cue text position</span> multiplied by the <var>width</var> of the <a>WebVTT region object</a> whose <a title="text track cue region identifier">region identifier</a> is identical to <var>cue</var>'s <a>text track cue region identifier</a> and divided by 100 (i.e. interpret it as a percentage of the region width).</p>
+         <li><p>Let <var>offset</var> be the <a>text track cue text position</a> multiplied by the <var>width</var> of the <a>WebVTT region object</a> whose <a title="text track cue region identifier">region identifier</a> is identical to <var>cue</var>'s <a>text track cue region identifier</a> and divided by 100 (i.e. interpret it as a percentage of the region width).</p>
          </li>
 
          <li><p>If <var>direction</var> is 'ltr' and 'text-align' is 'start' or 'left', or if <var>direction</var> is 'rtl' and 'text-align' is 'end' or 'left', let <var>left</var> be <var>offset</var> and let <var>right</var> be 'auto'</p>
@@ -4441,7 +4445,7 @@
 
          <li><p>If there are no line boxes in <var>boxes</var>, skip the remainder of these substeps for <var>cue</var>. The cue is ignored.</p></li>
 
-         <li><p>Let <var>cue</var>'s <span>text track cue display state</span> have the CSS boxes in <var>boxes</var>.</p></li>
+         <li><p>Let <var>cue</var>'s <a>text track cue display state</a> have the CSS boxes in <var>boxes</var>.</p></li>
 
          <li><p>Add the CSS boxes in <var>boxes</var> to <var>region</var>.</p></li>
        </ol>
@@ -4470,15 +4474,18 @@
   user agent cascade layer as defined in this section. <a
   href="#refsCSS">[CSS]</a></p>
 
-  <p>On the (root) <a>list of WebVTT Node Objects</a>, the
-  'position' property must be set to 'absolute', the 'unicode-bidi'
-  property must be set to 'plaintext', the 'direction' property must
-  be set to <var title="">direction</var>, the 'writing-mode' property
-  must be set to <var title="">writing-mode</var>, the 'top' property
-  must be set to <var title="">top</var>, the 'left' property must be
-  set to <var title="">left</var>, the 'width' property must be set to
-  <var title="">width</var>, and the 'height' property must be set to
-  <var title="">height</var>, where <var title="">direction</var>,
+  <p>Initialize the (root) <a>list of WebVTT Node Objects</a> with the following CSS settings:</p>
+  <ul>
+   <li>the 'position' property must be set to 'absolute'</li>
+   <li>the 'unicode-bidi' property must be set to 'plaintext'</li>
+   <li>the 'direction' property must be set to <var title="">direction</var></li>
+   <li>the 'writing-mode' property must be set to <var title="">writing-mode</var></li>
+   <li>the 'top' property must be set to <var title="">top</var></li>
+   <li>the 'left' property must be set to <var title="">left</var></li>
+   <li>the 'width' property must be set to <var title="">width</var></li>
+   <li>the 'height' property must be set to<var title="">height</var></li>
+  </ul>
+  <p>The variables <var title="">direction</var>,
   <var title="">writing-mode</var>, <var title="">top</var>, <var
   title="">left</var>, <var title="">width</var>, and <var
   title="">height</var> are the values with those names determined by
@@ -4487,6 +4494,39 @@
   title="text track cue text">text</a> the <a>list of WebVTT
   Node Objects</a> was constructed.</p>
 
+  <p>Every <a href="#webvtt-region-object">WebVTT region object</a> is initialised with the following CSS settings:</p>
+  <ul>
+    <li>the 'position' property must be set to 'absolute'</li>
+    <li>the 'writing-mode' property must be set to 'horizontal-tb'</li>
+    <li>the 'background' shorthand property must be set to 'rgba(0,0,0,0.8)'</li>
+    <li>the 'word-wrap' property must be set to 'break-word'</li>
+    <li>the 'overflow-wrap' property must be set to 'break-word'</li>
+    <li>the 'font' shorthand property must be set to '(0.0533/1.3)vh sans-serif'</li>
+    <li>the 'line-height' shorthand property must be set to '0.0533vh'</li>
+    <li>the 'color' property must be set to 'rgba(255,255,255,1)'</li>
+    <li>the 'overflow' property must be set to 'hidden'</li>
+    <li>the 'width' property must be set to <var>width</var></li>
+    <li>the 'min-height' property must be set to '0px'</li>
+    <li>the 'max-height' property must be set to <var>height</var></li>
+    <li>the 'left' property must be set to <var>left</var></li>
+    <li>the 'right' property must be set to <var>right</var></li>
+    <li>the 'top' property must be set to <var>top</var></li>
+    <li>the 'display' property must be set to 'inline-flex'</li>
+    <li>the 'flex-flow' property must be set to 'column'</li>
+    <li>the 'justify-content' property must be set to 'flex-end'</li>
+  </ul>
+  <p>The variables <var>width</var>, <var>height</var>, <var>top</var>, and <var>left</var> are the values with those names determined by the <a>rules for updating the display of WebVTT text tracks</a> for the <a>text track region</a> from which the <a>WebVTT region object</a> was constructed.</p>
+
+  <p>The children of every <a>WebVTT region object</a> are further initialised with these CSS settings:</p>
+  <ul>
+    <li>the 'position' property must be set to 'relative'</li>
+    <li>the 'unicode-bidi' property must be set to 'plaintext'</li>
+    <li>the 'width' property must be set to 'auto'</li>
+    <li>the 'height' property must be set to <var>height</var></li>
+    <li>the 'left' property must be set to <var>left</var></li>
+    <li>the 'text-align' property must be set as described for <a href="http://dev.w3.org/html5/webvtt/#applying-css-properties-to-webvtt-node-objects" class="externalDFN">(root) List of WebVTT Node Objects</a> not part of a region</li>
+  </ul>
+
   <p>The 'text-align' property on the (root) <a>list of WebVTT Node
   Objects</a> must be set to the value in the second cell of the
   row of the table below whose first cell is the value of the
@@ -4549,8 +4589,9 @@
   rendered, if any. If there is no <a>media element</a> (i.e. if
   the <a>text track</a> is being rendered for another media
   playback mechanism), then inherited properties on the root
-  <a>list of WebVTT Node Objects</a> must take their initial
-  values.</p>
+  <a>list of WebVTT Node Objects</a> and the
+  <a title="WebVTT region object">WebVTT region objects</a>
+  must take their initial values.</p>
 
   <p>If there are style sheets that apply to the <a>media
   element</a> or other playback mechanism, then they must be
@@ -4822,6 +4863,23 @@
   Object</a> <var title="">c</var>.</p>
   </section>
 
+  <section>
+  <h3>The '::cue-region' pseudo-element</h3>
+
+  <p>Pseudo-elements apply to elements that are matched by selectors. For the purpose of this section, that element is the matched element. The pseudo-element defined below affects the styling of text track regions that are being rendered for the matched element.</p>
+
+  <p clss="note">If the matched element is not a video element, the pseudo-element defined below won't have any effect according to this specification.</p>
+
+  <p>The '<dfn title="pseudo-region">::cue-region</dfn>' pseudo-element (with no argument) matches any list of <a title="WebVTT region object">WebVTT region objects</a> constructed for the <i>matched element</i>.</p>
+
+    <p>The <a title="pseudo-cue">same properties that apply to '::cue'</a> apply to the '::cue-region' pseudo-element with no argument; other properties set on the pseudo-element must be ignored.</p>
+
+  <p>When a user agent is rendering one or more text track regions according to the WebVTT cue text rendering rules, <a title="WebVTT region object">WebVTT region objects</a> used in the rendering can be matched by the above pseudo-element. User agents that support the pseudo-element must dynamically update renderings accordingly. When either 'white-space' or one of the properties corresponding to the 'font' shorthand (including 'line-height') changes value, then the text track cue display state of all the text track cues in the region must be emptied and the text track's rules for updating the text track rendering must be immediately rerun.</p>
+
+  <p>A CSS user agent that implements the text tracks model must implement the '::cue-region' pseudo-element.</p>
+
+    </section>
+
   </section>
 
   </section>
@@ -4829,7 +4887,10 @@
   </section>
 
   <section>
-  <h2>WebVTT API</h2>
+  <h2>WebVTT API for Browsers</h2>
+
+  <section>
+  <h3>WebVTTCue interface</h3>
 
   <p>The following interface is used to expose WebVTT cues in the DOM API:</p>
 
@@ -5074,6 +5135,262 @@
   </section>
 
   <section>
+  <h3>Extension of the TextTrack interface for region support</h3>
+
+  <p>The following attribute and methods are introduced into the <a href="http://www.w3.org/TR/html5/single-page.html#texttrack" class="externalDFN">TextTrack</a> object:</p>
+
+  <pre class="idl_whatwg">
+interface <a>TextTrack</a> : EventTarget {
+          attribute TextTrackRegionList? <a title="dom-TextTrack-regions">regions</a>;
+  void <a title="dom-TextTrack-addRegion">addRegion</a>(<a>TextTrackRegion</a> region);
+  void <a title="dom-TextTrack-removeRegion">removeRegion</a>(<a>TextTrackRegion</a> region);
+};</pre>
+
+  <dl class="domintro">
+
+   <dt><var title="">textTrack</var> . <a title="dom-TextTrack-regions">regions</a></dt>
+   <dd>
+    <p>Returns the <a>text track list of regions</a>, as a <code>TextTrackRegionList</code> object.</p>
+   </dd>
+
+   <dt><var title="">textTrack</var> . <a title="dom-TextTrack-addRegion">addRegion</a>(region)</dt>
+   <dd>
+    <p>Adds the given region to <var>TextTrack</var>'s <a>text track list of regions</a>. If that list already contains a region with the same identifier, update that region's attributes with those of <var>region</var>.</p>
+   </dd>
+
+   <dt><var title="">textTrack</var> . <a title="dom-TextTrack-removeRegion">removeRegion</a>(region)</dt>
+   <dd>
+    <p>Removes the given region from <var>TextTrack</var>'s <a>text track list of regions</a>.</p>
+   </dd>
+
+  </dl>
+
+  <p>If the <a>text track mode</a> of the <a>text track</a> that the <var>TextTrack</var> object represents is not the <a>text track disabled</a> mode, then the <dfn title="dom-texttrack-regions">regions</dfn> attribute must return a live <a>TextTrackRegionList</a> object that represents the <a>text track list of regions</a> of the <a>text track</a>. Otherwise, it must return null. When an object is returned, the same object must be returned each time.</p>
+
+  <p>The <dfn title="dom-TextTrack-addRegion"><code>addRegion(<var>region</var>)</code></dfn> method of <code>TextTrack</code> objects, when invoked, must run the following steps:</p>
+
+  <ol>
+   <li><p>If the given <var>region</var> is in a <a>text track list of regions</a>, then remove <var>region</var> from that <a>text track list of regions</a>.</p></li>
+
+   <li><p>If the method's <a><code>TextTrack</code></a> object's <a>text track list of regions</a> contains a region with the same identifier as <var>region<var> replace the values of that region's <var>width</var>, <var>lines</var>, <var>anchor point</var>, <var>viewport anchor point</var> and <var>scroll</var> attributes with those of <var>region</var>.</p>
+
+   <p>Otherwise: add <var>region</var> to the method's <code>TextTrack</code> object's <a>text track list of regions</a>.</p></li>
+  </ol>
+
+  <p>The <dfn title="dom-TextTrack-removeRegion"><code>removeRegion(<var>region</var>)</code></dfn> method of <code>TextTrack</code> objects, when invoked, must run the following steps:</p>
+
+  <ol>
+   <li><p>If the given <var>region</var> is not currently listed in the method's <code>TextTrack</code> object's <a>text track list of regions</a>, then throw a NotFoundError exception.</p></li>
+
+   <li><p>Otherwise: remove <var>region</var> from that <a>text track list of regions</a>.</p></li>
+  </ol>
+
+  </section><!-- TextTrack interface -->
+
+  <section>
+  <h3>Extension of the TextTrackCue interface for region support</h3>
+
+  <p>The following attribute is introduced into the <a>TextTrackCue</a> object:</p>
+
+  <pre class="idl_whatwg">
+interface <a>TextTrackCue</a> : EventTarget {
+          attribute DOMString <a title="dom-TextTrackCue-regionId">regionId</a>;
+};</pre>
+
+  <dl class="domintro">
+
+   <dt><var title="">cue</var> . <a title="dom-TextTrackCue-regionId">regionId</a></dt>
+   <dd>
+    <p>Returns the <a>text track cue region identifier</a>.</p>
+   </dd>
+  </dl>
+
+  <p>Initialise <a title="dom-TextTrackCue-regionId">regionId</a> in the <var>TextTrackCue</var> constructor with the empty string.</p>
+
+  <p>The <dfn title="dom-TextTrackCue-regionId">regionId</dfn> attribute, on getting, must return the <a>text track cue region identifier</a> of the text track cue that the <a>TextTrackCue</a> object represents. On setting, the text track region identifier must be set to the new value.</p>
+
+  </section><!-- end TextTrackCue object extension -->
+
+  <section>
+  <h3>TextTrackRegion interface</h3>
+
+  <p>The following interface is used to expose WebVTT regions in the DOM API:</p>
+
+  <pre class="idl_whatwg">
+[Constructor]
+interface <dfn>TextTrackRegion</dfn> : EventTarget {
+ readonly attribute TextTrack? <a title="dom-TextTrackRegion-track">track</a>;
+          attribute DOMString <a title="dom-TextTrackRegion-id">id</a>;
+          attribute double <a title="dom-TextTrackRegion-width">width</a>;
+          attribute long <a title="dom-TextTrackRegion-lines">lines</a>;
+          attribute double <a title="dom-TextTrackRegion-regionAnchorX">regionAnchorX</a>;
+          attribute double <a title="dom-TextTrackRegion-regionAnchorY">regionAnchorY</a>;
+          attribute double <a title="dom-TextTrackRegion-viewportAnchorX">viewportAnchorX</a>;
+          attribute double <a title="dom-TextTrackRegion-viewportAnchorY">viewportAnchorY</a>;
+          attribute DOMString <a title="dom-TextTrackRegion-scroll">scroll</a>;
+};</pre>
+
+  <dl class="domintro">   
+
+   <dt><var title="">region</var> = new <code title="dom-TextTrackRegion">TextTrackRegion</code>()</dt>
+   <dd>
+    <p>Returns a new <code>TextTrackRegion</code> object, for use with the <code title="dom-TextTrack-addRegion">addRegion()</code> method.</p>
+   </dd>
+
+   <dt><var title="">region</var> . <a title="dom-TextTrackRegion-track">track</a></dt>
+   <dd>
+    <p>Returns the <var>TextTrack</var> object to which this text track region belongs, if any, or null otherwise.</p>
+   </dd>
+
+   <dt><var title="">region</var> . <a title="dom-TextTrackRegion-id">id</a></dt>
+   <dd>
+    <p>Returns the text track region identifier. Can be set.</p>
+   </dd>
+
+   <dt><var title="">region</var> . <a title="dom-TextTrackRegion-width">width</a></dt>
+   <dd>
+    <p>Returns the text track region width as a percentage of the video width. Can be set. Throws an IndexSizeError if the new value is not in the range 0.0% .. 100.0%.</p>
+   </dd>
+
+   <dt><var title="">region</var> . <a title="dom-TextTrackRegion-lines">lines</a></dt>
+   <dd>
+    <p>Returns the text track region height as a number of lines. Can be set.</p>
+   </dd>
+
+   <dt><var title="">region</var> . <a title="dom-TextTrackRegion-regionAnchorX">regionAnchorX</a></dt>
+   <dd>
+    <p>Returns the text track region anchor X offset as a percentage of the region width. Can be set. Throws an IndexSizeError if the new value is not in the range 0.0% .. 100.0%.</p>
+   </dd>
+
+   <dt><var title="">region</var> . <a title="dom-TextTrackRegion-regionAnchorX">regionAnchorX</a></dt>
+   <dd>
+    <p>Returns the text track region anchor Y offset as a percentage of the region height. Can be set. Throws an IndexSizeError if the new value is not in the range 0.0% .. 100.0%.</p>
+   </dd>
+
+   <dt><var title="">region</var> . <a title="dom-TextTrackRegion-viewportAnchorX">viewportAnchorX</a></dt>
+   <dd>
+    <p>Returns the text track region viewport anchor X offset as a percentage of the video width. Can be set. Throws an IndexSizeError if the new value is not in the range 0.0% .. 100.0%.</p>
+   </dd>
+
+   <dt><var title="">region</var> . <a title="dom-TextTrackRegion-viewportAnchorY">viewportAnchorY</a></dt>
+   <dd>
+    <p>Returns the text track region viewport anchor Y offset as a percentage of the video height. Can be set. Throws an IndexSizeError if the new value is not in the range 0.0% .. 100.0%.</p>
+   </dd>
+
+   <dt><var title="">region</var> . <a title="dom-TextTrackRegion-scroll">scroll</a></dt>
+   <dd><p>Returns a string representing the text track region scroll as follows:</p>
+    <dl class="switch">
+     <dt>If it is unset.</dt>
+     <dd><p>The empty string.</p></dd>
+     <dt>If it is up</dt>
+     <dd><p>The string "<code>up</code>".</p></dd>
+    </dl>
+    <p>Can be set.</p>
+   </dd>
+  </dl>
+
+  <p>The <dfn title="dom-TextTrackRegion"><code>TextTrackRegion()</code></dfn> constructor, when invoked, must run the following steps:</p>
+
+  <ol>
+    <li><p>Create a new <a>text track region</a>. Let <var>region</var> be that <a>text track region</a>.</p></li>
+
+    <!-- default settings -->
+    <li><p>Let <var>region</var>'s <a>text track region identifier</a> be the empty string.</p></li>
+
+    <li><p>Let <var>region</var>'s <a>text track region width</a> be 100.</p></li>
+
+    <li><p>Let <var>region</var>'s <a>text track region lines</a> be 3.</p></li>
+
+    <li><p>Let <var>region</var>'s <a title="text track region anchor">text track region regionAnchorX</a> be 0.</p></li>
+
+    <li><p>Let <var>region</var>'s <a title="text track region anchor">text track region regionAnchorY</a> be 100.</p></li>
+
+    <li><p>Let <var>region</var>'s <a title="text track region viewport anchor">text track region viewportAnchorX</a> be 0.</p></li>
+
+    <li><p>Let <var>region</var>'s <a title="text track region viewport anchor">text track region viewportAnchorY</a> be 100.</p></li>
+
+    <li><p>Let <var>region</var>'s <a>text track region scroll</a> be the empty string.</p></li>
+
+    <li><p>Return the <code>TextTrackRegion</code> object representing region.</p></li>
+  </ol>
+
+  <p>The <dfn title="dom-TextTrackRegion-track"><code>track</code></dfn> attribute, on getting, must return the <code>TextTrack</code> object of the <a>text track</a> in whose list of regions the <a>text track region</a> that the <code>TextTrackRegion</code> object represents finds itself, if any; or null otherwise.</p>
+
+  <p>The <dfn title="dom-TextTrackRegion-id"><code>id</code></dfn> attribute, on getting, must return the <a>text track region identifier</a> of the <a>text track region</a> that the <a><code>TextTrackRegion</code></a> object represents. On setting, the <a>text track region identifier</a> must be set to the new value.</p>
+
+  <p>The <dfn title="dom-TextTrackRegion-width"><code>width</code></dfn> attribute, on getting, must return the <a>text track region width</a> of the <a>text track region</a> that the <code>TextTrackRegion</code> object represents, in percent of video width. On setting, the <a>text track region width</a> must be set to the new value, interpreted as a percentage.</p>
+
+  <p>The <dfn title="dom-TextTrackRegion-lines"><code>lines</code></dfn> attribute, on getting, must return the <a>text track region lines</a> of the <a>text track region</a> that the <code>TextTrackRegion</code> object represents, as number of lines. On setting, the <a>text track region lines</a> must be set to the new value, interpreted as a number of lines.</p>
+  
+  <p>The <dfn title="dom-TextTrackRegion-regionAnchorX"><code>regionAnchor X</code></dfn> attribute, on getting, must return the <a>text track region anchor</a> X offset of the <a>text track region</a> that the <code>TextTrackRegion</code> object represents, in percent of region width. On setting, the <a>text track region anchor</a> X distance must be set to the new value, interpreted as a percentage.</p>
+
+  <p>The <dfn title="dom-TextTrackRegion-regionAnchorY"><code>regionAnchor Y</code></dfn> attribute, on getting, must return the <a>text track region anchor</a> Y offset of the <a>text track region</a> that the <code>TextTrackRegion</code> object represents, in percent of region height. On setting, the <a>text track region anchor</a> Y distance must be set to the new value, interpreted as a percentage.</p>
+
+  <p>The <dfn title="dom-TextTrackRegion-viewportAnchorX"><code>viewportAnchor X</code></dfn> attribute, on getting, must return the <a>text track region viewport anchor</a> X offset of the <a>text track region</a> that the <code>TextTrackRegion</code> object represents, in percent of video width. On setting, the <a>text track region viewport anchor</a> X distance must be set to the new value, interpreted as a percentage.</p>
+
+  <p>The <dfn title="dom-TextTrackRegion-viewportAnchorY"><code>viewportAnchor Y</code></dfn> attribute, on getting, must return the <a>text track region viewport anchor</a> Y offset of the <a>text track region</a> that the <code>TextTrackRegion</code> object represents, in percent of video height. On setting, the <a>text track region viewport anchor</a> Y distance must be set to the new value, interpreted as a percentage.</p>
+
+  <p>The <dfn title="dom-TextTrackRegion-scroll"><code>scroll</code></dfn> attribute, on getting, must return the string from the second cell of the row in the table below whose first cell is the <a>text track region scroll</a> setting of the <a>text track region</a> that the <code>TextTrackRegion</code> object represents:</p>
+  <table>
+   <thead>
+    <tr> <th> <a>Text track region scroll</a> setting
+         <th> <code id="dom-TextTrackRegion-scroll">scroll</code> value
+   <tbody>
+    <tr> <td> <a href="#text-track-region-scroll-none" class="interalDFN">None</a>
+         <td> "<code></code>" (the empty string)
+    <tr> <td> <a href="#text-track-region-scroll-up" class="internalDFN">"Up</a>
+         <td> "<code>up</code>"
+  </table>
+
+  <p>On setting, the <a>text track region scroll</a> must be set to the value given on the first cell of the row in the table above whose second cell is a <a>case-sensitive</a> match for the new value, if any. If none of the values match, then the user agent must instead throw a <code>SyntaxError</code> exception.</p>
+
+  </section><!-- end TextTrackRegion object -->
+
+  <section>
+  <h3>TextTrackRegionList object</h3>
+
+  <pre class="idl_whatwg">
+interface <dfn>TextTrackRegionList</dfn> : EventTarget {
+ readonly attribute unsigned long <a title="dom-TextTrackRegionList-length">length</a>;
+  getter <a title="dom-TextTrackRegion">TextTrackRegion</a> (unsigned long index);
+  <a>TextTrackRegion</a>? <a title="dom-TextTrackRegionList-getRegionById">getRegionById</a>(DOMString id);
+};</pre>
+
+  <dl class="domintro">   
+
+   <dt><var title="">regionList</var> . <a title="dom-TextTrackRegionList-length">length</a></dt>
+   <dd>
+    <p>Returns the number of <var>regions</var> in the list.</p>
+   </dd>
+
+   <dt><var title="">regionList</var>[index]</dt>
+   <dd>
+    <p>Returns the <a>text track region</a> with index <var>index</var> in the list. The regions are sorted in the order in which they were inserted.</p>
+   </dd>
+
+   <dt><var title="">regionList</var> . <a title="dom-TextTrackRegionList-getRegionById">getRegionById</a>( id )</dt>
+   <dd>
+    <p>Returns the first <a>text track region</a> with <a>text track region identifier</a> <var>id</var>.</p>
+    <p>Returns null if none of the regions have the given identifier or if the argument is the empty string.</p>
+   </dd>
+  </dl>
+
+  <p>A <code>TextTrackRegionList</code> object represents a dynamically updating list of <a href="#text-track-region">text track regions</a> in a given order.</p>
+
+  <p>The <dfn title="dom-TextTrackRegionList-length"><code>length</code></dfn> attribute must return the number of <a href="#text-track-region">regions</a> in the list represented by the <code>TextTrackRegionList</code> object.</p>
+
+  <p>The <a>supported property indices</a> of a <code>TextTrackRegionList</code> object at any instant are the numbers from zero to the number of <a href="#text-track-region" class="internalDFN">regions</a> in the list represented by the <code>TextTrackRegionList</code> object minus one, if any. If there are no <a href="#text-track-region" class="internalDFN">regions</a> in the list, there are no <a>supported property indices</a>.</p>
+
+  <p>To <a>determine the value of an indexed property</a> for a given index <var>index</var>, the user agent must return the <var>index</var> of the <a>text track region</a> in the list represented by the <code>TextTrackRegionList</code> object.</p>
+
+  <p>The <dfn title="dom-TextTrackRegionList-getRegionById"><code>getRegionById(<var>id</var>)</code></dfn> method, when called with an argument other than the empty string, must return the first <a>text track region</a> in the list represented by the <code>TextTrackRegionList</code> object whose <a>text track region identifier</a> is <var>id</var>, if any, or null otherwise. If the argument is the empty string, then the method must return null.</p>
+  <p>
+
+  </section><!-- end TextTrackRegionList object -->
+
+  </section><!-- WebVTT API for browsers -->
+
+  <section>
   <h2 id="iana">IANA considerations</h2>
   <!-- http://www.w3.org/2002/06/registering-mediatype.html -->