url-resolution.html (6107B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#relative-urls" /> 3 <meta name="assert" content="This test verifies that relative URLs in registered properties resolve correctly" /> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <script src="support/main/main.js"></script> 8 <script src="support/alt/alt.js"></script> 9 <link id="main" rel="stylesheet" type="text/css" href="support/main/main.css" /> 10 <link id="main_utf16be" rel="stylesheet" type="text/css" href="support/main/main.utf16be.css" /> 11 <link id="alt" rel="stylesheet" type="text/css" href="support/alt/alt.css" /> 12 <div id=target> 13 <div id=inner></div> 14 </div> 15 <script> 16 function parse_url(urlstr) { 17 urlstr = urlstr.trim(); 18 if (!urlstr.startsWith('url("') || !urlstr.endsWith('")')) 19 throw 'Unknown url format: ' + urlstr; 20 return urlstr.slice(5, -2); 21 } 22 23 function get_bg_url(element) { 24 return parse_url(getComputedStyle(element)['background-image']); 25 } 26 27 function get_bg_urls(element) { 28 return getComputedStyle(element)['background-image'] 29 .split(',') 30 .map(x => x.trim()) 31 .map(x => parse_url(x)); 32 } 33 34 function assert_base_path_equal(actual, expected) { 35 let actual_base = new URL(actual).pathname.split('/').slice(0, -1); 36 let expected_base = new URL(expected).pathname.split('/').slice(0, -1); 37 assert_equals(actual_base.join('/'), expected_base.join('/')); 38 } 39 40 function assert_base_paths_equal(actual, expected) { 41 assert_equals(actual.length, expected.length); 42 for (let i = 0; i < actual.length; i++) { 43 assert_base_path_equal(actual[i], expected[i]); 44 } 45 } 46 47 test(function() { 48 target.style = 'background-image: var(--unreg-url);'; 49 assert_base_path_equal(get_bg_url(target), document.baseURI); 50 }, 'Unregistered property resolves against document (URL token)'); 51 52 test(function() { 53 target.style = 'background-image: var(--unreg-func);'; 54 assert_base_path_equal(get_bg_url(target), document.baseURI); 55 }, 'Unregistered property resolves against document (URL function)'); 56 57 test(function() { 58 target.style = 'background-image: var(--reg-non-inherited-url);'; 59 assert_base_path_equal(get_bg_url(target), main.sheet.href); 60 }, 'Registered non-inherited <url> resolves against sheet (URL token)'); 61 62 test(function() { 63 target.style = 'background-image: var(--reg-non-inherited-func);'; 64 assert_base_path_equal(get_bg_url(target), main.sheet.href); 65 }, 'Registered non-inherited <url> resolves against sheet (URL function)'); 66 67 test(function() { 68 target.style = 'background-image: var(--reg-inherited-url);'; 69 assert_base_path_equal(get_bg_url(target), main.sheet.href); 70 }, 'Registered inherited <url> resolves against sheet (URL token)'); 71 72 test(function() { 73 target.style = 'background-image: var(--reg-inherited-func);'; 74 assert_base_path_equal(get_bg_url(target), main.sheet.href); 75 }, 'Registered inherited <url> resolves against sheet (URL function)'); 76 77 test(function() { 78 inner.style = 'background-image: var(--reg-inherited-url);'; 79 assert_base_path_equal(get_bg_url(inner), main.sheet.href); 80 }, 'Registered inherited <url> resolves against sheet (Child node, URL token)'); 81 82 test(function() { 83 inner.style = 'background-image: var(--reg-inherited-func);'; 84 assert_base_path_equal(get_bg_url(inner), main.sheet.href); 85 }, 'Registered inherited <url> resolves against sheet (Child node, URL function)'); 86 87 test(function() { 88 target.style = 'background-image: var(--reg-ref-to-unreg-url);'; 89 assert_base_path_equal(get_bg_url(target), main.sheet.href); 90 }, 'Registered property with unregistered var reference resolves against sheet (URL token)'); 91 92 test(function() { 93 target.style = 'background-image: var(--reg-ref-to-unreg-func);'; 94 assert_base_path_equal(get_bg_url(target), main.sheet.href); 95 }, 'Registered property with unregistered var reference resolves against sheet. (URL function)'); 96 97 test(function() { 98 target.style = 'background-image: var(--reg-ref-to-reg-url);'; 99 assert_base_path_equal(get_bg_url(target), alt.sheet.href); 100 }, 'Registered property with registered var reference resolves against sheet of referenced property (URL token)'); 101 102 test(function() { 103 target.style = 'background-image: var(--reg-ref-to-reg-func);'; 104 assert_base_path_equal(get_bg_url(target), alt.sheet.href); 105 }, 'Registered property with registered var reference resolves against sheet of referenced property (URL function)'); 106 107 test(function() { 108 target.style = 'background-image: var(--unreg-ref-to-reg-url);'; 109 assert_base_path_equal(get_bg_url(target), alt.sheet.href); 110 }, 'Unregistered property with registered var reference resolves against sheet of referenced property (URL token)'); 111 112 test(function() { 113 target.style = 'background-image: var(--unreg-ref-to-reg-func);'; 114 assert_base_path_equal(get_bg_url(target), alt.sheet.href); 115 }, 'Unregistered property with registered var reference resolves against sheet of referenced property (URL function)'); 116 117 test(function() { 118 target.style = 'background-image: var(--unreg-multi-ref-to-reg-urls);'; 119 assert_base_paths_equal(get_bg_urls(target), [main.sheet.href, alt.sheet.href]); 120 }, 'Multiple (registered) var reference resolve against respective sheets (URL token)'); 121 122 test(function() { 123 target.style = 'background-image: var(--unreg-multi-ref-to-reg-funcs);'; 124 assert_base_paths_equal(get_bg_urls(target), [main.sheet.href, alt.sheet.href]); 125 }, 'Multiple (registered) var reference resolve against respective sheets (URL function)'); 126 127 test(function() { 128 target.style = 'background-image: var(--reg-utf16be-url);'; 129 assert_base_path_equal(get_bg_url(target), main_utf16be.sheet.href); 130 }, 'Registered UTF16BE-encoded var reference resolve against sheet (URL token)'); 131 132 test(function() { 133 target.style = 'background-image: var(--reg-utf16be-func);'; 134 assert_base_path_equal(get_bg_url(target), main_utf16be.sheet.href); 135 }, 'Registered UTF16BE-encoded var reference resolve against sheet (URL function)'); 136 137 </script>