browser_grids_grid-list-on-mutation-element-removed.js (2229B)
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 item is removed from the grid list when the grid container is 7 // removed from the page. 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="cell1">cell1</div> 17 <div id="cell2">cell2</div> 18 </div> 19 `; 20 21 add_task(async function () { 22 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 23 const { inspector, gridInspector } = await openLayoutView(); 24 const { document: doc } = gridInspector; 25 const { highlighters, store } = inspector; 26 27 await selectNode("#grid", inspector); 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 is(gridList.childNodes.length, 1, "One grid container is listed."); 33 ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown."); 34 35 info("Toggling ON the CSS grid highlighter from the layout panel."); 36 const onHighlighterShown = highlighters.once("grid-highlighter-shown"); 37 let onCheckboxChange = waitUntilState( 38 store, 39 state => state.grids.length == 1 && state.grids[0].highlighted 40 ); 41 checkbox.click(); 42 await onHighlighterShown; 43 await onCheckboxChange; 44 45 info("Checking the CSS grid highlighter is created."); 46 is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); 47 48 info("Removing the #grid container in the content page."); 49 const onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); 50 onCheckboxChange = waitUntilState(store, state => !state.grids.length); 51 SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => 52 content.document.getElementById("grid").remove() 53 ); 54 await onHighlighterHidden; 55 await onCheckboxChange; 56 57 info("Checking the CSS grid highlighter is not shown."); 58 ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown."); 59 const noGridList = doc.querySelector( 60 "#layout-grid-section .devtools-sidepanel-no-result" 61 ); 62 ok(noGridList, "The message no grid containers is displayed."); 63 });