third_party/WebKit/LayoutTests/fast/css/table-border-spacing.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 <style>
   6 #computed-infer-vertical-border-spacing { border-spacing: 11px; }
   7 #computed-infer-vertical-border-spacing-from-negative-horizontal-border-spacing { border-spacing: -11px; }
   8 #computed-explicit-border-spacing { border-spacing: 13px 23px; }
   9 #computed-explicit-negative-border-spacing { border-spacing: -5px -13px; }
  10 #computed-explicit-border-spacing-with-negative-horizontal { border-spacing: -5px 13px; }
  11 #computed-explicit-border-spacing-with-negative-vertical { border-spacing: 5px -13px; }
  12 #missing-stylesheet-border-spacing { border-spacing: }
  13 </style>
  14 <script>
  15
  16 window.onload = runTests;
  17
  18 if (!String.prototype.trim) {
  19     // Assume this script is being executed in Internet Explorer.
  20     String.prototype.trim = function() {
  21         return this.replace(/^\s+/, '').replace(/\s+$/, '');
  22     }
  23 }
  24
  25 function runTests()
  26 {
  27     debug('Valid values:');
  28     testInferredVerticalBorderSpacing();
  29     testExplicitBorderSpacing();
  30     testComputedInferredVerticalBorderSpacing();
  31     testComputedExplicitBorderSpacing();
  32
  33     debug('<br />Negative values:');
  34     testInferredVerticalBorderSpacingFromNegativeHorizontalSpacing();
  35     testExplicitNegativeBorderSpacing();
  36     testExplicitBorderSpacingWithNegativeHorizontal();
  37     testExplicitBorderSpacingWithNegativeVertical();
  38     testComputedInferredVerticalBorderSpacingFromNegativeHorizontalSpacing();
  39     testComputedExplicitNegativeBorderSpacing();
  40     testComputedExplicitBorderSpacingWithNegativeHorizontal();
  41     testComputedExplicitBorderSpacingWithNegativeVertical();
  42
  43     debug('<br />Missing values:');
  44     testMissingBorderSpacing();
  45     testMissingStylesheetBorderSpacing();
  46
  47     document.body.removeChild(document.getElementById("test-container"));
  48     debug('<br /><span class="pass">TEST COMPLETE</span>');
  49 }
  50
  51 function testInferredVerticalBorderSpacing()
  52 {
  53     var styleAttr = styleAttribute(document.getElementById("infer-vertical-border-spacing"));
  54     shouldBeEqualToString('document.getElementById("infer-vertical-border-spacing").style.borderSpacing', parseCSSTextForPropertyValue(styleAttr, "border-spacing"));
  55 }
  56
  57 function testExplicitBorderSpacing()
  58 {
  59     var styleAttr = styleAttribute(document.getElementById("explicit-border-spacing"));
  60     shouldBeEqualToString('document.getElementById("explicit-border-spacing").style.borderSpacing', parseCSSTextForPropertyValue(styleAttr, "border-spacing"));
  61 }
  62
  63 function testComputedInferredVerticalBorderSpacing()
  64 {
  65     shouldBeEqualToString('computedStyle(document.getElementById("computed-infer-vertical-border-spacing")).borderSpacing', "11px 11px");
  66     shouldBeEqualToString('cssRule("#computed-infer-vertical-border-spacing").style.borderSpacing', "11px"); // Must match border-spacing for #computed-infer-vertical-border-spacing.
  67 }
  68
  69 function testComputedExplicitBorderSpacing()
  70 {
  71     var expectedResult = "13px 23px"; // Must match border-spacing for #computed-explicit-border-spacing.
  72     shouldBeEqualToString('computedStyle(document.getElementById("computed-explicit-border-spacing")).borderSpacing', expectedResult);
  73     shouldBeEqualToString('cssRule("#computed-explicit-border-spacing").style.borderSpacing', expectedResult);
  74 }
  75
  76 function testInferredVerticalBorderSpacingFromNegativeHorizontalSpacing()
  77 {
  78     // The expected value of the empty string follows from <http://www.w3.org/TR/html5/elements.html#the-style-attribute>,
  79     // <http://www.w3.org/TR/css-style-attr/#syntax>, <http://www.w3.org/TR/CSS21/syndata.html#declaration>, <http://www.w3.org/TR/CSS21/syndata.html#length-units>,
  80     // and the definition of "ignore" <http://www.w3.org/TR/CSS21/syndata.html#ignore>.
  81     shouldBeEqualToString('document.getElementById("infer-vertical-border-spacing-from-negative-horizontal-spacing").style.borderSpacing', "");
  82 }
  83
  84 function testExplicitNegativeBorderSpacing()
  85 {
  86     // The expected value of the empty string follows from <http://www.w3.org/TR/html5/elements.html#the-style-attribute>,
  87     // <http://www.w3.org/TR/css-style-attr/#syntax>, <http://www.w3.org/TR/CSS21/syndata.html#declaration>, <http://www.w3.org/TR/CSS21/syndata.html#length-units>,
  88     // and the definition of "ignore" <http://www.w3.org/TR/CSS21/syndata.html#ignore>.
  89     shouldBeEqualToString('document.getElementById("explicit-negative-border-spacing").style.borderSpacing', "");
  90 }
  91
  92 function testExplicitBorderSpacingWithNegativeHorizontal()
  93 {
  94     // The expected value of the empty string follows from <http://www.w3.org/TR/html5/elements.html#the-style-attribute>,
  95     // <http://www.w3.org/TR/css-style-attr/#syntax>, <http://www.w3.org/TR/CSS21/syndata.html#declaration>, <http://www.w3.org/TR/CSS21/syndata.html#length-units>,
  96     // and the definition of "ignore" <http://www.w3.org/TR/CSS21/syndata.html#ignore>.
  97     shouldBeEqualToString('document.getElementById("explicit-border-spacing-with-negative-horizontal").style.borderSpacing', "");
  98 }
  99
 100 function testExplicitBorderSpacingWithNegativeVertical()
 101 {
 102     // The expected value of the empty string follows from <http://www.w3.org/TR/html5/elements.html#the-style-attribute>,
 103     // <http://www.w3.org/TR/css-style-attr/#syntax>, <http://www.w3.org/TR/CSS21/syndata.html#declaration>, <http://www.w3.org/TR/CSS21/syndata.html#length-units>,
 104     // and the definition of "ignore" <http://www.w3.org/TR/CSS21/syndata.html#ignore>.
 105     shouldBeEqualToString('document.getElementById("explicit-border-spacing-with-negative-vertical").style.borderSpacing', "");
 106 }
 107
 108 function testComputedInferredVerticalBorderSpacingFromNegativeHorizontalSpacing()
 109 {
 110     // Expected results follow from the explanation given in testInferredVerticalBorderSpacingFromNegativeHorizontalSpacing().
 111     shouldBeEqualToString('cssRule("#computed-infer-vertical-border-spacing-from-negative-horizontal-border-spacing").style.borderSpacing', "");
 112 }
 113
 114 function testComputedExplicitNegativeBorderSpacing()
 115 {
 116     // Expected results follow from the explanation given in testExplicitNegativeBorderSpacing().
 117     shouldBeEqualToString('cssRule("#computed-explicit-negative-border-spacing").style.borderSpacing', "");
 118 }
 119
 120 function testComputedExplicitBorderSpacingWithNegativeHorizontal()
 121 {
 122     // Expected results follow from the explanation given in testExplicitBorderSpacingWithNegativeHorizontal().
 123     shouldBeEqualToString('cssRule("#computed-explicit-border-spacing-with-negative-horizontal").style.borderSpacing', "");
 124 }
 125
 126 function testComputedExplicitBorderSpacingWithNegativeVertical()
 127 {
 128     // Expected results follow from the explanation given in testExplicitBorderSpacingWithNegativeVertical().
 129     shouldBeEqualToString('cssRule("#computed-explicit-border-spacing-with-negative-vertical").style.borderSpacing', "");
 130 }
 131
 132 function testMissingBorderSpacing()
 133 {
 134     // Notice, a property with a missing value is considered a malformed declaration by
 135     // <http://www.w3.org/TR/CSS21/syndata.html#parsing-errors>. Hence, we ignore the declaration.
 136     shouldBeEqualToString('document.getElementById("missing-border-spacing").style.borderSpacing', "");
 137 }
 138
 139 function testMissingStylesheetBorderSpacing()
 140 {
 141     // Expected results follow from the explanation given in testMissingBorderSpacing().
 142     shouldBeEqualToString('cssRule("#missing-stylesheet-border-spacing").style.borderSpacing', "");
 143 }
 144
 145 function styleAttribute(element)
 146 {
 147     var result = element.getAttribute("style");
 148     if (typeof(result) === "object") {
 149         // Assume this script is being executed in Internet Explorer.
 150         result = result.cssText;
 151     }
 152     return result;
 153 }
 154
 155 function computedStyle(element)
 156 {
 157     if (window.getComputedStyle)
 158         return window.getComputedStyle(element, null);
 159     return element.currentStyle; // Assume this script is being executed in Internet Explorer 8 or less.
 160 }
 161
 162 function cssRule(ruleName)
 163 {
 164     if (!ruleName)
 165         return;
 166
 167     if (!document.styleSheets)
 168         return;
 169
 170     var NotFound = -1; // We can't make this "const" since IE (as of 8.0) doesn't support it.
 171
 172     // We normalize the name of the rule to be lowercase since it is case-insensitive by <http://www.w3.org/TR/CSS21/syndata.html#characters>.
 173     var ruleName = ruleName.toLowerCase();
 174     var lastRuleThatMatchedCriterion;
 175     for (var i = 0; i < document.styleSheets.length; ++i) {
 176         var rules = [];
 177         try {
 178             var rules = document.styleSheets[i].rules || document.styleSheets[i].cssRules; // IE has "rules" property; WebKit and Firefox have "cssRules".
 179         } catch (e) {
 180             // Firefox's same-origin policy for file URLs prevents access to cssRules for stylesheets that aren't within the
 181             // same directory as the web page (e.g. ../js/resources/js-test-style.css). So, we ignore such exceptions that arise.
 182             continue;
 183         }
 184         for (var r = 0; r < rules.length; ++r) {
 185             if (rules[r].selectorText.toLowerCase() !== ruleName)
 186                 continue;
 187             lastRuleThatMatchedCriterion = rules[r];
 188         }
 189     }
 190     return lastRuleThatMatchedCriterion;
 191 }
 192
 193 function parseCSSTextForPropertyValue(cssText, propertyName)
 194 {
 195     if (!cssText)
 196         return String();
 197
 198     if (!propertyName)
 199         return String();
 200
 201     // Some constants. We can't use "const" since IE (as of 8.0) doesn't support it.
 202     var Colon = ':';
 203     var Semicolon = ';';
 204     var NotFound = -1;
 205
 206     // Note, CSS property names are case-insensitive, but its corresponding value can be case-
 207     // sensitive (e.g. font-family) by section 4.1.3 of the CSS 2.1 spec <http://www.w3.org/TR/CSS21/syndata.html#characters>.
 208     var cssTextLowerCase = cssText.toLowerCase();
 209     var propertyName = propertyName.toLowerCase();
 210
 211     var startOfPropertyName = cssTextLowerCase.indexOf(propertyName);
 212     if (startOfPropertyName === NotFound)
 213         return;
 214     var delimiter = cssTextLowerCase.indexOf(Colon, startOfPropertyName);
 215     if (delimiter === NotFound)
 216         return;
 217     if (cssTextLowerCase.substr(startOfPropertyName, delimiter - startOfPropertyName).trim() !== propertyName)
 218         return;
 219     var startOfPropertyValue = delimiter + 1;
 220     var endOfRule = cssTextLowerCase.indexOf(Semicolon, startOfPropertyValue);
 221     return cssText.substr(startOfPropertyValue, endOfRule === NotFound ? cssText.length : endOfRule - startOfPropertyValue).trim(); // Preserve case-sensitivity of the property value.
 222 }
 223 </script>
 224 </head>
 225 <body>
 226     <p id="description"></p>
 227     <div id="test-container">
 228         <table id="infer-vertical-border-spacing" style="border-spacing: 4px">
 229             <tr><td>Infer vertical border spacing</td></tr>
 230         </table>
 231         <table id="explicit-border-spacing" style="border-spacing: 4px 5px">
 232             <tr><td>Explicit horizontal and vertical border spacing</td></tr>
 233         </table>
 234         <table id="computed-infer-vertical-border-spacing">
 235             <tr><td>Infer vertical border spacing (uses computed style)</td></tr>
 236         </table>
 237         <table id="computed-explicit-border-spacing">
 238             <tr><td>Explicit horizontal and vertical border spacing (uses computed style)</td></tr>
 239         </table>
 240
 241         <table id="infer-vertical-border-spacing-from-negative-horizontal-spacing" style="border-spacing: -5px">
 242             <tr><td>Infer vertical border spacing from negative horizontal spacing</td></tr>
 243         </table>
 244         <table id="explicit-negative-border-spacing" style="border-spacing: -5px -13px">
 245             <tr><td>Explicit negative horizontal and vertical border spacing</td></tr>
 246         </table>
 247         <table id="explicit-border-spacing-with-negative-horizontal" style="border-spacing: -5px 13px">
 248             <tr><td>Explicit vertical and horizontal border spacing with negative horizontal border spacing</td></tr>
 249         </table>
 250         <table id="explicit-border-spacing-with-negative-vertical" style="border-spacing: 5px -13px">
 251             <tr><td>Explicit vertical and horizontal border spacing with negative vertical border spacing</td></tr>
 252         </table>
 253         <table id="computed-infer-vertical-border-spacing-from-negative-horizontal-border-spacing">
 254             <tr><td>Infer vertical border spacing from negative horizontal border spacing (uses computed style)</td></tr>
 255         </table>
 256         <table id="computed-explicit-negative-border-spacing">
 257             <tr><td>Explicit negative horizontal and vertical border spacing (uses computed style)</td></tr>
 258         </table>
 259         <table id="computed-explicit-border-spacing-with-negative-horizontal">
 260             <tr><td>Explicit horizontal and vertical border spacing with negative horizontal border spacing (uses computed style)</td></tr>
 261         </table>
 262         <table id="computed-explicit-border-spacing-with-negative-vertical">
 263             <tr><td>Explicit horizontal and vertical border spacing with negative vertical border spacing (uses computed style)</td></tr>
 264         </table>
 265
 266         <table id="missing-border-spacing" style="border-spacing: ">
 267             <tr><td>Missing border spacing</td></tr>
 268         </table>
 269         <table id="missing-stylesheet-border-spacing">
 270             <tr><td>Missing border-spacing value in stylesheet</td></tr>
 271         </table>
 272     </div>
 273     <div id="console"></div>
 274     <script>
 275         description("This test checks that style.borderSpacing returns the correct result for valid, negative, and missing border-spacing values.");
 276     </script>
 277 </body>
 278 </html>