LibWeb: Implement text-wrap-style CSS property

Author: https://github.com/Calme1709
Commit: 9ba74316d2
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4943
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/CSS/Enums.json

@@ -621,6 +621,12 @@
     "wrap",
     "nowrap"
   ],
+  "text-wrap-style": [
+    "auto",
+    "balance",
+    "stable",
+    "pretty"
+  ],
   "touch-action": [
     "auto",
     "manipulation",

Libraries/LibWeb/CSS/Keywords.json

@@ -90,6 +90,7 @@
   "back",
   "background",
   "backwards",
+  "balance",
   "baseline",
   "bevel",
   "bidi-override",
@@ -384,6 +385,7 @@
   "preserve",
   "preserve-breaks",
   "preserve-spaces",
+  "pretty",
   "progress",
   "progress-bar",
   "progressive",

Libraries/LibWeb/CSS/Properties.json

@@ -2951,6 +2951,14 @@
       "text-wrap-mode"
     ]
   },
+  "text-wrap-style": {
+    "animation-type": "discrete",
+    "inherited": true,
+    "initial": "auto",
+    "valid-types": [
+      "text-wrap-style"
+    ]
+  },
   "top": {
     "animation-type": "by-computed-value",
     "inherited": false,

Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSPseudoElement.cpp

@@ -434,7 +434,7 @@ bool pseudo_element_supports_property(PseudoElement pseudo_element, PropertyID p
                 append_property("text-transform"sv);
                 // FIXME: text-wrap
                 append_property("text-wrap-mode"sv);
-                // FIXME: text-wrap-style
+                append_property("text-wrap-style"sv);
                 append_property("white-space"sv);
                 append_property("white-space-collapse"sv);
                 append_property("white-space-trim"sv);

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt

@@ -57,6 +57,7 @@ All properties associated with getComputedStyle(document.body):
     "text-shadow",
     "text-transform",
     "text-wrap-mode",
+    "text-wrap-style",
     "visibility",
     "white-space-collapse",
     "word-break",

Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt

@@ -619,6 +619,8 @@ All supported properties and their default values exposed from CSSStylePropertie
 'text-transform': 'none'
 'textWrapMode': 'wrap'
 'text-wrap-mode': 'wrap'
+'textWrapStyle': 'auto'
+'text-wrap-style': 'auto'
 'top': 'auto'
 'touchAction': 'auto'
 'touch-action': 'auto'

Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt

@@ -55,6 +55,7 @@ text-justify: auto
 text-shadow: none
 text-transform: none
 text-wrap-mode: wrap
+text-wrap-style: auto
 visibility: visible
 white-space-collapse: collapse
 word-break: normal
@@ -85,7 +86,7 @@ background-position-x: 0%
 background-position-y: 0%
 background-repeat: repeat
 background-size: auto auto
-block-size: 1305px
+block-size: 1320px
 border-block-end-color: rgb(0, 0, 0)
 border-block-end-style: none
 border-block-end-width: medium
@@ -150,7 +151,7 @@ grid-row-start: auto
 grid-template-areas: none
 grid-template-columns: none
 grid-template-rows: none
-height: 2280px
+height: 2295px
 inline-size: 784px
 inset-block-end: auto
 inset-block-start: auto

Tests/LibWeb/Text/expected/wpt-import/css/css-cascade/all-prop-revert-layer.txt

@@ -1,8 +1,8 @@
 Harness status: OK
 
-Found 200 tests
+Found 201 tests
 
-190 Pass
+191 Pass
 10 Fail
 Pass	accent-color
 Pass	border-collapse
@@ -58,6 +58,7 @@ Pass	text-indent
 Pass	text-justify
 Pass	text-shadow
 Pass	text-transform
+Pass	text-wrap-style
 Pass	visibility
 Pass	word-break
 Pass	word-spacing

Tests/LibWeb/Text/expected/wpt-import/css/css-text/parsing/text-wrap-style-computed.txt

@@ -0,0 +1,8 @@
+Harness status: OK
+
+Found 3 tests
+
+3 Pass
+Pass	Property text-wrap-style value 'auto'
+Pass	Property text-wrap-style value 'balance'
+Pass	Property text-wrap-style value 'stable'

Tests/LibWeb/Text/expected/wpt-import/css/css-text/parsing/text-wrap-style-invalid.txt

@@ -0,0 +1,17 @@
+Harness status: OK
+
+Found 12 tests
+
+12 Pass
+Pass	e.style['text-wrap-style'] = "normal" should not set the property value
+Pass	e.style['text-wrap-style'] = "none" should not set the property value
+Pass	e.style['text-wrap-style'] = "wrap" should not set the property value
+Pass	e.style['text-wrap-style'] = "nowrap" should not set the property value
+Pass	e.style['text-wrap-style'] = "wrap wrap" should not set the property value
+Pass	e.style['text-wrap-style'] = "nowrap nowrap" should not set the property value
+Pass	e.style['text-wrap-style'] = "wrap nowrap" should not set the property value
+Pass	e.style['text-wrap-style'] = "pretty balance" should not set the property value
+Pass	e.style['text-wrap-style'] = "balance stable" should not set the property value
+Pass	e.style['text-wrap-style'] = "stable pretty" should not set the property value
+Pass	e.style['text-wrap-style'] = "delicious wrap" should not set the property value
+Pass	e.style['text-wrap-style'] = "5px" should not set the property value

Tests/LibWeb/Text/expected/wpt-import/css/css-text/parsing/text-wrap-style-valid.txt

@@ -0,0 +1,13 @@
+Harness status: OK
+
+Found 8 tests
+
+8 Pass
+Pass	e.style['text-wrap-style'] = "auto" should set the property value
+Pass	e.style['text-wrap-style'] = "balance" should set the property value
+Pass	e.style['text-wrap-style'] = "stable" should set the property value
+Pass	e.style['text-wrap-style'] = "initial" should set the property value
+Pass	e.style['text-wrap-style'] = "inherit" should set the property value
+Pass	e.style['text-wrap-style'] = "unset" should set the property value
+Pass	e.style['text-wrap-style'] = "revert" should set the property value
+Pass	e.style['text-wrap-style'] = "revert-layer" should set the property value

Tests/LibWeb/Text/input/wpt-import/css/css-text/parsing/text-wrap-style-computed.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().textWrapStyle</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap-style">
+<meta name="assert" content="text-wrap-style computed value is auto | balance | pretty | stable">
+<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("text-wrap-style", "auto");
+test_computed_value("text-wrap-style", "balance");
+test_computed_value("text-wrap-style", "stable");
+</script>
+</body>
+</html>

Tests/LibWeb/Text/input/wpt-import/css/css-text/parsing/text-wrap-style-invalid.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-wrap-style with invalid values</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap-style">
+<meta name="assert" content="text-wrap-style supports only the grammar '<text-wrap-style>'.">
+<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("text-wrap-style", "normal");
+test_invalid_value("text-wrap-style", "none");
+test_invalid_value("text-wrap-style", "wrap");
+test_invalid_value("text-wrap-style", "nowrap");
+test_invalid_value("text-wrap-style", "wrap wrap");
+test_invalid_value("text-wrap-style", "nowrap nowrap");
+test_invalid_value("text-wrap-style", "wrap nowrap");
+test_invalid_value("text-wrap-style", "pretty balance");
+test_invalid_value("text-wrap-style", "balance stable");
+test_invalid_value("text-wrap-style", "stable pretty");
+test_invalid_value("text-wrap-style", "delicious wrap");
+test_invalid_value("text-wrap-style", "5px");
+</script>
+</body>
+</html>

Tests/LibWeb/Text/input/wpt-import/css/css-text/parsing/text-wrap-style-valid.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing text-wrap-style with valid values</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-wrap-style">
+<meta name="assert" content="text-wrap-style supports the full grammar.">
+<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("text-wrap-style", "auto");
+test_valid_value("text-wrap-style", "balance");
+test_valid_value("text-wrap-style", "stable");
+
+test_valid_value("text-wrap-style", "initial");
+test_valid_value("text-wrap-style", "inherit");
+test_valid_value("text-wrap-style", "unset");
+test_valid_value("text-wrap-style", "revert");
+test_valid_value("text-wrap-style", "revert-layer");
+</script>
+</body>
+</html>