mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 20:29:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb/CSS: Implement revert-layer

Browse source 
With the introduction of the cascade layer, the 5th CSS-wide keyword,
`revert-layer`, has been added.
This commit is contained in:
Annya 2024-09-11 20:13:44 +08:00 • committed by Sam Atkins
commit bea7eec518
Notes: github-actions[bot] 2024-09-11 21:31:19 +00:00
8 changed files with 70 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

47
Tests/LibWeb/Text/input/css/revert-layer.html Normal file
View file

@ -0,0 +1,47 @@
<!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>