browser_grids_grid-list-on-mutation-element-added.js (3293B)
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 list updates when a new grid container is added to the page. 7 8 const TEST_URI = ` 9 <style type='text/css'> 10 .grid { 11 display: grid; 12 } 13 </style> 14 <div id="grid1" class="grid"> 15 <div class="cell1">cell1</div> 16 <div class="cell2">cell2</div> 17 </div> 18 <div id="grid2"> 19 <div class="cell1">cell1</div> 20 <div class="cell2">cell2</div> 21 </div> 22 `; 23 24 add_task(async function () { 25 await pushPref("devtools.gridinspector.maxHighlighters", 1); 26 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 27 const { inspector, gridInspector } = await openLayoutView(); 28 const { document: doc } = gridInspector; 29 const { highlighters, store } = inspector; 30 31 await selectNode("#grid", inspector); 32 const gridList = doc.getElementById("grid-list"); 33 const checkbox1 = gridList.children[0].querySelector("input"); 34 35 info("Checking the initial state of the Grid Inspector."); 36 is(gridList.childNodes.length, 1, "One grid container is listed."); 37 ok( 38 !highlighters.gridHighlighters.size, 39 "No CSS grid highlighter exists in the highlighters overlay." 40 ); 41 42 info("Toggling ON the CSS grid highlighter from the layout panel."); 43 let onHighlighterShown = highlighters.once("grid-highlighter-shown"); 44 checkbox1.click(); 45 await onHighlighterShown; 46 47 info("Checking the CSS grid highlighter is created."); 48 is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); 49 50 info("Adding the #grid2 container in the content page."); 51 const onGridListUpdate = waitUntilState( 52 store, 53 state => 54 state.grids.length == 2 && 55 state.grids[0].highlighted && 56 !state.grids[1].highlighted 57 ); 58 SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => 59 content.document.getElementById("grid2").classList.add("grid") 60 ); 61 await onGridListUpdate; 62 63 info("Checking the new Grid Inspector state."); 64 is(gridList.childNodes.length, 2, "Two grid containers are listed."); 65 is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); 66 67 const checkbox2 = gridList.children[1].querySelector("input"); 68 69 info("Toggling ON the CSS grid highlighter for #grid2."); 70 onHighlighterShown = highlighters.once("grid-highlighter-shown"); 71 let onCheckboxChange = waitUntilState( 72 store, 73 state => 74 state.grids.length == 2 && 75 !state.grids[0].highlighted && 76 state.grids[1].highlighted 77 ); 78 checkbox2.click(); 79 await onHighlighterShown; 80 await onCheckboxChange; 81 82 info("Checking the CSS grid highlighter is still shown."); 83 is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown."); 84 85 info("Toggling OFF the CSS grid highlighter from the layout panel."); 86 const onHighlighterHidden = highlighters.once("grid-highlighter-hidden"); 87 onCheckboxChange = waitUntilState( 88 store, 89 state => 90 state.grids.length == 2 && 91 !state.grids[0].highlighted && 92 !state.grids[1].highlighted 93 ); 94 checkbox2.click(); 95 await onHighlighterHidden; 96 await onCheckboxChange; 97 98 info("Checking the CSS grid highlighter is not shown."); 99 ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown."); 100 });