| <!doctype html> |
| <title>CSS Selectors @nest 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 type="module"> |
| let [ss] = document.styleSheets |
| |
| const beforeEach = () => { |
| while (ss.rules.length) |
| ss.removeRule(0) |
| } |
| |
| const testRules = [ |
| `.foo { & { color: green; } }`, // 🐰 |
| `.foo { &.bar { color: green; } }`, |
| `.foo { & .bar { color: green; } }`, |
| `.foo { & > .bar { color: green; } }`, |
| `.foo { &:is(.bar, &.baz) { color: green; } }`, |
| `.foo { @nest .bar& { color: green; } }`, |
| `.foo { @nest .bar & { color: green; } }`, |
| `.foo { @nest .bar > & { color: green; } }`, |
| `.foo, .bar { & + .baz, &.qux { color: green; } }`, |
| `.foo { & .bar & .baz & .qux { color: green; } }`, |
| `.foo { @media (min-width: 50px) { color: green; } }`, |
| `main { & > section, & > article { & > header { color: green; } } }`, |
| ] |
| |
| 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> |
