browser_boxmodel_jump-to-rule-on-hover.js (1651B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test that hovering over a box model value will jump to its source CSS rule in the 7 // rules view when the shift key is pressed. 8 9 const TEST_URI = `<style> 10 #box { 11 margin: 5px; 12 } 13 </style> 14 <div id="box"></div>`; 15 16 add_task(async function () { 17 await pushPref("devtools.layout.boxmodel.highlightProperty", true); 18 await addTab("data:text/html," + encodeURIComponent(TEST_URI)); 19 const { inspector, boxmodel } = await openLayoutView(); 20 await selectNode("#box", inspector); 21 22 info( 23 "Test that hovering over margin-top value highlights the property in rules view." 24 ); 25 const ruleView = await inspector.getPanel("ruleview").view; 26 const el = boxmodel.document.querySelector( 27 ".boxmodel-margin.boxmodel-top > span" 28 ); 29 30 info("Wait for mouse to hover over margin-top element."); 31 const onHighlightProperty = ruleView.once("element-highlighted"); 32 EventUtils.synthesizeMouseAtCenter( 33 el, 34 { type: "mousemove", shiftKey: true }, 35 boxmodel.document.defaultView 36 ); 37 await onHighlightProperty; 38 39 info("Check that margin-top is visible in the rule view."); 40 const { rules, styleWindow } = ruleView; 41 const marginTop = rules[1].textProps[0].computed[0]; 42 ok( 43 isInViewport(marginTop.element, styleWindow), 44 "margin-top is visible in the rule view." 45 ); 46 }); 47 48 function isInViewport(element, win) { 49 const { top, left, bottom, right } = element.getBoundingClientRect(); 50 return ( 51 top >= 0 && 52 bottom <= win.innerHeight && 53 left >= 0 && 54 right <= win.innerWidth 55 ); 56 }