browser_markup_shadowdom_shadowroot_mode.js

Enable keyboard shortcuts

/* Any copyright is dedicated to the Public Domain.

 http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test that the shadow root mode is displayed properly

const TEST_URL = `data:text/html;charset=utf-8,

  <closed-component></closed-component>

  <open-component></open-component>

  <script>

    'use strict';

    customElements.define("closed-component", class extends HTMLElement {

      constructor() {

        super();

        this.attachShadow({mode: "closed"});

});

    customElements.define("open-component", class extends HTMLElement {

      constructor() {

        super();

        this.attachShadow({ mode: "open" });

});

  </script>

`;

add_task(async function () {

  const { inspector } = await openInspectorForURL(TEST_URL);

  const { markup } = inspector;

  info("Find and expand the closed-component shadow DOM host.");

  const closedHostFront = await getNodeFront("closed-component", inspector);

  const closedHostContainer = markup.getContainer(closedHostFront);

  await expandContainer(inspector, closedHostContainer);

  info("Check the shadow root mode");

  const closedShadowRootContainer = closedHostContainer.getChildContainers()[0];

  assertContainerHasText(closedShadowRootContainer, "#shadow-root (closed)");

  info("Find and expand the open-component shadow DOM host.");

  const openHostFront = await getNodeFront("open-component", inspector);

  const openHostContainer = markup.getContainer(openHostFront);

  await expandContainer(inspector, openHostContainer);

  info("Check the shadow root mode");

  const openShadowRootContainer = openHostContainer.getChildContainers()[0];

  assertContainerHasText(openShadowRootContainer, "#shadow-root (open)");

});