<!DOCTYPE html>
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#relative-urls" />
<meta name="assert" content="This test verifies that relative URLs in registered properties resolve correctly" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<script src="support/main/main.js"></script>
<script src="support/alt/alt.js"></script>
<link id="main" rel="stylesheet" type="text/css" href="support/main/main.css" />
<link id="main_utf16be" rel="stylesheet" type="text/css" href="support/main/main.utf16be.css" />
<link id="alt" rel="stylesheet" type="text/css" href="support/alt/alt.css" />
<div id=target>
    <div id=inner></div>
</div>
<script>
function parse_url(urlstr) {
    urlstr = urlstr.trim();
    if (!urlstr.startsWith('url("') || !urlstr.endsWith('")'))
        throw 'Unknown url format: ' + urlstr;
    return urlstr.slice(5, -2);
}

function get_bg_url(element) {
    return parse_url(getComputedStyle(element)['background-image']);
}

function get_bg_urls(element) {
    return getComputedStyle(element)['background-image']
            .split(',')
            .map(x => x.trim())
            .map(x => parse_url(x));
}

function assert_base_path_equal(actual, expected) {
    let actual_base = new URL(actual).pathname.split('/').slice(0, -1);
    let expected_base = new URL(expected).pathname.split('/').slice(0, -1);
    assert_equals(actual_base.join('/'), expected_base.join('/'));
}

function assert_base_paths_equal(actual, expected) {
    assert_equals(actual.length, expected.length);
    for (let i = 0; i < actual.length; i++) {
        assert_base_path_equal(actual[i], expected[i]);
    }
}

test(function() {
    target.style = 'background-image: var(--unreg-url);';
    assert_base_path_equal(get_bg_url(target), document.baseURI);
}, 'Unregistered property resolves against document (URL token)');

test(function() {
    target.style = 'background-image: var(--unreg-func);';
    assert_base_path_equal(get_bg_url(target), document.baseURI);
}, 'Unregistered property resolves against document (URL function)');

test(function() {
    target.style = 'background-image: var(--reg-non-inherited-url);';
    assert_base_path_equal(get_bg_url(target), main.sheet.href);
}, 'Registered non-inherited <url> resolves against sheet (URL token)');

test(function() {
    target.style = 'background-image: var(--reg-non-inherited-func);';
    assert_base_path_equal(get_bg_url(target), main.sheet.href);
}, 'Registered non-inherited <url> resolves against sheet (URL function)');

test(function() {
    target.style = 'background-image: var(--reg-inherited-url);';
    assert_base_path_equal(get_bg_url(target), main.sheet.href);
}, 'Registered inherited <url> resolves against sheet (URL token)');

test(function() {
    target.style = 'background-image: var(--reg-inherited-func);';
    assert_base_path_equal(get_bg_url(target), main.sheet.href);
}, 'Registered inherited <url> resolves against sheet (URL function)');

test(function() {
    inner.style = 'background-image: var(--reg-inherited-url);';
    assert_base_path_equal(get_bg_url(inner), main.sheet.href);
}, 'Registered inherited <url> resolves against sheet (Child node, URL token)');

test(function() {
    inner.style = 'background-image: var(--reg-inherited-func);';
    assert_base_path_equal(get_bg_url(inner), main.sheet.href);
}, 'Registered inherited <url> resolves against sheet (Child node, URL function)');

test(function() {
    target.style = 'background-image: var(--reg-ref-to-unreg-url);';
    assert_base_path_equal(get_bg_url(target), main.sheet.href);
}, 'Registered property with unregistered var reference resolves against sheet (URL token)');

test(function() {
    target.style = 'background-image: var(--reg-ref-to-unreg-func);';
    assert_base_path_equal(get_bg_url(target), main.sheet.href);
}, 'Registered property with unregistered var reference resolves against sheet. (URL function)');

test(function() {
    target.style = 'background-image: var(--reg-ref-to-reg-url);';
    assert_base_path_equal(get_bg_url(target), alt.sheet.href);
}, 'Registered property with registered var reference resolves against sheet of referenced property (URL token)');

test(function() {
    target.style = 'background-image: var(--reg-ref-to-reg-func);';
    assert_base_path_equal(get_bg_url(target), alt.sheet.href);
}, 'Registered property with registered var reference resolves against sheet of referenced property (URL function)');

test(function() {
    target.style = 'background-image: var(--unreg-ref-to-reg-url);';
    assert_base_path_equal(get_bg_url(target), alt.sheet.href);
}, 'Unregistered property with registered var reference resolves against sheet of referenced property (URL token)');

test(function() {
    target.style = 'background-image: var(--unreg-ref-to-reg-func);';
    assert_base_path_equal(get_bg_url(target), alt.sheet.href);
}, 'Unregistered property with registered var reference resolves against sheet of referenced property (URL function)');

test(function() {
    target.style = 'background-image: var(--unreg-multi-ref-to-reg-urls);';
    assert_base_paths_equal(get_bg_urls(target), [main.sheet.href, alt.sheet.href]);
}, 'Multiple (registered) var reference resolve against respective sheets (URL token)');

test(function() {
    target.style = 'background-image: var(--unreg-multi-ref-to-reg-funcs);';
    assert_base_paths_equal(get_bg_urls(target), [main.sheet.href, alt.sheet.href]);
}, 'Multiple (registered) var reference resolve against respective sheets (URL function)');

test(function() {
    target.style = 'background-image: var(--reg-utf16be-url);';
    assert_base_path_equal(get_bg_url(target), main_utf16be.sheet.href);
}, 'Registered UTF16BE-encoded var reference resolve against sheet (URL token)');

test(function() {
    target.style = 'background-image: var(--reg-utf16be-func);';
    assert_base_path_equal(get_bg_url(target), main_utf16be.sheet.href);
}, 'Registered UTF16BE-encoded var reference resolve against sheet (URL function)');

</script>