[Modern Media Controls] Turn media/modern-media-controls/ios-inline-media-controls...
[WebKit-https.git] / LayoutTests / media / video-source-moved.html
1 <!doctype HTML>
2 <html>
3     <head>
4         <title>moving &lt;source&gt; element test</title>
5         <script src=video-test.js></script>
6         <script src=media-file.js></script>
7         <script>
8
9             var testInfo = 
10             {
11                 current : -1,
12                 tests : 
13                 [
14                     { fcn : moveToEnd, errorCount : 0, moved : null, done : false, iteration : 1},
15                     { fcn : moveToEnd, errorCount : 0, moved : null, done : false, iteration : 2},
16                     { fcn : moveToEnd, errorCount : 0, moved : null, done : false, iteration : 3},
17                     { fcn : moveEarlier, errorCount : 0, moved : null, iteration : 1 },
18                     { fcn : moveEarlier, errorCount : 0, moved : null, iteration : 2 },
19                     { fcn : moveEarlier, errorCount : 0, moved : null, iteration : 3 },
20                     { fcn : moveEarlier, errorCount : 0, moved : null, iteration : 4 }
21                 ]
22             };
23
24             function findCurrentSourceElement()
25             {
26                 var sources = video.getElementsByTagName('source');
27                 var currentSrc = video.currentSrc;
28                 var ndx;
29                 for (ndx = 0; ndx < sources.length; ++ndx) {
30                     if (sources[ndx].src == currentSrc)
31                         break;
32                 }
33                 if (ndx >= sources.length) {
34                     failTest(currentSrc + " not found in &lt;source&gt; list");
35                     return null;
36                 }
37                 return sources[ndx];
38             }
39
40             function moveEarlier(test, event)
41             {
42                 if (test.done)
43                     return;
44
45                 switch (++test.errorCount)
46                 {
47                     case 1:
48                         // Do nothing on the first error event
49                         break;
50
51                     case 2:
52                         var current = findCurrentSourceElement();
53                         switch (test.iteration)
54                         {
55                             case 1:
56                                 consoleWrite("Moving <b>current<" + "/b> &lt;source&gt; element to beginning of list, it should not be processed again.");
57                                 test.moved = video.removeChild(current);
58                                 break;
59                             case 2:
60                                 consoleWrite("Moving <b>next<" + "/b> &lt;source&gt; element to beginning of list, it should never processed.");
61                                 test.moved = video.removeChild(current.nextSibling);
62                                 break;
63                             case 3:
64                                 consoleWrite("&lt;span&gt; inserted after <b>current<" + "/b> &lt;source&gt; element before it is removed, processing should proceed normally.");
65                                 var span = document.createElement("span")
66                                 span.appendChild(document.createTextNode("Your browser doesn't support HTML5 video!"));
67                                 video.insertBefore(span, current.nextSibling);
68                                 test.moved = video.removeChild(current);
69                                 break;
70                             case 4:
71                                 consoleWrite("&lt;span&gt; inserted after <b>next<" + "/b> &lt;source&gt; element before it is removed, processing should proceed normally.");
72                                 var span = document.createElement("span")
73                                 span.appendChild(document.createTextNode("Your browser doesn't support HTML5 video!"));
74                                 video.insertBefore(span, current.nextSibling.nextSibling);
75                                 test.moved = video.removeChild(current.nextSibling);
76                                 break;
77                             default:
78                                 failTest("Malformed test data!");
79                                 break;
80                         }
81
82                         testExpected(test.moved, null, '!=');
83                         video.insertBefore(test.moved, video.firstChild);
84                         break;
85
86                     default:
87                         // We should never get an error for the element we moved.
88                         if (event.target == test.moved) {
89                             failTest("Error fired for &lt;source&gt; moved to beginning of list.");
90                             test.done = true;
91                             return;
92                         } else if (!event.target.nextSibling) {
93                             logResult(true, "&lt;source&gt; moved was not processed"); 
94                             setTimeout(configureNextTest, 100);
95                         }
96                         break;
97                 }
98             }
99
100             function moveToEnd(test, event)
101             {
102                 switch (++test.errorCount)
103                 {
104                     case 1:
105                         // Do nothing on the first error event
106                         break;
107
108                     case 2:
109                         var current = findCurrentSourceElement();
110                         switch (test.iteration)
111                         {
112                             case 1:
113                                 consoleWrite("Moving <b>previous<" + "/b> &lt;source&gt; element to end of list, it should be processed again.");
114                                 test.moved = video.removeChild(current.previousSibling);
115                                 break;
116                             case 2:
117                                 consoleWrite("Moving <b>current<" + "/b> &lt;source&gt; element, it should be processed again.");
118                                 test.moved = video.removeChild(current);
119                                 break;
120                             case 3:
121                                 consoleWrite("Moving <b>next<" + "/b> &lt;source&gt; element, it should be processed again.");
122                                 test.moved = video.removeChild(current.nextSibling);
123                                 break;
124                             default:
125                                 failTest("Malformed test data!");
126                                 break;
127                         }
128
129                         testExpected(test.moved, null, '!=');
130                         video.appendChild(test.moved);
131                         break;
132
133                     default:
134                         if (event.target == test.moved) {
135                             logResult(true, "&lt;source&gt; moved was processed a second time."); 
136                             setTimeout(configureNextTest, 100);
137                         }  else if (!event.target.nextSibling) {
138                             // We should never reach the end of the source list since the tests stops
139                             // when the error fires for the moved element.
140                             failTest("Error never fired for &lt;source&gt; moved!");
141                         }
142                         break;
143                 }
144             }
145
146             function runOneTest(evt)
147             {
148                 var test = testInfo.tests[testInfo.current];
149                 test.fcn(test, evt);
150             }
151
152             function addSource(index)
153             {
154                 var source = document.createElement('source');
155                 source.src = findMediaFile("video", index + "-" + Date.now());
156                 source.type = mimeTypeForExtension(source.src.split('.').pop());
157                 video.appendChild(source);
158             }
159             
160             function runNextTest()
161             {
162                 consoleWrite("");
163                 if (++testInfo.current >= testInfo.tests.length) {
164                     consoleWrite("PASS<br>");
165                     endTest();
166                     return;
167                 }
168
169                 testInfo.errorCount = 0;
170                 video = mediaElement = document.createElement('video');
171                 document.body.appendChild(video);
172
173                 // Add a bunch of source elements with bogus urls because we want to rearrange elements 
174                 // after the media engine begins processing sources, and we can't predict the delay 
175                 // between when the media element fires an 'error' event and our handler is called,
176                 // but we need to guarantee that there are <source> elements that haven't been processed
177                 // when we run the test.
178                 for (var ndx = 1; ndx <= 10; ndx++)
179                     addSource(ndx);
180             }
181
182             function configureNextTest()
183             {
184                 var videos = document.querySelectorAll('video');
185                 for (var ndx = 0; ndx < videos.length; ++ndx)
186                     videos[ndx].parentNode.removeChild(videos[ndx]);
187                 video = mediaElement = null;
188                 setTimeout(runNextTest, 100);
189             }
190
191             function setup()
192             {
193                 document.addEventListener("error", runOneTest, true);
194                 configureNextTest();
195             }
196
197         </script>
198     </head>
199
200     <body>
201         <div>Test to make sure a &lt;source&gt; moved after the media element begins processing 
202         is handled correctly.</div>
203         <script>setup()</script>
204     </body>
205 </html>