mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-05-15 15:42:52 +00:00
bea7eec518
With the introduction of the cascade layer, the 5th CSS-wide keyword, `revert-layer`, has been added.
47 lines
1.8 KiB
HTML
47 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<target class="first"></target>
|
|
<target class="second"></target>
|
|
<script src="../include.js"></script>
|
|
<script>
|
|
test(() => {
|
|
// In all test cases, the rule specified as "color: green" should win.
|
|
var testCases = [
|
|
{
|
|
title: 'revert to base',
|
|
style: `
|
|
@layer base, special;
|
|
@layer special { target { color: revert-layer; } target.second { color: green; } }
|
|
@layer base { target { color: green; } target.second { color: red; } }
|
|
`,
|
|
},
|
|
{
|
|
title: 'double revert',
|
|
style: `
|
|
@layer layer1, layer2, layer3;
|
|
@layer layer3 { target { color: revert-layer; } target.second { color: revert-layer; } }
|
|
@layer layer2 { target { color: revert-layer; } target.second { color: green; } }
|
|
@layer layer1 { target { color: green; } target.second { color: revert-layer; } }
|
|
`,
|
|
},
|
|
];
|
|
|
|
for (let testCase of testCases) {
|
|
const styleElement = document.createElement('style');
|
|
styleElement.textContent = testCase['style'];
|
|
document.head.append(styleElement);
|
|
|
|
var targets = document.querySelectorAll('target');
|
|
for (let target of targets) {
|
|
let actual = window.getComputedStyle(target).color;
|
|
if (actual === 'rgb(0, 128, 0)') {
|
|
println(`PASS: ${testCase['title']} (${target.classList[0]} target)`);
|
|
} else {
|
|
println(`FAIL: ${testCase['title']} (${target.classList[0]} target) - Expected 'rgb(0, 128, 0)', got '${actual}'`);
|
|
}
|
|
}
|
|
|
|
styleElement.remove();
|
|
}
|
|
|
|
});
|
|
</script>
|