| <!doctype html> |
| <title>CSS Selectors parsing</title> |
| <link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> |
| <link rel="help" href="https://drafts.csswg.org/css-nesting-1/"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <style id="test-sheet"></style> |
| <script> |
| let [ss] = document.styleSheets |
| |
| const beforeEach = () => { |
| while (ss.rules.length) |
| ss.removeRule(0) |
| } |
| |
| const testRules = [ |
| `.foo {\n & { color: green; }\n}`, // 🐰 |
| `.foo {\n &.bar { color: green; }\n}`, |
| `.foo {\n & .bar { color: green; }\n}`, |
| `.foo {\n & > .bar { color: green; }\n}`, |
| `.foo {\n &:is(.bar, &.baz) { color: green; }\n}`, |
| `.foo {\n .bar& { color: green; }\n}`, |
| `.foo {\n .bar & { color: green; }\n}`, |
| `.foo {\n .bar > & { color: green; }\n}`, |
| `.foo, .bar {\n & + .baz, &.qux { color: green; }\n}`, |
| `.foo {\n & .bar & .baz & .qux { color: green; }\n}`, |
| `.foo {\n @media (min-width: 50px) { color: green; }\n}`, |
| `main {\n & > section, & > article {\n & > header { color: green; }\n}\n}`, |
| ] |
| |
| testRules.forEach(testRule => { |
| test(function() { |
| beforeEach() |
| ss.insertRule(testRule) |
| // todo? |
| // when parsing is being ready/prototyped, |
| // switch to crawling nested rules instead of comparing text |
| assert_equals(ss.rules[0].cssText, testRule) |
| }, testRule) |
| }) |
| </script> |
