third_party/WebKit/LayoutTests/fast/dom/css-element-attribute-js-null.html

   1 <html>
   2 <head>
   3     <style type="text/css">
   4         .pass { color: green; }
   5         .fail { color: red; }
   6     </style>
   7     <style type="text/css">
   8         .foo { color: black; }
   9         @media screen {
  10             .bar { color: blue; }
  11         }
  12         @keyframes name { }
  13         @page { }
  14     </style>
  15     <script>
  16         function printOut(msg) {
  17             var console = document.getElementById("console");
  18             var span = document.createElement('span');
  19             span.innerHTML = msg + '<br>';
  20             console.appendChild(span);
  21         }
  22
  23         function resultStringifier(result)
  24         {
  25             if (result === "")
  26                 return "<b>the empty string</b>";
  27             else if (result === undefined)
  28                 return "<b>undefined</b>";
  29             else if (result === null)
  30                 return "<b>null</b>";
  31             return "the string '" + result + "'";
  32         }
  33
  34         function nullTestElementAttribute(elementType, element, attr, expected)
  35         {
  36             element[attr] = null;
  37
  38             var result;
  39             if (element[attr] === expected)
  40                 result = "<span class='pass'>TEST SUCCEEDED:</span> The value was " + resultStringifier(expected) + ".";
  41             else
  42                 result = "<span class='fail'>TEST FAILED:</span> The value should have been " + resultStringifier(expected) + " but was " + resultStringifier(element[attr]) + ".";
  43
  44             result += " [tested " + elementType + "." + attr + "]";
  45             printOut(result);
  46         }
  47
  48         function runTests() {
  49             if (window.testRunner)
  50                 testRunner.dumpAsText();
  51
  52             var rules = document.styleSheets[1].cssRules;
  53
  54             var rule = rules[0];
  55             var mediaRule = rules[1];
  56             var keyframesRule = rules[2];
  57             var pageRule = rules[3];
  58             var style = rule.style;
  59             var mediaList = mediaRule.media;
  60
  61             var listing = [
  62                 {
  63                     type: 'CSSRule',
  64                     elementToUse: rule,
  65                     attributes: [
  66                          // 'null' is not a valid rule, so the setter does nothing.
  67                         {name: 'cssText', expectedNull: '.foo { color: black; }'}
  68                     ]
  69                 },
  70                 {
  71                     type: 'CSSKeyframesRule',
  72                     elementToUse: keyframesRule,
  73                     attributes: [
  74                         {name: 'name', expectedNull: 'null'}
  75                     ]
  76                 },
  77                 {
  78                     type: 'CSSPageRule',
  79                     elementToUse: pageRule,
  80                     attributes: [
  81                         {name: 'selectorText', expectedNull: '@page null'}
  82                     ]
  83                 },
  84                 {
  85                     type: 'CSSStyleRule',
  86                     elementToUse: rule,
  87                     attributes: [
  88                         {name: 'selectorText', expectedNull: 'null'}
  89                     ]
  90                 },
  91                 {
  92                     type: 'CSSStyleDeclaration',
  93                     elementToUse: style,
  94                     attributes: [
  95                         // cssText detects syntax errors, such as JS null, and sets the value to the empty string.
  96                         {name: 'cssText', expectedNull: ''}
  97                     ]
  98                 },
  99                 {
 100                     type: 'MediaList',
 101                     elementToUse: mediaList,
 102                     attributes: [
 103                         {name: 'mediaText', expectedNull: ''}
 104                     ]
 105                 }
 106             ];
 107
 108             for (element in listing) {
 109                 var type = listing[element].type;
 110                 var elementToUse = listing[element].elementToUse;
 111                 var attrs = listing[element].attributes;
 112                 for (attr in attrs) {
 113                     nullTestElementAttribute(type, elementToUse, attrs[attr].name, attrs[attr].expectedNull);
 114                 }
 115                 printOut('');
 116             }
 117         }
 118     </script>
 119 </head>
 120 <body onload="runTests()">
 121     <p>This test setting various attributes of a CSSOM elements to JavaScript null.</p>
 122     <div id="console"></div>
 123 </body>
 124 </html>