browser_styleeditor_scroll.js (3387B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 "use strict"; 4 5 // Test that editor scrolls to correct line if it's selected with 6 // * selectStyleSheet (specified line) 7 // * click on the sidebar item (line before the editor was unselected) 8 // See bug 1148086. 9 10 const SIMPLE = TEST_BASE_HTTP + "simple.css"; 11 const LONG = TEST_BASE_HTTP + "doc_long.css"; 12 const DOCUMENT_WITH_LONG_SHEET = 13 "data:text/html;charset=UTF-8," + 14 encodeURIComponent( 15 [ 16 "<!DOCTYPE html>", 17 "<html>", 18 " <head>", 19 " <title>Editor scroll test page</title>", 20 ' <link rel="stylesheet" type="text/css" href="' + SIMPLE + '">', 21 ' <link rel="stylesheet" type="text/css" href="' + LONG + '">', 22 " </head>", 23 " <body>Editor scroll test page</body>", 24 "</html>", 25 ].join("\n") 26 ); 27 const LINE_TO_SELECT = 201; 28 29 add_task(async function () { 30 const { ui } = await openStyleEditorForURL(DOCUMENT_WITH_LONG_SHEET); 31 32 is(ui.editors.length, 2, "Two editors present."); 33 34 const simpleEditor = ui.editors[0]; 35 const longEditor = ui.editors[1]; 36 37 info(`Selecting doc_long.css and scrolling to line ${LINE_TO_SELECT}`); 38 39 // We need to wait for editor-selected if we want to check the scroll 40 // position as scrolling occurs after selectStyleSheet resolves but before the 41 // event is emitted. 42 let selectEventPromise = waitForEditorToBeSelected(longEditor, ui); 43 await ui.selectStyleSheet(longEditor.styleSheet, LINE_TO_SELECT); 44 await selectEventPromise; 45 46 info("Checking that the correct line is visible after initial load"); 47 48 const { from, to } = longEditor.sourceEditor.getViewport(); 49 info(`Lines ${from}-${to} are visible (expected ${LINE_TO_SELECT}).`); 50 51 Assert.lessOrEqual(from, LINE_TO_SELECT, "The editor scrolled too much."); 52 Assert.greaterOrEqual(to, LINE_TO_SELECT, "The editor scrolled too little."); 53 54 const initialScrollTop = longEditor.sourceEditor.getScrollInfo().top; 55 info(`Storing scrollTop = ${initialScrollTop} for later comparison.`); 56 57 info("Selecting the first editor (simple.css)"); 58 await ui.selectStyleSheet(simpleEditor.styleSheet); 59 60 info("Selecting doc_long.css again."); 61 selectEventPromise = waitForEditorToBeSelected(longEditor, ui); 62 63 // Can't use ui.selectStyleSheet here as it will scroll the editor back to top 64 // and we want to check that the previous scroll position is restored. 65 const summary = await ui.getEditorSummary(longEditor); 66 summary.click(); 67 68 info("Waiting for doc_long.css to be selected."); 69 await selectEventPromise; 70 71 const scrollTop = longEditor.sourceEditor.getScrollInfo().top; 72 is( 73 scrollTop, 74 initialScrollTop, 75 "Scroll top was restored after the sheet was selected again." 76 ); 77 }); 78 79 /** 80 * A helper that waits "editor-selected" event for given editor. 81 * 82 * @param {StyleSheetEditor} editor 83 * The editor to wait for. 84 * @param {StyleEditorUI} ui 85 * The StyleEditorUI the editor belongs to. 86 */ 87 var waitForEditorToBeSelected = async function (editor, ui) { 88 info(`Waiting for ${editor.friendlyName} to be selected.`); 89 let selected = await ui.once("editor-selected"); 90 while (selected != editor) { 91 info(`Ignored editor-selected for editor ${editor.friendlyName}.`); 92 selected = await ui.once("editor-selected"); 93 } 94 95 info(`Got editor-selected for ${editor.friendlyName}.`); 96 };