browser_inspector_highlighter-svg-document.js

Enable keyboard shortcuts

/* This Source Code Form is subject to the terms of the Mozilla Public

 * License, v. 2.0. If a copy of the MPL was not distributed with this

 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

// Test that the highlighter is correctly displayed in SVG documents

const TEST_URI = `data:image/svg+xml,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="100" height="100">

    <circle cx="50" cy="50" r="50"/>

  </svg>`;

add_task(async function () {

  // This is needed to reproduce the issue without the patch that fixed it.

  await pushPref("layout.accessiblecaret.enabled", false);

  await pushPref("layout.accessiblecaret.enabled_on_touch", false);

  const { inspector } = await openInspectorForURL(TEST_URI);

  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);

  info("Highlighting the <circle> node");

  const onHighlighterShown = waitForHighlighterTypeShown(

    inspector.highlighters.TYPES.BOXMODEL

);

  await selectNode("circle", inspector, "test-highlight");

  await onHighlighterShown;

  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {

    const getInfoBarEl = r =>

      r.querySelector(

        ".highlighter-container.box-model .box-model-infobar-text"

);

    const root = content.document

      .getConnectedShadowRoots()

      .find(r => getInfoBarEl(r));

    const inforBarEl = getInfoBarEl(root);

    const rect = inforBarEl.getBoundingClientRect();

    Assert.greater(rect.width, 0, "Highlighter should have a non-zero width");

    Assert.greater(rect.height, 0, "Highlighter should have a non-zero height");

    is(inforBarEl.checkVisibility(), true, "Highlighter element is visible");

is(

      inforBarEl?.textContent,

      "circle100 × 100",

      `circle is properly displayed`

);

});

});