layout/style/test/test_display_mode.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=1648157
   5 -->
   6 <head>
   7   <title>Test for displayMode</title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <script src="property_database.js"></script>
  10   <link rel="stylesheet" href="/tests/SimpleTest/test.css" />
  11 </head>
  12 <body>
  13 <p id="display">
  14   <iframe id="iframe" src="http://example.org/tests/layout/style/test/media_queries_iframe2.html"></iframe>
  15 </p>
  16 <pre id="test">
  17 <script class="testbody">
  18 let iframe = document.getElementById("iframe");
  19
  20 // Keep in sync with media_queries_iframe2.html
  21 const DISPLAY_MODES_BACKGROUND_COLOR = {
  22   'minimal-ui': 'rgb(255, 0, 0)',
  23   'standalone': 'rgb(0, 128, 0)',
  24   'fullscreen': 'rgb(0, 0, 255)',
  25   'browser':    'rgb(255, 255, 0)'
  26 };
  27 const DISPLAY_MODES = Object.keys(DISPLAY_MODES_BACKGROUND_COLOR);
  28
  29 SimpleTest.waitForExplicitFinish();
  30
  31 window.addEventListener("load", async (event) => {
  32   const wrappedWindow = SpecialPowers.wrap(window);
  33
  34   function setDisplayMode(mode) {
  35     wrappedWindow.browsingContext.top.displayMode = mode;
  36   }
  37
  38   async function displayModeApplies(mode) {
  39     let responsePromise = new Promise(resolve => {
  40       window.addEventListener("message", e => {
  41         resolve(e.data.backgroundColor);
  42       }, { once: true });
  43     });
  44     iframe.contentWindow.postMessage('get-background-color', '*');
  45     let response = await responsePromise;
  46     let expected = DISPLAY_MODES_BACKGROUND_COLOR[mode];
  47
  48     info(`displayModeApplies: ${response} === ${expected}`);
  49     return response === expected;
  50   }
  51
  52   async function checkIfApplies(q, shouldApply) {
  53     let message = shouldApply ? "should apply" : "should not apply";
  54     is((await displayModeApplies(q)), shouldApply, `${q} ${message}`);
  55   }
  56
  57   for (let currentMode of DISPLAY_MODES) {
  58     setDisplayMode(currentMode);
  59
  60     for (let mode of DISPLAY_MODES) {
  61       await checkIfApplies(mode, currentMode === mode);
  62     }
  63   }
  64
  65   SimpleTest.finish();
  66 });
  67 </script>
  68 </pre>
  69 </body>
  70 </html>