browser_rules_mark_overridden_01.js (1881B)
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 the rule view marks overridden rules correctly based on the 7 // specificity of the rule. 8 9 const TEST_URI = ` 10 <style type='text/css'> 11 #testid { 12 background-color: blue; 13 } 14 .testclass { 15 background-color: green; 16 } 17 </style> 18 <div id='testid' class='testclass'>Styled Node</div> 19 `; 20 21 add_task(async function () { 22 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 23 const { inspector, view } = await openRuleView(); 24 await selectNode("#testid", inspector); 25 26 const idProp = getTextProperty(view, 1, { "background-color": "blue" }); 27 ok(!idProp.overridden, "ID prop should not be overridden."); 28 ok( 29 !idProp.editor.element.classList.contains("ruleview-overridden"), 30 "ID property editor should not have ruleview-overridden class" 31 ); 32 33 const classProp = getTextProperty(view, 2, { "background-color": "green" }); 34 ok(classProp.overridden, "Class property should be overridden."); 35 ok( 36 classProp.editor.element.classList.contains("ruleview-overridden"), 37 "Class property editor should have ruleview-overridden class" 38 ); 39 40 // Override background-color by changing the element style. 41 const elementProp = await addProperty(view, 0, "background-color", "purple"); 42 43 ok( 44 !elementProp.overridden, 45 "Element style property should not be overridden" 46 ); 47 ok(idProp.overridden, "ID property should be overridden"); 48 ok( 49 idProp.editor.element.classList.contains("ruleview-overridden"), 50 "ID property editor should have ruleview-overridden class" 51 ); 52 ok(classProp.overridden, "Class property should be overridden"); 53 ok( 54 classProp.editor.element.classList.contains("ruleview-overridden"), 55 "Class property editor should have ruleview-overridden class" 56 ); 57 });