browser_rules_class_panel_invalid_nodes.js

Enable keyboard shortcuts

/* Any copyright is dedicated to the Public Domain.

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

"use strict";

// Test the class panel shows a message when invalid nodes are selected.

// text nodes, pseudo-elements, DOCTYPE, comment nodes.

add_task(async function () {

  await addTab(`data:text/html;charset=utf-8,

    <body>

    <style>div::after {content: "test";}</style>

    <!-- comment -->

    Some text

    <div></div>

    </body>`);

  info("Open the class panel");

  const { inspector, view } = await openRuleView();

  view.showClassPanel();

  info("Selecting the DOCTYPE node");

  const { nodes } = await inspector.walker.children(inspector.walker.rootNode);

  await selectNode(nodes[0], inspector);

  checkMessageIsDisplayed(view);

  info("Selecting the comment node");

  const styleNode = await getNodeFront("style", inspector);

  const commentNode = await inspector.walker.nextSibling(styleNode);

  await selectNode(commentNode, inspector);

  checkMessageIsDisplayed(view);

  info("Selecting the text node");

  const textNode = await inspector.walker.nextSibling(commentNode);

  await selectNode(textNode, inspector);

  checkMessageIsDisplayed(view);

  info("Selecting the ::after pseudo-element");

  const divNode = await getNodeFront("div", inspector);

  const pseudoElement = (await inspector.walker.children(divNode)).nodes[0];

  await selectNode(pseudoElement, inspector);

  checkMessageIsDisplayed(view);

});

function checkMessageIsDisplayed(view) {

ok(

    view.classListPreviewer.classesEl.querySelector(".no-classes"),

    "The message is displayed"

);

  checkClassPanelContent(view, []);