shorthand-serialization.html (4291B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Shorthand serialization should be done correctly.</title> 6 <link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-declaration-block"> 7 <link rel="help" href="https://drafts.csswg.org/css-variables/#variables-in-shorthands"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 </head> 11 <body> 12 <div id="foo1" style="background: red;">foo</div> 13 <div id="foo2" style="background-color: blue; background: red !important; background-color: green;">foo</div> 14 <div id="foo3" style="background-color: blue; background: red; background-color: green !important;">foo</div> 15 16 <div id="foo4" style="margin-right: 10px; margin-left: 10px; margin-top: 10px; margin-bottom: 10px;">foo</div> 17 <div id="foo5" style="margin-right: 10px; margin-left: 10px; margin-top: 10px; margin-bottom: 10px!important;">foo</div> 18 <div id="foo6" style="margin-right: 10px !important; margin-left: 10px !important; margin-top: 10px !important; margin-bottom: 10px!important;">foo</div> 19 20 <div id="foo7" style="background:var(--a);">foo</div> 21 <div id="test"></div> 22 23 <script> 24 test(function() { 25 var elem1 = document.getElementById('foo1'); 26 var elem2 = document.getElementById('foo2'); 27 var elem3 = document.getElementById('foo3'); 28 29 assert_false(elem1.style.cssText.endsWith('!important;')); 30 assert_true(elem2.style.cssText.endsWith('!important;')); 31 assert_false(elem3.style.background.endsWith('!important')); 32 33 }, "Shorthand serialization with shorthand and longhands mixed."); 34 35 test(function() { 36 var elem4 = document.getElementById('foo4'); 37 var elem5 = document.getElementById('foo5'); 38 var elem6 = document.getElementById('foo6'); 39 40 assert_equals(elem4.style.cssText, 'margin: 10px;'); 41 assert_equals(elem4.style.margin, '10px'); 42 assert_equals(elem5.style.cssText, 'margin-right: 10px; margin-left: 10px; margin-top: 10px; margin-bottom: 10px !important;'); 43 assert_equals(elem5.style.margin, ''); 44 assert_equals(elem6.style.cssText, 'margin: 10px !important;'); 45 assert_equals(elem6.style.margin, '10px'); 46 }, "Shorthand serialization with just longhands."); 47 48 test(function() { 49 var elem7 = document.getElementById('foo7'); 50 51 assert_equals(elem7.style.background, 'var(--a)'); 52 assert_equals(elem7.style.backgroundPosition, ''); 53 }, "Shorthand serialization with variable and variable from other shorthand."); 54 55 test(function() { 56 var testElem = document.getElementById("test"); 57 testElem.style.margin = "20px 20px 20px 20px"; 58 assert_equals(testElem.style.margin, "20px"); 59 assert_equals(testElem.style.cssText, "margin: 20px;") 60 }, "Shorthand serialization after setting"); 61 62 test(function() { 63 const testElem = document.getElementById("test"); 64 testElem.style.cssText = "margin: initial;"; 65 assert_equals(testElem.style.margin, "initial"); 66 assert_equals(testElem.style.cssText, "margin: initial;"); 67 }, "Shorthand serialization with 'initial' value."); 68 69 test(function() { 70 const testElem = document.getElementById("test"); 71 testElem.style.setProperty("margin-top", "initial", "important"); 72 assert_equals(testElem.style.margin, ""); 73 }, "Shorthand serialization with 'initial' value, one longhand with important flag."); 74 75 test(function() { 76 const testElem = document.getElementById("test"); 77 testElem.style.cssText = ""; 78 testElem.style.setProperty("margin-top", "initial"); 79 testElem.style.setProperty("margin-right", "initial"); 80 testElem.style.setProperty("margin-bottom", "initial"); 81 testElem.style.setProperty("margin-left", "initial", "important"); 82 assert_equals(testElem.style.margin, ""); 83 }, "Shorthand serialization with 'initial' value, longhands set individually, one with important flag."); 84 </script> 85 </body> 86 </html>