<!DOCTYPE html>
<html lang="en">
<head>
    <title>box-shadow parse should reject invalid values</title>
</head>
<body>
<div id="target"></div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
let target = document.getElementById('target') 
let test_invalid_value = (value) => {
    test(() => {
        target.style['box-shadow'] = ''
        target.style['box-shadow'] = value
        assert_equals(target.style.getPropertyValue('box-shadow'), '');
    }, '#target.style["box-shadow"] = ' + JSON.stringify(value) + ' should not set the property value')
}

// Disallow multiple color components.
test_invalid_value('red green -4px 4px')
test_invalid_value('red -4px 4px green')
test_invalid_value('red inset -4px 4px red')
test_invalid_value('-4px 4px red green')

// Disallow multiple `inset` keyword components.
test_invalid_value('inset inset -4px 4px')
test_invalid_value('inset inset -4px 4px red')
test_invalid_value('inset -4px 4px inset')
test_invalid_value('inset green -4px 4px inset')
test_invalid_value('-4px 4px inset inset')

// Disallow multiple lengths components.
test_invalid_value('-4px 4px inset 8px -8px')
test_invalid_value('-4px 4px 2px inset 8px -8px')
test_invalid_value('-4px 4px 2px 2px inset 8px -8px')
test_invalid_value('-4px 4px 2px 2px inset 8px -8px 2px')
test_invalid_value('-4px 4px 2px 2px inset 8px -8px 2px 2px')

test_invalid_value('-4px 4px red 8px -8px')
test_invalid_value('-4px 4px 2px red 8px -8px')
test_invalid_value('-4px 4px 2px 2px red 8px -8px')
test_invalid_value('-4px 4px 2px 2px red 8px -8px 2px')
test_invalid_value('-4px 4px 2px 2px red 8px -8px 2px 2px')

test_invalid_value('inset -4px 4px 8px 8px 2px 2px')
test_invalid_value('red -4px 4px 8px 8px 2px 2px')
</script>
</body>
</html>