variable-cssText.html (2626B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Parse, store, and serialize CSS variable (thorugh css Text)</title> 5 6 <meta rel="author" title="Kevin Babbitt"> 7 <meta rel="author" title="Greg Whitworth"> 8 <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> 9 <link rel="help" href="http://www.w3.org/TR/css-variables-1/#serializing-custom-props"> 10 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 </head> 14 <body> 15 16 <div id="target1" style="--var: var1;"></div> 17 <div id="target2" style="margin: var(--prop);"></div> 18 <div id="target3" style="background: var(--prop);"></div> 19 <div id="target4" style="margin: var(--prop) !important;"></div> 20 <div id="target5" style="background: var(--prop) !important;"></div> 21 <div id="target6" style="background: var(--prop); background: green;"></div> 22 <div id="target7" style="background: green; background: var(--prop);"></div> 23 <div id="target8" style="color: green; color: var(--prop);"></div> 24 <div id="target9" style="margin: var(--prop); margin-top: 10px"></div> 25 <div id="target10"style="expando: var(--prop);"></div> 26 <div id="target11"style="color: /* comment that must not be preserved */ var(--prop) /* kept comment */ var(--prop); /* another stripped comment */ /* indeed */ "></div> 27 28 <script type="text/javascript"> 29 "use strict"; 30 31 var testcases = [ 32 { element: "target1", expectedCssText: "--var: var1;" }, 33 { element: "target2", expectedCssText: "margin: var(--prop);" }, 34 { element: "target3", expectedCssText: "background: var(--prop);" }, 35 { element: "target4", expectedCssText: "margin: var(--prop) !important;" }, 36 { element: "target5", expectedCssText: "background: var(--prop) !important;" }, 37 { element: "target6", expectedCssText: "background: green;" }, 38 { element: "target7", expectedCssText: "background: var(--prop);" }, 39 { element: "target8", expectedCssText: "color: var(--prop);" }, 40 { element: "target9", expectedCssText: "margin-right: ; margin-bottom: ; margin-left: ; margin-top: 10px;" }, 41 { element: "target10", expectedCssText: "" }, 42 { element: "target11", expectedCssText: "color: var(--prop) /* kept comment */ var(--prop);" } 43 ]; 44 45 testcases.forEach(function (testcase) { 46 test( function () { 47 var div = document.getElementById(testcase.element); 48 var actualCssText = div.style.cssText; 49 assert_equals(actualCssText, testcase.expectedCssText); 50 }, testcase.element); 51 }); 52 </script> 53 54 </body> 55 </html>