eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-05-02 04:27:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb/CSS: Parse border-inline-* properties

Browse Source 
This doesn't currently honor `writing-mode`, `direction` and
`text-orientation`.
This commit is contained in:
Tim Ledbetter
2025-03-10 22:39:22 +00:00
committed by Sam Atkins
parent 18cccd7633
commit cd1bba353a
Notes: github-actions[bot] 2025-03-14 16:10:16 +00:00 
Author: https://github.com/tcl3
Commit: https://github.com/LadybirdBrowser/ladybird/commit/cd1bba353ad
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3899
Reviewed-by: https://github.com/AtkinsSJ ✅
18 changed files with 500 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-color-invalid.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Logical Properties and Values: parsing border-inline-color with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color">
<meta name="assert" content="border-inline-color supports only the grammar '<color>{1,2}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("border-inline-start-color", "#12");
test_invalid_value("border-inline-start-color", "auto");
test_invalid_value("border-inline-start-color", "red green");
test_invalid_value("border-inline-start-color", "rgb");
test_invalid_value("border-inline-start-color", "rgb(1,2,3,4,5)");
test_invalid_value("border-inline-start-color", "rgb(10%, 20, 30%)");
test_invalid_value("border-inline-end-color", "#123456789");
test_invalid_value("border-inline-end-color", "123");
test_invalid_value("border-inline-end-color", "hsla(1,2,3,4,5)");
test_invalid_value("border-inline-end-color", "red, green");
test_invalid_value("border-inline-end-color", "rgb(1)");
test_invalid_value("border-inline-end-color", "rgba(-2, 300, 400%, -0.5)");
test_invalid_value("border-inline-color", "auto");
test_invalid_value("border-inline-color", "lime, transparent");
test_invalid_value("border-inline-color", "red green blue");
</script>
</body>
</html>

23
Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-color-valid.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Logical Properties and Values: parsing border-inline-color with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color">
<meta name="assert" content="border-inline-color supports the full grammar '<color>{1,2}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("border-inline-start-color", "currentcolor");
test_valid_value("border-inline-start-color", "rgb(2, 3, 4)");
test_valid_value("border-inline-end-color", "#234", "rgb(34, 51, 68)");
test_valid_value("border-inline-end-color", "transparent");
test_valid_value("border-inline-color", "#234", "rgb(34, 51, 68)");
test_valid_value("border-inline-color", "transparent rgb(2, 3, 4)");
test_valid_value("border-inline-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)");
</script>
</body>
</html>

22
Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-style-invalid.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Logical Properties and Values: parsing border-inline-style with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-style">
<meta name="assert" content="border-inline-style supports only the grammar '<line-style>{1,2}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("border-inline-start-style", "auto");
test_invalid_value("border-inline-start-style", "hidden, outset");
test_invalid_value("border-inline-end-style", "solid double");
test_invalid_value("border-inline-style", "auto");
test_invalid_value("border-inline-style", "groove, ridge");
test_invalid_value("border-inline-style", "hidden inset dashed");
</script>
</body>
</html>

30
Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-style-valid.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Logical Properties and Values: parsing border-inline-style with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block">
<meta name="assert" content="border-inline-style supports the full grammar '<line-style>{1,2}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
test_valid_value("border-inline-start-style", "dotted");
test_valid_value("border-inline-start-style", "groove");
test_valid_value("border-inline-start-style", "inset");
test_valid_value("border-inline-start-style", "none");
test_valid_value("border-inline-start-style", "solid");
test_valid_value("border-inline-end-style", "dashed");
test_valid_value("border-inline-end-style", "double");
test_valid_value("border-inline-end-style", "hidden");
test_valid_value("border-inline-end-style", "outset");
test_valid_value("border-inline-end-style", "ridge");
test_valid_value("border-inline-style", "dotted");
test_valid_value("border-inline-style", "double groove");
test_valid_value("border-inline-style", "hidden hidden", "hidden");
</script>
</body>
</html>

25
Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-width-invalid.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Logical Properties and Values: parsing border-inline-width with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width">
<meta name="assert" content="border-inline-width supports only the grammar '<line-width>{1,2}'.">
<meta name="assert" content="Negative lengths are not allowed.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("border-inline-start-width", "-20px");
test_invalid_value("border-inline-start-width", "auto");
test_invalid_value("border-inline-start-width", "medium 40px");
test_invalid_value("border-inline-end-width", "10");
test_invalid_value("border-inline-end-width", "30%");
test_invalid_value("border-inline-width", "thick, thin");
test_invalid_value("border-inline-width", "10px 20px 30px");
</script>
</body>
</html>

27
Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-width-valid.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Logical Properties and Values: parsing border-inline-width with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width">
<meta name="assert" content="border-inline-width supports the full grammar '<line-width>{1,2}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// <length> | thin | medium | thick
test_valid_value("border-inline-start-width", "10px");
test_valid_value("border-inline-start-width", "calc(10px + 0.5em)", "calc(0.5em + 10px)");
test_valid_value("border-inline-start-width", "thick");
test_valid_value("border-inline-start-width", "thin");
test_valid_value("border-inline-end-width", "0", "0px");
test_valid_value("border-inline-end-width", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
test_valid_value("border-inline-end-width", "medium");
test_valid_value("border-inline-width", "10px");
test_valid_value("border-inline-width", "medium calc(10px + 0.5em)", "medium calc(0.5em + 10px)");
test_valid_value("border-inline-width", "10px 10px", "10px");
</script>
</body>
</html>