gecko/layout/style/test/chrome/test_author_specified_style.html

53 lines
2.0 KiB
HTML

<!DOCTYPE html>
<title>Test for CSSStyleDeclaration.getAuthoredPropertyValue()</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>
var values = [
// specified value // returned from getAuthoredPropertyValue()
"#12F", "#12f",
"#1122FF", "#1122ff",
"rgb(10,20,30)", "rgb(10, 20, 30)",
"Rgb(300,20,30)", "rgb(255, 20, 30)",
"rgba(10,20,30,0.250)", "rgba(10, 20, 30, 0.25)",
"OrangeRed", "OrangeRed",
"rgb(10%,25%,99%)", "rgb(10%, 25%, 99%)",
"rgb(6.66667%,0%,0.0%)", "rgb(6.66667%, 0%, 0%)",
"HSL(0,25%,75%)", "hsl(0, 25%, 75%)",
"hsl(60,0%,0%)", "hsl(60, 0%, 0%)",
"hsla(60,50%,50%,0.1250)", "hsla(60, 50%, 50%, 0.125)",
"rgba(0,0,0,0)", "rgba(0, 0, 0, 0)"
];
var properties = [
// property to test with // fixed prefix to ignore from getAuthoredPropertyValue()
"color", "",
"background-color", "",
"background", "none repeat scroll 0% 0% "
];
function runTest() {
var span = document.createElement("span");
for (var j = 0; j < properties.length; j += 2) {
var propertyName = properties[j];
var expectedPrefix = properties[j + 1];
for (var i = 0; i < values.length; i += 2) {
var value = values[i];
var expected = values[i + 1];
span.setAttribute("style", propertyName + ": " + value);
is(span.style.getAuthoredPropertyValue(propertyName), expectedPrefix + expected, "specified " + value);
}
}
// also test a custom property
span.setAttribute("style", "--color: rgb(10%,25%,99%)");
is(span.style.getAuthoredPropertyValue("--color"), " rgb(10%,25%,99%)", "specified --color");
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true]] },
runTest);
</script>