beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-21 23:20:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Tests: Add a test for @supports

Browse source 
This is derived from our old demo page.

Notably, we currently do claim to support `::-webkit-foo` selectors,
which is a bug. According to the spec [1], we have to parse those as
valid, but `@supports` should still fail for them [2], which is a bit
confusing.

[1] https://www.w3.org/TR/selectors-4/#compat
[2] https://drafts.csswg.org/css-conditional-4/#support-definition-ext
This commit is contained in:
Sam Atkins 2024-11-04 16:13:35 +00:00 committed by Andreas Kling
parent 398e112c8c
commit a9a25d4eca
Notes: github-actions[bot] 2024-11-07 14:13:15 +00:00 
Author: https://github.com/AtkinsSJ
Commit: https://github.com/LadybirdBrowser/ladybird/commit/a9a25d4ecae
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2202
2 changed files with 64 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
Tests/LibWeb/Text/expected/css/supports.txt Normal file
View file

@ -0,0 +1,17 @@
These should all pass:
@supports (color: green): PASS
@supports (color: green) and (width: 50px): PASS
@supports (color: green) or (flogwizzle: purple): PASS
@supports (not (flogwizzle: purple)): PASS
@supports selector(.simple): PASS
@supports selector(a#more > .complicated.case:nth-child(42)): PASS
@supports selector(.easy) or selector(.....nope): PASS
These should all fail:
@supports (not (color: green)): FAIL
@supports (color: green) and (width: 50px) or (color: green): FAIL
@supports (width: yellow) or (height: green): FAIL
@supports (flogwizzle: purple): FAIL
@supports selector(.....nope): FAIL
@supports selector(::-webkit-input-placeholder): PASS
@supports selector(32) or selector(thing[foo??????bar]): FAIL

47
Tests/LibWeb/Text/input/css/supports.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<style>div { background-color: red; }</style>
<style id="style"></style>
<script src="../include.js"></script>
<div id="target"></div>
<script>
test(() => {
let style = document.getElementById("style");
let target = document.getElementById("target");
function testSupports(input) {
style.innerText = `${input} {
div { background-color: green; }
}`;
let result = getComputedStyle(target).backgroundColor;
println(`${input}: ${result === 'rgb(0, 128, 0)' ? 'PASS' : 'FAIL'}`);
}
let validCases = [
"@supports (color: green)",
"@supports (color: green) and (width: 50px)",
"@supports (color: green) or (flogwizzle: purple)",
"@supports (not (flogwizzle: purple))",
"@supports selector(.simple)",
"@supports selector(a#more > .complicated.case:nth-child(42))",
"@supports selector(.easy) or selector(.....nope)",
];
println("These should all pass:");
for (let testCase of validCases) {
testSupports(testCase);
}
let invalidCases = [
"@supports (not (color: green))",
"@supports (color: green) and (width: 50px) or (color: green)",
"@supports (width: yellow) or (height: green)",
"@supports (flogwizzle: purple)",
"@supports selector(.....nope)",
"@supports selector(::-webkit-input-placeholder)",
"@supports selector(32) or selector(thing[foo??????bar])",
];
println("\nThese should all fail:");
for (let testCase of invalidCases) {
testSupports(testCase);
}
});
</script>