| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <title>CSS Variables Allowed Syntax</title> |
| <link rel="author" title="L. David Baron" href="https://dbaron.org/"> |
| <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> |
| <link rel="help" href="http://www.w3.org/TR/css3-values/#lengths" /> |
| <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-type-checking" /> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style id="style"></style> |
| </head> |
| <body> |
| <div id=log></div> |
| <div id="test"></div> |
| <script> |
| |
| function run() { |
| var test_elt = document.getElementById("test"); |
| var test_cs = window.getComputedStyle(test_elt, ""); |
| |
| function description_to_name(description) { |
| return description.replace(/\W+/g, "_").replace(/^_/, "").replace(/_$/, ""); |
| } |
| |
| function assert_invalid_value(property, value, description) { |
| test(function() { |
| test_elt.style.setProperty(property, "inherit"); |
| test_elt.style.setProperty(property, value); |
| assert_equals(test_elt.style.getPropertyValue(property), |
| "inherit"); |
| test_elt.style.setProperty(property, value); |
| test_elt.style.removeProperty(property); |
| }, |
| description_to_name(description)); |
| } |
| |
| function assert_valid_value(property, value, computes_to, description) { |
| test(function() { |
| test_elt.style.setProperty(property, "inherit"); |
| test_elt.style.setProperty(property, value); |
| assert_not_equals(test_elt.style.getPropertyValue(property), |
| "inherit"); |
| assert_equals(test_cs.getPropertyValue(property), |
| computes_to); |
| test_elt.style.removeProperty(property); |
| }, |
| description_to_name(description)); |
| } |
| |
| assert_invalid_value("margin-left", "calc(0)", // invalid calc expression |
| "unitless zero in calc() is a numeric type, not length"); |
| assert_valid_value("margin-left", "calc(0px)", "0px", |
| "0px in calc()"); |
| assert_invalid_value("margin-left", "calc(1px + 2)", // invalid calc expression |
| "addition of length and number"); |
| assert_invalid_value("margin-left", "calc(2 + 1px)", // invalid calc expression |
| "addition of number and length"); |
| assert_invalid_value("margin-left", "calc(1px - 2)", // invalid calc expression |
| "subtraction of length and number"); |
| assert_invalid_value("margin-left", "calc(2 - 1px)", // invalid calc expression |
| "subtraction of number and length"); |
| assert_valid_value("margin-left", "calc(2px * 2)", "4px", |
| "multiplication of length and number"); |
| assert_valid_value("margin-left", "calc(2 * 2px)", "4px", |
| "multiplication of number and length"); |
| assert_invalid_value("margin-left", "calc(2px * 1px)", // invalid calc expression |
| "multiplication of length and length"); |
| |
| } |
| |
| run(); |
| |
| </script> |
| </body> |
| </html> |
