diff options
Diffstat (limited to 'devtools/client/inspector/markup/test/browser_markup_shadowdom_hover.js')
-rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_shadowdom_hover.js | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_hover.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_hover.js new file mode 100644 index 0000000000..c386e26d6d --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_hover.js @@ -0,0 +1,78 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Bug 1465873 +// Tests that hovering nodes in the content page with the element picked and finally +// picking one does not break the markup view. The markup and sequence used here is a bit +// eccentric but the issue from Bug 1465873 is tricky to reproduce. + +const TEST_URL = + `data:text/html;charset=utf-8,` + + encodeURIComponent(` + <test-component id="component1" background> + <div slot="slot1" data-index="1">slot1-1</div> + </test-component> + <script> + (function() { + 'use strict'; + + customElements.define('test-component', class extends HTMLElement { + constructor() { + super(); // always call super() first in the ctor. + + let shadowRoot = this.attachShadow({mode: 'open'}); + shadowRoot.innerHTML = \` + <div id="wrapper" style="padding-top: 20px;"> + a<span class="pick-target">pick-target</span> + <div id="slot1-container"> + <slot id="slot1" name="slot1"></slot> + </div> + </div> + \`; + } + }); + })(); + </script>`); + +add_task(async function () { + const { inspector, toolbox } = await openInspectorForURL(TEST_URL); + + info("Waiting for element picker to become active."); + await startPicker(toolbox); + + info("Move mouse over the padding of the test-component"); + await hoverElement(inspector, "test-component", 10, 10); + + info("Move mouse over the pick-target"); + // Note we can't reach pick-target with a selector because this element lives in the + // shadow-dom of test-component. We aim for PADDING + 5 pixels + await hoverElement(inspector, "test-component", 10, 25); + + info("Click and pick the pick-target"); + await pickElement(inspector, "test-component", 10, 25); + + info( + "Check that the markup view has the expected content after using the picker" + ); + const tree = ` + test-component + #shadow-root + wrapper + a + pick-target + slot1-container + slot1 + div!slotted + div`; + await assertMarkupViewAsTree(tree, "test-component", inspector); + + const hostFront = await getNodeFront("test-component", inspector); + const hostContainer = inspector.markup.getContainer(hostFront); + const moreNodesLink = hostContainer.elt.querySelector(".more-nodes"); + ok( + !moreNodesLink, + "There is no 'more nodes' button displayed in the host container" + ); +}); |