2007-04-17 04:45:49 +00:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<!--
|
|
|
|
|
-->
|
|
|
|
|
<head>
|
|
|
|
|
<title>Test for parsing, storage, and serialization of CSS values</title>
|
|
|
|
|
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
|
|
|
<script type="text/javascript" src="property_database.js"></script>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
2010-05-11 15:49:43 +00:00
|
|
|
<style type="text/css" id="prereqsheet">
|
|
|
|
|
#testnode {}
|
|
|
|
|
</style>
|
2007-04-17 04:45:49 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<p id="display"></p>
|
|
|
|
|
<div id="content" style="display: none">
|
|
|
|
|
|
|
|
|
|
<div id="testnode"></div>
|
2013-02-16 02:42:48 +00:00
|
|
|
|
2007-04-17 04:45:49 +00:00
|
|
|
</div>
|
|
|
|
|
<pre id="test">
|
|
|
|
|
<script class="testbody" type="text/javascript">
|
|
|
|
|
|
|
|
|
|
/** Test for parsing, storage, and serialization of CSS values **/
|
|
|
|
|
|
2007-04-17 18:57:35 +00:00
|
|
|
/*
|
|
|
|
|
* The idempotence tests here deserve a little bit of explanation. What
|
|
|
|
|
* we're testing here are the following operations:
|
|
|
|
|
* parse: string -> CSS rule
|
|
|
|
|
* serialize: CSS rule -> string (normalization 1)
|
|
|
|
|
* (this actually has two variants that go through partly different
|
|
|
|
|
* codepaths, which we exercise with getPropertyValue and cssText)
|
|
|
|
|
* compute: CSS rule -> computed style
|
|
|
|
|
* cserialize: computed style -> string (normalization 2)
|
|
|
|
|
*
|
|
|
|
|
* Both serialize and cserialize do some normalization, so we can't test
|
|
|
|
|
* for pure round-tripping, and we also can't compare their output since
|
|
|
|
|
* they could normalize differently. (We might at some point in the
|
|
|
|
|
* future want to guarantee that any output of cserialize is
|
|
|
|
|
* untouched by going through parse+serialize, though.)
|
|
|
|
|
*
|
|
|
|
|
* So we test idempotence of parse + serialize by running the whole
|
|
|
|
|
* operation twice. Likewise for parse + compute + cserialize.
|
|
|
|
|
*
|
2007-05-05 17:06:49 +00:00
|
|
|
* Slightly more interestingly, we test that serialize + parse is the
|
|
|
|
|
* identity transform by comparing the output of parse + compute +
|
|
|
|
|
* cserialize to the output of parse + serialize + parse + compute +
|
|
|
|
|
* cserialize.
|
2007-04-17 18:57:35 +00:00
|
|
|
*/
|
|
|
|
|
|
2007-06-12 18:28:56 +00:00
|
|
|
var gSystemFont = {
|
|
|
|
|
"caption": true,
|
|
|
|
|
"icon": true,
|
|
|
|
|
"menu": true,
|
|
|
|
|
"message-box": true,
|
|
|
|
|
"small-caption": true,
|
|
|
|
|
"status-bar": true,
|
2013-02-16 02:42:48 +00:00
|
|
|
"-moz-window": true,
|
|
|
|
|
"-moz-document": true,
|
|
|
|
|
"-moz-desktop": true,
|
|
|
|
|
"-moz-info": true,
|
|
|
|
|
"-moz-dialog": true,
|
|
|
|
|
"-moz-button": true,
|
|
|
|
|
"-moz-pull-down-menu": true,
|
|
|
|
|
"-moz-list": true,
|
|
|
|
|
"-moz-field": true,
|
|
|
|
|
"-moz-workspace": true,
|
2007-06-12 18:28:56 +00:00
|
|
|
};
|
2007-04-17 17:06:23 +00:00
|
|
|
|
|
|
|
|
var gBadCompute = {
|
|
|
|
|
// output wrapped around to positive, in exponential notation
|
|
|
|
|
"-moz-box-ordinal-group": [ "-1", "-1000" ],
|
|
|
|
|
};
|
|
|
|
|
|
2007-04-17 07:41:44 +00:00
|
|
|
function xfail_compute(property, value)
|
|
|
|
|
{
|
2007-04-17 17:06:23 +00:00
|
|
|
if (property in gBadCompute &&
|
|
|
|
|
gBadCompute[property].indexOf(value) != -1)
|
|
|
|
|
return true;
|
|
|
|
|
|
2007-04-17 07:41:44 +00:00
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
2007-04-17 04:45:49 +00:00
|
|
|
var gElement = document.getElementById("testnode");
|
|
|
|
|
var gDeclaration = gElement.style;
|
|
|
|
|
var gComputedStyle = window.getComputedStyle(gElement, "");
|
|
|
|
|
|
2010-05-11 15:49:43 +00:00
|
|
|
var gPrereqDeclaration =
|
|
|
|
|
document.getElementById("prereqsheet").sheet.cssRules[0].style;
|
|
|
|
|
|
2007-04-17 04:45:49 +00:00
|
|
|
function test_property(property)
|
|
|
|
|
{
|
2014-02-10 00:56:35 +00:00
|
|
|
ok(SpecialPowers.getBoolPref("layout.css.variables.enabled"), "pref not set #2");
|
2007-04-17 04:45:49 +00:00
|
|
|
var info = gCSSProperties[property];
|
|
|
|
|
|
|
|
|
|
var test_computed = !("backend_only" in info);
|
|
|
|
|
|
2013-08-15 00:38:01 +00:00
|
|
|
// can all properties be removed from the style?
|
|
|
|
|
function test_remove_all_properties(property, value) {
|
|
|
|
|
var i, p = [];
|
|
|
|
|
for (i = 0; i < gDeclaration.length; i++) p.push(gDeclaration[i]);
|
|
|
|
|
for (i = 0; i < p.length; i++) gDeclaration.removeProperty(p[i]);
|
|
|
|
|
var errstr = "when setting property " + property + " to " + value;
|
|
|
|
|
is(gDeclaration.length, 0, "unremovable properties " + errstr);
|
|
|
|
|
is(gDeclaration.cssText, "", "non-empty serialization after removing all properties " + errstr);
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-12 02:09:47 +00:00
|
|
|
function test_value(value, resolved_value) {
|
|
|
|
|
var value_has_variable_reference = resolved_value != null;
|
|
|
|
|
|
2007-04-17 04:45:49 +00:00
|
|
|
gDeclaration.setProperty(property, value, "");
|
|
|
|
|
|
2009-01-23 01:28:13 +00:00
|
|
|
var idx;
|
2007-04-17 07:41:44 +00:00
|
|
|
|
2007-04-17 04:45:49 +00:00
|
|
|
var step1val = gDeclaration.getPropertyValue(property);
|
|
|
|
|
var step1vals = [];
|
|
|
|
|
var step1ser = gDeclaration.cssText;
|
|
|
|
|
if ("subproperties" in info)
|
|
|
|
|
for (idx in info.subproperties)
|
|
|
|
|
step1vals.push(gDeclaration.getPropertyValue(info.subproperties[idx]));
|
|
|
|
|
var step1comp;
|
|
|
|
|
var step1comps = [];
|
|
|
|
|
if (test_computed && info.type != CSS_TYPE_TRUE_SHORTHAND)
|
|
|
|
|
step1comp = gComputedStyle.getPropertyValue(property);
|
|
|
|
|
if (test_computed && "subproperties" in info)
|
|
|
|
|
for (idx in info.subproperties)
|
|
|
|
|
step1comps.push(gComputedStyle.getPropertyValue(info.subproperties[idx]));
|
|
|
|
|
|
2009-01-23 01:28:13 +00:00
|
|
|
isnot(step1val, "", "setting '" + value + "' on '" + property + "'");
|
2007-04-17 04:45:49 +00:00
|
|
|
if ("subproperties" in info)
|
2007-04-17 17:06:23 +00:00
|
|
|
for (idx in info.subproperties) {
|
|
|
|
|
var subprop = info.subproperties[idx];
|
2013-12-12 02:09:47 +00:00
|
|
|
if (value_has_variable_reference &&
|
|
|
|
|
(!info.alias_for || info.type == CSS_TYPE_TRUE_SHORTHAND)) {
|
|
|
|
|
is(gDeclaration.getPropertyValue(subprop), "",
|
|
|
|
|
"setting '" + value + "' on '" + property + "' (for '" + subprop + "')");
|
|
|
|
|
} else {
|
|
|
|
|
isnot(gDeclaration.getPropertyValue(subprop), "",
|
|
|
|
|
"setting '" + value + "' on '" + property + "' (for '" + subprop + "')");
|
|
|
|
|
}
|
2007-04-17 17:06:23 +00:00
|
|
|
}
|
2007-04-17 04:45:49 +00:00
|
|
|
|
2007-04-17 07:41:44 +00:00
|
|
|
// We don't care particularly about the whitespace or the placement of
|
|
|
|
|
// semicolons, but for simplicity we'll test the current behavior.
|
|
|
|
|
var expected_serialization = "";
|
2012-09-18 18:37:14 +00:00
|
|
|
if (step1val != "") {
|
|
|
|
|
if ("alias_for" in info) {
|
|
|
|
|
expected_serialization = info.alias_for + ": " + step1val + ";";
|
|
|
|
|
} else {
|
|
|
|
|
expected_serialization = property + ": " + step1val + ";";
|
|
|
|
|
}
|
|
|
|
|
}
|
2008-12-23 14:06:57 +00:00
|
|
|
is(step1ser, expected_serialization,
|
|
|
|
|
"serialization should match property value");
|
2007-04-17 07:41:44 +00:00
|
|
|
|
2007-04-17 04:45:49 +00:00
|
|
|
gDeclaration.removeProperty(property);
|
|
|
|
|
gDeclaration.setProperty(property, step1val, "");
|
|
|
|
|
|
2014-06-06 06:09:24 +00:00
|
|
|
is(gDeclaration.getPropertyValue(property), step1val,
|
2009-01-23 01:28:13 +00:00
|
|
|
"parse+serialize should be idempotent for '" +
|
2007-04-17 17:06:23 +00:00
|
|
|
property + ": " + value + "'");
|
2007-04-17 04:45:49 +00:00
|
|
|
if (test_computed && info.type != CSS_TYPE_TRUE_SHORTHAND) {
|
2014-06-06 06:09:24 +00:00
|
|
|
is(gComputedStyle.getPropertyValue(property), step1comp,
|
2009-01-23 01:28:13 +00:00
|
|
|
"serialize+parse should be identity transform for '" +
|
|
|
|
|
property + ": " + value + "'");
|
2007-04-17 04:45:49 +00:00
|
|
|
}
|
|
|
|
|
|
2007-06-12 18:28:56 +00:00
|
|
|
if ("subproperties" in info &&
|
|
|
|
|
// Using setProperty over subproperties is not sufficient for
|
|
|
|
|
// system fonts, since the shorthand does more than its parts.
|
2012-09-18 18:37:14 +00:00
|
|
|
(property != "font" || !(value in gSystemFont)) &&
|
|
|
|
|
// Likewise for special compatibility values of transform
|
2013-12-12 02:09:47 +00:00
|
|
|
(property != "-moz-transform" || !value.match(/^matrix.*(px|em|%)/)) &&
|
|
|
|
|
!value_has_variable_reference) {
|
2007-04-17 04:45:49 +00:00
|
|
|
gDeclaration.removeProperty(property);
|
|
|
|
|
for (idx in info.subproperties) {
|
2007-04-17 07:41:44 +00:00
|
|
|
var subprop = info.subproperties[idx];
|
|
|
|
|
gDeclaration.setProperty(subprop, step1vals[idx], "");
|
2007-05-16 03:03:34 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Now that all the subprops are set, check their values. Note that we
|
|
|
|
|
// need this in a separate loop, in case parts of the shorthand affect
|
|
|
|
|
// the computed values of other parts.
|
|
|
|
|
for (idx in info.subproperties) {
|
|
|
|
|
var subprop = info.subproperties[idx];
|
2007-04-17 18:01:17 +00:00
|
|
|
if (test_computed && !("backend_only" in gCSSProperties[subprop])) {
|
2009-01-23 01:28:13 +00:00
|
|
|
is(gComputedStyle.getPropertyValue(subprop), step1comps[idx],
|
|
|
|
|
"serialize(" + subprop + ")+parse should be the identity " +
|
|
|
|
|
"transform for '" + property + ": " + value + "'");
|
2007-04-17 07:41:44 +00:00
|
|
|
}
|
2007-04-17 04:45:49 +00:00
|
|
|
}
|
2009-01-23 01:28:13 +00:00
|
|
|
is(gDeclaration.getPropertyValue(property), step1val,
|
|
|
|
|
"parse+split+serialize should be idempotent for '" +
|
|
|
|
|
property + ": " + value + "'");
|
2007-04-17 04:45:49 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (test_computed && info.type != CSS_TYPE_TRUE_SHORTHAND) {
|
|
|
|
|
gDeclaration.removeProperty(property);
|
|
|
|
|
gDeclaration.setProperty(property, step1comp, "");
|
2014-06-06 06:09:24 +00:00
|
|
|
var func = xfail_compute(property, value) ? todo_is : is;
|
2007-04-17 07:41:44 +00:00
|
|
|
func(gComputedStyle.getPropertyValue(property), step1comp,
|
|
|
|
|
"parse+compute+serialize should be idempotent for '" +
|
|
|
|
|
property + ": " + value + "'");
|
2007-04-17 04:45:49 +00:00
|
|
|
}
|
|
|
|
|
if (test_computed && "subproperties" in info) {
|
2007-05-16 03:39:36 +00:00
|
|
|
gDeclaration.removeProperty(property);
|
2007-04-17 04:45:49 +00:00
|
|
|
for (idx in info.subproperties) {
|
2007-04-17 07:41:44 +00:00
|
|
|
var subprop = info.subproperties[idx];
|
2007-04-17 18:01:17 +00:00
|
|
|
if ("backend_only" in gCSSProperties[subprop])
|
|
|
|
|
continue;
|
2007-04-17 07:41:44 +00:00
|
|
|
gDeclaration.setProperty(subprop, step1comps[idx], "");
|
2007-05-16 16:03:05 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Now that all the subprops are set, check their values. Note that we
|
|
|
|
|
// need this in a separate loop, in case parts of the shorthand affect
|
|
|
|
|
// the computed values of other parts.
|
|
|
|
|
for (idx in info.subproperties) {
|
|
|
|
|
var subprop = info.subproperties[idx];
|
|
|
|
|
if ("backend_only" in gCSSProperties[subprop])
|
|
|
|
|
continue;
|
2009-01-23 01:28:13 +00:00
|
|
|
is(gComputedStyle.getPropertyValue(subprop), step1comps[idx],
|
|
|
|
|
"parse+compute+serialize(" + subprop + ") should be idempotent for '" +
|
|
|
|
|
property + ": " + value + "'");
|
2007-04-17 04:45:49 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2013-08-15 00:38:01 +00:00
|
|
|
// sanity check shorthands to make sure disabled props aren't exposed
|
|
|
|
|
if (info.type != CSS_TYPE_LONGHAND) {
|
|
|
|
|
gDeclaration.setProperty(property, value, "");
|
|
|
|
|
test_remove_all_properties(property, value);
|
|
|
|
|
}
|
|
|
|
|
|
2007-04-17 04:45:49 +00:00
|
|
|
gDeclaration.removeProperty(property);
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-12 02:09:47 +00:00
|
|
|
function test_value_without_variable(value) {
|
|
|
|
|
test_value(value, null);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function test_value_with_variable(value) {
|
2014-04-02 03:32:16 +00:00
|
|
|
gPrereqDeclaration.setProperty("--a", value, "");
|
|
|
|
|
test_value("var(--a)", value);
|
|
|
|
|
gPrereqDeclaration.removeProperty("--a");
|
2013-12-12 02:09:47 +00:00
|
|
|
}
|
|
|
|
|
|
2010-05-11 15:49:43 +00:00
|
|
|
if ("prerequisites" in info) {
|
|
|
|
|
var prereqs = info.prerequisites;
|
|
|
|
|
for (var prereq in prereqs) {
|
|
|
|
|
gPrereqDeclaration.setProperty(prereq, prereqs[prereq], "");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2007-04-17 04:45:49 +00:00
|
|
|
var idx;
|
2013-12-12 02:09:47 +00:00
|
|
|
for (idx in info.initial_values) {
|
|
|
|
|
test_value_without_variable(info.initial_values[idx]);
|
|
|
|
|
test_value_with_variable(info.initial_values[idx]);
|
|
|
|
|
}
|
|
|
|
|
for (idx in info.other_values) {
|
|
|
|
|
test_value_without_variable(info.other_values[idx]);
|
|
|
|
|
test_value_with_variable(info.other_values[idx]);
|
|
|
|
|
}
|
2010-05-11 15:49:43 +00:00
|
|
|
|
|
|
|
|
if ("prerequisites" in info) {
|
|
|
|
|
for (var prereq in info.prerequisites) {
|
|
|
|
|
gPrereqDeclaration.removeProperty(prereq);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2007-04-17 04:45:49 +00:00
|
|
|
}
|
|
|
|
|
|
2014-02-10 00:56:35 +00:00
|
|
|
function runTest() {
|
|
|
|
|
// To avoid triggering the slow script dialog, we have to test one
|
|
|
|
|
// property at a time.
|
|
|
|
|
ok(SpecialPowers.getBoolPref("layout.css.variables.enabled"), "pref not set #1");
|
|
|
|
|
var props = [];
|
|
|
|
|
for (var prop in gCSSProperties)
|
|
|
|
|
props.push(prop);
|
|
|
|
|
props = props.reverse();
|
|
|
|
|
function do_one() {
|
|
|
|
|
if (props.length == 0) {
|
|
|
|
|
SimpleTest.finish();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
test_property(props.pop());
|
|
|
|
|
SimpleTest.executeSoon(do_one);
|
2007-04-17 07:41:44 +00:00
|
|
|
}
|
2009-03-31 19:37:40 +00:00
|
|
|
SimpleTest.executeSoon(do_one);
|
2007-04-17 07:41:44 +00:00
|
|
|
}
|
2007-04-17 04:45:49 +00:00
|
|
|
|
2014-02-10 00:56:35 +00:00
|
|
|
SimpleTest.waitForExplicitFinish();
|
2014-07-24 22:02:21 +00:00
|
|
|
SimpleTest.requestLongerTimeout(3);
|
2014-02-10 00:56:35 +00:00
|
|
|
|
|
|
|
|
SpecialPowers.pushPrefEnv({ set: [["layout.css.variables.enabled", true]] },
|
|
|
|
|
runTest);
|
2007-04-17 04:45:49 +00:00
|
|
|
</script>
|
|
|
|
|
</pre>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
