| <!doctype html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style id="style-container"></style> |
| </head> |
| <body> |
| </body> |
| <script> |
| description('Test the parsing of attribute selector with the case-insensitive value flag (e.g. [foo=bar i]). This test covers the most basic cases.'); |
| |
| function testValidSelectorCSSOMSerialization(selectorString, expectedSerializedSelector) { |
| var styleContainer = document.getElementById('style-container'); |
| styleContainer.innerHTML = selectorString + ' { }'; |
| shouldBe("document.getElementById('style-container').sheet.cssRules.length", "1"); |
| if (!expectedSerializedSelector) |
| expectedSerializedSelector = selectorString; |
| shouldBeEqualToString("document.getElementById('style-container').sheet.cssRules[0].selectorText", expectedSerializedSelector); |
| styleContainer.innerHTML = ''; |
| } |
| |
| function testValidSelector(selectorString, expectedSerializedSelector) { |
| shouldNotThrow('document.querySelector("' + selectorString.replace(/"/g, '\\"') + '")'); |
| shouldNotThrow('document.querySelector("' + selectorString.replace(/"/g, '\\"').replace('[', '[*|') + '")'); |
| shouldNotThrow('document.querySelector("' + selectorString.replace(/"/g, '\\"').replace('[', '[|') + '")'); |
| |
| testValidSelectorCSSOMSerialization(selectorString, expectedSerializedSelector); |
| testValidSelectorCSSOMSerialization(selectorString.replace('[', '[|'), expectedSerializedSelector); |
| testValidSelectorCSSOMSerialization(selectorString.replace('[', '[*|'), expectedSerializedSelector.replace('[', '[*|')); |
| } |
| |
| var simpleValidSelectors = [ |
| ['[foo=bar i]', '[foo="bar" i]'], |
| ['[foo="bar" i]', '[foo="bar" i]'], |
| ['[foo~=bar i]', '[foo~="bar" i]'], |
| ['[foo~="bar" i]', '[foo~="bar" i]'], |
| ['[foo|=bar i]', '[foo|="bar" i]'], |
| ['[foo|="bar" i]', '[foo|="bar" i]'], |
| ['[foo^=bar i]', '[foo^="bar" i]'], |
| ['[foo^="bar" i]', '[foo^="bar" i]'], |
| ['[foo$=bar i]', '[foo$="bar" i]'], |
| ['[foo$="bar" i]', '[foo$="bar" i]'], |
| ['[foo*=bar i]', '[foo*="bar" i]'], |
| ['[foo*="bar" i]', '[foo*="bar" i]'] |
| ]; |
| |
| debug("Basic cases of valid selectors."); |
| for (var testCase of simpleValidSelectors) { |
| // The basics: every combinator. |
| testValidSelector(testCase[0], testCase[1]); |
| |
| // Used in function pseudo classes. |
| testValidSelector("foo bar " + testCase[0], "foo bar " + testCase[1]); |
| testValidSelector(":nth-child(2n+1 of " + testCase[0] + ")", ":nth-child(2n+1 of " + testCase[1] + ")"); |
| testValidSelector(":nth-last-child(2n+1 of " + testCase[0] + ")", ":nth-last-child(2n+1 of " + testCase[1] + ")"); |
| testValidSelector(":is(foo, " + testCase[0] + ", bar)", ":is(foo, " + testCase[1] + ", bar)"); |
| testValidSelector(":matches(foo, " + testCase[0] + ", bar)", ":matches(foo, " + testCase[1] + ", bar)"); |
| testValidSelector(":not(" + testCase[0] + ")", ":not(" + testCase[1] + ")"); |
| } |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
