test_variable_serialization_computed.html

Enable keyboard shortcuts

<!DOCTYPE html>

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

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

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

<div>

  <span></span>

</div>

<script>

// Each entry is an entire declaration followed by the property to check and

// its expected computed value.

var values = [

  ["", "--z", "an-inherited-value"],

  ["--a: ", "--a", ""],

  ["--a: initial", "--a", ""],

  ["--z: initial", "--z", ""],

  ["--a: inherit", "--a", ""],

  ["--z: inherit", "--z", "an-inherited-value"],

  ["--a: unset", "--a", ""],

  ["--z: unset", "--z", "an-inherited-value"],

  ["--a: 1px", "--a", "1px"],

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

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

  ["--a: var(--b); --b: 1px", "--a", "1px"],

  ["--a: var(--b, 1px)", "--a", "1px"],

  ["--a: var(--a, 1px)", "--a", ""],

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

  ["--a: something 3px url(whereever) calc(var(--b,1em) + 1px)", "--a", "something 3px url(whereever) calc(1em + 1px)"],

  ["--a: var(--b, var(--c, var(--d, Black)))", "--a", "Black"],

  ["--a: a var(--b) c; --b:b", "--a", "a b c"],

  ["--a: a var(--b,b var(--c) d) e; --c:c", "--a", "a b c d e"],

  ["--a: var(--b)red; --b:orange;", "--a", "orange/**/red"],

  ["--a: var(--b)var(--c); --b:orange; --c:red;", "--a", "orange/**/red"],

  ["--a: var(--b)var(--c,red); --b:orange;", "--a", "orange/**/red"],

  ["--a: var(--b,orange)var(--c); --c:red;", "--a", "orange/**/red"],

  ["--a: var(--b)-; --b:-;", "--a", "-/**/-"],

  ["--a: var(--b)--; --b:-;", "--a", "-/**/--"],

  ["--a: var(--b)--x; --b:-;", "--a", "-/**/--x"],

  ["--a: var(--b)var(--c); --b:-; --c:-;", "--a", "-/**/-"],

  ["--a: var(--b)var(--c); --b:--; --c:-;", "--a", "--/**/-"],

  ["--a: var(--b)var(--c); --b:--x; --c:-;", "--a", "--x/**/-"],

  ["counter-reset: var(--a)red; --a:orange;", "counter-reset", "orange 0 red 0"],

  ["--a: var(--b)var(--c); --c:[c]; --b:('ab", "--a", "('ab')[c]"],

  ["--a: '", "--a", "''"],

  ["--a: '\\", "--a", "''"],

  ["--a: \\", "--a", "\\\ufffd"],

  ["--a: \"", "--a", "\"\""],

  ["--a: \"\\", "--a", "\"\""],

  ["--a: url(http://example.org/", "--a", "url(http://example.org/)"],

  ["--a: url(http://example.org/\\", "--a", "url(http://example.org/\\\ufffd)"],

  ["--a: url('http://example.org/", "--a", "url('http://example.org/')"],

  ["--a: url('http://example.org/\\", "--a", "url('http://example.org/')"],

  ["--a: url(\"http://example.org/", "--a", "url(\"http://example.org/\")"],

  ["--a: url(\"http://example.org/\\", "--a", "url(\"http://example.org/\")"]

];

function runTest() {

  var div = document.querySelector("div");

  var span = document.querySelector("span");

  div.setAttribute("style", "--z:an-inherited-value");

  values.forEach(function(entry, i) {

    var declaration = entry[0];

    var property = entry[1];

    var expected = entry[2];

    span.setAttribute("style", declaration);

    var cs = getComputedStyle(span, "");

    is(cs.getPropertyValue(property), expected, `subtest #${i}: ${declaration}`);

});

  SimpleTest.finish();

SimpleTest.waitForExplicitFinish();

runTest();

</script>