shorthand-values.html (3279B)
1 <!doctype html> 2 <head> 3 <title>CSS OM: CSS Values</title> 4 <link rel="author" title="Divya Manian" href="mailto:manian@adobe.com"> 5 <link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-declaration-block"> 6 <meta name="flags" content="dom"> 7 <meta name="assert" content="Testing Serialization of Shorthand Values"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 </head> 11 <body> 12 <div id="test"></div> 13 <script> 14 function test_shorthand_serialization(value, expected) { 15 test(function() { 16 const div = document.getElementById("test"); 17 div.style.cssText = value; 18 assert_equals(div.style.cssText, expected); 19 }, "The serialization of " + value + " should be canonical."); 20 } 21 22 var tests = { 23 // specified -> expected 24 'border: 1px; border-top: 1px;': 'border: 1px;', 25 'border: 1px solid red;': 'border: 1px solid red;', 26 'border: 1px red;': 'border: 1px red;', 27 'border: red;': 'border: red;', 28 'border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px; border-image: none;': 'border: 1px;', 29 'border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px;': 'border-width: 1px; border-style: none; border-color: currentcolor;', 30 'border-top: 1px; border-right: 2px; border-bottom: 3px; border-left: 4px;': 'border-width: 1px 2px 3px 4px; border-style: none; border-color: currentcolor;', 31 'border: 1px; border-top: 2px;': 'border-width: 2px 1px 1px; border-style: none; border-color: currentcolor; border-image: none;', 32 'border: 1px; border-top: 1px !important;': 'border-right: 1px; border-bottom: 1px; border-left: 1px; border-image: none; border-top: 1px !important;', 33 'border: 1px; border-top-color: red;': 'border-width: 1px; border-style: none; border-color: red currentcolor currentcolor; border-image: none;', 34 'border: solid; border-style: dotted': 'border: dotted;', 35 'border-width: 1px;': 'border-width: 1px;', 36 'overflow-x: scroll; overflow-y: hidden;': 'overflow: scroll hidden;', 37 'overflow-x: scroll; overflow-y: scroll;': 'overflow: scroll;', 38 'outline-width: 2px; outline-style: dotted; outline-color: blue;': 'outline: blue dotted 2px;', 39 'margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;': 'margin: 1px 2px 3px 4px;', 40 'list-style-type: circle; list-style-position: inside; list-style-image: none;': 'list-style: inside circle;', 41 'list-style-type: lower-alpha;': 'list-style-type: lower-alpha;', 42 '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;', 43 'padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px;': 'padding: 1px 2px 3px 4px;' 44 } 45 46 if (CSS.supports("-webkit-line-clamp: none") && CSS.supports("line-clamp: none")) { 47 tests["-webkit-line-clamp: none;"] = "line-clamp: none;"; 48 } 49 50 for (let test in tests) { 51 test_shorthand_serialization(test, tests[test]); 52 } 53 </script> 54 </body> 55 </html>