Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
/**
* This is a performance test designed to check we are not redrawing the UI too many times
* after resizing the window, when the styleeditor displays mediaqueries which are source
* mapped.
*/
const TESTCASE_URI = TEST_BASE_HTTP + "many-media-rules-sourcemaps/index.html";
// Maximum delay allowed between two at-rules-list-changed events.
const EVENTS_DELAY = 2000;
// The window resize will still trigger several resize events which will lead to several
// UI updates. Arbitrary maximum number of events allowed to be fired for a single resize.
// This used to be > 100 events for this test case.
const MAX_EVENTS = 10;
add_task(async function () {
const { toolbox, ui } = await openStyleEditorForURL(TESTCASE_URI);
const win = toolbox.win.parent;
const originalWidth = win.outerWidth;
const originalHeight = win.outerHeight;
// Ensure the window is above 500px wide for @media (min-width: 500px)
if (originalWidth < 500) {
info("Window is too small for the test, resize it to > 800px width");
const onMediaListChanged = waitForManyEvents(ui, EVENTS_DELAY);
await resizeWindow(800, ui, win);
info("Wait for at-rules-list-changed events to settle");
await onMediaListChanged;
}
info(
"Resize the window to stop matching media queries, and trigger the UI updates"
);
const onMediaListChanged = waitForManyEvents(ui, win, EVENTS_DELAY);
await resizeWindow(400, ui, win);
const eventsCount = await onMediaListChanged;
Assert.less(
eventsCount,
MAX_EVENTS,
`Too many events fired (expected less than ${MAX_EVENTS}, got ${eventsCount})`
);
win.resizeTo(originalWidth, originalHeight);
});
/**
* Resize the window to the provided width.
*/
async function resizeWindow(width, ui, win) {
const onResize = once(win, "resize");
win.resizeTo(width, win.outerHeight);
info("Wait for window resize event");
await onResize;
}