test_all_shorthand.html

<!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 onload="runTest()">

<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();

</script>