test_css-logic-getXPath.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<!--

https://bugzilla.mozilla.org/show_bug.cgi?id=987877

-->

<head>

  <meta charset="utf-8">

  <title>Test for Bug 987877</title>

  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">

  <script type="application/javascript">

"use strict";

const { require } = ChromeUtils.importESModule("resource://devtools/shared/loader/Loader.sys.mjs");

const CssLogic = require("devtools/shared/inspector/css-logic");

const _tests = [];

function addTest(test) {

  _tests.push(test);

function runNextTest() {

  if (!_tests.length) {

    SimpleTest.finish();

    return;

  _tests.shift()();

window.onload = function () {

  SimpleTest.waitForExplicitFinish();

  runNextTest();

};

addTest(function getXPathForUnattachedElement() {

  const unattached = document.createElement("div");

  unattached.id = "unattached";

  is(CssLogic.getXPath(unattached), "", "Unattached node returns empty string");

  const unattachedChild = document.createElement("div");

  unattached.appendChild(unattachedChild);

  is(CssLogic.getXPath(unattachedChild), "", "Unattached child returns empty string");

  const unattachedBody = document.createElement("body");

  is(CssLogic.getXPath(unattachedBody), "", "Unattached body returns empty string");

  runNextTest();

});

addTest(function getXPath() {

  const data = [{

    // Target elements that have an ID get a short XPath.

    selector: "#i-have-an-id",

    path: "//*[@id=\"i-have-an-id\"]"

  }, {

    selector: "html",

    path: "/html"

  }, {

    selector: "body",

    path: "/html/body"

  }, {

    selector: "body > div:nth-child(2) > div > div:nth-child(4)",

    path: "/html/body/div[2]/div/div[4]"

  }, {

    // XPath should support namespace.

    selector: "namespace\\:body",

    path: "/html/body/namespace:test/namespace:body"

}];

  for (const {selector, path} of data) {

    const node = document.querySelector(selector);

    is(CssLogic.getXPath(node), path, `Full css path is correct for ${selector}`);

  runNextTest();

});

  </script>

</head>

<body>

  <div id="i-have-an-id">find me</div>

  <div>

    <div>

      <div></div>

      <div></div>

      <div></div>

      <div>me too!</div>

    </div>

  </div>

  <namespace:test>

    <namespace:header></namespace:header>

    <namespace:body>and me</namespace:body>

  </namespace:test>

</body>

</html>