rellist-feature-detection.html (4323B)
1 <!DOCTYPE html> 2 <title>Test relList attribute</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script> 6 let link_support_table = {}; 7 // https://html.spec.whatwg.org/multipage/links.html#linkTypes 8 link_support_table['link'] = { 9 supported : ['modulepreload', 'preload', 'preconnect', 'dns-prefetch', 10 'stylesheet', 'icon', 'alternate', 'prefetch', 11 'prerender', 'next', 'manifest', 'apple-touch-icon', 12 'apple-touch-icon-precomposed', 'canonical'], 13 unsupported : ['author', 'bookmark', 'external', 'help', 'import', 14 'license', 'nofollow', 'pingback', 'prev', 'search', 15 'tag', 'noreferrer', 'noopener'] 16 }; 17 link_support_table['a'] = { 18 supported : ['noreferrer', 'noopener', 'opener'], 19 unsupported : ['author', 'bookmark', 'external', 'help', 'license', 20 'nofollow', 'pingback', 'prev', 'search', 'tag', 21 'modulepreload', 'preload', 'preconnect', 'dns-prefetch', 22 'stylesheet', 'import', 'icon', 'alternate', 'prefetch', 23 'prerender', 'next', 'manifest', 'apple-touch-icon', 24 'apple-touch-icon-precomposed', 'canonical'] 25 }; 26 link_support_table['area'] = link_support_table['a']; 27 link_support_table['form'] = link_support_table['a']; 28 29 function test_rellist(tag_name) { 30 const rel_table = link_support_table[tag_name]; 31 const element = document.createElement(tag_name); 32 let tag = element.tagName; 33 // Test that setting rel is also setting relList, for both 34 // valid and invalid values. 35 element.rel = 'whatever'; 36 assert_true(element.relList.contains('whatever'), 'tag = ' + tag + ', setting rel must work'); 37 element.rel = 'prefetch'; 38 assert_true(element.relList.contains('prefetch'), 'tag = ' + tag + ', setting rel must work'); 39 // Test that add() works. 40 element.relList.add('preloadwhatever'); 41 assert_equals(element.rel, 'prefetch preloadwhatever', 'tag = ' + tag + ', add must work'); 42 assert_true(element.relList.contains('preloadwhatever'), 'tag = ' + tag + ', add must work'); 43 // Test that remove() works. 44 element.relList.remove('preloadwhatever'); 45 assert_equals(element.rel, 'prefetch', 'tag = ' + tag + ', remove must work'); 46 assert_false(element.relList.contains('preloadwhatever'), 'tag = ' + tag + ', remove must work'); 47 // Test that toggle() works. 48 element.relList.toggle('prefetch', false); 49 assert_equals(element.rel, '', 'tag = ' + tag + ', toggle must work'); 50 element.relList.toggle('prefetch', true); 51 assert_equals(element.rel, 'prefetch', 'tag = ' + tag + ', toggle must work'); 52 // Test that replace() works. 53 element.relList.replace('prefetch', 'first'); 54 assert_equals(element.rel, 'first', 'tag = ' + tag + ', replace must work'); 55 // Test that indexed item getter works. 56 element.relList.add('second'); 57 assert_equals(element.relList.length, 2, 'tag = ' + tag + ', relList length must be correct'); 58 assert_equals(element.relList[0], 'first', 'tag = ' + tag + ', relList indexed item must work'); 59 assert_equals(element.relList[1], 'second', 'tag = ' + tag + ', relList indexed item must work'); 60 // Test that relList is [SameObject]. 61 let savedRelList = element.relList; 62 element.rel = 'something'; 63 assert_equals(element.relList, savedRelList, 'tag = ' + tag + ', SameObject must work'); 64 65 // Test that supports() is returning true for valid values 66 // and false for invalid ones. 67 let supported = rel_table['supported']; 68 for (let link_type in supported) { 69 assert_true(element.relList.supports(supported[link_type]), 'tag = ' + tag + ', link type = ' + supported[link_type] + ' must be supported'); 70 assert_true(element.relList.supports(supported[link_type].toUpperCase()), 'tag = ' + tag + ', link type = ' + supported[link_type].toUpperCase() + ' must be supported'); 71 } 72 let unsupported = rel_table['unsupported']; 73 for (let link_type in unsupported) { 74 assert_false(element.relList.supports(unsupported[link_type]), 'tag = ' + tag + ', link type = ' + unsupported[link_type] + ' must be unsupported'); 75 } 76 } 77 78 ['link', 'a', 'area', 'form'].forEach(tag_name => { 79 test( 80 () => test_rellist(tag_name), 81 `Make sure that relList based feature detection is working for <${tag_name}>` 82 ); 83 }); 84 </script>