calc-unit-analysis.html (3230B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS Variables Allowed Syntax</title> 5 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 6 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> 7 <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths" /> 8 <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-type-checking" /> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <style id="style"></style> 12 </head> 13 <body> 14 <div id=log></div> 15 <div id="test"></div> 16 <script> 17 18 function run() { 19 var test_elt = document.getElementById("test"); 20 var test_cs = window.getComputedStyle(test_elt, ""); 21 22 function description_to_name(description) { 23 return description.replace(/\W+/g, "_").replace(/^_/, "").replace(/_$/, ""); 24 } 25 26 function assert_invalid_value(property, value, description) { 27 test(function() { 28 test_elt.style.setProperty(property, "inherit"); 29 test_elt.style.setProperty(property, value); 30 assert_equals(test_elt.style.getPropertyValue(property), 31 "inherit"); 32 test_elt.style.setProperty(property, value); 33 test_elt.style.removeProperty(property); 34 }, 35 description_to_name(description)); 36 } 37 38 function assert_valid_value(property, value, computes_to, description) { 39 test(function() { 40 test_elt.style.setProperty(property, "inherit"); 41 test_elt.style.setProperty(property, value); 42 assert_not_equals(test_elt.style.getPropertyValue(property), 43 "inherit"); 44 assert_equals(test_cs.getPropertyValue(property), 45 computes_to); 46 test_elt.style.removeProperty(property); 47 }, 48 description_to_name(description)); 49 } 50 51 assert_invalid_value("margin-left", "calc(0)", // invalid calc expression 52 "unitless zero in calc() is a numeric type, not length"); 53 assert_valid_value("margin-left", "calc(0px)", "0px", 54 "0px in calc()"); 55 assert_invalid_value("margin-left", "calc(1px + 2)", // invalid calc expression 56 "addition of length and number"); 57 assert_invalid_value("margin-left", "calc(2 + 1px)", // invalid calc expression 58 "addition of number and length"); 59 assert_invalid_value("margin-left", "calc(1px - 2)", // invalid calc expression 60 "subtraction of length and number"); 61 assert_invalid_value("margin-left", "calc(2 - 1px)", // invalid calc expression 62 "subtraction of number and length"); 63 assert_valid_value("margin-left", "calc(2px * 2)", "4px", 64 "multiplication of length and number"); 65 assert_valid_value("margin-left", "calc(2 * 2px)", "4px", 66 "multiplication of number and length"); 67 assert_invalid_value("margin-left", "calc(2px * 1px)", // invalid calc expression 68 "multiplication of length and length"); 69 assert_invalid_value("margin-left", "calc(20 / 0.75rem)", // invalid calc expression 70 "division by non-number"); 71 } 72 73 run(); 74 75 </script> 76 </body> 77 </html>