browser_toolbox_rule_view.js (2113B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Check that when the viewport is resized, the rule-view refreshes. 7 8 const TEST_URI = `${URL_ROOT}doc_toolbox_rule_view.html`; 9 10 addRDMTask(TEST_URI, async function ({ ui, manager }) { 11 info("Open the responsive design mode and set its size to 500x500 to start"); 12 await setViewportSize(ui, manager, 500, 500); 13 14 info("Open the inspector, rule-view and select the test node"); 15 const { inspector, view } = await openRuleView(); 16 await selectNode("div", inspector); 17 18 info("Try shrinking the viewport and checking the applied styles"); 19 await testShrink(view, ui, manager); 20 21 info("Try growing the viewport and checking the applied styles"); 22 await testGrow(view, ui, manager); 23 24 info("Check that ESC still opens the split console"); 25 await testEscapeOpensSplitConsole(inspector); 26 27 await closeToolboxIfOpen(); 28 }); 29 30 async function testShrink(ruleView, ui, manager) { 31 is(numberOfRules(ruleView), 2, "Should have two rules initially."); 32 33 info("Resize to 100x100 and wait for the rule-view to update"); 34 const onRefresh = ruleView.once("ruleview-refreshed"); 35 await setViewportSize(ui, manager, 100, 100); 36 await onRefresh; 37 38 is(numberOfRules(ruleView), 3, "Should have three rules after shrinking."); 39 } 40 41 async function testGrow(ruleView, ui, manager) { 42 info("Resize to 500x500 and wait for the rule-view to update"); 43 const onRefresh = ruleView.once("ruleview-refreshed"); 44 await setViewportSize(ui, manager, 500, 500); 45 await onRefresh; 46 47 is(numberOfRules(ruleView), 2, "Should have two rules after growing."); 48 } 49 50 async function testEscapeOpensSplitConsole(inspector) { 51 ok(!inspector.toolbox.splitConsole, "Console is not split."); 52 53 info("Press escape"); 54 const onSplit = inspector.toolbox.once("split-console"); 55 EventUtils.synthesizeKey("KEY_Escape"); 56 await onSplit; 57 58 ok(inspector.toolbox.splitConsole, "Console is split after pressing ESC."); 59 } 60 61 function numberOfRules(ruleView) { 62 return ruleView.element.querySelectorAll(".ruleview-code").length; 63 }