browser_rules_edit-property_07.js (2231B)
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 multiple values will enable the property even if the 7 // property does not change, and that the extra values are added correctly. 8 9 const STYLE = "#testid { background-color: #f00 }"; 10 11 const TEST_URI_INLINE_SHEET = ` 12 <style>${STYLE}</style> 13 <div id='testid'>Styled Node</div> 14 `; 15 16 const TEST_URI_CONSTRUCTED_SHEET = ` 17 <div id='testid'>Styled Node</div> 18 <script> 19 let sheet = new CSSStyleSheet(); 20 sheet.replaceSync("${STYLE}"); 21 document.adoptedStyleSheets.push(sheet); 22 </script> 23 `; 24 25 async function runTest(testUri) { 26 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(testUri)); 27 const { inspector, view } = await openRuleView(); 28 await selectNode("#testid", inspector); 29 30 const rule = getRuleViewRuleEditor(view, 1).rule; 31 const prop = rule.textProps[0]; 32 33 info("Disabling red background color property"); 34 await togglePropStatus(view, prop); 35 ok(!prop.enabled, "red background-color property is disabled."); 36 37 const editor = await focusEditableField(view, prop.editor.valueSpan); 38 const onDone = view.once("ruleview-changed"); 39 editor.input.value = "red; color: red;"; 40 EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow); 41 await onDone; 42 43 is( 44 prop.editor.valueSpan.textContent, 45 "red", 46 "'red' property value is correctly set." 47 ); 48 ok(prop.enabled, "red background-color property is enabled."); 49 is( 50 await getComputedStyleProperty("#testid", null, "background-color"), 51 "rgb(255, 0, 0)", 52 "red background color is set." 53 ); 54 55 const propEditor = rule.textProps[1].editor; 56 is( 57 propEditor.nameSpan.textContent, 58 "color", 59 "new 'color' property name is correctly set." 60 ); 61 is( 62 propEditor.valueSpan.textContent, 63 "red", 64 "new 'red' property value is correctly set." 65 ); 66 is( 67 await getComputedStyleProperty("#testid", null, "color"), 68 "rgb(255, 0, 0)", 69 "red color is set." 70 ); 71 } 72 73 add_task(async function test_inline_sheet() { 74 await runTest(TEST_URI_INLINE_SHEET); 75 }); 76 77 add_task(async function test_constructed_sheet() { 78 await runTest(TEST_URI_CONSTRUCTED_SHEET); 79 });