mirror of
https://github.com/servo/servo.git
synced 2025-07-16 20:03:39 +01:00
172 lines
6.5 KiB
HTML
172 lines
6.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<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(new 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>|<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("*", ":> hello");
|
|
assert_valid("*", "([ brackets ]) { yay (??)}");
|
|
assert_valid("*", "yep 'this is valid too'");
|
|
assert_valid("*", "unmatched opening bracket is valid :(");
|
|
assert_valid("*", '"');
|
|
|
|
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("<percentage>", "-9.3e3%");
|
|
assert_valid("<length-percentage>", "-54%");
|
|
assert_valid("<length-percentage>", "0");
|
|
assert_valid("<length-percentage>", "calc(-11px + 10.4%)");
|
|
|
|
assert_valid("<number>", "-109");
|
|
assert_valid("<number>", "2.3e4");
|
|
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("<resolution>", "-5.3dpcm");
|
|
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)");
|
|
|
|
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("banana", "banana");
|
|
assert_valid("bAnAnA", "bAnAnA");
|
|
assert_valid("ba-na-nya", "ba-na-nya");
|
|
assert_valid("banana", "banan\\61");
|
|
assert_valid("<custom-ident>", "banan\\61");
|
|
assert_valid("big | bigger | BIGGER", "bigger");
|
|
assert_valid("foo+|bar", "foo foo foo");
|
|
assert_valid("default", "default");
|
|
|
|
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");
|
|
|
|
// Invalid syntax
|
|
assert_invalid("banana,nya", "banana");
|
|
assert_invalid("banan\\61", "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("<length>++", "10px");
|
|
assert_invalid("<length> | *", "10px");
|
|
assert_invalid("*|banana", "banana");
|
|
assert_invalid("*+", "banana");
|
|
|
|
assert_invalid("initial", "initial");
|
|
assert_invalid("inherit", "inherit");
|
|
assert_invalid("unset", "unset");
|
|
assert_invalid("<length>|initial", "10px");
|
|
assert_invalid("<length>|INHERIT", "10px");
|
|
assert_invalid("<percentage>|unsEt", "2%");
|
|
|
|
// Invalid initialValue
|
|
assert_invalid("*", "initial");
|
|
assert_invalid("*", "inherit");
|
|
assert_invalid("*", "unset");
|
|
assert_invalid("*", "revert");
|
|
assert_invalid("<custom-ident>", "initial");
|
|
assert_invalid("<custom-ident>+", "foo inherit 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>", "10vmin");
|
|
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("<percentage> | <length>+", "calc(100vh - 10px) 30px");
|
|
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("<angle>", "0");
|
|
assert_invalid("<angle>", "10%");
|
|
assert_invalid("<time>", "2px");
|
|
assert_invalid("<resolution>", "10");
|
|
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");
|
|
</script>
|