LayoutTests/fast/css/cssText-shorthand.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 <script src="../js/resources/js-test-pre.js"></script>
   5 <script>
   6
   7 description("This test ensures WebKit uses shorthand notations for cssText");
   8
   9 var tests = [
  10     // FIXME: This exhibits a bug. We shouldn't be outputing border-image here.
  11     ['border: 1px; border-top: 1px;', 'border: 1px initial initial;'],
  12     ['border: 1px solid red;', 'border: 1px solid red;'],
  13     ['border: 1px red;', 'border: 1px initial red;'],
  14     ['border: red;', 'border: initial initial red;'],
  15     ['border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px;', 'border: 1px initial initial;'],
  16     ['border-top: 1px; border-right: 2px; border-bottom: 3px; border-left: 4px;',
  17     'border-top-width: 1px; border-right-width: 2px; border-bottom-width: 3px; border-left-width: 4px;'],
  18     ['border: 1px; border-top: 2px;',
  19     'border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-width: 2px;'],
  20     ['border: 1px; border-top: 1px !important;',
  21     'border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-width: 1px !important;'],
  22     ['border: 1px; border-top-color: red;',
  23     'border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-width: 1px; border-top-color: red;'],
  24     ['border: solid; border-style: dotted', 'border: initial dotted initial;'],
  25
  26     ['-webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 2px;', 'border-spacing: 1px 2px;'],
  27
  28     // We don't use shorthand for font-family, etc... for compatibility reasons
  29     ['font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;',
  30         'font-family: sans-serif; line-height: 2em; font-size: 3em; font-style: italic; font-weight: bold;'],
  31
  32     ['list-style-type: circle; list-style-position: inside;', 'list-style: circle inside;'],
  33     ['margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;', 'margin: 1px 2px 3px 4px;'],
  34     ['outline-width: 2px; outline-style: dotted; outline-color: blue;', 'outline: 2px dotted blue;'],
  35     ['overflow-x: scroll; overflow-y: hidden;', 'overflow: scroll hidden;'],
  36     ['padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;', 'padding: 1px 2px 3px 4px;'],
  37 ];
  38
  39 function normalizeCssText(text) { return text.trim().split(/;\s*/).sort().slice(1).join("; "); }
  40
  41 var element;
  42 tests.forEach(function (test) {
  43     var styleAttribute = test[0];
  44     var expectedCssText = test[1];
  45
  46     element = document.createElement('div');
  47     element.setAttribute('style', styleAttribute);
  48
  49     shouldBe('normalizeCssText(element.style.cssText)', '"' + normalizeCssText(expectedCssText) + '"');
  50 });
  51
  52 </script>
  53 <script src="../js/resources/js-test-post.js"></script>
  54 </body>
  55 </html>