is-where-error-recovery.html (2024B)
1 <!doctype html> 2 <title>CSS Selectors: :is() and :where() error recovery</title> 3 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3676"> 5 <link rel="help" href="https://drafts.csswg.org/selectors-4/#matches"> 6 <link rel="help" href="https://drafts.csswg.org/selectors-4/#zero-matches"> 7 <link rel="help" href="https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style id="test-sheet"> 11 random-selector { color: blue; } 12 </style> 13 <div id="test-div"></div> 14 <script> 15 let rule = document.getElementById("test-sheet").sheet.cssRules[0]; 16 test(function() { 17 for (let pseudo of ["is", "where"]) { 18 rule.selectorText = "random-selector"; 19 let invalidSelector = `:${pseudo}(:total-nonsense)`; 20 rule.selectorText = invalidSelector; 21 assert_not_equals( 22 rule.selectorText, 23 "random-selector", 24 "Should've parsed", 25 ); 26 assert_equals( 27 rule.selectorText, 28 invalidSelector, 29 "Should be parsed as-is (but not be considered valid)", 30 ); 31 assert_equals(document.querySelector(rule.selectorText), null, "Should never match, but should parse"); 32 for (let mixedList of [ 33 `:${pseudo}(:total-nonsense, #test-div)`, 34 `:${pseudo}(:total-nonsense and-more-stuff, #test-div)`, 35 `:${pseudo}(weird-token || and-more-stuff, #test-div)`, 36 ]) { 37 rule.selectorText = mixedList; 38 assert_equals( 39 rule.selectorText, 40 mixedList, 41 `${mixedList}: Should parse invalid selectors`, 42 ); 43 let testDiv = document.getElementById("test-div"); 44 assert_equals(document.querySelector(mixedList), testDiv, "Should correctly match"); 45 assert_equals(getComputedStyle(testDiv).color, "rgb(0, 0, 255)", "test element should be blue"); 46 } 47 } 48 }); 49 </script>