<!DOCTYPE html>
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#css-style-value-reification" />
<meta name="assert" content="Verifies that registered custom properties interact correctly with CSS Typed OM" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/utils.js"></script>
<style id=style>
    div {}
</style>
<div id=target></div>

<script>

// Cleans style rules used for testing between every test.
add_result_callback(function(){
    target.attributeStyleMap.clear();
    // Clears 'div' rule in #style:
    style.sheet.rules[0].styleMap.clear();
});

// In the following utility functions, the 'map' parameter (if present)
// can be any StylePropertyMap. (Not StylePropertyMapReadOnly).

// Verifies that get()/getAll() reifies the specified property to a
// CSSUnparsedValue, with a string serialization equal to 'value'.
function verify_map_get_unparsed(map, name, value) {
    map.set(name, value);

    let specifiedValue = map.get(name);
    assert_true(specifiedValue instanceof CSSUnparsedValue);
    assert_equals(specifiedValue.toString(), value);

    let allSpecifiedValues = map.getAll(name);
    assert_equals(allSpecifiedValues.length, 1);
    assert_true(allSpecifiedValues[0] instanceof CSSUnparsedValue);
    assert_equals(allSpecifiedValues[0].toString(), value);
}

// Verifies that the specified value is accepted by set().
function verify_map_set(map, name, value) {
    map.set(name, value);
    assert_equals(map.get(name).toString(), value.toString());
}

// Verifies that the specified value is NOT accepted by set().
function verify_map_not_set(map, name, value) {
    assert_throws_js(TypeError, () => {
        map.set(name, value);
    });
}

// Verifies that the specified value is NOT accepted by append().
function verify_map_no_append(map, name, value) {
    assert_throws_js(TypeError, () => {
        map.append(name, value);
    });
}

// Verifies that the property 'name' shows up on iteration, that it's reified
// as a CSSUnparsedValue, and that the string representation is equal to
// 'value'.
function verify_map_iteration_unparsed(map, name, value) {
    map.set(name, value);
    let result = Array.from(map).filter(e => e[0] == name)[0];
    assert_equals(result.length, 2);
    let iter_value = result[1];
    assert_equals(iter_value.length, 1);
    assert_true(iter_value[0] instanceof CSSUnparsedValue);
    assert_equals(iter_value[0].toString(), value);
}

// Verifies that CSSStyleValue.parse/parseAll results in a CSSStyleValue with
// the 'expected' type.
function verify_parsed_type(prop, value, expected) {
    let parse_value = CSSStyleValue.parse(prop, value);
    let parse_all_value = CSSStyleValue.parseAll(prop, value);

    assert_true(parse_value instanceof expected);
    assert_true(parse_all_value.every(x => x instanceof expected))
}

// On the target element, verify that computed value of 'name' is an instance
// of 'expected' and not an instance of CSSUnparsedValue.
//
// If 'value' is non-null, that value is first set using the style attribute
// of the target element.
function verify_computed_type(name, value, expected) {
    if (expected == CSSUnparsedValue) {
        throw 'CSSUnparsedValue may not be used as expected type';
    }

    try {
        if (value != null) {
            target.style = `${name}: ${value}`;
        }

        let computedValue = target.computedStyleMap().get(name);

        assert_false(computedValue instanceof CSSUnparsedValue);
        assert_true(computedValue instanceof expected);
    } finally {
        if (value != null) {
            target.style = '';
        }
    }
}

// Verifies that the property 'name' shows up on iteration, that it's reified
// to the specified type, and that the string representation is equal to 'value'.
function verify_computed_iteration_type(name, value, type) {
    target.attributeStyleMap.set(name, value);
    let result = Array.from(target.computedStyleMap()).filter(e => e[0] == name)[0];
    assert_equals(result.length, 2);
    let iter_value = result[1];
    assert_equals(iter_value.length, 1);
    assert_true(iter_value[0] instanceof type);
    assert_equals(iter_value[0].toString(), value);
}

// Run the same test twice: once for each StylePropertyMap.
//
// https://drafts.css-houdini.org/css-typed-om-1/#stylepropertymap
function test_specified_maps(func, description) {
    test(function(){
        func(target.attributeStyleMap)
    }, description + ' [attributeStyleMap]');

    test(function(){
        let rule = style.sheet.rules[0];
        func(rule.styleMap)
    }, description + ' [styleMap]');
}

// StylePropertyMapReadOnly.get

test(function(){
    let name = generate_property('*', 'if(){}');
    assert_true(target.computedStyleMap().get(name) instanceof CSSUnparsedValue);

    target.attributeStyleMap.set(name, 'as{}df');
    assert_true(target.computedStyleMap().get(name) instanceof CSSUnparsedValue);
    target.attributeStyleMap.delete(name);
}, 'Computed * is reified as CSSUnparsedValue');

test(function(){
    verify_computed_type(generate_property('<angle>'), null, CSSUnitValue);
    verify_computed_type(generate_property('fail | <angle> '), '42deg', CSSUnitValue);
}, 'Computed <angle> is reified as CSSUnitValue');

test(function(){
    verify_computed_type(generate_property('<color>'), null, CSSStyleValue);
    verify_computed_type(generate_property('fail | <color> '), null, CSSStyleValue);
}, 'Computed <color> is reified as CSSStyleValue');

test(function(){
    verify_computed_type(generate_property('<custom-ident>'), null, CSSKeywordValue);
    verify_computed_type(generate_property('<custom-ident> | <length>'), 'none', CSSKeywordValue);
}, 'Computed <custom-ident> is reified as CSSKeywordValue');

test(function(){
    verify_computed_type(generate_property('<image>'), null, CSSImageValue);
    verify_computed_type(generate_property('fail | <image> '), 'url(thing.png)', CSSImageValue);
}, 'Computed <image> [url] is reified as CSSImageValue');

test(function(){
    verify_computed_type(generate_property('<integer>'), null, CSSUnitValue);
    verify_computed_type(generate_property('fail | <integer> '), '100', CSSUnitValue);
}, 'Computed <integer> is reified as CSSUnitValue');

test(function(){
    verify_computed_type(generate_property('<length-percentage>'), null, CSSUnitValue);
    verify_computed_type(generate_property('fail | <length-percentage> '), '10%', CSSUnitValue);
}, 'Computed <length-percentage> [%] is reified as CSSUnitValue');

test(function(){
    verify_computed_type(generate_property('<length-percentage>'), null, CSSUnitValue);
    verify_computed_type(generate_property('fail | <length-percentage> '), '10px', CSSUnitValue);
}, 'Computed <length-percentage> [px] is reified as CSSUnitValue');

test(function(){
    verify_computed_type(generate_property({syntax: '<length-percentage>', initialValue: 'calc(10% + 10px)'}), null, CSSMathSum);
    verify_computed_type(generate_property('fail | <length-percentage> '), 'calc(10px + 10%)', CSSMathSum);
}, 'Computed <length-percentage> [px + %] is reified as CSSMathSum');

test(function(){
    verify_computed_type(generate_property('<length>'), null, CSSUnitValue);
    verify_computed_type(generate_property('fail | <length> '), '10px', CSSUnitValue);
}, 'Computed <length> is reified as CSSUnitValue');

test(function(){
    verify_computed_type(generate_property('<number>'), null, CSSUnitValue);
    verify_computed_type(generate_property('fail | <number> '), '42', CSSUnitValue);
}, 'Computed <number> is reified as CSSUnitValue');

test(function(){
    verify_computed_type(generate_property('<percentage>'), null, CSSUnitValue);
    verify_computed_type(generate_property('fail | <percentage> '), '10%', CSSUnitValue);
}, 'Computed <percentage> is reified as CSSUnitValue');

test(function(){
    verify_computed_type(generate_property('<resolution>'), null, CSSUnitValue);
    verify_computed_type(generate_property('fail | <resolution> '), '300dpi', CSSUnitValue);
}, 'Computed <resolution> is reified as CSSUnitValue');

test(function(){
    verify_computed_type(generate_property('<time>'), null, CSSUnitValue);
    verify_computed_type(generate_property('fail | <time> '), '42s', CSSUnitValue);
}, 'Computed <time> is reified as CSSUnitValue');

test(function(){
    verify_computed_type(generate_property('<url>'), null, CSSStyleValue);
    verify_computed_type(generate_property('fail | <url> '), 'url(a)', CSSStyleValue);
}, 'Computed <url> is reified as CSSStyleValue');

test(function(){
    verify_computed_type(generate_property('thing1 | THING2'), null, CSSKeywordValue);
    verify_computed_type(generate_property('thing1 | THING2 | <url>'), 'THING2', CSSKeywordValue);
}, 'Computed ident is reified as CSSKeywordValue');

test(function(){
    verify_computed_type(generate_property('<length>+'), null, CSSUnitValue);
    verify_computed_type(generate_property('<length>+'), '10px 20px', CSSUnitValue);
}, 'First computed value correctly reified in space-separated list');

test(function(){
    verify_computed_type(generate_property('<length>#'), null, CSSUnitValue);
    verify_computed_type(generate_property('<length>#'), '10px, 20px', CSSUnitValue);
}, 'First computed value correctly reified in comma-separated list');

// StylePropertyMapReadOnly.getAll

test(function(){
    let name = generate_property({syntax: '<length>+', initialValue: '10px 20px'});
    assert_equals(target.computedStyleMap().getAll(name).length, 2);
    assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));

    target.style = `${name}: 10px 20px 30px`;
    assert_equals(target.computedStyleMap().getAll(name).length, 3);
    assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
}, 'All computed values correctly reified in space-separated list');

test(function(){
    let name = generate_property({syntax: '<length>#', initialValue: '10px, 20px'});
    assert_equals(target.computedStyleMap().getAll(name).length, 2);
    assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));

    target.style = `${name}: 10px, 20px, 30px`;
    assert_equals(target.computedStyleMap().getAll(name).length, 3);
    assert_true(target.computedStyleMap().getAll(name).every(x => x instanceof CSSUnitValue));
}, 'All computed values correctly reified in comma-separated list');

// StylePropertyMap.get/All

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('*'), 'foo');
}, 'Specified * is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('foo'), 'foo');
}, 'Specified foo is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<angle>'), '10deg');
}, 'Specified <angle> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<color>'), 'green');
}, 'Specified <color> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<custom-ident>'), 'foo');
}, 'Specified <custom-ident> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<image>'), 'url("a")');
}, 'Specified <image> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<integer>'), '1');
}, 'Specified <integer> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<length-percentage>'), 'calc(10% + 10px)');
}, 'Specified <length-percentage> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<length>'), '10px');
}, 'Specified <length> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<number>'), '1');
}, 'Specified <number> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<percentage>'), '10%');
}, 'Specified <percentage> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<resolution>'), '10dpi');
}, 'Specified <resolution> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<time>'), '1s');
}, 'Specified <time> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<transform-function>'), 'matrix(0, 0, 0, 0, 0, 0)');
}, 'Specified <transform-function> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<transform-list>'), 'matrix(0, 0, 0, 0, 0, 0)');
}, 'Specified <transform-list> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<url>'), 'url("a")');
}, 'Specified <url> is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<length>+'), '10px 11px');
}, 'Specified <length>+ is reified as CSSUnparsedValue from get/getAll');

test_specified_maps(function(map){
    verify_map_get_unparsed(map, generate_property('<length>#'), '10px, 11px');
}, 'Specified <length># is reified as CSSUnparsedValue from get/getAll');

// StylePropertyMap.set

// The following strings are valid for the specified syntax, and should be
// accepted by set().

test_specified_maps(function(map){
    verify_map_set(map, generate_property('*'), 'foo');
}, 'Specified string "foo" accepted by set() for syntax *');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('foo'), 'foo');
}, 'Specified string "foo" accepted by set() for syntax foo');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<angle>'), '10deg');
}, 'Specified string "10deg" accepted by set() for syntax <angle>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<color>'), 'green');
}, 'Specified string "green" accepted by set() for syntax <color>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<custom-ident>'), 'foo');
}, 'Specified string "foo" accepted by set() for syntax <custom-ident>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<image>'), 'url("a")');
}, 'Specified string "url("a")" accepted by set() for syntax <image>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<integer>'), '1');
}, 'Specified string "1" accepted by set() for syntax <integer>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<length-percentage>'), 'calc(10% + 10px)');
}, 'Specified string "calc(10% + 10px)" accepted by set() for syntax <length-percentage>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<length>'), '10px');
}, 'Specified string "10px" accepted by set() for syntax <length>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<number>'), '1');
}, 'Specified string "1" accepted by set() for syntax <number>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<percentage>'), '10%');
}, 'Specified string "10%" accepted by set() for syntax <percentage>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<resolution>'), '10dpi');
}, 'Specified string "10dpi" accepted by set() for syntax <resolution>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<time>'), '1s');
}, 'Specified string "1s" accepted by set() for syntax <time>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<transform-function>'), 'matrix(0, 0, 0, 0, 0, 0)');
}, 'Specified string "matrix(0, 0, 0, 0, 0, 0)" accepted by set() for syntax <transform-function>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<transform-list>'), 'matrix(0, 0, 0, 0, 0, 0)');
}, 'Specified string "matrix(0, 0, 0, 0, 0, 0)" accepted by set() for syntax <transform-list>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<url>'), 'url("a")');
}, 'Specified string "url("a")" accepted by set() for syntax <url>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<length>+'), '10px 11px');
}, 'Specified string "10px 11px" accepted by set() for syntax <length>+');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<length>#'), '10px, 11px');
}, 'Specified string "10px, 11px" accepted by set() for syntax <length>#');

// The following strings are invalid for the specified syntax, but should
// should be accepted by set().

test_specified_maps(function(map){
    verify_map_set(map, generate_property('foo'), 'bar');
}, 'Specified string "bar" accepted by set() for syntax foo');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<angle>'), '10px');
}, 'Specified string "10px" accepted by set() for syntax <angle>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<color>'), '10px');
}, 'Specified string "10px" accepted by set() for syntax <color>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<custom-ident>'), '10px');
}, 'Specified string "10px" accepted by set() for syntax <custom-ident>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<image>'), 'a');
}, 'Specified string "a" accepted by set() for syntax <image>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<integer>'), 'float');
}, 'Specified string "float" accepted by set() for syntax <integer>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<length-percentage>'), 'red');
}, 'Specified string "red" accepted by set() for syntax <length-percentage>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<length>'), 'red');
}, 'Specified string "red" accepted by set() for syntax <length>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<number>'), 'red');
}, 'Specified string "red" accepted by set() for syntax <number>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<percentage>'), 'var(--x)');
}, 'Specified string "var(--x)" accepted by set() for syntax <percentage>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<resolution>'), 'blue');
}, 'Specified string "blue" accepted by set() for syntax <resolution>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<time>'), '1meter');
}, 'Specified string "1meter" accepted by set() for syntax <time>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<transform-function>'), 'foo(0)');
}, 'Specified string "foo(0)" accepted by set() for syntax <transform-function>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<transform-list>'), 'bar(1)');
}, 'Specified string "bar(1)" accepted by set() for syntax <transform-list>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<url>'), 'a');
}, 'Specified string "a" accepted by set() for syntax <url>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<length>+'), 'a b');
}, 'Specified string "a b" accepted by set() for syntax <length>+');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<length>#'), 'a, b');
}, 'Specified string "a, b" accepted by set() for syntax <length>#');

// CSSUnparsedValue should always be accepted by any custom property,
// regardless of registation status.

const unparsed = CSSStyleValue.parse('--x', 'foo bar thing');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('*'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax *');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('foo'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax foo');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<angle>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <angle>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<color>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <color>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<custom-ident>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <custom-ident>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<image>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <image>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<integer>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <integer>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<length-percentage>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <length-percentage>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<length>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <length>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<number>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <number>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<percentage>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <percentage>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<resolution>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <resolution>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<time>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <time>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<transform-function>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <transform-function>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<transform-list>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <transform-list>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<url>'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <url>');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<length>+'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <length>+');

test_specified_maps(function(map){
    verify_map_set(map, generate_property('<length>#'), unparsed);
}, 'CSSUnparsedValue is accepted via set() for syntax <length>#');

// CSSStyleValues which aren't CSSUnparsedValues aren't accepted by set(),
// even if they're a value which is compatible with the syntax.
//
// https://drafts.css-houdini.org/css-properties-values-api-1/#cssom
const zero_matrix = CSSStyleValue.parse('transform', 'matrix(0, 0, 0, 0, 0, 0)');
const image_value = CSSStyleValue.parse('background-image', 'url(a)');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('*'), new CSSKeywordValue('foo'));
}, 'CSSKeywordValue rejected by set() for syntax *');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('foo'), new CSSKeywordValue('foo'));
}, 'CSSKeywordValue rejected by set() for syntax foo');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('<angle>'), CSS.deg(10));
}, 'CSSUnitValue rejected by set() for syntax <angle>');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('<custom-ident>'), new CSSKeywordValue('foo'));
}, 'CSSKeywordValue rejected by set() for syntax <custom-ident>');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('<image>'), image_value);
}, 'CSSImageValue rejected by set() for syntax <image>');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('<integer>'), CSS.number(1));
}, 'CSSUnitValue rejected by set() for syntax <integer>');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('<length-percentage>'), CSS.px(10));
}, 'CSSUnitValue rejected by set() for syntax <length-percentage>');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('<length>'), CSS.px(10));
}, 'CSSUnitValue rejected by set() for syntax <length>');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('<number>'), CSS.number(10));
}, 'CSSUnitValue rejected by set() for syntax <number>');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('<percentage>'), CSS.percent(10));
}, 'CSSUnitValue rejected by set() for syntax <percentage>');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('<resolution>'), CSS.dpi(10));
}, 'CSSUnitValue rejected by set() for syntax <resolution>');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('<time>'), CSS.s(10));
}, 'CSSUnitValue rejected by set() for syntax <time>');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('<transform-list>'), zero_matrix);
}, 'CSSTransformValue rejected by set() for syntax <transform-list>');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('<length>+'), CSS.px(10), CSS.px(10));
}, 'CSSUnitValue rejected by set() for syntax <length>+');

test_specified_maps(function(map){
    verify_map_not_set(map, generate_property('<length>#'), CSS.px(10), CSS.px(10));
}, 'CSSUnitValue rejected by set() for syntax <length>#');

// <color> has no CSSStyleValue subclass yet.
// <url> has no CSSStyleValue subclass yet.
// <transform-function> has no CSSStyleValue subclass yet.

// StylePropertyMap.append

// It is not allowed to append CSSStyleValues to custom properties, even
// when the string matches the syntax of the custom property.

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('*'), 'a');
}, 'Appending a string to * is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('foo+'), 'foo');
}, 'Appending a string to foo+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<angle>+'), '10deg');
}, 'Appending a string to <angle>+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<color>+'), 'red');
}, 'Appending a string to <color>+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<custom-ident>+'), 'foo');
}, 'Appending a string to <custom-ident>+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<image>+'), 'url(a)');
}, 'Appending a string to <image>+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<integer>+'), 'a');
}, 'Appending a string to <integer>+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<length-percentage>+'), 'calc(10*% + 10px)');
}, 'Appending a string to <length-percentage>+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<length>+'), '10px');
}, 'Appending a string to <length>+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<number>+'), '1.3');
}, 'Appending a string to <number>+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<percentage>+'), '10%');
}, 'Appending a string to <percentage>+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<resolution>+'), '10dpi');
}, 'Appending a string to <resolution>+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<time>+'), '1s');
}, 'Appending a string to <time>+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<transform-function>+'), 'matrix(0, 0, 0, 0, 0, 0)');
}, 'Appending a string to <transform-function>+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<transform-list>'), 'matrix(0, 0, 0, 0, 0, 0)');
}, 'Appending a string to <transform-list> is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<url>+'), 'url(a)');
}, 'Appending a string to <url>+ is not allowed');

test_specified_maps(function(map){
    verify_map_no_append(map, generate_property('<length>#'), '10px');
}, 'Appending a string to <length># is not allowed');

// It is not allowed to append CSSStyleValues to custom properties, even
// when the CSSStyleValue matches the syntax of the custom property.

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('*'), new CSSKeywordValue('foo'));
}, 'Appending a CSSKeywordValue to * is not allowed');

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('foo+'), new CSSKeywordValue('foo'));
}, 'Appending a CSSKeywordValue to foo+ is not allowed');

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('<angle>+'), CSS.deg(10));
}, 'Appending a CSSUnitValue to <angle>+ is not allowed');

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('<custom-ident>+'), new CSSKeywordValue('foo'));
}, 'Appending a CSSKeywordValue to <custom-ident>+ is not allowed');

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('<image>+'), image_value);
}, 'Appending a CSSImageValue to <image>+ is not allowed');

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('<integer>+'), CSS.number(1));
}, 'Appending a CSSUnitValue to <integer>+ is not allowed');

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('<length-percentage>+'), CSS.px(10));
}, 'Appending a CSSUnitValue to <length-percentage>+ is not allowed');

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('<length>+'), CSS.px(10));
}, 'Appending a CSSUnitValue to <length>+ is not allowed');

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('<number>+'), CSS.number(10));
}, 'Appending a CSSUnitValue to <number>+ is not allowed');

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('<percentage>+'), CSS.percent(10));
}, 'Appending a CSSUnitValue to <percentage>+ is not allowed');

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('<resolution>+'), CSS.dpi(10));
}, 'Appending a CSSUnitValue to <resolution>+ is not allowed');

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('<time>+'), CSS.s(10));
}, 'Appending a CSSUnitValue to <time>+ is not allowed');

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('<transform-list>'), zero_matrix);
}, 'Appending a CSSKeywordValue to <transform-list> is not allowed');

test_specified_maps(function(map) {
    verify_map_no_append(map, generate_property('<length>#'), CSS.px(10));
}, 'Appending a CSSUnitValue to <length># is not allowed');

// <color> has no CSSStyleValue subclass yet.
// <url> has no CSSStyleValue subclass yet.
// <transform-function> has no CSSStyleValue subclass yet.

// CSSStyleValue.parse/parseAll

test(function(){
    verify_parsed_type(generate_property('*'), 'while(){}', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax *', CSSUnparsedValue);

test(function(){
    verify_parsed_type(generate_property('<angle>'), '42deg', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <angle>');

test(function(){
    verify_parsed_type(generate_property('<color>'), '#fefefe', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <color>');

test(function(){
    verify_parsed_type(generate_property('<custom-ident> | <length>'), 'none', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <custom-ident> | <length>');

test(function(){
    verify_parsed_type(generate_property('<image>'), 'url(thing.png)', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <image>');

test(function(){
    verify_parsed_type(generate_property('<integer>'), '100', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <integer>');

test(function(){
    verify_parsed_type(generate_property('<length-percentage>'), '10%', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <length-percentage> (10%)');

test(function(){
    verify_parsed_type(generate_property('<length-percentage>'), '10px', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <length-percentage> (10px)');

test(function(){
    verify_parsed_type(generate_property('<length-percentage>'), 'calc(10px + 10%)', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <length-percentage> (calc(10px + 10%))');

test(function(){
    verify_parsed_type(generate_property('<length>'), '10px', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <length>');

test(function(){
    verify_parsed_type(generate_property('<number>'), '42', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <number>');

test(function(){
    verify_parsed_type(generate_property('<percentage>'), '10%', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <percentage>');

test(function(){
    verify_parsed_type(generate_property('<resolution>'), '300dpi', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <resolution>');

test(function(){
    verify_parsed_type(generate_property('<time>'), '42s', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <time>');

test(function(){
    verify_parsed_type(generate_property('<transform-function>'), 'matrix(0, 0, 0, 0, 0, 0)', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <transform-function>');

test(function(){
    verify_parsed_type(generate_property('<transform-list>'), 'matrix(0, 0, 0, 0, 0, 0)', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <transform-list>');

test(function(){
    verify_parsed_type(generate_property('<url>'), 'url(a)', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <url>');

test(function(){
    verify_parsed_type(generate_property('thing1 | THING2 | <url>'), 'THING2', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax thing1 | THING2 | <url>');

test(function(){
    verify_parsed_type(generate_property('<length>+'), '10px 20px', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <length>+');

test(function(){
    verify_parsed_type(generate_property('<length>#'), '10px, 20px', CSSUnparsedValue);
}, 'CSSStyleValue.parse[All] returns CSSUnparsedValue for syntax <length>#');

// Direct CSSStyleValue objects:

test_specified_maps(function(map){
    for (let syntax of all_syntaxes()) {
        let name = generate_property(syntax);

        let initialValue = target.computedStyleMap().get(name);

        // We only care about direct CSSStyleValue instances in this test.
        // Ultimately, in some future version of CSS TypedOM, we may have no
        // direct CSSStyleValue instances at all, which is fine.
        if (initialValue.constructor !== CSSStyleValue) {
            continue;
        }

        // Verify that direct CSSStyleValues are rejected by set(). Two things
        // should prevent this: 1) direct CSSStyleValues are not
        // CSSUnparsedValues, and 2) direct CSSStyleValues are only valid for
        // the property they were reified from.
        verify_map_not_set(map, generate_property(syntax), initialValue);
    }
}, 'Direct CSSStyleValue may not be set');

// StylePropertyMap iteration

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('*'), 'foo');
}, 'Specified * is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('foo'), 'foo');
}, 'Specified foo is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<angle>'), '10deg');
}, 'Specified <angle> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<color>'), 'green');
}, 'Specified <color> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<custom-ident>'), 'foo');
}, 'Specified <custom-ident> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<image>'), 'url("a")');
}, 'Specified <image> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<integer>'), '1');
}, 'Specified <integer> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<length-percentage>'), 'calc(10% + 10px)');
}, 'Specified <length-percentage> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<length>'), '10px');
}, 'Specified <length> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<number>'), '1');
}, 'Specified <number> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<percentage>'), '10%');
}, 'Specified <percentage> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<resolution>'), '10dpi');
}, 'Specified <resolution> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<time>'), '1s');
}, 'Specified <time> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<transform-function>'), 'matrix(0, 0, 0, 0, 0, 0)');
}, 'Specified <transform-function> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<transform-list>'), 'matrix(0, 0, 0, 0, 0, 0)');
}, 'Specified <transform-list> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<url>'), 'url("a")');
}, 'Specified <url> is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<length>+'), '10px 11px');
}, 'Specified <length>+ is reified CSSUnparsedValue by iterator');

test_specified_maps(function(map){
    verify_map_iteration_unparsed(map, generate_property('<length>#'), '10px, 11px');
}, 'Specified <length># is reified CSSUnparsedValue by iterator');

// StylePropertyMapReadOnly iteration

test(function(){
    let name = generate_property({syntax: '<length>', initialValue: '10px'});
    let result = Array.from(target.computedStyleMap()).filter(e => e[0] == name)[0];
    assert_true(typeof(result) !== 'undefined');
}, 'Registered property with initial value show up on iteration of computedStyleMap');

test(function(){
    verify_computed_iteration_type(generate_property('*'), 'thing', CSSUnparsedValue);
}, 'Computed * is reified as CSSUnparsedValue by iterator');

test(function(){
    verify_computed_iteration_type(generate_property('<angle>'), '42deg', CSSUnitValue);
}, 'Computed <angle> is reified as CSSUnitValue by iterator');

test(function(){
    verify_computed_iteration_type(generate_property('<custom-ident>'), 'thing', CSSKeywordValue);
}, 'Computed <custom-ident> is reified as CSSKeywordValue by iterator');

test(function(){
    verify_computed_iteration_type(generate_property('<image>'), 'url(\"a\")', CSSImageValue);
}, 'Computed <image> is reified as CSSImageValue by iterator');

test(function(){
    verify_computed_iteration_type(generate_property('<integer>'), '100', CSSUnitValue);
}, 'Computed <integer> is reified as CSSUnitValue by iterator');

test(function(){
    verify_computed_iteration_type(generate_property('<length>'), '10px', CSSUnitValue);
}, 'Computed <length> is reified as CSSUnitValue by iterator');

test(function(){
    verify_computed_iteration_type(generate_property('<number>'), '42', CSSUnitValue);
}, 'Computed <number> is reified as CSSUnitValue by iterator');

test(function(){
    verify_computed_iteration_type(generate_property('<percentage>'), '10%', CSSUnitValue);
}, 'Computed <percentage> is reified as CSSUnitValue by iterator');

test(function(){
    verify_computed_iteration_type(generate_property('<resolution>'), '300dppx', CSSUnitValue);
}, 'Computed <resolution> is reified as CSSUnitValue by iterator');

test(function(){
    verify_computed_iteration_type(generate_property('<time>'), '10s', CSSUnitValue);
}, 'Computed <time> is reified as CSSUnitValue by iterator');

test(function(){
    verify_computed_iteration_type(generate_property('none | thing | THING'), 'THING', CSSKeywordValue);
}, 'Computed none | thing | THING is reified as CSSKeywordValue by iterator');

test(function(){
    verify_computed_iteration_type(generate_property('<angle> | <length>'), '10px', CSSUnitValue);
}, 'Computed <angle> | <length> is reified as CSSUnitValue by iterator');

</script>