browser_grids_grid-outline-multiple-grids.js (2323B)
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 grid outline is not shown when more than one grid is highlighted. 7 8 const TEST_URI = ` 9 <style type='text/css'> 10 .grid { 11 display: grid; 12 } 13 </style> 14 <div id="grid1" class="grid"> 15 <div class="cell1">cell1</div> 16 <div class="cell2">cell2</div> 17 </div> 18 <div id="grid2" class="grid"> 19 <div class="cell1">cell1</div> 20 <div class="cell2">cell2</div> 21 </div> 22 `; 23 24 add_task(async function () { 25 await pushPref("devtools.gridinspector.maxHighlighters", 2); 26 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 27 const { inspector, gridInspector } = await openLayoutView(); 28 const { document: doc } = gridInspector; 29 const { highlighters, store } = inspector; 30 31 await selectNode("#grid1", inspector); 32 const gridList = doc.getElementById("grid-list"); 33 const checkbox1 = gridList.children[0].querySelector("input"); 34 const checkbox2 = gridList.children[1].querySelector("input"); 35 36 info("Toggling ON the CSS grid highlighter for #grid1."); 37 let onHighlighterShown = highlighters.once("grid-highlighter-shown"); 38 const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 2); 39 let onCheckboxChange = waitUntilState( 40 store, 41 state => 42 state.grids.length === 2 && 43 state.grids[0].highlighted && 44 !state.grids[1].highlighted 45 ); 46 checkbox1.click(); 47 await onHighlighterShown; 48 await onCheckboxChange; 49 const elements = await onGridOutlineRendered; 50 51 info("Checking the grid outline for #grid1 is shown."); 52 ok( 53 doc.getElementById("grid-outline-container"), 54 "Grid outline container is rendered." 55 ); 56 is(elements.length, 2, "Grid outline is shown."); 57 58 info("Toggling ON the CSS grid highlighter for #grid2."); 59 onHighlighterShown = highlighters.once("grid-highlighter-shown"); 60 onCheckboxChange = waitUntilState( 61 store, 62 state => 63 state.grids.length === 2 && 64 state.grids[0].highlighted && 65 state.grids[1].highlighted 66 ); 67 checkbox2.click(); 68 await onHighlighterShown; 69 await onCheckboxChange; 70 71 info("Checking the grid outline is not shown."); 72 ok( 73 !doc.getElementById("grid-outline-container"), 74 "Grid outline is not rendered." 75 ); 76 });