browser_rules_class_panel_mutation.js (2370B)
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 class panel updates on markup mutations 7 8 add_task(async function () { 9 await addTab("data:text/html;charset=utf-8,<div class='c1 c2'>"); 10 const { inspector, view } = await openRuleView(); 11 12 await selectNode("div", inspector); 13 14 info("Open the class panel"); 15 view.showClassPanel(); 16 17 info("Trigger an unrelated mutation on the div (id attribute change)"); 18 let onMutation = view.inspector.once("markupmutation"); 19 await setContentPageElementAttribute("div", "id", "test-id"); 20 await onMutation; 21 22 info("Check that the panel still contains the right classes"); 23 checkClassPanelContent(view, [ 24 { name: "c1", state: true }, 25 { name: "c2", state: true }, 26 ]); 27 28 info("Trigger a class mutation on a different, unknown, node"); 29 onMutation = view.inspector.once("markupmutation"); 30 await setContentPageElementAttribute("body", "class", "test-class"); 31 await onMutation; 32 33 info("Check that the panel still contains the right classes"); 34 checkClassPanelContent(view, [ 35 { name: "c1", state: true }, 36 { name: "c2", state: true }, 37 ]); 38 39 info("Trigger a class mutation on the current node"); 40 onMutation = view.inspector.once("markupmutation"); 41 await setContentPageElementAttribute("div", "class", "c3 c4"); 42 await onMutation; 43 44 info("Check that the panel now contains the new classes"); 45 checkClassPanelContent(view, [ 46 { name: "c3", state: true }, 47 { name: "c4", state: true }, 48 ]); 49 50 info("Change the state of one of the new classes"); 51 await toggleClassPanelCheckBox(view, "c4"); 52 checkClassPanelContent(view, [ 53 { name: "c3", state: true }, 54 { name: "c4", state: false }, 55 ]); 56 57 info("Select another node"); 58 await selectNode("body", inspector); 59 60 info("Trigger a class mutation on the div"); 61 onMutation = view.inspector.once("markupmutation"); 62 await setContentPageElementAttribute("div", "class", "c5 c6 c7"); 63 await onMutation; 64 65 info( 66 "Go back to the previous node and check the content of the class panel." + 67 "Even if hidden, it should have refreshed when we changed the DOM" 68 ); 69 await selectNode("div", inspector); 70 checkClassPanelContent(view, [ 71 { name: "c5", state: true }, 72 { name: "c6", state: true }, 73 { name: "c7", state: true }, 74 ]); 75 });