1 files changed, 51 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/cssom/shorthand-values.html b/testing/web-platform/tests/css/cssom/shorthand-values.html
new file mode 100644
index 0000000000..b64f7e9a12
--- /dev/null
+++ b/testing/web-platform/tests/css/cssom/shorthand-values.html
@@ -0,0 +1,51 @@
+<!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-image: none;': 'border: 1px;',
+        'border-top: 1px; border-right: 1px; border-bottom: 1px; border-left: 1px;': 'border-width: 1px; border-style: none; border-color: currentcolor;',
+        'border-top: 1px; border-right: 2px; border-bottom: 3px; border-left: 4px;': 'border-width: 1px 2px 3px 4px; border-style: none; border-color: currentcolor;',
+        'border: 1px; border-top: 2px;': 'border-width: 2px 1px 1px; border-style: none; border-color: currentcolor; border-image: none;',
+        'border: 1px; border-top: 1px !important;': 'border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: none; border-top-width: 1px !important; border-top-style: none !important; border-top-color: currentcolor !important;',
+        'border: 1px; border-top-color: red;': 'border-width: 1px; border-style: none; border-color: red currentcolor currentcolor; border-image: none;',
+        '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: none;': 'list-style: inside circle;',
+        '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>