<!
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">Mozil
la Bug 1265798</a>
<a id="cssProperties" target="_blank" href="inspector_css-properties.html">Test Document</a>
</body>
</html>
