browser_rules_mark_overridden_08.js (1417B)
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 in pseudo-elements when 7 // selecting their host node. 8 9 const TEST_URI = ` 10 <style type='text/css'> 11 #testid::before { 12 content: 'Pseudo-element'; 13 color: red; 14 color: green; 15 } 16 #testid { 17 color: blue; 18 } 19 </style> 20 <div id='testid'>Styled Node</div> 21 `; 22 23 add_task(async function () { 24 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 25 const { inspector, view } = await openRuleView(); 26 await selectNode("#testid", inspector); 27 28 info( 29 "Check the CSS declarations for ::before in the Pseudo-elements accordion." 30 ); 31 const pseudoRule = getRuleViewRuleEditor(view, 1, 0).rule; 32 const pseudoProp1 = pseudoRule.textProps[1]; 33 const pseudoProp2 = pseudoRule.textProps[2]; 34 ok( 35 pseudoProp1.overridden, 36 "First declaration of color in pseudo-element should be overridden." 37 ); 38 ok( 39 !pseudoProp2.overridden, 40 "Second declaration of color in pseudo-element should not be overridden." 41 ); 42 43 info( 44 "Check that pseudo-element declarations do not override the host's declarations" 45 ); 46 const idProp = getTextProperty(view, 4, { color: "blue" }); 47 ok( 48 !idProp.overridden, 49 "The single declaration of color in ID selector should not be overridden" 50 ); 51 });