browser_rules_flexbox-highlighter-on-mutation.js (1727B)
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 flexbox highlighter is hidden when the highlighted flexbox container is 7 // removed from the page. 8 9 const TEST_URI = ` 10 <style type='text/css'> 11 #flex { 12 display: flex; 13 } 14 </style> 15 <div id="flex"></div> 16 `; 17 18 add_task(async function () { 19 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 20 const { inspector, view } = await openRuleView(); 21 const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX; 22 const { 23 getNodeForActiveHighlighter, 24 waitForHighlighterTypeShown, 25 waitForHighlighterTypeHidden, 26 } = getHighlighterTestHelpers(inspector); 27 28 const onRuleViewUpdated = view.once("ruleview-refreshed"); 29 await selectNode("#flex", inspector); 30 await onRuleViewUpdated; 31 const container = getRuleViewProperty(view, "#flex", "display").valueSpan; 32 const flexboxToggle = container.querySelector( 33 ".js-toggle-flexbox-highlighter" 34 ); 35 36 info("Toggling ON the flexbox highlighter from the rule-view."); 37 const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE); 38 flexboxToggle.click(); 39 await onHighlighterShown; 40 ok( 41 getNodeForActiveHighlighter(HIGHLIGHTER_TYPE), 42 "Flexbox highlighter is shown." 43 ); 44 45 info("Remove the #flex container in the content page."); 46 const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE); 47 await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => 48 content.document.querySelector("#flex").remove() 49 ); 50 await onHighlighterHidden; 51 ok( 52 !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE), 53 "Flexbox highlighter is hidden." 54 ); 55 });