browser_styleeditor_syncIntoRuleView.js (1384B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 "use strict"; 4 5 // Test that changes in the style editor are synchronized into the 6 // style inspector. 7 8 const TEST_URI = ` 9 <style type='text/css'> 10 </style> 11 <div id='testid' class='testclass'>Styled Node</div> 12 `; 13 14 const TESTCASE_CSS_SOURCE = "#testid { color: chartreuse; }"; 15 16 add_task(async function () { 17 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 18 19 info("Open the inspector and select the node we want to add style to"); 20 const { inspector, view } = await openRuleView(); 21 await selectNode("#testid", inspector); 22 23 info("Open the StyleEditor"); 24 const { panel, ui } = await openStyleEditor(); 25 26 const editor = await ui.editors[0].getSourceEditor(); 27 await new Promise(res => waitForFocus(res, panel.panelWindow)); 28 29 info("Type new rule in stylesheet"); 30 editor.focus(); 31 EventUtils.sendString(TESTCASE_CSS_SOURCE, panel.panelWindow); 32 ok(editor.unsaved, "new editor has unsaved flag"); 33 34 info("Wait for ruleview to update"); 35 await inspector.toolbox.selectTool("inspector"); 36 await waitFor(() => getRuleViewRule(view, "#testid")); 37 38 info("Check that edits were synced to rule view"); 39 const value = getRuleViewPropertyValue(view, "#testid", "color"); 40 is(value, "chartreuse", "Got the expected color property"); 41 });