summaryrefslogtreecommitdiffstats
path: root/toolkit/content/tests/widgets/test_videocontrols_standalone.html
blob: 14208923dd57aa5b714ff23bb5a1754056a2b24f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE HTML>
<html>
<head>
  <title>Video controls test</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <script src="/tests/SimpleTest/NativeKeyCodes.js"></script>
  <script type="text/javascript" src="head.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display"></p>

<pre id="test">
<script class="testbody" type="text/javascript">
  SimpleTest.expectAssertions(0, 1);

const videoWidth = 320;
const videoHeight = 240;

function getMediaElement(aWindow) {
  return aWindow.document.getElementsByTagName("video")[0];
}

var popup = window.open("seek_with_sound.ogg");
popup.addEventListener("load", function() {
  var video = getMediaElement(popup);

  is(popup.document.activeElement, video, "Document should load with focus moved to the video element.");

  if (!video.paused) {
    runTestVideo(video);
  } else {
    video.addEventListener("play", function() {
      runTestVideo(video);
    }, {once: true});
  }
}, {once: true});

function runTestVideo(aVideo) {
  var condition = function() {
    var boundingRect = aVideo.getBoundingClientRect();
    return boundingRect.width == videoWidth &&
           boundingRect.height == videoHeight;
  };
  waitForCondition(condition, function() {
    var boundingRect = aVideo.getBoundingClientRect();
    is(boundingRect.width, videoWidth, "Width of the video should match expectation");
    is(boundingRect.height, videoHeight, "Height of video should match expectation");
    popup.close();
    runTestAudioPre();
  }, "The media element should eventually be resized to match the intrinsic size of the video.");
}

function runTestAudioPre() {
  popup = window.open("audio.ogg");
  popup.addEventListener("load", function() {
    var audio = getMediaElement(popup);

    is(popup.document.activeElement, audio, "Document should load with focus moved to the video element.");

    if (!audio.paused) {
      runTestAudio(audio);
    } else {
      audio.addEventListener("play", function() {
        runTestAudio(audio);
      }, {once: true});
    }
  }, {once: true});
}

function runTestAudio(aAudio) {
  info("User agent (help diagnose bug #943556): " + navigator.userAgent);
  var isAndroid = navigator.userAgent.includes("Android");
  var expectedHeight = isAndroid ? 103 : 40;
  var condition = function() {
    var boundingRect = aAudio.getBoundingClientRect();
    return boundingRect.height == expectedHeight;
  };
  waitForCondition(condition, function() {
    var boundingRect = aAudio.getBoundingClientRect();
    is(boundingRect.height, expectedHeight,
       "Height of audio element should be " + expectedHeight + ", which is equal to the controls bar.");
    ok(!aAudio.paused, "Should be playing");
    testPauseByKeyboard(aAudio);
  }, "The media element should eventually be resized to match the height of the audio controls.");
}

function testPauseByKeyboard(aAudio) {
  aAudio.addEventListener("pause", function() {
    afterKeyPause(aAudio);
  }, {once: true});
  // Press spacebar, which means play/pause.
  synthesizeKey(" ", {}, popup);
}

function afterKeyPause(aAudio) {
  ok(true, "successfully caused audio to pause");
  waitForCondition(function() {
    return aAudio.paused;
  },
  function() {
    // Click outside of the controls area. (Hopefully this has no effect.)
    synthesizeMouseAtPoint(5, 5, { type: 'mousedown' }, popup);
    synthesizeMouseAtPoint(5, 5, { type: 'mouseup' }, popup);
    setTimeout(function() {
      testPlayByKeyboard(aAudio);
    }, 0);
  });
}

function testPlayByKeyboard(aAudio) {
  aAudio.addEventListener("play", function() {
    ok(true, "successfully caused audio to play");
    finishAudio();
  }, {once: true});
  // Press spacebar, which means play/pause.
  synthesizeKey(" ", {}, popup);
}

function finishAudio() {
  popup.close();
  SimpleTest.finish();
}

SimpleTest.waitForExplicitFinish();

</script>
</pre>
</body>
</html>