css/selectors/nesting-parsing.html

<!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>