browser_rules_grid-highlighter-restored-after-reload.js (2388B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Tests that the grid highlighter is re-displayed after reloading a page. 7 8 const TEST_URI = ` 9 <style type='text/css'> 10 #grid { 11 display: grid; 12 } 13 </style> 14 <div id="grid"> 15 <div id="cell1">cell1</div> 16 <div id="cell2">cell2</div> 17 </div> 18 `; 19 20 const OTHER_URI = ` 21 <style type='text/css'> 22 #grid { 23 display: grid; 24 } 25 </style> 26 <div id="grid"> 27 <div id="cell1">cell1</div> 28 <div id="cell2">cell2</div> 29 <div id="cell3">cell3</div> 30 </div> 31 `; 32 33 add_task(async function () { 34 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 35 36 info("Check that the grid highlighter can be displayed"); 37 const { inspector, view } = await openRuleView(); 38 const { highlighters } = inspector; 39 const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID; 40 const { 41 waitForHighlighterTypeShown, 42 waitForHighlighterTypeRestored, 43 waitForHighlighterTypeDiscarded, 44 } = getHighlighterTestHelpers(inspector); 45 46 await selectNode("#grid", inspector); 47 const container = getRuleViewProperty(view, "#grid", "display").valueSpan; 48 const gridToggle = container.querySelector(".js-toggle-grid-highlighter"); 49 50 info("Toggling ON the CSS grid highlighter from the rule-view."); 51 const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE); 52 gridToggle.click(); 53 await onHighlighterShown; 54 55 is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); 56 57 info("Reload the page, expect the highlighter to be displayed once again"); 58 const onRestored = waitForHighlighterTypeRestored(HIGHLIGHTER_TYPE); 59 60 const onReloaded = inspector.once("reloaded"); 61 await reloadBrowser(); 62 info("Wait for inspector to be reloaded after page reload"); 63 await onReloaded; 64 65 await onRestored; 66 is( 67 highlighters.gridHighlighters.size, 68 1, 69 "CSS grid highlighter was restored." 70 ); 71 72 info("Navigate to another URL, and check that the highlighter is hidden"); 73 const otherUri = 74 "data:text/html;charset=utf-8," + encodeURIComponent(OTHER_URI); 75 const onDiscarded = waitForHighlighterTypeDiscarded(HIGHLIGHTER_TYPE); 76 await navigateTo(otherUri); 77 await onDiscarded; 78 is( 79 highlighters.gridHighlighters.size, 80 0, 81 "CSS grid highlighter was not restored." 82 ); 83 });