mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-25 09:00:22 +00:00
Tests: Import a couple of CSS nesting tests from WPT
This is partly to check that importing ref tests works, and that I didn't break the text-test import.
This commit is contained in:
Sam Atkins
Tim Ledbetter
parent
7a5b38d577
commit
f5d67cefc1
Notes:
github-actions[bot]
2024-11-05 17:59:20 +00:00
Author: https://github.com/AtkinsSJ Commit: https://github.com/LadybirdBrowser/ladybird/commit/f5d67cefc19 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2179 Reviewed-by: https://github.com/tcl3 ✅
4 changed files with 353 additions and 0 deletions
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Basic nesting</title>
|
||||
<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/">
|
||||
<style>
|
||||
.test {
|
||||
background-color: green;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
body * + * {
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Tests pass if <strong>block is green</strong></p>
|
||||
<div class="test"></div>
|
||||
<div class="test"></div>
|
||||
<div class="test"></div>
|
||||
<div class="test"></div>
|
||||
<div class="test"></div>
|
||||
<div class="test"></div>
|
||||
<div class="test"></div>
|
||||
<div class="test"></div>
|
||||
<div class="test"></div>
|
||||
<div class="test"></div>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Basic 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/nesting-basic-ref.html">
|
||||
<style>
|
||||
.test {
|
||||
background-color: red;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.test-1 {
|
||||
& > div {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.test-2 {
|
||||
& > div {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.test-3 {
|
||||
& .test-3-child {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
span > b {
|
||||
.test-4 section & {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.test-4 section > & {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
& {
|
||||
background-color: red;
|
||||
}
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.test-11 {
|
||||
& {
|
||||
background-color: red;
|
||||
}
|
||||
background-color: green !important;
|
||||
}
|
||||
|
||||
/* & at top level counts as :scope, i.e. the root element here */
|
||||
& .test-12 {
|
||||
background-color: green;
|
||||
}
|
||||
& > .test-12 {
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
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-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>
|
||||
<div class="test test-11"><div></div></div>
|
||||
<div class="test test-12"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
Summary
|
||||
|
||||
Harness status: OK
|
||||
|
||||
Rerun
|
||||
|
||||
Found 13 tests
|
||||
|
||||
13 Fail
|
||||
Details
|
||||
Result Test Name MessageFail CSSStyleRule is a CSSGroupingRule
|
||||
Fail Simple CSSOM manipulation of subrules
|
||||
Fail Simple CSSOM manipulation of subrules 1
|
||||
Fail Simple CSSOM manipulation of subrules 2
|
||||
Fail Simple CSSOM manipulation of subrules 3
|
||||
Fail Simple CSSOM manipulation of subrules 4
|
||||
Fail Simple CSSOM manipulation of subrules 5
|
||||
Fail Simple CSSOM manipulation of subrules 6
|
||||
Fail Simple CSSOM manipulation of subrules 7
|
||||
Fail Simple CSSOM manipulation of subrules 8
|
||||
Fail Simple CSSOM manipulation of subrules 9
|
||||
Fail Simple CSSOM manipulation of subrules 10
|
||||
Fail Mutating the selectorText of outer rule invalidates inner rules
|
||||
188
Tests/LibWeb/Text/input/wpt-import/css/css-nesting/cssom.html
Normal file
188
Tests/LibWeb/Text/input/wpt-import/css/css-nesting/cssom.html
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
<!doctype html>
|
||||
<title>Simple CSSOM manipulation of subrules</title>
|
||||
<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org">
|
||||
<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="ss"></style>
|
||||
|
||||
<script>
|
||||
test(() => {
|
||||
assert_equals(CSSStyleRule.__proto__, CSSGroupingRule);
|
||||
}, "CSSStyleRule is a CSSGroupingRule");
|
||||
|
||||
test(() => {
|
||||
let [ss] = document.styleSheets;
|
||||
assert_equals(ss.cssRules.length, 0);
|
||||
ss.insertRule('.a { color: red; }');
|
||||
assert_equals(ss.cssRules.length, 1);
|
||||
assert_equals(ss.cssRules[0].cssText, '.a { color: red; }');
|
||||
|
||||
// Test inserting sub-cssRules, at various positions.
|
||||
ss.cssRules[0].insertRule('& .b { color: green; }');
|
||||
ss.cssRules[0].insertRule('& .c { color: blue; }', 1);
|
||||
ss.cssRules[0].insertRule('& .d { color: hotpink; }', 1);
|
||||
assert_equals(ss.cssRules[0].cssText,
|
||||
`.a {
|
||||
color: red;
|
||||
& .b { color: green; }
|
||||
& .d { color: hotpink; }
|
||||
& .c { color: blue; }
|
||||
}`, 'inserting should work');
|
||||
|
||||
// Test deleting a rule.
|
||||
ss.cssRules[0].deleteRule(1);
|
||||
assert_equals(ss.cssRules[0].cssText,
|
||||
`.a {
|
||||
color: red;
|
||||
& .b { color: green; }
|
||||
& .c { color: blue; }
|
||||
}`, 'deleting should work');
|
||||
});
|
||||
|
||||
// Test that out-of-bounds throws exceptions and does not affect the stylesheet.
|
||||
const sampleSheetText =
|
||||
`.a {
|
||||
color: red;
|
||||
& .b { color: green; }
|
||||
& .c { color: blue; }
|
||||
}`;
|
||||
|
||||
test(() => {
|
||||
document.getElementById('ss').innerHTML = sampleSheetText;
|
||||
let [ss] = document.styleSheets;
|
||||
assert_throws_dom('IndexSizeError', () => { ss.cssRules[0].insertRule('& .broken {}', 3); });
|
||||
assert_equals(ss.cssRules[0].cssText, sampleSheetText, 'unchanged after no-insert');
|
||||
});
|
||||
|
||||
test(() => {
|
||||
document.getElementById('ss').innerHTML = sampleSheetText;
|
||||
let [ss] = document.styleSheets;
|
||||
assert_throws_dom('IndexSizeError', () => { ss.cssRules[0].insertRule('& .broken {}', -1); });
|
||||
assert_equals(ss.cssRules[0].cssText, sampleSheetText, 'unchanged after no-insert');
|
||||
});
|
||||
|
||||
test(() => {
|
||||
document.getElementById('ss').innerHTML = sampleSheetText;
|
||||
let [ss] = document.styleSheets;
|
||||
assert_throws_dom('IndexSizeError', () => { ss.cssRules[0].deleteRule(5); });
|
||||
assert_equals(ss.cssRules[0].cssText, sampleSheetText, 'unchanged after no-delete');
|
||||
});
|
||||
|
||||
test(() => {
|
||||
document.getElementById('ss').innerHTML = sampleSheetText;
|
||||
let [ss] = document.styleSheets;
|
||||
assert_equals(ss.cssRules[0].cssRules[2], undefined, 'subscript out-of-bounds returns undefined');
|
||||
assert_equals(ss.cssRules[0].cssRules.item(2), null, 'item() out-of-bounds returns null');
|
||||
assert_equals(ss.cssRules[0].cssText, sampleSheetText, 'unchanged after no-access');
|
||||
});
|
||||
|
||||
// Test that inserting an invalid rule throws an exception.
|
||||
test(() => {
|
||||
document.getElementById('ss').innerHTML = sampleSheetText;
|
||||
let [ss] = document.styleSheets;
|
||||
let exception;
|
||||
assert_throws_dom('SyntaxError', () => { ss.cssRules[0].insertRule('% {}'); });
|
||||
assert_equals(ss.cssRules[0].cssText, sampleSheetText, 'unchanged after invalid rule');
|
||||
});
|
||||
|
||||
// Test that we can get out single rule through .cssRules.
|
||||
test(() => {
|
||||
document.getElementById('ss').innerHTML = sampleSheetText;
|
||||
let [ss] = document.styleSheets;
|
||||
assert_equals(ss.cssRules[0].cssRules[1].cssText, '& .c { color: blue; }');
|
||||
});
|
||||
|
||||
// Test that we can insert a @supports rule, that it serializes in the right place
|
||||
// and has the right parent. Note that the indentation is broken per-spec.
|
||||
test(() => {
|
||||
document.getElementById('ss').innerHTML = sampleSheetText;
|
||||
let [ss] = document.styleSheets;
|
||||
ss.cssRules[0].insertRule('@supports selector(&) { & div { font-size: 10px; }}', 1);
|
||||
assert_equals(ss.cssRules[0].cssText,
|
||||
`.a {
|
||||
color: red;
|
||||
& .b { color: green; }
|
||||
@supports selector(&) {
|
||||
& div { font-size: 10px; }
|
||||
}
|
||||
& .c { color: blue; }
|
||||
}`, '@supports is added');
|
||||
|
||||
assert_equals(ss.cssRules[0].cssRules[1].parentRule, ss.cssRules[0]);
|
||||
ss.cssRules[0].deleteRule(1);
|
||||
assert_equals(ss.cssRules[0].cssText, sampleSheetText);
|
||||
});
|
||||
|
||||
// Nested rules are not part of declaration lists, and thus should not
|
||||
// be possible to insert with .style.
|
||||
test(() => {
|
||||
document.getElementById('ss').innerHTML = sampleSheetText;
|
||||
let [ss] = document.styleSheets;
|
||||
ss.cssRules[0].style = 'color: olivedrab; &.d { color: peru; }';
|
||||
assert_equals(ss.cssRules[0].cssText,
|
||||
`.a {
|
||||
color: olivedrab;
|
||||
& .b { color: green; }
|
||||
& .c { color: blue; }
|
||||
}`, 'color is changed, new rule is ignored');
|
||||
});
|
||||
|
||||
test(() => {
|
||||
document.getElementById('ss').innerHTML = sampleSheetText;
|
||||
let [ss] = document.styleSheets;
|
||||
ss.cssRules[0].cssRules[0].selectorText = 'div.b .c &'; // Allowed
|
||||
ss.cssRules[0].cssRules[1].selectorText = '.c div.b &, div &'; // Allowed.
|
||||
ss.cssRules[0].insertRule('div & {}'); // Allowed.
|
||||
assert_equals(ss.cssRules[0].cssText,
|
||||
`.a {
|
||||
color: red;
|
||||
div & { }
|
||||
div.b .c & { color: green; }
|
||||
.c div.b &, div & { color: blue; }
|
||||
}`, 'selectorText and insertRule');
|
||||
});
|
||||
|
||||
// Rules that are dropped in forgiving parsing but that contain &,
|
||||
// must still be serialized out as they were.
|
||||
test(() => {
|
||||
const text = '.a { :is(!& .foo, .b) { color: green; } }';
|
||||
document.getElementById('ss').innerHTML = text;
|
||||
let [ss] = document.styleSheets;
|
||||
assert_equals(ss.cssRules[0].cssText,
|
||||
`.a {
|
||||
:is(!& .foo, .b) { color: green; }
|
||||
}`, 'invalid rule containing ampersand is kept in serialization');
|
||||
});
|
||||
|
||||
test((t) => {
|
||||
let main = document.createElement('main');
|
||||
main.innerHTML = `
|
||||
<style>
|
||||
.a {
|
||||
& { z-index:1; }
|
||||
& #inner1 { z-index:1; }
|
||||
.stuff, :is(&) #inner2 { z-index:1; }
|
||||
}
|
||||
</style>
|
||||
<div id="outer" class="b">
|
||||
<div id="inner1"></div>
|
||||
<div id="inner2"></div>
|
||||
</div>
|
||||
`;
|
||||
document.documentElement.append(main);
|
||||
t.add_cleanup(() => main.remove());
|
||||
|
||||
assert_equals(getComputedStyle(outer).zIndex, 'auto');
|
||||
assert_equals(getComputedStyle(inner1).zIndex, 'auto');
|
||||
assert_equals(getComputedStyle(inner2).zIndex, 'auto');
|
||||
|
||||
// .a => .b
|
||||
main.firstElementChild.sheet.cssRules[0].selectorText = '.b';
|
||||
|
||||
assert_equals(getComputedStyle(outer).zIndex, '1');
|
||||
assert_equals(getComputedStyle(inner1).zIndex, '1');
|
||||
assert_equals(getComputedStyle(inner2).zIndex, '1');
|
||||
}, 'Mutating the selectorText of outer rule invalidates inner rules');
|
||||
</script>
|
||||
Loading…
Reference in a new issue