Add CSS @nest tests (#28908)

web-platform-tests · Aug 6, 2021 · 8558f84 · 8558f84
1 parent 8727e24
commit 8558f84
Show file tree

Hide file tree

Showing 3 changed files with 220 additions and 0 deletions.
diff --git a/css/selectors/nesting-parsing.html b/css/selectors/nesting-parsing.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<title>CSS Selectors @nest parsing</title>
+<link rel="author" title="Adam Argyle" href="mailto:[email protected]">
+<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>
diff --git a/css/selectors/nesting-ref.html b/css/selectors/nesting-ref.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<title>@nest | basic</title>
+<link rel="author" title="Adam Argyle" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
+<style>
+  .test {
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    display: grid;
+  }
+
+  .test-1 > div {
+    background-color: green;
+  }
+
+  .test-2 > div {
+    background-color: green;
+  }
+
+  .test-3 .test-3-child {
+    background-color: green;
+  }
+
+  .test-4 section > span > b {
+    display: inline-block;
+    background-color: green;
+    width: 100%;
+    height: 100%;
+  }
+
+  @media (min-width: 50px) {
+    .test-5 > div {
+      background-color: green;
+    }
+  }
+
+  .test-6.test {
+    background-color: green;
+  }
+
+  :is(.test-7, .t7-) + .test-7-child,
+  :is(.test-7, .t7-).t7-- {
+    background-color: green;
+  }
+
+  .test-8 {
+    background-color: green;
+  }
+
+  .test-9:is(.t9-, .test-9.t9--) {
+    background-color: green;
+  }
+
+  @supports (display: grid) {
+    .test-10 {
+      background-color: green;
+    }
+  }
+
+  body * + * {
+    margin-top: 8px;
+  }
+</style>
+<body>
+  <p>Tests pass if <strong>block is green</strong></p>
+  <div class="test test-1"><div></div></div>
+  <div class="test test-2"><div></div></div>
+  <div class="test test-3"><div class="test-3-child"></div></div>
+  <div class="test test-4">
+    <section>
+      <span><b></b></span>
+    </section>
+  </div>
+  <div class="test test-5"><div></div></div>
+  <div class="test test-6"><div></div></div>
+  <div class="test t7- t7--"><div class="test-7-child"></div></div>
+  <div class="test test-8"><div></div></div>
+  <div class="test test-9 t9-- t9-"><div></div></div>
+  <div class="test test-10"><div></div></div>
+</body>
diff --git a/css/selectors/nesting.html b/css/selectors/nesting.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<title>@nest | basic</title>
+<link rel="author" title="Adam Argyle" href="mailto:[email protected]">
+<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
+<link rel="match" href="nesting-ref.html">
+<style>
+  .test {
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    display: grid;
+  }
+
+  .test-1 {
+    & > div {
+      background-color: green;
+    }
+  }
+
+  .test-2 {
+    @nest & > div {
+      background-color: green;
+    }
+  }
+
+  .test-3 {
+    @nest & .test-3-child {
+      background-color: green;
+    }
+  }
+
+  span > b {
+    @nest .test-4 section > & {
+      display: inline-block;
+      background-color: green;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .test-5 {
+    @media (min-width: 50px) {
+      background-color: green;
+    }
+  }
+
+  .test-6 {
+    &.test {
+      background-color: green;
+    }
+  }
+
+  .test-7, .t7- {
+    & + .test-7-child, &.t7-- {
+      background-color: green;
+    }
+  }
+
+  .test-8 {
+    & {
+      background-color: green;
+    }
+  }
+
+  .test-9 {
+    &:is(.t9-, &.t9--) {
+      background-color: green;
+    }
+  }
+
+  .test-10 {
+    @supports (display: grid) {
+      background-color: green;
+    }
+  }
+
+  body * + * {
+    margin-top: 8px;
+  }
+</style>
+<body>
+  <p>Tests pass if <strong>block is green</strong></p>
+  <div class="test test-1"><div></div></div>
+  <div class="test test-2"><div></div></div>
+  <div class="test test-3"><div class="test-3-child"></div></div>
+  <div class="test test-4">
+    <section>
+      <span><b></b></span>
+    </section>
+  </div>
+  <div class="test test-5"><div></div></div>
+  <div class="test test-6"><div></div></div>
+  <div class="test t7- t7--"><div class="test-7-child"></div></div>
+  <div class="test test-8"><div></div></div>
+  <div class="test test-9 t9-- t9-"><div></div></div>
+  <div class="test test-10"><div></div></div>
+</body>