browser_grids_grid-outline-updates-on-grid-change.js (1892B)
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 does reflect the grid in the page even after the grid has 7 // changed. 8 9 const TEST_URI = ` 10 <style> 11 .container { 12 display: grid; 13 grid-template-columns: repeat(2, 20vw); 14 grid-auto-rows: 20px; 15 } 16 </style> 17 <div class="container"> 18 <div>item 1</div> 19 <div>item 2</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 info("Clicking on the first checkbox to highlight the grid"); 31 const checkbox = doc.querySelector("#grid-list input"); 32 33 const onHighlighterShown = highlighters.once("grid-highlighter-shown"); 34 const onCheckboxChange = waitUntilState( 35 store, 36 state => state.grids.length == 1 && state.grids[0].highlighted 37 ); 38 const onGridOutlineRendered = waitForDOM(doc, ".grid-outline-cell", 2); 39 40 checkbox.click(); 41 42 await onHighlighterShown; 43 await onCheckboxChange; 44 let elements = await onGridOutlineRendered; 45 46 info("Checking the grid outline is shown."); 47 is(elements.length, 2, "Grid outline is shown."); 48 49 info("Changing the grid in the page"); 50 const onReflow = inspector.once("reflow"); 51 const onGridOutlineChanged = waitForDOM(doc, ".grid-outline-cell", 4); 52 53 await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { 54 const div = content.document.createElement("div"); 55 div.textContent = "item 3"; 56 content.document.querySelector(".container").appendChild(div); 57 }); 58 59 await onReflow; 60 elements = await onGridOutlineChanged; 61 62 info("Checking the grid outline is correct."); 63 is(elements.length, 4, "Grid outline was changed."); 64 });