browser_markup_shadowdom_hover.js (2486B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Bug 1465873 7 // Tests that hovering nodes in the content page with the element picked and finally 8 // picking one does not break the markup view. The markup and sequence used here is a bit 9 // eccentric but the issue from Bug 1465873 is tricky to reproduce. 10 11 const TEST_URL = 12 `data:text/html;charset=utf-8,` + 13 encodeURIComponent(` 14 <test-component id="component1" background> 15 <div slot="slot1" data-index="1">slot1-1</div> 16 </test-component> 17 <script> 18 (function() { 19 'use strict'; 20 21 customElements.define('test-component', class extends HTMLElement { 22 constructor() { 23 super(); // always call super() first in the ctor. 24 25 let shadowRoot = this.attachShadow({mode: 'open'}); 26 shadowRoot.innerHTML = \` 27 <div id="wrapper" style="padding-top: 20px;"> 28 a<span class="pick-target">pick-target</span> 29 <div id="slot1-container"> 30 <slot id="slot1" name="slot1"></slot> 31 </div> 32 </div> 33 \`; 34 } 35 }); 36 })(); 37 </script>`); 38 39 add_task(async function () { 40 const { inspector, toolbox } = await openInspectorForURL(TEST_URL); 41 42 info("Waiting for element picker to become active."); 43 await startPicker(toolbox); 44 45 info("Move mouse over the padding of the test-component"); 46 await hoverElement(inspector, "test-component", 10, 10); 47 48 info("Move mouse over the pick-target"); 49 // Note we can't reach pick-target with a selector because this element lives in the 50 // shadow-dom of test-component. We aim for PADDING + 5 pixels 51 await hoverElement(inspector, "test-component", 10, 25); 52 53 info("Click and pick the pick-target"); 54 await pickElement(inspector, "test-component", 10, 25); 55 56 info( 57 "Check that the markup view has the expected content after using the picker" 58 ); 59 const tree = ` 60 test-component 61 #shadow-root 62 wrapper 63 a 64 pick-target 65 slot1-container 66 slot1 67 div!slotted 68 div`; 69 await assertMarkupViewAsTree(tree, "test-component", inspector); 70 71 const hostFront = await getNodeFront("test-component", inspector); 72 const hostContainer = inspector.markup.getContainer(hostFront); 73 const moreNodesLink = hostContainer.elt.querySelector(".more-nodes"); 74 ok( 75 !moreNodesLink, 76 "There is no 'more nodes' button displayed in the host container" 77 ); 78 });