LibWeb: Treat word-wrap as an alias for overflow-wrap

tcl3 · AtkinsSJ · commit 3299ea97c659 · 2025-09-30T13:50:53.000+01:00
diff --git a/Libraries/LibWeb/CSS/Properties.json b/Libraries/LibWeb/CSS/Properties.json
@@ -2805,6 +2805,16 @@
       "mapping": "inline-xy"
     }
   },
+  "overflow-wrap": {
+    "animation-type": "discrete",
+    "inherited": true,
+    "initial": "normal",
+    "valid-identifiers": [
+      "anywhere",
+      "break-word",
+      "normal"
+    ]
+  },
   "overflow-x": {
     "animation-type": "discrete",
     "inherited": false,
@@ -3744,14 +3754,7 @@
     ]
   },
   "word-wrap": {
-    "animation-type": "discrete",
-    "inherited": true,
-    "initial": "normal",
-    "valid-identifiers": [
-      "anywhere",
-      "break-word",
-      "normal"
-    ]
+    "legacy-alias-for": "overflow-wrap"
   },
   "writing-mode": {
     "animation-type": "none",
diff --git a/Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSPseudoElement.cpp b/Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSPseudoElement.cpp
@@ -410,7 +410,7 @@ bool pseudo_element_supports_property(PseudoElement pseudo_element, PropertyID p
                 append_property("letter-spacing"sv);
                 // FIXME: line-break
                 // FIXME: line-padding
-                // FIXME: overflow-wrap
+                append_property("overflow-wrap"sv);
                 append_property("tab-size"sv);
                 append_property("text-align"sv);
                 // FIXME: text-align-all
@@ -431,7 +431,6 @@ bool pseudo_element_supports_property(PseudoElement pseudo_element, PropertyID p
                 append_property("word-break"sv);
                 // FIXME: word-space-transform
                 append_property("word-spacing"sv);
-                append_property("word-wrap"sv);
                 // FIXME: wrap-after
                 // FIXME: wrap-before
                 // FIXME: wrap-inside
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
@@ -42,6 +42,7 @@ All properties associated with getComputedStyle(document.body):
     "math-shift",
     "math-style",
     "orphans",
+    "overflow-wrap",
     "paint-order",
     "pointer-events",
     "quotes",
@@ -72,7 +73,6 @@ All properties associated with getComputedStyle(document.body):
     "widows",
     "word-break",
     "word-spacing",
-    "word-wrap",
     "writing-mode",
     "align-content",
     "align-items",
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
@@ -594,6 +594,8 @@ All supported properties and their default values exposed from CSSStylePropertie
 'overflow-block': 'visible'
 'overflowInline': 'visible'
 'overflow-inline': 'visible'
+'overflowWrap': 'normal'
+'overflow-wrap': 'normal'
 'overflowX': 'visible'
 'overflow-x': 'visible'
 'overflowY': 'visible'
diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
@@ -40,6 +40,7 @@ math-depth: 0
 math-shift: normal
 math-style: normal
 orphans: 2
+overflow-wrap: normal
 paint-order: normal
 pointer-events: auto
 quotes: auto
@@ -70,7 +71,6 @@ white-space-collapse: collapse
 widows: 2
 word-break: normal
 word-spacing: 0px
-word-wrap: normal
 writing-mode: horizontal-tb
 align-content: normal
 align-items: normal
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
@@ -44,6 +44,7 @@ Pass	math-depth
 Pass	math-shift
 Pass	math-style
 Pass	orphans
+Pass	overflow-wrap
 Pass	paint-order
 Pass	pointer-events
 Pass	quotes
@@ -74,7 +75,6 @@ Pass	white-space-collapse
 Pass	widows
 Pass	word-break
 Pass	word-spacing
-Pass	word-wrap
 Pass	writing-mode
 Pass	align-items
 Pass	align-self
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-text/overflow-wrap/word-wrap-alias.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-text/overflow-wrap/word-wrap-alias.txt
@@ -0,0 +1,7 @@
+Harness status: OK
+
+Found 2 tests
+
+2 Pass
+Pass	word-wrap should be defined as an alias of overflow-wrap
+Pass	word-wrap is a legacy name alias for overflow-wrap
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-text/parsing/overflow-wrap-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-text/parsing/overflow-wrap-computed.txt
@@ -0,0 +1,8 @@
+Harness status: OK
+
+Found 3 tests
+
+3 Pass
+Pass	Property overflow-wrap value 'normal'
+Pass	Property overflow-wrap value 'break-word'
+Pass	Property overflow-wrap value 'anywhere'
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-text/parsing/overflow-wrap-invalid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-text/parsing/overflow-wrap-invalid.txt
@@ -0,0 +1,8 @@
+Harness status: OK
+
+Found 3 tests
+
+3 Pass
+Pass	e.style['overflow-wrap'] = "auto" should not set the property value
+Pass	e.style['overflow-wrap'] = "normal break-word" should not set the property value
+Pass	e.style['overflow-wrap'] = "anywhere anywhere" should not set the property value
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-text/parsing/overflow-wrap-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-text/parsing/overflow-wrap-valid.txt
@@ -0,0 +1,8 @@
+Harness status: OK
+
+Found 3 tests
+
+3 Pass
+Pass	e.style['overflow-wrap'] = "normal" should set the property value
+Pass	e.style['overflow-wrap'] = "break-word" should set the property value
+Pass	e.style['overflow-wrap'] = "anywhere" should set the property value
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-text/overflow-wrap/word-wrap-alias.html b/Tests/LibWeb/Text/input/wpt-import/css/css-text/overflow-wrap/word-wrap-alias.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-word-wrap">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/866">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/shorthand-testcommon.js"></script>
+<div id="test" style="word-wrap: break-word; overflow-wrap: break-word;"></div>
+<script>
+test(function() {
+    const div = document.getElementById("test");
+    assert_equals(div.style.cssText, "overflow-wrap: break-word;", "Only overflow-wrap should appear when serializing the declaration.");
+    assert_equals(div.style.wordWrap, "break-word");
+    assert_equals(div.style.overflowWrap, "break-word");
+    assert_equals(getComputedStyle(div).wordWrap, "break-word");
+    assert_equals(getComputedStyle(div).overflowWrap, "break-word");
+}, "word-wrap should be defined as an alias of overflow-wrap");
+
+test_is_legacy_name_alias("word-wrap", "overflow-wrap");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-text/parsing/overflow-wrap-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-text/parsing/overflow-wrap-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text: getComputedStyle().overflowWrap</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-overflow-wrap">
+<meta name="assert" content="overflow-wrap computed value is specified keyword.">
+<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("overflow-wrap", "normal");
+test_computed_value("overflow-wrap", "break-word");
+test_computed_value("overflow-wrap", "anywhere");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-text/parsing/overflow-wrap-invalid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-text/parsing/overflow-wrap-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing overflow-wrap with invalid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-overflow-wrap">
+<meta name="assert" content="overflow-wrap supports only the grammar 'normal | break-word | anywhere'.">
+<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("overflow-wrap", "auto");
+test_invalid_value("overflow-wrap", "normal break-word");
+test_invalid_value("overflow-wrap", "anywhere anywhere");
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-text/parsing/overflow-wrap-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-text/parsing/overflow-wrap-valid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Text Module Test: parsing overflow-wrap with valid values</title>
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#propdef-overflow-wrap">
+<meta name="assert" content="overflow-wrap supports the full grammar 'normal | break-word | anywhere'.">
+<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("overflow-wrap", "normal");
+test_valid_value("overflow-wrap", "break-word");
+test_valid_value("overflow-wrap", "anywhere");
+</script>
+</body>
+</html>
