зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1453044 - Add mochitest to assert number of StyleEditor ui updates after resize;r=ochameau
As mentioned in the discussion about the DAMP test, here is an attempt at checking this with a mochitest. https://treeherder.mozilla.org/#/jobs?repo=try&revision=dafdefa6cb60d5530d0ce4f47522f7824e061903 Differential Revision: https://phabricator.services.mozilla.com/D6127 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Julian Descottes
Родитель
feae8c5651
Коммит
ba3e8f5bb2
|
|
@ -14,6 +14,11 @@ support-files =
|
|||
inline-1.html
|
||||
inline-2.html
|
||||
longload.html
|
||||
many-media-rules-sourcemaps/index.html
|
||||
many-media-rules-sourcemaps/sourcemap/sourcemap-css/sourcemaps.css
|
||||
many-media-rules-sourcemaps/sourcemap/sourcemap-css/sourcemaps.css.map
|
||||
many-media-rules-sourcemaps/sourcemap/sourcemap-sass/_partial.scss
|
||||
many-media-rules-sourcemaps/sourcemap/sourcemap-sass/sourcemaps.scss
|
||||
media-small.css
|
||||
media.html
|
||||
media-rules.html
|
||||
|
|
@ -99,6 +104,7 @@ skip-if = !e10s || debug # Bug 1252201 - Docshell leak on debug e10s
|
|||
[browser_styleeditor_pretty.js]
|
||||
[browser_styleeditor_private_perwindowpb.js]
|
||||
[browser_styleeditor_reload.js]
|
||||
[browser_styleeditor_resize_performance.js]
|
||||
[browser_styleeditor_scroll.js]
|
||||
[browser_styleeditor_sv_keynav.js]
|
||||
[browser_styleeditor_sv_resize.js]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,82 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"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.
|
||||
* See Bug 1453044 for more details.
|
||||
*/
|
||||
|
||||
const TESTCASE_URI = TEST_BASE_HTTP + "many-media-rules-sourcemaps/index.html";
|
||||
|
||||
// Maximum delay expected between two media-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, win);
|
||||
await resizeWindow(800, ui, win);
|
||||
info("Wait for media-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);
|
||||
await resizeWindow(400, ui, win);
|
||||
const eventsCount = await onMediaListChanged;
|
||||
|
||||
ok(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 and wait for media-list-changed events to
|
||||
* settle.
|
||||
*/
|
||||
async function resizeWindow(width, ui, win) {
|
||||
const onResize = once(win, "resize");
|
||||
win.resizeTo(width, win.outerHeight);
|
||||
info("Wait for window resize event");
|
||||
await onResize;
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for "media-list-changed" events to settle on StyleEditorUI.
|
||||
* Returns a promise that resolves the number of events caught while waiting.
|
||||
*/
|
||||
function waitForManyEvents(ui, win) {
|
||||
return new Promise(resolve => {
|
||||
let timer;
|
||||
let count = 0;
|
||||
const onEvent = () => {
|
||||
count++;
|
||||
win.clearTimeout(timer);
|
||||
|
||||
// Wait for some time to catch subsequent events.
|
||||
timer = win.setTimeout(() => {
|
||||
// Remove the listener and resolve.
|
||||
ui.off("media-list-changed", onEvent);
|
||||
resolve(count);
|
||||
}, EVENTS_DELAY);
|
||||
};
|
||||
ui.on("media-list-changed", onEvent);
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<link rel="stylesheet" type="text/css" href="sourcemap/sourcemap-css/sourcemaps.css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: green; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
@media (min-width: 500px) {
|
||||
div {
|
||||
color: red; } }
|
||||
|
||||
/*# sourceMappingURL=sourcemaps.css.map */
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"version": 3,
|
||||
"file": "sourcemaps.css",
|
||||
"sources": [
|
||||
"../sourcemap-sass/sourcemaps.scss",
|
||||
"../sourcemap-sass/_partial.scss"
|
||||
],
|
||||
"names": [],
|
||||
"mappings": "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"
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
@media (min-width: 500px) { div { color: green; } }
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
@import 'partial';
|
||||
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
@media (min-width: 500px) { div { color: red; } }
|
||||
Загрузка…
Ссылка в новой задаче