background-shorthand-serialization.html (2387B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Background Shorthand Specified Value Serialization Test: background shorthand should only serialize non-initial values</title> 6 <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background"> 7 <meta name="assert" content="background shorthand should only serialize non-initial values"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 </head> 11 <body> 12 <script> 13 const element = document.createElement('div'); 14 15 test((t) => { 16 element.style = 'background: yellow;'; 17 assert_equals(element.style.background , 'yellow'); 18 }, "single value"); 19 20 test((t) => { 21 element.style = 'background: no-repeat url(/favicon.ico);'; 22 assert_equals(element.style.background , 'url("/favicon.ico") no-repeat'); 23 }, "multiple values"); 24 25 test((t) => { 26 element.style = 'background: url(/favicon.ico) no-repeat, url(/favicon.ico) no-repeat;'; 27 assert_equals(element.style.background , 'url("/favicon.ico") no-repeat, url("/favicon.ico") no-repeat'); 28 }, "multiple backgrounds"); 29 30 test((t) => { 31 element.style = 'background: url("/favicon.ico") 0% 0% / 10rem;'; 32 // background-size should always serialize to two values per https://github.com/w3c/csswg-drafts/issues/7802 33 assert_equals(element.style.background , 'url("/favicon.ico") 0% 0% / 10rem auto'); 34 }, "background-size with non-initial background-position"); 35 36 test((t) => { 37 element.style = `background: url(/favicon.ico) top left no-repeat, 38 url(/favicon.ico) center / 100% 100% no-repeat, 39 url(/favicon.ico) white;`; 40 assert_equals(element.style.background , 'url("/favicon.ico") left top no-repeat, url("/favicon.ico") center center / 100% 100% no-repeat, url("/favicon.ico") white'); 41 }, "multiple backgrounds with varying values"); 42 43 test((t) => { 44 element.style = `background: padding-box border-box;`; 45 assert_equals(element.style.background , 'none'); 46 }, "all initial values"); 47 48 49 test((t) => { 50 element.style = `background: border-area border-box;`; 51 assert_equals(element.style.background , 'border-area'); 52 }, "border-area border-box"); 53 54 55 test((t) => { 56 element.style = `background: border-area padding-box;`; 57 assert_equals(element.style.background , 'padding-box border-area'); 58 }, "border-area padding-box"); 59 </script>