LayoutTests/media/video-controls-toggling.html

   1 <html>
   2 <head>
   3     <title>Test rendering of volume slider of video tag</title>
   4     <script src=media-file.js></script>
   5     <script src=media-controls.js></script>
   6     <script src=video-test.js></script>
   7     <script>
   8         var video;
   9         var panel;
  10         var muteButtonCoordinates;
  11         var fadeoutTime = 300;
  12
  13         function init()
  14         {
  15             video = document.getElementsByTagName("video")[0];
  16             video.src = findMediaFile("video", "content/test");
  17
  18             consoleWrite("");
  19             consoleWrite("** Playing the video **");
  20             run("video.play()");
  21         }
  22
  23         function test()
  24         {
  25             panel = mediaControlsElement(internals.shadowRoot(video).firstChild, "-webkit-media-controls-panel");
  26
  27             if (window.eventSender) {
  28                 try {
  29                     muteButtonCoordinates = mediaControlsButtonCoordinates(video, "mute-button");
  30                 } catch (exception) {
  31                     testRunner.notifyDone();
  32                     return;
  33                 }
  34
  35                 consoleWrite("");
  36                 consoleWrite("** Move mouse somewhere over the panel **");
  37                 run("eventSender.mouseMoveTo(muteButtonCoordinates[0], muteButtonCoordinates[1])");
  38             }
  39
  40             consoleWrite("");
  41             consoleWrite("** Test that controls are shown when controls attribute is present **");
  42             testExpected("panel.style['display']", 'none', "!=");
  43
  44             if (window.eventSender) {
  45                 consoleWrite("");
  46                 consoleWrite("** Move mouse outside the video **");
  47                 run("eventSender.mouseMoveTo(video.offsetLeft, video.offsetTop + 2 * video.offsetHeight)");
  48             }
  49
  50             setTimeout(continueTest, fadeoutTime);
  51         }
  52
  53         function continueTest()
  54         {
  55             if (panel.style['display'] != 'none') {
  56                 setTimeout(continueTest, fadeoutTime);
  57                 return;
  58             }
  59
  60             consoleWrite("");
  61             consoleWrite("** The controls should have the display property set to none");
  62             testExpected("panel.style['display']", 'none', "==");
  63
  64             consoleWrite("");
  65             consoleWrite("** Remove controls attribute**");
  66             run("video.removeAttribute('controls')");
  67
  68             consoleWrite("");
  69             consoleWrite("** Move mouse back over the panel **");
  70             run("eventSender.mouseMoveTo(muteButtonCoordinates[0], muteButtonCoordinates[1])");
  71
  72             consoleWrite("");
  73             consoleWrite("** Video controls should not be shown **");
  74             testExpected("panel.style['display']", 'none', "==");
  75
  76             consoleWrite("");
  77
  78             endTest();
  79         }
  80
  81     </script>
  82 </head>
  83 <body onload="init()">
  84     Tests that showing / hiding video controls uses the sets the display:none property<br>
  85     <video onplay="test()" controls></video>
  86 </body>
  87 </html>