browser_rules_grid-highlighter-on-navigate.js (1377B)
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 grid highlighter is hidden on page navigation. 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 TEST_URI_2 = "data:text/html,<html><body>test</body></html>"; 21 22 add_task(async function () { 23 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 24 const { inspector, view } = await openRuleView(); 25 const highlighters = inspector.highlighters; 26 const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID; 27 const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector); 28 29 await selectNode("#grid", inspector); 30 const container = getRuleViewProperty(view, "#grid", "display").valueSpan; 31 const gridToggle = container.querySelector(".js-toggle-grid-highlighter"); 32 33 info("Toggling ON the CSS grid highlighter from the rule-view."); 34 const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE); 35 gridToggle.click(); 36 await onHighlighterShown; 37 38 is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); 39 40 await navigateTo(TEST_URI_2); 41 ok(!highlighters.gridHighlighters.size, "CSS grid highlighter is hidden."); 42 });