[html5] r7748 - [agiowt] (1) Split more WebVTT-specific things into the WebVTT spec. This also m [...]

[whatwg at whatwg.org]

Author: ianh
Date: 2013-03-11 16:43:35 -0700 (Mon, 11 Mar 2013)
New Revision: 7748

Modified:
   complete.html
   index
   source
Log:
[agiowt] (1) Split more WebVTT-specific things into the WebVTT spec. This also makes some normative changes to HTML for handling non-WebVTT cue types, but that shouldn't affect any existing implementations.
Affected topics: HTML, Microdata, Rendering, Security, Video Text Tracks

Modified: complete.html
===================================================================
--- complete.html	2013-03-09 02:02:30 UTC (rev 7747)
+++ complete.html	2013-03-11 23:43:35 UTC (rev 7748)
@@ -248,7 +248,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 9 March 2013</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 11 March 2013</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -3816,11 +3816,9 @@
      <li><dfn id=webvtt-file-using-chapter-title-text>WebVTT file using chapter title text</dfn>
      <li><dfn id=webvtt-file-using-only-nested-cues>WebVTT file using only nested cues</dfn>
      <li><dfn id=webvtt-parser>WebVTT parser</dfn>
-     <li><dfn id=webvtt-cue-settings>WebVTT cue settings</dfn> and how to <dfn id=parse-the-webvtt-settings>parse the WebVTT settings</dfn>
      <li>The <dfn id=rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating the display of WebVTT text tracks</dfn>
-     <li>The <dfn id=webvtt-cue-text-dom-construction-rules>WebVTT cue text DOM construction rules</dfn>
-     <li>The <dfn id=webvtt-cue-text-rendering-rules>WebVTT cue text rendering rules</dfn>
-     <li>The <dfn id=webvtt-cue-text-parsing-rules>WebVTT cue text parsing rules</dfn>
+     <li>The <dfn id=rules-for-interpreting-webvtt-cue-text>rules for interpreting WebVTT cue text</dfn>
+     <li>The WebVTT <dfn id=text-track-cue-writing-direction>text track cue writing direction</dfn>
     </ul></dd>
 
 
@@ -25943,6 +25941,7 @@
   <p>Any audio associated with the <a href=#media-resource>media resource</a> must, if played, be played
   synchronized with the <a href=#current-playback-position>current playback position</a>, at the element's <a href=#effective-media-volume>effective
   media volume</a>.</p>
+<!--CLEANUP-->
 
   <p>In addition to the above, the user agent may provide messages to
   the user (such as "buffering", "no video loaded", "error", or more
@@ -30580,139 +30579,28 @@
     end of the range to which the cue applies is reached.</p>
    </dd>
 
-   <dt><dfn id=text-track-cue-writing-direction title="text track cue writing direction">A writing direction</dfn>
+   <dt>Some additional format-specific data</dt>
    <dd>
-    <p>A writing direction, either <dfn id=text-track-cue-horizontal-writing-direction title="text track cue horizontal writing
-    direction">horizontal</dfn> (a line extends horizontally and is positioned vertically, with
-    consecutive lines displayed below each other), <dfn id=text-track-cue-vertical-growing-left-writing-direction title="text track cue vertical growing left
-    writing direction">vertical growing left</dfn> (a line extends vertically and is positioned
-    horizontally, with consecutive lines displayed to the left of each other<!-- used for east
-    asian-->), or <dfn id=text-track-cue-vertical-growing-right-writing-direction title="text track cue vertical growing right writing direction">vertical
-    growing right</dfn> (a line extends vertically and is positioned horizontally, with consecutive
-    lines displayed to the right of each other<!-- used for mongolian -->).</p>
-
-    <p>If the <a href=#text-track-cue-writing-direction title="text track cue writing direction">writing direction</a> is <a href=#text-track-cue-horizontal-writing-direction title="text track cue horizontal writing direction">horizontal</a>, then <a href=#text-track-cue-line-position title="text
-    track cue line position">line position</a> percentages are relative to the height of the
-    video, and <a href=#text-track-cue-text-position title="text track cue text position">text position</a> and <a href=#text-track-cue-size title="text
-    track cue size">size</a> percentages are relative to the width of the video.</p>
-
-    <p>Otherwise, <a href=#text-track-cue-line-position title="text track cue line position">line position</a> percentages are
-    relative to the width of the video, and <a href=#text-track-cue-text-position title="text track cue text position">text
-    position</a> and <a href=#text-track-cue-size title="text track cue size">size</a> percentages are relative to
-    the height of the video.</p>
+    <p>Additional fields, as needed for the format. For example, WebVTT has a <a href=#text-track-cue-writing-direction>text track cue
+    writing direction</a> and so forth. <a href=#refsWEBVTT>[WEBVTT]</a></p>
    </dd>
 
-   <dt><dfn id=text-track-cue-snap-to-lines-flag title="text track cue snap-to-lines flag">A snap-to-lines flag</dfn>
-   <dd>
-
-    <p>A boolean indicating whether the <a href=#text-track-cue-line-position title="text track cue line position">line's
-    position</a> is a line position (positioned to a multiple of the line dimensions of the first
-    line of the cue), or whether it is a percentage of the dimension of the video.</p>
-
-    <p>Cues whose <a href=#text-track-cue-snap-to-lines-flag>text track cue snap-to-lines flag</a> is set will be placed within the
-    title-safe area on user agents that use overscan. Cues with the flag unset will be positioned as
-    requested (modulo overlap avoidance if multiple cues are in the same place).</p>
-
-   </dd>
-
-   <dt><dfn id=text-track-cue-line-position title="text track cue line position">A line position</dfn>
-   <dd>
-    <p>Either a number giving the position of the lines of the cue, to be interpreted as defined by
-    the <a href=#text-track-cue-writing-direction title="text track cue writing direction">writing direction</a> and <a href=#text-track-cue-snap-to-lines-flag title="text track cue snap-to-lines flag">snap-to-lines flag</a> of the cue, or the special
-    value <dfn id=text-track-cue-automatic-line-position title="text track cue automatic line position">auto</dfn>, which means the position
-    is to depend on the other active tracks.</p>
-
-    <p>A <a href=#text-track-cue>text track cue</a> has a <dfn id=text-track-cue-computed-line-position>text track cue computed line position</dfn> whose
-    value is that returned by the following algorithm, which is defined in terms of the other
-    aspects of the cue:</p>
-
-    <ol><li><p>If the <a href=#text-track-cue-line-position>text track cue line position</a> is numeric, the <a href=#text-track-cue-snap-to-lines-flag>text track cue
-     snap-to-lines flag</a> of the <a href=#text-track-cue>text track cue</a> is not set, and the <a href=#text-track-cue-line-position>text
-     track cue line position</a> is negative or greater than 100, then return 100 and abort these
-     steps.</li>
-
-     <li><p>If the <a href=#text-track-cue-line-position>text track cue line position</a> is numeric, return the value of the
-     <a href=#text-track-cue-line-position>text track cue line position</a> and abort these steps. (Either the <a href=#text-track-cue-snap-to-lines-flag>text track
-     cue snap-to-lines flag</a> is set, so any value, not just those in the range 0..100, is
-     valid, or the value is in the range 0..100 and is thus valid regardless of the value of that
-     flag.)</li>
-
-     <li><p>If the <a href=#text-track-cue-snap-to-lines-flag>text track cue snap-to-lines flag</a> of the <a href=#text-track-cue>text track cue</a>
-     is not set, return the value 100 and abort these steps. (The <a href=#text-track-cue-line-position>text track cue line
-     position</a> is the special value <a href=#text-track-cue-automatic-line-position title="text track cue automatic line
-     position">auto</a>.)</li>
-
-     <li><p>Let <var title="">cue</var> be the <a href=#text-track-cue>text track cue</a>.</li>
-
-     <li><p>If <var title="">cue</var> is not in a <a href=#text-track-list-of-cues title="text track list of cues">list of
-     cues</a> of a <a href=#text-track>text track</a>, or if that <a href=#text-track>text track</a> is not in the
-     <a href=#list-of-text-tracks>list of text tracks</a> of a <a href=#media-element>media element</a>, return −1 and abort
-     these steps.</li>
-
-     <li><p>Let <var title="">track</var> be the <a href=#text-track>text track</a> whose <a href=#text-track-list-of-cues title="text
-     track list of cues">list of cues</a> the <var title="">cue</var> is in.</li>
-
-     <li><p>Let <var title="">n</var> be the number of <a href=#text-track title="text track">text tracks</a>
-     whose <a href=#text-track-mode>text track mode</a> is <a href=#text-track-showing title="text track showing">showing</a> and that
-     are in the <a href=#media-element>media element</a>'s <a href=#list-of-text-tracks>list of text tracks</a> before <var title="">track</var>.</li>
-
-     <li><p>Increment <var title="">n</var> by one.</li>
-
-     <li><p>Negate <var title="">n</var>.</li>
-
-     <li><p>Return <var title="">n</var>.</li>
-
-    </ol></dd>
-
-   <dt><dfn id=text-track-cue-text-position title="text track cue text position">A text position</dfn>
-   <dd>
-    <p>A number giving the position of the text of the cue within each line, to be interpreted as a
-    percentage of the video, as defined by the <a href=#text-track-cue-writing-direction title="text track cue writing
-    direction">writing direction</a>.</p>
-   </dd>
-
-   <dt><dfn id=text-track-cue-size title="text track cue size">A size</dfn>
-   <dd>
-    <p>A number giving the size of the box within which the text of each line of the cue is to be
-    aligned, to be interpreted as a percentage of the video, as defined by the <a href=#text-track-cue-writing-direction title="text
-    track cue writing direction">writing direction</a>.</p>
-   </dd>
-
-   <dt><dfn id=text-track-cue-alignment title="text track cue alignment">An alignment</dfn>
-   <dd>
-
-    <p>An alignment for the text of each line of the cue, one of:</p>
-
-    <dl><dt><dfn id=text-track-cue-start-alignment title="text track cue start alignment">Start alignment</dfn></dt>
-     <dd>The text is aligned towards its start side.</dd>
-
-     <dt><dfn id=text-track-cue-middle-alignment title="text track cue middle alignment">Middle alignment</dfn></dt>
-     <dd>The text is aligned centered between its start and end sides.</dd>
-
-     <dt><dfn id=text-track-cue-end-alignment title="text track cue end alignment">End alignment</dfn></dt>
-     <dd>The text is aligned towards its end side.</dd>
-
-     <dt><dfn id=text-track-cue-left-alignment title="text track cue left alignment">Left alignment</dfn></dt>
-     <dd>The text is aligned to the left.</dd>
-
-     <dt><dfn id=text-track-cue-right-alignment title="text track cue right alignment">Right alignment</dfn></dt>
-     <dd>The text is aligned to the right.</dd>
-
-    </dl><p>Which sides are the start and end sides depends on the Unicode bidirectional algorithm and
-    the <a href=#text-track-cue-writing-direction title="text track cue writing direction">writing direction</a>. <a href=#refsBIDI>[BIDI]</a></p>
-
-   </dd>
-
    <dt><dfn id=text-track-cue-text title="text track cue text">The text of the cue</dfn>
    <dd>
-    <p>The raw text of the cue, and rules for its interpretation,
-    allowing the text to be rendered and converted to a DOM fragment.</p>
+    <p>The raw text of the cue, and <dfn id=rules-for-rendering-the-cue-in-isolation>rules for rendering the cue in isolation</dfn>.</p>
    </dd>
 
-  </dl><p>Each <a href=#text-track-cue>text track cue</a> has a corresponding <code><a href=#texttrackcue>TextTrackCue</a></code> object. A
-  <a href=#text-track-cue>text track cue</a>'s in-memory representation can be dynamically changed through this
-  <code><a href=#texttrackcue>TextTrackCue</a></code> API.</p>
+  </dl><p>Each <a href=#text-track-cue>text track cue</a> has a corresponding <code><a href=#texttrackcue>TextTrackCue</a></code> object (or more
+  specifically, an object that inherits from <code><a href=#texttrackcue>TextTrackCue</a></code> — for example, WebVTT
+  cues use the <code>WebVTTCue</code> interface). A <a href=#text-track-cue>text track cue</a>'s in-memory
+  representation can be dynamically changed through this <code><a href=#texttrackcue>TextTrackCue</a></code> API. <a href=#refsWEBVTT>[WEBVTT]</a></p>
 
+  <p>A <a href=#text-track-cue>text track cue</a> is associated with <a href=#rules-for-updating-the-text-track-rendering>rules for updating the text track
+  rendering</a>, as defined by the specification for the specific kind of <a href=#text-track-cue>text track
+  cue</a>. These rules are used specifically when the object representing the cue is added to a
+  <code><a href=#texttrack>TextTrack</a></code> object using the <code title=dom-TextTrack-addCue><a href=#dom-texttrack-addcue>addCue()</a></code>
+  method.</p>
+
   <p>In addition, each <a href=#text-track-cue>text track cue</a> has two pieces of dynamic information:</p>
 
   <dl><dt>The <dfn id=text-track-cue-active-flag title="text track cue active flag">active flag</dfn>
@@ -30741,16 +30629,7 @@
 
    </dd>
 
-  </dl><p>When a <a href=#text-track-cue>text track cue</a> whose <a href=#text-track-cue-active-flag title="text track cue active flag">active
-  flag</a> is set has its <a href=#text-track-cue-writing-direction title="text track cue writing direction">writing
-  direction</a>, <a href=#text-track-cue-snap-to-lines-flag title="text track cue snap-to-lines flag">snap-to-lines flag</a>, <a href=#text-track-cue-line-position title="text track cue line position">line position</a>, <a href=#text-track-cue-text-position title="text track cue text
-  position">text position</a>, <a href=#text-track-cue-size title="text track cue size">size</a>, <a href=#text-track-cue-alignment title="text
-  track cue alignment">alignment</a>, or <a href=#text-track-cue-text title="text track cue text">text</a> change
-  value, then the user agent must empty the <a href=#text-track-cue-display-state>text track cue display state</a>, and then
-  immediately run the <a href=#text-track>text track</a>'s <a href=#rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating the display of WebVTT text
-  tracks</a>.</p>
-
-  <p>The <a href=#text-track-cue title="text track cue">text track cues</a> of a <a href=#media-element>media element</a>'s <a href=#text-track title="text track">text tracks</a> are ordered relative to each other in the <dfn id=text-track-cue-order>text track
+  </dl><p>The <a href=#text-track-cue title="text track cue">text track cues</a> of a <a href=#media-element>media element</a>'s <a href=#text-track title="text track">text tracks</a> are ordered relative to each other in the <dfn id=text-track-cue-order>text track
   cue order</dfn>, which is determined as follows: first group the <a href=#text-track-cue title="text track
   cue">cues</a> by their <a href=#text-track>text track</a>, with the groups being sorted in the same order
   as their <a href=#text-track title="text track">text tracks</a> appear in the <a href=#media-element>media element</a>'s
@@ -31200,30 +31079,6 @@
     <p>Should be set to false.</p>
    </dd>
 
-   <dt>The <a href=#text-track-cue-writing-direction>text track cue writing direction</a>
-   <dd>
-    <p>Should be set to <a href=#text-track-cue-horizontal-writing-direction title="text track cue horizontal writing direction">horizontal</a>
-    if the concept of writing direction doesn't really apply (e.g. the cue consists of a bitmap
-    image).</p>
-   </dd>
-
-   <dt>The <a href=#text-track-cue-snap-to-lines-flag>text track cue snap-to-lines flag</a>
-   <dd>
-    <p>Should be set to false unless the format uses a rendering and positioning model for cues that
-    is largely consistent with the <a href=#webvtt-cue-text-rendering-rules>WebVTT cue text rendering rules</a>.</p>
-   </dd>
-
-   <dt>The <a href=#text-track-cue-line-position>text track cue line position</a>
-   <dt>The <a href=#text-track-cue-text-position>text track cue text position</a>
-   <dt>The <a href=#text-track-cue-size>text track cue size</a>
-   <dt>The <a href=#text-track-cue-alignment>text track cue alignment</a>
-   </dt></dt></dt><dd>
-    <p>If the format uses a rendering and positioning model for cues that can be largely simulated
-    using the <a href=#webvtt-cue-text-rendering-rules>WebVTT cue text rendering rules</a>, then these should be set to the values
-    that would give the same effect for <a href=#webvtt>WebVTT</a> cues. Otherwise, they should be set to
-    zero.</p>
-   </dd>
-
   </dl></div>
 
 
@@ -31410,18 +31265,18 @@
 
    <li>
 
+<!--CLEANUP-->
     <p>Create a new <a href=#text-track>text track</a> corresponding to the new
     object, and set its <a href=#text-track-kind>text track kind</a> to <var title="">kind</var>, its <a href=#text-track-label>text track label</a> to <var title="">label</var>, its <a href=#text-track-language>text track language</a> to <var title="">language</var>, its <a href=#text-track-readiness-state>text track readiness
     state</a> to the <a href=#text-track-loaded>text track loaded</a> state, its
     <a href=#text-track-mode>text track mode</a> to the <a href=#text-track-hidden>text track hidden</a>
     mode, and its <a href=#text-track-list-of-cues>text track list of cues</a> to an empty
-    list.
-    Associate the <a href=#text-track-list-of-cues>text track list of cues</a> with the
-    <a href=#rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating the display of WebVTT text tracks</a>
-    as its <a href=#rules-for-updating-the-text-track-rendering>rules for updating the text track rendering</a>.
-    <a href=#refsWEBVTT>[WEBVTT]</a>
-    </p>
+    list.</p>
 
+    <p>Initially, the <a href=#text-track-list-of-cues>text track list of cues</a> is not associated with any <a href=#rules-for-updating-the-text-track-rendering>rules
+    for updating the text track rendering</a>. When a <a href=#text-track-cue>text track cue</a> is added to it,
+    the <a href=#text-track-list-of-cues>text track list of cues</a> has its rules permanently set accordingly.</p>
+
    </li>
 
    <li>
@@ -31542,7 +31397,16 @@
   <hr><p>The <dfn id=dom-texttrack-addcue title=dom-TextTrack-addCue><code>addCue(<var title="">cue</var>)</code></dfn> method
   of <code><a href=#texttrack>TextTrack</a></code> objects, when invoked, must run the following steps:</p>
 
-  <ol><li><p>If the given <var title="">cue</var> is in a <a href=#text-track-list-of-cues>text track list of cues</a>, then
+  <ol><li><p>If the <a href=#text-track-list-of-cues>text track list of cues</a> does not yet have any associated <a href=#rules-for-updating-the-text-track-rendering>rules
+   for updating the text track rendering</a>, then associate the <a href=#text-track-list-of-cues>text track list of
+   cues</a> with the <a href=#rules-for-updating-the-text-track-rendering>rules for updating the text track rendering</a> appropriate to <var title="">cue</var>.</p>
+
+   <li><p>If <a href=#text-track-list-of-cues>text track list of cues</a>' associated <a href=#rules-for-updating-the-text-track-rendering>rules for updating the text
+   track rendering</a> are not the same <a href=#rules-for-updating-the-text-track-rendering>rules for updating the text track rendering</a>
+   as appropriate for <var title="">cue</var>, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
+   exception and abort these steps.</p>
+
+   <li><p>If the given <var title="">cue</var> is in a <a href=#text-track-list-of-cues>text track list of cues</a>, then
    remove <var title="">cue</var> from that <a href=#text-track-list-of-cues>text track list of cues</a>.</li>
 
    <li><p>Add <var title="">cue</var> to the method's <code><a href=#texttrack>TextTrack</a></code> object's <a href=#text-track>text
@@ -31646,25 +31510,14 @@
 
   <hr><pre class=idl>interface <dfn id=texttrackcue>TextTrackCue</dfn> : <a href=#eventtarget>EventTarget</a> {
   readonly attribute <a href=#texttrack>TextTrack</a>? <a href=#dom-texttrackcue-track title=dom-TextTrackCue-track>track</a>;
-           attribute <a href=#eventhandler>EventHandler</a> <a href=#handler-texttrackcue-onenter title=handler-TextTrackCue-onenter>onenter</a>;
-           attribute <a href=#eventhandler>EventHandler</a> <a href=#handler-texttrackcue-onexit title=handler-TextTrackCue-onexit>onexit</a>;
-};
 
-enum <dfn id=autokeyword>AutoKeyword</dfn> { "auto" };
-[<a href=#dom-texttrackcue title=dom-TextTrackCue>Constructor</a>(double startTime, double endTime, DOMString text)]
-interface <dfn id=webvttcue>WebVTTCue</dfn> : <a href=#texttrackcue>TextTrackCue</a> {
            attribute DOMString <a href=#dom-texttrackcue-id title=dom-TextTrackCue-id>id</a>;
            attribute double <a href=#dom-texttrackcue-starttime title=dom-TextTrackCue-startTime>startTime</a>;
            attribute double <a href=#dom-texttrackcue-endtime title=dom-TextTrackCue-endTime>endTime</a>;
            attribute boolean <a href=#dom-texttrackcue-pauseonexit title=dom-TextTrackCue-pauseOnExit>pauseOnExit</a>;
-           attribute DOMString <a href=#dom-texttrackcue-vertical title=dom-TextTrackCue-vertical>vertical</a>;
-           attribute boolean <a href=#dom-texttrackcue-snaptolines title=dom-TextTrackCue-snapToLines>snapToLines</a>;
-           attribute (long or <a href=#autokeyword>AutoKeyword</a>) <a href=#dom-texttrackcue-line title=dom-TextTrackCue-line>line</a>;
-           attribute long <a href=#dom-texttrackcue-position title=dom-TextTrackCue-position>position</a>;
-           attribute long <a href=#dom-texttrackcue-size title=dom-TextTrackCue-size>size</a>;
-           attribute DOMString <a href=#dom-texttrackcue-align title=dom-TextTrackCue-align>align</a>;
-           attribute DOMString <a href=#dom-texttrackcue-text title=dom-TextTrackCue-text>text</a>;
-  <a href=#documentfragment>DocumentFragment</a> <a href=#dom-texttrackcue-getcueashtml title=dom-TextTrackCue-getCueAsHTML>getCueAsHTML</a>();
+
+           attribute <a href=#eventhandler>EventHandler</a> <a href=#handler-texttrackcue-onenter title=handler-TextTrackCue-onenter>onenter</a>;
+           attribute <a href=#eventhandler>EventHandler</a> <a href=#handler-texttrackcue-onexit title=handler-TextTrackCue-onexit>onexit</a>;
 };</pre>
 
   <dl class=domintro><dt><var title="">cue</var> . <a href=#dom-texttrackcue-track title=dom-TextTrackCue-track>track</a></dt>
@@ -31674,15 +31527,6 @@
     otherwise.</p>
    </dd>
 
-
-   <dt><var title="">cue</var> = new <code title=dom-TextTrackCue><a href=#dom-texttrackcue>WebVTTCue</a></code>( <var title="">startTime</var>, <var title="">endTime</var>, <var title="">text</var> )</dt>
-   <dd>
-    <p>Returns a new <code><a href=#texttrackcue>TextTrackCue</a></code> object, for use with the <code title=dom-TextTrack-addCue><a href=#dom-texttrack-addcue>addCue()</a></code> method.</p>
-    <p>The <var title="">startTime</var> argument sets the <a href=#text-track-cue-start-time>text track cue start time</a>.</p>
-    <p>The <var title="">endTime</var> argument sets the <a href=#text-track-cue-end-time>text track cue end time</a>.</p>
-    <p>The <var title="">text</var> argument sets the <a href=#text-track-cue-text>text track cue text</a>.</p>
-   </dd>
-
    <dt><var title="">cue</var> . <a href=#dom-texttrackcue-id title=dom-TextTrackCue-id>id</a> [ = <var title="">value</var> ]</dt>
    <dd>
     <p>Returns the <a href=#text-track-cue-identifier>text track cue identifier</a>.</p>
@@ -31707,127 +31551,10 @@
     <p>Can be set.</p>
    </dd>
 
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-vertical title=dom-TextTrackCue-vertical>vertical</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns a string representing the <a href=#text-track-cue-writing-direction>text track cue writing direction</a>, as follows:</p>
-    <dl class=switch><dt>If it is <a href=#text-track-cue-horizontal-writing-direction title="text track cue horizontal writing direction">horizontal</a></dt>
-     <dd><p>The empty string.</dd>
-     <dt>If it is <a href=#text-track-cue-vertical-growing-left-writing-direction title="text track cue vertical growing left writing direction">vertical growing left</a></dt>
-     <dd><p>The string "<code title="">rl</code>".</dd>
-     <dt>If it is <a href=#text-track-cue-vertical-growing-right-writing-direction title="text track cue vertical growing right writing direction">vertical growing right</a></dt>
-     <dd><p>The string "<code title="">lr</code>".</dd>
-    </dl><p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-snaptolines title=dom-TextTrackCue-snapToLines>snapToLines</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns true if the <a href=#text-track-cue-snap-to-lines-flag>text track cue snap-to-lines flag</a> is set, false otherwise.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-line title=dom-TextTrackCue-line>line</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns the <a href=#text-track-cue-line-position>text track cue line position</a>. In the
-    case of the value being <a href=#text-track-cue-automatic-line-position title="text track cue automatic line
-    position">auto</a>, the string "<code title="">auto</code>" is
-    returned.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-position title=dom-TextTrackCue-position>position</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns the <a href=#text-track-cue-text-position>text track cue text position</a>.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-size title=dom-TextTrackCue-size>size</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns the <a href=#text-track-cue-size>text track cue size</a>.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-align title=dom-TextTrackCue-align>align</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns a string representing the <a href=#text-track-cue-alignment>text track cue alignment</a>, as follows:</p>
-    <dl class=switch><dt>If it is <a href=#text-track-cue-start-alignment title="text track cue start alignment">start alignment</a></dt>
-     <dd><p>The string "<code title="">start</code>".</dd>
-     <dt>If it is <a href=#text-track-cue-middle-alignment title="text track cue middle alignment">middle alignment</a></dt>
-     <dd><p>The string "<code title="">middle</code>".</dd>
-     <dt>If it is <a href=#text-track-cue-end-alignment title="text track cue end alignment">end alignment</a></dt>
-     <dd><p>The string "<code title="">end</code>".</dd>
-     <dt>If it is <a href=#text-track-cue-left-alignment title="text track cue left alignment">left alignment</a></dt>
-     <dd><p>The string "<code title="">left</code>".</dd>
-     <dt>If it is <a href=#text-track-cue-right-alignment title="text track cue right alignment">right alignment</a></dt>
-     <dd><p>The string "<code title="">right</code>".</dd>
-    </dl><p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-text title=dom-TextTrackCue-text>text</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns the <a href=#text-track-cue-text>text track cue text</a> in raw unparsed form.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">fragment</var> = <var title="">cue</var> . <a href=#dom-texttrackcue-getcueashtml title=dom-TextTrackCue-getCueAsHTML>getCueAsHTML</a>()</dt>
-   <dd>
-    <p>Returns the <a href=#text-track-cue-text>text track cue text</a> as a <code><a href=#documentfragment>DocumentFragment</a></code> of <a href=#html-elements>HTML elements</a> and other DOM nodes.</p>
-   </dd>
-
   </dl><div class=impl>
 
-  <p>The <dfn id=dom-texttrackcue title=dom-TextTrackCue><code>TextTrackCue(<var title="">startTime</var>, <var title="">endTime</var>, <var title="">text</var>)</code></dfn> constructor, when invoked, must
-  run the following steps:</p>
-
-  <ol><li><p>Create a new <a href=#text-track-cue>text track cue</a>. Let <var title="">cue</var> be that <a href=#text-track-cue>text track cue</a>.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-start-time>text track cue start
-   time</a> be the value of the <var title="">startTime</var>
-   argument, interpreted as a time in seconds.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-end-time>text track cue end
-   time</a> be the value of the <var title="">endTime</var>
-   argument, interpreted as a time in seconds.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-text>text track cue
-   text</a> be the value of the <var title="">text</var> argument,
-   and let the rules for its interpretation be the <a href=#webvtt-cue-text-parsing-rules>WebVTT cue
-   text parsing rules</a>, the <a href=#webvtt-cue-text-rendering-rules>WebVTT cue text rendering
-   rules</a>, and the <a href=#webvtt-cue-text-dom-construction-rules>WebVTT cue text DOM construction
-   rules</a>. <a href=#refsWEBVTT>[WEBVTT]</a></li>
-
-   <!-- default settings -->
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-identifier>text track cue
-   identifier</a> be the empty string.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-pause-on-exit-flag>text track cue
-   pause-on-exit flag</a> be false.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-writing-direction>text track cue
-   writing direction</a> be <a href=#text-track-cue-horizontal-writing-direction title="text track cue
-   horizontal writing direction">horizontal</a>.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-snap-to-lines-flag>text track cue
-   snap-to-lines flag</a> be true.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-line-position>text track cue line
-   position</a> be <a href=#text-track-cue-automatic-line-position title="text track cue automatic line
-   position">auto</a>.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-text-position>text track cue
-   text position</a> be 50.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-size>text track cue
-   size</a> be 100.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-alignment>text track cue
-   alignment</a> be <a href=#text-track-cue-middle-alignment title="text track cue middle
-   alignment">middle alignment</a>.</li>
-
-   <li><p>Return the <code><a href=#texttrackcue>TextTrackCue</a></code> object representing
-   <var title="">cue</var>.</li>
-
-  </ol><p>The <dfn id=dom-texttrackcue-track title=dom-TextTrackCue-track><code>track</code></dfn>
+<!--CLEANUP-->
+  <p>The <dfn id=dom-texttrackcue-track title=dom-TextTrackCue-track><code>track</code></dfn>
   attribute, on getting, must return the <code><a href=#texttrack>TextTrack</a></code> object
   of the <a href=#text-track>text track</a> in whose <a href=#text-track-list-of-cues title="text track list
   of cues">list of cues</a> the <a href=#text-track-cue>text track cue</a> that
@@ -31860,83 +31587,12 @@
   flag</a> must be set if the new value is true, and must be unset
   otherwise.</p>
 
-  <p>The <dfn id=dom-texttrackcue-vertical title=dom-TextTrackCue-vertical><code>vertical</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 href=#text-track-cue-writing-direction>text
-  track cue writing direction</a> of the <a href=#text-track-cue>text track
-  cue</a> that the <code><a href=#texttrackcue>TextTrackCue</a></code> object represents:</p>
-
-  <table><thead><tr><th> <a href=#text-track-cue-writing-direction>Text track cue writing direction</a>
-         <th> <code title=dom-TextTrackCue-direction>direction</code> value
-   <tbody><tr><td> <a href=#text-track-cue-horizontal-writing-direction title="text track cue horizontal writing direction">Horizontal</a>
-         <td> "<code title=""></code>" (the empty string)
-    <tr><td> <a href=#text-track-cue-vertical-growing-left-writing-direction title="text track cue vertical growing left writing direction">Vertical growing left</a>
-         <td> "<code title="">rl</code>"
-    <tr><td> <a href=#text-track-cue-vertical-growing-right-writing-direction title="text track cue vertical growing right writing direction">Vertical growing right</a>
-         <td> "<code title="">lr</code>"
-  </table><p>On setting, the <a href=#text-track-cue-writing-direction>text track cue writing direction</a> must be set to the value given in
-  the first cell of the row in the table above whose second cell is a <a href=#case-sensitive>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><a href=#syntaxerror>SyntaxError</a></code> exception.</p>
-
-  <p>The <dfn id=dom-texttrackcue-snaptolines title=dom-TextTrackCue-snapToLines><code>snapToLines</code></dfn> attribute, on
-  getting, must return true if the <a href=#text-track-cue-snap-to-lines-flag>text track cue snap-to-lines flag</a> of the <a href=#text-track-cue>text
-  track cue</a> that the <code><a href=#texttrackcue>TextTrackCue</a></code> object represents is set; or false otherwise.
-  On setting, the <a href=#text-track-cue-snap-to-lines-flag>text track cue snap-to-lines flag</a> must be set if the new value is
-  true, and must be unset otherwise.</p>
-
-  <p>The <dfn id=dom-texttrackcue-line title=dom-TextTrackCue-line><code>line</code></dfn> attribute, on getting, must
-  return the <a href=#text-track-cue-line-position>text track cue line position</a> of the <a href=#text-track-cue>text track cue</a> that the
-  <code><a href=#texttrackcue>TextTrackCue</a></code> object represents. The special value <a href=#text-track-cue-automatic-line-position title="text track cue
-  automatic line position">auto</a> must be represented as the string "<code title="">auto</code>". On setting, the <a href=#text-track-cue-line-position>text track cue line position</a> must be set to
-  the new value; if the new value is the string "<code title="">auto</code>", then it must be
-  interpreted as the special value <a href=#text-track-cue-automatic-line-position title="text track cue automatic line
-  position">auto</a>.</p>
-
-  <p>The <dfn id=dom-texttrackcue-position title=dom-TextTrackCue-position><code>position</code></dfn> attribute, on getting,
-  must return the <a href=#text-track-cue-text-position>text track cue text position</a> of the <a href=#text-track-cue>text track cue</a> that
-  the <code><a href=#texttrackcue>TextTrackCue</a></code> object represents. On setting, if the new value is negative or
-  greater than 100, then an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception must be thrown. Otherwise, the
-  <a href=#text-track-cue-text-position>text track cue text position</a> must be set to the new value.</p>
-
-  <p>The <dfn id=dom-texttrackcue-size title=dom-TextTrackCue-size><code>size</code></dfn> attribute, on getting, must
-  return the <a href=#text-track-cue-size>text track cue size</a> of the <a href=#text-track-cue>text track cue</a> that the
-  <code><a href=#texttrackcue>TextTrackCue</a></code> object represents. On setting, if the new value is negative or greater
-  than 100, then an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception must be thrown. Otherwise, the <a href=#text-track-cue-size>text
-  track cue size</a> must be set to the new value.</p>
-
-  <p>The <dfn id=dom-texttrackcue-align title=dom-TextTrackCue-align><code>align</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 href=#text-track-cue-alignment>text track cue alignment</a> of the <a href=#text-track-cue>text track cue</a> that the
-  <code><a href=#texttrackcue>TextTrackCue</a></code> object represents:</p>
-
-  <table><thead><tr><th><a href=#text-track-cue-alignment>Text track cue alignment</a> <th> <code title=dom-TextTrackCue-align><a href=#dom-texttrackcue-align>align</a></code> value
-   <tbody><tr><td><a href=#text-track-cue-start-alignment title="text track cue start alignment">Start alignment</a> <td> "<code title="">start</code>"
-    <tr><td><a href=#text-track-cue-middle-alignment title="text track cue middle alignment">Middle alignment</a> <td> "<code title="">middle</code>"
-    <tr><td><a href=#text-track-cue-end-alignment title="text track cue end alignment">End alignment</a> <td> "<code title="">end</code>"
-    <tr><td><a href=#text-track-cue-left-alignment title="text track cue left alignment">Left alignment</a> <td> "<code title="">left</code>"
-    <tr><td><a href=#text-track-cue-right-alignment title="text track cue right alignment">Right alignment</a> <td> "<code title="">right</code>"
-  </table><p>On setting, the <a href=#text-track-cue-alignment>text track cue alignment</a> must be set to the value given in the
-  first cell of the row in the table above whose second cell is a <a href=#case-sensitive>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><a href=#syntaxerror>SyntaxError</a></code> exception.</p>
-
-  <p>The <dfn id=dom-texttrackcue-text title=dom-TextTrackCue-text><code>text</code></dfn> attribute, on getting, must
-  return the raw <a href=#text-track-cue-text>text track cue text</a> of the <a href=#text-track-cue>text track cue</a> that the
-  <code><a href=#texttrackcue>TextTrackCue</a></code> object represents. On setting, the <a href=#text-track-cue-text>text track cue text</a> must
-  be set to the new value.</p>
-
-  <p>The <dfn id=dom-texttrackcue-getcueashtml title=dom-TextTrackCue-getCueAsHTML><code>getCueAsHTML()</code></dfn> method must
-  convert the <a href=#text-track-cue-text>text track cue text</a> to a <code><a href=#documentfragment>DocumentFragment</a></code> for the
-  <a href="#script's-document">script's document</a> of the <a href=#entry-script>entry script</a>, using the appropriate rules for
-  doing so. For example, for <a href=#webvtt>WebVTT</a>, those rules are the <a href=#webvtt-cue-text-parsing-rules>WebVTT cue text parsing
-  rules</a> and the <a href=#webvtt-cue-text-dom-construction-rules>WebVTT cue text DOM construction rules</a>. <a href=#refsWEBVTT>[WEBVTT]</a></p>
-
   </div>
 
 
   <h6 id=text-tracks-describing-chapters><span class=secno>4.8.10.12.6 </span>Text tracks describing chapters</h6>
 
+<!--CLEANUP-->
   <p>Chapters are segments of a <a href=#media-resource>media resource</a> with a
   given title. Chapters can be nested, in the same way that sections
   in a document outline can have subsections.</p>
@@ -31999,9 +31655,14 @@
    cue start time</a>, whose end time is <var title="">current
    cue</var>'s <a href=#text-track-cue-end-time>text track cue end time</a>, whose title is
    <var title="">current cue</var>'s <a href=#text-track-cue-text>text track cue text</a>
-   interpreted according to its rules for interpretation, and whose
-   list of nested chapters is empty.</li>
+   interpreted according to its <a href=#rules-for-rendering-the-cue-in-isolation>rules for rendering the cue in isolation</a>, and whose
+   list of nested chapters is empty.</p>
 
+    <p class=note>For WebVTT, the <a href=#rules-for-rendering-the-cue-in-isolation>rules for rendering the cue in isolation</a> are the
+    <a href=#rules-for-interpreting-webvtt-cue-text>rules for interpreting WebVTT cue text</a>. <a href=#refsWEBVTT>[WEBVTT]</a></p>
+
+   </li>
+
    <li><p>Append <var title="">new chapter</var> to <var title="">current chapter</var>'s list of nested chapters, and let
    <var title="">current chapter</var> be <var title="">new
    chapter</var>'s parent.</li>
@@ -94279,7 +93940,7 @@
      <td>On the right
     <tr><td><code title="">center</code>
      <td>In the middle
-  </table><h3 id=replaced-elements><span class=secno>14.4 </span>Replaced elements</h3>
+  </table><!--CLEANUP--><h3 id=replaced-elements><span class=secno>14.4 </span>Replaced elements</h3>
 
   <h4 id=embedded-content-2><span class=secno>14.4.1 </span>Embedded content</h4>
 
@@ -94329,7 +93990,7 @@
   <p>Any subtitles or captions are expected to be overlayed directly
   on top of their <code><a href=#the-video-element>video</a></code> element, as defined by the
   relevant rendering rules; for <a href=#webvtt>WebVTT</a>, those are the
-  <a href=#webvtt-cue-text-rendering-rules>WebVTT cue text rendering rules</a>. <a href=#refsWEBVTT>[WEBVTT]</a></p>
+  <a href=#rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating the display of WebVTT text tracks</a>. <a href=#refsWEBVTT>[WEBVTT]</a></p>
 
   <p>When the user agent starts <a href=#expose-a-user-interface-to-the-user title="expose a user interface
   to the user">exposing a user interface</a> for a
@@ -94352,14 +94013,7 @@
 iframe[seamless] { display: block; }
 <span id=video-object-fit>video { object-fit: contain; }</span></pre>
 
-  </div>
 
-
-
-
-<!--TOPIC:Rendering-->
-  <div class=impl>
-
   <h4 id=images-0><span class=secno>14.4.2 </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
@@ -97223,13 +96877,11 @@
 
 
 
-
   <h2 id=iana><span class=secno>16 </span>IANA considerations</h2>
 
   <!-- http://www.w3.org/2002/06/registering-mediatype.html -->
 
 
-
   <h3 id=text/html><span class=secno>16.1 </span><dfn><code>text/html</code></dfn></h3>
 
   <p>This registration is for community review and will be submitted
@@ -97792,7 +97444,6 @@
   at the time of writing, no semantics at all). <a href=#refsJSON>[JSON]</a></p>
 
 
-
 <!--TOPIC:HTML-->
   <h3 id=ping-from><span class=secno>16.8 </span><dfn title=http-ping-from><code>Ping-From</code></dfn></h3>
 
@@ -101099,7 +100750,6 @@
    <li><code><a href=#videotrack>VideoTrack</a></code>
    <li><code><a href=#videotracklist>VideoTrackList</a></code>
    <li><code><a href=#websocket>WebSocket</a></code>
-   <li><code><a href=#webvttcue>WebVTTCue</a></code>
    <li><code><a href=#window>Window</a></code>
    <li><code><a href=#windowbase64>WindowBase64</a></code>
    <li><code><a href=#windoweventhandlers>WindowEventHandlers</a></code>
@@ -101951,6 +101601,7 @@
   Laura L. Carlson,
   Laura Wisewell,
   Laurens Holst,
+  Lawrence Forooghian,
   Lee Kowalkowski,
   Leif Halvard Silli,
   Lenny Domnitser,

Modified: index
===================================================================
--- index	2013-03-09 02:02:30 UTC (rev 7747)
+++ index	2013-03-11 23:43:35 UTC (rev 7748)
@@ -248,7 +248,7 @@
 
   <header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
    <hgroup><h1 class=allcaps>HTML</h1>
-    <h2 class="no-num no-toc">Living Standard — Last Updated 9 March 2013</h2>
+    <h2 class="no-num no-toc">Living Standard — Last Updated 11 March 2013</h2>
    </hgroup><dl><dt><strong>Web developer edition:</strong></dt>
     <dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
     <dt>Multiple-page version:</dt>
@@ -3816,11 +3816,9 @@
      <li><dfn id=webvtt-file-using-chapter-title-text>WebVTT file using chapter title text</dfn>
      <li><dfn id=webvtt-file-using-only-nested-cues>WebVTT file using only nested cues</dfn>
      <li><dfn id=webvtt-parser>WebVTT parser</dfn>
-     <li><dfn id=webvtt-cue-settings>WebVTT cue settings</dfn> and how to <dfn id=parse-the-webvtt-settings>parse the WebVTT settings</dfn>
      <li>The <dfn id=rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating the display of WebVTT text tracks</dfn>
-     <li>The <dfn id=webvtt-cue-text-dom-construction-rules>WebVTT cue text DOM construction rules</dfn>
-     <li>The <dfn id=webvtt-cue-text-rendering-rules>WebVTT cue text rendering rules</dfn>
-     <li>The <dfn id=webvtt-cue-text-parsing-rules>WebVTT cue text parsing rules</dfn>
+     <li>The <dfn id=rules-for-interpreting-webvtt-cue-text>rules for interpreting WebVTT cue text</dfn>
+     <li>The WebVTT <dfn id=text-track-cue-writing-direction>text track cue writing direction</dfn>
     </ul></dd>
 
 
@@ -25943,6 +25941,7 @@
   <p>Any audio associated with the <a href=#media-resource>media resource</a> must, if played, be played
   synchronized with the <a href=#current-playback-position>current playback position</a>, at the element's <a href=#effective-media-volume>effective
   media volume</a>.</p>
+<!--CLEANUP-->
 
   <p>In addition to the above, the user agent may provide messages to
   the user (such as "buffering", "no video loaded", "error", or more
@@ -30580,139 +30579,28 @@
     end of the range to which the cue applies is reached.</p>
    </dd>
 
-   <dt><dfn id=text-track-cue-writing-direction title="text track cue writing direction">A writing direction</dfn>
+   <dt>Some additional format-specific data</dt>
    <dd>
-    <p>A writing direction, either <dfn id=text-track-cue-horizontal-writing-direction title="text track cue horizontal writing
-    direction">horizontal</dfn> (a line extends horizontally and is positioned vertically, with
-    consecutive lines displayed below each other), <dfn id=text-track-cue-vertical-growing-left-writing-direction title="text track cue vertical growing left
-    writing direction">vertical growing left</dfn> (a line extends vertically and is positioned
-    horizontally, with consecutive lines displayed to the left of each other<!-- used for east
-    asian-->), or <dfn id=text-track-cue-vertical-growing-right-writing-direction title="text track cue vertical growing right writing direction">vertical
-    growing right</dfn> (a line extends vertically and is positioned horizontally, with consecutive
-    lines displayed to the right of each other<!-- used for mongolian -->).</p>
-
-    <p>If the <a href=#text-track-cue-writing-direction title="text track cue writing direction">writing direction</a> is <a href=#text-track-cue-horizontal-writing-direction title="text track cue horizontal writing direction">horizontal</a>, then <a href=#text-track-cue-line-position title="text
-    track cue line position">line position</a> percentages are relative to the height of the
-    video, and <a href=#text-track-cue-text-position title="text track cue text position">text position</a> and <a href=#text-track-cue-size title="text
-    track cue size">size</a> percentages are relative to the width of the video.</p>
-
-    <p>Otherwise, <a href=#text-track-cue-line-position title="text track cue line position">line position</a> percentages are
-    relative to the width of the video, and <a href=#text-track-cue-text-position title="text track cue text position">text
-    position</a> and <a href=#text-track-cue-size title="text track cue size">size</a> percentages are relative to
-    the height of the video.</p>
+    <p>Additional fields, as needed for the format. For example, WebVTT has a <a href=#text-track-cue-writing-direction>text track cue
+    writing direction</a> and so forth. <a href=#refsWEBVTT>[WEBVTT]</a></p>
    </dd>
 
-   <dt><dfn id=text-track-cue-snap-to-lines-flag title="text track cue snap-to-lines flag">A snap-to-lines flag</dfn>
-   <dd>
-
-    <p>A boolean indicating whether the <a href=#text-track-cue-line-position title="text track cue line position">line's
-    position</a> is a line position (positioned to a multiple of the line dimensions of the first
-    line of the cue), or whether it is a percentage of the dimension of the video.</p>
-
-    <p>Cues whose <a href=#text-track-cue-snap-to-lines-flag>text track cue snap-to-lines flag</a> is set will be placed within the
-    title-safe area on user agents that use overscan. Cues with the flag unset will be positioned as
-    requested (modulo overlap avoidance if multiple cues are in the same place).</p>
-
-   </dd>
-
-   <dt><dfn id=text-track-cue-line-position title="text track cue line position">A line position</dfn>
-   <dd>
-    <p>Either a number giving the position of the lines of the cue, to be interpreted as defined by
-    the <a href=#text-track-cue-writing-direction title="text track cue writing direction">writing direction</a> and <a href=#text-track-cue-snap-to-lines-flag title="text track cue snap-to-lines flag">snap-to-lines flag</a> of the cue, or the special
-    value <dfn id=text-track-cue-automatic-line-position title="text track cue automatic line position">auto</dfn>, which means the position
-    is to depend on the other active tracks.</p>
-
-    <p>A <a href=#text-track-cue>text track cue</a> has a <dfn id=text-track-cue-computed-line-position>text track cue computed line position</dfn> whose
-    value is that returned by the following algorithm, which is defined in terms of the other
-    aspects of the cue:</p>
-
-    <ol><li><p>If the <a href=#text-track-cue-line-position>text track cue line position</a> is numeric, the <a href=#text-track-cue-snap-to-lines-flag>text track cue
-     snap-to-lines flag</a> of the <a href=#text-track-cue>text track cue</a> is not set, and the <a href=#text-track-cue-line-position>text
-     track cue line position</a> is negative or greater than 100, then return 100 and abort these
-     steps.</li>
-
-     <li><p>If the <a href=#text-track-cue-line-position>text track cue line position</a> is numeric, return the value of the
-     <a href=#text-track-cue-line-position>text track cue line position</a> and abort these steps. (Either the <a href=#text-track-cue-snap-to-lines-flag>text track
-     cue snap-to-lines flag</a> is set, so any value, not just those in the range 0..100, is
-     valid, or the value is in the range 0..100 and is thus valid regardless of the value of that
-     flag.)</li>
-
-     <li><p>If the <a href=#text-track-cue-snap-to-lines-flag>text track cue snap-to-lines flag</a> of the <a href=#text-track-cue>text track cue</a>
-     is not set, return the value 100 and abort these steps. (The <a href=#text-track-cue-line-position>text track cue line
-     position</a> is the special value <a href=#text-track-cue-automatic-line-position title="text track cue automatic line
-     position">auto</a>.)</li>
-
-     <li><p>Let <var title="">cue</var> be the <a href=#text-track-cue>text track cue</a>.</li>
-
-     <li><p>If <var title="">cue</var> is not in a <a href=#text-track-list-of-cues title="text track list of cues">list of
-     cues</a> of a <a href=#text-track>text track</a>, or if that <a href=#text-track>text track</a> is not in the
-     <a href=#list-of-text-tracks>list of text tracks</a> of a <a href=#media-element>media element</a>, return −1 and abort
-     these steps.</li>
-
-     <li><p>Let <var title="">track</var> be the <a href=#text-track>text track</a> whose <a href=#text-track-list-of-cues title="text
-     track list of cues">list of cues</a> the <var title="">cue</var> is in.</li>
-
-     <li><p>Let <var title="">n</var> be the number of <a href=#text-track title="text track">text tracks</a>
-     whose <a href=#text-track-mode>text track mode</a> is <a href=#text-track-showing title="text track showing">showing</a> and that
-     are in the <a href=#media-element>media element</a>'s <a href=#list-of-text-tracks>list of text tracks</a> before <var title="">track</var>.</li>
-
-     <li><p>Increment <var title="">n</var> by one.</li>
-
-     <li><p>Negate <var title="">n</var>.</li>
-
-     <li><p>Return <var title="">n</var>.</li>
-
-    </ol></dd>
-
-   <dt><dfn id=text-track-cue-text-position title="text track cue text position">A text position</dfn>
-   <dd>
-    <p>A number giving the position of the text of the cue within each line, to be interpreted as a
-    percentage of the video, as defined by the <a href=#text-track-cue-writing-direction title="text track cue writing
-    direction">writing direction</a>.</p>
-   </dd>
-
-   <dt><dfn id=text-track-cue-size title="text track cue size">A size</dfn>
-   <dd>
-    <p>A number giving the size of the box within which the text of each line of the cue is to be
-    aligned, to be interpreted as a percentage of the video, as defined by the <a href=#text-track-cue-writing-direction title="text
-    track cue writing direction">writing direction</a>.</p>
-   </dd>
-
-   <dt><dfn id=text-track-cue-alignment title="text track cue alignment">An alignment</dfn>
-   <dd>
-
-    <p>An alignment for the text of each line of the cue, one of:</p>
-
-    <dl><dt><dfn id=text-track-cue-start-alignment title="text track cue start alignment">Start alignment</dfn></dt>
-     <dd>The text is aligned towards its start side.</dd>
-
-     <dt><dfn id=text-track-cue-middle-alignment title="text track cue middle alignment">Middle alignment</dfn></dt>
-     <dd>The text is aligned centered between its start and end sides.</dd>
-
-     <dt><dfn id=text-track-cue-end-alignment title="text track cue end alignment">End alignment</dfn></dt>
-     <dd>The text is aligned towards its end side.</dd>
-
-     <dt><dfn id=text-track-cue-left-alignment title="text track cue left alignment">Left alignment</dfn></dt>
-     <dd>The text is aligned to the left.</dd>
-
-     <dt><dfn id=text-track-cue-right-alignment title="text track cue right alignment">Right alignment</dfn></dt>
-     <dd>The text is aligned to the right.</dd>
-
-    </dl><p>Which sides are the start and end sides depends on the Unicode bidirectional algorithm and
-    the <a href=#text-track-cue-writing-direction title="text track cue writing direction">writing direction</a>. <a href=#refsBIDI>[BIDI]</a></p>
-
-   </dd>
-
    <dt><dfn id=text-track-cue-text title="text track cue text">The text of the cue</dfn>
    <dd>
-    <p>The raw text of the cue, and rules for its interpretation,
-    allowing the text to be rendered and converted to a DOM fragment.</p>
+    <p>The raw text of the cue, and <dfn id=rules-for-rendering-the-cue-in-isolation>rules for rendering the cue in isolation</dfn>.</p>
    </dd>
 
-  </dl><p>Each <a href=#text-track-cue>text track cue</a> has a corresponding <code><a href=#texttrackcue>TextTrackCue</a></code> object. A
-  <a href=#text-track-cue>text track cue</a>'s in-memory representation can be dynamically changed through this
-  <code><a href=#texttrackcue>TextTrackCue</a></code> API.</p>
+  </dl><p>Each <a href=#text-track-cue>text track cue</a> has a corresponding <code><a href=#texttrackcue>TextTrackCue</a></code> object (or more
+  specifically, an object that inherits from <code><a href=#texttrackcue>TextTrackCue</a></code> — for example, WebVTT
+  cues use the <code>WebVTTCue</code> interface). A <a href=#text-track-cue>text track cue</a>'s in-memory
+  representation can be dynamically changed through this <code><a href=#texttrackcue>TextTrackCue</a></code> API. <a href=#refsWEBVTT>[WEBVTT]</a></p>
 
+  <p>A <a href=#text-track-cue>text track cue</a> is associated with <a href=#rules-for-updating-the-text-track-rendering>rules for updating the text track
+  rendering</a>, as defined by the specification for the specific kind of <a href=#text-track-cue>text track
+  cue</a>. These rules are used specifically when the object representing the cue is added to a
+  <code><a href=#texttrack>TextTrack</a></code> object using the <code title=dom-TextTrack-addCue><a href=#dom-texttrack-addcue>addCue()</a></code>
+  method.</p>
+
   <p>In addition, each <a href=#text-track-cue>text track cue</a> has two pieces of dynamic information:</p>
 
   <dl><dt>The <dfn id=text-track-cue-active-flag title="text track cue active flag">active flag</dfn>
@@ -30741,16 +30629,7 @@
 
    </dd>
 
-  </dl><p>When a <a href=#text-track-cue>text track cue</a> whose <a href=#text-track-cue-active-flag title="text track cue active flag">active
-  flag</a> is set has its <a href=#text-track-cue-writing-direction title="text track cue writing direction">writing
-  direction</a>, <a href=#text-track-cue-snap-to-lines-flag title="text track cue snap-to-lines flag">snap-to-lines flag</a>, <a href=#text-track-cue-line-position title="text track cue line position">line position</a>, <a href=#text-track-cue-text-position title="text track cue text
-  position">text position</a>, <a href=#text-track-cue-size title="text track cue size">size</a>, <a href=#text-track-cue-alignment title="text
-  track cue alignment">alignment</a>, or <a href=#text-track-cue-text title="text track cue text">text</a> change
-  value, then the user agent must empty the <a href=#text-track-cue-display-state>text track cue display state</a>, and then
-  immediately run the <a href=#text-track>text track</a>'s <a href=#rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating the display of WebVTT text
-  tracks</a>.</p>
-
-  <p>The <a href=#text-track-cue title="text track cue">text track cues</a> of a <a href=#media-element>media element</a>'s <a href=#text-track title="text track">text tracks</a> are ordered relative to each other in the <dfn id=text-track-cue-order>text track
+  </dl><p>The <a href=#text-track-cue title="text track cue">text track cues</a> of a <a href=#media-element>media element</a>'s <a href=#text-track title="text track">text tracks</a> are ordered relative to each other in the <dfn id=text-track-cue-order>text track
   cue order</dfn>, which is determined as follows: first group the <a href=#text-track-cue title="text track
   cue">cues</a> by their <a href=#text-track>text track</a>, with the groups being sorted in the same order
   as their <a href=#text-track title="text track">text tracks</a> appear in the <a href=#media-element>media element</a>'s
@@ -31200,30 +31079,6 @@
     <p>Should be set to false.</p>
    </dd>
 
-   <dt>The <a href=#text-track-cue-writing-direction>text track cue writing direction</a>
-   <dd>
-    <p>Should be set to <a href=#text-track-cue-horizontal-writing-direction title="text track cue horizontal writing direction">horizontal</a>
-    if the concept of writing direction doesn't really apply (e.g. the cue consists of a bitmap
-    image).</p>
-   </dd>
-
-   <dt>The <a href=#text-track-cue-snap-to-lines-flag>text track cue snap-to-lines flag</a>
-   <dd>
-    <p>Should be set to false unless the format uses a rendering and positioning model for cues that
-    is largely consistent with the <a href=#webvtt-cue-text-rendering-rules>WebVTT cue text rendering rules</a>.</p>
-   </dd>
-
-   <dt>The <a href=#text-track-cue-line-position>text track cue line position</a>
-   <dt>The <a href=#text-track-cue-text-position>text track cue text position</a>
-   <dt>The <a href=#text-track-cue-size>text track cue size</a>
-   <dt>The <a href=#text-track-cue-alignment>text track cue alignment</a>
-   </dt></dt></dt><dd>
-    <p>If the format uses a rendering and positioning model for cues that can be largely simulated
-    using the <a href=#webvtt-cue-text-rendering-rules>WebVTT cue text rendering rules</a>, then these should be set to the values
-    that would give the same effect for <a href=#webvtt>WebVTT</a> cues. Otherwise, they should be set to
-    zero.</p>
-   </dd>
-
   </dl></div>
 
 
@@ -31410,18 +31265,18 @@
 
    <li>
 
+<!--CLEANUP-->
     <p>Create a new <a href=#text-track>text track</a> corresponding to the new
     object, and set its <a href=#text-track-kind>text track kind</a> to <var title="">kind</var>, its <a href=#text-track-label>text track label</a> to <var title="">label</var>, its <a href=#text-track-language>text track language</a> to <var title="">language</var>, its <a href=#text-track-readiness-state>text track readiness
     state</a> to the <a href=#text-track-loaded>text track loaded</a> state, its
     <a href=#text-track-mode>text track mode</a> to the <a href=#text-track-hidden>text track hidden</a>
     mode, and its <a href=#text-track-list-of-cues>text track list of cues</a> to an empty
-    list.
-    Associate the <a href=#text-track-list-of-cues>text track list of cues</a> with the
-    <a href=#rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating the display of WebVTT text tracks</a>
-    as its <a href=#rules-for-updating-the-text-track-rendering>rules for updating the text track rendering</a>.
-    <a href=#refsWEBVTT>[WEBVTT]</a>
-    </p>
+    list.</p>
 
+    <p>Initially, the <a href=#text-track-list-of-cues>text track list of cues</a> is not associated with any <a href=#rules-for-updating-the-text-track-rendering>rules
+    for updating the text track rendering</a>. When a <a href=#text-track-cue>text track cue</a> is added to it,
+    the <a href=#text-track-list-of-cues>text track list of cues</a> has its rules permanently set accordingly.</p>
+
    </li>
 
    <li>
@@ -31542,7 +31397,16 @@
   <hr><p>The <dfn id=dom-texttrack-addcue title=dom-TextTrack-addCue><code>addCue(<var title="">cue</var>)</code></dfn> method
   of <code><a href=#texttrack>TextTrack</a></code> objects, when invoked, must run the following steps:</p>
 
-  <ol><li><p>If the given <var title="">cue</var> is in a <a href=#text-track-list-of-cues>text track list of cues</a>, then
+  <ol><li><p>If the <a href=#text-track-list-of-cues>text track list of cues</a> does not yet have any associated <a href=#rules-for-updating-the-text-track-rendering>rules
+   for updating the text track rendering</a>, then associate the <a href=#text-track-list-of-cues>text track list of
+   cues</a> with the <a href=#rules-for-updating-the-text-track-rendering>rules for updating the text track rendering</a> appropriate to <var title="">cue</var>.</p>
+
+   <li><p>If <a href=#text-track-list-of-cues>text track list of cues</a>' associated <a href=#rules-for-updating-the-text-track-rendering>rules for updating the text
+   track rendering</a> are not the same <a href=#rules-for-updating-the-text-track-rendering>rules for updating the text track rendering</a>
+   as appropriate for <var title="">cue</var>, then throw an <code><a href=#invalidstateerror>InvalidStateError</a></code>
+   exception and abort these steps.</p>
+
+   <li><p>If the given <var title="">cue</var> is in a <a href=#text-track-list-of-cues>text track list of cues</a>, then
    remove <var title="">cue</var> from that <a href=#text-track-list-of-cues>text track list of cues</a>.</li>
 
    <li><p>Add <var title="">cue</var> to the method's <code><a href=#texttrack>TextTrack</a></code> object's <a href=#text-track>text
@@ -31646,25 +31510,14 @@
 
   <hr><pre class=idl>interface <dfn id=texttrackcue>TextTrackCue</dfn> : <a href=#eventtarget>EventTarget</a> {
   readonly attribute <a href=#texttrack>TextTrack</a>? <a href=#dom-texttrackcue-track title=dom-TextTrackCue-track>track</a>;
-           attribute <a href=#eventhandler>EventHandler</a> <a href=#handler-texttrackcue-onenter title=handler-TextTrackCue-onenter>onenter</a>;
-           attribute <a href=#eventhandler>EventHandler</a> <a href=#handler-texttrackcue-onexit title=handler-TextTrackCue-onexit>onexit</a>;
-};
 
-enum <dfn id=autokeyword>AutoKeyword</dfn> { "auto" };
-[<a href=#dom-texttrackcue title=dom-TextTrackCue>Constructor</a>(double startTime, double endTime, DOMString text)]
-interface <dfn id=webvttcue>WebVTTCue</dfn> : <a href=#texttrackcue>TextTrackCue</a> {
            attribute DOMString <a href=#dom-texttrackcue-id title=dom-TextTrackCue-id>id</a>;
            attribute double <a href=#dom-texttrackcue-starttime title=dom-TextTrackCue-startTime>startTime</a>;
            attribute double <a href=#dom-texttrackcue-endtime title=dom-TextTrackCue-endTime>endTime</a>;
            attribute boolean <a href=#dom-texttrackcue-pauseonexit title=dom-TextTrackCue-pauseOnExit>pauseOnExit</a>;
-           attribute DOMString <a href=#dom-texttrackcue-vertical title=dom-TextTrackCue-vertical>vertical</a>;
-           attribute boolean <a href=#dom-texttrackcue-snaptolines title=dom-TextTrackCue-snapToLines>snapToLines</a>;
-           attribute (long or <a href=#autokeyword>AutoKeyword</a>) <a href=#dom-texttrackcue-line title=dom-TextTrackCue-line>line</a>;
-           attribute long <a href=#dom-texttrackcue-position title=dom-TextTrackCue-position>position</a>;
-           attribute long <a href=#dom-texttrackcue-size title=dom-TextTrackCue-size>size</a>;
-           attribute DOMString <a href=#dom-texttrackcue-align title=dom-TextTrackCue-align>align</a>;
-           attribute DOMString <a href=#dom-texttrackcue-text title=dom-TextTrackCue-text>text</a>;
-  <a href=#documentfragment>DocumentFragment</a> <a href=#dom-texttrackcue-getcueashtml title=dom-TextTrackCue-getCueAsHTML>getCueAsHTML</a>();
+
+           attribute <a href=#eventhandler>EventHandler</a> <a href=#handler-texttrackcue-onenter title=handler-TextTrackCue-onenter>onenter</a>;
+           attribute <a href=#eventhandler>EventHandler</a> <a href=#handler-texttrackcue-onexit title=handler-TextTrackCue-onexit>onexit</a>;
 };</pre>
 
   <dl class=domintro><dt><var title="">cue</var> . <a href=#dom-texttrackcue-track title=dom-TextTrackCue-track>track</a></dt>
@@ -31674,15 +31527,6 @@
     otherwise.</p>
    </dd>
 
-
-   <dt><var title="">cue</var> = new <code title=dom-TextTrackCue><a href=#dom-texttrackcue>WebVTTCue</a></code>( <var title="">startTime</var>, <var title="">endTime</var>, <var title="">text</var> )</dt>
-   <dd>
-    <p>Returns a new <code><a href=#texttrackcue>TextTrackCue</a></code> object, for use with the <code title=dom-TextTrack-addCue><a href=#dom-texttrack-addcue>addCue()</a></code> method.</p>
-    <p>The <var title="">startTime</var> argument sets the <a href=#text-track-cue-start-time>text track cue start time</a>.</p>
-    <p>The <var title="">endTime</var> argument sets the <a href=#text-track-cue-end-time>text track cue end time</a>.</p>
-    <p>The <var title="">text</var> argument sets the <a href=#text-track-cue-text>text track cue text</a>.</p>
-   </dd>
-
    <dt><var title="">cue</var> . <a href=#dom-texttrackcue-id title=dom-TextTrackCue-id>id</a> [ = <var title="">value</var> ]</dt>
    <dd>
     <p>Returns the <a href=#text-track-cue-identifier>text track cue identifier</a>.</p>
@@ -31707,127 +31551,10 @@
     <p>Can be set.</p>
    </dd>
 
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-vertical title=dom-TextTrackCue-vertical>vertical</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns a string representing the <a href=#text-track-cue-writing-direction>text track cue writing direction</a>, as follows:</p>
-    <dl class=switch><dt>If it is <a href=#text-track-cue-horizontal-writing-direction title="text track cue horizontal writing direction">horizontal</a></dt>
-     <dd><p>The empty string.</dd>
-     <dt>If it is <a href=#text-track-cue-vertical-growing-left-writing-direction title="text track cue vertical growing left writing direction">vertical growing left</a></dt>
-     <dd><p>The string "<code title="">rl</code>".</dd>
-     <dt>If it is <a href=#text-track-cue-vertical-growing-right-writing-direction title="text track cue vertical growing right writing direction">vertical growing right</a></dt>
-     <dd><p>The string "<code title="">lr</code>".</dd>
-    </dl><p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-snaptolines title=dom-TextTrackCue-snapToLines>snapToLines</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns true if the <a href=#text-track-cue-snap-to-lines-flag>text track cue snap-to-lines flag</a> is set, false otherwise.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-line title=dom-TextTrackCue-line>line</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns the <a href=#text-track-cue-line-position>text track cue line position</a>. In the
-    case of the value being <a href=#text-track-cue-automatic-line-position title="text track cue automatic line
-    position">auto</a>, the string "<code title="">auto</code>" is
-    returned.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-position title=dom-TextTrackCue-position>position</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns the <a href=#text-track-cue-text-position>text track cue text position</a>.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-size title=dom-TextTrackCue-size>size</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns the <a href=#text-track-cue-size>text track cue size</a>.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-align title=dom-TextTrackCue-align>align</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns a string representing the <a href=#text-track-cue-alignment>text track cue alignment</a>, as follows:</p>
-    <dl class=switch><dt>If it is <a href=#text-track-cue-start-alignment title="text track cue start alignment">start alignment</a></dt>
-     <dd><p>The string "<code title="">start</code>".</dd>
-     <dt>If it is <a href=#text-track-cue-middle-alignment title="text track cue middle alignment">middle alignment</a></dt>
-     <dd><p>The string "<code title="">middle</code>".</dd>
-     <dt>If it is <a href=#text-track-cue-end-alignment title="text track cue end alignment">end alignment</a></dt>
-     <dd><p>The string "<code title="">end</code>".</dd>
-     <dt>If it is <a href=#text-track-cue-left-alignment title="text track cue left alignment">left alignment</a></dt>
-     <dd><p>The string "<code title="">left</code>".</dd>
-     <dt>If it is <a href=#text-track-cue-right-alignment title="text track cue right alignment">right alignment</a></dt>
-     <dd><p>The string "<code title="">right</code>".</dd>
-    </dl><p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <a href=#dom-texttrackcue-text title=dom-TextTrackCue-text>text</a> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns the <a href=#text-track-cue-text>text track cue text</a> in raw unparsed form.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">fragment</var> = <var title="">cue</var> . <a href=#dom-texttrackcue-getcueashtml title=dom-TextTrackCue-getCueAsHTML>getCueAsHTML</a>()</dt>
-   <dd>
-    <p>Returns the <a href=#text-track-cue-text>text track cue text</a> as a <code><a href=#documentfragment>DocumentFragment</a></code> of <a href=#html-elements>HTML elements</a> and other DOM nodes.</p>
-   </dd>
-
   </dl><div class=impl>
 
-  <p>The <dfn id=dom-texttrackcue title=dom-TextTrackCue><code>TextTrackCue(<var title="">startTime</var>, <var title="">endTime</var>, <var title="">text</var>)</code></dfn> constructor, when invoked, must
-  run the following steps:</p>
-
-  <ol><li><p>Create a new <a href=#text-track-cue>text track cue</a>. Let <var title="">cue</var> be that <a href=#text-track-cue>text track cue</a>.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-start-time>text track cue start
-   time</a> be the value of the <var title="">startTime</var>
-   argument, interpreted as a time in seconds.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-end-time>text track cue end
-   time</a> be the value of the <var title="">endTime</var>
-   argument, interpreted as a time in seconds.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-text>text track cue
-   text</a> be the value of the <var title="">text</var> argument,
-   and let the rules for its interpretation be the <a href=#webvtt-cue-text-parsing-rules>WebVTT cue
-   text parsing rules</a>, the <a href=#webvtt-cue-text-rendering-rules>WebVTT cue text rendering
-   rules</a>, and the <a href=#webvtt-cue-text-dom-construction-rules>WebVTT cue text DOM construction
-   rules</a>. <a href=#refsWEBVTT>[WEBVTT]</a></li>
-
-   <!-- default settings -->
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-identifier>text track cue
-   identifier</a> be the empty string.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-pause-on-exit-flag>text track cue
-   pause-on-exit flag</a> be false.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-writing-direction>text track cue
-   writing direction</a> be <a href=#text-track-cue-horizontal-writing-direction title="text track cue
-   horizontal writing direction">horizontal</a>.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-snap-to-lines-flag>text track cue
-   snap-to-lines flag</a> be true.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-line-position>text track cue line
-   position</a> be <a href=#text-track-cue-automatic-line-position title="text track cue automatic line
-   position">auto</a>.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-text-position>text track cue
-   text position</a> be 50.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-size>text track cue
-   size</a> be 100.</li>
-
-   <li><p>Let <var title="">cue</var>'s <a href=#text-track-cue-alignment>text track cue
-   alignment</a> be <a href=#text-track-cue-middle-alignment title="text track cue middle
-   alignment">middle alignment</a>.</li>
-
-   <li><p>Return the <code><a href=#texttrackcue>TextTrackCue</a></code> object representing
-   <var title="">cue</var>.</li>
-
-  </ol><p>The <dfn id=dom-texttrackcue-track title=dom-TextTrackCue-track><code>track</code></dfn>
+<!--CLEANUP-->
+  <p>The <dfn id=dom-texttrackcue-track title=dom-TextTrackCue-track><code>track</code></dfn>
   attribute, on getting, must return the <code><a href=#texttrack>TextTrack</a></code> object
   of the <a href=#text-track>text track</a> in whose <a href=#text-track-list-of-cues title="text track list
   of cues">list of cues</a> the <a href=#text-track-cue>text track cue</a> that
@@ -31860,83 +31587,12 @@
   flag</a> must be set if the new value is true, and must be unset
   otherwise.</p>
 
-  <p>The <dfn id=dom-texttrackcue-vertical title=dom-TextTrackCue-vertical><code>vertical</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 href=#text-track-cue-writing-direction>text
-  track cue writing direction</a> of the <a href=#text-track-cue>text track
-  cue</a> that the <code><a href=#texttrackcue>TextTrackCue</a></code> object represents:</p>
-
-  <table><thead><tr><th> <a href=#text-track-cue-writing-direction>Text track cue writing direction</a>
-         <th> <code title=dom-TextTrackCue-direction>direction</code> value
-   <tbody><tr><td> <a href=#text-track-cue-horizontal-writing-direction title="text track cue horizontal writing direction">Horizontal</a>
-         <td> "<code title=""></code>" (the empty string)
-    <tr><td> <a href=#text-track-cue-vertical-growing-left-writing-direction title="text track cue vertical growing left writing direction">Vertical growing left</a>
-         <td> "<code title="">rl</code>"
-    <tr><td> <a href=#text-track-cue-vertical-growing-right-writing-direction title="text track cue vertical growing right writing direction">Vertical growing right</a>
-         <td> "<code title="">lr</code>"
-  </table><p>On setting, the <a href=#text-track-cue-writing-direction>text track cue writing direction</a> must be set to the value given in
-  the first cell of the row in the table above whose second cell is a <a href=#case-sensitive>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><a href=#syntaxerror>SyntaxError</a></code> exception.</p>
-
-  <p>The <dfn id=dom-texttrackcue-snaptolines title=dom-TextTrackCue-snapToLines><code>snapToLines</code></dfn> attribute, on
-  getting, must return true if the <a href=#text-track-cue-snap-to-lines-flag>text track cue snap-to-lines flag</a> of the <a href=#text-track-cue>text
-  track cue</a> that the <code><a href=#texttrackcue>TextTrackCue</a></code> object represents is set; or false otherwise.
-  On setting, the <a href=#text-track-cue-snap-to-lines-flag>text track cue snap-to-lines flag</a> must be set if the new value is
-  true, and must be unset otherwise.</p>
-
-  <p>The <dfn id=dom-texttrackcue-line title=dom-TextTrackCue-line><code>line</code></dfn> attribute, on getting, must
-  return the <a href=#text-track-cue-line-position>text track cue line position</a> of the <a href=#text-track-cue>text track cue</a> that the
-  <code><a href=#texttrackcue>TextTrackCue</a></code> object represents. The special value <a href=#text-track-cue-automatic-line-position title="text track cue
-  automatic line position">auto</a> must be represented as the string "<code title="">auto</code>". On setting, the <a href=#text-track-cue-line-position>text track cue line position</a> must be set to
-  the new value; if the new value is the string "<code title="">auto</code>", then it must be
-  interpreted as the special value <a href=#text-track-cue-automatic-line-position title="text track cue automatic line
-  position">auto</a>.</p>
-
-  <p>The <dfn id=dom-texttrackcue-position title=dom-TextTrackCue-position><code>position</code></dfn> attribute, on getting,
-  must return the <a href=#text-track-cue-text-position>text track cue text position</a> of the <a href=#text-track-cue>text track cue</a> that
-  the <code><a href=#texttrackcue>TextTrackCue</a></code> object represents. On setting, if the new value is negative or
-  greater than 100, then an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception must be thrown. Otherwise, the
-  <a href=#text-track-cue-text-position>text track cue text position</a> must be set to the new value.</p>
-
-  <p>The <dfn id=dom-texttrackcue-size title=dom-TextTrackCue-size><code>size</code></dfn> attribute, on getting, must
-  return the <a href=#text-track-cue-size>text track cue size</a> of the <a href=#text-track-cue>text track cue</a> that the
-  <code><a href=#texttrackcue>TextTrackCue</a></code> object represents. On setting, if the new value is negative or greater
-  than 100, then an <code><a href=#indexsizeerror>IndexSizeError</a></code> exception must be thrown. Otherwise, the <a href=#text-track-cue-size>text
-  track cue size</a> must be set to the new value.</p>
-
-  <p>The <dfn id=dom-texttrackcue-align title=dom-TextTrackCue-align><code>align</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 href=#text-track-cue-alignment>text track cue alignment</a> of the <a href=#text-track-cue>text track cue</a> that the
-  <code><a href=#texttrackcue>TextTrackCue</a></code> object represents:</p>
-
-  <table><thead><tr><th><a href=#text-track-cue-alignment>Text track cue alignment</a> <th> <code title=dom-TextTrackCue-align><a href=#dom-texttrackcue-align>align</a></code> value
-   <tbody><tr><td><a href=#text-track-cue-start-alignment title="text track cue start alignment">Start alignment</a> <td> "<code title="">start</code>"
-    <tr><td><a href=#text-track-cue-middle-alignment title="text track cue middle alignment">Middle alignment</a> <td> "<code title="">middle</code>"
-    <tr><td><a href=#text-track-cue-end-alignment title="text track cue end alignment">End alignment</a> <td> "<code title="">end</code>"
-    <tr><td><a href=#text-track-cue-left-alignment title="text track cue left alignment">Left alignment</a> <td> "<code title="">left</code>"
-    <tr><td><a href=#text-track-cue-right-alignment title="text track cue right alignment">Right alignment</a> <td> "<code title="">right</code>"
-  </table><p>On setting, the <a href=#text-track-cue-alignment>text track cue alignment</a> must be set to the value given in the
-  first cell of the row in the table above whose second cell is a <a href=#case-sensitive>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><a href=#syntaxerror>SyntaxError</a></code> exception.</p>
-
-  <p>The <dfn id=dom-texttrackcue-text title=dom-TextTrackCue-text><code>text</code></dfn> attribute, on getting, must
-  return the raw <a href=#text-track-cue-text>text track cue text</a> of the <a href=#text-track-cue>text track cue</a> that the
-  <code><a href=#texttrackcue>TextTrackCue</a></code> object represents. On setting, the <a href=#text-track-cue-text>text track cue text</a> must
-  be set to the new value.</p>
-
-  <p>The <dfn id=dom-texttrackcue-getcueashtml title=dom-TextTrackCue-getCueAsHTML><code>getCueAsHTML()</code></dfn> method must
-  convert the <a href=#text-track-cue-text>text track cue text</a> to a <code><a href=#documentfragment>DocumentFragment</a></code> for the
-  <a href="#script's-document">script's document</a> of the <a href=#entry-script>entry script</a>, using the appropriate rules for
-  doing so. For example, for <a href=#webvtt>WebVTT</a>, those rules are the <a href=#webvtt-cue-text-parsing-rules>WebVTT cue text parsing
-  rules</a> and the <a href=#webvtt-cue-text-dom-construction-rules>WebVTT cue text DOM construction rules</a>. <a href=#refsWEBVTT>[WEBVTT]</a></p>
-
   </div>
 
 
   <h6 id=text-tracks-describing-chapters><span class=secno>4.8.10.12.6 </span>Text tracks describing chapters</h6>
 
+<!--CLEANUP-->
   <p>Chapters are segments of a <a href=#media-resource>media resource</a> with a
   given title. Chapters can be nested, in the same way that sections
   in a document outline can have subsections.</p>
@@ -31999,9 +31655,14 @@
    cue start time</a>, whose end time is <var title="">current
    cue</var>'s <a href=#text-track-cue-end-time>text track cue end time</a>, whose title is
    <var title="">current cue</var>'s <a href=#text-track-cue-text>text track cue text</a>
-   interpreted according to its rules for interpretation, and whose
-   list of nested chapters is empty.</li>
+   interpreted according to its <a href=#rules-for-rendering-the-cue-in-isolation>rules for rendering the cue in isolation</a>, and whose
+   list of nested chapters is empty.</p>
 
+    <p class=note>For WebVTT, the <a href=#rules-for-rendering-the-cue-in-isolation>rules for rendering the cue in isolation</a> are the
+    <a href=#rules-for-interpreting-webvtt-cue-text>rules for interpreting WebVTT cue text</a>. <a href=#refsWEBVTT>[WEBVTT]</a></p>
+
+   </li>
+
    <li><p>Append <var title="">new chapter</var> to <var title="">current chapter</var>'s list of nested chapters, and let
    <var title="">current chapter</var> be <var title="">new
    chapter</var>'s parent.</li>
@@ -94279,7 +93940,7 @@
      <td>On the right
     <tr><td><code title="">center</code>
      <td>In the middle
-  </table><h3 id=replaced-elements><span class=secno>14.4 </span>Replaced elements</h3>
+  </table><!--CLEANUP--><h3 id=replaced-elements><span class=secno>14.4 </span>Replaced elements</h3>
 
   <h4 id=embedded-content-2><span class=secno>14.4.1 </span>Embedded content</h4>
 
@@ -94329,7 +93990,7 @@
   <p>Any subtitles or captions are expected to be overlayed directly
   on top of their <code><a href=#the-video-element>video</a></code> element, as defined by the
   relevant rendering rules; for <a href=#webvtt>WebVTT</a>, those are the
-  <a href=#webvtt-cue-text-rendering-rules>WebVTT cue text rendering rules</a>. <a href=#refsWEBVTT>[WEBVTT]</a></p>
+  <a href=#rules-for-updating-the-display-of-webvtt-text-tracks>rules for updating the display of WebVTT text tracks</a>. <a href=#refsWEBVTT>[WEBVTT]</a></p>
 
   <p>When the user agent starts <a href=#expose-a-user-interface-to-the-user title="expose a user interface
   to the user">exposing a user interface</a> for a
@@ -94352,14 +94013,7 @@
 iframe[seamless] { display: block; }
 <span id=video-object-fit>video { object-fit: contain; }</span></pre>
 
-  </div>
 
-
-
-
-<!--TOPIC:Rendering-->
-  <div class=impl>
-
   <h4 id=images-0><span class=secno>14.4.2 </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
@@ -97223,13 +96877,11 @@
 
 
 
-
   <h2 id=iana><span class=secno>16 </span>IANA considerations</h2>
 
   <!-- http://www.w3.org/2002/06/registering-mediatype.html -->
 
 
-
   <h3 id=text/html><span class=secno>16.1 </span><dfn><code>text/html</code></dfn></h3>
 
   <p>This registration is for community review and will be submitted
@@ -97792,7 +97444,6 @@
   at the time of writing, no semantics at all). <a href=#refsJSON>[JSON]</a></p>
 
 
-
 <!--TOPIC:HTML-->
   <h3 id=ping-from><span class=secno>16.8 </span><dfn title=http-ping-from><code>Ping-From</code></dfn></h3>
 
@@ -101099,7 +100750,6 @@
    <li><code><a href=#videotrack>VideoTrack</a></code>
    <li><code><a href=#videotracklist>VideoTrackList</a></code>
    <li><code><a href=#websocket>WebSocket</a></code>
-   <li><code><a href=#webvttcue>WebVTTCue</a></code>
    <li><code><a href=#window>Window</a></code>
    <li><code><a href=#windowbase64>WindowBase64</a></code>
    <li><code><a href=#windoweventhandlers>WindowEventHandlers</a></code>
@@ -101951,6 +101601,7 @@
   Laura L. Carlson,
   Laura Wisewell,
   Laurens Holst,
+  Lawrence Forooghian,
   Lee Kowalkowski,
   Leif Halvard Silli,
   Lenny Domnitser,

Modified: source
===================================================================
--- source	2013-03-09 02:02:30 UTC (rev 7747)
+++ source	2013-03-11 23:43:35 UTC (rev 7748)
@@ -2694,11 +2694,9 @@
      <li><dfn>WebVTT file using chapter title text</dfn>
      <li><dfn>WebVTT file using only nested cues</dfn>
      <li><dfn>WebVTT parser</dfn>
-     <li><dfn>WebVTT cue settings</dfn> and how to <dfn>parse the WebVTT settings</dfn>
      <li>The <dfn>rules for updating the display of WebVTT text tracks</dfn>
-     <li>The <dfn>WebVTT cue text DOM construction rules</dfn>
-     <li>The <dfn>WebVTT cue text rendering rules</dfn>
-     <li>The <dfn>WebVTT cue text parsing rules</dfn>
+     <li>The <dfn>rules for interpreting WebVTT cue text</dfn>
+     <li>The WebVTT <dfn>text track cue writing direction</dfn>
     </ul>
 
    </dd>
@@ -27578,6 +27576,7 @@
   <p>Any audio associated with the <span>media resource</span> must, if played, be played
   synchronized with the <span>current playback position</span>, at the element's <span>effective
   media volume</span>.</p>
+<!--CLEANUP-->
 
   <p>In addition to the above, the user agent may provide messages to
   the user (such as "buffering", "no video loaded", "error", or more
@@ -32992,153 +32991,31 @@
     end of the range to which the cue applies is reached.</p>
    </dd>
 
-   <dt><dfn title="text track cue writing direction">A writing direction</dfn>
+   <dt>Some additional format-specific data</dt>
    <dd>
-    <p>A writing direction, either <dfn title="text track cue horizontal writing
-    direction">horizontal</dfn> (a line extends horizontally and is positioned vertically, with
-    consecutive lines displayed below each other), <dfn title="text track cue vertical growing left
-    writing direction">vertical growing left</dfn> (a line extends vertically and is positioned
-    horizontally, with consecutive lines displayed to the left of each other<!-- used for east
-    asian-->), or <dfn title="text track cue vertical growing right writing direction">vertical
-    growing right</dfn> (a line extends vertically and is positioned horizontally, with consecutive
-    lines displayed to the right of each other<!-- used for mongolian -->).</p>
-
-    <p>If the <span title="text track cue writing direction">writing direction</span> is <span
-    title="text track cue horizontal writing direction">horizontal</span>, then <span title="text
-    track cue line position">line position</span> percentages are relative to the height of the
-    video, and <span title="text track cue text position">text position</span> and <span title="text
-    track cue size">size</span> percentages are relative to the width of the video.</p>
-
-    <p>Otherwise, <span title="text track cue line position">line position</span> percentages are
-    relative to the width of the video, and <span title="text track cue text position">text
-    position</span> and <span title="text track cue size">size</span> percentages are relative to
-    the height of the video.</p>
+    <p>Additional fields, as needed for the format. For example, WebVTT has a <span>text track cue
+    writing direction</span> and so forth. <a href="#refsWEBVTT">[WEBVTT]</a></p>
    </dd>
 
-   <dt><dfn title="text track cue snap-to-lines flag">A snap-to-lines flag</dfn>
-   <dd>
-
-    <p>A boolean indicating whether the <span title="text track cue line position">line's
-    position</span> is a line position (positioned to a multiple of the line dimensions of the first
-    line of the cue), or whether it is a percentage of the dimension of the video.</p>
-
-    <p>Cues whose <span>text track cue snap-to-lines flag</span> is set will be placed within the
-    title-safe area on user agents that use overscan. Cues with the flag unset will be positioned as
-    requested (modulo overlap avoidance if multiple cues are in the same place).</p>
-
-   </dd>
-
-   <dt><dfn title="text track cue line position">A line position</dfn>
-   <dd>
-    <p>Either a number giving the position of the lines of the cue, to be interpreted as defined by
-    the <span title="text track cue writing direction">writing direction</span> and <span
-    title="text track cue snap-to-lines flag">snap-to-lines flag</span> of the cue, or the special
-    value <dfn title="text track cue automatic line position">auto</dfn>, which means the position
-    is to depend on the other active tracks.</p>
-
-    <p>A <span>text track cue</span> has a <dfn>text track cue computed line position</dfn> whose
-    value is that returned by the following algorithm, which is defined in terms of the other
-    aspects of the cue:</p>
-
-    <ol>
-
-     <li><p>If the <span>text track cue line position</span> is numeric, the <span>text track cue
-     snap-to-lines flag</span> of the <span>text track cue</span> is not set, and the <span>text
-     track cue line position</span> is negative or greater than 100, then return 100 and abort these
-     steps.</p></li>
-
-     <li><p>If the <span>text track cue line position</span> is numeric, return the value of the
-     <span>text track cue line position</span> and abort these steps. (Either the <span>text track
-     cue snap-to-lines flag</span> is set, so any value, not just those in the range 0..100, is
-     valid, or the value is in the range 0..100 and is thus valid regardless of the value of that
-     flag.)</p></li>
-
-     <li><p>If the <span>text track cue snap-to-lines flag</span> of the <span>text track cue</span>
-     is not set, return the value 100 and abort these steps. (The <span>text track cue line
-     position</span> is the special value <span title="text track cue automatic line
-     position">auto</span>.)</p></li>
-
-     <li><p>Let <var title="">cue</var> be the <span>text track cue</span>.</p></li>
-
-     <li><p>If <var title="">cue</var> is not in a <span title="text track list of cues">list of
-     cues</span> of a <span>text track</span>, or if that <span>text track</span> is not in the
-     <span>list of text tracks</span> of a <span>media element</span>, return &#x2212;1 and abort
-     these steps.</p></li>
-
-     <li><p>Let <var title="">track</var> be the <span>text track</span> whose <span title="text
-     track list of cues">list of cues</span> the <var title="">cue</var> is in.</p></li>
-
-     <li><p>Let <var title="">n</var> be the number of <span title="text track">text tracks</span>
-     whose <span>text track mode</span> is <span title="text track showing">showing</span> and that
-     are in the <span>media element</span>'s <span>list of text tracks</span> before <var
-     title="">track</var>.</p></li>
-
-     <li><p>Increment <var title="">n</var> by one.</p></li>
-
-     <li><p>Negate <var title="">n</var>.</p></li>
-
-     <li><p>Return <var title="">n</var>.</p></li>
-
-    </ol>
-
-   </dd>
-
-   <dt><dfn title="text track cue text position">A text position</dfn>
-   <dd>
-    <p>A number giving the position of the text of the cue within each line, to be interpreted as a
-    percentage of the video, as defined by the <span title="text track cue writing
-    direction">writing direction</span>.</p>
-   </dd>
-
-   <dt><dfn title="text track cue size">A size</dfn>
-   <dd>
-    <p>A number giving the size of the box within which the text of each line of the cue is to be
-    aligned, to be interpreted as a percentage of the video, as defined by the <span title="text
-    track cue writing direction">writing direction</span>.</p>
-   </dd>
-
-   <dt><dfn title="text track cue alignment">An alignment</dfn>
-   <dd>
-
-    <p>An alignment for the text of each line of the cue, one of:</p>
-
-    <dl>
-
-     <dt><dfn title="text track cue start alignment">Start alignment</dfn></dt>
-     <dd>The text is aligned towards its start side.</dd>
-
-     <dt><dfn title="text track cue middle alignment">Middle alignment</dfn></dt>
-     <dd>The text is aligned centered between its start and end sides.</dd>
-
-     <dt><dfn title="text track cue end alignment">End alignment</dfn></dt>
-     <dd>The text is aligned towards its end side.</dd>
-
-     <dt><dfn title="text track cue left alignment">Left alignment</dfn></dt>
-     <dd>The text is aligned to the left.</dd>
-
-     <dt><dfn title="text track cue right alignment">Right alignment</dfn></dt>
-     <dd>The text is aligned to the right.</dd>
-
-    </dl>
-
-    <p>Which sides are the start and end sides depends on the Unicode bidirectional algorithm and
-    the <span title="text track cue writing direction">writing direction</span>. <a
-    href="#refsBIDI">[BIDI]</a></p>
-
-   </dd>
-
    <dt><dfn title="text track cue text">The text of the cue</dfn>
    <dd>
-    <p>The raw text of the cue, and rules for its interpretation,
-    allowing the text to be rendered and converted to a DOM fragment.</p>
+    <p>The raw text of the cue, and <dfn>rules for rendering the cue in isolation</dfn>.</p>
    </dd>
 
   </dl>
 
-  <p>Each <span>text track cue</span> has a corresponding <code>TextTrackCue</code> object. A
-  <span>text track cue</span>'s in-memory representation can be dynamically changed through this
-  <code>TextTrackCue</code> API.</p>
+  <p>Each <span>text track cue</span> has a corresponding <code>TextTrackCue</code> object (or more
+  specifically, an object that inherits from <code>TextTrackCue</code> — for example, WebVTT
+  cues use the <code>WebVTTCue</code> interface). A <span>text track cue</span>'s in-memory
+  representation can be dynamically changed through this <code>TextTrackCue</code> API. <a
+  href="#refsWEBVTT">[WEBVTT]</a></p>
 
+  <p>A <span>text track cue</span> is associated with <span>rules for updating the text track
+  rendering</span>, as defined by the specification for the specific kind of <span>text track
+  cue</span>. These rules are used specifically when the object representing the cue is added to a
+  <code>TextTrack</code> object using the <code title="dom-TextTrack-addCue">addCue()</code>
+  method.</p>
+
   <p>In addition, each <span>text track cue</span> has two pieces of dynamic information:</p>
 
   <dl>
@@ -33174,16 +33051,6 @@
 
   </dl>
 
-  <p>When a <span>text track cue</span> whose <span title="text track cue active flag">active
-  flag</span> is set has its <span title="text track cue writing direction">writing
-  direction</span>, <span title="text track cue snap-to-lines flag">snap-to-lines flag</span>, <span
-  title="text track cue line position">line position</span>, <span title="text track cue text
-  position">text position</span>, <span title="text track cue size">size</span>, <span title="text
-  track cue alignment">alignment</span>, or <span title="text track cue text">text</span> change
-  value, then the user agent must empty the <span>text track cue display state</span>, and then
-  immediately run the <span>text track</span>'s <span>rules for updating the display of WebVTT text
-  tracks</span>.</p>
-
   <p>The <span title="text track cue">text track cues</span> of a <span>media element</span>'s <span
   title="text track">text tracks</span> are ordered relative to each other in the <dfn>text track
   cue order</dfn>, which is determined as follows: first group the <span title="text track
@@ -33732,30 +33599,6 @@
     <p>Should be set to false.</p>
    </dd>
 
-   <dt>The <span>text track cue writing direction</span>
-   <dd>
-    <p>Should be set to <span title="text track cue horizontal writing direction">horizontal</span>
-    if the concept of writing direction doesn't really apply (e.g. the cue consists of a bitmap
-    image).</p>
-   </dd>
-
-   <dt>The <span>text track cue snap-to-lines flag</span>
-   <dd>
-    <p>Should be set to false unless the format uses a rendering and positioning model for cues that
-    is largely consistent with the <span>WebVTT cue text rendering rules</span>.</p>
-   </dd>
-
-   <dt>The <span>text track cue line position</span>
-   <dt>The <span>text track cue text position</span>
-   <dt>The <span>text track cue size</span>
-   <dt>The <span>text track cue alignment</span>
-   <dd>
-    <p>If the format uses a rendering and positioning model for cues that can be largely simulated
-    using the <span>WebVTT cue text rendering rules</span>, then these should be set to the values
-    that would give the same effect for <span>WebVTT</span> cues. Otherwise, they should be set to
-    zero.</p>
-   </dd>
-
   </dl>
 
   </div>
@@ -33966,6 +33809,7 @@
 
    <li>
 
+<!--CLEANUP-->
     <p>Create a new <span>text track</span> corresponding to the new
     object, and set its <span>text track kind</span> to <var
     title="">kind</var>, its <span>text track label</span> to <var
@@ -33974,13 +33818,12 @@
     state</span> to the <span>text track loaded</span> state, its
     <span>text track mode</span> to the <span>text track hidden</span>
     mode, and its <span>text track list of cues</span> to an empty
-    list.
-    Associate the <span>text track list of cues</span> with the
-    <span>rules for updating the display of WebVTT text tracks</span>
-    as its <span>rules for updating the text track rendering</span>.
-    <a href="#refsWEBVTT">[WEBVTT]</a>
-    </p>
+    list.</p>
 
+    <p>Initially, the <span>text track list of cues</span> is not associated with any <span>rules
+    for updating the text track rendering</span>. When a <span>text track cue</span> is added to it,
+    the <span>text track list of cues</span> has its rules permanently set accordingly.</p>
+
    </li>
 
    <li>
@@ -34122,6 +33965,16 @@
 
   <ol>
 
+   <li><p>If the <span>text track list of cues</span> does not yet have any associated <span>rules
+   for updating the text track rendering</span>, then associate the <span>text track list of
+   cues</span> with the <span>rules for updating the text track rendering</span> appropriate to <var
+   title="">cue</var>.</p>
+
+   <li><p>If <span>text track list of cues</span>' associated <span>rules for updating the text
+   track rendering</span> are not the same <span>rules for updating the text track rendering</span>
+   as appropriate for <var title="">cue</var>, then throw an <code>InvalidStateError</code>
+   exception and abort these steps.</p>
+
    <li><p>If the given <var title="">cue</var> is in a <span>text track list of cues</span>, then
    remove <var title="">cue</var> from that <span>text track list of cues</span>.</p></li>
 
@@ -34244,25 +34097,14 @@
 
   <pre class="idl">interface <dfn>TextTrackCue</dfn> : <span>EventTarget</span> {
   readonly attribute <span>TextTrack</span>? <span title="dom-TextTrackCue-track">track</span>;
-           attribute <span>EventHandler</span> <span title="handler-TextTrackCue-onenter">onenter</span>;
-           attribute <span>EventHandler</span> <span title="handler-TextTrackCue-onexit">onexit</span>;
-};
 
-enum <dfn>AutoKeyword</dfn> { "auto" };
-[<span title="dom-TextTrackCue">Constructor</span>(double startTime, double endTime, DOMString text)]
-interface <dfn>WebVTTCue</dfn> : <span>TextTrackCue</span> {
            attribute DOMString <span title="dom-TextTrackCue-id">id</span>;
            attribute double <span title="dom-TextTrackCue-startTime">startTime</span>;
            attribute double <span title="dom-TextTrackCue-endTime">endTime</span>;
            attribute boolean <span title="dom-TextTrackCue-pauseOnExit">pauseOnExit</span>;
-           attribute DOMString <span title="dom-TextTrackCue-vertical">vertical</span>;
-           attribute boolean <span title="dom-TextTrackCue-snapToLines">snapToLines</span>;
-           attribute (long or <span>AutoKeyword</span>) <span title="dom-TextTrackCue-line">line</span>;
-           attribute long <span title="dom-TextTrackCue-position">position</span>;
-           attribute long <span title="dom-TextTrackCue-size">size</span>;
-           attribute DOMString <span title="dom-TextTrackCue-align">align</span>;
-           attribute DOMString <span title="dom-TextTrackCue-text">text</span>;
-  <span>DocumentFragment</span> <span title="dom-TextTrackCue-getCueAsHTML">getCueAsHTML</span>();
+
+           attribute <span>EventHandler</span> <span title="handler-TextTrackCue-onenter">onenter</span>;
+           attribute <span>EventHandler</span> <span title="handler-TextTrackCue-onexit">onexit</span>;
 };</pre>
 
   <dl class="domintro">
@@ -34274,15 +34116,6 @@
     otherwise.</p>
    </dd>
 
-
-   <dt><var title="">cue</var> = new <code title="dom-TextTrackCue">WebVTTCue</code>( <var title="">startTime</var>, <var title="">endTime</var>, <var title="">text</var> )</dt>
-   <dd>
-    <p>Returns a new <code>TextTrackCue</code> object, for use with the <code title="dom-TextTrack-addCue">addCue()</code> method.</p>
-    <p>The <var title="">startTime</var> argument sets the <span>text track cue start time</span>.</p>
-    <p>The <var title="">endTime</var> argument sets the <span>text track cue end time</span>.</p>
-    <p>The <var title="">text</var> argument sets the <span>text track cue text</span>.</p>
-   </dd>
-
    <dt><var title="">cue</var> . <span title="dom-TextTrackCue-id">id</span> [ = <var title="">value</var> ]</dt>
    <dd>
     <p>Returns the <span>text track cue identifier</span>.</p>
@@ -34307,139 +34140,11 @@
     <p>Can be set.</p>
    </dd>
 
-   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-vertical">vertical</span> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns a string representing the <span>text track cue writing direction</span>, as follows:</p>
-    <dl class="switch">
-     <dt>If it is <span title="text track cue horizontal writing direction">horizontal</span></dt>
-     <dd><p>The empty string.</p></dd>
-     <dt>If it is <span title="text track cue vertical growing left writing direction">vertical growing left</span></dt>
-     <dd><p>The string "<code title="">rl</code>".</p></dd>
-     <dt>If it is <span title="text track cue vertical growing right writing direction">vertical growing right</span></dt>
-     <dd><p>The string "<code title="">lr</code>".</p></dd>
-    </dl>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-snapToLines">snapToLines</span> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns true if the <span>text track cue snap-to-lines flag</span> is set, false otherwise.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-line">line</span> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns the <span>text track cue line position</span>. In the
-    case of the value being <span title="text track cue automatic line
-    position">auto</span>, the string "<code title="">auto</code>" is
-    returned.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-position">position</span> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns the <span>text track cue text position</span>.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-size">size</span> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns the <span>text track cue size</span>.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-align">align</span> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns a string representing the <span>text track cue alignment</span>, as follows:</p>
-    <dl class="switch">
-     <dt>If it is <span title="text track cue start alignment">start alignment</span></dt>
-     <dd><p>The string "<code title="">start</code>".</p></dd>
-     <dt>If it is <span title="text track cue middle alignment">middle alignment</span></dt>
-     <dd><p>The string "<code title="">middle</code>".</p></dd>
-     <dt>If it is <span title="text track cue end alignment">end alignment</span></dt>
-     <dd><p>The string "<code title="">end</code>".</p></dd>
-     <dt>If it is <span title="text track cue left alignment">left alignment</span></dt>
-     <dd><p>The string "<code title="">left</code>".</p></dd>
-     <dt>If it is <span title="text track cue right alignment">right alignment</span></dt>
-     <dd><p>The string "<code title="">right</code>".</p></dd>
-    </dl>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-text">text</span> [ = <var title="">value</var> ]</dt>
-   <dd>
-    <p>Returns the <span>text track cue text</span> in raw unparsed form.</p>
-    <p>Can be set.</p>
-   </dd>
-
-   <dt><var title="">fragment</var> = <var title="">cue</var> . <span title="dom-TextTrackCue-getCueAsHTML">getCueAsHTML</span>()</dt>
-   <dd>
-    <p>Returns the <span>text track cue text</span> as a <code>DocumentFragment</code> of <span>HTML elements</span> and other DOM nodes.</p>
-   </dd>
-
   </dl>
 
   <div class="impl">
 
-  <p>The <dfn title="dom-TextTrackCue"><code>TextTrackCue(<var
-  title="">startTime</var>, <var title="">endTime</var>, <var
-  title="">text</var>)</code></dfn> constructor, when invoked, must
-  run the following steps:</p>
-
-  <ol>
-
-   <li><p>Create a new <span>text track cue</span>. Let <var
-   title="">cue</var> be that <span>text track cue</span>.</p></li>
-
-   <li><p>Let <var title="">cue</var>'s <span>text track cue start
-   time</span> be the value of the <var title="">startTime</var>
-   argument, interpreted as a time in seconds.</p></li>
-
-   <li><p>Let <var title="">cue</var>'s <span>text track cue end
-   time</span> be the value of the <var title="">endTime</var>
-   argument, interpreted as a time in seconds.</p></li>
-
-   <li><p>Let <var title="">cue</var>'s <span>text track cue
-   text</span> be the value of the <var title="">text</var> argument,
-   and let the rules for its interpretation be the <span>WebVTT cue
-   text parsing rules</span>, the <span>WebVTT cue text rendering
-   rules</span>, and the <span>WebVTT cue text DOM construction
-   rules</span>. <a href="#refsWEBVTT">[WEBVTT]</a></p></li>
-
-   <!-- default settings -->
-
-   <li><p>Let <var title="">cue</var>'s <span>text track cue
-   identifier</span> be the empty string.</p></li>
-
-   <li><p>Let <var title="">cue</var>'s <span>text track cue
-   pause-on-exit flag</span> be false.</p></li>
-
-   <li><p>Let <var title="">cue</var>'s <span>text track cue
-   writing direction</span> be <span title="text track cue
-   horizontal writing direction">horizontal</span>.</p></li>
-
-   <li><p>Let <var title="">cue</var>'s <span>text track cue
-   snap-to-lines flag</span> be true.</p></li>
-
-   <li><p>Let <var title="">cue</var>'s <span>text track cue line
-   position</span> be <span title="text track cue automatic line
-   position">auto</span>.</p></li>
-
-   <li><p>Let <var title="">cue</var>'s <span>text track cue
-   text position</span> be 50.</p></li>
-
-   <li><p>Let <var title="">cue</var>'s <span>text track cue
-   size</span> be 100.</p></li>
-
-   <li><p>Let <var title="">cue</var>'s <span>text track cue
-   alignment</span> be <span title="text track cue middle
-   alignment">middle alignment</span>.</p></li>
-
-   <li><p>Return the <code>TextTrackCue</code> object representing
-   <var title="">cue</var>.</p></li>
-
-  </ol>
-
+<!--CLEANUP-->
   <p>The <dfn title="dom-TextTrackCue-track"><code>track</code></dfn>
   attribute, on getting, must return the <code>TextTrack</code> object
   of the <span>text track</span> in whose <span title="text track list
@@ -34476,96 +34181,12 @@
   flag</span> must be set if the new value is true, and must be unset
   otherwise.</p>
 
-  <p>The <dfn
-  title="dom-TextTrackCue-vertical"><code>vertical</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 <span>text
-  track cue writing direction</span> of the <span>text track
-  cue</span> that the <code>TextTrackCue</code> object represents:</p>
-
-  <table>
-   <thead>
-    <tr> <th> <span>Text track cue writing direction</span>
-         <th> <code title="dom-TextTrackCue-direction">direction</code> value
-   <tbody>
-    <tr> <td> <span title="text track cue horizontal writing direction">Horizontal</span>
-         <td> "<code title=""></code>" (the empty string)
-    <tr> <td> <span title="text track cue vertical growing left writing direction">Vertical growing left</span>
-         <td> "<code title="">rl</code>"
-    <tr> <td> <span title="text track cue vertical growing right writing direction">Vertical growing right</span>
-         <td> "<code title="">lr</code>"
-  </table>
-
-  <p>On setting, the <span>text track cue writing direction</span> must be set to the value given in
-  the first cell of the row in the table above whose second cell is a <span>case-sensitive</span>
-  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>
-
-  <p>The <dfn title="dom-TextTrackCue-snapToLines"><code>snapToLines</code></dfn> attribute, on
-  getting, must return true if the <span>text track cue snap-to-lines flag</span> of the <span>text
-  track cue</span> that the <code>TextTrackCue</code> object represents is set; or false otherwise.
-  On setting, the <span>text track cue snap-to-lines flag</span> must be set if the new value is
-  true, and must be unset otherwise.</p>
-
-  <p>The <dfn title="dom-TextTrackCue-line"><code>line</code></dfn> attribute, on getting, must
-  return the <span>text track cue line position</span> of the <span>text track cue</span> that the
-  <code>TextTrackCue</code> object represents. The special value <span title="text track cue
-  automatic line position">auto</span> must be represented as the string "<code
-  title="">auto</code>". On setting, the <span>text track cue line position</span> must be set to
-  the new value; if the new value is the string "<code title="">auto</code>", then it must be
-  interpreted as the special value <span title="text track cue automatic line
-  position">auto</span>.</p>
-
-  <p>The <dfn title="dom-TextTrackCue-position"><code>position</code></dfn> attribute, on getting,
-  must return the <span>text track cue text position</span> of the <span>text track cue</span> that
-  the <code>TextTrackCue</code> object represents. On setting, if the new value is negative or
-  greater than 100, then an <code>IndexSizeError</code> exception must be thrown. Otherwise, the
-  <span>text track cue text position</span> must be set to the new value.</p>
-
-  <p>The <dfn title="dom-TextTrackCue-size"><code>size</code></dfn> attribute, on getting, must
-  return the <span>text track cue size</span> of the <span>text track cue</span> that the
-  <code>TextTrackCue</code> object represents. On setting, if the new value is negative or greater
-  than 100, then an <code>IndexSizeError</code> exception must be thrown. Otherwise, the <span>text
-  track cue size</span> must be set to the new value.</p>
-
-  <p>The <dfn title="dom-TextTrackCue-align"><code>align</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
-  <span>text track cue alignment</span> of the <span>text track cue</span> that the
-  <code>TextTrackCue</code> object represents:</p>
-
-  <table>
-   <thead>
-    <tr> <th><span>Text track cue alignment</span> <th> <code title="dom-TextTrackCue-align">align</code> value
-   <tbody>
-    <tr> <td><span title="text track cue start alignment">Start alignment</span> <td> "<code title="">start</code>"
-    <tr> <td><span title="text track cue middle alignment">Middle alignment</span> <td> "<code title="">middle</code>"
-    <tr> <td><span title="text track cue end alignment">End alignment</span> <td> "<code title="">end</code>"
-    <tr> <td><span title="text track cue left alignment">Left alignment</span> <td> "<code title="">left</code>"
-    <tr> <td><span title="text track cue right alignment">Right alignment</span> <td> "<code title="">right</code>"
-  </table>
-
-  <p>On setting, the <span>text track cue alignment</span> must be set to the value given in the
-  first cell of the row in the table above whose second cell is a <span>case-sensitive</span> 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>
-
-  <p>The <dfn title="dom-TextTrackCue-text"><code>text</code></dfn> attribute, on getting, must
-  return the raw <span>text track cue text</span> of the <span>text track cue</span> that the
-  <code>TextTrackCue</code> object represents. On setting, the <span>text track cue text</span> must
-  be set to the new value.</p>
-
-  <p>The <dfn title="dom-TextTrackCue-getCueAsHTML"><code>getCueAsHTML()</code></dfn> method must
-  convert the <span>text track cue text</span> to a <code>DocumentFragment</code> for the
-  <span>script's document</span> of the <span>entry script</span>, using the appropriate rules for
-  doing so. For example, for <span>WebVTT</span>, those rules are the <span>WebVTT cue text parsing
-  rules</span> and the <span>WebVTT cue text DOM construction rules</span>. <a
-  href="#refsWEBVTT">[WEBVTT]</a></p>
-
   </div>
 
 
   <h6>Text tracks describing chapters</h6>
 
+<!--CLEANUP-->
   <p>Chapters are segments of a <span>media resource</span> with a
   given title. Chapters can be nested, in the same way that sections
   in a document outline can have subsections.</p>
@@ -34636,9 +34257,14 @@
    cue start time</span>, whose end time is <var title="">current
    cue</var>'s <span>text track cue end time</span>, whose title is
    <var title="">current cue</var>'s <span>text track cue text</span>
-   interpreted according to its rules for interpretation, and whose
-   list of nested chapters is empty.</p></li>
+   interpreted according to its <span>rules for rendering the cue in isolation</span>, and whose
+   list of nested chapters is empty.</p>
 
+    <p class="note">For WebVTT, the <span>rules for rendering the cue in isolation</span> are the
+    <span>rules for interpreting WebVTT cue text</span>. <a href="#refsWEBVTT">[WEBVTT]</a></p>
+
+   </li>
+
    <li><p>Append <var title="">new chapter</var> to <var
    title="">current chapter</var>'s list of nested chapters, and let
    <var title="">current chapter</var> be <var title="">new
@@ -34751,8 +34377,7 @@
   </div>
 
 <!--END complete-->
-  <h5>WebVTT</h5>
-<!--FIXUP dev-html +4-->
+
 <!--START webvtt-->
 
   <!-- v2 feature requests:
@@ -34775,7 +34400,7 @@
 
   <h2>Introduction</h2>
 
-  <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+  <p><i>This section is non-normative.</i></p>
 
   <p>The <dfn>WebVTT</dfn> format (Web Video Text Tracks) is a
   format intended for marking up external text track resources.</p>
@@ -34828,7 +34453,7 @@
 
   <h3>Cues with multiple lines</h3>
 
-  <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+  <p><i>This section is non-normative.</i></p>
 
   <p>Line breaks in cues are honored. User agents will also insert extra line breaks if necessary to
   fit the cue in the cue's width. In general, therefore, authors are encouraged to write cues all on
@@ -34896,7 +34521,7 @@
 
   <h3>Comments</h3>
 
-  <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+  <p><i>This section is non-normative.</i></p>
 
   <p>Comments can be included in WebVTT files.</p>
 
@@ -34951,7 +34576,7 @@
 
   <h3>Other features</h3>
 
-  <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+  <p><i>This section is non-normative.</i></p>
 
   <p>WebVTT also supports some less-often used features.</p>
 
@@ -35008,7 +34633,6 @@
   </div>
 
 
-<!--END dev-html-->
   <h2>Conformance</h2>
 
   <p class="XXX">This section remains to be written. In the meantime, please see the HTML standard. <a href="#refsHTML">[HTML]</a></p>
@@ -35042,32 +34666,180 @@
    <li><dfn>Text track cue identifier</dfn>
    <li><dfn>Text track cue start time</dfn>
    <li><dfn>Text track cue end time</dfn>
-   <li><dfn>Text track cue alignment</dfn>
-   <li><dfn>Text track cue start alignment</dfn>
-   <li><dfn>Text track cue middle alignment</dfn>
-   <li><dfn>Text track cue end alignment</dfn>
-   <li><dfn>Text track cue left alignment</dfn>
-   <li><dfn>Text track cue right alignment</dfn>
-   <li><dfn>Text track cue line position</dfn>
-   <li><dfn>Text track cue automatic line position</dfn>
-   <li><dfn>Text track cue computed line position</dfn>
    <li><dfn>Text track cue pause-on-exit flag</dfn>
-   <li><dfn>Text track cue size</dfn>
-   <li><dfn>Text track cue snap-to-lines flag</dfn>
-   <li><dfn>Text track cue text position</dfn>
-   <li><dfn>Text track cue writing direction</dfn>
-   <li><dfn>Text track cue horizontal writing direction</dfn>
-   <li><dfn>Text track cue vertical growing right writing direction</dfn>
-   <li><dfn>Text track cue vertical growing left writing direction</dfn>
    <li><dfn>Text track cue text</dfn>
    <li><dfn>Text track cue active flag</dfn>
    <li><dfn>Text track cue display state</dfn>
    <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
   </ul>
 
+
+  <h2>Data model</h2>
+
+  <p>WebVTT cues are HTML <span title="text track cue">text track cues</span> that additionally
+  consist of the following: <a href="#refsHTML">[HTML]</a></p>
+
+  <dl>
+
+   <dt><dfn title="text track cue writing direction">A writing direction</dfn>
+   <dd>
+    <p>A writing direction, either <dfn title="text track cue horizontal writing
+    direction">horizontal</dfn> (a line extends horizontally and is positioned vertically, with
+    consecutive lines displayed below each other), <dfn title="text track cue vertical growing left
+    writing direction">vertical growing left</dfn> (a line extends vertically and is positioned
+    horizontally, with consecutive lines displayed to the left of each other<!-- used for east
+    asian-->), or <dfn title="text track cue vertical growing right writing direction">vertical
+    growing right</dfn> (a line extends vertically and is positioned horizontally, with consecutive
+    lines displayed to the right of each other<!-- used for mongolian -->).</p>
+
+    <p>If the <span title="text track cue writing direction">writing direction</span> is <span
+    title="text track cue horizontal writing direction">horizontal</span>, then <span title="text
+    track cue line position">line position</span> percentages are relative to the height of the
+    video, and <span title="text track cue text position">text position</span> and <span title="text
+    track cue size">size</span> percentages are relative to the width of the video.</p>
+
+    <p>Otherwise, <span title="text track cue line position">line position</span> percentages are
+    relative to the width of the video, and <span title="text track cue text position">text
+    position</span> and <span title="text track cue size">size</span> percentages are relative to
+    the height of the video.</p>
+   </dd>
+
+   <dt><dfn title="text track cue snap-to-lines flag">A snap-to-lines flag</dfn>
+   <dd>
+
+    <p>A boolean indicating whether the <span title="text track cue line position">line's
+    position</span> is a line position (positioned to a multiple of the line dimensions of the first
+    line of the cue), or whether it is a percentage of the dimension of the video.</p>
+
+    <p>Cues whose <span>text track cue snap-to-lines flag</span> is set will be placed within the
+    title-safe area on user agents that use overscan. Cues with the flag unset will be positioned as
+    requested (modulo overlap avoidance if multiple cues are in the same place).</p>
+
+   </dd>
+
+   <dt><dfn title="text track cue line position">A line position</dfn>
+   <dd>
+    <p>Either a number giving the position of the lines of the cue, to be interpreted as defined by
+    the <span title="text track cue writing direction">writing direction</span> and <span
+    title="text track cue snap-to-lines flag">snap-to-lines flag</span> of the cue, or the special
+    value <dfn title="text track cue automatic line position">auto</dfn>, which means the position
+    is to depend on the other active tracks.</p>
+
+    <p>A <span>text track cue</span> has a <dfn>text track cue computed line position</dfn> whose
+    value is that returned by the following algorithm, which is defined in terms of the other
+    aspects of the cue:</p>
+
+    <ol>
+
+     <li><p>If the <span>text track cue line position</span> is numeric, the <span>text track cue
+     snap-to-lines flag</span> of the <span>text track cue</span> is not set, and the <span>text
+     track cue line position</span> is negative or greater than 100, then return 100 and abort these
+     steps.</p></li>
+
+     <li><p>If the <span>text track cue line position</span> is numeric, return the value of the
+     <span>text track cue line position</span> and abort these steps. (Either the <span>text track
+     cue snap-to-lines flag</span> is set, so any value, not just those in the range 0..100, is
+     valid, or the value is in the range 0..100 and is thus valid regardless of the value of that
+     flag.)</p></li>
+
+     <li><p>If the <span>text track cue snap-to-lines flag</span> of the <span>text track cue</span>
+     is not set, return the value 100 and abort these steps. (The <span>text track cue line
+     position</span> is the special value <span title="text track cue automatic line
+     position">auto</span>.)</p></li>
+
+     <li><p>Let <var title="">cue</var> be the <span>text track cue</span>.</p></li>
+
+     <li><p>If <var title="">cue</var> is not in a <span title="text track list of cues">list of
+     cues</span> of a <span>text track</span>, or if that <span>text track</span> is not in the
+     <span>list of text tracks</span> of a <span>media element</span>, return &#x2212;1 and abort
+     these steps.</p></li>
+
+     <li><p>Let <var title="">track</var> be the <span>text track</span> whose <span title="text
+     track list of cues">list of cues</span> the <var title="">cue</var> is in.</p></li>
+
+     <li><p>Let <var title="">n</var> be the number of <span title="text track">text tracks</span>
+     whose <span>text track mode</span> is <span title="text track showing">showing</span> and that
+     are in the <span>media element</span>'s <span>list of text tracks</span> before <var
+     title="">track</var>.</p></li>
+
+     <li><p>Increment <var title="">n</var> by one.</p></li>
+
+     <li><p>Negate <var title="">n</var>.</p></li>
+
+     <li><p>Return <var title="">n</var>.</p></li>
+
+    </ol>
+
+   </dd>
+
+   <dt><dfn title="text track cue text position">A text position</dfn>
+   <dd>
+    <p>A number giving the position of the text of the cue within each line, to be interpreted as a
+    percentage of the video, as defined by the <span title="text track cue writing
+    direction">writing direction</span>.</p>
+   </dd>
+
+   <dt><dfn title="text track cue size">A size</dfn>
+   <dd>
+    <p>A number giving the size of the box within which the text of each line of the cue is to be
+    aligned, to be interpreted as a percentage of the video, as defined by the <span title="text
+    track cue writing direction">writing direction</span>.</p>
+   </dd>
+
+   <dt><dfn title="text track cue alignment">An alignment</dfn>
+   <dd>
+
+    <p>An alignment for the text of each line of the cue, one of:</p>
+
+    <dl>
+
+     <dt><dfn title="text track cue start alignment">Start alignment</dfn></dt>
+     <dd>The text is aligned towards its start side.</dd>
+
+     <dt><dfn title="text track cue middle alignment">Middle alignment</dfn></dt>
+     <dd>The text is aligned centered between its start and end sides.</dd>
+
+     <dt><dfn title="text track cue end alignment">End alignment</dfn></dt>
+     <dd>The text is aligned towards its end side.</dd>
+
+     <dt><dfn title="text track cue left alignment">Left alignment</dfn></dt>
+     <dd>The text is aligned to the left.</dd>
+
+     <dt><dfn title="text track cue right alignment">Right alignment</dfn></dt>
+     <dd>The text is aligned to the right.</dd>
+
+    </dl>
+
+    <p>Which sides are the start and end sides depends on the Unicode bidirectional algorithm and
+    the <span title="text track cue writing direction">writing direction</span>. <a
+    href="#refsBIDI">[BIDI]</a></p>
+
+   </dd>
+
+  </dl>
+
+  <p>The associated <span>rules for updating the text track rendering</span> of WebVTT <span
+  title="text track cue">text track cues</span> are the <span>rules for updating the display of
+  WebVTT text tracks</span>.</p>
+
+  <div class="impl">
+
+  <p>When a WebVTT <span>text track cue</span> whose <span title="text track cue active flag">active
+  flag</span> is set has its <span title="text track cue writing direction">writing
+  direction</span>, <span title="text track cue snap-to-lines flag">snap-to-lines flag</span>, <span
+  title="text track cue line position">line position</span>, <span title="text track cue text
+  position">text position</span>, <span title="text track cue size">size</span>, <span title="text
+  track cue alignment">alignment</span>, or <span title="text track cue text">text</span> change
+  value, then the user agent must empty the <span>text track cue display state</span>, and then
+  immediately run the <span>text track</span>'s <span>rules for updating the display of WebVTT text
+  tracks</span>.</p>
+
+  </div>
+
+
   <h2>The WebVTT file format</h2>
-<!--START dev-html-->
-<!--FIXUP dev-html -1-->
 
   <h3>Syntax</h3>
 
@@ -35388,7 +35160,7 @@
   <p class="note">A <span>WebVTT vertical text cue setting</span>
   configures the cue to use vertical text layout rather than
   horizontal text layout. Vertical text layout is sometimes used in
-  Japanese, for example. The default is horiontal layout.</p>
+  Japanese, for example. The default is horizontal layout.</p>
 
   <p>A <dfn>WebVTT line position cue setting</dfn> consists of the
   following components, in the order given:</p>
@@ -35971,12 +35743,9 @@
 
    <li><p>Return to the step labeled <i>cue text loop</i>.</p></li>
 
-   <li><p><i>Cue text processing</i>: Let the <span>text track cue
-   text</span> of <var title="">cue</var> be <var title="">cue
-   text</var>, and let the rules for its interpretation be the
-   <span>WebVTT cue text parsing rules</span>, the <span>WebVTT cue
-   text rendering rules</span>, and the <span>WebVTT cue text DOM
-   construction rules</span>.</p></li>
+   <li><p><i>Cue text processing</i>: Let the <span>text track cue text</span> of <var
+   title="">cue</var> be <var title="">cue text</var>, and let the <span>rules for rendering the cue
+   in isolation</span> be the <span>rules for interpreting WebVTT cue text</span>.</p></li>
 
    <li><p>Add <var title="">cue</var> to the <span>text track list of
    cues</span> <var title="">output</var>.</p></li>
@@ -37357,9 +37126,1565 @@
 
   </div>
 
-<!--FIXUP dev-html -3-->
+
+  <h2>Rendering</h2>
+
+  <h3>Cues in isolation</h3>
+
+  <p>The <dfn>rules for interpreting WebVTT cue text</dfn> (e.g. for use as chapter titles) are as
+  follows:</p>
+
+  <ol>
+
+   <li><p>Let <var title="">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 title="">cue</var>'s
+   <span>text track cue text</span>.</p>
+
+   <li><p class="XXX">... <!-- flatten nodes and return a single string somehow -->
+
+  </ol>
+
+  <h3>Cues with video</h3>
+
+  <h4>Processing model</h4>
+
+  <p>The <dfn>rules for updating the display of WebVTT text
+  tracks</dfn> render the <span title="text track">text
+  tracks</span> of a <span>media element</span> (specifically, a
+  <code>video</code> element), or of another playback mechanism, by
+  applying the steps below. All the <span title="text track">text
+  tracks</span> that use these rules for a given <span>media
+  element</span>, or other playback mechanism, are rendered together,
+  to avoid overlapping subtitles from multiple tracks.</p>
+
+  <p>The output of the steps below is a set of CSS boxes that covers
+  the rendering area of the <span>media element</span> or other
+  playback mechanism, which user agents are expected to render in a
+  manner suiting the user.</p>
+
+  <p>The rules are as follows:</p>
+
+  <ol>
+
+   <li><p>If the <span>media element</span> is an <code>audio</code>
+   element, or is another playback mechanism with no rendering area,
+   abort these steps. There is nothing to render.</p></li>
+
+   <li><p>Let <var title="">video</var> be the <span>media
+   element</span> or other playback mechanism.</p></li>
+
+   <li><p>Let <var title="">output</var> be an empty list of
+   absolutely positioned CSS block boxes.</p></li>
+
+   <li><p>If the user agent is <span title="expose a user interface to
+   the user">exposing a user interface</span> for <var
+   title="">video</var>, add to <var title="">output</var> one or more
+   completely transparent positioned CSS block boxes that cover the
+   same region as the user interface.</p>
+
+   <li><p>If the last time these rules were run, the user agent was
+   not <span title="expose a user interface to the user">exposing a
+   user interface</span> for <var title="">video</var>, but now it is,
+   optionally let <var title="">reset</var> be true. Otherwise, let <var
+   title="">reset</var> be false.</p>
+
+   <li><p>Let <var title="">tracks</var> be the subset of <var
+   title="">video</var>'s <span>list of text tracks</span> that have
+   as their <span>rules for updating the text track rendering</span>
+   these <span>rules for updating the display of WebVTT text
+   tracks</span>, and whose <span>text track mode</span> is <span
+   title="text track showing">showing</span>.</p></li>
+
+   <li><p>Let <var title="">cues</var> be an empty list of <span
+   title="text track cue">text track cues</span>.</p></li>
+
+   <li><p>For each track <var title="">track</var> in <var
+   title="">tracks</var>, append to <var title="">cues</var> all the
+   <span title="text track cue">cues</span> from <var
+   title="">track</var>'s <span title="text track list of cues">list
+   of cues</span> that have their <span>text track cue active
+   flag</span> set.</p></li>
+
+   <li><p>If <var title="">reset</var> is false, then, for each
+   <span>text track cue</span> <var title="">cue</var> in <var
+   title="">cues</var>: if <var title="">cue</var>'s <span>text track
+   cue display state</span> has a set of CSS boxes, then add those
+   boxes to <var title="">output</var>, and remove <var
+   title="">cue</var> from <var title="">cues</var>.</p></li>
+
+   <li>
+
+    <p>For each <span>text track cue</span> <var title="">cue</var>
+    in <var title="">cues</var> that has not yet had corresponding CSS
+    boxes added to <var title="">output</var>, in <span>text track
+    cue order</span>, run the following substeps:</p>
+
+    <ol>
+
+     <li><p>Let <var title="">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 title="">cue</var>'s
+     <span>text track cue text</span>.</p>
+
+     <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 title="">nodes</var>, in a pre-order,
+      depth-first traversal, excluding <span title="WebVTT Ruby Text
+      Object">WebVTT Ruby Text Objects</span> 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>
+
+     <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 title="">direction</var> be 'ltr',
+      otherwise, let it be 'rtl'.</p>
+
+     </li>
+
+     <li><p>If the <span>text track cue writing direction</span> is
+     <span title="text track cue horizontal writing
+     direction">horizontal</span>, then let <var
+     title="">writing-mode</var> be 'horizontal-tb'. Otherwise, if the
+     <span>text track cue writing direction</span> is <span
+     title="text track cue vertical growing left writing
+     direction">vertical growing left</span>, then let <var
+     title="">writing-mode</var> be 'vertical-rl'. Otherwise, the
+     <span>text track cue writing direction</span> is <span
+     title="text track cue vertical growing right writing
+     direction">vertical growing right</span>; let <var
+     title="">writing-mode</var> be 'vertical-lr'.</p></li>
+
+     <li>
+
+      <p>Determine the value of <var title="">maximum size</var> for
+      <var title="">cue</var> as per the appropriate rules from the
+      following list:</p>
+
+      <dl class="switch">
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>,
+              and <var title="">direction</var> is 'ltr'</dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>,
+              and <var title="">direction</var> is 'rtl'</dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+          and the <span>text track cue alignment</span> is <span title="text track cue left alignment">left</span></dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
+              and the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>
+              or <span title="text track cue left alignment">left</span></dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
+              and the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>
+              or <span title="text track cue left alignment">left</span></dt>
+       <dd>
+        <p>Let <var title="">maximum size</var> be the <span>text track cue text position</span> subtracted from 100.</p>
+       </dd>
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>,
+              and <var title="">direction</var> is 'ltr'</dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>,
+              and <var title="">direction</var> is 'rtl'</dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+          and the <span>text track cue alignment</span> is <span title="text track cue right alignment">right</span></dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
+              and the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>
+              or <span title="text track cue right alignment">right</span></dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
+              and the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>
+              or <span title="text track cue right alignment">right</span></dt>
+       <dd>
+        <p>Let <var title="">maximum size</var> be the <span>text track cue text position</span>.</p>
+       </dd>
+
+       <dt>If the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span>,
+              the <span>text track cue text position</span> is less than or equal to 50</dt>
+       <dd>
+        <p>Let <var title="">maximum size</var> be the <span>text track cue text position</span> multiplied by two.</p>
+       </dd>
+
+       <dt>If the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span>,
+              the <span>text track cue text position</span> is greater than <!-- or equal to --> 50</dt>
+       <dd>
+        <p>Let <var title="">maximum size</var> be the result of subtracting <span>text track cue text position</span> from 100 and then multiplying the result by two.</p>
+       </dd>
+
+      </dl>
+
+     </li>
+
+     <li><p>If the <span>text track cue size</span> is less than <var
+     title="">maximum size</var>, then let <var title="">size</var> be
+     <span>text track cue size</span>. Otherwise, let <var
+     title="">size</var> be <var title="">maximum size</var>.</p></li>
+
+     <li><p>If the <span>text track cue writing direction</span> is
+     <span title="text track cue horizontal writing
+     direction">horizontal</span>, then let <var title="">width</var>
+     be '<var title="">size</var>&#x2009;vw' and <var
+     title="">height</var> be 'auto'. Otherwise, let <var
+     title="">width</var> be 'auto' and <var title="">height</var> be
+     '<var title="">size</var>&#x2009;vh'. (These are CSS values used
+     by the next section to set CSS properties for the rendering; 'vw'
+     and 'vh' are CSS units.) <a
+     href="#refsCSSVALUES">[CSSVALUES]</a></p></li>
+
+     <li>
+
+      <p>Determine the value of <var title="">x-position</var> or <var
+      title="">y-position</var> for <var title="">cue</var> as per the
+      appropriate rules from the following list:</p>
+
+      <dl class="switch">
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>,
+              and <var title="">direction</var> is 'ltr'</dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue left alignment">left</span>,
+              and <var title="">direction</var> is 'ltr'</dt>
+       <dd>
+        <p>Let <var title="">x-position</var> be the <span>text track cue text position</span>.</p>
+       </dd>
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>,
+              and <var title="">direction</var> is 'rtl'</dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue left alignment">left</span>,
+              and <var title="">direction</var> is 'rtl'</dt>
+       <dd>
+        <p>Let <var title="">x-position</var> be the <span>text track cue text position</span> subtracted from 100.</p>
+       </dd>
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>,
+              and <var title="">direction</var> is 'ltr'</dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue right alignment">right</span>,
+              and <var title="">direction</var> is 'ltr'</dt>
+       <dd>
+        <p>Let <var title="">x-position</var> be the <span>text track cue text position</span> minus <var title="">size</var>.</p>
+       </dd>
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>,
+              and <var title="">direction</var> is 'rtl'</dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue right alignment">right</span>,
+              and <var title="">direction</var> is 'rtl'</dt>
+       <dd>
+        <p>Let <var title="">x-position</var> be the <span>text track cue text position</span> subtracted from 100, minus <var title="">size</var>.</p>
+       </dd>
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
+              and the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>
+              or <span title="text track cue left alignment">left</span></dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
+              and the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>
+              or <span title="text track cue left alignment">left</span></dt>
+       <dd>
+        <p>Let <var title="">y-position</var> be the <span>text track cue text position</span>.</p>
+       </dd>
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
+              and the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>
+              or <span title="text track cue right alignment">right</span></dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
+              and the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>
+              or <span title="text track cue right alignment">right</span></dt>
+       <dd>
+        <p>Let <var title="">y-position</var> be the <span>text track cue text position</span> minus <var title="">size</var>.</p>
+       </dd>
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span>,
+              and <var title="">direction</var> is 'ltr'</dt>
+       <dd>
+        <p>Let <var title="">x-position</var> be the <span>text track cue text position</span> minus half of <var title="">size</var>.</p>
+       </dd>
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span>,
+              and <var title="">direction</var> is 'rtl'</dt>
+       <dd>
+        <p>Let <var title="">x-position</var> be the <span>text track cue text position</span> subtracted from 100, minus half of <var title="">size</var>.</p>
+       </dd>
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
+              and the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span></dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
+              and the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span></dt>
+       <dd>
+        <p>Let <var title="">y-position</var> be the <span>text track cue text position</span> minus half of <var title="">size</var>.</p>
+       </dd>
+
+      </dl>
+
+     </li>
+
+     <li>
+
+      <p>Determine the value of whichever of <var
+      title="">x-position</var> or <var title="">y-position</var> is
+      not yet calculated for <var title="">cue</var> as per the
+      appropriate rules from the following list:</p>
+
+      <dl class="switch">
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              and the <span>text track cue snap-to-lines flag</span> is set</dt>
+       <dd>
+        <p>Let <var title="">y-position</var> be zero.</p>
+       </dd>
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+              and the <span>text track cue snap-to-lines flag</span> is not set</dt>
+       <dd>
+        <p>Let <var title="">y-position</var> be the <span>text track cue computed line position</span>.</p>
+       </dd>
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
+              and the <span>text track cue snap-to-lines flag</span> is set</dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
+              and the <span>text track cue snap-to-lines flag</span> is set</dt>
+       <dd>
+        <p>Let <var title="">x-position</var> be zero.</p>
+       </dd>
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
+              and the <span>text track cue snap-to-lines flag</span> is not set</dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
+              and the <span>text track cue snap-to-lines flag</span> is not set</dt>
+       <dd>
+        <p>Let <var title="">x-position</var> be the <span>text track cue computed line position</span>.</p>
+       </dd>
+
+      </dl>
+
+      <p class="note">These are not final positions, they are merely
+      temporary positions used to calculate box dimensions below.</p>
+
+     </li>
+
+     <li>
+
+      <p>If the <span>text track cue snap-to-lines flag</span> is set, then run the appropriate
+      steps from the following list:</p>
+
+      <dl class="switch">
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span></dt>
+       <dd>
+
+        <ol>
+
+         <li><p>Let <var title="">edge margin</var> be a user-agent-defined horizontal length,
+         expressed as a percentage of the width of the <var title="">video</var>'s rendering area,
+         which will be used to define a margin at the left and right edges of the video into which
+         this cue will not be placed. In situations with overscan, this margin should be sufficient
+         to place the cue within the title-safe area. In the absence of overscan, this value should
+         be picked for aesthetics (to avoid text being aligned precisely on the left or right edge
+         of the video, which can be ugly).</p></li>
+
+         <li><p>If <var title="">x-position</var> is less than <var title="">edge margin</var> and
+         the sum of <var title="">x-position</var> and <var title="">size</var> is more than <var
+         title="">edge margin</var>, then increase <var title="">x-position</var> by <var
+         title="">edge margin</var> and decrease <var title="">size</var> by the same
+         amount.</p></li>
+
+         <li><p>Let <var title="">right margin edge</var> be 100 minus <var title="">edge
+         margin</var>.</p></li>
+
+         <li><p>If <var title="">x-position</var> is less than <var title="">right margin
+         edge</var>, and the sum of <var title="">x-position</var> and <var title="">size</var> is
+         more than <var title="">right margin edge</var>, then decrease <var title="">size</var> by
+         <var title="">edge margin</var>.</p></li>
+
+        </ol>
+
+       </dd>
+
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span></dt>
+       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span></dt>
+       <dd>
+
+        <ol>
+
+         <li><p>Let <var title="">edge margin</var> be a user-agent-defined vertical length,
+         expressed as a percentage of the height of the <var title="">video</var>'s rendering area,
+         which will be used to define a margin at the top and bottom edges of the video into which
+         this cue will not be placed. In situations with overscan, this margin should be sufficient
+         to place the cue within the title-safe area. In the absence of overscan, this value should
+         be picked for aesthetics (to avoid text being aligned precisely on the top or bottom edge
+         of the video, which can be ugly).</p></li>
+
+         <li><p>If <var title="">y-position</var> is less than <var title="">edge margin</var> and
+         the sum of <var title="">y-position</var> and <var title="">size</var> is more than <var
+         title="">edge margin</var>, then increase <var title="">y-position</var> by <var
+         title="">edge margin</var> and decrease <var title="">size</var> by the same
+         amount.</p></li>
+
+         <li><p>Let <var title="">bottom margin edge</var> be 100 minus <var title="">edge
+         margin</var>.</p></li>
+
+         <li><p>If <var title="">y-position</var> is less than <var title="">bottom margin
+         edge</var>, and the sum of <var title="">y-position</var> and <var title="">size</var> is
+         more than <var title="">right margin edge</var>, then decrease <var title="">size</var> by
+         <var title="">edge margin</var>.</p></li>
+
+        </ol>
+
+       </dd>
+
+      </dl>
+
+     </li>
+
+     <li><p>Let <var title="">left</var> be '<var
+     title="">x-position</var>&#x2009;vw' and <var title="">top</var>
+     be '<var title="">y-position</var>&#x2009;vh'. (These again are
+     CSS values used by the next section to set CSS properties for the
+     rendering; 'vw' and 'vh' are CSS units.) <a
+     href="#refsCSSVALUES">[CSSVALUES]</a></p></li>
+
+     <li>
+
+      <p>Apply the terms of the CSS specifications to <var
+      title="">nodes</var> within the following constraints, thus
+      obtaining a set of CSS boxes positioned relative to an initial
+      containing block: <a href="#refsCSS">[CSS]</a></p>
+
+      <ul>
+
+       <li><p>The <i>document tree</i> is the tree of <span
+       title="WebVTT Node Object">WebVTT Node Objects</span> rooted at
+       <var title="">nodes</var>.</p></li>
+
+       <li><p>For the purposes of processing by the CSS specification,
+       <span title="WebVTT Internal Node Object">WebVTT Internal Node
+       Objects</span> are equivalent to elements with the same
+       contents.</p></li>
+
+       <li>For the purposes of processing by the CSS
+       specification, <span title="WebVTT Text Object">WebVTT Text
+       Objects</span> are equivalent to <code>Text</code> nodes.</li>
+
+       <li>No style sheets are associated with <var
+       title="">nodes</var>. (The nodes are subsequently restyled
+       using style sheets after their boxes are generated, as
+       described below.)</li>
+
+       <li>The children of the <var title="">nodes</var> must be
+       wrapped in an anonymous box whose 'display' property has the
+       value 'inline'. This is the <dfn>WebVTT cue background
+       box</dfn>.</li>
+
+       <li>Runs of children of <span title="WebVTT Ruby Object">WebVTT
+       Ruby Objects</span> that are not <span title="WebVTT Ruby Text
+       Object">WebVTT Ruby Text Objects</span> must be wrapped in
+       anonymous boxes whose 'display' property has the value
+       'ruby-base'. <a href="#refsCSSRUBY">[CSSRUBY]</a></li>
+
+       <li>Properties on <span title="WebVTT Node Object">WebVTT Node
+       Objects</span> have their values set as defined in the next
+       section. (That section uses some of the variables whose values
+       were calculated earlier in this algorithm.)</li>
+
+       <li>Text runs must be wrapped according to the CSS
+       line-wrapping rules, with the following additional constraints:
+
+        <ul>
+
+         <li>Regardless of the value of the 'white-space' property,
+         lines must be wrapped at the edge of their containing blocks,
+         even if doing so requires splitting a word where there is no
+         line breaking opportunity. (Thus, normally text wraps as
+         needed, but if there is a particularly long word, it does not
+         overflow as it normally would in CSS, it is instead forcibly
+         wrapped at the box's edge.)</li>
+
+         <li>Regardless of the value of the 'white-space' property,
+         any line breaks inserted by the user agent for the purposes
+         of line wrapping must be placed so as to minimize Δ
+         across each run of consecutive lines between preserved
+         newlines in the source. Δ for a set of lines is defined
+         as the sum over each line of the absolute of the difference
+         between the line's length and the mean line length of the
+         set.</li>
+
+        </ul>
+
+       </li>
+
+       <li>The viewport (and initial containing block) is
+       <var title="">video</var>'s rendering area.</li>
+
+      </ul>
+
+      <p>Let <var title="">boxes</var> be the boxes generated as
+      descendants of the initial containing block, along with their
+      positions.</p>
+
+     </li>
+
+     <li><p>If there are no line boxes in <var title="">boxes</var>,
+     skip the remainder of these substeps for <var
+     title="">cue</var>. The cue is ignored.</p></li>
+
+     <li>
+
+      <p>Adjust the positions of <var title="">boxes</var> according
+      to the appropriate steps from the following list:</p>
+
+      <dl class="switch">
+
+       <dt>If <var title="">cue</var>'s <span>text track cue snap-to-lines flag</span> is set</dt>
+
+       <dd>
+
+        <p>Many of the steps in this algorithm vary according to the
+        <span>text track cue writing direction</span>. Steps labeled
+        "<strong>Horizontal</strong>" must be followed only when the
+        <span>text track cue writing direction</span> is <span
+        title="text track cue horizontal writing
+        direction">horizontal</span>, steps labeled
+        "<strong>Vertical</strong>" must be followed when the
+        <span>text track cue writing direction</span> is either <span
+        title="text track cue vertical growing left writing
+        direction">vertical growing left</span> or <span title="text
+        track cue vertical growing right writing direction">vertical
+        growing right</span>, steps labeled "<strong>Vertical Growing
+        Left</strong>" must be followed only when the <span>text
+        track cue writing direction</span> is <span title="text track
+        cue vertical growing left writing direction">vertical growing
+        left</span>, and steps labeled "<strong>Vertical Growing
+        Right</strong>" must be followed only when the <span>text
+        track cue writing direction</span> is <span title="text track
+        cue vertical growing right writing direction">vertical growing
+        right</span>.</p>
+
+        <ol>
+
+         <li>
+
+          <p><strong>Horizontal</strong>: Let <var title="">margin</var> be a user-agent-defined
+          vertical length which will be used to define a margin at the top and bottom edges of the
+          video into which cues will not be placed. In situations with overscan, this margin should
+          be sufficient to place all cues within the title-safe area. In the absence of overscan,
+          this value should be picked for aesthetics (to avoid text being aligned precisely on the
+          bottom edge of the video, which can be ugly).</p>
+
+          <p><strong>Vertical</strong>: Let <var title="">margin</var> be a user-agent-defined
+          horizontal length which will be used to define a margin at the left and right edges of the
+          video into which cues will not be placed. In situations with overscan, this margin should
+          be sufficient to place all cues within the title-safe area. In the absence of overscan,
+          this value should be picked for aesthetics (to avoid text being aligned precisely on the
+          left or right edges of the video, which can be ugly).</p>
+
+         </li>
+
+         <li>
+
+          <p><strong>Horizontal</strong>: Let <var title="">full dimension</var> be the height of
+          <var title="">video</var>'s rendering area.</p>
+
+          <p><strong>Vertical</strong>: Let <var title="">full dimension</var> be the width of <var
+          title="">video</var>'s rendering area.</p>
+
+          <p>These dimensions must not be adjusted for overscan. (The algorithm does that
+          separately.)</p>
+
+         </li>
+
+         <li>
+
+          <p>Let <var title="">max dimension</var> be <span title=""><var
+          title="">full dimension</var> - (2 × <var
+          title="">margin</var>)</span>.</p>
+
+         </li>
+
+         <li>
+
+          <p><strong>Horizontal</strong>: Let <var title="">step</var>
+          be the height of the first line box in <var
+          title="">boxes</var>.</p>
+
+          <p><strong>Vertical</strong>: Let <var title="">step</var>
+          be the width of the first line box in <var
+          title="">boxes</var>.</p>
+
+         </li>
+
+         <li><p>If <var title="">step</var> is zero, then jump to the
+         step labeled <i>done positioning</i> below.</p></li>
+
+         <li><p>Let <var title="">line position</var> be the
+         <span>text track cue computed line position</span>.</p></li>
+
+         <li><p><strong>Vertical Growing Left</strong>: Add one to
+         <var title="">line position</var> then negate it.</p></li>
+
+         <li><p>Let <var title="">position</var> be the result of
+         multiplying <var title="">step</var> and <var title="">line
+         position</var>.</p></li>
+
+         <li><p><strong>Vertical Growing Left</strong>: Decrease <var
+         title="">position</var> by the width of the bounding box of
+         the boxes in <var title="">boxes</var>, then increase <var
+         title="">position</var> by <var title="">step</var>.</p></li>
+
+         <li>
+
+          <p>If <var title="">line position</var> is less than zero then increase <var
+          title="">position</var> by <var title="">max dimension</var>, and negate <var
+          title="">step</var>.</p>
+
+          <p>Otherwise, increase <var title="">position</var> by <var title="">margin</var>.</p>
+
+         </li>
+
+         <li>
+
+          <p><strong>Horizontal</strong>: Move all the boxes in <var
+          title="">boxes</var> down by the distance given by <var
+          title="">position</var>.</p>
+
+          <p><strong>Vertical</strong>: Move all the boxes in <var
+          title="">boxes</var> right by the distance given by <var
+          title="">position</var>.</p>
+
+         </li>
+
+         <li><p>Remember the position of all the boxes in <var title="">boxes</var> as their <var
+         title="">specified position</var>.</p></li>
+
+         <li><p>Let <var title="">best position</var> be null. It will hold a position for <var
+         title="">boxes</var>, much like <var title="">specified position</var> in the previous
+         step.</p>
+
+         <li><p>Let <var title="">best position score</var> be null.</p></li>
+
+         <li><p>Let <var title="">switched</var> be false.</p></li>
+
+         <li>
+
+          <p><strong>Horizontal</strong>: Let <var title="">title area</var> be a box that covers
+          all of the <var title="">video</var>'s rendering area except for a height of <var
+          title="">margin</var> at the top of the rendering area and a height of <var
+          title="">margin</var> at the bottom of the rendering area.</p>
+
+          <p><strong>Vertical</strong>: Let <var title="">title area</var> be a box that covers all
+          of the <var title="">video</var>'s rendering area except for a width of <var
+          title="">margin</var> at the left of the rendering area and a width of <var
+          title="">margin</var> at the right of the rendering area.</p>
+
+         </li>
+
+         <li><p><i>Step loop</i>: If none of the boxes in <var title="">boxes</var> would overlap
+         any of the boxes in <var title="">output</var>, and all of the boxes in <var
+         title="">output</var> are entirely within the <var title="">title area</var> box, then jump
+         to the step labeled <i>done positioning</i> below.</p></li>
+
+         <li><p>Let <var title="">current position score</var> be the percentage of the area of the
+         bounding box of the boxes in <var title="">boxes</var> that <!--overlaps the boxes in <var
+         title="">output</var> (if any) or that--> is outside the <var title="">title area</var>
+         box.</p></li>
+
+         <li>
+
+          <p>If <var title="">best position</var> is null (i.e. this is the first run through this
+          loop, <var title="">switched</var> is still false, the boxes in <var title="">boxes</var>
+          are at their <var title="">specified position</var>, and <var title="">best position
+          score</var> is still null), or if <var title="">current position score</var> is a lower
+          percentage than that in <var title="">best position score</var>, then remember the
+          position of all the boxes in <var title="">boxes</var> as their <var title="">best
+          position</var>, and set <var title="">best position score</var> to <var title="">current
+          position score</var>.</p>
+
+         </li>
+
+         <li>
+
+          <p><strong>Horizontal</strong>: If <var title="">step</var> is negative and the top of the
+          first line box in <var title="">boxes</var> is now above the top of the <var
+          title="">title area</var>, or if <var title="">step</var> is positive and the bottom of
+          the first line box in <var title="">boxes</var> is now below the bottom of the <var
+          title="">title area</var>, jump to the step labeled <i>switch direction</i>.</p>
+
+          <p><strong>Vertical</strong>: If <var title="">step</var> is negative and the left edge of
+          the first line box in <var title="">boxes</var> is now to the left of the left edge of the
+          <var title="">title area</var>, or if <var title="">step</var> is positive and the right
+          edge of the first line box in <var title="">boxes</var> is now to the right of the right
+          edge of the <var title="">title area</var>, jump to the step labeled <i>switch
+          direction</i>.</p>
+
+         </li>
+
+         <li>
+
+          <p><strong>Horizontal</strong>: Move all the boxes in <var
+          title="">boxes</var> down by the distance given by <var
+          title="">step</var>. (If <var title="">step</var> is
+          negative, then this will actually result in an upwards
+          movement of the boxes in absolute terms.)</p>
+
+          <p><strong>Vertical</strong>: Move all the boxes in <var
+          title="">boxes</var> right by the distance given by <var
+          title="">step</var>. (If <var title="">step</var> is
+          negative, then this will actually result in a leftwards
+          movement of the boxes in absolute terms.)</p>
+
+         </li>
+
+         <li><p>Jump back to the step labeled <i>step loop</i>.</p></li>
+
+         <li><p><i>Switch direction</i>: If <var title="">switched</var> is true, then move all the
+         boxes in <var title="">boxes</var> back to their <var title="">best position</var>, and
+         jump to the step labeled <i>done positioning</i> below.</p></li>
+
+         <li><p>Otherwise, move all the boxes in <var title="">boxes</var> back to their <var
+         title="">specified position</var> as determined in the earlier step.</p></li>
+
+         <li><p>Negate <var title="">step</var>.</p></li>
+
+         <li><p>Set <var title="">switched</var> to true.</p></li>
+
+         <li><p>Jump back to the step labeled <i>step loop</i>.</p></li>
+
+        </ol>
+
+       </dd>
+
+       <dt>If <var title="">cue</var>'s <span>text track cue snap-to-lines flag</span> is not set</dt>
+       <dd>
+
+        <ol>
+
+         <li>
+
+          <p>Set up <var title="">x</var> and <var title="">y</var> as
+          follows:</p>
+
+          <dl class="switch">
+
+           <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+                  and <var title="">direction</var> is 'ltr'</dt>
+           <dd>
+            <p>Let <var title="">x</var> be a percentage given by the
+            <span>text track cue text position</span>, and let <var
+            title="">y</var> be a percentage given by the <span>text
+            track cue computed line position</span>.</p>
+           </dd>
+
+           <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
+                  and <var title="">direction</var> is 'rtl'</dt>
+           <dd>
+            <p>Let <var title="">x</var> be a percentage given by the
+            <span>text track cue text position</span> subtracted from
+            100, and let <var title="">y</var> be a percentage given
+            by the <span>text track cue computed line position</span>.</p>
+           </dd>
+
+           <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span></dt>
+           <dd>
+            <p>Let <var title="">x</var> be a percentage given by the
+            <span>text track cue computed line position</span> subtracted from
+            100, and let <var title="">y</var> be a percentage given
+            by the <span>text track cue text position</span>.</p>
+           </dd>
+
+           <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span></dt>
+           <dd>
+            <p>Let <var title="">x</var> be a percentage given by the
+            <span>text track cue computed line position</span>, and let <var
+            title="">y</var> be a percentage given by the <span>text
+            track cue text position</span>.</p>
+           </dd>
+
+          </dl>
+
+         </li>
+
+         <li><p>Position the boxes in <var title="">boxes</var> such
+         that the point <var title="">x</var>% along the width of the
+         bounding box of the boxes in <var title="">boxes</var> is
+         <var title="">x</var>% of the way across the width of the
+         <var title="">video</var>'s rendering area, and the point
+         <var title="">y</var>% along the height of the bounding box
+         of the boxes in <var title="">boxes</var> is <var
+         title="">y</var>% of the way across the height of the <var
+         title="">video</var>'s rendering area, while maintaining the
+         relative positions of the boxes in <var title="">boxes</var>
+         to each other.</p></li>
+
+         <li><p>If none of the boxes in <var title="">boxes</var>
+         would overlap any of the boxes in <var title="">output</var>,
+         and all the boxes in <var title="">output</var> are within
+         the <var title="">video</var>'s rendering area, then jump to
+         the step labeled <i>done positioning</i> below.</p></li>
+
+         <li><p>If there is a position to which the boxes in <var
+         title="">boxes</var> can be moved while maintaining the
+         relative positions of the boxes in <var title="">boxes</var>
+         to each other such that none of the boxes in <var
+         title="">boxes</var> would overlap any of the boxes in <var
+         title="">output</var>, and all the boxes in <var
+         title="">output</var> would be within the <var
+         title="">video</var>'s rendering area, then move the boxes in
+         <var title="">boxes</var> to the closest such position to
+         their current position, and then jump to the step labeled
+         <i>done positioning</i> below. If there are multiple such
+         positions that are equidistant from their current position,
+         use the highest one amongst them; if there are several at
+         that height, then use the leftmost one amongst them.</p></li>
+
+         <li><p>Otherwise, jump to the step labeled <i>done
+         positioning</i> below. (The boxes will unfortunately
+         overlap.)</p></li>
+
+        </ol>
+
+       </dd>
+
+      </dl>
+
+     </li>
+
+     <li><p><i>Done positioning</i>: If there are any line boxes in
+     the (possibly now repositioned) <var title="">boxes</var> that do
+     not completely fit inside <var title="">video</var>'s rendering
+     area, remove those offending line boxes from <var
+     title="">boxes</var>.</p></li>
+
+     <li><p>Let <var title="">cue</var>'s <span>text track cue
+     display state</span> have the CSS boxes in <var
+     title="">boxes</var>.</p></li>
+
+     <li><p>Add the CSS boxes in <var title="">boxes</var> to <var
+     title="">output</var>.</p></li>
+
+    </ol>
+
+   </li>
+
+   <li><p>Return <var title="">output</var>.</p></li>
+
+  </ol>
+
+  <p>User agents may allow the user to override the above algorithm's
+  positioning of cues, e.g. by dragging them to another location on
+  the <code>video</code>, or even off the <code>video</code>
+  entirely.</p>
+
+
+  <h4>Applying CSS properties to <span title="WebVTT Node Object">WebVTT Node Objects</span></h4>
+
+  <p>When following the <span>rules for updating the display of WebVTT
+  text tracks</span>, user agents must set properties of <span
+  title="WebVTT Node Object">WebVTT Node Objects</span> at the CSS
+  user agent cascade layer as defined in this section. <a
+  href="#refsCSS">[CSS]</a></p>
+
+  <p>On the (root) <span>List of WebVTT Node Objects</span>, 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>,
+  <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
+  the <span>rules for updating the display of WebVTT text
+  tracks</span> for the <span>text track cue</span> from whose <span
+  title="text track cue text">text</span> the <span>List of WebVTT
+  Node Objects</span> was constructed.</p>
+
+  <p>The 'text-align' property on the (root) <span>List of WebVTT Node
+  Objects</span> 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
+  corresponding <span title="text track cue">cue</span>'s <span>text
+  track cue alignment</span>:</p>
+
+  <table>
+   <thead>
+    <tr> <th><span>Text track cue alignment</span> <th> 'text-align' value
+   <tbody>
+    <tr> <td><span title="text track cue start alignment">Start alignment</span> <td> 'start'
+    <tr> <td><span title="text track cue middle alignment">Middle alignment</span> <td> 'center'
+    <tr> <td><span title="text track cue end alignment">End alignment</span> <td> 'end'
+    <tr> <td><span title="text track cue left alignment">Left alignment</span> <td> 'left'
+    <tr> <td><span title="text track cue right alignment">Right alignment</span> <td> 'right'
+  </table>
+
+  <p>The 'font' shorthand property on the (root) <span>List of WebVTT
+  Node Objects</span> must be set to '5vh sans-serif'. <a
+  href="#refsCSSRUBY">[CSSRUBY]</a> <a
+  href="#refsCSSVALUES">[CSSVALUES]</a></p>
+
+  <p>The 'color' property on the (root) <span>List of WebVTT Node
+  Objects</span> must be set to 'rgba(255,255,255,1)'. <a
+  href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
+
+  <p>The 'background' shorthand property on the <span>WebVTT cue
+  background box</span> must be set to 'rgba(0,0,0,0.8)'. <a
+  href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
+
+  <p>A text outline or stroke may also be set on the (root) <span>List
+  of WebVTT Node Objects</span>, if supported.</p> <!-- 'text-outline'
+  is in CSS3 Text, but Tab says that's awaiting medical attention. -->
+
+  <p>The 'white-space' property on the (root) <span>List of WebVTT
+  Node Objects</span> must be set to 'pre-line'. <a
+  href="#refsCSS">[CSS]</a></p>
+
+  <p>The 'font-style' property on <span title="WebVTT Italic
+  Object">WebVTT Italic Objects</span> must be set to 'italic'.</p>
+
+  <p>The 'font-weight' property on <span title="WebVTT Bold
+  Object">WebVTT Bold Objects</span> must be set to 'bold'.</p>
+
+  <p>The 'text-decoration' property on <span title="WebVTT Underline
+  Object">WebVTT Underline Objects</span> must be set to 'underline'.</p>
+
+  <p>The 'display' property on <span title="WebVTT Ruby Object">WebVTT
+  Ruby Objects</span> must be set to 'ruby'. <a
+  href="#refsCSSRUBY">[CSSRUBY]</a></p>
+
+  <p>The 'display' property on <span title="WebVTT Ruby Text
+  Object">WebVTT Ruby Text Objects</span> must be set to
+  'ruby-text'. <a href="#refsCSSRUBY">[CSSRUBY]</a></p>
+
+  <p>All other non-inherited properties must be set to their initial
+  values; inherited properties on the root <span>List of WebVTT Node
+  Objects</span> must inherit their values from the <span>media
+  element</span> for which the <span>text track cue</span> is being
+  rendered, if any. If there is no <span>media element</span> (i.e. if
+  the <span>text track</span> is being rendered for another media
+  playback mechanism), then inherited properties on the root
+  <span>List of WebVTT Node Objects</span> must take their initial
+  values.</p>
+
+  <p>If there are style sheets that apply to the <span>media
+  element</span> or other playback mechanism, then they must be
+  interpreted as defined in the next section.</p>
+
+
+  <h4>CSS extensions</h4>
+
+  <p>When a user agent is rendering one or more <span title="text track cue">text track cues</span>
+  according to the <span>rules for updating the display of WebVTT text tracks</span>, <span
+  title="WebVTT Node Object">WebVTT Node Objects</span> in the <span>list of WebVTT Node
+  Objects</span> used in the rendering can be matched by certain pseudo-selectors as defined below.
+  These selectors can begin or stop matching individual <span title="WebVTT Node Object">WebVTT Node
+  Objects</span> while a <span title="text track cue">cue</span> is being rendered, even in between
+  applications of the <span>rules for updating the display of WebVTT text tracks</span> (which are
+  only run when the set of active cues changes). User agents that support the pseudo-element
+  described below 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 <span>text track cue</span>'s <span>text track cue display state</span> must be emptied
+  and the <span>text track</span>'s <span>rules for updating the text track rendering</span> must be
+  immediately rerun.</p>
+
+  <p>Pseudo-elements apply to elements that are matched by
+  selectors. For the purpose of this section, that element is the
+  <i>matched element</i>. The pseudo-elements defined in the following
+  sections affect the styling of parts of <span title="text track
+  cue">text track cues</span> that are being rendered for the
+  <i>matched element</i>.</p>
+
+  <p class="note">If the <i>matched element</i> is not a
+  <code>video</code> element, the pseudo-elements defined below won't
+  have any effect according to this specification.</p>
+
+  <p>A CSS user agent that implements the <span title="text
+  track">text tracks</span> model must implement the '::cue' and
+  '::cue(<var title="">selector</var>)' pseudo-elements, and the <span
+  title="past-pseudo-class">':past'</span> and <span
+  title="future-pseudo-class">':future'</span> pseudo-classes.</p>
+
+
+  <h5>The '::cue' pseudo-element</h5>
+
+  <p>The '<dfn title="pseudo-cue">::cue</dfn>' pseudo-element (with no
+  argument) matches any <span>List of WebVTT Node Objects</span>
+  constructed for the <i>matched element</i>, with the exception that
+  the properties corresponding to the 'background' shorthand must be
+  applied to the <span>WebVTT cue background box</span> rather than
+  the <span>List of WebVTT Node Objects</span>.</p>
+
+  <p>The following properties apply to the '::cue' pseudo-element with
+  no argument; other properties set on the pseudo-element must be
+  ignored:</p>
+
+  <ul class="brief">
+   <li>'color'</li>
+   <li>'opacity'</li>
+   <li>'visibility'</li>
+   <li>'text-decoration'</li>
+   <li>'text-outline'</li>
+   <li>'text-shadow'</li>
+   <li>the properties corresponding to the 'background' shorthand</li>
+   <li>the properties corresponding to the 'outline' shorthand</li>
+   <li>the properties corresponding to the 'font' shorthand, including 'line-height'</li>
+   <li>'white-space'</li>
+   <!-- add more... -->
+   <!-- definitely not:
+          display, float, position, top, left, right, bottom, width,
+          height, margin-top, margin-bottom, margin-left, margin-right,
+          clip, clear, content, cursor, direction, max-height,
+          min-height, max-width, min-width, orphans, overflow,
+          page-break-*, text-align, unicode-bidi, widows, z-index
+   -->
+  </ul>
+
+  <p>The '<dfn title="pseudo-cue-selector">::cue(<var
+  title="">selector</var>)</dfn>' pseudo-element with an argument must
+  have an argument that consists of a group of selectors. It matches
+  any <span>WebVTT Internal Node Object</span> constructed for the
+  <i>matched element</i> that also matches the given group of
+  selectors, with the nodes being treated as follows:</p>
+
+  <ul>
+
+   <li><p>The <i>document tree</i> against which the selectors are
+   matched is the tree of <span title="WebVTT Node Object">WebVTT Node
+   Objects</span> rooted at the <span>list of WebVTT Node
+   Objects</span> for the cue.</p></li>
+
+   <li><p><span title="WebVTT Internal Node Object">WebVTT Internal
+   Node Objects</span> are elements in the tree.</p></li>
+
+   <li><span title="WebVTT Leaf Node Object">WebVTT Leaf Node
+   Objects</span> cannot be matched.</li>
+
+   <li>
+
+    <p>For the purposes of element type selectors, the names of <span
+    title="WebVTT Internal Node Object">WebVTT Internal Node
+    Objects</span> are as given by the following table, where objects
+    having the concrete class given in a cell in the first column have
+    the name given by the second column of the same row:</p>
+
+    <table>
+
+     <thead>
+      <tr>
+       <th>Concrete class
+       <th>Name
+
+     <tbody>
+      <tr>
+       <td><span title="WebVTT Class Object">WebVTT Class Objects</span>
+       <td><code title="">c</code>
+
+      <tr>
+       <td><span title="WebVTT Italic Object">WebVTT Italic Objects</span>
+       <td><code title="">i</code>
+
+      <tr>
+       <td><span title="WebVTT Bold Object">WebVTT Bold Objects</span>
+       <td><code title="">b</code>
+
+      <tr>
+       <td><span title="WebVTT Underline Object">WebVTT Underline Objects</span>
+       <td><code title="">u</code>
+
+      <tr>
+       <td><span title="WebVTT Ruby Object">WebVTT Ruby Objects</span>
+       <td><code title="">ruby</code>
+
+      <tr>
+       <td><span title="WebVTT Ruby Text Object">WebVTT Ruby Text Objects</span>
+       <td><code title="">rt</code>
+
+      <tr>
+       <td><span title="WebVTT Voice Object">WebVTT Voice Objects</span>
+       <td><code title="">v</code>
+
+      <tr>
+       <td><span title="WebVTT Language Object">WebVTT Language Objects</span>
+       <td><code title="">lang</code>
+
+      <tr>
+       <td>Other elements (specifically, <span title="List of WebVTT Node Objects">Lists of WebVTT Node Objects</span>)
+       <td>No explicit name.
+
+    </table>
+
+   </li>
+
+   <li><p>For the purposes of element type and universal selectors,
+   <span title="WebVTT Internal Node Object">WebVTT Internal Node
+   Objects</span> are considered as being in the namespace expressed
+   as the empty string.</p></li>
+
+   <li><p>For the purposes of attribute selector matching, <span title="WebVTT Internal Node
+   Object">WebVTT Internal Node Objects</span> have no attributes, except for <span title="WebVTT
+   Voice Object">WebVTT Voice Objects</span>, which have a single attribute named "<code
+   title="">voice</code>" whose value is the value of the <span>WebVTT Voice Object</span>, and
+   <span title="WebVTT Language Object">WebVTT Language Objects</span>, which have a single
+   attribute named "<code title="">lang</code>" whose value is the object's <span title="WebVTT Node
+   Object's applicable language">applicable language</span>.</p></li>
+
+   <li><p>For the purposes of class selector matching, <span
+   title="WebVTT Internal Node Object">WebVTT Internal Node
+   Objects</span> have the classes described as the <span>WebVTT
+   Node Object's applicable classes</span>.</p></li> <!-- ok, this
+   isn't especially well-defined, but the Selectors spec doesn't
+   really give one much to go on here. -->
+
+   <li><p>For the purposes of the <code title="selector-lang">:lang()</code> pseudo-class, <span
+   title="WebVTT Internal Node Object">WebVTT Internal Node Objects</span> have the language
+   described as the <span>WebVTT Node Object's applicable language</span>.</p></li>
+
+   <li><p>For the purposes of ID selector matching, <span title="List
+   of WebVTT Node Objects">Lists of WebVTT Node Objects</span> have
+   the ID given by the cue's <span>text track cue identifier</span>,
+   if any.</p></li>
+
+  </ul>
+
+  <p>The following properties apply to the '::cue()' pseudo-element
+  with an argument:</p>
+
+  <ul class="brief">
+   <li>'color'</li>
+   <li>'opacity'</li>
+   <li>'visibility'</li>
+   <li>'text-decoration'</li>
+   <li>'text-outline'</li>
+   <li>'text-shadow'</li>
+   <li>the properties corresponding to the 'background' shorthand</li>
+   <li>the properties corresponding to the 'outline' shorthand</li>
+   <li>properties relating to the transition and animation features</li>
+   <!-- add more... -->
+   <!-- but definitely not anything that affects dimensions of boxes, e.g. the 'font' shorthand's properties or 'white-space'; those are listed below instead -->
+  </ul>
+
+  <!--v2
+   Would be nice to support transitions that are directional,
+   e.g. changing text fill colour or shadow size of the start of a
+   segment when the segment becomes "past", and having the change
+   propagate towards the end of the segment so that it reaches the end
+   of the segment when the next segment becomes "past".
+  -->
+
+  <p>In addition, the following properties apply to the '::cue()'
+  pseudo-element with an argument when the selector does not contain
+  the <span title="past-pseudo-class">':past'</span> and <span
+  title="future-pseudo-class">':future'</span> pseudo-classes:</p>
+
+  <ul class="brief">
+   <li>the properties corresponding to the 'font' shorthand, including 'line-height'</li>
+   <li>'white-space'</li>
+   <!-- add more... -->
+   <!-- definitely not:
+          display, float, position, top, left, right, bottom, width,
+          height, margin-top, margin-bottom, margin-left, margin-right,
+          clip, clear, content, cursor, direction, max-height,
+          min-height, max-width, min-width, orphans, overflow,
+          page-break-*, text-align, unicode-bidi, widows, z-index
+   -->
+  </ul>
+
+  <p>Properties that do not apply must be ignored.</p>
+
+  <p>As a special exception, the properties corresponding to the
+  'background' shorthand, when they would have been applied to the
+  <span>List of WebVTT Node Objects</span>, must instead be applied to
+  the <span>WebVTT cue background box</span>.</p>
+
+
+  <h5>The ':past' and ':future' pseudo-classes</h5>
+
+  <p>The <span title="past-pseudo-class">':past'</span> and <span
+  title="future-pseudo-class">':future'</span> pseudo-classes
+  sometimes match <span title="WebVTT Node Object">WebVTT Node
+  Objects</span>. <a href="#refsSELECTORS">[SELECTORS]</a></p>
+
+  <p>The <dfn title="past-pseudo-class">':past'</dfn> pseudo-class
+  only matches <span title="WebVTT Node Object">WebVTT Node
+  Objects</span> that are <i>in the past</i>.</p>
+
+  <p>A <span>WebVTT Node Object</span> <var title="">c</var> is
+  <dfn>in the past</dfn> if, in a pre-order, depth-first traversal of
+  the <span>text track cue</span>'s <span>List of WebVTT Node
+  Objects</span>, there exists a <span>WebVTT Timestamp Object</span>
+  whose value is less than the <span>current playback position</span>
+  of the <span>media element</span> that is the <i>matched
+  element</i>, entirely after the <span>WebVTT Node Object</span> <var
+  title="">c</var>.</p>
+
+  <p>The <dfn title="future-pseudo-class">':future'</dfn> pseudo-class
+  only matches <span title="WebVTT Node Object">WebVTT Node
+  Objects</span> that are <i>in the future</i>.</p>
+
+  <p>A <span>WebVTT Node Object</span> <var title="">c</var> is
+  <dfn>in the future</dfn> if, in a pre-order, depth-first traversal
+  of the <span>text track cue</span>'s <span>List of WebVTT Node
+  Objects</span>, there exists a <span>WebVTT Timestamp Object</span>
+  whose value is greater than the <span>current playback
+  position</span> of the <span>media element</span> that is the
+  <i>matched element</i>, entirely before the <span>WebVTT Node
+  Object</span> <var title="">c</var>.</p>
+
+
+
+  <h2>WebVTT API</h2>
+
+  <p>The following interface is used to expose WebVTT cues in the DOM API:</p>
+
+  <pre class="idl">enum <dfn>AutoKeyword</dfn> { "auto" };
+[<span title="dom-TextTrackCue">Constructor</span>(double startTime, double endTime, DOMString text)]
+interface <dfn>WebVTTCue</dfn> : <span>TextTrackCue</span> {
+           attribute DOMString <span title="dom-TextTrackCue-vertical">vertical</span>;
+           attribute boolean <span title="dom-TextTrackCue-snapToLines">snapToLines</span>;
+           attribute (long or <span>AutoKeyword</span>) <span title="dom-TextTrackCue-line">line</span>;
+           attribute long <span title="dom-TextTrackCue-position">position</span>;
+           attribute long <span title="dom-TextTrackCue-size">size</span>;
+           attribute DOMString <span title="dom-TextTrackCue-align">align</span>;
+           attribute DOMString <span title="dom-TextTrackCue-text">text</span>;
+  <span>DocumentFragment</span> <span title="dom-TextTrackCue-getCueAsHTML">getCueAsHTML</span>();
+};</pre>
+
+  <dl class="domintro">
+
+   <dt><var title="">cue</var> = new <code title="dom-TextTrackCue">WebVTTCue</code>( <var title="">startTime</var>, <var title="">endTime</var>, <var title="">text</var> )</dt>
+   <dd>
+    <p>Returns a new <code>TextTrackCue</code> object, for use with the <code title="dom-TextTrack-addCue">addCue()</code> method.</p>
+    <p>The <var title="">startTime</var> argument sets the <span>text track cue start time</span>.</p>
+    <p>The <var title="">endTime</var> argument sets the <span>text track cue end time</span>.</p>
+    <p>The <var title="">text</var> argument sets the <span>text track cue text</span>.</p>
+   </dd>
+
+   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-vertical">vertical</span> [ = <var title="">value</var> ]</dt>
+   <dd>
+    <p>Returns a string representing the <span>text track cue writing direction</span>, as follows:</p>
+    <dl class="switch">
+     <dt>If it is <span title="text track cue horizontal writing direction">horizontal</span></dt>
+     <dd><p>The empty string.</p></dd>
+     <dt>If it is <span title="text track cue vertical growing left writing direction">vertical growing left</span></dt>
+     <dd><p>The string "<code title="">rl</code>".</p></dd>
+     <dt>If it is <span title="text track cue vertical growing right writing direction">vertical growing right</span></dt>
+     <dd><p>The string "<code title="">lr</code>".</p></dd>
+    </dl>
+    <p>Can be set.</p>
+   </dd>
+
+   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-snapToLines">snapToLines</span> [ = <var title="">value</var> ]</dt>
+   <dd>
+    <p>Returns true if the <span>text track cue snap-to-lines flag</span> is set, false otherwise.</p>
+    <p>Can be set.</p>
+   </dd>
+
+   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-line">line</span> [ = <var title="">value</var> ]</dt>
+   <dd>
+    <p>Returns the <span>text track cue line position</span>. In the
+    case of the value being <span title="text track cue automatic line
+    position">auto</span>, the string "<code title="">auto</code>" is
+    returned.</p>
+    <p>Can be set.</p>
+   </dd>
+
+   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-position">position</span> [ = <var title="">value</var> ]</dt>
+   <dd>
+    <p>Returns the <span>text track cue text position</span>.</p>
+    <p>Can be set.</p>
+   </dd>
+
+   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-size">size</span> [ = <var title="">value</var> ]</dt>
+   <dd>
+    <p>Returns the <span>text track cue size</span>.</p>
+    <p>Can be set.</p>
+   </dd>
+
+   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-align">align</span> [ = <var title="">value</var> ]</dt>
+   <dd>
+    <p>Returns a string representing the <span>text track cue alignment</span>, as follows:</p>
+    <dl class="switch">
+     <dt>If it is <span title="text track cue start alignment">start alignment</span></dt>
+     <dd><p>The string "<code title="">start</code>".</p></dd>
+     <dt>If it is <span title="text track cue middle alignment">middle alignment</span></dt>
+     <dd><p>The string "<code title="">middle</code>".</p></dd>
+     <dt>If it is <span title="text track cue end alignment">end alignment</span></dt>
+     <dd><p>The string "<code title="">end</code>".</p></dd>
+     <dt>If it is <span title="text track cue left alignment">left alignment</span></dt>
+     <dd><p>The string "<code title="">left</code>".</p></dd>
+     <dt>If it is <span title="text track cue right alignment">right alignment</span></dt>
+     <dd><p>The string "<code title="">right</code>".</p></dd>
+    </dl>
+    <p>Can be set.</p>
+   </dd>
+
+   <dt><var title="">cue</var> . <span title="dom-TextTrackCue-text">text</span> [ = <var title="">value</var> ]</dt>
+   <dd>
+    <p>Returns the <span>text track cue text</span> in raw unparsed form.</p>
+    <p>Can be set.</p>
+   </dd>
+
+   <dt><var title="">fragment</var> = <var title="">cue</var> . <span title="dom-TextTrackCue-getCueAsHTML">getCueAsHTML</span>()</dt>
+   <dd>
+    <p>Returns the <span>text track cue text</span> as a <code>DocumentFragment</code> of <span>HTML elements</span> and other DOM nodes.</p>
+   </dd>
+
+  </dl>
+
+  <div class="impl">
+
+  <p>The <dfn title="dom-TextTrackCue"><code>WebVTTCue(<var
+  title="">startTime</var>, <var title="">endTime</var>, <var
+  title="">text</var>)</code></dfn> constructor, when invoked, must
+  run the following steps:</p>
+
+  <ol>
+
+   <li><p>Create a new <span>text track cue</span>. Let <var
+   title="">cue</var> be that <span>text track cue</span>.</p></li>
+
+   <li><p>Let <var title="">cue</var>'s <span>text track cue start
+   time</span> be the value of the <var title="">startTime</var>
+   argument, interpreted as a time in seconds.</p></li>
+
+   <li><p>Let <var title="">cue</var>'s <span>text track cue end
+   time</span> be the value of the <var title="">endTime</var>
+   argument, interpreted as a time in seconds.</p></li>
+
+   <li><p>Let <var title="">cue</var>'s <span>text track cue text</span> be the value of the <var
+   title="">text</var> argument, and let the <span>rules for rendering the cue in isolation</span>
+   be the <span>rules for interpreting WebVTT cue text</span>.</p></li>
+
+   <!-- default settings -->
+
+   <li><p>Let <var title="">cue</var>'s <span>text track cue
+   identifier</span> be the empty string.</p></li>
+
+   <li><p>Let <var title="">cue</var>'s <span>text track cue
+   pause-on-exit flag</span> be false.</p></li>
+
+   <li><p>Let <var title="">cue</var>'s <span>text track cue
+   writing direction</span> be <span title="text track cue
+   horizontal writing direction">horizontal</span>.</p></li>
+
+   <li><p>Let <var title="">cue</var>'s <span>text track cue
+   snap-to-lines flag</span> be true.</p></li>
+
+   <li><p>Let <var title="">cue</var>'s <span>text track cue line
+   position</span> be <span title="text track cue automatic line
+   position">auto</span>.</p></li>
+
+   <li><p>Let <var title="">cue</var>'s <span>text track cue
+   text position</span> be 50.</p></li>
+
+   <li><p>Let <var title="">cue</var>'s <span>text track cue
+   size</span> be 100.</p></li>
+
+   <li><p>Let <var title="">cue</var>'s <span>text track cue
+   alignment</span> be <span title="text track cue middle
+   alignment">middle alignment</span>.</p></li>
+
+   <li><p>Return the <code>TextTrackCue</code> object representing
+   <var title="">cue</var>.</p></li>
+
+  </ol>
+
+  <p>The <dfn
+  title="dom-TextTrackCue-vertical"><code>vertical</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 <span>text
+  track cue writing direction</span> of the <span>text track
+  cue</span> that the <code>TextTrackCue</code> object represents:</p>
+
+  <table>
+   <thead>
+    <tr> <th> <span>Text track cue writing direction</span>
+         <th> <code title="dom-TextTrackCue-direction">direction</code> value
+   <tbody>
+    <tr> <td> <span title="text track cue horizontal writing direction">Horizontal</span>
+         <td> "<code title=""></code>" (the empty string)
+    <tr> <td> <span title="text track cue vertical growing left writing direction">Vertical growing left</span>
+         <td> "<code title="">rl</code>"
+    <tr> <td> <span title="text track cue vertical growing right writing direction">Vertical growing right</span>
+         <td> "<code title="">lr</code>"
+  </table>
+
+  <p>On setting, the <span>text track cue writing direction</span> must be set to the value given in
+  the first cell of the row in the table above whose second cell is a <span>case-sensitive</span>
+  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>
+
+  <p>The <dfn title="dom-TextTrackCue-snapToLines"><code>snapToLines</code></dfn> attribute, on
+  getting, must return true if the <span>text track cue snap-to-lines flag</span> of the <span>text
+  track cue</span> that the <code>TextTrackCue</code> object represents is set; or false otherwise.
+  On setting, the <span>text track cue snap-to-lines flag</span> must be set if the new value is
+  true, and must be unset otherwise.</p>
+
+  <p>The <dfn title="dom-TextTrackCue-line"><code>line</code></dfn> attribute, on getting, must
+  return the <span>text track cue line position</span> of the <span>text track cue</span> that the
+  <code>TextTrackCue</code> object represents. The special value <span title="text track cue
+  automatic line position">auto</span> must be represented as the string "<code
+  title="">auto</code>". On setting, the <span>text track cue line position</span> must be set to
+  the new value; if the new value is the string "<code title="">auto</code>", then it must be
+  interpreted as the special value <span title="text track cue automatic line
+  position">auto</span>.</p>
+
+  <p>The <dfn title="dom-TextTrackCue-position"><code>position</code></dfn> attribute, on getting,
+  must return the <span>text track cue text position</span> of the <span>text track cue</span> that
+  the <code>TextTrackCue</code> object represents. On setting, if the new value is negative or
+  greater than 100, then an <code>IndexSizeError</code> exception must be thrown. Otherwise, the
+  <span>text track cue text position</span> must be set to the new value.</p>
+
+  <p>The <dfn title="dom-TextTrackCue-size"><code>size</code></dfn> attribute, on getting, must
+  return the <span>text track cue size</span> of the <span>text track cue</span> that the
+  <code>TextTrackCue</code> object represents. On setting, if the new value is negative or greater
+  than 100, then an <code>IndexSizeError</code> exception must be thrown. Otherwise, the <span>text
+  track cue size</span> must be set to the new value.</p>
+
+  <p>The <dfn title="dom-TextTrackCue-align"><code>align</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
+  <span>text track cue alignment</span> of the <span>text track cue</span> that the
+  <code>TextTrackCue</code> object represents:</p>
+
+  <table>
+   <thead>
+    <tr> <th><span>Text track cue alignment</span> <th> <code title="dom-TextTrackCue-align">align</code> value
+   <tbody>
+    <tr> <td><span title="text track cue start alignment">Start alignment</span> <td> "<code title="">start</code>"
+    <tr> <td><span title="text track cue middle alignment">Middle alignment</span> <td> "<code title="">middle</code>"
+    <tr> <td><span title="text track cue end alignment">End alignment</span> <td> "<code title="">end</code>"
+    <tr> <td><span title="text track cue left alignment">Left alignment</span> <td> "<code title="">left</code>"
+    <tr> <td><span title="text track cue right alignment">Right alignment</span> <td> "<code title="">right</code>"
+  </table>
+
+  <p>On setting, the <span>text track cue alignment</span> must be set to the value given in the
+  first cell of the row in the table above whose second cell is a <span>case-sensitive</span> 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>
+
+  <p>The <dfn title="dom-TextTrackCue-text"><code>text</code></dfn> attribute, on getting, must
+  return the raw <span>text track cue text</span> of the <span>text track cue</span> that the
+  <code>TextTrackCue</code> object represents. On setting, the <span>text track cue text</span> must
+  be set to the new value.</p>
+
+  <p>The <dfn title="dom-TextTrackCue-getCueAsHTML"><code>getCueAsHTML()</code></dfn> method must
+  convert the <span>text track cue text</span> to a <code>DocumentFragment</code> for the
+  <span>script's document</span> of the <span>entry script</span> by applying the <span>WebVTT cue
+  text DOM construction rules</span> to the result of applying the <span>WebVTT cue text parsing
+  rules</span> to the <span>text track cue text</span>.</p>
+
+  </div>
+
+
+
+  <h2>IANA considerations</h2>
+
+  <!-- http://www.w3.org/2002/06/registering-mediatype.html -->
+
+  <h3><dfn><code>text/vtt</code></dfn></h3>
+
+  <p>This registration is for community review and will be submitted
+  to the IESG for review, approval, and registration with IANA.</p>
+
+  <!--
+   To: ietf-types at iana.org
+   Subject: Registration of media type text/cues
+  -->
+
+  <dl>
+   <dt>Type name:</dt>
+   <dd>text</dd>
+   <dt>Subtype name:</dt>
+   <dd>vtt</dd>
+   <dt>Required parameters:</dt>
+   <dd>No parameters</dd>
+   <dt>Optional parameters:</dt>
+   <dd>No parameters</dd>
+   <dt>Encoding considerations:</dt>
+   <dd>8bit (always UTF-8)</dd>
+<!--ADD-TOPIC:Security-->
+   <dt>Security considerations:</dt>
+   <dd>
+    <p>Text track files themselves pose no immediate risk unless
+    sensitive information is included within the
+    data. Implementations, however, are required to follow specific
+    rules when processing text tracks, to ensure that certain
+    origin-based restrictions are honored. Failure to correctly
+    implement these rules can result in information leakage,
+    cross-site scripting attacks, and the like.</p>
+   </dd>
+<!--REMOVE-TOPIC:Security-->
+   <dt>Interoperability considerations:</dt>
+   <dd>
+    <p>Rules for processing both conforming and non-conforming content
+    are defined in this specification.</p>
+   </dd>
+   <dt>Published specification:</dt>
+   <dd>
+    This document is the relevant specification.
+   </dd>
+   <dt>Applications that use this media type:</dt>
+   <dd>
+    Web browsers and other video players.
+   </dd>
+   <dt>Additional information:</dt>
+   <dd>
+    <dl>
+     <dt>Magic number(s):</dt>
+     <dd>
+      <p>WebVTT files all begin with one of the following byte sequences (where "EOF" means the end of the file):</p>
+      <ul class="brief">
+       <li> EF BB BF 57 45 42 56 54 54 0A
+       <li> EF BB BF 57 45 42 56 54 54 0D
+       <li> EF BB BF 57 45 42 56 54 54 20
+       <li> EF BB BF 57 45 42 56 54 54 09
+       <li> EF BB BF 57 45 42 56 54 54 EOF
+       <li>          57 45 42 56 54 54 0A
+       <li>          57 45 42 56 54 54 0D
+       <li>          57 45 42 56 54 54 20
+       <li>          57 45 42 56 54 54 09
+       <li>          57 45 42 56 54 54 EOF
+      </ul>
+      <p class="note">(An optional UTF-8 BOM, the ASCII string "<code title="">WEBVTT</code>", and finally a space, tab, line break, or the end of the file.)
+     </dd>
+     <dt>File extension(s):</dt>
+     <dd>"<code title="">vtt</code>"</dd>
+     <dt>Macintosh file type code(s):</dt>
+     <dd>No specific Macintosh file type codes are recommended for this type.</dd>
+    </dl>
+   </dd>
+   <dt>Person & email address to contact for further information:</dt>
+   <dd>Ian Hickson <ian at hixie.ch></dd>
+   <dt>Intended usage:</dt>
+   <dd>Common</dd>
+   <dt>Restrictions on usage:</dt>
+   <dd>No restrictions apply.</dd>
+   <dt>Author:</dt>
+   <dd>Ian Hickson <ian at hixie.ch></dd>
+   <dt>Change controller:</dt>
+   <dd>W3C</dd>
+  </dl>
+
+  <p>Fragment identifiers have no meaning with
+  <code>text/vtt</code> resources.</p>
+
 <!--END webvtt-->
 
+
 <!--START complete-->
 
 <!--TOPIC:Video and Audio-->
@@ -108454,6 +109779,7 @@
   </table>
 
 
+<!--CLEANUP-->
   <h3>Replaced elements</h3>
 
   <h4>Embedded content</h4>
@@ -108505,7 +109831,7 @@
   <p>Any subtitles or captions are expected to be overlayed directly
   on top of their <code>video</code> element, as defined by the
   relevant rendering rules; for <span>WebVTT</span>, those are the
-  <span>WebVTT cue text rendering rules</span>. <a href="#refsWEBVTT">[WEBVTT]</a></p>
+  <span>rules for updating the display of WebVTT text tracks</span>. <a href="#refsWEBVTT">[WEBVTT]</a></p>
 
   <p>When the user agent starts <span title="expose a user interface
   to the user">exposing a user interface</span> for a
@@ -108531,1220 +109857,7 @@
 iframe[seamless] { display: block; }
 <span id="video-object-fit">video { object-fit: contain; }</span></pre>
 
-  </div>
 
-
-<!--END complete--><!--END dev-html-->
-<!--START webvtt--><!--TOPIC:Video Text Tracks-->
-
-  <h3><dfn>WebVTT cue text rendering rules</dfn></h3>
-
-  <p>The <dfn>rules for updating the display of WebVTT text
-  tracks</dfn> render the <span title="text track">text
-  tracks</span> of a <span>media element</span> (specifically, a
-  <code>video</code> element), or of another playback mechanism, by
-  applying the steps below. All the <span title="text track">text
-  tracks</span> that use these rules for a given <span>media
-  element</span>, or other playback mechanism, are rendered together,
-  to avoid overlapping subtitles from multiple tracks.</p>
-
-  <p>The output of the steps below is a set of CSS boxes that covers
-  the rendering area of the <span>media element</span> or other
-  playback mechanism, which user agents are expected to render in a
-  manner suiting the user.</p>
-
-  <p>The rules are as follows:</p>
-
-  <ol>
-
-   <li><p>If the <span>media element</span> is an <code>audio</code>
-   element, or is another playback mechanism with no rendering area,
-   abort these steps. There is nothing to render.</p></li>
-
-   <li><p>Let <var title="">video</var> be the <span>media
-   element</span> or other playback mechanism.</p></li>
-
-   <li><p>Let <var title="">output</var> be an empty list of
-   absolutely positioned CSS block boxes.</p></li>
-
-   <li><p>If the user agent is <span title="expose a user interface to
-   the user">exposing a user interface</span> for <var
-   title="">video</var>, add to <var title="">output</var> one or more
-   completely transparent positioned CSS block boxes that cover the
-   same region as the user interface.</p>
-
-   <li><p>If the last time these rules were run, the user agent was
-   not <span title="expose a user interface to the user">exposing a
-   user interface</span> for <var title="">video</var>, but now it is,
-   optionally let <var title="">reset</var> be true. Otherwise, let <var
-   title="">reset</var> be false.</p>
-
-   <li><p>Let <var title="">tracks</var> be the subset of <var
-   title="">video</var>'s <span>list of text tracks</span> that have
-   as their <span>rules for updating the text track rendering</span>
-   these <span>rules for updating the display of WebVTT text
-   tracks</span>, and whose <span>text track mode</span> is <span
-   title="text track showing">showing</span>.</p></li>
-
-   <li><p>Let <var title="">cues</var> be an empty list of <span
-   title="text track cue">text track cues</span>.</p></li>
-
-   <li><p>For each track <var title="">track</var> in <var
-   title="">tracks</var>, append to <var title="">cues</var> all the
-   <span title="text track cue">cues</span> from <var
-   title="">track</var>'s <span title="text track list of cues">list
-   of cues</span> that have their <span>text track cue active
-   flag</span> set.</p></li>
-
-   <li><p>If <var title="">reset</var> is false, then, for each
-   <span>text track cue</span> <var title="">cue</var> in <var
-   title="">cues</var>: if <var title="">cue</var>'s <span>text track
-   cue display state</span> has a set of CSS boxes, then add those
-   boxes to <var title="">output</var>, and remove <var
-   title="">cue</var> from <var title="">cues</var>.</p></li>
-
-   <li>
-
-    <p>For each <span>text track cue</span> <var title="">cue</var>
-    in <var title="">cues</var> that has not yet had corresponding CSS
-    boxes added to <var title="">output</var>, in <span>text track
-    cue order</span>, run the following substeps:</p>
-
-    <ol>
-
-     <li><p>Let <var title="">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 title="">cue</var>'s
-     <span>text track cue text</span>.</p>
-
-     <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 title="">nodes</var>, in a pre-order,
-      depth-first traversal, excluding <span title="WebVTT Ruby Text
-      Object">WebVTT Ruby Text Objects</span> 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>
-
-     <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 title="">direction</var> be 'ltr',
-      otherwise, let it be 'rtl'.</p>
-
-     </li>
-
-     <li><p>If the <span>text track cue writing direction</span> is
-     <span title="text track cue horizontal writing
-     direction">horizontal</span>, then let <var
-     title="">writing-mode</var> be 'horizontal-tb'. Otherwise, if the
-     <span>text track cue writing direction</span> is <span
-     title="text track cue vertical growing left writing
-     direction">vertical growing left</span>, then let <var
-     title="">writing-mode</var> be 'vertical-rl'. Otherwise, the
-     <span>text track cue writing direction</span> is <span
-     title="text track cue vertical growing right writing
-     direction">vertical growing right</span>; let <var
-     title="">writing-mode</var> be 'vertical-lr'.</p></li>
-
-     <li>
-
-      <p>Determine the value of <var title="">maximum size</var> for
-      <var title="">cue</var> as per the appropriate rules from the
-      following list:</p>
-
-      <dl class="switch">
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>,
-              and <var title="">direction</var> is 'ltr'</dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>,
-              and <var title="">direction</var> is 'rtl'</dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-          and the <span>text track cue alignment</span> is <span title="text track cue left alignment">left</span></dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
-              and the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>
-              or <span title="text track cue left alignment">left</span></dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
-              and the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>
-              or <span title="text track cue left alignment">left</span></dt>
-       <dd>
-        <p>Let <var title="">maximum size</var> be the <span>text track cue text position</span> subtracted from 100.</p>
-       </dd>
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>,
-              and <var title="">direction</var> is 'ltr'</dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>,
-              and <var title="">direction</var> is 'rtl'</dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-          and the <span>text track cue alignment</span> is <span title="text track cue right alignment">right</span></dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
-              and the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>
-              or <span title="text track cue right alignment">right</span></dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
-              and the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>
-              or <span title="text track cue right alignment">right</span></dt>
-       <dd>
-        <p>Let <var title="">maximum size</var> be the <span>text track cue text position</span>.</p>
-       </dd>
-
-       <dt>If the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span>,
-              the <span>text track cue text position</span> is less than or equal to 50</dt>
-       <dd>
-        <p>Let <var title="">maximum size</var> be the <span>text track cue text position</span> multiplied by two.</p>
-       </dd>
-
-       <dt>If the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span>,
-              the <span>text track cue text position</span> is greater than <!-- or equal to --> 50</dt>
-       <dd>
-        <p>Let <var title="">maximum size</var> be the result of subtracting <span>text track cue text position</span> from 100 and then multiplying the result by two.</p>
-       </dd>
-
-      </dl>
-
-     </li>
-
-     <li><p>If the <span>text track cue size</span> is less than <var
-     title="">maximum size</var>, then let <var title="">size</var> be
-     <span>text track cue size</span>. Otherwise, let <var
-     title="">size</var> be <var title="">maximum size</var>.</p></li>
-
-     <li><p>If the <span>text track cue writing direction</span> is
-     <span title="text track cue horizontal writing
-     direction">horizontal</span>, then let <var title="">width</var>
-     be '<var title="">size</var>&#x2009;vw' and <var
-     title="">height</var> be 'auto'. Otherwise, let <var
-     title="">width</var> be 'auto' and <var title="">height</var> be
-     '<var title="">size</var>&#x2009;vh'. (These are CSS values used
-     by the next section to set CSS properties for the rendering; 'vw'
-     and 'vh' are CSS units.) <a
-     href="#refsCSSVALUES">[CSSVALUES]</a></p></li>
-
-     <li>
-
-      <p>Determine the value of <var title="">x-position</var> or <var
-      title="">y-position</var> for <var title="">cue</var> as per the
-      appropriate rules from the following list:</p>
-
-      <dl class="switch">
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>,
-              and <var title="">direction</var> is 'ltr'</dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue left alignment">left</span>,
-              and <var title="">direction</var> is 'ltr'</dt>
-       <dd>
-        <p>Let <var title="">x-position</var> be the <span>text track cue text position</span>.</p>
-       </dd>
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>,
-              and <var title="">direction</var> is 'rtl'</dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue left alignment">left</span>,
-              and <var title="">direction</var> is 'rtl'</dt>
-       <dd>
-        <p>Let <var title="">x-position</var> be the <span>text track cue text position</span> subtracted from 100.</p>
-       </dd>
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>,
-              and <var title="">direction</var> is 'ltr'</dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue right alignment">right</span>,
-              and <var title="">direction</var> is 'ltr'</dt>
-       <dd>
-        <p>Let <var title="">x-position</var> be the <span>text track cue text position</span> minus <var title="">size</var>.</p>
-       </dd>
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>,
-              and <var title="">direction</var> is 'rtl'</dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue right alignment">right</span>,
-              and <var title="">direction</var> is 'rtl'</dt>
-       <dd>
-        <p>Let <var title="">x-position</var> be the <span>text track cue text position</span> subtracted from 100, minus <var title="">size</var>.</p>
-       </dd>
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
-              and the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>
-              or <span title="text track cue left alignment">left</span></dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
-              and the <span>text track cue alignment</span> is <span title="text track cue start alignment">start</span>
-              or <span title="text track cue left alignment">left</span></dt>
-       <dd>
-        <p>Let <var title="">y-position</var> be the <span>text track cue text position</span>.</p>
-       </dd>
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
-              and the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>
-              or <span title="text track cue right alignment">right</span></dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
-              and the <span>text track cue alignment</span> is <span title="text track cue end alignment">end</span>
-              or <span title="text track cue right alignment">right</span></dt>
-       <dd>
-        <p>Let <var title="">y-position</var> be the <span>text track cue text position</span> minus <var title="">size</var>.</p>
-       </dd>
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span>,
-              and <var title="">direction</var> is 'ltr'</dt>
-       <dd>
-        <p>Let <var title="">x-position</var> be the <span>text track cue text position</span> minus half of <var title="">size</var>.</p>
-       </dd>
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span>,
-              and <var title="">direction</var> is 'rtl'</dt>
-       <dd>
-        <p>Let <var title="">x-position</var> be the <span>text track cue text position</span> subtracted from 100, minus half of <var title="">size</var>.</p>
-       </dd>
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
-              and the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span></dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
-              and the <span>text track cue alignment</span> is <span title="text track cue middle alignment">middle</span></dt>
-       <dd>
-        <p>Let <var title="">y-position</var> be the <span>text track cue text position</span> minus half of <var title="">size</var>.</p>
-       </dd>
-
-      </dl>
-
-     </li>
-
-     <li>
-
-      <p>Determine the value of whichever of <var
-      title="">x-position</var> or <var title="">y-position</var> is
-      not yet calculated for <var title="">cue</var> as per the
-      appropriate rules from the following list:</p>
-
-      <dl class="switch">
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              and the <span>text track cue snap-to-lines flag</span> is set</dt>
-       <dd>
-        <p>Let <var title="">y-position</var> be zero.</p>
-       </dd>
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-              and the <span>text track cue snap-to-lines flag</span> is not set</dt>
-       <dd>
-        <p>Let <var title="">y-position</var> be the <span>text track cue computed line position</span>.</p>
-       </dd>
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
-              and the <span>text track cue snap-to-lines flag</span> is set</dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
-              and the <span>text track cue snap-to-lines flag</span> is set</dt>
-       <dd>
-        <p>Let <var title="">x-position</var> be zero.</p>
-       </dd>
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span>,
-              and the <span>text track cue snap-to-lines flag</span> is not set</dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span>,
-              and the <span>text track cue snap-to-lines flag</span> is not set</dt>
-       <dd>
-        <p>Let <var title="">x-position</var> be the <span>text track cue computed line position</span>.</p>
-       </dd>
-
-      </dl>
-
-      <p class="note">These are not final positions, they are merely
-      temporary positions used to calculate box dimensions below.</p>
-
-     </li>
-
-     <li>
-
-      <p>If the <span>text track cue snap-to-lines flag</span> is set, then run the appropriate
-      steps from the following list:</p>
-
-      <dl class="switch">
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span></dt>
-       <dd>
-
-        <ol>
-
-         <li><p>Let <var title="">edge margin</var> be a user-agent-defined horizontal length,
-         expressed as a percentage of the width of the <var title="">video</var>'s rendering area,
-         which will be used to define a margin at the left and right edges of the video into which
-         this cue will not be placed. In situations with overscan, this margin should be sufficient
-         to place the cue within the title-safe area. In the absence of overscan, this value should
-         be picked for aesthetics (to avoid text being aligned precisely on the left or right edge
-         of the video, which can be ugly).</p></li>
-
-         <li><p>If <var title="">x-position</var> is less than <var title="">edge margin</var> and
-         the sum of <var title="">x-position</var> and <var title="">size</var> is more than <var
-         title="">edge margin</var>, then increase <var title="">x-position</var> by <var
-         title="">edge margin</var> and decrease <var title="">size</var> by the same
-         amount.</p></li>
-
-         <li><p>Let <var title="">right margin edge</var> be 100 minus <var title="">edge
-         margin</var>.</p></li>
-
-         <li><p>If <var title="">x-position</var> is less than <var title="">right margin
-         edge</var>, and the sum of <var title="">x-position</var> and <var title="">size</var> is
-         more than <var title="">right margin edge</var>, then decrease <var title="">size</var> by
-         <var title="">edge margin</var>.</p></li>
-
-        </ol>
-
-       </dd>
-
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span></dt>
-       <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span></dt>
-       <dd>
-
-        <ol>
-
-         <li><p>Let <var title="">edge margin</var> be a user-agent-defined vertical length,
-         expressed as a percentage of the height of the <var title="">video</var>'s rendering area,
-         which will be used to define a margin at the top and bottom edges of the video into which
-         this cue will not be placed. In situations with overscan, this margin should be sufficient
-         to place the cue within the title-safe area. In the absence of overscan, this value should
-         be picked for aesthetics (to avoid text being aligned precisely on the top or bottom edge
-         of the video, which can be ugly).</p></li>
-
-         <li><p>If <var title="">y-position</var> is less than <var title="">edge margin</var> and
-         the sum of <var title="">y-position</var> and <var title="">size</var> is more than <var
-         title="">edge margin</var>, then increase <var title="">y-position</var> by <var
-         title="">edge margin</var> and decrease <var title="">size</var> by the same
-         amount.</p></li>
-
-         <li><p>Let <var title="">bottom margin edge</var> be 100 minus <var title="">edge
-         margin</var>.</p></li>
-
-         <li><p>If <var title="">y-position</var> is less than <var title="">bottom margin
-         edge</var>, and the sum of <var title="">y-position</var> and <var title="">size</var> is
-         more than <var title="">right margin edge</var>, then decrease <var title="">size</var> by
-         <var title="">edge margin</var>.</p></li>
-
-        </ol>
-
-       </dd>
-
-      </dl>
-
-     </li>
-
-     <li><p>Let <var title="">left</var> be '<var
-     title="">x-position</var>&#x2009;vw' and <var title="">top</var>
-     be '<var title="">y-position</var>&#x2009;vh'. (These again are
-     CSS values used by the next section to set CSS properties for the
-     rendering; 'vw' and 'vh' are CSS units.) <a
-     href="#refsCSSVALUES">[CSSVALUES]</a></p></li>
-
-     <li>
-
-      <p>Apply the terms of the CSS specifications to <var
-      title="">nodes</var> within the following constraints, thus
-      obtaining a set of CSS boxes positioned relative to an initial
-      containing block: <a href="#refsCSS">[CSS]</a></p>
-
-      <ul>
-
-       <li><p>The <i>document tree</i> is the tree of <span
-       title="WebVTT Node Object">WebVTT Node Objects</span> rooted at
-       <var title="">nodes</var>.</p></li>
-
-       <li><p>For the purposes of processing by the CSS specification,
-       <span title="WebVTT Internal Node Object">WebVTT Internal Node
-       Objects</span> are equivalent to elements with the same
-       contents.</p></li>
-
-       <li>For the purposes of processing by the CSS
-       specification, <span title="WebVTT Text Object">WebVTT Text
-       Objects</span> are equivalent to <code>Text</code> nodes.</li>
-
-       <li>No style sheets are associated with <var
-       title="">nodes</var>. (The nodes are subsequently restyled
-       using style sheets after their boxes are generated, as
-       described below.)</li>
-
-       <li>The children of the <var title="">nodes</var> must be
-       wrapped in an anonymous box whose 'display' property has the
-       value 'inline'. This is the <dfn>WebVTT cue background
-       box</dfn>.</li>
-
-       <li>Runs of children of <span title="WebVTT Ruby Object">WebVTT
-       Ruby Objects</span> that are not <span title="WebVTT Ruby Text
-       Object">WebVTT Ruby Text Objects</span> must be wrapped in
-       anonymous boxes whose 'display' property has the value
-       'ruby-base'. <a href="#refsCSSRUBY">[CSSRUBY]</a></li>
-
-       <li>Properties on <span title="WebVTT Node Object">WebVTT Node
-       Objects</span> have their values set as defined in the next
-       section. (That section uses some of the variables whose values
-       were calculated earlier in this algorithm.)</li>
-
-       <li>Text runs must be wrapped according to the CSS
-       line-wrapping rules, with the following additional constraints:
-
-        <ul>
-
-         <li>Regardless of the value of the 'white-space' property,
-         lines must be wrapped at the edge of their containing blocks,
-         even if doing so requires splitting a word where there is no
-         line breaking opportunity. (Thus, normally text wraps as
-         needed, but if there is a particularly long word, it does not
-         overflow as it normally would in CSS, it is instead forcibly
-         wrapped at the box's edge.)</li>
-
-         <li>Regardless of the value of the 'white-space' property,
-         any line breaks inserted by the user agent for the purposes
-         of line wrapping must be placed so as to minimize Δ
-         across each run of consecutive lines between preserved
-         newlines in the source. Δ for a set of lines is defined
-         as the sum over each line of the absolute of the difference
-         between the line's length and the mean line length of the
-         set.</li>
-
-        </ul>
-
-       </li>
-
-       <li>The viewport (and initial containing block) is
-       <var title="">video</var>'s rendering area.</li>
-
-      </ul>
-
-      <p>Let <var title="">boxes</var> be the boxes generated as
-      descendants of the initial containing block, along with their
-      positions.</p>
-
-     </li>
-
-     <li><p>If there are no line boxes in <var title="">boxes</var>,
-     skip the remainder of these substeps for <var
-     title="">cue</var>. The cue is ignored.</p></li>
-
-     <li>
-
-      <p>Adjust the positions of <var title="">boxes</var> according
-      to the appropriate steps from the following list:</p>
-
-      <dl class="switch">
-
-       <dt>If <var title="">cue</var>'s <span>text track cue snap-to-lines flag</span> is set</dt>
-
-       <dd>
-
-        <p>Many of the steps in this algorithm vary according to the
-        <span>text track cue writing direction</span>. Steps labeled
-        "<strong>Horizontal</strong>" must be followed only when the
-        <span>text track cue writing direction</span> is <span
-        title="text track cue horizontal writing
-        direction">horizontal</span>, steps labeled
-        "<strong>Vertical</strong>" must be followed when the
-        <span>text track cue writing direction</span> is either <span
-        title="text track cue vertical growing left writing
-        direction">vertical growing left</span> or <span title="text
-        track cue vertical growing right writing direction">vertical
-        growing right</span>, steps labeled "<strong>Vertical Growing
-        Left</strong>" must be followed only when the <span>text
-        track cue writing direction</span> is <span title="text track
-        cue vertical growing left writing direction">vertical growing
-        left</span>, and steps labeled "<strong>Vertical Growing
-        Right</strong>" must be followed only when the <span>text
-        track cue writing direction</span> is <span title="text track
-        cue vertical growing right writing direction">vertical growing
-        right</span>.</p>
-
-        <ol>
-
-         <li>
-
-          <p><strong>Horizontal</strong>: Let <var title="">margin</var> be a user-agent-defined
-          vertical length which will be used to define a margin at the top and bottom edges of the
-          video into which cues will not be placed. In situations with overscan, this margin should
-          be sufficient to place all cues within the title-safe area. In the absence of overscan,
-          this value should be picked for aesthetics (to avoid text being aligned precisely on the
-          bottom edge of the video, which can be ugly).</p>
-
-          <p><strong>Vertical</strong>: Let <var title="">margin</var> be a user-agent-defined
-          horizontal length which will be used to define a margin at the left and right edges of the
-          video into which cues will not be placed. In situations with overscan, this margin should
-          be sufficient to place all cues within the title-safe area. In the absence of overscan,
-          this value should be picked for aesthetics (to avoid text being aligned precisely on the
-          left or right edges of the video, which can be ugly).</p>
-
-         </li>
-
-         <li>
-
-          <p><strong>Horizontal</strong>: Let <var title="">full dimension</var> be the height of
-          <var title="">video</var>'s rendering area.</p>
-
-          <p><strong>Vertical</strong>: Let <var title="">full dimension</var> be the width of <var
-          title="">video</var>'s rendering area.</p>
-
-          <p>These dimensions must not be adjusted for overscan. (The algorithm does that
-          separately.)</p>
-
-         </li>
-
-         <li>
-
-          <p>Let <var title="">max dimension</var> be <span title=""><var
-          title="">full dimension</var> - (2 × <var
-          title="">margin</var>)</span>.</p>
-
-         </li>
-
-         <li>
-
-          <p><strong>Horizontal</strong>: Let <var title="">step</var>
-          be the height of the first line box in <var
-          title="">boxes</var>.</p>
-
-          <p><strong>Vertical</strong>: Let <var title="">step</var>
-          be the width of the first line box in <var
-          title="">boxes</var>.</p>
-
-         </li>
-
-         <li><p>If <var title="">step</var> is zero, then jump to the
-         step labeled <i>done positioning</i> below.</p></li>
-
-         <li><p>Let <var title="">line position</var> be the
-         <span>text track cue computed line position</span>.</p></li>
-
-         <li><p><strong>Vertical Growing Left</strong>: Add one to
-         <var title="">line position</var> then negate it.</p></li>
-
-         <li><p>Let <var title="">position</var> be the result of
-         multiplying <var title="">step</var> and <var title="">line
-         position</var>.</p></li>
-
-         <li><p><strong>Vertical Growing Left</strong>: Decrease <var
-         title="">position</var> by the width of the bounding box of
-         the boxes in <var title="">boxes</var>, then increase <var
-         title="">position</var> by <var title="">step</var>.</p></li>
-
-         <li>
-
-          <p>If <var title="">line position</var> is less than zero then increase <var
-          title="">position</var> by <var title="">max dimension</var>, and negate <var
-          title="">step</var>.</p>
-
-          <p>Otherwise, increase <var title="">position</var> by <var title="">margin</var>.</p>
-
-         </li>
-
-         <li>
-
-          <p><strong>Horizontal</strong>: Move all the boxes in <var
-          title="">boxes</var> down by the distance given by <var
-          title="">position</var>.</p>
-
-          <p><strong>Vertical</strong>: Move all the boxes in <var
-          title="">boxes</var> right by the distance given by <var
-          title="">position</var>.</p>
-
-         </li>
-
-         <li><p>Remember the position of all the boxes in <var title="">boxes</var> as their <var
-         title="">specified position</var>.</p></li>
-
-         <li><p>Let <var title="">best position</var> be null. It will hold a position for <var
-         title="">boxes</var>, much like <var title="">specified position</var> in the previous
-         step.</p>
-
-         <li><p>Let <var title="">best position score</var> be null.</p></li>
-
-         <li><p>Let <var title="">switched</var> be false.</p></li>
-
-         <li>
-
-          <p><strong>Horizontal</strong>: Let <var title="">title area</var> be a box that covers
-          all of the <var title="">video</var>'s rendering area except for a height of <var
-          title="">margin</var> at the top of the rendering area and a height of <var
-          title="">margin</var> at the bottom of the rendering area.</p>
-
-          <p><strong>Vertical</strong>: Let <var title="">title area</var> be a box that covers all
-          of the <var title="">video</var>'s rendering area except for a width of <var
-          title="">margin</var> at the left of the rendering area and a width of <var
-          title="">margin</var> at the right of the rendering area.</p>
-
-         </li>
-
-         <li><p><i>Step loop</i>: If none of the boxes in <var title="">boxes</var> would overlap
-         any of the boxes in <var title="">output</var>, and all of the boxes in <var
-         title="">output</var> are entirely within the <var title="">title area</var> box, then jump
-         to the step labeled <i>done positioning</i> below.</p></li>
-
-         <li><p>Let <var title="">current position score</var> be the percentage of the area of the
-         bounding box of the boxes in <var title="">boxes</var> that <!--overlaps the boxes in <var
-         title="">output</var> (if any) or that--> is outside the <var title="">title area</var>
-         box.</p></li>
-
-         <li>
-
-          <p>If <var title="">best position</var> is null (i.e. this is the first run through this
-          loop, <var title="">switched</var> is still false, the boxes in <var title="">boxes</var>
-          are at their <var title="">specified position</var>, and <var title="">best position
-          score</var> is still null), or if <var title="">current position score</var> is a lower
-          percentage than that in <var title="">best position score</var>, then remember the
-          position of all the boxes in <var title="">boxes</var> as their <var title="">best
-          position</var>, and set <var title="">best position score</var> to <var title="">current
-          position score</var>.</p>
-
-         </li>
-
-         <li>
-
-          <p><strong>Horizontal</strong>: If <var title="">step</var> is negative and the top of the
-          first line box in <var title="">boxes</var> is now above the top of the <var
-          title="">title area</var>, or if <var title="">step</var> is positive and the bottom of
-          the first line box in <var title="">boxes</var> is now below the bottom of the <var
-          title="">title area</var>, jump to the step labeled <i>switch direction</i>.</p>
-
-          <p><strong>Vertical</strong>: If <var title="">step</var> is negative and the left edge of
-          the first line box in <var title="">boxes</var> is now to the left of the left edge of the
-          <var title="">title area</var>, or if <var title="">step</var> is positive and the right
-          edge of the first line box in <var title="">boxes</var> is now to the right of the right
-          edge of the <var title="">title area</var>, jump to the step labeled <i>switch
-          direction</i>.</p>
-
-         </li>
-
-         <li>
-
-          <p><strong>Horizontal</strong>: Move all the boxes in <var
-          title="">boxes</var> down by the distance given by <var
-          title="">step</var>. (If <var title="">step</var> is
-          negative, then this will actually result in an upwards
-          movement of the boxes in absolute terms.)</p>
-
-          <p><strong>Vertical</strong>: Move all the boxes in <var
-          title="">boxes</var> right by the distance given by <var
-          title="">step</var>. (If <var title="">step</var> is
-          negative, then this will actually result in a leftwards
-          movement of the boxes in absolute terms.)</p>
-
-         </li>
-
-         <li><p>Jump back to the step labeled <i>step loop</i>.</p></li>
-
-         <li><p><i>Switch direction</i>: If <var title="">switched</var> is true, then move all the
-         boxes in <var title="">boxes</var> back to their <var title="">best position</var>, and
-         jump to the step labeled <i>done positioning</i> below.</p></li>
-
-         <li><p>Otherwise, move all the boxes in <var title="">boxes</var> back to their <var
-         title="">specified position</var> as determined in the earlier step.</p></li>
-
-         <li><p>Negate <var title="">step</var>.</p></li>
-
-         <li><p>Set <var title="">switched</var> to true.</p></li>
-
-         <li><p>Jump back to the step labeled <i>step loop</i>.</p></li>
-
-        </ol>
-
-       </dd>
-
-       <dt>If <var title="">cue</var>'s <span>text track cue snap-to-lines flag</span> is not set</dt>
-       <dd>
-
-        <ol>
-
-         <li>
-
-          <p>Set up <var title="">x</var> and <var title="">y</var> as
-          follows:</p>
-
-          <dl class="switch">
-
-           <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-                  and <var title="">direction</var> is 'ltr'</dt>
-           <dd>
-            <p>Let <var title="">x</var> be a percentage given by the
-            <span>text track cue text position</span>, and let <var
-            title="">y</var> be a percentage given by the <span>text
-            track cue computed line position</span>.</p>
-           </dd>
-
-           <dt>If the <span>text track cue writing direction</span> is <span title="text track cue horizontal writing direction">horizontal</span>,
-                  and <var title="">direction</var> is 'rtl'</dt>
-           <dd>
-            <p>Let <var title="">x</var> be a percentage given by the
-            <span>text track cue text position</span> subtracted from
-            100, and let <var title="">y</var> be a percentage given
-            by the <span>text track cue computed line position</span>.</p>
-           </dd>
-
-           <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing left writing direction">vertical growing left</span></dt>
-           <dd>
-            <p>Let <var title="">x</var> be a percentage given by the
-            <span>text track cue computed line position</span> subtracted from
-            100, and let <var title="">y</var> be a percentage given
-            by the <span>text track cue text position</span>.</p>
-           </dd>
-
-           <dt>If the <span>text track cue writing direction</span> is <span title="text track cue vertical growing right writing direction">vertical growing right</span></dt>
-           <dd>
-            <p>Let <var title="">x</var> be a percentage given by the
-            <span>text track cue computed line position</span>, and let <var
-            title="">y</var> be a percentage given by the <span>text
-            track cue text position</span>.</p>
-           </dd>
-
-          </dl>
-
-         </li>
-
-         <li><p>Position the boxes in <var title="">boxes</var> such
-         that the point <var title="">x</var>% along the width of the
-         bounding box of the boxes in <var title="">boxes</var> is
-         <var title="">x</var>% of the way across the width of the
-         <var title="">video</var>'s rendering area, and the point
-         <var title="">y</var>% along the height of the bounding box
-         of the boxes in <var title="">boxes</var> is <var
-         title="">y</var>% of the way across the height of the <var
-         title="">video</var>'s rendering area, while maintaining the
-         relative positions of the boxes in <var title="">boxes</var>
-         to each other.</p></li>
-
-         <li><p>If none of the boxes in <var title="">boxes</var>
-         would overlap any of the boxes in <var title="">output</var>,
-         and all the boxes in <var title="">output</var> are within
-         the <var title="">video</var>'s rendering area, then jump to
-         the step labeled <i>done positioning</i> below.</p></li>
-
-         <li><p>If there is a position to which the boxes in <var
-         title="">boxes</var> can be moved while maintaining the
-         relative positions of the boxes in <var title="">boxes</var>
-         to each other such that none of the boxes in <var
-         title="">boxes</var> would overlap any of the boxes in <var
-         title="">output</var>, and all the boxes in <var
-         title="">output</var> would be within the <var
-         title="">video</var>'s rendering area, then move the boxes in
-         <var title="">boxes</var> to the closest such position to
-         their current position, and then jump to the step labeled
-         <i>done positioning</i> below. If there are multiple such
-         positions that are equidistant from their current position,
-         use the highest one amongst them; if there are several at
-         that height, then use the leftmost one amongst them.</p></li>
-
-         <li><p>Otherwise, jump to the step labeled <i>done
-         positioning</i> below. (The boxes will unfortunately
-         overlap.)</p></li>
-
-        </ol>
-
-       </dd>
-
-      </dl>
-
-     </li>
-
-     <li><p><i>Done positioning</i>: If there are any line boxes in
-     the (possibly now repositioned) <var title="">boxes</var> that do
-     not completely fit inside <var title="">video</var>'s rendering
-     area, remove those offending line boxes from <var
-     title="">boxes</var>.</p></li>
-
-     <li><p>Let <var title="">cue</var>'s <span>text track cue
-     display state</span> have the CSS boxes in <var
-     title="">boxes</var>.</p></li>
-
-     <li><p>Add the CSS boxes in <var title="">boxes</var> to <var
-     title="">output</var>.</p></li>
-
-    </ol>
-
-   </li>
-
-   <li><p>Return <var title="">output</var>.</p></li>
-
-  </ol>
-
-  <p>User agents may allow the user to override the above algorithm's
-  positioning of cues, e.g. by dragging them to another location on
-  the <code>video</code>, or even off the <code>video</code>
-  entirely.</p>
-
-
-  <h4>Applying CSS properties to <span title="WebVTT Node Object">WebVTT Node Objects</span></h4>
-
-  <p>When following the <span>rules for updating the display of WebVTT
-  text tracks</span>, user agents must set properties of <span
-  title="WebVTT Node Object">WebVTT Node Objects</span> at the CSS
-  user agent cascade layer as defined in this section. <a
-  href="#refsCSS">[CSS]</a></p>
-
-  <p>On the (root) <span>List of WebVTT Node Objects</span>, 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>,
-  <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
-  the <span>rules for updating the display of WebVTT text
-  tracks</span> for the <span>text track cue</span> from whose <span
-  title="text track cue text">text</span> the <span>List of WebVTT
-  Node Objects</span> was constructed.</p>
-
-  <p>The 'text-align' property on the (root) <span>List of WebVTT Node
-  Objects</span> 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
-  corresponding <span title="text track cue">cue</span>'s <span>text
-  track cue alignment</span>:</p>
-
-  <table>
-   <thead>
-    <tr> <th><span>Text track cue alignment</span> <th> 'text-align' value
-   <tbody>
-    <tr> <td><span title="text track cue start alignment">Start alignment</span> <td> 'start'
-    <tr> <td><span title="text track cue middle alignment">Middle alignment</span> <td> 'center'
-    <tr> <td><span title="text track cue end alignment">End alignment</span> <td> 'end'
-    <tr> <td><span title="text track cue left alignment">Left alignment</span> <td> 'left'
-    <tr> <td><span title="text track cue right alignment">Right alignment</span> <td> 'right'
-  </table>
-
-  <p>The 'font' shorthand property on the (root) <span>List of WebVTT
-  Node Objects</span> must be set to '5vh sans-serif'. <a
-  href="#refsCSSRUBY">[CSSRUBY]</a> <a
-  href="#refsCSSVALUES">[CSSVALUES]</a></p>
-
-  <p>The 'color' property on the (root) <span>List of WebVTT Node
-  Objects</span> must be set to 'rgba(255,255,255,1)'. <a
-  href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
-
-  <p>The 'background' shorthand property on the <span>WebVTT cue
-  background box</span> must be set to 'rgba(0,0,0,0.8)'. <a
-  href="#refsCSSCOLOR">[CSSCOLOR]</a></p>
-
-  <p>A text outline or stroke may also be set on the (root) <span>List
-  of WebVTT Node Objects</span>, if supported.</p> <!-- 'text-outline'
-  is in CSS3 Text, but Tab says that's awaiting medical attention. -->
-
-  <p>The 'white-space' property on the (root) <span>List of WebVTT
-  Node Objects</span> must be set to 'pre-line'. <a
-  href="#refsCSS">[CSS]</a></p>
-
-  <p>The 'font-style' property on <span title="WebVTT Italic
-  Object">WebVTT Italic Objects</span> must be set to 'italic'.</p>
-
-  <p>The 'font-weight' property on <span title="WebVTT Bold
-  Object">WebVTT Bold Objects</span> must be set to 'bold'.</p>
-
-  <p>The 'text-decoration' property on <span title="WebVTT Underline
-  Object">WebVTT Underline Objects</span> must be set to 'underline'.</p>
-
-  <p>The 'display' property on <span title="WebVTT Ruby Object">WebVTT
-  Ruby Objects</span> must be set to 'ruby'. <a
-  href="#refsCSSRUBY">[CSSRUBY]</a></p>
-
-  <p>The 'display' property on <span title="WebVTT Ruby Text
-  Object">WebVTT Ruby Text Objects</span> must be set to
-  'ruby-text'. <a href="#refsCSSRUBY">[CSSRUBY]</a></p>
-
-  <p>All other non-inherited properties must be set to their initial
-  values; inherited properties on the root <span>List of WebVTT Node
-  Objects</span> must inherit their values from the <span>media
-  element</span> for which the <span>text track cue</span> is being
-  rendered, if any. If there is no <span>media element</span> (i.e. if
-  the <span>text track</span> is being rendered for another media
-  playback mechanism), then inherited properties on the root
-  <span>List of WebVTT Node Objects</span> must take their initial
-  values.</p>
-
-  <p>If there are style sheets that apply to the <span>media
-  element</span> or other playback mechanism, then they must be
-  interpreted as defined in the next section.</p>
-
-
-  <h4>CSS extensions</h4>
-
-  <p>When a user agent is rendering one or more <span title="text
-  track cue">text track cues</span> according to the <span>WebVTT cue
-  text rendering rules</span>, <span title="WebVTT Node Object">WebVTT
-  Node Objects</span> in the <span>list of WebVTT Node Objects</span>
-  used in the rendering can be matched by certain pseudo-selectors as
-  defined below. These selectors can begin or stop matching individual
-  <span title="WebVTT Node Object">WebVTT Node Objects</span> while a
-  <span title="text track cue">cue</span> is being rendered, even in
-  between applications of the <span>WebVTT cue text rendering
-  rules</span> (which are only run when the set of active cues
-  changes). User agents that support the pseudo-element described
-  below 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 <span>text track cue</span>'s <span>text track
-  cue display state</span> must be emptied and the <span>text track</span>'s <span>rules for
-  updating the text track rendering</span> must be immediately rerun.</p>
-
-  <p>Pseudo-elements apply to elements that are matched by
-  selectors. For the purpose of this section, that element is the
-  <i>matched element</i>. The pseudo-elements defined in the following
-  sections affect the styling of parts of <span title="text track
-  cue">text track cues</span> that are being rendered for the
-  <i>matched element</i>.</p>
-
-  <p class="note">If the <i>matched element</i> is not a
-  <code>video</code> element, the pseudo-elements defined below won't
-  have any effect according to this specification.</p>
-
-  <p>A CSS user agent that implements the <span title="text
-  track">text tracks</span> model must implement the '::cue' and
-  '::cue(<var title="">selector</var>)' pseudo-elements, and the <span
-  title="past-pseudo-class">':past'</span> and <span
-  title="future-pseudo-class">':future'</span> pseudo-classes.</p>
-
-
-  <h5>The '::cue' pseudo-element</h5>
-
-  <p>The '<dfn title="pseudo-cue">::cue</dfn>' pseudo-element (with no
-  argument) matches any <span>List of WebVTT Node Objects</span>
-  constructed for the <i>matched element</i>, with the exception that
-  the properties corresponding to the 'background' shorthand must be
-  applied to the <span>WebVTT cue background box</span> rather than
-  the <span>List of WebVTT Node Objects</span>.</p>
-
-  <p>The following properties apply to the '::cue' pseudo-element with
-  no argument; other properties set on the pseudo-element must be
-  ignored:</p>
-
-  <ul class="brief">
-   <li>'color'</li>
-   <li>'opacity'</li>
-   <li>'visibility'</li>
-   <li>'text-decoration'</li>
-   <li>'text-outline'</li>
-   <li>'text-shadow'</li>
-   <li>the properties corresponding to the 'background' shorthand</li>
-   <li>the properties corresponding to the 'outline' shorthand</li>
-   <li>the properties corresponding to the 'font' shorthand, including 'line-height'</li>
-   <li>'white-space'</li>
-   <!-- add more... -->
-   <!-- definitely not:
-          display, float, position, top, left, right, bottom, width,
-          height, margin-top, margin-bottom, margin-left, margin-right,
-          clip, clear, content, cursor, direction, max-height,
-          min-height, max-width, min-width, orphans, overflow,
-          page-break-*, text-align, unicode-bidi, widows, z-index
-   -->
-  </ul>
-
-  <p>The '<dfn title="pseudo-cue-selector">::cue(<var
-  title="">selector</var>)</dfn>' pseudo-element with an argument must
-  have an argument that consists of a group of selectors. It matches
-  any <span>WebVTT Internal Node Object</span> constructed for the
-  <i>matched element</i> that also matches the given group of
-  selectors, with the nodes being treated as follows:</p>
-
-  <ul>
-
-   <li><p>The <i>document tree</i> against which the selectors are
-   matched is the tree of <span title="WebVTT Node Object">WebVTT Node
-   Objects</span> rooted at the <span>list of WebVTT Node
-   Objects</span> for the cue.</p></li>
-
-   <li><p><span title="WebVTT Internal Node Object">WebVTT Internal
-   Node Objects</span> are elements in the tree.</p></li>
-
-   <li><span title="WebVTT Leaf Node Object">WebVTT Leaf Node
-   Objects</span> cannot be matched.</li>
-
-   <li>
-
-    <p>For the purposes of element type selectors, the names of <span
-    title="WebVTT Internal Node Object">WebVTT Internal Node
-    Objects</span> are as given by the following table, where objects
-    having the concrete class given in a cell in the first column have
-    the name given by the second column of the same row:</p>
-
-    <table>
-
-     <thead>
-      <tr>
-       <th>Concrete class
-       <th>Name
-
-     <tbody>
-      <tr>
-       <td><span title="WebVTT Class Object">WebVTT Class Objects</span>
-       <td><code title="">c</code>
-
-      <tr>
-       <td><span title="WebVTT Italic Object">WebVTT Italic Objects</span>
-       <td><code title="">i</code>
-
-      <tr>
-       <td><span title="WebVTT Bold Object">WebVTT Bold Objects</span>
-       <td><code title="">b</code>
-
-      <tr>
-       <td><span title="WebVTT Underline Object">WebVTT Underline Objects</span>
-       <td><code title="">u</code>
-
-      <tr>
-       <td><span title="WebVTT Ruby Object">WebVTT Ruby Objects</span>
-       <td><code title="">ruby</code>
-
-      <tr>
-       <td><span title="WebVTT Ruby Text Object">WebVTT Ruby Text Objects</span>
-       <td><code title="">rt</code>
-
-      <tr>
-       <td><span title="WebVTT Voice Object">WebVTT Voice Objects</span>
-       <td><code title="">v</code>
-
-      <tr>
-       <td><span title="WebVTT Language Object">WebVTT Language Objects</span>
-       <td><code title="">lang</code>
-
-      <tr>
-       <td>Other elements (specifically, <span title="List of WebVTT Node Objects">Lists of WebVTT Node Objects</span>)
-       <td>No explicit name.
-
-    </table>
-
-   </li>
-
-   <li><p>For the purposes of element type and universal selectors,
-   <span title="WebVTT Internal Node Object">WebVTT Internal Node
-   Objects</span> are considered as being in the namespace expressed
-   as the empty string.</p></li>
-
-   <li><p>For the purposes of attribute selector matching, <span title="WebVTT Internal Node
-   Object">WebVTT Internal Node Objects</span> have no attributes, except for <span title="WebVTT
-   Voice Object">WebVTT Voice Objects</span>, which have a single attribute named "<code
-   title="">voice</code>" whose value is the value of the <span>WebVTT Voice Object</span>, and
-   <span title="WebVTT Language Object">WebVTT Language Objects</span>, which have a single
-   attribute named "<code title="">lang</code>" whose value is the object's <span title="WebVTT Node
-   Object's applicable language">applicable language</span>.</p></li>
-
-   <li><p>For the purposes of class selector matching, <span
-   title="WebVTT Internal Node Object">WebVTT Internal Node
-   Objects</span> have the classes described as the <span>WebVTT
-   Node Object's applicable classes</span>.</p></li> <!-- ok, this
-   isn't especially well-defined, but the Selectors spec doesn't
-   really give one much to go on here. -->
-
-   <li><p>For the purposes of the <code title="selector-lang">:lang()</code> pseudo-class, <span
-   title="WebVTT Internal Node Object">WebVTT Internal Node Objects</span> have the language
-   described as the <span>WebVTT Node Object's applicable language</span>.</p></li>
-
-   <li><p>For the purposes of ID selector matching, <span title="List
-   of WebVTT Node Objects">Lists of WebVTT Node Objects</span> have
-   the ID given by the cue's <span>text track cue identifier</span>,
-   if any.</p></li>
-
-  </ul>
-
-  <p>The following properties apply to the '::cue()' pseudo-element
-  with an argument:</p>
-
-  <ul class="brief">
-   <li>'color'</li>
-   <li>'opacity'</li>
-   <li>'visibility'</li>
-   <li>'text-decoration'</li>
-   <li>'text-outline'</li>
-   <li>'text-shadow'</li>
-   <li>the properties corresponding to the 'background' shorthand</li>
-   <li>the properties corresponding to the 'outline' shorthand</li>
-   <li>properties relating to the transition and animation features</li>
-   <!-- add more... -->
-   <!-- but definitely not anything that affects dimensions of boxes, e.g. the 'font' shorthand's properties or 'white-space'; those are listed below instead -->
-  </ul>
-
-  <!--v2
-   Would be nice to support transitions that are directional,
-   e.g. changing text fill colour or shadow size of the start of a
-   segment when the segment becomes "past", and having the change
-   propagate towards the end of the segment so that it reaches the end
-   of the segment when the next segment becomes "past".
-  -->
-
-  <p>In addition, the following properties apply to the '::cue()'
-  pseudo-element with an argument when the selector does not contain
-  the <span title="past-pseudo-class">':past'</span> and <span
-  title="future-pseudo-class">':future'</span> pseudo-classes:</p>
-
-  <ul class="brief">
-   <li>the properties corresponding to the 'font' shorthand, including 'line-height'</li>
-   <li>'white-space'</li>
-   <!-- add more... -->
-   <!-- definitely not:
-          display, float, position, top, left, right, bottom, width,
-          height, margin-top, margin-bottom, margin-left, margin-right,
-          clip, clear, content, cursor, direction, max-height,
-          min-height, max-width, min-width, orphans, overflow,
-          page-break-*, text-align, unicode-bidi, widows, z-index
-   -->
-  </ul>
-
-  <p>Properties that do not apply must be ignored.</p>
-
-  <p>As a special exception, the properties corresponding to the
-  'background' shorthand, when they would have been applied to the
-  <span>List of WebVTT Node Objects</span>, must instead be applied to
-  the <span>WebVTT cue background box</span>.</p>
-
-
-  <h5>The ':past' and ':future' pseudo-classes</h5>
-
-  <p>The <span title="past-pseudo-class">':past'</span> and <span
-  title="future-pseudo-class">':future'</span> pseudo-classes
-  sometimes match <span title="WebVTT Node Object">WebVTT Node
-  Objects</span>. <a href="#refsSELECTORS">[SELECTORS]</a></p>
-
-  <p>The <dfn title="past-pseudo-class">':past'</dfn> pseudo-class
-  only matches <span title="WebVTT Node Object">WebVTT Node
-  Objects</span> that are <i>in the past</i>.</p>
-
-  <p>A <span>WebVTT Node Object</span> <var title="">c</var> is
-  <dfn>in the past</dfn> if, in a pre-order, depth-first traversal of
-  the <span>text track cue</span>'s <span>List of WebVTT Node
-  Objects</span>, there exists a <span>WebVTT Timestamp Object</span>
-  whose value is less than the <span>current playback position</span>
-  of the <span>media element</span> that is the <i>matched
-  element</i>, entirely after the <span>WebVTT Node Object</span> <var
-  title="">c</var>.</p>
-
-  <p>The <dfn title="future-pseudo-class">':future'</dfn> pseudo-class
-  only matches <span title="WebVTT Node Object">WebVTT Node
-  Objects</span> that are <i>in the future</i>.</p>
-
-  <p>A <span>WebVTT Node Object</span> <var title="">c</var> is
-  <dfn>in the future</dfn> if, in a pre-order, depth-first traversal
-  of the <span>text track cue</span>'s <span>List of WebVTT Node
-  Objects</span>, there exists a <span>WebVTT Timestamp Object</span>
-  whose value is greater than the <span>current playback
-  position</span> of the <span>media element</span> that is the
-  <i>matched element</i>, entirely before the <span>WebVTT Node
-  Object</span> <var title="">c</var>.</p>
-
-<!--END webvtt-->
-<!--START complete--><!--START dev-html-->
-
-
-<!--TOPIC:Rendering-->
-  <div class="impl">
-
   <h4>Images</h4>
 
   <p>When an <code>img</code> element or an <code>input</code> element
@@ -113083,13 +113196,11 @@
   </div>
 
 
-<!--START webvtt-->
 
   <h2 id="iana">IANA considerations</h2>
 
   <!-- http://www.w3.org/2002/06/registering-mediatype.html -->
 
-<!--END webvtt-->
 
   <h3><dfn><code>text/html</code></dfn></h3>
 
@@ -113702,98 +113813,6 @@
   href="#refsJSON">[JSON]</a></p>
 
 
-<!--END complete--><!--END dev-html-->
-<!--START webvtt-->
-<!--TOPIC:Video Text Tracks-->
-  <h3><dfn><code>text/vtt</code></dfn></h3>
-
-  <p>This registration is for community review and will be submitted
-  to the IESG for review, approval, and registration with IANA.</p>
-
-  <!--
-   To: ietf-types at iana.org
-   Subject: Registration of media type text/cues
-  -->
-
-  <dl>
-   <dt>Type name:</dt>
-   <dd>text</dd>
-   <dt>Subtype name:</dt>
-   <dd>vtt</dd>
-   <dt>Required parameters:</dt>
-   <dd>No parameters</dd>
-   <dt>Optional parameters:</dt>
-   <dd>No parameters</dd>
-   <dt>Encoding considerations:</dt>
-   <dd>8bit (always UTF-8)</dd>
-<!--ADD-TOPIC:Security-->
-   <dt>Security considerations:</dt>
-   <dd>
-    <p>Text track files themselves pose no immediate risk unless
-    sensitive information is included within the
-    data. Implementations, however, are required to follow specific
-    rules when processing text tracks, to ensure that certain
-    origin-based restrictions are honored. Failure to correctly
-    implement these rules can result in information leakage,
-    cross-site scripting attacks, and the like.</p>
-   </dd>
-<!--REMOVE-TOPIC:Security-->
-   <dt>Interoperability considerations:</dt>
-   <dd>
-    <p>Rules for processing both conforming and non-conforming content
-    are defined in this specification.</p>
-   </dd>
-   <dt>Published specification:</dt>
-   <dd>
-    This document is the relevant specification.
-   </dd>
-   <dt>Applications that use this media type:</dt>
-   <dd>
-    Web browsers and other video players.
-   </dd>
-   <dt>Additional information:</dt>
-   <dd>
-    <dl>
-     <dt>Magic number(s):</dt>
-     <dd>
-      <p>WebVTT files all begin with one of the following byte sequences (where "EOF" means the end of the file):</p>
-      <ul class="brief">
-       <li> EF BB BF 57 45 42 56 54 54 0A
-       <li> EF BB BF 57 45 42 56 54 54 0D
-       <li> EF BB BF 57 45 42 56 54 54 20
-       <li> EF BB BF 57 45 42 56 54 54 09
-       <li> EF BB BF 57 45 42 56 54 54 EOF
-       <li>          57 45 42 56 54 54 0A
-       <li>          57 45 42 56 54 54 0D
-       <li>          57 45 42 56 54 54 20
-       <li>          57 45 42 56 54 54 09
-       <li>          57 45 42 56 54 54 EOF
-      </ul>
-      <p class="note">(An optional UTF-8 BOM, the ASCII string "<code title="">WEBVTT</code>", and finally a space, tab, line break, or the end of the file.)
-     </dd>
-     <dt>File extension(s):</dt>
-     <dd>"<code title="">vtt</code>"</dd>
-     <dt>Macintosh file type code(s):</dt>
-     <dd>No specific Macintosh file type codes are recommended for this type.</dd>
-    </dl>
-   </dd>
-   <dt>Person & email address to contact for further information:</dt>
-   <dd>Ian Hickson <ian at hixie.ch></dd>
-   <dt>Intended usage:</dt>
-   <dd>Common</dd>
-   <dt>Restrictions on usage:</dt>
-   <dd>No restrictions apply.</dd>
-   <dt>Author:</dt>
-   <dd>Ian Hickson <ian at hixie.ch></dd>
-   <dt>Change controller:</dt>
-   <dd>W3C</dd>
-  </dl>
-
-  <p>Fragment identifiers have no meaning with
-  <code>text/vtt</code> resources.</p>
-<!--END webvtt-->
-<!--START complete--><!--START dev-html-->
-
 <!--TOPIC:HTML-->
   <h3><dfn title="http-ping-from"><code>Ping-From</code></dfn></h3>
 
@@ -118810,6 +118829,7 @@
   Laura L. Carlson,
   Laura Wisewell,
   Laurens Holst,
+  Lawrence Forooghian,
   Lee Kowalkowski,
   Leif Halvard Silli,
   Lenny Domnitser,