browser_inspector_inspect_mutated_node.js (2341B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Check that Inspect Element works even if the selector of the inspected 7 // element changes after opening the context menu. 8 // For this test, we explicitly move the element when opening the context menu. 9 10 const TEST_URL = 11 `data:text/html;charset=utf-8,` + 12 encodeURIComponent(` 13 14 <div id="parent-1"> 15 <span>Inspect me</span> 16 </div> 17 <div id="parent-2"></div> 18 <div id="changing-id">My ID will change</div> 19 20 <script type="text/javascript"> 21 document.querySelector("span").addEventListener("contextmenu", () => { 22 // Right after opening the context menu, move the target element in the 23 // tree to change its selector. 24 window.setTimeout(() => { 25 const span = document.querySelector("span"); 26 document.getElementById("parent-2").appendChild(span); 27 }, 0) 28 }); 29 30 document.querySelector("#changing-id").addEventListener("contextmenu", () => { 31 // Right after opening the context menu, update the id of #changing-id 32 // to make sure we are not relying on outdated selectors to find the node 33 window.setTimeout(() => { 34 document.querySelector("#changing-id").id= "new-id"; 35 }, 0) 36 }); 37 </script> 38 `); 39 40 add_task(async function () { 41 await addTab(TEST_URL); 42 await testNodeWithChangingPath(); 43 await testNodeWithChangingId(); 44 }); 45 46 async function testNodeWithChangingPath() { 47 info("Test that inspect element works if the CSS path changes"); 48 const inspector = await clickOnInspectMenuItem("span"); 49 50 const selectedNode = inspector.selection.nodeFront; 51 ok(selectedNode, "A node is selected in the inspector"); 52 is( 53 selectedNode.tagName.toLowerCase(), 54 "span", 55 "The selected node is correct" 56 ); 57 const parentNode = await selectedNode.parentNode(); 58 is( 59 parentNode.id, 60 "parent-2", 61 "The selected node is under the expected parent node" 62 ); 63 } 64 65 async function testNodeWithChangingId() { 66 info("Test that inspect element works if the id changes"); 67 const inspector = await clickOnInspectMenuItem("#changing-id"); 68 69 const selectedNode = inspector.selection.nodeFront; 70 ok(selectedNode, "A node is selected in the inspector"); 71 is(selectedNode.id.toLowerCase(), "new-id", "The selected node is correct"); 72 }