browser_device_width.js (5317B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 const TEST_URL = 7 'data:text/html;charset=utf-8,<iframe id="subframe" ' + 8 'width="200" height="200"></iframe>'; 9 10 addRDMTask(TEST_URL, async function ({ ui, manager }) { 11 ok(ui, "An instance of the RDM should be attached to the tab."); 12 await setViewportSizeAndAwaitReflow(ui, manager, 110, 500); 13 14 info("Checking initial width/height with meta viewport on"); 15 await setTouchAndMetaViewportSupport(ui, true); 16 await doInitialChecks(ui, 980); 17 await setTouchAndMetaViewportSupport(ui, false); 18 19 info("Changing the RDM size"); 20 await setViewportSizeAndAwaitReflow(ui, manager, 90, 500); 21 22 info("Checking for screen props"); 23 await checkScreenProps(ui); 24 25 info("Checking for screen props with meta viewport on"); 26 await setTouchAndMetaViewportSupport(ui, true); 27 await checkScreenProps(ui); 28 await setTouchAndMetaViewportSupport(ui, false); 29 30 info("Checking for subframe props"); 31 await checkSubframeProps(ui); 32 33 info("Checking for subframe props with meta viewport on"); 34 await setTouchAndMetaViewportSupport(ui, true); 35 await checkSubframeProps(ui); 36 await setTouchAndMetaViewportSupport(ui, false); 37 38 info("Changing the RDM size using input keys"); 39 await setViewportSizeWithInputKeys(ui); 40 41 info("Checking for screen props once again."); 42 await checkScreenProps2(ui); 43 }); 44 45 async function setViewportSizeWithInputKeys(ui) { 46 const width = 320, 47 height = 500; 48 let resized = waitForViewportResizeTo(ui, width, height); 49 ui.setViewportSize({ width, height }); 50 await resized; 51 52 const dimensions = ui.toolWindow.document.querySelectorAll( 53 ".viewport-dimension-input" 54 ); 55 56 // Increase width value to 420 by using the Up arrow key 57 resized = waitForViewportResizeTo(ui, 420, height); 58 dimensions[0].focus(); 59 for (let i = 1; i <= 100; i++) { 60 EventUtils.synthesizeKey("KEY_ArrowUp"); 61 } 62 await resized; 63 64 // Resetting width value back to 320 using `Shift + Down` arrow 65 resized = waitForViewportResizeTo(ui, width, height); 66 dimensions[0].focus(); 67 for (let i = 1; i <= 10; i++) { 68 EventUtils.synthesizeKey("KEY_ArrowDown", { shiftKey: true }); 69 } 70 await resized; 71 72 // Increase height value to 600 by using `PageUp + Shift` key 73 resized = waitForViewportResizeTo(ui, width, 600); 74 dimensions[1].focus(); 75 EventUtils.synthesizeKey("KEY_PageUp", { shiftKey: true }); 76 await resized; 77 78 // Resetting height value back to 500 by using `PageDown + Shift` key 79 resized = waitForViewportResizeTo(ui, width, height); 80 dimensions[1].focus(); 81 EventUtils.synthesizeKey("KEY_PageDown", { shiftKey: true }); 82 await resized; 83 } 84 85 async function doInitialChecks(ui, expectedInnerWidth) { 86 const { innerWidth, matchesMedia, outerHeight, outerWidth } = 87 await grabContentInfo(ui); 88 is(innerWidth, expectedInnerWidth, "inner width should be as expected"); 89 is(outerWidth, 110, "device's outerWidth should be 110px"); 90 is(outerHeight, 500, "device's outerHeight should be 500px"); 91 isnot( 92 window.outerHeight, 93 outerHeight, 94 "window.outerHeight should not be the size of the device's outerHeight" 95 ); 96 isnot( 97 window.outerWidth, 98 outerWidth, 99 "window.outerWidth should not be the size of the device's outerWidth" 100 ); 101 ok(!matchesMedia, "media query shouldn't match."); 102 } 103 104 async function checkScreenProps(ui) { 105 const { matchesMedia, screen } = await grabContentInfo(ui); 106 ok(matchesMedia, "media query should match"); 107 isnot( 108 window.screen.width, 109 screen.width, 110 "screen.width should not be the size of the screen." 111 ); 112 is(screen.width, 90, "screen.width should be the page width"); 113 is(screen.height, 500, "screen.height should be the page height"); 114 } 115 116 async function checkScreenProps2(ui) { 117 const { screen } = await grabContentInfo(ui); 118 isnot( 119 window.screen.width, 120 screen.width, 121 "screen.width should not be the size of the screen." 122 ); 123 } 124 125 async function checkSubframeProps(ui) { 126 const { outerWidth, matchesMedia, screen } = 127 await grabContentSubframeInfo(ui); 128 is(outerWidth, 90, "subframe outerWidth should be 90px"); 129 ok(matchesMedia, "subframe media query should match"); 130 is(screen.width, 90, "subframe screen.width should be the page width"); 131 is(screen.height, 500, "subframe screen.height should be the page height"); 132 } 133 134 function grabContentInfo(ui) { 135 return SpecialPowers.spawn(ui.getViewportBrowser(), [], async function () { 136 return { 137 screen: { 138 width: content.screen.width, 139 height: content.screen.height, 140 }, 141 innerWidth: content.innerWidth, 142 matchesMedia: content.matchMedia("(max-device-width:100px)").matches, 143 outerHeight: content.outerHeight, 144 outerWidth: content.outerWidth, 145 }; 146 }); 147 } 148 149 function grabContentSubframeInfo(ui) { 150 return SpecialPowers.spawn(ui.getViewportBrowser(), [], async function () { 151 const subframe = content.document.getElementById("subframe"); 152 const win = subframe.contentWindow; 153 return { 154 screen: { 155 width: win.screen.width, 156 height: win.screen.height, 157 }, 158 innerWidth: win.innerWidth, 159 matchesMedia: win.matchMedia("(max-device-width:100px)").matches, 160 outerHeight: win.outerHeight, 161 outerWidth: win.outerWidth, 162 }; 163 }); 164 }