Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add CSS @nest tests #28908

Merged
merged 11 commits into from
Aug 6, 2021
Merged

Add CSS @nest tests #28908

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
12830bd
[css-nesting-1] basic test
argyleink May 7, 2021
11ac196
update file names
argyleink May 7, 2021
ffb8ad6
adds @nest test
argyleink May 7, 2021
9c1a815
fixes ref
argyleink May 7, 2021
cb099b4
moving to single file, added 4 tests with refs
argyleink May 10, 2021
d8d4071
setup for scripted nesting tests
argyleink May 13, 2021
83393b9
adds more tests, adds spec examples
argyleink Jun 24, 2021
40c5124
makes note about comparing strings vs crawling objects
argyleink Jun 24, 2021
b75986f
syntax updates per https://github.com/w3c/csswg-drafts/pull/6483
argyleink Jul 28, 2021
eeef499
remove control test
argyleink Jul 28, 2021
8c36037
pacify linter
argyleink Jul 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions css/selectors/nesting-parsing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
81 changes: 81 additions & 0 deletions css/selectors/nesting-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
97 changes: 97 additions & 0 deletions css/selectors/nesting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>