test_display_mode.html (1990B)
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>