Quelle  test_getAnchorNamesFor.html   Sprache: HTML

<!DOCTYPE HTML>
<html>
<head>
  <title>Test InspectorUtils.getAnchorNamesFor</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<code>InspectorUtils.getAnchorNamesFor</code>

<style>
  #anchor {
    anchor-name: --my-anchor, --anchor-alias;
  }

  #abs-pos-anchor {
    anchor-name: --my-abs-pos-anchor;
  }

  #another-anchor {
    anchor-name: --another-anchor;
  }

  .abs-pos {
    position: absolute;
  }

  #not-abs-pos {
    position: relative;
  }

  #with-pseudo::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: hotpink;
    position: absolute;
  }
</style>

<section>
  <div id="anchor">⚓️</div>
  <div id="another-anchor">⚓︎⚓︎⚓︎</div>
  <div id="not-abs-pos" class="anchored">not abs-pos</div>
  <div id="abs-pos" class="abs-pos">abs-pos</div>
  <div id="abs-pos-anchor" class="abs-pos">abs-pos ⚓️</div>
  <div id="with-pseudo">with pseudo</div>
  <div id="host"></div>
</section>

<script>
  const sheet = new CSSStyleSheet();
  sheet.replaceSync(`
    div {
      anchor-name: --my-shadow-anchor, --shadow-anchor-alias;
    }

    .shadow-abs-pos {
      position: absolute;
    }
  `);
  const shadow = host.attachShadow({ mode: "open" });
  shadow.adoptedStyleSheets = [sheet];

  const shadowAnchor = document.createElement("div");
  shadowAnchor.append("⚓️");

  const shadowAbsPos = document.createElement("div");
  shadowAbsPos.classList.add("shadow-abs-pos")
  shadowAbsPos.append("shadow abs-pos");
  shadow.append(shadowAnchor, shadowAbsPos);
</script>


<script>
add_task(async function() {
  const { Assert } = SpecialPowers.ChromeUtils.importESModule(
    "resource://testing-common/Assert.sys.mjs"
  );

  const { InspectorUtils } = SpecialPowers;
  const test = (selector, expectedAnchorNames) => {
    info(`InspectorUtils.getAnchorNamesFor(${selector})`);
    const el = document.querySelector(selector);
    const res = InspectorUtils.getAnchorNamesFor(el);

    Assert.deepEqual(
      res.sort(),
      expectedAnchorNames.sort(),
      `Got expected anchor names #${selector}`
    );
  }

  info("Check element that are not absolutely positioned")
  test("#not-abs-pos", []);

  info("Check element that are absolutely positioned")
  test("#abs-pos", [
    "--anchor-alias",
    "--another-anchor",
    "--my-anchor",
  ]);


  info("Check pseudo elements")
  const [beforePseudoElement] = InspectorUtils.getChildrenForNode(
    document.getElementById("with-pseudo"),
    true,
    false,
  );
  is(
    beforePseudoElement.implementedPseudoElement,
    "::before",
    "Got expected ::before pseudo element"
  );
  const pseudoElementRes = InspectorUtils.getAnchorNamesFor(beforePseudoElement);
  Assert.deepEqual(
    pseudoElementRes.sort(),
    [
      "--anchor-alias",
      "--another-anchor",
      // we're getting the abs-pos enchor since #with-pseudo is placed after #abs-pos-anchor
      "--my-abs-pos-anchor",
      "--my-anchor",
    ],
    `Got expected anchor names for ::before pseudo element`
  );

  info("Check shadow DOM elements");
  const shadowRoot = host.shadowRoot;
  const shadowEl = shadowRoot.querySelector(".shadow-abs-pos")
  const shadowElementRes = InspectorUtils.getAnchorNamesFor(shadowEl);
  Assert.deepEqual(
    shadowElementRes.sort(),
    [
      "--my-shadow-anchor",
      "--shadow-anchor-alias",
    ],
    `Got expected anchor names for shadow dom element`
  );
});
</script>
</body>
</html>