LibWeb: Add CSS column-height property

This commit is contained in:
Psychpsyo
2025-09-04 21:50:06 +02:00
committed by Sam Atkins
parent b057bad102
commit 9ea8b5a0a3
Notes: github-actions[bot] 2025-09-07 15:00:43 +00:00
14 changed files with 191 additions and 25 deletions

View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<title>CSS Multi-column Layout: getComputedStyle().columns</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-columns">
<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#propdef-columns">
<meta name="assert" content="The 'columns' shorthand property computes to the correct serialization of its component values, with lengths made absolute.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
<div id="target"></div>
<style>
#target {
font-size: 40px;
}
</style>
<script>
test_computed_value("columns", "auto");
test_computed_value("columns", "0.25em", "10px");
test_computed_value("columns", "2", "2");
test_computed_value("columns", "0.25em 2", "10px 2");
test_computed_value("columns", "2 0.25em", "10px 2");
test_computed_value("columns", "0.25em auto", "10px");
test_computed_value("columns", "auto 0.25em", "10px");
test_computed_value("columns", "2 auto", "2");
test_computed_value("columns", "auto 2", "2");
test_computed_value("columns", "auto / 2.5em", "auto / 100px");
test_computed_value("columns", "0.25em / 2.5em", "10px / 100px");
test_computed_value("columns", "2 / 2.5em", "2 / 100px");
test_computed_value("columns", "0.25em 2 / 2.5em", "10px 2 / 100px");
test_computed_value("columns", "2 0.25em / 2.5em", "10px 2 / 100px");
test_computed_value("columns", "0.25em auto / 2.5em", "10px / 100px");
test_computed_value("columns", "auto 0.25em / 2.5em", "10px / 100px");
test_computed_value("columns", "2 auto / 2.5em", "2 / 100px");
test_computed_value("columns", "auto 2 / 2.5em", "2 / 100px");
test_computed_value("columns", "auto / auto", "auto");
test_computed_value("columns", "0.25em / auto", "10px");
test_computed_value("columns", "2 / auto", "2");
test_computed_value("columns", "0.25em 2 / auto", "10px 2");
test_computed_value("columns", "2 0.25em / auto", "10px 2");
test_computed_value("columns", "0.25em auto / auto", "10px");
test_computed_value("columns", "auto 0.25em / auto", "10px");
test_computed_value("columns", "2 auto / auto", "2");
test_computed_value("columns", "auto 2 / auto", "2");
</script>

View File

@@ -4,7 +4,8 @@
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing columns with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-columns">
<meta name="assert" content="columns supports only the grammar '<column-width> || <column-count>'.">
<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#propdef-columns">
<meta name="assert" content="columns supports only the grammar '[ <'column-width'> || <'column-count'> ] [ / <'column-height'> ]?'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
@@ -27,6 +28,17 @@ test_invalid_value("columns", "auto auto auto");
test_invalid_value("columns", "10em auto auto");
test_invalid_value("columns", "initial initial");
test_invalid_value("columns", "inherit inherit");
// With "/ <'column-height'>"
test_invalid_value("columns", "/ 100px");
test_invalid_value("columns", "/ auto");
test_invalid_value("columns", "/");
test_invalid_value("columns", "auto /");
test_invalid_value("columns", "100px /");
test_invalid_value("columns", "2 /");
test_invalid_value("columns", "2 100px /");
test_invalid_value("columns", "100px 2 /");
</script>
</body>
</html>

View File

@@ -4,7 +4,8 @@
<meta charset="utf-8">
<title>CSS Multi-column Layout: parsing columns with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-columns">
<meta name="assert" content="columns supports the full grammar '<column-width> || <column-count>'.">
<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#propdef-columns">
<meta name="assert" content="columns supports the full grammar '[ <'column-width'> || <'column-count'> ] [ / <'column-height'> ]?'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
@@ -27,6 +28,17 @@ test_valid_value("columns", "0 1", "0px 1");
test_valid_value("columns", "1 0", "0px 1");
test_valid_value("columns", "0px 1");
// With "/ <'column-height'>"
test_valid_value("columns", "10px 2 / 100px");
test_valid_value("columns", "2 10px / 100px", "10px 2 / 100px");
test_valid_value("columns", "10px / 100px");
test_valid_value("columns", "auto / 100px");
test_valid_value("columns", "10px 2 / auto", "10px 2");
test_valid_value("columns", "2 10px / auto", "10px 2");
test_valid_value("columns", "10px / auto", "10px");
test_valid_value("columns", "2 / auto", "2");
test_valid_value("columns", "auto / auto", "auto");
// CSS-wide keywords.
test_valid_value("columns", "initial");
test_valid_value("columns", "inherit");