css/css-values/random-item-valid.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-values-5/#funcdef-random-item">
<link rel="author" title="Joanne Pan" href="https://github.com/J0pan">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<script>
// random-item() is an arbitrary substitution function, so only its argument grammar is
// validated at parse time:
//   <random-item-args> = random-item( <declaration-value>, [ <declaration-value>? ]# )
// The first argument is parsed as a <random-key> and an item is selected at computed-value
// time, not here. See https://drafts.csswg.org/css-values-5/#funcdef-random-item

// A non-empty first argument followed by a comma-separated list of items is valid.
test_valid_value('font-family', 'random-item(auto, serif)');
test_valid_value('font-family', 'random-item(auto, serif, sans-serif, monospace)');
test_valid_value('font-family', 'random-item(auto ,serif ,sans-serif)');
test_valid_value('font-family', 'random-item(auto , serif , sans-serif)');

// Items may be empty: [ <declaration-value>? ]#.
test_valid_value('font-family', 'random-item(auto, )');
test_valid_value('font-family', 'random-item(auto, serif,)');
test_valid_value('font-family', 'random-item(auto, , serif)');
test_valid_value('font-family', 'random-item(auto, ,)');

// Comma-containing items are grouped with {}, including with whitespace around the braces.
// https://drafts.csswg.org/css-values-5/#component-function-commas
test_valid_value('font-family', 'random-item(auto, {Times, serif}, {Arial, sans-serif})');
test_valid_value('font-family', 'random-item(auto, {Times, serif}, sans-serif, {monospace})');
test_valid_value('font-family', 'random-item(auto, {Times, serif})');
test_valid_value('font-family', 'random-item(auto, { Times, serif }, { Arial, sans-serif })');
test_valid_value('font-family', 'random-item(auto, {Times, serif}, { Arial, sans-serif })');
test_valid_value('font-family', 'random-item(auto, { monospace })');

// The first argument is NOT parsed as <random-key> at parse time, so any non-empty
// <declaration-value> is accepted here. These resolve (or become invalid) at computed-value time.
test_valid_value('font-family', 'random-item(--x, serif, sans-serif)');
test_valid_value('font-family', 'random-item(fixed 0.5, serif, sans-serif)');
test_valid_value('font-family', 'random-item(serif, sans-serif)');
test_valid_value('font-family', 'random-item(foo, serif, sans-serif)');
test_valid_value('font-family', 'random-item(fixed -0.5, serif, sans-serif)');
test_valid_value('font-family', 'random-item(property-scoped, serif, sans-serif)');
test_valid_value('font-family', 'random-item(var(--key), serif, sans-serif)');

</script>