<!DOCTYPE html>
<html>
  <head>
    <title>'columns' property with 'auto' and something else</title>
    <script src="../../resources/js-test.js"></script>
    <script>
      description("Test the behavior when 'auto' is part of the 'columns' property value. See http://www.w3.org/TR/css3-multicol/#columns");
      if (window.testRunner)
        testRunner.dumpAsText();

      function runTests() {
          var tests = [["columns:auto 3;", "auto", "3", "auto 3"],
                       ["columns:auto 10em;", "10em", "auto", "10em auto"],
                       ["columns:3 auto;", "auto", "3", "auto 3"],
                       ["columns:10em auto;", "10em", "auto", "10em auto"],
                       ["columns:7 7em; columns:auto auto auto;", "7em", "7", "7em 7"],
                       ["columns:7 7em; columns:10em auto auto;", "7em", "7", "7em 7"],
                       ["columns:7 7em; columns:auto;", "auto", "auto", "auto"],
                       ["columns:7 7em; columns:auto auto;",  "auto", "auto", "auto auto"],
                       ["columns:auto; columns:initial;", "initial", "initial", "initial"],
                       ["columns:auto; columns:initial initial;", "auto", "auto", "auto"],
                       ["columns:auto; columns:inherit;", "inherit", "inherit", "inherit"],
                       ["columns:auto; columns:inherit inherit;", "auto", "auto", "auto"],
                       ["columns:7;", "auto", "7", "7"],
                       ["columns:7em;", "7em", "auto", "7em"]];

          tests.forEach(function(test) {
              element.style.cssText = test[0];
              shouldBeEqualToString("element.style.columnWidth", test[1]);
              shouldBeEqualToString("element.style.columnCount", test[2]);
              shouldBeEqualToString("element.style.columns", test[3]);
          });
      }
    </script>
  </head>
  <body>
      <div id="element"></div>
      <script>
          runTests();
      </script>
  </body>
</html>