browser_boxmodel_sync.js (1429B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test editing box model syncs with the rule view. 7 8 const TEST_URI = "<p>hello</p>"; 9 10 add_task(async function () { 11 await addTab("data:text/html," + encodeURIComponent(TEST_URI)); 12 const { inspector, boxmodel } = await openLayoutView(); 13 14 info("When a property is edited, it should sync in the rule view"); 15 16 await selectNode("p", inspector); 17 18 info("Modify padding-bottom in box model view"); 19 const span = boxmodel.document.querySelector( 20 ".boxmodel-padding.boxmodel-bottom > span" 21 ); 22 EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView); 23 const editor = boxmodel.document.querySelector( 24 ".styleinspector-propertyeditor" 25 ); 26 27 const onRuleViewRefreshed = once(inspector, "rule-view-refreshed"); 28 EventUtils.synthesizeKey("7", {}, boxmodel.document.defaultView); 29 await waitForUpdate(inspector); 30 await onRuleViewRefreshed; 31 is(editor.value, "7", "Should have the right value in the editor."); 32 EventUtils.synthesizeKey("VK_RETURN", {}, boxmodel.document.defaultView); 33 34 info("Check that the property was synced with the rule view"); 35 const ruleView = selectRuleView(inspector); 36 const ruleEditor = getRuleViewRuleEditor(ruleView, 0); 37 const textProp = ruleEditor.rule.textProps[0]; 38 is(textProp.value, "7px", "The property has the right value"); 39 });