browser_rules_inherited-properties_01.js (1598B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Check that inherited properties appear for a nested element in the 7 // rule view. 8 9 const TEST_URI = ` 10 <style type="text/css"> 11 #test2 { 12 background-color: green; 13 color: purple; 14 } 15 </style> 16 <div id="test2"><div id="test1">Styled Node</div></div> 17 `; 18 19 add_task(async function () { 20 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 21 const { inspector, view } = await openRuleView(); 22 await selectNode("#test1", inspector); 23 await simpleInherit(inspector, view); 24 }); 25 26 function simpleInherit(inspector, view) { 27 const elementStyle = view._elementStyle; 28 is(elementStyle.rules.length, 2, "Should have 2 rules."); 29 30 const elementRule = elementStyle.rules[0]; 31 ok( 32 !elementRule.inherited, 33 "Element style attribute should not consider itself inherited." 34 ); 35 36 const inheritRule = elementStyle.rules[1]; 37 is( 38 inheritRule.selectorText, 39 "#test2", 40 "Inherited rule should be the one that includes inheritable properties." 41 ); 42 ok(!!inheritRule.inherited, "Rule should consider itself inherited."); 43 is(inheritRule.textProps.length, 2, "Rule should have two styles"); 44 const bgcProp = inheritRule.textProps[0]; 45 is( 46 bgcProp.name, 47 "background-color", 48 "background-color property should exist" 49 ); 50 ok(bgcProp.invisible, "background-color property should be invisible"); 51 const inheritProp = inheritRule.textProps[1]; 52 is(inheritProp.name, "color", "color should have been inherited."); 53 }