serialize-variable-reference.html (1643B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSSOM - Serialization with variable preserves original serialization.</title> 4 <link rel="help" href="https://drafts.csswg.org/css-variables/#serializing-custom-props"> 5 <link rel="help" href="https://drafts.csswg.org/css-variables/#variables-in-shorthands"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id="longhand-whitespace" style="font-size: var(--a);"></div> 9 <div id="shorthand-whitespace" style="font: var(--a);"></div> 10 <div id="longhand" style="font-size:var(--a);"></div> 11 <div id="shorthand" style="font:var(--a);"></div> 12 <script> 13 test(function() { 14 var elem = document.getElementById('longhand-whitespace'); 15 16 assert_equals(elem.style.cssText, 'font-size: var(--a);'); 17 }, 'Longhand with variable preserves original serialization: with whitespace') 18 19 test(function() { 20 var elem = document.getElementById('shorthand-whitespace'); 21 22 assert_equals(elem.style.cssText, 'font: var(--a);'); 23 }, 'Shorthand with variable preserves original serialization: with whitespace') 24 25 test(function() { 26 var elem = document.getElementById('longhand'); 27 28 assert_equals(elem.style.cssText, 'font-size: var(--a);'); 29 }, 'Longhand with variable preserves original serialization but trims whitespace: without whitespace') 30 31 test(function() { 32 var elem = document.getElementById('shorthand'); 33 34 assert_equals(elem.style.cssText, 'font: var(--a);'); 35 }, 'Shorthand with variable preserves original serialization but trims whitespace: without whitespace') 36 </script>