Add ::region-cue pseudo-element.
authorSilvia Pfeiffer
Thu, 14 Feb 2013 15:14:02 +1100
changeset 67 ed44cac9324d
parent 66 c96214825d69
child 68 623848312f6d
Add ::region-cue pseudo-element.
608toVTT/region.html
--- a/608toVTT/region.html	Wed Feb 13 22:11:18 2013 +1100
+++ b/608toVTT/region.html	Thu Feb 14 15:14:02 2013 +1100
@@ -773,7 +773,7 @@
                 <ol>
                   <li><p>Let <var>region</var> be the <a href="#webvtt-region">WebVTT region</a> whose <a href="#webvtt-region-identifier">region identifier</a> matches the <a href="#text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> of <var>cue</var>.</p></li>
 
-                  <li><p>If <var>region</var>'s <a href="#text-track-region-scroll" class="internalDFN">text track region scroll</a> setting is '<code>up</code>' and <var>region</var> already has one or more children, set <var>region</var>'s 'transition-property' to 'top' and 'transition-duration' to '0.433s'.</p></li>
+                  <li><p>If <var>region</var>'s <a href="#text-track-region-scroll" class="internalDFN">text track region scroll</a> setting is '<code>up</code>' and <var>region</var> already has one child, set <var>region</var>'s 'transition-property' to 'top' and 'transition-duration' to '0.433s'.</p></li>
 
                   <li><p>Let <var>nodes</var> be the <span>list of WebVTT Node Objects</span> obtained by applying the <span>WebVTT cue text parsing rules</span> to the <var>cue</var>'s <span>text track cue text</span>.</p></li>
 
@@ -788,7 +788,10 @@
                   <li><p>Let <var>offset</var> be the <span>text track cue text position</span> multiplied by the <var>width</var> of the <a href="#webvtt-region-object">WebVTT region object</a> whose <a href="#webvtt-region-identifier">region identifier</a> is identical to <var>cue</var>'s <a href="#text-track-cue-region-identifier" class="internalDFN">text track cue region identifier</a> and divided by 100 (i.e. interpret it as a percentage of the region width).</p>
                   </li>
 
-                  <li><p>If <var>direction</var> is 'ltr', let <var>left</var> be <var>offset</var> and let <var>rigth</var> be 'auto'; otherwise let <var>left</var> be 'auto' and <var>right</var> be <var>offset</var>.</p></li>
+                  <li><p>If <var>direction</var> is 'ltr' and 'text-align' is 'start' or 'left', or if <var>direction</var> is 'rtl' and 'text-align' is 'end' or 'left', let <var>left</var> be <var>offset</var> and let <var>right</var> be 'auto'</p>
+                    <p>If <var>direction</var> is 'ltr' and 'text-align' is 'end' or 'right', or if <var>direction</var> is 'rtl' and 'text-align' is 'start' or 'right', let <var>left</var> be 'auto' and <var>right</var> be <var>offset</var>.</p>
+                    <p>If 'text-align' is 'middle', ignore the <var>offset</var>.</p>
+                  </li>
 
                   <li><p>Apply the terms of the CSS specifications to <var>nodes</var> in the same way that they are applied to in step 10, substep 12 is applied to <var>nodes</var> of a <var>cue</var> that is not part of a region, except that the initial containing block is <var>region</var>.</p>
                     <p>Let <var>boxes</var> be the boxes generated as descendants of the initial containing block, along with their positions.</p>
@@ -836,8 +839,10 @@
 
         <p>The children of every <a href="#webvtt-region-object">WebVTT region object</a> are not initialised with the <a href="http://dev.w3.org/html5/webvtt/#applying-css-properties-to-webvtt-node-objects" class="externalDFN">CSS properties of (root) List of WebVTT Node Objects</a> but instead with these CSS settings:</p>
         <ul>
+          <li>the 'position' property must be set to 'relative'</li>
           <li>the 'unicode-bidi' property must be set to 'plaintext'</li>
           <li>the 'width' property must be set to 'auto'</li>
+          <li>the 'height' property must be set to <var>height</var></li>
           <li>the 'left' property must be set to <var>left</var></li>
           <li>the 'text-align' property must be set as described for <a href="http://dev.w3.org/html5/webvtt/#applying-css-properties-to-webvtt-node-objects" class="externalDFN">(root) List of WebVTT Node Objects</a> not part of a region</li>
         </ul>
@@ -850,8 +855,21 @@
 
 
     <section>
-      <h3>CSS extensions</h3>
-      <p>XXX ::cue-region([name]) XXX</p>
+      <h3>CSS extension '::cue-region' pseudo-element</h3>
+
+      <p>Pseudo-elements apply to elements that are matched by selectors. For the purpose of this section, that element is the matched element. The pseudo-element defined below affects the styling of text track regions that are being rendered for the matched element.</p>
+
+      <p clss="note">If the matched element is not a video element, the pseudo-element defined below won't have any effect according to this specification.</p>
+
+      <p>The '<dfn id="pseudo-region">::cue-region</dfn>' pseudo-element (with no argument) matches any <span>List of WebVTT region objects</span> constructed for the <i>matched element</i>.</p>
+
+        <p>The <A href="http://dev.w3.org/html5/webvtt/#the-'::cue'-pseudo-element">same properties that apply to '::cue'</a> apply to the '::cue-region' pseudo-element with no argument; other properties set on the pseudo-element must be ignored.</p>
+
+      <p>When a user agent is rendering one or more text track regions according to the WebVTT cue text rendering rules, WebVTT region objects used in the rendering can be matched by the above pseudo-element. User agents that support the pseudo-element must dynamically update renderings accordingly. When either 'white-space' or one of the properties corresponding to the 'font' shorthand (including 'line-height') changes value, then the text track cue display state of all the text track cues in the region must be emptied and the text track's rules for updating the text track rendering must be immediately rerun.</p>
+
+      <p>A CSS user agent that implements the text tracks model must implement the '::cue-region' and '::cue-region(selector)' pseudo-elements.</p>
+
+      </section>
     </section>