Bug 1852478 - Update property_database.js for conversion of `white-sp…

…ace` and `text-wrap` to shorthands. r=firefox-style-system-reviewers,emilio,devtools-reviewers,nchevobbe Also fix up devtools data/tests now that white-space is a shorthand. Differential Revision: https://phabricator.services.mozilla.com/D198792
dothq · Jan 26, 2024 · a9ef7b2 · a9ef7b2
1 parent 16f020d
commit a9ef7b2
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 10 deletions.
diff --git a/devtools/server/actors/animation-type-longhand.js b/devtools/server/actors/animation-type-longhand.js
@@ -174,7 +174,8 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
       "-webkit-text-stroke-width",
       "text-transform",
       "text-underline-position",
-      "text-wrap",
+      "text-wrap-mode",
+      "text-wrap-style",
       "touch-action",
       "transform-box",
       "transform-style",
@@ -185,7 +186,7 @@ exports.ANIMATION_TYPE_FOR_LONGHANDS = [
       "user-select",
       "vector-effect",
       "visibility",
-      "white-space",
+      "white-space-collapse",
       "will-change",
       "-moz-window-dragging",
       "word-break",

diff --git a/devtools/server/tests/chrome/test_styles-computed.html b/devtools/server/tests/chrome/test_styles-computed.html
@@ -38,7 +38,7 @@
       // Test a smattering of properties that include some system-defined
       // props, some props that were defined in this node's stylesheet,
       // and some default props.
-      is(computed["white-space"].value, "normal", "Default value should appear");
+      is(computed["white-space-collapse"].value, "collapse", "Default value should appear");
       is(computed.display.value, "block", "System stylesheet item should appear");
       is(computed.cursor.value, "crosshair", "Included stylesheet rule should appear");
       is(computed.color.value, "rgb(255, 0, 0)",
@@ -58,7 +58,7 @@
     gWalker.querySelector(gWalker.rootNode, "#computed-test-node").then(node => {
       return gStyles.getComputed(node, { filter: "user", markMatched: true });
     }).then(computed => {
-      ok(!computed["white-space"].matched, "Default style shouldn't match");
+      ok(!computed["white-space-collapse"].matched, "Default style shouldn't match");
       ok(!computed.display.matched, "Only user styles should match");
       ok(computed.cursor.matched, "Asked for matched, should get it");
       ok(computed.color.matched, "Asked for matched, should get it");
@@ -72,7 +72,7 @@
     gWalker.querySelector(gWalker.rootNode, "#computed-test-node").then(node => {
       return gStyles.getComputed(node, { filter: "ua", markMatched: true });
     }).then(computed => {
-      ok(!computed["white-space"].matched, "Default style shouldn't match");
+      ok(!computed["white-space-collapse"].matched, "Default style shouldn't match");
       ok(computed.display.matched, "System stylesheets should match");
       ok(computed.cursor.matched, "Asked for matched, should get it");
       ok(computed.color.matched, "Asked for matched, should get it");
@@ -86,7 +86,7 @@
     gWalker.querySelector(gWalker.rootNode, "#computed-test-node").then(node => {
       return gStyles.getComputed(node, { filter: "user", onlyMatched: true });
     }).then(computed => {
-      ok(!("white-space" in computed), "Default style shouldn't exist");
+      ok(!("white-space-collapse" in computed), "Default style shouldn't exist");
       ok(!("display" in computed), "System stylesheets shouldn't exist");
       ok(("cursor" in computed), "User items should exist.");
       ok(("color" in computed), "User items should exist.");
@@ -100,7 +100,7 @@
     gWalker.querySelector(gWalker.rootNode, "#computed-test-node").then(node => {
       return gStyles.getComputed(node, { filter: "ua", onlyMatched: true });
     }).then(computed => {
-      ok(!("white-space" in computed), "Default style shouldn't exist");
+      ok(!("white-space-collapse" in computed), "Default style shouldn't exist");
       ok(("display" in computed), "System stylesheets should exist");
       ok(("cursor" in computed), "User items should exist.");
       ok(("color" in computed), "User items should exist.");

diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
@@ -8255,6 +8255,29 @@ var gCSSProperties = {
       "uppercase full-width lowercase",
     ],
   },
+  "text-wrap": {
+    domProp: "textWrap",
+    inherited: true,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["text-wrap-mode"],
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    applies_to_marker: true,
+    initial_values: ["wrap"],
+    other_values: ["nowrap"],
+    invalid_values: [],
+  },
+  "text-wrap-mode": {
+    domProp: "textWrapMode",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_cue: true,
+    applies_to_placeholder: true,
+    applies_to_marker: true,
+    initial_values: ["wrap"],
+    other_values: ["nowrap"],
+    invalid_values: ["none", "normal", "on", "off", "wrap nowrap"],
+  },
   top: {
     domProp: "top",
     inherited: false,
@@ -8542,7 +8565,8 @@ var gCSSProperties = {
   "white-space": {
     domProp: "whiteSpace",
     inherited: true,
-    type: CSS_TYPE_LONGHAND,
+    type: CSS_TYPE_TRUE_SHORTHAND,
+    subproperties: ["white-space-collapse", "text-wrap-mode"],
     applies_to_placeholder: true,
     applies_to_cue: true,
     applies_to_marker: true,
@@ -8557,6 +8581,22 @@ var gCSSProperties = {
     ],
     invalid_values: [],
   },
+  "white-space-collapse": {
+    domProp: "whiteSpaceCollapse",
+    inherited: true,
+    type: CSS_TYPE_LONGHAND,
+    applies_to_placeholder: true,
+    applies_to_cue: true,
+    applies_to_marker: true,
+    initial_values: ["collapse"],
+    other_values: [
+      "preserve",
+      "preserve-breaks",
+      "preserve-spaces",
+      "break-spaces",
+    ],
+    invalid_values: ["normal", "auto"],
+  },
   width: {
     domProp: "width",
     inherited: false,
@@ -13898,8 +13938,8 @@ gCSSProperties["scrollbar-gutter"] = {
 };
 
 if (IsCSSPropertyPrefEnabled("layout.css.text-wrap-balance.enabled")) {
-  gCSSProperties["text-wrap"] = {
-    domProp: "textWrap",
+  gCSSProperties["text-wrap-style"] = {
+    domProp: "textWrapStyle",
     inherited: true,
     type: CSS_TYPE_LONGHAND,
     applies_to_placeholder: true,
@@ -13909,6 +13949,11 @@ if (IsCSSPropertyPrefEnabled("layout.css.text-wrap-balance.enabled")) {
     other_values: ["stable", "balance"],
     invalid_values: ["wrap", "nowrap", "normal"],
   };
+  gCSSProperties["text-wrap"].subproperties.push("text-wrap-style");
+  gCSSProperties["text-wrap"].other_values.push("stable");
+  gCSSProperties["text-wrap"].other_values.push("balance");
+  gCSSProperties["text-wrap"].other_values.push("wrap stable");
+  gCSSProperties["text-wrap"].other_values.push("nowrap balance");
 }
 
 if (IsCSSPropertyPrefEnabled("layout.css.prefixes.transforms")) {