Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Errors
- This test gets skipped with pattern: os == 'win'
- This test failed 3 times in the preceding 30 days. quicksearch this test
- Manifest: devtools/client/responsive/test/browser/browser.toml
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that the "orientationchange" event is fired when the "rotate button" is clicked.
// TODO: This test should also check that the orientation is set properly on the iframe.
const TEST_DOCUMENT = `doc_with_remote_iframe_and_isolated_cross_origin_capabilities.sjs`;
const TEST_COM_URL = URL_ROOT_COM_SSL + TEST_DOCUMENT;
const testDevice = {
name: "Fake Phone RDM Test",
width: 320,
height: 570,
pixelRatio: 5.5,
userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
touch: true,
firefoxOS: true,
os: "custom",
featured: true,
};
// Add the new device to the list
addDeviceForTest(testDevice);
addRDMTask(TEST_COM_URL, async function ({ ui }) {
await pushPref("devtools.responsive.viewport.angle", 0);
info("Check the original orientation values before the orientationchange");
is(
await getScreenOrientationType(ui.getViewportBrowser()),
"portrait-primary",
"Primary orientation type is portrait-primary"
);
is(
await getScreenOrientationAngle(ui.getViewportBrowser()),
0,
"Original angle is set at 0 degrees"
);
info(
"Check that rotating the viewport does trigger an orientationchange event"
);
let waitForOrientationChangeEvent = isOrientationChangeEventEmitted(
ui.getViewportBrowser()
);
rotateViewport(ui);
is(
await waitForOrientationChangeEvent,
true,
"'orientationchange' event fired"
);
is(
await getScreenOrientationType(ui.getViewportBrowser()),
"landscape-primary",
"Orientation state was updated to landscape-primary"
);
is(
await getScreenOrientationAngle(ui.getViewportBrowser()),
90,
"Orientation angle was updated to 90 degrees"
);
info("Check that the viewport orientation values persist after reload");
await reloadBrowser();
is(
await getScreenOrientationType(ui.getViewportBrowser()),
"landscape-primary",
"Orientation is still landscape-primary"
);
is(
await getInitialScreenOrientationType(ui.getViewportBrowser()),
"landscape-primary",
"orientation type was set on the page very early in its lifecycle"
);
is(
await getScreenOrientationAngle(ui.getViewportBrowser()),
90,
"Orientation angle is still 90"
);
is(
await getInitialScreenOrientationAngle(ui.getViewportBrowser()),
90,
"orientation angle was set on the page early in its lifecycle"
);
info(
"Check that the viewport orientation values persist after navigating to a page that forces the creation of a new browsing context"
);
const browser = ui.getViewportBrowser();
const previousBrowsingContextId = browser.browsingContext.id;
const waitForReload = await watchForDevToolsReload(browser);
BrowserTestUtils.startLoadingURIString(
browser,
URL_ROOT_ORG_SSL + TEST_DOCUMENT + "?crossOriginIsolated=true"
);
await waitForReload();
isnot(
browser.browsingContext.id,
previousBrowsingContextId,
"A new browsing context was created"
);
is(
await getScreenOrientationType(ui.getViewportBrowser()),
"landscape-primary",
"Orientation is still landscape-primary after navigating to a new browsing context"
);
is(
await getInitialScreenOrientationType(ui.getViewportBrowser()),
"landscape-primary",
"orientation type was set on the page very early in its lifecycle"
);
is(
await getScreenOrientationAngle(ui.getViewportBrowser()),
90,
"Orientation angle is still 90 after navigating to a new browsing context"
);
is(
await getInitialScreenOrientationAngle(ui.getViewportBrowser()),
90,
"orientation angle was set on the page early in its lifecycle"
);
info(
"Check the orientationchange event is not dispatched when changing devices."
);
waitForOrientationChangeEvent = isOrientationChangeEventEmitted(
ui.getViewportBrowser()
);
await selectDevice(ui, testDevice.name);
is(
await waitForOrientationChangeEvent,
false,
"orientationchange event was not dispatched when changing devices"
);
info("Check the new orientation values after selecting device.");
is(
await getScreenOrientationType(ui.getViewportBrowser()),
"portrait-primary",
"New orientation type is portrait-primary"
);
is(
await getScreenOrientationAngle(ui.getViewportBrowser()),
0,
"Orientation angle is 0"
);
info(
"Check the orientationchange event is not dispatched when calling the command with the same orientation."
);
waitForOrientationChangeEvent = isOrientationChangeEventEmitted(
ui.getViewportBrowser()
);
// We're directly calling the command here as there's no way to do such action from the UI.
await ui.commands.targetConfigurationCommand.updateConfiguration({
rdmPaneOrientation: {
type: "portrait-primary",
angle: 0,
isViewportRotated: true,
},
});
is(
await waitForOrientationChangeEvent,
false,
"orientationchange event was not dispatched after trying to set the same orientation again"
);
});
function getScreenOrientationType(browserOrBrowsingContext) {
return SpecialPowers.spawn(browserOrBrowsingContext, [], () => {
return content.screen.orientation.type;
});
}
function getScreenOrientationAngle(browserOrBrowsingContext) {
return SpecialPowers.spawn(
browserOrBrowsingContext,
[],
() => content.screen.orientation.angle
);
}
function getInitialScreenOrientationType(browserOrBrowsingContext) {
return SpecialPowers.spawn(
browserOrBrowsingContext,
[],
() => content.wrappedJSObject.initialOrientationType
);
}
function getInitialScreenOrientationAngle(browserOrBrowsingContext) {
return SpecialPowers.spawn(
browserOrBrowsingContext,
[],
() => content.wrappedJSObject.initialOrientationAngle
);
}
async function isOrientationChangeEventEmitted(browserOrBrowsingContext) {
const onTimeout = wait(1000).then(() => "TIMEOUT");
const onOrientationChangeEvent = SpecialPowers.spawn(
browserOrBrowsingContext,
[],
() => {
content.eventController = new content.AbortController();
return new Promise(resolve => {
content.window.addEventListener(
"orientationchange",
() => {
resolve();
},
{
signal: content.eventController.signal,
once: true,
}
);
});
}
);
const result = await Promise.race([onTimeout, onOrientationChangeEvent]);
// Remove the event listener
await SpecialPowers.spawn(browserOrBrowsingContext, [], () => {
content.eventController.abort();
delete content.eventController;
});
return result !== "TIMEOUT";
}