browser_rules_selector-highlighter_03.js (2143B)
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 the selector highlighter toggling mechanism works correctly. 7 8 const TEST_URI = ` 9 <style type="text/css"> 10 div {text-decoration: underline;} 11 .node-1 {color: red;} 12 .node-2 {color: green;} 13 </style> 14 <div class="node-1">Node 1</div> 15 <div class="node-2">Node 2</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 let data; 22 23 info("Select .node-1 and click on the .node-1 selector icon"); 24 await selectNode(".node-1", inspector); 25 data = await clickSelectorIcon(view, ".node-1"); 26 ok(data.isShown, "The highlighter is shown"); 27 28 info("With .node-1 still selected, click again on the .node-1 selector icon"); 29 data = await clickSelectorIcon(view, ".node-1"); 30 ok(!data.isShown, "The highlighter is now hidden"); 31 32 info("With .node-1 still selected, click on the div selector icon"); 33 data = await clickSelectorIcon(view, "div"); 34 ok(data.isShown, "The highlighter is shown again"); 35 36 info("With .node-1 still selected, click again on the .node-1 selector icon"); 37 data = await clickSelectorIcon(view, ".node-1"); 38 ok( 39 data.isShown, 40 "The highlighter is shown again since the clicked selector was different" 41 ); 42 43 info("Selecting .node-2"); 44 await selectNode(".node-2", inspector); 45 const activeHighlighter = inspector.highlighters.getActiveHighlighter( 46 inspector.highlighters.TYPES.SELECTOR 47 ); 48 ok(activeHighlighter, "The highlighter is still shown after selection"); 49 50 info("With .node-2 selected, click on the div selector icon"); 51 data = await clickSelectorIcon(view, "div"); 52 ok( 53 data.isShown, 54 "The highlighter is shown still since the selected was different" 55 ); 56 57 info("Switching back to .node-1 and clicking on the div selector"); 58 await selectNode(".node-1", inspector); 59 data = await clickSelectorIcon(view, "div"); 60 ok( 61 !data.isShown, 62 "The highlighter is hidden now that the same selector was clicked" 63 ); 64 });