mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-05-02 20:42:11 +02:00
Tests: Import all WPT css/css-nesting tests
A few are skipped for now: - A few ref tests fail - Crash tests are not supported by our runner and time out - top-level-is-scope.html crashes and needs further investigation
This commit is contained in:
Sam Atkins
committed by
Andreas Kling
Andreas Kling
parent
6bb1ffbcd3
commit
b0e79ce549
Notes:
github-actions[bot]
2024-11-07 14:12:28 +00:00
Author: https://github.com/AtkinsSJ Commit: https://github.com/LadybirdBrowser/ladybird/commit/b0e79ce549b Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2202
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<title>Properties in nested conditional rules</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-nesting/conditional-properties-ref.html">
|
||||
<style>
|
||||
.test {
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.test-5 {
|
||||
@media (min-width: 50px) {
|
||||
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-5"><div></div></div>
|
||||
<div class="test test-10"><div></div></div>
|
||||
</body>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<title>Conditional rules with nesting</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-nesting/conditional-rules-ref.html">
|
||||
<style>
|
||||
.test {
|
||||
background-color: red;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.test-5 {
|
||||
@media (min-width: 10px) {
|
||||
& {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.test-6 {
|
||||
@media (min-width: 10px) {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.test-10 {
|
||||
@supports (display: grid) {
|
||||
& {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.test-11 {
|
||||
@layer {
|
||||
& {
|
||||
background-color: green !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.test-12 {
|
||||
@scope (&) {
|
||||
:scope {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
container-type: inline-size;
|
||||
}
|
||||
.test-13 {
|
||||
@container (width >= 0px) {
|
||||
& {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body * + * {
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Tests pass if <strong>block is green</strong></p>
|
||||
<div class="test test-5"></div>
|
||||
<div class="test test-6"></div>
|
||||
<div class="test test-10"></div>
|
||||
<div class="test test-11"></div>
|
||||
<div class="test test-12"><div class="test-12"></div></div>
|
||||
<div class="test"><div class="test-13"></div></div>
|
||||
</body>
|
||||
@@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<title>Nested has shouldn't match</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/selectors/#relational">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1864647">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9600">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-nesting/has-nesting-ref.html">
|
||||
<style>
|
||||
ul { background: green }
|
||||
|
||||
li:has(strong) {
|
||||
display: none;
|
||||
|
||||
:has(> &) {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<ul>
|
||||
<li><strong>Foo</strong></li>
|
||||
<li>Bar</li>
|
||||
</ul>
|
||||
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>:host and nesting (basic) </title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-nesting/#nest-selector">
|
||||
<link rel="match" href="../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="host"></div>
|
||||
<script>
|
||||
host.attachShadow({mode: "open"}).innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
.nested {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="nested"></div>
|
||||
`;
|
||||
</script>
|
||||
@@ -0,0 +1,22 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>:host and nesting (bare declarations)</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-nesting/#nest-selector">
|
||||
<link rel="match" href="../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="host"></div>
|
||||
<script>
|
||||
host.attachShadow({mode: "open"}).innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
@media (width >= 0) {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>:host and nesting (combined with something else)</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-nesting/#nest-selector">
|
||||
<link rel="match" href="../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="host"></div>
|
||||
<script>
|
||||
host.attachShadow({mode: "open"}).innerHTML = `
|
||||
<style>
|
||||
.nested {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
:host(#not-host), #host {
|
||||
.nested {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="nested"></div>
|
||||
`;
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>:host and nesting (combined with something else, bare declarations)</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-nesting/#nest-selector">
|
||||
<link rel="match" href="../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="host"></div>
|
||||
<script>
|
||||
host.attachShadow({mode: "open"}).innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
:host(#not-host), #host {
|
||||
@media (width >= 0) {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
</script>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>:host and nesting (with pseudos)</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-nesting/#nest-selector">
|
||||
<link rel="match" href="../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="host"></div>
|
||||
<script>
|
||||
host.attachShadow({mode: "open"}).innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
</script>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<title>Implicit nesting</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-nesting/implicit-nesting-ref.html">
|
||||
<style>
|
||||
.test {
|
||||
background-color: red;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.test-1 {
|
||||
> div {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.test-2 {
|
||||
.test-2-child {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
.test-2-child {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.test-3-child {
|
||||
background-color: red;
|
||||
}
|
||||
.test-3-child {
|
||||
.test-3 & {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.test-4 {
|
||||
:is(&) {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.test-5 {
|
||||
:is(.test-5, &.does-not-exist) {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.test-6 {
|
||||
> .foo,.test-6-child,+ .bar {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.test-7 {
|
||||
> .foo, .bar, + .test-7-sibling {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.test-8 {
|
||||
> .foo, .test-8-child, + .bar {
|
||||
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 class="test-2-child"></div></div>
|
||||
<div class="test test-3"><div class="test-3-child"></div></div>
|
||||
<div class="test test-4"></div>
|
||||
<div class="test test-5"><div class="test-5"></div></div>
|
||||
<div class="test test-6"><div class="test-6-child"></div></div>
|
||||
<div class="test test-7" style="display:none"></div><div class="test test-7-sibling"></div>
|
||||
<div class="test test-8"><div class="test-8-child"></div></div>
|
||||
</body>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<title>Nest-containing in forgiving parsing</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-nesting/nest-containing-forgiving-ref.html">
|
||||
<style>
|
||||
.test {
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.does-not-exist {
|
||||
:is(.test-1, !&) {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.does-not-exist {
|
||||
:is(.test-2, :unknown(div,&)) {
|
||||
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 class="test test-2"></div>
|
||||
</body>
|
||||
@@ -0,0 +1,18 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Nesting works with bare type selectors</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
|
||||
<link rel="match" href="../../../../expected/wpt-import//css/reference/ref-filled-green-100px-square-only.html">
|
||||
<style>
|
||||
:root {
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div></div>
|
||||
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<title>@supports needs to be consistent with actual nesting support</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org">
|
||||
<link rel="help" href="https://crbug.com/1414012">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-nesting/supports-is-consistent-ref.html">
|
||||
<style>
|
||||
/* This test is expected to pass even if the browser does not support nesting. */
|
||||
@supports selector(&) {
|
||||
p {
|
||||
color: red;
|
||||
& { color: inherit; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if this text is not red</p>
|
||||
</body>
|
||||
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<title>@supports with nesting</title>
|
||||
<link rel="author" title="Matthieu Dubet" href="mailto:m_dubet@apple.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-nesting/supports-rule-ref.html">
|
||||
<style>
|
||||
.test {
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
@supports(not selector(> .test-1)) {
|
||||
.test-1 {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.test {
|
||||
> .test-2 {
|
||||
background-color: green;
|
||||
}
|
||||
@supports (selector(> .test-2)) {
|
||||
> .test-2 {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.test-3 {
|
||||
@supports (selector(&)) {
|
||||
& {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@supports(selector(&)) {
|
||||
.test-4 {
|
||||
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 class="test"><div class="test-2"></div></div>
|
||||
<div class="test test-3"></div>
|
||||
<div class="test test-4"></div>
|
||||
</body>
|
||||
Reference in New Issue
Block a user