| 12
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
 100
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117
 118
 119
 120
 121
 122
 123
 124
 125
 126
 127
 128
 129
 130
 131
 132
 133
 134
 135
 136
 137
 
 | <!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>
 |