variable-reference-shorthands.html (2828B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Parse, store, and serialize CSS variable references - shorthand properties</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="margin: var(--prop); margin-top: 10px"></div> 17 <div id="target2" style="margin: var(--prop) !important; margin-top: 10px"></div> 18 <div id="target3" style="margin: var(--prop); margin-top: 10px !important"></div> 19 <div id="target4" style="background: var(--prop);"></div> 20 21 <script type="text/javascript"> 22 "use strict"; 23 24 var testcases = [ 25 { element: "target1", propertyName: "margin", expectedPropertyValue: "" }, 26 { element: "target1", propertyName: "margin-left", expectedPropertyValue: "" }, 27 { element: "target1", propertyName: "margin-top", expectedPropertyValue: "10px" }, 28 { element: "target1", propertyName: "margin-right", expectedPropertyValue: "" }, 29 { element: "target1", propertyName: "margin-bottom", expectedPropertyValue: "" }, 30 31 { element: "target2", propertyName: "margin", expectedPropertyValue: "var(--prop)" }, 32 { element: "target2", propertyName: "margin-left", expectedPropertyValue: "" }, 33 { element: "target2", propertyName: "margin-top", expectedPropertyValue: "" }, 34 { element: "target2", propertyName: "margin-right", expectedPropertyValue: "" }, 35 { element: "target2", propertyName: "margin-bottom", expectedPropertyValue: "" }, 36 37 { element: "target3", propertyName: "margin", expectedPropertyValue: "" }, 38 { element: "target3", propertyName: "margin-left", expectedPropertyValue: "" }, 39 { element: "target3", propertyName: "margin-top", expectedPropertyValue: "10px" }, 40 { element: "target3", propertyName: "margin-right", expectedPropertyValue: "" }, 41 { element: "target3", propertyName: "margin-bottom", expectedPropertyValue: "" }, 42 43 { element: "target4", propertyName: "background", expectedPropertyValue: "var(--prop)" } 44 ]; 45 46 testcases.forEach(function (testcase) { 47 test( function () { 48 var div = document.getElementById(testcase.element); 49 var actualPropertyValue = div.style.getPropertyValue(testcase.propertyName).trim(); 50 assert_equals(actualPropertyValue, testcase.expectedPropertyValue); 51 }, testcase.element + " " + testcase.propertyName); 52 }); 53 </script> 54 55 </body> 56 </html>