browser_rules_add-property-and-reselect.js (2426B)
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 adding properties to rules work and reselecting the element still 7 // show them. 8 9 const TEST_URI = URL_ROOT + "doc_content_stylesheet.html"; 10 11 add_task(async function () { 12 await addTab(TEST_URI); 13 const { inspector, view } = await openRuleView(); 14 await selectNode("#target", inspector); 15 16 info("Setting a font-weight property on all rules"); 17 await setPropertyOnAllRules(view, inspector); 18 19 info("Reselecting the element"); 20 await selectNode("body", inspector); 21 await selectNode("#target", inspector); 22 23 checkPropertyOnAllRules(view); 24 }); 25 26 async function setPropertyOnAllRules(view, inspector) { 27 // Set the inline style rule first independently because it needs to wait for specific 28 // events and the DOM mutation that it causes refreshes the rules view, so we need to 29 // get the list of rules again later. 30 info("Adding font-weight:bold in the inline style rule"); 31 const inlineStyleRuleEditor = view._elementStyle.rules[0].editor; 32 33 const onMutation = inspector.once("markupmutation"); 34 const onRuleViewRefreshed = view.once("ruleview-refreshed"); 35 36 inlineStyleRuleEditor.addProperty("font-weight", "bold", "", true); 37 38 await Promise.all([onMutation, onRuleViewRefreshed]); 39 40 // Now set the other rules after having retrieved the list. 41 // We only want to do this for editable rules (e.g. not for element attributes style) 42 const allRules = getAllEditableRules(view); 43 is(allRules.length, 6, "We have the expected number of rules"); 44 for (let i = 1; i < allRules.length; i++) { 45 info(`Adding font-weight:bold in rule ${i}`); 46 const rule = allRules[i]; 47 const ruleEditor = rule.editor; 48 49 const onRuleViewChanged = view.once("ruleview-changed"); 50 51 ruleEditor.addProperty("font-weight", "bold", "", true); 52 53 await onRuleViewChanged; 54 } 55 } 56 57 function getAllEditableRules(view) { 58 return [...view._elementStyle.rules].filter(rule => rule.editor.isEditable); 59 } 60 61 function checkPropertyOnAllRules(view) { 62 const allRules = getAllEditableRules(view); 63 is(allRules.length, 6, "We have the expected number of rules"); 64 for (const rule of allRules) { 65 const lastProperty = rule.textProps.at(-1); 66 67 is(lastProperty.name, "font-weight", "Last property name is font-weight"); 68 is(lastProperty.value, "bold", "Last property value is bold"); 69 } 70 }