layout/style/test/test_all_shorthand.html

   1 <!DOCTYPE html>
   2 <title>Test the 'all' shorthand property</title>
   3 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   4 <script src="property_database.js"></script>
   5 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
   6 <body onload="runTest()">
   7
   8 <style id="stylesheet">
   9 #parent { }
  10 #child { }
  11 #child { }
  12 </style>
  13
  14 <div style="display: none">
  15   <div id="parent">
  16     <div id="child"></div>
  17   </div>
  18 </div>
  19
  20 <script>
  21 function runTest() {
  22   var sheet = document.getElementById("stylesheet").sheet;
  23   var parentRule = sheet.cssRules[0];
  24   var childRule1 = sheet.cssRules[1];
  25   var childRule2 = sheet.cssRules[2];
  26   var parent = document.getElementById("parent");
  27   var child = document.getElementById("child");
  28
  29   // Longhand properties that are NOT considered to be subproperties of the 'all'
  30   // shorthand.
  31   var excludedSubproperties = ["direction", "unicode-bidi"];
  32   var excludedSubpropertiesSet = new Set(excludedSubproperties);
  33
  34   // Longhand properties that are considered to be subproperties of the 'all'
  35   // shorthand.
  36   var includedSubproperties = Object.keys(gCSSProperties).filter(function(prop) {
  37     var info = gCSSProperties[prop];
  38     return info.type == CSS_TYPE_LONGHAND &&
  39            !excludedSubpropertiesSet.has(prop);
  40   });
  41
  42   // All longhand properties to be tested.
  43   var allSubproperties = includedSubproperties.concat(excludedSubproperties);
  44
  45
  46   // First, get the computed value for the initial value and one other value of
  47   // each property.
  48   var initialComputedValues = new Map();
  49   var otherComputedValues = new Map();
  50
  51   allSubproperties.forEach(function(prop) {
  52     parentRule.style.setProperty(prop, "initial", "");
  53     initialComputedValues.set(prop, getComputedStyle(parent, "").getPropertyValue(prop));
  54     parentRule.style.cssText = "";
  55   });
  56
  57   allSubproperties.forEach(function(prop) {
  58     var info = gCSSProperties[prop];
  59     parentRule.style.setProperty(prop, info.other_values[0], "");
  60     otherComputedValues.set(prop, getComputedStyle(parent, "").getPropertyValue(prop));
  61     parentRule.style.cssText = "";
  62   });
  63
  64
  65   // Test setting all:inherit through setProperty.
  66   includedSubproperties.forEach(function(prop) {
  67     var info = gCSSProperties[prop];
  68     parentRule.style.setProperty(prop, info.other_values[0], "");
  69     childRule1.style.setProperty(prop, "initial");
  70     childRule2.style.setProperty("all", "inherit");
  71     is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop),
  72        "computed value for " + prop + " when 'all:inherit' set with setProperty");
  73     parentRule.style.cssText = "";
  74     childRule1.style.cssText = "";
  75     childRule2.style.cssText = "";
  76   });
  77   excludedSubproperties.forEach(function(prop) {
  78     var info = gCSSProperties[prop];
  79     parentRule.style.setProperty(prop, info.other_values[0], "");
  80     childRule1.style.setProperty(prop, "initial");
  81     childRule2.style.setProperty("all", "inherit");
  82     is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop),
  83        "computed value for excluded subproperty " + prop + " when 'all:inherit' set with setProperty");
  84     parentRule.style.cssText = "";
  85     childRule1.style.cssText = "";
  86     childRule2.style.cssText = "";
  87   });
  88
  89   // Test setting all:initial through setProperty.
  90   includedSubproperties.forEach(function(prop) {
  91     var info = gCSSProperties[prop];
  92     parentRule.style.setProperty(prop, info.other_values[0], "");
  93     childRule1.style.setProperty(prop, "inherit");
  94     childRule2.style.setProperty("all", "initial");
  95     is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop),
  96        "computed value for " + prop + " when 'all:initial' set with setProperty");
  97     parentRule.style.cssText = "";
  98     childRule1.style.cssText = "";
  99     childRule2.style.cssText = "";
 100   });
 101   excludedSubproperties.forEach(function(prop) {
 102     var info = gCSSProperties[prop];
 103     parentRule.style.setProperty(prop, info.other_values[0], "");
 104     childRule1.style.setProperty(prop, info.other_values[0], "");
 105     childRule2.style.setProperty("all", "initial");
 106     is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop),
 107        "computed value for excluded subproperty " + prop + " when 'all:initial' set with setProperty");
 108     parentRule.style.cssText = "";
 109     childRule1.style.cssText = "";
 110     childRule2.style.cssText = "";
 111   });
 112
 113   // Test setting all:unset through setProperty.
 114   includedSubproperties.forEach(function(prop) {
 115     var info = gCSSProperties[prop];
 116     if (info.inherited) {
 117       parentRule.style.setProperty(prop, info.other_values[0], "");
 118       childRule1.style.setProperty(prop, "initial", "");
 119       childRule2.style.setProperty("all", "unset");
 120       is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop),
 121          "computed value for " + prop + " when 'all:unset' set with setProperty");
 122     } else {
 123       parentRule.style.setProperty(prop, info.other_values[0], "");
 124       childRule1.style.setProperty(prop, info.other_values[0], "");
 125       childRule2.style.setProperty("all", "unset");
 126       is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop),
 127          "computed value for " + prop + " when 'all:unset' set with setProperty");
 128     }
 129     parentRule.style.cssText = "";
 130     childRule1.style.cssText = "";
 131     childRule2.style.cssText = "";
 132   });
 133   excludedSubproperties.forEach(function(prop) {
 134     var info = gCSSProperties[prop];
 135     if (info.inherited) {
 136       parentRule.style.setProperty(prop, info.other_values[0], "");
 137       childRule1.style.setProperty(prop, "initial", "");
 138       childRule2.style.setProperty("all", "unset");
 139       is(getComputedStyle(child, "").getPropertyValue(prop), initialComputedValues.get(prop),
 140          "computed value for excluded subproperty " + prop + " when 'all:unset' set with setProperty");
 141     } else {
 142       parentRule.style.setProperty(prop, info.other_values[0], "");
 143       childRule1.style.setProperty(prop, info.other_values[0], "");
 144       childRule2.style.setProperty("all", "unset");
 145       is(getComputedStyle(child, "").getPropertyValue(prop), otherComputedValues.get(prop),
 146          "computed value for excluded subproperty " + prop + " when 'all:unset' set with setProperty");
 147     }
 148     parentRule.style.cssText = "";
 149     childRule1.style.cssText = "";
 150     childRule2.style.cssText = "";
 151   });
 152
 153   SimpleTest.finish();
 154 }
 155
 156 SimpleTest.waitForExplicitFinish();
 157 </script>