LibWeb: Parse widows CSS property

Calme1709 · AtkinsSJ · commit c4d6deb5c754 · 2025-09-26T16:32:54.000+01:00
diff --git a/Libraries/LibWeb/CSS/Properties.json b/Libraries/LibWeb/CSS/Properties.json
@@ -3660,6 +3660,15 @@
       "discard-inner"
     ]
   },
+  "widows": {
+    "animation-type": "by-computed-value",
+    "inherited": true,
+    "initial": "2",
+    "valid-types": [
+      "integer [1,∞]"
+    ],
+    "__comment": "FIXME: We don't implement this property any further than compute time"
+  },
   "width": {
     "animation-type": "by-computed-value",
     "inherited": false,
diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt
@@ -69,6 +69,7 @@ All properties associated with getComputedStyle(document.body):
     "text-wrap-style",
     "visibility",
     "white-space-collapse",
+    "widows",
     "word-break",
     "word-spacing",
     "word-wrap",
diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt b/Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt
@@ -741,6 +741,7 @@ All supported properties and their default values exposed from CSSStylePropertie
 'white-space-collapse': 'collapse'
 'whiteSpaceTrim': 'none'
 'white-space-trim': 'none'
+'widows': '2'
 'width': '284px'
 'willChange': 'auto'
 'will-change': 'auto'
diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
@@ -67,6 +67,7 @@ text-wrap-mode: wrap
 text-wrap-style: auto
 visibility: visible
 white-space-collapse: collapse
+widows: 2
 word-break: normal
 word-spacing: 0px
 word-wrap: normal
@@ -96,7 +97,7 @@ background-position-x: 0%
 background-position-y: 0%
 background-repeat: repeat
 background-size: auto
-block-size: 1470px
+block-size: 1485px
 border-block-end-color: rgb(0, 0, 0)
 border-block-end-style: none
 border-block-end-width: 0px
@@ -173,7 +174,7 @@ grid-row-start: auto
 grid-template-areas: none
 grid-template-columns: none
 grid-template-rows: none
-height: 2625px
+height: 2640px
 inline-size: 784px
 inset-block-end: auto
 inset-block-start: auto
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-break/animation/widows-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-break/animation/widows-interpolation.txt
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-break/parsing/widows-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-break/parsing/widows-computed.txt
@@ -0,0 +1,8 @@
+Harness status: OK
+
+Found 3 tests
+
+3 Pass
+Pass	Property widows value '1'
+Pass	Property widows value '234'
+Pass	Property widows value 'calc(1 + 234)'
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-break/parsing/widows-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-break/parsing/widows-invalid.txt
@@ -0,0 +1,10 @@
+Harness status: OK
+
+Found 5 tests
+
+5 Pass
+Pass	e.style['widows'] = "auto" should not set the property value
+Pass	e.style['widows'] = "1 234" should not set the property value
+Pass	e.style['widows'] = "-234" should not set the property value
+Pass	e.style['widows'] = "-1" should not set the property value
+Pass	e.style['widows'] = "0" should not set the property value
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-break/parsing/widows-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-break/parsing/widows-valid.txt
@@ -0,0 +1,7 @@
+Harness status: OK
+
+Found 2 tests
+
+2 Pass
+Pass	e.style['widows'] = "1" should set the property value
+Pass	e.style['widows'] = "234" should set the property value
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-cascade/all-prop-revert-layer.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-cascade/all-prop-revert-layer.txt
@@ -1,8 +1,8 @@
 Harness status: OK
 
-Found 264 tests
+Found 265 tests
 
-258 Pass
+259 Pass
 6 Fail
 Pass	accent-color
 Pass	border-collapse
@@ -71,6 +71,7 @@ Pass	text-wrap-mode
 Pass	text-wrap-style
 Pass	visibility
 Pass	white-space-collapse
+Pass	widows
 Pass	word-break
 Pass	word-spacing
 Pass	word-wrap
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom/serialize-values.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom/serialize-values.txt
@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 687 tests
 
-663 Pass
-24 Fail
+665 Pass
+22 Fail
 Pass	background-attachment: scroll
 Pass	background-attachment: fixed
 Pass	background-attachment: inherit
@@ -672,8 +672,8 @@ Pass	white-space: nowrap
 Pass	white-space: pre-wrap
 Pass	white-space: pre-line
 Pass	white-space: inherit
-Fail	widows: 101
-Fail	widows: inherit
+Pass	widows: 101
+Pass	widows: inherit
 Pass	width: 0px
 Pass	width: 1px
 Pass	width: .1em
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-break/animation/widows-interpolation.html b/Tests/LibWeb/Text/input/wpt-import/css/css-break/animation/widows-interpolation.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>widows interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-break-3/#widows-orphans">
+<meta name="assert" content="widows supports animation by computed value type">
+
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  widows: 30;
+}
+.target {
+  widows: 10;
+}
+</style>
+
+<body></body>
+
+<script>
+test_interpolation({
+  property: 'widows',
+  from: neutralKeyframe,
+  to: '20',
+}, [
+  {at: -3, expect: '1'},
+  {at: -2.5, expect: '1'},
+  {at: -0.5, expect: '5'},
+  {at: 0, expect: '10'},
+  {at: 0.3, expect: '13'},
+  {at: 0.6, expect: '16'},
+  {at: 1, expect: '20'},
+  {at: 1.5, expect: '25'},
+]);
+
+test_interpolation({
+  property: 'widows',
+  from: 'initial',
+  to: '20',
+}, [
+  {at: -3, expect: '1'},
+  {at: -2.5, expect: '1'},
+  {at: -0.5, expect: '1'},
+  {at: 0, expect: '2'},
+  {at: 0.3, expect: '7'},
+  {at: 0.6, expect: '13'},
+  {at: 1, expect: '20'},
+  {at: 1.5, expect: '29'},
+]);
+
+test_interpolation({
+  property: 'widows',
+  from: 'inherit',
+  to: '20',
+}, [
+  {at: -3, expect: '60'},
+  {at: -2.5, expect: '55'},
+  {at: -0.5, expect: '35'},
+  {at: 0, expect: '30'},
+  {at: 0.3, expect: '27'},
+  {at: 0.6, expect: '24'},
+  {at: 1, expect: '20'},
+  {at: 1.5, expect: '15'},
+]);
+
+test_interpolation({
+  property: 'widows',
+  from: 'unset',
+  to: '20',
+}, [
+  {at: -3, expect: '60'},
+  {at: -2.5, expect: '55'},
+  {at: -0.5, expect: '35'},
+  {at: 0, expect: '30'},
+  {at: 0.3, expect: '27'},
+  {at: 0.6, expect: '24'},
+  {at: 1, expect: '20'},
+  {at: 1.5, expect: '15'},
+]);
+
+test_interpolation({
+  property: 'widows',
+  from: '10',
+  to: '20'
+}, [
+  {at: -3.0, expect: '1'},
+  {at: -2.5, expect: '1'},
+  {at: -0.5, expect: '5'},
+  {at: 0, expect: '10'},
+  {at: 0.3, expect: '13'},
+  {at: 0.6, expect: '16'},
+  {at: 1, expect: '20'},
+  {at: 1.5, expect: '25'}
+]);
+
+test_interpolation({
+  property: 'widows',
+  from: '2',
+  to: '4'
+}, [
+  {at: -3.0, expect: '1'},
+  {at: -2.5, expect: '1'},
+  {at: -0.5, expect: '1'},
+  {at: 0, expect: '2'},
+  {at: 0.3, expect: '3'},
+  {at: 0.6, expect: '3'},
+  {at: 1, expect: '4'},
+  {at: 1.5, expect: '5'}
+]);
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-break/parsing/widows-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-break/parsing/widows-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Fragmentation Module Level 3: getComputedStyle().widows</title>
+<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-widows">
+<meta name="assert" content="widows computed value is specified integer.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("widows", "1");
+test_computed_value("widows", "234");
+test_computed_value("widows", "calc(1 + 234)", "235");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-break/parsing/widows-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-break/parsing/widows-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Fragmentation Module Level 3: parsing widows with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-widows">
+<meta name="assert" content="widows supports only the grammar '<integer>'.">
+<meta name="assert" content="Negative values and zero are invalid.">
+<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("widows", "auto");
+test_invalid_value("widows", "1 234");
+test_invalid_value("widows", "-234");
+test_invalid_value("widows", "-1");
+test_invalid_value("widows", "0");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-break/parsing/widows-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-break/parsing/widows-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Fragmentation Module Level 3: parsing widows with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-break/#propdef-widows">
+<meta name="assert" content="widows supports the full grammar '<integer>'.">
+<meta name="assert" content="Negative values and zero are invalid.">
+<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("widows", "1");
+test_valid_value("widows", "234");
+</script>
+</body>
+</html>
