test_css-properties.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<!--

Bug 1265798 - Replace inIDOMUtils.cssPropertyIsShorthand

-->

<head>

  <meta charset="utf-8">

  <title>Test CSS Properties Actor</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" src="inspector-helpers.js"></script>

  <script type="application/javascript">

"use strict";

window.onload = function() {

  function toSortedString(array) {

    return JSON.stringify(array.sort());

  const runCssPropertiesTests = async function(url) {

    info(`Opening tab with CssPropertiesActor support.`);

    // Open a new tab. The only property we are interested in is `target`.

    const { target } = await attachURL(url);

    const { cssProperties } = await target.getFront("cssProperties");

    ok(cssProperties.isKnown("border"),

      "The `border` shorthand property is known.");

    ok(cssProperties.isKnown("display"),

      "The `display` property is known.");

    ok(!cssProperties.isKnown("foobar"),

      "A fake property is not known.");

    ok(cssProperties.isKnown("--foobar"),

      "A CSS variable properly evaluates.");

    ok(cssProperties.isKnown("--foob\\{ar"),

      "A CSS variable with escaped character properly evaluates.");

    ok(cssProperties.isKnown("--fübar"),

      "A CSS variable unicode properly evaluates.");

    ok(!cssProperties.isKnown("--foo bar"),

      "A CSS variable with spaces fails");

    const marginProps = ["auto", "inherit", "initial", "unset", "revert", "revert-layer"];

    if(SpecialPowers.getBoolPref("layout.css.anchor-positioning.enabled")) {

      marginProps.push("anchor-size");

    is(toSortedString(cssProperties.getValues("margin")),

       toSortedString(marginProps),

       "Can get values for the CSS margin.");

    is(cssProperties.getValues("foobar").length, 0,

      "Unknown values return an empty array.");

    const bgColorValues = cssProperties.getValues("background-color");

    ok(bgColorValues.includes("blanchedalmond"),

      "A property with color values includes blanchedalmond.");

    ok(bgColorValues.includes("papayawhip"),

      "A property with color values includes papayawhip.");

    ok(bgColorValues.includes("rgb"),

      "A property with color values includes non-colors.");

    // Check that the "special" shorthands for white-space are exposed.

    const whiteSpaceValues = cssProperties.getValues("white-space");

    ok(whiteSpaceValues.includes("normal"),

       "Values for the white-space shorthand include normal.");

    ok(whiteSpaceValues.includes("pre"),

       "Values for the white-space shorthand include pre.");

    ok(whiteSpaceValues.includes("pre-line"),

       "Values for the white-space shorthand include pre-line.");

    ok(whiteSpaceValues.includes("pre-wrap"),

       "Values for the white-space shorthand include pre-wrap.");

};

  addAsyncTest(async function setup() {

    const url = document.getElementById("cssProperties").href;

    await runCssPropertiesTests(url);

    runNextTest();

});

  SimpleTest.waitForExplicitFinish();

  runNextTest();

};

  </script>

</head>

<body>

  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1265798">Mozilla Bug 1265798</a>

  <a id="cssProperties" target="_blank" href="inspector_css-properties.html">Test Document</a>

</body>

</html>