<!DOCTYPE HTML>
<html>
<head>
  <title>Video controls test</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display"></p>

<div id="content">
  <video id="video" controls mozNoDynamicControls preload="metadata"></video>
</div>

<pre id="test">
<script class="testbody" type="text/javascript">

SimpleTest.waitForExplicitFinish();
var video = document.getElementById("video");

let onLoaded = event => {
  SpecialPowers.pushPrefEnv(
    {"set": [["full-screen-api.allow-trusted-requests-only", false],
             ["media.videocontrols.lock-video-orientation", true]]},
    startMediaLoad);
};
window.addEventListener("load", onLoaded);

let startMediaLoad = () => {
  // Kick off test once video has loaded, in its canplaythrough event handler.
  video.src = "video.ogg";
  video.addEventListener("canplaythrough", runTest);
};

function runTest() {
  is(document.mozFullScreenElement, null, "should not be in fullscreen initially");
  isnot(window.screen.orientation.type, "landscape-primary", "should not be in landscape");
  isnot(window.screen.orientation.type, "landscape-secondary", "should not be in landscape");

  let originalOnChange = window.screen.orientation.onchange;

  window.screen.orientation.onchange = () => {
    is(document.mozFullScreenElement, video, "should be in fullscreen");
    ok(window.screen.orientation.type === "landscape-primary" ||
       window.screen.orientation.type === "landscape-secondary", "should be in landscape");

    window.screen.orientation.onchange = () => {
      window.screen.orientation.onchange = originalOnChange;
      isnot(window.screen.orientation.type, "landscape-primary", "should not be in landscape");
      isnot(window.screen.orientation.type, "landscape-secondary", "should not be in landscape");
      SimpleTest.finish();
    };
    document.mozCancelFullScreen();
  };

  video.mozRequestFullScreen();
}

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