browser_computed_browser-styles.js (1590B)
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 checkbox to include browser styles works properly. 7 8 const TEST_URI = ` 9 <style type="text/css"> 10 .matches { 11 color: #F00; 12 } 13 </style> 14 <span id="matches" class="matches">Some styled text</span> 15 `; 16 17 add_task(async function () { 18 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 19 const { inspector, view } = await openComputedView(); 20 await selectNode("#matches", inspector); 21 22 info("Checking the default styles"); 23 is( 24 isPropertyVisible("color", view), 25 true, 26 "span #matches color property is visible" 27 ); 28 is( 29 isPropertyVisible("background-color", view), 30 false, 31 "span #matches background-color property is hidden" 32 ); 33 34 info("Toggling the browser styles"); 35 const doc = view.styleDocument; 36 const checkbox = doc.querySelector(".includebrowserstyles"); 37 const onRefreshed = inspector.once("computed-view-refreshed"); 38 checkbox.click(); 39 await onRefreshed; 40 41 info("Checking the browser styles"); 42 is(isPropertyVisible("color", view), true, "span color property is visible"); 43 is( 44 isPropertyVisible("background-color", view), 45 true, 46 "span background-color property is visible" 47 ); 48 }); 49 50 function isPropertyVisible(name, view) { 51 info("Checking property visibility for " + name); 52 const propertyViews = view.propertyViews; 53 for (const propView of propertyViews) { 54 if (propView.name == name) { 55 return propView.visible; 56 } 57 } 58 return false; 59 }