WebKit export: [css-content] Issues with CSS `content` computed value serialization (#43782)
https://bugs.webkit.org/show_bug.cgi?id=266828
diff --git a/css/css-content/parsing/content-computed.html b/css/css-content/parsing/content-computed.html
new file mode 100644
index 0000000..60044e8
--- /dev/null
+++ b/css/css-content/parsing/content-computed.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Content Module Level 3: getComputedStyle().content</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-content-3/#content-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+function test_computed_value_combinations(property, specified, computed) {
+ test_computed_value(property, specified, computed);
+ test_computed_value(property, `${specified} / "alt text"`, computed ? `${computed} / "alt text"` : undefined);
+}
+
+test_computed_value_combinations("content", "open-quote");
+test_computed_value_combinations("content", "close-quote");
+test_computed_value_combinations("content", "no-open-quote");
+test_computed_value_combinations("content", "no-close-quote");
+
+test_computed_value_combinations("content", "counter(counter-name)");
+test_computed_value_combinations("content", "counter(counter-name, counter-style)");
+test_computed_value_combinations("content", "counter(counter-name, dECiMaL)", "counter(counter-name)");
+test_computed_value_combinations("content", "counter(counter-name, DECIMAL)", "counter(counter-name)");
+
+test_computed_value_combinations("content", `counters(counter-name, ".")`);
+test_computed_value_combinations("content", `counters(counter-name, ".", counter-style)`);
+test_computed_value_combinations("content", `counters(counter-name, ".", dECiMaL)`, `counters(counter-name, ".")`);
+test_computed_value_combinations("content", `counters(counter-name, ".", DECIMAL)`, `counters(counter-name, ".")`);
+
+test_computed_value_combinations("content", `url("https://www.example.com/picture.svg")`);
+
+test_computed_value_combinations("content", `"hello"`);
+
+test_computed_value_combinations("content", `counter(counter-name) "potato"`);
+test_computed_value_combinations("content", `counters(counter-name, ".") "potato"`);
+test_computed_value_combinations("content", `"(" counters(counter-name, ".", counter-style) ")"`);
+test_computed_value_combinations("content", `open-quote "hello" "world" close-quote`);
+test_computed_value_combinations("content", `url("https://www.example.com/picture.svg") "hello"`);
+</script>
+</body>
+</html>
diff --git a/css/css-content/parsing/content-invalid.html b/css/css-content/parsing/content-invalid.html
new file mode 100644
index 0000000..c8454e5
--- /dev/null
+++ b/css/css-content/parsing/content-invalid.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Content Module Level 3: Invalid parsing</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-content-3/#content-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+function test_invalid_value_combinations(property, value) {
+ test_invalid_value(property, value);
+ test_invalid_value(property, `${value} / "alt text"`);
+ test_invalid_value(property, `${value} / "alt text" attr(foo) "bar"`);
+ test_invalid_value(property, `${value} / attr(foo)`);
+}
+
+function test_invalid_value_alt_text(property, value) {
+ test_invalid_value(property, `${value} / url("https://www.example.com/picture.svg")`);
+ test_invalid_value(property, `${value} / no-open-quote`);
+ test_invalid_value(property, `${value} / no-close-quote`);
+ test_invalid_value(property, `${value} / "hi" no-close-quote`);
+ test_invalid_value(property, `${value} / attr(foo) open-quote`);
+}
+
+test_invalid_value_combinations("content", `attr()`);
+test_invalid_value_combinations("content", `counters(counter-name)`);
+test_invalid_value_combinations("content", `counter()`);
+
+test_invalid_value_alt_text("content", "open-quote");
+test_invalid_value_alt_text("content", "close-quote");
+test_invalid_value_alt_text("content", "no-open-quote");
+test_invalid_value_alt_text("content", "no-close-quote");
+
+test_invalid_value_alt_text("content", "attr(alt)");
+test_invalid_value_alt_text("content", "attr(data-foo)");
+
+test_invalid_value_alt_text("content", "counter(counter-name)");
+test_invalid_value_alt_text("content", "counter(counter-name, counter-style)");
+
+test_invalid_value_alt_text("content", `counters(counter-name, ".")`);
+test_invalid_value_alt_text("content", `counters(counter-name, ".", counter-style)`);
+
+test_invalid_value_alt_text("content", `url("https://www.example.com/picture.svg")`);
+
+test_invalid_value_alt_text("content", `"hello"`);
+
+test_invalid_value_alt_text("content", `"hello" "world"`);
+test_invalid_value_alt_text("content", `"hello" attr(alt) "world"`);
+test_invalid_value_alt_text("content", `counter(counter-name) "potato"`);
+test_invalid_value_alt_text("content", `counters(counter-name, ".") "potato"`);
+test_invalid_value_alt_text("content", `"(" counters(counter-name, ".", counter-style) ")"`);
+test_invalid_value_alt_text("content", `open-quote "hello" "world" close-quote`);
+test_invalid_value_alt_text("content", `url("https://www.example.com/picture.svg") "hello"`);
+</script>
+</body>
+</html>
diff --git a/css/css-content/parsing/content-valid.html b/css/css-content/parsing/content-valid.html
new file mode 100644
index 0000000..5c75586
--- /dev/null
+++ b/css/css-content/parsing/content-valid.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Content Module Level 3: Valid parsing</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-content-3/#content-property">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+function test_valid_value_combinations(property, value, serialized) {
+ if (arguments.length < 3)
+ serialized = value;
+ test_valid_value(property, value, serialized);
+ test_valid_value(property, `${value} / "alt text"`, `${serialized} / "alt text"`);
+ test_valid_value(property, `${value} / "alt text" attr(foo) "bar"`, `${serialized} / "alt text" attr(foo) "bar"`);
+ test_valid_value(property, `${value} / attr(foo)`, `${serialized} / attr(foo)`);
+}
+
+test_valid_value("content", "none");
+test_valid_value("content", "normal");
+
+test_valid_value_combinations("content", "open-quote");
+test_valid_value_combinations("content", "close-quote");
+test_valid_value_combinations("content", "no-open-quote");
+test_valid_value_combinations("content", "no-close-quote");
+
+test_valid_value_combinations("content", "attr(alt)");
+test_valid_value_combinations("content", "attr(data-foo)");
+
+test_valid_value_combinations("content", "counter(counter-name)");
+test_valid_value_combinations("content", "counter(counter-name, counter-style)");
+test_valid_value_combinations("content", "counter(counter-name, dECiMaL)", "counter(counter-name)");
+test_valid_value_combinations("content", "counter(counter-name, DECIMAL)", "counter(counter-name)");
+
+test_valid_value_combinations("content", `counters(counter-name, ".")`);
+test_valid_value_combinations("content", `counters(counter-name, ".", counter-style)`);
+test_valid_value_combinations("content", `counters(counter-name, ".", dECiMaL)`, `counters(counter-name, ".")`);
+test_valid_value_combinations("content", `counters(counter-name, ".", DECIMAL)`, `counters(counter-name, ".")`);
+
+test_valid_value_combinations("content", `url("https://www.example.com/picture.svg")`);
+
+test_valid_value_combinations("content", `"hello"`);
+
+test_valid_value_combinations("content", `"hello" "world"`);
+test_valid_value_combinations("content", `"hello" attr(alt) "world"`);
+test_valid_value_combinations("content", `counter(counter-name) "potato"`);
+test_valid_value_combinations("content", `counters(counter-name, ".") "potato"`);
+test_valid_value_combinations("content", `"(" counters(counter-name, ".", counter-style) ")"`);
+test_valid_value_combinations("content", `open-quote "hello" "world" close-quote`);
+test_valid_value_combinations("content", `url("https://www.example.com/picture.svg") "hello"`);
+</script>
+</body>
+</html>
