mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-09-02 15:46:33 +00:00
Tests: Import WPT tests for CSS env()
This commit is contained in:
Sam Atkins
Alexander Kalenik
parent
5808eff1f4
commit
b03e829a49
Notes:
github-actions[bot]
2025-08-07 14:42:02 +00:00
Author: https://github.com/AtkinsSJ
Commit: b03e829a49
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5736
Reviewed-by: https://github.com/kalenikaliaksandr
18 changed files with 345 additions and 0 deletions
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Fail
|
||||
Fail Test that CSS env vars work with @support
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 2 tests
|
||||
|
||||
2 Fail
|
||||
Fail env() is substituted into a custom property
|
||||
Fail Substitution of unrecognized env() causes guaranteed-invalid
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 8 tests
|
||||
|
||||
5 Pass
|
||||
3 Fail
|
||||
Fail e.style['width'] = "env(safe-area-inset-top)" should set the property value
|
||||
Fail e.style['width'] = "env(safe-area-inset-top,)" should set the property value
|
||||
Fail e.style['width'] = "env(safe-area-inset-top, )" should set the property value
|
||||
Pass e.style['width'] = "env(safe-area-inset-top ())" should not set the property value
|
||||
Pass e.style['width'] = "env(safe-area-inset-top () )" should not set the property value
|
||||
Pass e.style['width'] = "env(safe-area-inset-top() )" should not set the property value
|
||||
Pass e.style['width'] = "env(safe-area-inset-top (),)" should not set the property value
|
||||
Pass e.style['width'] = "env(safe-area-inset-top(),)" should not set the property value
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Fail
|
||||
Fail Test that nested var() fallback values work with CSS env vars
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 8 tests
|
||||
|
||||
4 Pass
|
||||
4 Fail
|
||||
Pass CSS Environment variable value "env(test1 test2, green)" must not successfully parse
|
||||
Pass CSS Environment variable value "env(test1 10 20 test2, green)" must not successfully parse
|
||||
Pass CSS Environment variable value "env(test 0.1, green)" must not successfully parse
|
||||
Pass CSS Environment variable value "env(test -1, green)" must not successfully parse
|
||||
Fail CSS Environment variable value "env(test 0, green)" must successfully parse and roundtrip
|
||||
Fail CSS Environment variable value "env(test 0,)" must successfully parse and roundtrip
|
||||
Fail CSS Environment variable value "env(test 0)" must successfully parse and roundtrip
|
||||
Fail CSS Environment variable value "env(test 0 1 2 3 4, green)" must successfully parse and roundtrip
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Fail
|
||||
Fail Test style seralization round tripping with CSS env vars
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Fail
|
||||
Fail Test that CSS env vars work with CSS.supports
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 18 tests
|
||||
|
||||
4 Pass
|
||||
14 Fail
|
||||
Pass rgb(0, 128, 0)
|
||||
Fail background-color: env(test) rgba(0, 0, 0, 0)
|
||||
Fail background-color: ENV(test) rgba(0, 0, 0, 0)
|
||||
Fail background-color: env(test) !important rgba(0, 0, 0, 0)
|
||||
Fail background-color: env(test, 10px) rgba(0, 0, 0, 0)
|
||||
Fail background-color: env(test, blue) rgb(0, 0, 255)
|
||||
Fail background-color: env(test, env(another)) rgba(0, 0, 0, 0)
|
||||
Fail background-color: env(test, env(another, blue)) rgb(0, 0, 255)
|
||||
Fail background-color: env(-test) rgba(0, 0, 0, 0)
|
||||
Fail background-color: env(--test) rgba(0, 0, 0, 0)
|
||||
Pass background-color: env(10px) rgb(0, 128, 0)
|
||||
Pass background-color: env(env(test)) rgb(0, 128, 0)
|
||||
Fail background-color: env( test) rgba(0, 0, 0, 0)
|
||||
Fail background-color: env(test ) rgba(0, 0, 0, 0)
|
||||
Fail background-color: env( test ) rgba(0, 0, 0, 0)
|
||||
Fail background-color: env(test /**/, blue) rgb(0, 0, 255)
|
||||
Fail background-color: env(test, {}) rgba(0, 0, 0, 0)
|
||||
Pass background-color: env(test, {) rgb(0, 128, 0)
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 1 tests
|
||||
|
||||
1 Fail
|
||||
Fail Test unknown env() names will override previous values
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test that CSS env vars work with @support</title>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
@supports (background-color: env(test)) {
|
||||
body { background-color: rgb(0, 128, 0); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test(() => {
|
||||
const style = window.getComputedStyle(document.body);
|
||||
assert_equals(style.getPropertyValue("background-color"), "rgb(0, 128, 0)");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test env() will work in custom properties</title>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#parent {
|
||||
--var1: inherited;
|
||||
}
|
||||
#child {
|
||||
--my-width: env(test, 100px);
|
||||
width: var(--my-width);
|
||||
--var1: env(nonexistent);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="parent">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
const style = window.getComputedStyle(child);
|
||||
assert_equals(style.getPropertyValue("width"), "100px");
|
||||
}, 'env() is substituted into a custom property');
|
||||
|
||||
test(() => {
|
||||
const style = window.getComputedStyle(child);
|
||||
assert_equals(style.getPropertyValue("--var1"), "");
|
||||
}, 'Substitution of unrecognized env() causes guaranteed-invalid');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Environment Variables: env() parsing</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env/">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="../../css/support/parsing-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
|
||||
<script>
|
||||
|
||||
test_valid_value('width', 'env(safe-area-inset-top)');
|
||||
test_valid_value('width', 'env(safe-area-inset-top,)');
|
||||
test_valid_value('width', 'env(safe-area-inset-top, )');
|
||||
|
||||
test_invalid_value('width', 'env(safe-area-inset-top ())');
|
||||
test_invalid_value('width', 'env(safe-area-inset-top () )');
|
||||
test_invalid_value('width', 'env(safe-area-inset-top() )');
|
||||
test_invalid_value('width', 'env(safe-area-inset-top (),)');
|
||||
test_invalid_value('width', 'env(safe-area-inset-top(),)');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test that nested var() fallback values work with CSS env vars</title>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
body {
|
||||
--main-bg-color: rgb(0, 128, 0);
|
||||
background-color: env(test, var(--main-bg-color));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test(() => {
|
||||
const style = window.getComputedStyle(document.body);
|
||||
assert_equals(style.getPropertyValue("background-color"), "rgb(0, 128, 0)");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test CSS env vars index parsing support</title>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
let invalidValues = [
|
||||
"env(test1 test2, green)",
|
||||
"env(test1 10 20 test2, green)",
|
||||
"env(test 0.1, green)",
|
||||
"env(test -1, green)",
|
||||
];
|
||||
invalidValues.forEach(val => {
|
||||
test(() => {
|
||||
document.body.style.top = val;
|
||||
assert_equals(document.body.style.top, "");
|
||||
}, `CSS Environment variable value "${val}" must not successfully parse`);
|
||||
});
|
||||
|
||||
let validValues = [
|
||||
"env(test 0, green)",
|
||||
"env(test 0,)",
|
||||
"env(test 0)",
|
||||
"env(test 0 1 2 3 4, green)",
|
||||
];
|
||||
validValues.forEach(val => {
|
||||
test(() => {
|
||||
document.body.style.top = val;
|
||||
assert_equals(document.body.style.top, val);
|
||||
}, `CSS Environment variable value "${val}" must successfully parse and roundtrip`);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test style seralization round tripping with CSS env vars</title>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test(() => {
|
||||
document.body.style.top = "env(test)";
|
||||
assert_equals(document.body.style.getPropertyValue("top"), "env(test)");
|
||||
document.body.style.setProperty("top", "env()");
|
||||
assert_equals(document.body.style.getPropertyValue("top"), "env(test)");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test that CSS env vars work with CSS.supports</title>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test(() => {
|
||||
assert_true(CSS.supports("background: env(test)"));
|
||||
assert_true(CSS.supports("background", "env(test)"));
|
||||
assert_true(CSS.supports("background", "env(test, 10px)"));
|
||||
assert_true(CSS.supports("background", "foobar(env(test))"));
|
||||
assert_false(CSS.supports("background", "env()"));
|
||||
assert_true(CSS.supports("background", "env(test, )"));
|
||||
assert_true(CSS.supports("background", "env(test,)"));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test env() syntax</title>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div { background-color: rgb(0, 128, 0); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
// This value is expected if the syntax is valid.
|
||||
const envWorkingValue = "rgba(0, 0, 0, 0)";
|
||||
|
||||
// This value is expected if the syntax is invalid.
|
||||
const pageDefaultValue = "rgb(0, 128, 0)";
|
||||
|
||||
// This value is used to test fallback values.
|
||||
const blueValue = "rgb(0, 0, 255)";
|
||||
|
||||
const testCases = [
|
||||
{ style: "", expectedPropertyValue: pageDefaultValue },
|
||||
{ style: "background-color: env(test)", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: ENV(test)", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test) !important", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test, 10px)", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test, blue)", expectedPropertyValue: blueValue },
|
||||
{ style: "background-color: env(test, env(another))", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test, env(another, blue))", expectedPropertyValue: blueValue },
|
||||
{ style: "background-color: env(-test)", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(--test)", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(10px)", expectedPropertyValue: pageDefaultValue },
|
||||
{ style: "background-color: env(env(test))", expectedPropertyValue: pageDefaultValue },
|
||||
{ style: "background-color: env( test)", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test )", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env( test )", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test /**/, blue)", expectedPropertyValue: blueValue },
|
||||
{ style: "background-color: env(test, {})", expectedPropertyValue: envWorkingValue },
|
||||
{ style: "background-color: env(test, {)", expectedPropertyValue: pageDefaultValue },
|
||||
];
|
||||
|
||||
testCases.forEach((testcase) => {
|
||||
test(() => {
|
||||
const elem = document.createElement("div");
|
||||
const style = window.getComputedStyle(elem);
|
||||
|
||||
document.body.appendChild(elem);
|
||||
elem.style.cssText = testcase.style;
|
||||
|
||||
assert_equals(style.getPropertyValue("background-color"), testcase.expectedPropertyValue);
|
||||
}, testcase.style + " " + testcase.expectedPropertyValue);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-env-1/">
|
||||
<title>Test unknown env() names will override previous values</title>
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body style="background-color: green; background-color: env(unknown);">
|
||||
<script>
|
||||
test(() => {
|
||||
const style = window.getComputedStyle(document.body);
|
||||
assert_equals(style.getPropertyValue("background-color"), "rgba(0, 0, 0, 0)");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue