| <!doctype html> |
| <head> |
| <title>CSS OM: CSS Values</title> |
| <link rel="author" title="Divya Manian" href="mailto:manian@adobe.com"> |
| <link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-declaration-block"> |
| <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="test"></div> |
| <script> |
| function test_shorthand_serialization(value, expected) { |
| test(function() { |
| const div = document.getElementById("test"); |
| div.style.cssText = value; |
| assert_equals(div.style.cssText, expected); |
| }, "The serialization of " + value + " should be canonical."); |
| } |
| |
| var tests = { |
| // specified -> expected |
| '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;', |
| '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-x: scroll; overflow-y: hidden;': 'overflow: scroll hidden;', |
| 'overflow-x: scroll; overflow-y: scroll;': 'overflow: scroll;', |
| 'outline-width: 2px; outline-style: dotted; outline-color: blue;': 'outline: blue dotted 2px;', |
| 'margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;': 'margin: 1px 2px 3px 4px;', |
| '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: 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-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;': 'padding: 1px 2px 3px 4px;' |
| } |
| |
| for (let test in tests) { |
| test_shorthand_serialization(test, tests[test]); |
| } |
| </script> |
| </body> |
| </html> |
