css/cssom/index-002.html

<!doctype html>
<head>
  <title>CSS OM: CSS Values</title>
  <link rel="author" title="Divya Manian" href="mailto:manian@adobe.com">
  <link rel="help" href="http://www.w3.org/TR/cssom-1/#css-values">
  <meta name="flags" content="dom">
  <meta name="assert" content="Testing Serialization of Shorthand Values">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
</head>
<body>
    <div id="cssomtestElm"></div>
    <div id="log"></div>
    <script>
    var tests = {
      'border': [
      ['border: 1px; border-top: 1px;', 'border: 1px;'],
      ['border: 1px solid red;', 'border: 1px solid red;'],
      ['border: 1px red;', 'border: 1px red;'],
      ['border: red;', 'border: red;'],
      ['border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px;', 'border: 1px;', ' (#2)'],
      ['border-top: 1px; border-right: 2px; border-bottom: 3px; border-left: 4px;', 'border-width: 1px 2px 3px 4px;'],
      ['border: 1px; border-top: 2px;', 'border-width: 2px 1px 1px;'],
      ['border: 1px; border-top: 1px !important;',
      'border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-width: 1px !important;'],

      ['border: 1px; border-top-color: red;', 'border-width: 1px; border-top-color: red;'],
      ['border: solid; border-style: dotted', 'border: dotted;'],
      ['border-width: 1px;', 'border-width: 1px;']
      ],

      'overflow': [
        ['overflow-x: scroll; overflow-y: hidden;', 'overflow: scroll hidden;'],
        ['overflow-x: scroll; overflow-y: scroll;', 'overflow: scroll;']
      ],
      'outline': [
        ['outline-width: 2px; outline-style: dotted; outline-color: blue;', 'outline: blue dotted 2px;']
      ],
      'margin': [
        ['margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;', 'margin: 1px 2px 3px 4px;']
      ],
      'list': [
        ['list-style-type: circle; list-style-position: inside; list-style-image: initial;', 'list-style: circle inside;'],
        ['list-style-type: lower-alpha;', 'list-style-type: lower-alpha;']
      ],
      'font-family': [
      ['font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;',
          'font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;']
      ],
      'padding': [
        ['padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;', 'padding: 1px 2px 3px 4px;'],
      ]
    }

    var results = {};

    var testElm = document.getElementById('cssomtestElm');
    for (var test in tests) {
      if(tests.hasOwnProperty(test)) {
        results[test] = [];
        var propertyTests = tests[test];

        for (i = 0; i < propertyTests.length; i++) {
          document.getElementById('cssomtestElm').setAttribute('style', propertyTests[i][0]);
          var titleSuffix = propertyTests[i][2] || "";
          results[test].push([
            test + ' is expected to be ' + propertyTests[i][1] + titleSuffix,
            document.getElementById('cssomtestElm').style.cssText,
            propertyTests[i][1]
          ]);
        }

        generate_tests(assert_equals, results[test]);
      }
    }

    </script>
 </body>
 </html>