diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/markup/test/browser_markup_shadowdom_clickreveal_scroll.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/inspector/markup/test/browser_markup_shadowdom_clickreveal_scroll.js')
-rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_shadowdom_clickreveal_scroll.js | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_shadowdom_clickreveal_scroll.js b/devtools/client/inspector/markup/test/browser_markup_shadowdom_clickreveal_scroll.js new file mode 100644 index 0000000000..7e3714420b --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_shadowdom_clickreveal_scroll.js @@ -0,0 +1,88 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that clicking on "reveal" always scrolls the view to show the real container, even +// if the node is already selected. + +const TEST_URL = `data:text/html;charset=utf-8, + <test-component> + <div slot="slot1" id="el1">slot1 content</div> + </test-component> + + <script> + 'use strict'; + customElements.define('test-component', class extends HTMLElement { + constructor() { + super(); + let shadowRoot = this.attachShadow({mode: 'open'}); + shadowRoot.innerHTML = \` + <slot name="slot1"></slot> + <div></div><div></div><div></div><div></div><div></div><div></div> + <div></div><div></div><div></div><div></div><div></div><div></div> + <div></div><div></div><div></div><div></div><div></div><div></div> + <div></div><div></div><div></div><div></div><div></div><div></div> + <!-- adding some nodes to make sure the slotted container and the real container + require scrolling --> + \`; + } + }); + </script>`; + +add_task(async function () { + const { inspector } = await openInspectorForURL(TEST_URL); + const { markup } = inspector; + + info("Find and expand the test-component shadow DOM host."); + const hostFront = await getNodeFront("test-component", inspector); + const hostContainer = markup.getContainer(hostFront); + await expandContainer(inspector, hostContainer); + + info("Expand the shadow root"); + const shadowRootContainer = hostContainer.getChildContainers()[0]; + await expandContainer(inspector, shadowRootContainer); + + info("Expand the slot"); + const slotContainer = shadowRootContainer.getChildContainers()[0]; + await expandContainer(inspector, slotContainer); + + const slotChildContainers = slotContainer.getChildContainers(); + is(slotChildContainers.length, 1, "Expecting 1 slotted child"); + + const slottedContainer = slotChildContainers[0]; + const realContainer = inspector.markup.getContainer(slottedContainer.node); + const slottedElement = slottedContainer.elt; + const realElement = realContainer.elt; + + info("Click on the reveal link"); + await clickOnRevealLink(inspector, slottedContainer); + // "new-node-front" will also trigger the scroll, so make sure we are testing after + // the scroll was performed. + await waitUntil(() => isScrolledOut(slottedElement)); + is(isScrolledOut(slottedElement), true, "slotted element is scrolled out"); + await waitUntil(() => !isScrolledOut(realElement)); + is(isScrolledOut(realElement), false, "real element is not scrolled out"); + + info("Scroll back to see the slotted element"); + slottedElement.scrollIntoView(); + is( + isScrolledOut(slottedElement), + false, + "slotted element is not scrolled out" + ); + is(isScrolledOut(realElement), true, "real element is scrolled out"); + + info("Click on the reveal link again"); + await clickOnRevealLink(inspector, slottedContainer); + await waitUntil(() => isScrolledOut(slottedElement)); + is(isScrolledOut(slottedElement), true, "slotted element is scrolled out"); + await waitUntil(() => !isScrolledOut(realElement)); + is(isScrolledOut(realElement), false, "real element is not scrolled out"); +}); + +function isScrolledOut(element) { + const win = element.ownerGlobal; + const rect = element.getBoundingClientRect(); + return rect.top < 0 || rect.top + rect.height > win.innerHeight; +} |