browser_rules_grid-highlighter-on-reload.js (1663B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test that a grid highlighter showing grid gaps can be displayed after reloading the 7 // page (Bug 1342051). 8 9 const TEST_URI = ` 10 <style type='text/css'> 11 #grid { 12 display: grid; 13 grid-gap: 10px; 14 } 15 </style> 16 <div id="grid"> 17 <div id="cell1">cell1</div> 18 <div id="cell2">cell2</div> 19 </div> 20 `; 21 22 add_task(async function () { 23 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 24 25 info("Check that the grid highlighter can be displayed"); 26 await checkGridHighlighter(); 27 28 info("Close the toolbox before reloading the tab"); 29 await gDevTools.closeToolboxForTab(gBrowser.selectedTab); 30 31 await reloadBrowser(); 32 33 info( 34 "Check that the grid highlighter can be displayed after reloading the page" 35 ); 36 await checkGridHighlighter(); 37 }); 38 39 async function checkGridHighlighter() { 40 const { inspector, view } = await openRuleView(); 41 const { highlighters } = inspector; 42 const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID; 43 const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector); 44 45 await selectNode("#grid", inspector); 46 const container = getRuleViewProperty(view, "#grid", "display").valueSpan; 47 const gridToggle = container.querySelector(".js-toggle-grid-highlighter"); 48 49 info("Toggling ON the CSS grid highlighter from the rule-view."); 50 const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE); 51 gridToggle.click(); 52 await onHighlighterShown; 53 54 is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); 55 }