Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: layout/inspector/tests/mochitest.toml
<!DOCTYPE HTML>
<html>
<!--
-->
<head>
<meta charset="utf-8">
<title>Test for InspectorUtils.getCSSValuesForProperty</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<script>
/** Test for InspectorUtils.getCSSValuesForProperty **/
const InspectorUtils = SpecialPowers.InspectorUtils;
// Returns true if values contains all and only the expected values. False otherwise.
function testValues(values, expected) {
values.sort();
expected.sort();
info(JSON.stringify([...values]));
info(JSON.stringify(expected));
if (values.length !== expected.length) {
return false;
}
for (var i = 0; i < values.length; ++i) {
if (values[i] !== expected[i]) {
return false;
}
}
return true;
}
function do_test() {
var allColors = [
"COLOR",
"currentColor",
"transparent",
"rgb",
"rgba",
"hsl",
"hsla",
"hwb",
"color-mix",
"color",
"lab",
"lch",
"light-dark",
"oklab",
"oklch"
];
var allGradients = [
"linear-gradient",
"-webkit-linear-gradient",
"-moz-linear-gradient",
"repeating-linear-gradient",
"-webkit-repeating-linear-gradient",
"-moz-repeating-linear-gradient",
"radial-gradient",
"-webkit-radial-gradient",
"-moz-radial-gradient",
"repeating-radial-gradient",
"-webkit-repeating-radial-gradient",
"-moz-repeating-radial-gradient",
"-webkit-gradient",
"conic-gradient",
"repeating-conic-gradient",
];
// test a property with keywords and colors
var prop = "color";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "initial", "inherit", "unset", "revert", "revert-layer", ...allColors ];
ok(testValues(values, expected), "property color's values.");
// test a shorthand property
var prop = "background";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "auto", "initial", "inherit", "unset", "revert", "revert-layer", ...allColors, "no-repeat", "repeat",
"repeat-x", "repeat-y", "space", "round", "fixed", "scroll", "local", "center", "top", "bottom", "left", "right",
"border-box", "padding-box", "content-box", "text", "contain",
"cover", "none", "-moz-element", "url", ...allGradients, "image-set" ];
if(SpecialPowers.getBoolPref("layout.css.cross-fade.enabled")) {
expected.push("cross-fade");
}
ok(testValues(values, expected), "property background values.");
var prop = "border";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "initial", "unset", "revert", "revert-layer", "dashed", "dotted", "double",
"groove", "hidden", "inherit", "inset", "medium", "none", "outset", "ridge",
"solid", "thick", "thin", ...allColors ]
ok(testValues(values, expected), "property border values.");
// test keywords only
var prop = "border-top";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "initial", "inherit", "revert", "revert-layer", "unset", "thin", "medium", "thick", "none", "hidden", "dotted",
"dashed", "solid", "double", "groove", "ridge", "inset", "outset", ...allColors ];
ok(testValues(values, expected), "property border-top's values.");
// tests no keywords or colors
var prop = "padding-bottom";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "initial", "inherit", "unset", "revert", "revert-layer" ];
ok(testValues(values, expected), "property padding-bottom's values.");
// test proprety
var prop = "display";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "initial", "inherit", "unset", "revert", "revert-layer", "none", "inline", "block", "inline-block", "list-item",
"table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row",
"table-column-group", "table-column", "table-cell", "table-caption",
"flex", "inline-flex", "-webkit-box", "-webkit-inline-box",
"grid", "inline-grid", "inline list-item", "inline flow-root list-item", "flow-root list-item",
"ruby", "ruby-base", "ruby-base-container", "ruby-text", "ruby-text-container", "block ruby",
"contents", "flow-root" ];
ok(testValues(values, expected), "property display's values.");
// test property
var prop = "float";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "initial", "inherit", "unset", "revert", "revert-layer", "none", "left", "right", "inline-start", "inline-end" ];
ok(testValues(values, expected), "property float's values.");
// Test property with "auto"
var prop = "margin";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "initial", "unset", "auto", "inherit", "revert", "revert-layer" ];
if(SpecialPowers.getBoolPref("layout.css.anchor-positioning.enabled")) {
expected.push("anchor-size");
}
ok(testValues(values, expected), "property margin's values.");
var prop = "inset";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "initial", "unset", "auto", "inherit", "revert", "revert-layer" ];
if(SpecialPowers.getBoolPref("layout.css.anchor-positioning.enabled")) {
expected.push(...["anchor", "anchor-size"]);
}
ok(testValues(values, expected), "property inset's values.");
var prop = "width";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [
"-moz-available",
"-webkit-fill-available",
"auto",
"fit-content",
"inherit",
"initial",
"max-content",
"min-content",
"revert",
"revert-layer",
"stretch",
"unset",
];
if(SpecialPowers.getBoolPref("layout.css.anchor-positioning.enabled")) {
expected.push("anchor-size");
}
ok(testValues(values, expected), "property width's values.");
var prop = "max-width";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [
"-moz-available",
"-webkit-fill-available",
"none",
"fit-content",
"inherit",
"initial",
"max-content",
"min-content",
"revert",
"revert-layer",
"stretch",
"unset",
];
if(SpecialPowers.getBoolPref("layout.css.anchor-positioning.enabled")) {
expected.push("anchor-size");
}
ok(testValues(values, expected), "property max-width's values.");
// Test property with "normal"
var prop = "font-style";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "initial", "inherit", "unset", "revert", "revert-layer", "italic", "normal", "oblique" ];
ok(testValues(values, expected), "property font-style's values.");
// Test property with "cubic-bezier" and "step".
var prop = "transition";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "initial", "all", "unset", "cubic-bezier", "ease", "ease-in", "ease-in-out",
"ease-out", "inherit", "revert", "revert-layer", "linear", "none", "step-end", "step-start",
"steps", "normal", "allow-discrete" ];
ok(testValues(values, expected), "property transition's values.");
// test invalid property
var prop = "invalidProperty";
try {
InspectorUtils.getCSSValuesForProperty(prop);
ok(false, "invalid property should throw an exception");
}
catch(e) {
// test passed
}
var prop = "border-image";
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "auto", "inherit", "revert", "revert-layer", "initial", "unset", "repeat", "stretch",
"-moz-element", "url", ...allGradients,
"fill", "none", "round", "space", "image-set" ];
if(SpecialPowers.getBoolPref("layout.css.cross-fade.enabled")) {
expected.push("cross-fade");
}
ok(testValues(values, expected), "property border-image's values.");
var prop = "background-size"
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "auto", "inherit", "revert", "revert-layer", "initial", "unset", "contain", "cover" ];
ok(testValues(values, expected), "property background-size's values.");
var prop = "all"
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "inherit", "initial", "unset", "revert", "revert-layer" ];
ok(testValues(values, expected), "property all's values.");
var prop = "quotes"
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "inherit", "initial", "unset", "revert", "revert-layer", "auto", "none" ];
ok(testValues(values, expected), "property quotes's values.");
for (prop of ["counter-increment", "counter-reset"]) {
var values = InspectorUtils.getCSSValuesForProperty(prop);
var expected = [ "inherit", "initial", "unset", "none", "revert", "revert-layer" ];
ok(testValues(values, expected), "property " + prop + "'s values.");
}
var prop = "text-align";
var values = InspectorUtils.getCSSValuesForProperty(prop);
ok(values.includes("match-parent"), "property text-align includes match-parent");
var expected = [ "inherit", "initial", "unset", "revert", "revert-layer", "left", "right",
"top", "center", "bottom" ];
for (prop of ["object-position", "perspective-origin"]) {
var values = InspectorUtils.getCSSValuesForProperty(prop);
ok(testValues(values, expected), "property " + prop + "'s values");
}
var expected = [ "inherit", "initial", "unset", "revert", "revert-layer", "none", ...allColors ];
var values = InspectorUtils.getCSSValuesForProperty("text-shadow");
ok(testValues(values, expected), "property text-shadow's values");
var expected = [ "inherit", "initial", "unset", "revert", "revert-layer", "inset", "none", ...allColors ];
var values = InspectorUtils.getCSSValuesForProperty("box-shadow");
ok(testValues(values, expected), "property box-shadow's values");
var shapeFunction = [ "close", "evenodd", "nonzero", "by", "to", "cw", "ccw",
"small", "large" ];
var expected = [ "inherit", "initial", "unset", "revert", "revert-layer",
"none", "url", "polygon", "circle", "ellipse", "inset",
"path", "rect", "xywh", "fill-box", "stroke-box",
"view-box", "margin-box", "border-box", "padding-box",
"content-box", ...shapeFunction ];
var values = InspectorUtils.getCSSValuesForProperty("clip-path");
ok(testValues(values, expected), "property clip-path's values");
var expected = [ "inherit", "initial", "unset", "revert", "revert-layer", "auto", "rect" ];
var values = InspectorUtils.getCSSValuesForProperty("clip");
ok(testValues(values, expected), "property clip's values");
var expected = [ "normal", "none", "counter", "counters",
"attr", "open-quote", "close-quote", "no-open-quote",
"no-close-quote", "inherit", "initial", "unset", "revert",
"revert-layer", "-moz-alt-content", "-moz-label-content", "image-set", "url", "-moz-element" ]
.concat(allGradients);
var values = InspectorUtils.getCSSValuesForProperty("content");
ok(testValues(values, expected), "property content's values");
var expected = ["none", "decimal", "decimal-leading-zero", "arabic-indic", "armenian",
"upper-armenian", "lower-armenian", "bengali", "cambodian", "khmer",
"cjk-decimal", "devanagari", "georgian", "gujarati", "gurmukhi", "hebrew",
"kannada", "lao", "malayalam", "mongolian", "myanmar", "oriya", "persian",
"lower-roman", "upper-roman", "tamil", "telugu", "thai", "tibetan",
"lower-alpha", "lower-latin", "upper-alpha", "upper-latin",
"cjk-earthly-branch", "cjk-heavenly-stem", "lower-greek",
"hiragana", "hiragana-iroha", "katakana", "katakana-iroha",
"disc", "circle", "square", "disclosure-open", "disclosure-closed",
"japanese-informal", "japanese-formal",
"korean-hangul-formal", "korean-hanja-informal", "korean-hanja-formal",
"simp-chinese-informal", "simp-chinese-formal",
"trad-chinese-informal", "trad-chinese-formal", "cjk-ideographic",
"ethiopic-numeric", "symbols", "inherit", "initial", "unset", "revert", "revert-layer" ];
var values = InspectorUtils.getCSSValuesForProperty("list-style-type");
ok(testValues(values, expected), "property list-style-type's values");
var values = InspectorUtils.getCSSValuesForProperty("cursor");
ok(values.includes("url"), "property cursor values include url");
ok(values.includes("image-set"), "property cursor values include image-set");
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
addLoadEvent(do_test);
</script>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=877690">Mozilla Bug 877690</a>
<p id="display"></p>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>
</body>
</html>