browser_grids_grid-outline-highlight-cell.js (2085B)
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 cell is highlighted when hovering over the grid outline of a 7 // grid cell. 8 9 const TEST_URI = ` 10 <style type='text/css'> 11 #grid { 12 display: grid; 13 } 14 </style> 15 <div id="grid"> 16 <div id="cella">Cell A</div> 17 <div id="cellb">Cell B</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 { store } = inspector; 27 const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID; 28 const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector); 29 30 const gridList = doc.getElementById("grid-list"); 31 const checkbox = gridList.children[0].querySelector("input"); 32 33 info("Toggling ON the CSS grid highlighter from the layout panel."); 34 const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE); 35 const onGridOutlineRendered = waitForDOM(doc, "#grid-cell-group rect", 2); 36 const onCheckboxChange = waitUntilState( 37 store, 38 state => state.grids.length == 1 && state.grids[0].highlighted 39 ); 40 checkbox.click(); 41 42 info("Wait for checkbox to change"); 43 await onCheckboxChange; 44 45 info("Wait for highlighter to be shown"); 46 await onHighlighterShown; 47 48 info("Wait for outline to be rendered"); 49 await onGridOutlineRendered; 50 51 info("Hovering over grid cell A in the grid outline."); 52 const onCellAHighlight = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE); 53 54 synthesizeMouseOverOnGridCell(doc, 0); 55 56 const { options } = await onCellAHighlight; 57 58 info("Checking show grid cell options are correct."); 59 const { showGridCell } = options; 60 const { gridFragmentIndex, rowNumber, columnNumber } = showGridCell; 61 62 is(gridFragmentIndex, "0", "Should be the first grid fragment index."); 63 is(rowNumber, "1", "Should be the first grid row."); 64 is(columnNumber, "1", "Should be the first grid column."); 65 });