syntax.html (4392B)
1 <!doctype html> 2 <title>Selectors: syntax of case-sensitivity attribute selector</title> 3 <link rel="help" href="https://drafts.csswg.org/selectors/#attribute-case"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style></style> 7 <div id=log></div> 8 <div id=test foo="BAR" baz="quux"></div> 9 <iframe id="quirks" src="resources/syntax-quirks.html"></iframe> 10 <iframe id="xml" src="resources/syntax-xml.xhtml"></iframe> 11 <script> 12 setup({explicit_done:true}); 13 var valid = [ 14 "[foo='BAR'] /* sanity check (valid) */", 15 "[baz='quux'] /* sanity check (valid) */", 16 // Case-insensitive selectors. 17 "[foo='bar' i]", 18 "[foo='bar' I]", 19 "[foo=bar i]", 20 '[foo="bar" i]', 21 "[foo='bar'i]", 22 "[foo='bar'i ]", 23 "[foo='bar' i ]", 24 "[foo='bar' /**/ i]", 25 "[foo='bar' i /**/ ]", 26 "[foo='bar'/**/i/**/]", 27 "[foo=bar/**/i]", 28 "[foo='bar'\ti\t] /* \\t */", 29 "[foo='bar'\ni\n] /* \\n */", 30 "[foo='bar'\ri\r] /* \\r */", 31 "[foo='bar' \\i]", 32 "[foo='bar' \\69]", 33 "[foo='bar' \\49]", 34 "[foo~='bar' i]", 35 "[foo^='bar' i]", 36 "[foo$='bar' i]", 37 "[foo*='bar' i]", 38 "[foo|='bar' i]", 39 "[|foo='bar' i]", 40 "[*|foo='bar' i]", 41 // Case-sensitive selectors. 42 "[baz='quux' s]", 43 "[baz='quux' S]", 44 "[baz=quux s]", 45 '[baz="quux" s]', 46 "[baz='quux's]", 47 "[baz='quux's ]", 48 "[baz='quux' s ]", 49 "[baz='quux' /**/ s]", 50 "[baz='quux' s /**/ ]", 51 "[baz='quux'/**/s/**/]", 52 "[baz=quux/**/s]", 53 "[baz='quux'\ts\t] /* \\t */", 54 "[baz='quux'\ns\n] /* \\n */", 55 "[baz='quux'\rs\r] /* \\r */", 56 "[baz='quux' \\s]", 57 "[baz='quux' \\73]", 58 "[baz='quux' \\53]", 59 "[baz~='quux' s]", 60 "[baz^='quux' s]", 61 "[baz$='quux' s]", 62 "[baz*='quux' s]", 63 "[baz|='quux' s]", 64 "[|baz='quux' s]", 65 "[*|baz='quux' s]", 66 ]; 67 var invalid = [ 68 "[foo[ /* sanity check (invalid) */", 69 "[foo='bar' i i]", 70 "[foo i ='bar']", 71 "[foo= i 'bar']", 72 "[i foo='bar']", 73 "[foo='bar' i\u0000] /* \\0 */", 74 "[foo='bar' \u0130]", 75 "[foo='bar' \u0131]", 76 "[foo='bar' ii]", 77 "[foo='bar' ij]", 78 "[foo='bar' j]", 79 "[foo='bar' \\\\i]", 80 "[foo='bar' \\\\69]", 81 "[foo='bar' i()]", 82 "[foo='bar' i ()]", 83 "[foo='bar' () i]", 84 "[foo='bar' (i)]", 85 "[foo='bar' i []]", 86 "[foo='bar' [] i]", 87 "[foo='bar' [i]]", 88 "[foo='bar' i {}]", 89 "[foo='bar' {} i]", 90 "[foo='bar' {i}]", 91 "[foo='bar' 1i]", 92 "[foo='bar' 1]", 93 "[foo='bar' 'i']", 94 "[foo='bar' url(i)]", 95 "[foo='bar' ,i]", 96 "[foo='bar' i,]", 97 "[foo='bar']i", 98 "[foo='bar' |i]", 99 "[foo='bar' \\|i]", 100 "[foo='bar' *|i]", 101 "[foo='bar' \\*|i]", 102 "[foo='bar' *]", 103 "[foo='bar' \\*]", 104 "[foo i]", 105 "[foo/**/i]", 106 ]; 107 var mode = "standards mode"; 108 onload = function() { 109 var quirks = document.getElementById('quirks').contentWindow; 110 var xml = document.getElementById('xml').contentWindow; 111 [window, quirks, xml].forEach(function(global) { 112 var style = global.document.getElementsByTagName('style')[0]; 113 var elm = global.document.getElementById('test'); 114 function clean_slate() { 115 style.textContent = ''; 116 assert_equals(style.sheet.cssRules.length, 0, 'CSSOM was not empty for empty stylesheet'); 117 assert_equals(global.getComputedStyle(elm).visibility, 'visible', 'computed style for empty stylesheet'); 118 } 119 valid.forEach(function(s) { 120 test(function() { 121 clean_slate(); 122 style.textContent = s + ' { visibility:hidden }'; 123 assert_equals(style.sheet.cssRules.length, 1, 'valid rule didn\'t parse into CSSOM'); 124 assert_equals(global.getComputedStyle(elm).visibility, 'hidden', 'valid selector didn\'t match'); 125 }, s + ' in ' + global.mode); 126 test(function() { 127 assert_equals(global.document.querySelector(s), elm, 'valid selector'); 128 }, s + ' with querySelector in ' + global.mode); 129 }); 130 invalid.forEach(function(s) { 131 test(function() { 132 clean_slate(); 133 style.textContent = s + ' { visibility:hidden }'; 134 assert_equals(style.sheet.cssRules.length, 0, 'invalid rule parsed into CSSOM'); 135 assert_equals(global.getComputedStyle(elm).visibility, 'visible', 'invalid selector matched'); 136 }, s + ' in ' + global.mode); 137 test(function() { 138 assert_throws_dom("SyntaxError", global.DOMException, function() { 139 global.document.querySelector(s); 140 }, 'invalid selector'); 141 }, s + ' with querySelector in ' + global.mode); 142 }); 143 }); 144 done(); 145 }; 146 </script>