serialize-consecutive-tokens.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-syntax/serialize-consecutive-tokens.html - WPT Dashboard Interop Dashboard

<!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("/", "*");

// Test that interior comments are preserved, but exterior ones are not.

function testComments(text, t1, expected) {

    const b = document.body;

    test(()=>{

        b.style.setProperty("--t1", t1);

        b.style.setProperty("--result", text);

        const result = getComputedStyle(b).getPropertyValue("--result");

        assert_equals(result, expected);

    }, `Comments are handled correctly when computing ${text} using t1:${t1}.`);

testComments("a/* comment */b", "", "a/* comment */b");

testComments("a/* comment */var(--t1)", "b", "a/**/b");

testComments("var(--t1)b", "a/* comment */", "a/**/b");

</script>