1 files changed, 121 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-syntax/serialize-consecutive-tokens.html b/testing/web-platform/tests/css/css-syntax/serialize-consecutive-tokens.html
new file mode 100644
index 0000000000..f6e220de64
--- /dev/null
+++ b/testing/web-platform/tests/css/css-syntax/serialize-consecutive-tokens.html
@@ -0,0 +1,121 @@
+<!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>