browser_rules_refresh-on-style-change.js (1635B)
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 the rule view refreshes when the current node has its style 7 // changed 8 9 const TEST_URI = "<div id='testdiv' style='font-size: 10px;''>Test div!</div>"; 10 11 add_task(async function () { 12 Services.prefs.setCharPref("devtools.defaultColorUnit", "name"); 13 14 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 15 const { inspector, view } = await openRuleView(); 16 await selectNode("#testdiv", inspector); 17 18 let fontSize = getRuleViewPropertyValue(view, "element", "font-size"); 19 is(fontSize, "10px", "The rule view shows the right font-size"); 20 21 info("Changing the node's style and waiting for the update"); 22 const onUpdated = inspector.once("rule-view-refreshed"); 23 await setContentPageElementAttribute( 24 "#testdiv", 25 "style", 26 "font-size: 3em; color: lightgoldenrodyellow; " + 27 "text-align: right; text-transform: uppercase" 28 ); 29 await onUpdated; 30 31 const textAlign = getRuleViewPropertyValue(view, "element", "text-align"); 32 is(textAlign, "right", "The rule view shows the new text align."); 33 const color = getRuleViewPropertyValue(view, "element", "color"); 34 is(color, "lightgoldenrodyellow", "The rule view shows the new color."); 35 fontSize = getRuleViewPropertyValue(view, "element", "font-size"); 36 is(fontSize, "3em", "The rule view shows the new font size."); 37 const textTransform = getRuleViewPropertyValue( 38 view, 39 "element", 40 "text-transform" 41 ); 42 is(textTransform, "uppercase", "The rule view shows the new text transform."); 43 });