display_mode_reflow.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<!--

https://bugzilla.mozilla.org/show_bug.cgi?id=1256084

-->

<head>

  <meta charset="utf-8">

  <title>Test for Display Mode</title>

  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

  <link rel="stylesheet" type="text/css" href="chrome://global/skin"/>

  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>

  <script type="application/javascript">

    var imports = [ "SimpleTest", "is", "isnot", "ok" ];

    for (var n of imports) {

      window[n] = window.opener.wrappedJSObject[n];

    /** Test for Display Mode **/

    function waitOneEvent(element, name) {

      return new Promise(function(resolve, reject) {

        element.addEventListener(name, function() {

          resolve();

        }, {once: true});

});

    function promiseNextTick() {

      return new Promise(resolve => setTimeout(resolve, 0));

    async function test_task() {

      var iframe = document.getElementById("subdoc");

      var subdoc = iframe.contentDocument;

      var style = subdoc.getElementById("style");

      var bodyComputedStyled = subdoc.defaultView.getComputedStyle(subdoc.body);

      var win = Services.wm.getMostRecentWindow("navigator:browser");

      var secondDiv = subdoc.getElementById("b");

      var offsetTop = secondDiv.offsetTop;

      // Test entering the OS's fullscreen mode.

      var fullScreenEntered = waitOneEvent(win, "sizemodechange");

      synthesizeKey("KEY_F11");

      await fullScreenEntered;

      // Wait for the next tick to apply media feature changes. See bug 1430380.

      await promiseNextTick();

      ok(offsetTop !== secondDiv.offsetTop, "offset top changes");

      var fullScreenExited = waitOneEvent(win, "sizemodechange");

      synthesizeKey("KEY_F11");

      await fullScreenExited;

      // Wait for the next tick to apply media feature changes. See bug 1430380.

      await promiseNextTick();

      ok(offsetTop === secondDiv.offsetTop, "offset top returns to original value");

      offsetTop = secondDiv.offsetTop;

      // Test entering fullscreen through document requestFullScreen.

      fullScreenEntered = waitOneEvent(document, "mozfullscreenchange");

      document.body.mozRequestFullScreen();

      await fullScreenEntered

      ok(offsetTop !== secondDiv.offsetTop, "offset top changes");

      fullScreenExited = waitOneEvent(document, "mozfullscreenchange");

      document.mozCancelFullScreen();

      await fullScreenExited;

      ok(offsetTop === secondDiv.offsetTop, "offset top returns to original value");

      window.close();

      window.SimpleTest.finish();

  </script>

</head>

<body onload="test_task()">

<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256084">Mozilla Bug 1256084</a>

<iframe id="subdoc" src="http://mochi.test:8888/tests/layout/style/test/chrome/display_mode_reflow_iframe.html"></iframe>

<p id="display"></p>

<div id="content" style="display: none">

</div>

<pre id="test">

</pre>

</body>

</html>