LayoutTests/media/video-display-toggle.html

   1 <html>
   2     <head>
   3         <script src=media-file.js></script>
   4         <script>
   5             function toggleDisplay()
   6             {
   7                 var video = document.getElementById('vid');
   8                 if (video.style.display == "none") {
   9                     video.style.display = "inline-block";
  10                     video.addEventListener("seeked", done);
  11                     video.currentTime = 0; // so the snapshot always has the same frame
  12                 } else
  13                     video.style.display = "none";
  14             }
  15             function test()
  16             {
  17                 if (window.testRunner)
  18                     testRunner.waitUntilDone();
  19                 setSrcById('vid', findMediaFile('video', 'content/test'));
  20                 var video = document.getElementById('vid');
  21                 video.addEventListener("canplaythrough", test2);
  22                 video.load();
  23             }
  24             function test2()
  25             {
  26                 toggleDisplay();
  27                 toggleDisplay();
  28             }
  29             function done()
  30             {
  31                 if (window.testRunner)
  32                     testRunner.notifyDone();
  33             }
  34         </script>
  35     </head>
  36     <body onload="test()">
  37         This tests that toggling the display property won't make the controls disappear.<br>
  38         <video id="vid" controls></video>
  39     </body>
  40 </html>