mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-23 02:05:42 +00:00
Bug 1575097 Part 5: Update test to check outerWidth and screen.width and device-width media queries with meta viewport on. r=gl
Differential Revision: https://phabricator.services.mozilla.com/D42748 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
2ca2008ad6
commit
f40bd42907
@ -3,30 +3,46 @@ http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
const TEST_URL = "data:text/html;charset=utf-8,";
|
||||
const TEST_URL =
|
||||
'data:text/html;charset=utf-8,<iframe id="subframe" ' +
|
||||
'width="200" height="200"></iframe>';
|
||||
|
||||
addRDMTask(TEST_URL, async function({ ui, manager }) {
|
||||
await pushPref("devtools.responsive.metaViewport.enabled", true);
|
||||
|
||||
ok(ui, "An instance of the RDM should be attached to the tab.");
|
||||
await setViewportSize(ui, manager, 110, 500);
|
||||
await setViewportSizeAndAwaitReflow(ui, manager, 110, 500);
|
||||
|
||||
info("Checking initial width/height properties.");
|
||||
await doInitialChecks(ui);
|
||||
await doInitialChecks(ui, 110);
|
||||
|
||||
info("Checking initial width/height with meta viewport on");
|
||||
await setTouchAndMetaViewportSupport(ui, true);
|
||||
await doInitialChecks(ui, 440);
|
||||
await setTouchAndMetaViewportSupport(ui, false);
|
||||
|
||||
info("Changing the RDM size");
|
||||
await setViewportSize(ui, manager, 90, 500);
|
||||
await setViewportSizeAndAwaitReflow(ui, manager, 90, 500);
|
||||
|
||||
info("Checking for screen props");
|
||||
await checkScreenProps(ui);
|
||||
|
||||
info("Checking for screen props with meta viewport on");
|
||||
await setTouchAndMetaViewportSupport(ui, true);
|
||||
await checkScreenProps(ui);
|
||||
await setTouchAndMetaViewportSupport(ui, false);
|
||||
|
||||
info("Checking for subframe props");
|
||||
await checkSubframeProps(ui);
|
||||
|
||||
info("Checking for subframe props with meta viewport on");
|
||||
await setTouchAndMetaViewportSupport(ui, true);
|
||||
await checkSubframeProps(ui);
|
||||
await setTouchAndMetaViewportSupport(ui, false);
|
||||
|
||||
info("Changing the RDM size using input keys");
|
||||
await setViewportSizeWithInputKeys(ui);
|
||||
|
||||
info("Setting docShell.deviceSizeIsPageSize to false");
|
||||
await ContentTask.spawn(ui.getViewportBrowser(), {}, async function() {
|
||||
const docShell = content.docShell;
|
||||
docShell.deviceSizeIsPageSize = false;
|
||||
});
|
||||
|
||||
info("Checking for screen props once again.");
|
||||
await checkScreenProps2(ui);
|
||||
});
|
||||
@ -71,14 +87,14 @@ async function setViewportSizeWithInputKeys(ui) {
|
||||
await resized;
|
||||
}
|
||||
|
||||
async function doInitialChecks(ui) {
|
||||
async function doInitialChecks(ui, expectedInnerWidth) {
|
||||
const {
|
||||
innerWidth,
|
||||
matchesMedia,
|
||||
outerHeight,
|
||||
outerWidth,
|
||||
} = await grabContentInfo(ui);
|
||||
is(innerWidth, 110, "initial width should be 110px");
|
||||
is(innerWidth, expectedInnerWidth, "inner width should be as expected");
|
||||
is(outerWidth, 110, "device's outerWidth should be 110px");
|
||||
is(outerHeight, 500, "device's outerHeight should be 500px");
|
||||
isnot(
|
||||
@ -107,15 +123,24 @@ async function checkScreenProps(ui) {
|
||||
}
|
||||
|
||||
async function checkScreenProps2(ui) {
|
||||
const { matchesMedia, screen } = await grabContentInfo(ui);
|
||||
ok(!matchesMedia, "media query should be re-evaluated.");
|
||||
is(
|
||||
const { screen } = await grabContentInfo(ui);
|
||||
isnot(
|
||||
window.screen.width,
|
||||
screen.width,
|
||||
"screen.width should be the size of the screen."
|
||||
"screen.width should not be the size of the screen."
|
||||
);
|
||||
}
|
||||
|
||||
async function checkSubframeProps(ui) {
|
||||
const { outerWidth, matchesMedia, screen } = await grabContentSubframeInfo(
|
||||
ui
|
||||
);
|
||||
is(outerWidth, 90, "subframe outerWidth should be 90px");
|
||||
ok(matchesMedia, "subframe media query should match");
|
||||
is(screen.width, 90, "subframe screen.width should be the page width");
|
||||
is(screen.height, 500, "subframe screen.height should be the page height");
|
||||
}
|
||||
|
||||
function grabContentInfo(ui) {
|
||||
return ContentTask.spawn(ui.getViewportBrowser(), {}, async function() {
|
||||
return {
|
||||
@ -130,3 +155,20 @@ function grabContentInfo(ui) {
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function grabContentSubframeInfo(ui) {
|
||||
return ContentTask.spawn(ui.getViewportBrowser(), {}, async function() {
|
||||
const subframe = content.document.getElementById("subframe");
|
||||
const win = subframe.contentWindow;
|
||||
return {
|
||||
screen: {
|
||||
width: win.screen.width,
|
||||
height: win.screen.height,
|
||||
},
|
||||
innerWidth: win.innerWidth,
|
||||
matchesMedia: win.matchMedia("(max-device-width:100px)").matches,
|
||||
outerHeight: win.outerHeight,
|
||||
outerWidth: win.outerWidth,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user