<!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 > .bar { color: green; }\n}`,
`.foo {\n > & .bar { color: green; }\n}`,
`.foo {\n + .bar & { color: green; }\n}`,
`.foo {\n .test > & .bar { color: green; }\n}`,
`.foo {\n + .bar, .foo, > .lol { 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>