browser_rules_add-property_01.js (1694B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test adding an invalid property. 7 8 const TEST_URI = ` 9 <style type='text/css'> 10 #testid { 11 background-color: blue; 12 } 13 .testclass { 14 background-color: green; 15 } 16 </style> 17 <div id='testid' class='testclass'>Styled Node</div> 18 `; 19 20 add_task(async function () { 21 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 22 const { inspector, view } = await openRuleView(); 23 await selectNode("#testid", inspector); 24 25 info("Test creating a new property"); 26 const textProp = await addProperty(view, 0, "background-color", "#XYZ"); 27 28 is(textProp.value, "#XYZ", "Text prop should have been changed."); 29 is(textProp.editor.isValid(), false, "#XYZ should not be a valid entry"); 30 ok( 31 textProp.editor.element.classList.contains("ruleview-invalid"), 32 "property element should have the ruleview-invalid class" 33 ); 34 35 info("Check that editing the property removes the ruleview-invalid class"); 36 await focusEditableField(view, textProp.editor.valueSpan); 37 ok( 38 !textProp.editor.element.classList.contains("ruleview-invalid"), 39 "property element does not have the ruleview-invalid class when the declaration is being edited" 40 ); 41 42 info("Check that the expander gets shown again after we're done editing"); 43 const onEditingCancelled = view.once("ruleview-changed"); 44 EventUtils.sendKey("ESCAPE", view.styleWindow); 45 await onEditingCancelled; 46 ok( 47 textProp.editor.element.classList.contains("ruleview-invalid"), 48 "property element should have the ruleview-invalid class again after editing is over" 49 ); 50 });