WebVTT: Implement 'best position' from the rendering section

LayoutTests/media/track/track-cue-rendering-best-position.html

Index: LayoutTests/media/track/track-cue-rendering-best-position.html
diff --git a/LayoutTests/media/track/track-cue-rendering-position-auto.html b/LayoutTests/media/track/track-cue-rendering-best-position.html
similarity index 52%
copy from LayoutTests/media/track/track-cue-rendering-position-auto.html
copy to LayoutTests/media/track/track-cue-rendering-best-position.html
index ddf9422ffb451054a64b991ed0544c6255f5ad6a..4d2610b3979580547bc3ed4e97e24cffbc2cf069 100644
--- a/LayoutTests/media/track/track-cue-rendering-position-auto.html
+++ b/LayoutTests/media/track/track-cue-rendering-best-position.html
@@ -3,18 +3,16 @@
 <script>
 var mediaFile = findMediaFile('video', '../content/test');
 
-function addTrackWithCueData(video, cueData) {
-  var track = video.addTextTrack('subtitles');
+function addCue(track, cueData) {
   var cue = new VTTCue(0, 10, 'XXX');
   for (var prop in cueData)
     cue[prop] = cueData[prop];
   track.addCue(cue);
-  track.mode = 'showing';
 }
 </script>
 <style>
 video::cue {
-  font-size: 50px;
+  font-size: 120px;
   color: green;
   background-color: green;
 }
@@ -22,21 +20,10 @@ video::cue {
 <video>
   <script>
   var video = document.currentScript.parentNode;
-  addTrackWithCueData(video, { align: 'start', line: 0 });
-  video.src = mediaFile;
-  </script>
-</video>
-<video>
-  <script>
-  var video = document.currentScript.parentNode;
-  addTrackWithCueData(video, { align: 'middle', line: 0 });
-  video.src = mediaFile;
-  </script>
-</video>
-<video>
-  <script>
-  var video = document.currentScript.parentNode;
-  addTrackWithCueData(video, { align: 'end', line: 0 });
+  var track = video.addTextTrack('subtitles');
+  addCue(track, { line: 0, align: 'start' });
+  addCue(track, { line: 1, align: 'start' });
+  track.mode = 'showing';
   video.src = mediaFile;
   </script>
 </video>