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