test_variable_serialization_specified.html

Enable keyboard shortcuts

<!DOCTYPE html>

<title>Test serialization of specified CSS variable values</title>

<script src="/tests/SimpleTest/SimpleTest.js"></script>

<link rel="stylesheet" href="/tests/SimpleTest/test.css" type="text/css">

<style id=style1>#test { }</style>

<style id=style2></style>

<script>

// Values that should be serialized back to the same string.

var values_with_unchanged_specified_value_serialization = [

  "var(--a)",

  "var(--a)",

  "var(--a) ",

  "var( --a ) ",

  "var(--a, )",

  "var(--a,/**/a)",

  "1px var(--a)",

  "var(--a) 1px",

  "something 3px url(whereever) calc(var(--a) + 1px)",

  "var(--a)",

  "var(--a)var(--b)",

  "var(--a, var(--b, var(--c, black)))",

  "var(--a) <!--",

  "--> var(--a)",

  "{ [ var(--a) ] }",

  "[;] var(--a)",

  "var(--a,(;))",

  "VAR(--a)",

  "var(--0)",

  "var(--\\30)",

  "var(--\\d800)",

  "var(--\\ffffff)",

];

// Values that serialize differently, due to additional implied closing

// characters at EOF.

var values_with_changed_specified_value_serialization = [

  ["var(--a",                       "var(--a)"],

  ["var(--a , ",                    "var(--a , )"],

  ["var(--a, ",                     "var(--a, )"],

  ["var(--a, var(--b",              "var(--a, var(--b))"],

  ["var(--a /* unclosed comment",   "var(--a /* unclosed comment*/)"],

  ["var(--a /* unclosed comment *", "var(--a /* unclosed comment */)"],

  ["[{(((var(--a",                  "[{(((var(--a))))}]"],

  ["var(--a, \"unclosed string",    "var(--a, \"unclosed string\")"],

  ["var(--a, 'unclosed string",     "var(--a, 'unclosed string')"],

  ["var(--a) \"unclosed string\\",  "var(--a) \"unclosed string\""],

  ["var(--a) 'unclosed string\\",   "var(--a) 'unclosed string'"],

  ["var(--a) \\",                   "var(--a) \\\ufffd"],

  ["var(--a) url(unclosedurl",      "var(--a) url(unclosedurl)"],

  ["var(--a) url('unclosedurl",     "var(--a) url('unclosedurl')"],

  ["var(--a) url(\"unclosedurl",    "var(--a) url(\"unclosedurl\")"],

  ["var(--a) url(unclosedurl\\",    "var(--a) url(unclosedurl\\\ufffd)"],

  ["var(--a) url('unclosedurl\\",   "var(--a) url('unclosedurl')"],

  ["var(--a) url(\"unclosedurl\\",  "var(--a) url(\"unclosedurl\")"],

];

var style1 = document.getElementById("style1");

var style2 = document.getElementById("style2");

var decl = style1.sheet.cssRules[0].style;

function test_specified_value_serialization(value, expected) {

  // Test setting value on a custom property with setProperty.

  decl.setProperty("--test", value, "");

  is(decl.getPropertyValue("--test"), expected,

     "value with identical serialization set on custom property with setProperty");

  // Test setting value on a custom property via style sheet parsing.

  style2.textContent = "#test { --test:" + value;

  is(style2.sheet.cssRules[0].style.getPropertyValue("--test"), expected,

     "value with identical serialization set on custom property via parsing");

  // Test setting value on a non-custom longhand property with setProperty.

  decl.setProperty("color", value, "");

  is(decl.getPropertyValue("color"), expected,

     "value with identical serialization set on non-custom longhand property with setProperty");

  // Test setting value on a non-custom longhand property via style sheet parsing.

  style2.textContent = "#test { color:" + value;

  is(style2.sheet.cssRules[0].style.getPropertyValue("color"), expected,

     "value with identical serialization set on non-custom longhand property via parsing");

  // Test setting value on a non-custom shorthand property with setProperty.

  decl.setProperty("margin", value, "");

  is(decl.getPropertyValue("margin"), expected,

     "value with identical serialization set on non-custom shorthand property with setProperty");

  // Test setting value on a non-custom shorthand property via style sheet parsing.

  style2.textContent = "#test { margin:" + value;

  is(style2.sheet.cssRules[0].style.getPropertyValue("margin"), expected,

     "value with identical serialization set on non-custom shorthand property via parsing");

  // Clean up.

  decl.removeProperty("--test");

  decl.removeProperty("color");

  decl.removeProperty("margin");

function runTest() {

  values_with_unchanged_specified_value_serialization.forEach(function(value) {

    test_specified_value_serialization(value, value);

});

  values_with_changed_specified_value_serialization.forEach(function(pair) {

    test_specified_value_serialization(pair[0], pair[1]);

});

  SimpleTest.finish();

SimpleTest.waitForExplicitFinish();

runTest();

</script>