css/css-syntax/serialize-consecutive-tokens.html

<!doctype html>
<title>Serialization of consecutive tokens.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<meta name="author" title="Tab Atkins-Bittner">
<link rel=help href="https://drafts.csswg.org/css-syntax/#serialization">
<body>
<!--
    The serialization chapter provides a table listing all the combinations of consecutive tokens that will,
    if naively serialized next to each other,
    produce a different set of tokens when re-parsed.
    The spec requires that a comment must be inserted between such tokens in the serialization,
    to ensure that they round-trip correctly.
-->

<script>

function testTokenPairs(t1, t2) {
    const b = document.body;
    test(()=>{
        b.style.setProperty("--t1", t1);
        b.style.setProperty("--t2", t2);
        b.style.setProperty("--result", "var(--t1)var(--t2)");
        const result = getComputedStyle(b).getPropertyValue("--result");
        assert_equals(result.slice(0, t1.length), t1, `Result must start with ${t1}`);
        assert_equals(result.slice(-t2.length), t2, `Result must end with ${t2}`);
        assert_not_equals(result, t1+t2, `Result must have a comment between ${t1} and ${t2}`);
    }, `Serialization of consecutive ${t1} and ${t2} tokens.`);
}
testTokenPairs("foo", "bar");
testTokenPairs("foo", "bar()");
testTokenPairs("foo", "url(bar)");
testTokenPairs("foo", "-");
testTokenPairs("foo", "123");
testTokenPairs("foo", "123%");
testTokenPairs("foo", "123em");
testTokenPairs("foo", "-->");
testTokenPairs("foo", "()");

testTokenPairs("@foo", "bar");
testTokenPairs("@foo", "bar()");
testTokenPairs("@foo", "url(bar)");
testTokenPairs("@foo", "-");
testTokenPairs("@foo", "123");
testTokenPairs("@foo", "123%");
testTokenPairs("@foo", "123em");
testTokenPairs("@foo", "-->");

testTokenPairs("#foo", "bar");
testTokenPairs("#foo", "bar()");
testTokenPairs("#foo", "url(bar)");
testTokenPairs("#foo", "-");
testTokenPairs("#foo", "123");
testTokenPairs("#foo", "123%");
testTokenPairs("#foo", "123em");
testTokenPairs("#foo", "-->");

testTokenPairs("123foo", "bar");
testTokenPairs("123foo", "bar()");
testTokenPairs("123foo", "url(bar)");
testTokenPairs("123foo", "-");
testTokenPairs("123foo", "123");
testTokenPairs("123foo", "123%");
testTokenPairs("123foo", "123em");
testTokenPairs("123foo", "-->");

testTokenPairs("#", "bar");
testTokenPairs("#", "bar()");
testTokenPairs("#", "url(bar)");
testTokenPairs("#", "-");
testTokenPairs("#", "123");
testTokenPairs("#", "123%");
testTokenPairs("#", "123em");

testTokenPairs("-", "bar");
testTokenPairs("-", "bar()");
testTokenPairs("-", "url(bar)");
testTokenPairs("-", "-");
testTokenPairs("-", "123");
testTokenPairs("-", "123%");
testTokenPairs("-", "123em");

testTokenPairs("123", "bar");
testTokenPairs("123", "bar()");
testTokenPairs("123", "url(bar)");
testTokenPairs("123", "123");
testTokenPairs("123", "123%");
testTokenPairs("123", "123em");
testTokenPairs("123", "%");

testTokenPairs("@", "bar");
testTokenPairs("@", "bar()");
testTokenPairs("@", "url(bar)");
testTokenPairs("@", "-");

testTokenPairs(".", "123");
testTokenPairs(".", "123%");
testTokenPairs(".", "123em");

testTokenPairs("+", "123");
testTokenPairs("+", "123%");
testTokenPairs("+", "123em");

testTokenPairs("/", "*");

</script>