tenfourfox/layout/style/test/test_all_shorthand.html

160 lines
6.5 KiB
HTML
Raw Normal View History

2017-04-19 07:56:45 +00:00
<!DOCTYPE html>
<title>Test the 'all' shorthand property</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="property_database.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
<body>
<style id="stylesheet">
#parent { }
#child { }
#child { }
</style>
<div style="display: none">
<div id="parent">
<div id="child"></div>
</div>
</div>
<script>
function runTest() {
var sheet = document.getElementById("stylesheet").sheet;
var parentRule = sheet.cssRules[0];
var childRule1 = sheet.cssRules[1];
var childRule2 = sheet.cssRules[2];
var parent = document.getElementById("parent");
var child = document.getElementById("child");
// Longhand properties that are NOT considered to be subproperties of the 'all'
// shorthand.
var excludedSubproperties = ["direction", "unicode-bidi"];
var excludedSubpropertiesSet = new Set(excludedSubproperties);
// Longhand properties that are considered to be subproperties of the 'all'
// shorthand.
var includedSubproperties = Object.keys(gCSSProperties).filter(function(prop) {
var info = gCSSProperties[prop];
return info.type == CSS_TYPE_LONGHAND &&
!excludedSubpropertiesSet.has(prop);
});
// All longhand properties to be tested.
var allSubproperties = includedSubproperties.concat(excludedSubproperties);
// First, get the computed value for the initial value and one other value of
// each property.
var initialComputedValues = new Map();
var otherComputedValues = new Map();
allSubproperties.forEach(function(prop) {
parentRule.style.setProperty(prop, "initial", "");
initialComputedValues.set(prop, getComputedStyle(parent, "").getPropertyValue(prop));
parentRule.style.cssText = "";
});
allSubproperties.forEach(function(prop) {
var info = gCSSProperties[prop];
parentRule.style.setProperty(prop, info.other_values[0], "");
otherComputedValues.set(prop, getComputedStyle(parent, "").getPropertyValue(prop));
parentRule.style.cssText = "";
});
// Test setting all:inherit through setProperty.
includedSubproperties.forEach(function(prop) {
var info = gCSSProperties[prop];
parentRule.style.setProperty(prop, info.other_values[0], "");
childRule1.style.setProperty(prop, "initial");
childRule2.style.setProperty("all", "inherit");
is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop),
"computed value for " + prop + " when 'all:inherit' set with setProperty");
parentRule.style.cssText = "";
childRule1.style.cssText = "";
childRule2.style.cssText = "";
});
excludedSubproperties.forEach(function(prop) {
var info = gCSSProperties[prop];
parentRule.style.setProperty(prop, info.other_values[0], "");
childRule1.style.setProperty(prop, "initial");
childRule2.style.setProperty("all", "inherit");
is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop),
"computed value for excluded subproperty " + prop + " when 'all:inherit' set with setProperty");
parentRule.style.cssText = "";
childRule1.style.cssText = "";
childRule2.style.cssText = "";
});
// Test setting all:initial through setProperty.
includedSubproperties.forEach(function(prop) {
var info = gCSSProperties[prop];
parentRule.style.setProperty(prop, info.other_values[0], "");
childRule1.style.setProperty(prop, "inherit");
childRule2.style.setProperty("all", "initial");
is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop),
"computed value for " + prop + " when 'all:initial' set with setProperty");
parentRule.style.cssText = "";
childRule1.style.cssText = "";
childRule2.style.cssText = "";
});
excludedSubproperties.forEach(function(prop) {
var info = gCSSProperties[prop];
parentRule.style.setProperty(prop, info.other_values[0], "");
childRule1.style.setProperty(prop, info.other_values[0], "");
childRule2.style.setProperty("all", "initial");
is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop),
"computed value for excluded subproperty " + prop + " when 'all:initial' set with setProperty");
parentRule.style.cssText = "";
childRule1.style.cssText = "";
childRule2.style.cssText = "";
});
// Test setting all:unset through setProperty.
includedSubproperties.forEach(function(prop) {
var info = gCSSProperties[prop];
if (info.inherited) {
parentRule.style.setProperty(prop, info.other_values[0], "");
childRule1.style.setProperty(prop, "initial", "");
childRule2.style.setProperty("all", "unset");
is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop),
"computed value for " + prop + " when 'all:unset' set with setProperty");
} else {
parentRule.style.setProperty(prop, info.other_values[0], "");
childRule1.style.setProperty(prop, info.other_values[0], "");
childRule2.style.setProperty("all", "unset");
is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop),
"computed value for " + prop + " when 'all:unset' set with setProperty");
}
parentRule.style.cssText = "";
childRule1.style.cssText = "";
childRule2.style.cssText = "";
});
excludedSubproperties.forEach(function(prop) {
var info = gCSSProperties[prop];
if (info.inherited) {
parentRule.style.setProperty(prop, info.other_values[0], "");
childRule1.style.setProperty(prop, "initial", "");
childRule2.style.setProperty("all", "unset");
is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop),
"computed value for excluded subproperty " + prop + " when 'all:unset' set with setProperty");
} else {
parentRule.style.setProperty(prop, info.other_values[0], "");
childRule1.style.setProperty(prop, info.other_values[0], "");
childRule2.style.setProperty("all", "unset");
is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop),
"computed value for excluded subproperty " + prop + " when 'all:unset' set with setProperty");
}
parentRule.style.cssText = "";
childRule1.style.cssText = "";
childRule2.style.cssText = "";
});
SimpleTest.finish();
}
SimpleTest.waitForExplicitFinish();
SpecialPowers.pushPrefEnv({ "set": [["layout.css.all-shorthand.enabled", true],
["layout.css.unset-value.enabled", true]] }, runTest);
</script>