When serializing background shorthand skip initial values and order v…

…alues according to grammar. Differential Revision: https://phabricator.services.mozilla.com/D155077 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1134171 gecko-commit: d2ca38513bdf9eec38454c126fa7a3427aabc461 gecko-reviewers: emilio
web-platform-tests · Aug 22, 2022 · ba9d74c · ba9d74c
1 parent dc18b48
commit ba9d74c
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/css/css-backgrounds/parsing/background-shorthand-serialization.html b/css/css-backgrounds/parsing/background-shorthand-serialization.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Background Shorthand Serialization Test: background shorthand should only serialize non-initial values</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background">
+<meta name="assert" content="background shorthand should only serialize non-initial values">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<script>
+  const element = document.createElement('div');
+
+  test((t) => {
+    element.style = 'background: yellow;';
+    assert_equals(element.style.background , 'yellow');
+  }, "single value");
+
+  test((t) => {
+    element.style = 'background: no-repeat url(/favicon.ico);';
+    assert_equals(element.style.background , 'url("/favicon.ico") no-repeat');
+  }, "multiple values");
+
+  test((t) => {
+    element.style = 'background: url(/favicon.ico) no-repeat, url(/favicon.ico) no-repeat;';
+    assert_equals(element.style.background , 'url("/favicon.ico") no-repeat, url("/favicon.ico") no-repeat');
+  }, "multiple backgrounds");
+
+  test((t) => {
+    element.style = 'background: url("/favicon.ico") 0% 0% / 10rem;';
+    assert_equals(element.style.background , 'url("/favicon.ico") 0% 0% / 10rem');
+  }, "background-size with non-initial background-position");
+
+  test((t) => {
+    element.style = `background: url(/favicon.ico) top left no-repeat,
+        url(/favicon.ico) center / 100% 100% no-repeat,
+        url(/favicon.ico) white;`;
+    assert_equals(element.style.background , 'url("/favicon.ico") left top no-repeat, url("/favicon.ico") center center / 100% 100% no-repeat, white url("/favicon.ico")');
+  }, "multiple backgrounds with varying values");
+
+  test((t) => {
+    element.style = `background: padding-box border-box;`;
+    assert_equals(element.style.background , 'none');
+  }, "all initial values");
+</script>