378 lines
14 KiB
HTML
378 lines
14 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=877690
|
|
-->
|
|
<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");
|
|
}
|
|
|
|
if(SpecialPowers.getBoolPref("layout.css.light-dark.images.enabled")) {
|
|
expected.push("light-dark");
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
// test border-image property, for bug 973345
|
|
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.");
|
|
|
|
// Regression test for bug 1255401.
|
|
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.");
|
|
|
|
// Regression test for bug 1255384.
|
|
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.");
|
|
}
|
|
|
|
// Regression test for bug 1430616
|
|
var prop = "text-align";
|
|
var values = InspectorUtils.getCSSValuesForProperty(prop);
|
|
ok(values.includes("match-parent"), "property text-align includes match-parent");
|
|
|
|
// Regression test for bug 1255402.
|
|
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");
|
|
}
|
|
|
|
// Regression test for bug 1255378.
|
|
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");
|
|
|
|
// Regression test for bug 1255379.
|
|
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");
|
|
|
|
// Regression test for bug 1255380.
|
|
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");
|
|
|
|
// Regression test for bug 1255369.
|
|
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");
|
|
|
|
// Regression test for bug 1696677.
|
|
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");
|
|
|
|
// Test for bug 1935181.
|
|
var values = InspectorUtils.getCSSValuesForProperty("align-items");
|
|
var expected = [
|
|
"baseline",
|
|
"center",
|
|
"end",
|
|
"first baseline",
|
|
"flex-end",
|
|
"flex-start",
|
|
"inherit",
|
|
"initial",
|
|
"last baseline",
|
|
"normal",
|
|
"revert",
|
|
"revert-layer",
|
|
"safe",
|
|
"self-end",
|
|
"self-start",
|
|
"start",
|
|
"stretch",
|
|
"unsafe",
|
|
"unset"
|
|
];
|
|
|
|
if(SpecialPowers.getBoolPref("layout.css.anchor-positioning.enabled")) {
|
|
expected.push("anchor-center");
|
|
}
|
|
|
|
ok(testValues(values, expected), "property align-items values.");
|
|
|
|
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>
|