| <!doctype html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style id="style-container"> |
| :matches(#notthere div, #target) { |
| background-color: red; |
| } |
| |
| /* This selector list is invalid because the attribute flag "invalid" is invalid. */ |
| :matches(#nothere valid, #notthere [invalid="yep" invalid], #target) { |
| background-color: blue; |
| } |
| |
| :matches(#notthere foobar, #target) { |
| color: lime; |
| } |
| |
| /* This selector list is invalid because the attribute flag "u" is invalid. */ |
| :matches(#nothere valid, #notthere [invalid="yep" u], #target) { |
| color: blue; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div id="target" style="display:none;"></div> |
| </body> |
| <script> |
| description('This test verify that invalid case-insenstivie attribute value matching (e.g. [foo=bar i]) do not affect surrounding rules.'); |
| |
| shouldBeEqualToString("getComputedStyle(document.getElementById('target')).color", "rgb(0, 255, 0)"); |
| shouldBeEqualToString("getComputedStyle(document.getElementById('target')).backgroundColor", "rgb(255, 0, 0)"); |
| shouldBe("document.getElementById('style-container').sheet.cssRules.length", "2"); |
| shouldBeEqualToString("document.getElementById('style-container').sheet.cssRules[0].selectorText", ":matches(#notthere div, #target)"); |
| shouldBeEqualToString("document.getElementById('style-container').sheet.cssRules[0].cssText", ":matches(#notthere div, #target) { background-color: red; }"); |
| shouldBeEqualToString("document.getElementById('style-container').sheet.cssRules[1].selectorText", ":matches(#notthere foobar, #target)"); |
| shouldBeEqualToString("document.getElementById('style-container').sheet.cssRules[1].cssText", ":matches(#notthere foobar, #target) { color: lime; }"); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
