browser_grids_grid-outline-selected-grid.js (1545B)
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 shown when a grid container is selected. 7 8 const TEST_URI = ` 9 <style type='text/css'> 10 #grid { 11 display: grid; 12 } 13 </style> 14 <div id="grid"> 15 <div id="cella">Cell A</div> 16 <div id="cellb">Cell B</div> 17 <div id="cellc">Cell C</div> 18 </div> 19 `; 20 21 add_task(async function () { 22 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 23 24 const { inspector, gridInspector } = await openLayoutView(); 25 const { document: doc } = gridInspector; 26 const { highlighters, store } = inspector; 27 28 const gridList = doc.getElementById("grid-list"); 29 const checkbox = gridList.children[0].querySelector("input"); 30 31 info("Checking the initial state of the Grid Inspector."); 32 ok( 33 !doc.getElementById("grid-outline-container"), 34 "There should be no grid outline shown." 35 ); 36 37 info("Toggling ON the CSS grid highlighter from the layout panel."); 38 const onHighlighterShown = highlighters.once("grid-highlighter-shown"); 39 const onCheckboxChange = waitUntilState( 40 store, 41 state => state.grids.length == 1 && state.grids[0].highlighted 42 ); 43 const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 3); 44 checkbox.click(); 45 await onHighlighterShown; 46 await onCheckboxChange; 47 const elements = await onGridOutlineRendered; 48 49 info("Checking the grid outline is shown."); 50 is(elements.length, 3, "Grid outline is shown."); 51 });