summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-properties-values-api/register-property-syntax-parsing.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-properties-values-api/register-property-syntax-parsing.html
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-properties-values-api/register-property-syntax-parsing.html')
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/register-property-syntax-parsing.html287
1 files changed, 287 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-properties-values-api/register-property-syntax-parsing.html b/testing/web-platform/tests/css/css-properties-values-api/register-property-syntax-parsing.html
new file mode 100644
index 0000000000..537a921efc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/register-property-syntax-parsing.html
@@ -0,0 +1,287 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" />
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#supported-syntax-strings" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+test_count = 0;
+
+function assert_valid(syntax, initialValue) {
+ // No actual assertions, this just shouldn't throw
+ test(function() {
+ var name = '--syntax-test-' + (test_count++);
+ CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false});
+ }, "syntax:'" + syntax + "', initialValue:'" + initialValue + "' is valid");
+}
+
+function assert_invalid(syntax, initialValue) {
+ test(function(){
+ var name = '--syntax-test-' + (test_count++);
+ assert_throws_dom("SyntaxError",
+ () => CSS.registerProperty({name: name, syntax: syntax, initialValue: initialValue, inherits: false}));
+ }, "syntax:'" + syntax + "', initialValue:'" + initialValue + "' is invalid");
+}
+
+assert_valid("*", "a");
+assert_valid(" * ", "b");
+assert_valid("<length>", "2px");
+assert_valid(" <number>", "5");
+assert_valid("<percentage> ", "10%");
+assert_valid("<color>+", "red");
+assert_valid(" <length>+ | <percentage>", "2px 8px");
+assert_valid(" <length>+ | <color>#", "red, blue");
+assert_valid("<length>|<percentage>|<length-percentage>", "2px"); // Valid but silly
+assert_valid("<color> | <image> | <url> | <integer> | <angle>", "red");
+assert_valid("<time> | <resolution> | <transform-list> | <custom-ident>", "red");
+assert_valid("\t<color>\n| foo", "foo");
+
+assert_valid("*", ":> hello");
+assert_valid("*", "([ brackets ]) { yay (??)}");
+assert_valid("*", "yep 'this is valid too'");
+assert_valid("*", "unmatched opening bracket is valid :(");
+assert_valid("*", '"');
+assert_valid("*", "default");
+
+assert_valid("<length>", "0");
+assert_valid("<length>", "10px /*:)*/");
+assert_valid("<length>", " calc(-2px)");
+assert_valid("<length>", "calc(2px*4 + 10px)");
+assert_valid("<length>", "7.1e-4cm");
+assert_valid("<length>", "calc(7in - 12px)");
+assert_valid("<length>+", "2px 7px calc(8px)");
+assert_valid("<length>#", "2px, 7px, calc(8px)");
+assert_valid("<percentage>", "-9.3e3%");
+assert_valid("<length-percentage>", "-54%");
+assert_valid("<length-percentage>", "0");
+assert_valid("<length-percentage>", "calc(-11px + 10.4%)");
+assert_valid("<length>", "10vmin");
+assert_valid("<percentage> | <length>+", "calc(100vh - 10px) 30px");
+
+assert_valid("<number>", "-109");
+assert_valid("<number>", "2.3e4");
+assert_valid("<number>", "calc(1 / 2)");
+assert_valid("<integer>", "-109");
+assert_valid("<integer>", "19");
+assert_valid("<integer>", "calc(1)");
+assert_valid("<integer>", "calc(1 + 2)");
+assert_valid("<integer>", "calc(3.1415)");
+assert_valid("<integer>", "calc(3.1415 + 3.1415)");
+
+assert_valid("<angle>", "10deg");
+assert_valid("<angle>", "20.5rad");
+assert_valid("<angle>", "calc(50grad + 3.14159rad)");
+assert_valid("<time>", "2s");
+assert_valid("<time>", "calc(2s - 9ms)");
+assert_valid("<resolution>", "10dpi");
+assert_valid("<resolution>", "3dPpX");
+assert_valid("<transform-function>", "translateX(2px)");
+assert_valid("<transform-function>|<integer>", "5");
+assert_valid("<transform-function>|<integer>", "scale(2)");
+assert_valid("<transform-function>+", "translateX(2px) rotate(42deg)");
+assert_valid("<transform-list>", "scale(2)");
+assert_valid("<transform-list>", "translateX(2px) rotate(20deg)");
+
+// <string> is accepted in https://github.com/w3c/css-houdini-drafts/issues/1103
+assert_valid("<string>", "'foo bar'");
+assert_valid("<string>", " 'foo bar' ");
+assert_valid("<string>", "'foo bar");
+assert_valid("<string>", `'"foo" bar'`);
+assert_valid("<string>", '"bar baz"');
+assert_valid("<string>", `"bar 'baz'"`);
+assert_valid("<string>", `"bar 'baz'`);
+assert_valid("<string>+", "'foo' 'bar'");
+assert_valid("<string>#", "'foo', 'bar'");
+assert_valid("<string>+ | <string>#", "'foo' 'bar'");
+assert_valid("<string>+ | <string>#", " 'foo' 'bar'");
+assert_valid("<string>+ | <string>#", `'foo' "bar"`);
+assert_valid("<string>+ | <string>#", `'foo' "bar`);
+assert_valid("<string># | <string>+", "'foo', 'bar'");
+assert_valid("<string># | <string>+", "'foo', 'bar' ");
+assert_valid("<string># | <string>+", `"foo", 'bar'`);
+assert_valid("<string># | <string>+", `"foo", 'bar`);
+
+assert_valid("<color>", "rgb(12, 34, 56)");
+assert_valid("<color>", "lightgoldenrodyellow");
+assert_valid("<image>", "url(a)");
+assert_valid("<image>", "linear-gradient(yellow, blue)");
+assert_valid("<url>", "url(a)");
+
+assert_valid("<color>+", "yellow blue");
+assert_valid("<color>+", "yellow blue ");
+assert_valid("<color>+ | <color>", "yellow blue");
+assert_valid("<color> | <color>+", "yellow blue");
+assert_valid("<color># | <color>", "yellow, blue");
+assert_valid("<color> | <color>#", "yellow, blue");
+assert_valid("<color># | <color>+", "yellow blue");
+assert_valid("<color>+ | <color>#", "yellow, blue");
+assert_valid("<color>+ | yellow", "yellow blue");
+assert_valid("yellow", "yellow");
+assert_valid("yellow | <color>+", "yellow blue");
+assert_valid("<color># | yellow", "yellow, blue");
+assert_valid("yellow | <color>#", "yellow, blue");
+assert_valid("<transform-list> | <transform-function> ", "scale(2) rotate(90deg)");
+assert_valid("<transform-function> | <transform-list>", "scale(2) rotate(90deg)");
+assert_valid("<transform-list> | <transform-function>+ ", "scale(2) rotate(90deg)");
+assert_valid("<transform-function>+ | <transform-list>", "scale(2) rotate(90deg)");
+assert_valid("<transform-list> | <transform-function># ", "scale(2) rotate(90deg)");
+assert_valid("<transform-function># | <transform-list>", "scale(2) rotate(90deg)");
+assert_valid("<transform-list> | <transform-function># ", "scale(2), rotate(90deg)");
+assert_valid("<transform-function># | <transform-list>", "scale(2), rotate(90deg)");
+assert_valid("<transform-list>", "scale(2) rotate(90deg) ");
+assert_valid("<integer>+ | <percentage>+ | <length>+ ", "1");
+assert_valid("<integer>+ | <percentage>+ | <length>+ ", "1 1");
+assert_valid("<integer>+ | <percentage>+ | <length>+ ", "1%");
+assert_valid("<integer>+ | <percentage>+ | <length>+ ", "1% 1%");
+assert_valid("<integer>+ | <percentage>+ | <length>+ ", "1px");
+assert_valid("<integer>+ | <percentage>+ | <length>+ ", "1px 1px");
+
+assert_valid("banana", "banana");
+assert_valid("bAnAnA", "bAnAnA");
+assert_valid("ba-na-nya", "ba-na-nya");
+assert_valid("banana", "banan\\61");
+assert_valid("banan\\61", "banana");
+assert_valid("<custom-ident>", "banan\\61");
+assert_valid("big | bigger | BIGGER", "bigger");
+assert_valid("foo+|bar", "foo foo foo");
+
+assert_valid("banana\t", "banana");
+assert_valid("\nbanana\r\n", "banana");
+assert_valid("ba\f\n|\tna\r|nya", "nya");
+
+assert_valid(null, "null");
+assert_valid(undefined, "undefined");
+assert_valid(["array"], "array");
+
+assert_valid("\\1F914", "🤔");
+assert_valid("hmm\\1F914", "hmm🤔");
+assert_valid("\\1F914hmm", "🤔hmm");
+assert_valid("\\1F914 hmm", "🤔hmm");
+assert_valid("\\1F914\\1F914", "🤔🤔");
+
+// Invalid syntax
+assert_invalid("<color>#", "yellow blue");
+assert_invalid("banana,nya", "banana");
+assert_invalid("<\\6c ength>", "10px");
+assert_invalid("<banana>", "banana");
+assert_invalid("<Number>", "10");
+assert_invalid("<length", "10px");
+assert_invalid("<LENGTH>", "10px");
+assert_invalid("< length>", "10px");
+assert_invalid("<length >", "10px");
+assert_invalid("<length> +", "10px");
+assert_invalid("<transform-list>+", "scale(2)");
+assert_invalid("<transform-list>#", "scale(2)");
+
+assert_invalid("<length>++", "10px");
+assert_invalid("<length>##", "10px");
+assert_invalid("<length>+#", "10px");
+assert_invalid("<length>#+", "10px");
+assert_invalid("<length> | *", "10px");
+assert_invalid("<length>+", "2px,7px,calc(8px)");
+assert_invalid("<length>#", "2px 7px calc(8px)");
+assert_invalid("*|banana", "banana");
+assert_invalid("|banana", "banana");
+assert_invalid("*+", "banana");
+assert_invalid("|", "banana");
+assert_invalid(" |", "banana");
+assert_invalid("||", "banana");
+assert_invalid("foo bar", "foo bar");
+assert_invalid("foo foo foo", "foo foo foo");
+assert_invalid("foo § bar", "foo § bar");
+assert_invalid("foo \\1F914 bar", "foo \\1F914 bar");
+assert_invalid("<length> <number>", "0px 0");
+assert_invalid("<length> <length> <length>", "0px 0px 0px");
+
+assert_invalid("<integer>+ | <percentage>+ | <length>+ ", "1 1%");
+assert_invalid("<integer>+ | <percentage>+ | <length>+ ", "1% 1");
+assert_invalid("<integer>+ | <percentage>+ | <length>+ ", "1px 1");
+assert_invalid("<integer>+ | <percentage>+ | <length>+ ", "1 1px");
+assert_invalid("<integer>+ | <percentage>+ | <length>+ ", "1px 1%");
+assert_invalid("<integer>+ | <percentage>+ | <length>+ ", "1% 1px");
+
+assert_invalid("initial", "initial");
+assert_invalid("inherit", "inherit");
+assert_invalid("unset", "unset");
+assert_invalid("revert", "revert");
+assert_invalid("revert-layer", "revert-layer");
+assert_invalid("default", "default");
+assert_invalid("<length>|initial", "10px");
+assert_invalid("<length>|INHERIT", "10px");
+assert_invalid("<percentage>|unsEt", "2%");
+assert_invalid("<color>|REVert", "red");
+assert_invalid("<integer>|deFAUlt", "1");
+
+// Invalid initialValue
+// The 5 tests that follow are not clearly backed by the specification,
+// but they're probably a good idea and we should change the spec. See
+// https://github.com/w3c/css-houdini-drafts/issues/1076 .
+assert_invalid("*", "initial");
+assert_invalid("*", "inherit");
+assert_invalid("*", "unset");
+assert_invalid("*", "revert");
+assert_invalid("*", "revert-layer");
+// ... end possibly-invalid tests.
+assert_invalid("<custom-ident>", "initial");
+assert_invalid("<custom-ident>", "inherit");
+assert_invalid("<custom-ident>", "unset");
+assert_invalid("<custom-ident>", "revert");
+assert_invalid("<custom-ident>", "revert-layer");
+assert_invalid("<custom-ident>", "default");
+assert_invalid("<custom-ident>+", "foo initial bar");
+assert_invalid("<custom-ident>+", "foo inherit bar");
+assert_invalid("<custom-ident>+", "foo unset bar");
+assert_invalid("<custom-ident>+", "foo revert bar");
+assert_invalid("<custom-ident>+", "foo revert-layer bar");
+assert_invalid("<custom-ident>+", "foo default bar");
+
+assert_invalid("*", ")");
+assert_invalid("*", "([)]");
+assert_invalid("*", "whee!");
+assert_invalid("*", '"\n');
+assert_invalid("*", "url(moo '')");
+assert_invalid("*", "semi;colon");
+assert_invalid("*", "var(invalid var ref)");
+assert_invalid("*", "var(--foo)");
+
+assert_invalid("banana", "bAnAnA");
+assert_invalid("<length>", "var(--moo)");
+assert_invalid("<length>", "10");
+assert_invalid("<length>", "10%");
+assert_invalid("<length>", "calc(5px + 10%)");
+assert_invalid("<length>", "calc(5px * 3px / 6px)");
+assert_invalid("<length>", "10em");
+assert_invalid("<length>", "calc(4px + 3em)");
+assert_invalid("<length>", "calc(4px + calc(8 * 2em))");
+assert_invalid("<length>+", "calc(2ex + 16px)");
+assert_invalid("<length>+", "10px calc(20px + 4rem)");
+assert_invalid("<length>+", "");
+assert_invalid("<length>#", "");
+assert_invalid("<length>", "10px;");
+assert_invalid("<length-percentage>", "calc(2px + 10% + 7ex)");
+assert_invalid("<percentage>", "0");
+assert_invalid("<integer>", "1.0");
+assert_invalid("<integer>", "1e0");
+assert_invalid("<number>|foo", "foo var(--foo, bla)");
+assert_invalid("Foo | bar", "foo");
+assert_invalid("Foo | bar", "Bar");
+
+assert_invalid("<angle>", "0");
+assert_invalid("<angle>", "10%");
+assert_invalid("<time>", "2px");
+assert_invalid("<resolution>", "10");
+
+// "The allowed range of <resolution> values always excludes negative values"
+// https://www.w3.org/TR/css-values-4/#resolution-value
+assert_invalid("<resolution>", "-5.3dpcm");
+
+assert_invalid("<transform-function>", "scale()");
+assert_invalid("<transform-list>", "scale()");
+assert_invalid("<transform-list>+", "translateX(2px) rotate(20deg)");
+assert_invalid("<color>", "fancy-looking");
+assert_invalid("<image>", "banana.png");
+assert_invalid("<url>", "banana.png");
+
+assert_invalid("<string>", "foo bar'");
+assert_invalid("<string>", 'foo bar"');
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-20 18:30:25 +0000