| <!doctype html> |
| <title>CSS Selectors: :is() and :where() error recovery</title> |
| <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> |
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3676"> |
| <link rel="help" href="https://drafts.csswg.org/selectors-4/#matches"> |
| <link rel="help" href="https://drafts.csswg.org/selectors-4/#zero-matches"> |
| <link rel="help" href="https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style id="test-sheet"> |
| random-selector { color: blue; } |
| </style> |
| <div id="test-div"></div> |
| <script> |
| let rule = document.getElementById("test-sheet").sheet.cssRules[0]; |
| test(function() { |
| for (let pseudo of ["is", "where"]) { |
| rule.selectorText = "random-selector"; |
| let invalidSelector = `:${pseudo}(:total-nonsense)`; |
| rule.selectorText = invalidSelector; |
| assert_not_equals( |
| rule.selectorText, |
| "random-selector", |
| "Should've parsed", |
| ); |
| assert_not_equals( |
| rule.selectorText, |
| invalidSelector, |
| "Should not be considered valid and parsed as-is", |
| ); |
| let emptyList = `:${pseudo}()`; |
| assert_equals( |
| rule.selectorText, |
| emptyList, |
| "Should be serialized as an empty selector-list", |
| ); |
| assert_equals(document.querySelector(emptyList), null, "Should never match, but should parse"); |
| for (let mixedList of [ |
| `:${pseudo}(:total-nonsense, #test-div)`, |
| `:${pseudo}(:total-nonsense and-more-stuff, #test-div)`, |
| `:${pseudo}(weird-token || and-more-stuff, #test-div)`, |
| ]) { |
| rule.selectorText = mixedList; |
| assert_equals( |
| rule.selectorText, |
| `:${pseudo}(#test-div)`, |
| `${mixedList}: Should ignore invalid selectors`, |
| ); |
| let testDiv = document.getElementById("test-div"); |
| assert_equals(document.querySelector(mixedList), testDiv, "Should correctly match"); |
| assert_equals(getComputedStyle(testDiv).color, "rgb(0, 0, 255)", "test element should be blue"); |
| } |
| } |
| }); |
| </script> |
