browser_rules_user-property-reset.js (3203B)
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 user set style properties can be changed from the markup-view and 7 // don't survive page reload 8 9 const TEST_URI = ` 10 <p id='id1' style='width:200px;'>element 1</p> 11 <p id='id2' style='width:100px;'>element 2</p> 12 `; 13 14 add_task(async function () { 15 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 16 const { inspector, view } = await openRuleView(); 17 18 await selectNode("#id1", inspector); 19 await modifyRuleViewWidth("300px", view, inspector); 20 await assertRuleAndMarkupViewWidth("id1", "300px", view, inspector); 21 22 await selectNode("#id2", inspector); 23 await assertRuleAndMarkupViewWidth("id2", "100px", view, inspector); 24 await modifyRuleViewWidth("50px", view, inspector); 25 await assertRuleAndMarkupViewWidth("id2", "50px", view, inspector); 26 27 is( 28 view.store.userProperties.map.size, 29 2, 30 "The modifications are stored as expected" 31 ); 32 33 await reloadBrowser(); 34 35 is( 36 view.store.userProperties.map.size, 37 0, 38 "Properties storing user modifications is cleared after a reload" 39 ); 40 41 await selectNode("#id1", inspector); 42 await assertRuleAndMarkupViewWidth("id1", "200px", view, inspector); 43 await selectNode("#id2", inspector); 44 await assertRuleAndMarkupViewWidth("id2", "100px", view, inspector); 45 }); 46 47 function getStyleRule(ruleView) { 48 return ruleView.styleDocument.querySelector(".ruleview-rule"); 49 } 50 51 async function modifyRuleViewWidth(value, ruleView, inspector) { 52 info("Getting the property value element"); 53 const valueSpan = getStyleRule(ruleView).querySelector( 54 ".ruleview-propertyvalue" 55 ); 56 57 info("Focusing the property value to set it to edit mode"); 58 const editor = await focusEditableField(ruleView, valueSpan.parentNode); 59 60 ok(editor.input, "The inplace-editor field is ready"); 61 info("Setting the new value"); 62 editor.input.value = value; 63 64 info( 65 "Pressing return and waiting for the field to blur and for the " + 66 "markup-view to show the mutation" 67 ); 68 const onBlur = once(editor.input, "blur", true); 69 const onStyleChanged = waitForStyleModification(inspector); 70 EventUtils.sendKey("return"); 71 await onBlur; 72 await onStyleChanged; 73 } 74 75 async function getContainerStyleAttrValue(id, { walker, markup }) { 76 const front = await walker.querySelector(walker.rootNode, "#" + id); 77 const container = markup.getContainer(front); 78 79 let attrIndex = 0; 80 for (const attrName of container.elt.querySelectorAll(".attr-name")) { 81 if (attrName.textContent === "style") { 82 return container.elt.querySelectorAll(".attr-value")[attrIndex]; 83 } 84 attrIndex++; 85 } 86 return undefined; 87 } 88 89 async function assertRuleAndMarkupViewWidth(id, value, ruleView, inspector) { 90 const valueSpan = getStyleRule(ruleView).querySelector( 91 ".ruleview-propertyvalue" 92 ); 93 is( 94 valueSpan.textContent, 95 value, 96 "Rule-view style width is " + value + " as expected" 97 ); 98 99 const attr = await getContainerStyleAttrValue(id, inspector); 100 is( 101 attr.textContent.replace(/\s/g, ""), 102 "width:" + value + ";", 103 "Markup-view style attribute width is " + value 104 ); 105 }