browser_flexbox_container_element_rep.js (1517B)
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 the flex container's element rep will display the box model highlighter on 7 // hover. 8 9 const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html"; 10 11 add_task(async function () { 12 await addTab(TEST_URI); 13 const { inspector, flexboxInspector } = await openLayoutView(); 14 const { document: doc } = flexboxInspector; 15 const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector); 16 17 const onFlexContainerRepRendered = waitForDOM( 18 doc, 19 ".flex-header-content .objectBox" 20 ); 21 await selectNode("#container", inspector); 22 const [flexContainerRep] = await onFlexContainerRepRendered; 23 24 ok(flexContainerRep, "The flex container element rep is rendered."); 25 26 info("Listen to node-highlight event and mouse over the rep"); 27 const onHighlight = waitForHighlighterTypeShown( 28 inspector.highlighters.TYPES.BOXMODEL 29 ); 30 EventUtils.synthesizeMouse( 31 flexContainerRep, 32 10, 33 5, 34 { type: "mouseover" }, 35 doc.defaultView 36 ); 37 const { nodeFront } = await onHighlight; 38 39 ok(nodeFront, "nodeFront was returned from highlighting the node."); 40 is(nodeFront.tagName, "DIV", "The highlighted node has the correct tagName."); 41 is( 42 nodeFront.attributes[0].name, 43 "id", 44 "The highlighted node has the correct attributes." 45 ); 46 is( 47 nodeFront.attributes[0].value, 48 "container", 49 "The highlighted node has the correct id." 50 ); 51 });