browser_grids_grid-outline-cannot-show-outline.js (1811B)
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 grid outline does not show when cells are too small to be drawn and that 7 // "Cannot show outline for this grid." message is displayed. 8 9 const TEST_URI = ` 10 <style type='text/css'> 11 #grid { 12 display: grid; 13 grid-template-columns: repeat(51, 20px); 14 grid-template-rows: repeat(51, 20px); 15 } 16 </style> 17 <div id="grid"> 18 <div id="cellA">cell A</div> 19 <div id="cellB">cell B</div> 20 </div> 21 `; 22 23 add_task(async function () { 24 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 25 26 const { inspector, gridInspector } = await openLayoutView(); 27 const { document: doc } = gridInspector; 28 const { highlighters, store } = inspector; 29 30 await selectNode("#grid", inspector); 31 const outline = doc.getElementById("grid-outline-container"); 32 const gridList = doc.getElementById("grid-list"); 33 const checkbox = gridList.children[0].querySelector("input"); 34 35 info("Toggling ON the CSS grid highlighter from the layout panel."); 36 const onHighlighterShown = highlighters.once("grid-highlighter-shown"); 37 const onGridOutlineRendered = waitForDOM(doc, ".grid-outline-text", 1); 38 const onCheckboxChange = waitUntilState( 39 store, 40 state => state.grids.length == 1 && state.grids[0].highlighted 41 ); 42 checkbox.click(); 43 await onHighlighterShown; 44 await onCheckboxChange; 45 const elements = await onGridOutlineRendered; 46 47 const cannotShowGridOutline = elements[0]; 48 49 info( 50 "Checking the grid outline is not rendered and an appropriate message is shown." 51 ); 52 ok(!outline, "Outline component is not shown."); 53 ok( 54 cannotShowGridOutline, 55 "The message 'Cannot show outline for this grid' is displayed." 56 ); 57 });