css/css-variables/url-token-serialization.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Variables: url() token serialization in custom properties</title>
<link rel="help" href="https://drafts.csswg.org/css-variables-2/#serializing-custom-props">
<link rel="help" href="https://drafts.csswg.org/css-syntax-3/#serialization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="target"></div>
<script>
// "Specified values of custom properties must be serialized exactly as
// specified by the author. Simplifications that might occur in other
// properties, such as dropping comments, normalizing whitespace,
// reserializing numeric tokens from their value, etc., must not occur."
//
// The url() token value should not have its contents escaped using CSS
// identifier serialization rules. Characters like "." and "/" are valid
// in url() tokens and must not be backslash-escaped.

function test_url_roundtrip(input, description) {
    test(function() {
        var target = document.getElementById('target');
        target.style.setProperty('--test', input);
        var result = target.style.getPropertyValue('--test');
        target.style.removeProperty('--test');
        assert_equals(result, input);
    }, description);
}

function test_url_serialization(input, expected, description) {
    test(function() {
        var target = document.getElementById('target');
        target.style.setProperty('--test', input);
        var result = target.style.getPropertyValue('--test');
        target.style.removeProperty('--test');
        assert_equals(result, expected);
    }, description);
}

test_url_roundtrip(
    'url(image.png)',
    'Period in url() token must not be escaped'
);

test_url_roundtrip(
    'url(path/to/image.png)',
    'Slashes and periods in url() token must not be escaped'
);

test_url_roundtrip(
    'url(https://example.com/image.png?q=1&v=2#frag)',
    'Colons, slashes, periods, question marks, equals, ampersands, and hash in url() token must not be escaped'
);

test_url_roundtrip(
    'url(~icons+set!v2)',
    'Tilde, plus, and exclamation mark in url() token must not be escaped'
);

test_url_serialization(
    'url(foo\\ bar)',
    'url(foo\\ bar)',
    'Escaped space in url() token must be serialized as an escape'
);

test_url_serialization(
    'url(foo\\\tbar)',
    'url(foo\\\tbar)',
    'Escaped tab in url() token must be serialized as an escape'
);
</script>