6 files changed, 68 insertions, 36 deletions
diff --git a/layout/style/test/ParseCSS.cpp b/layout/style/test/ParseCSS.cpp
index 04e37d48e2..e201d191a9 100644
--- a/layout/style/test/ParseCSS.cpp
+++ b/layout/style/test/ParseCSS.cpp
@@ -18,7 +18,6 @@
 #include "nsIFile.h"
 #include "nsNetUtil.h"
 
-#include "nsContentCID.h"
 #include "mozilla/StyleSheetInlines.h"
 #include "mozilla/css/Loader.h"
 
diff --git a/layout/style/test/animation_utils.js b/layout/style/test/animation_utils.js
index 6f7ededcd4..7239885e7c 100644
--- a/layout/style/test/animation_utils.js
+++ b/layout/style/test/animation_utils.js
@@ -4,6 +4,8 @@
 //
 //----------------------------------------------------------------------
 
+/* eslint-disable mozilla/no-comparison-or-assignment-inside-ok */
+
 function advance_clock(milliseconds) {
   SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds);
 }
diff --git a/layout/style/test/chrome/bug418986-2.js b/layout/style/test/chrome/bug418986-2.js
index 6d2af235c3..c945eecca0 100644
--- a/layout/style/test/chrome/bug418986-2.js
+++ b/layout/style/test/chrome/bug418986-2.js
@@ -1,5 +1,7 @@
 // # Bug 418986, part 2.
 
+/* eslint-disable mozilla/no-comparison-or-assignment-inside-ok */
+
 const is_chrome_window = window.location.protocol === "chrome:";
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
diff --git a/layout/style/test/mochitest.toml b/layout/style/test/mochitest.toml
index 9df86ea539..54ad9736f2 100644
--- a/layout/style/test/mochitest.toml
+++ b/layout/style/test/mochitest.toml
@@ -18,6 +18,7 @@ prefs = [
   "layout.css.basic-shape-rect.enabled=true",
   "layout.css.basic-shape-xywh.enabled=true",
   "layout.css.transform-box-content-stroke.enabled=true",
+  "layout.css.transition-behavior.enabled=true",
 ]
 support-files = [
   "animation_utils.js",
diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
index 422f2ffe5c..2e8b4c71a3 100644
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -13604,36 +13604,32 @@ if (IsCSSPropertyPrefEnabled("layout.css.backdrop-filter.enabled")) {
   };
 }
 
-if (IsCSSPropertyPrefEnabled("layout.css.math-depth.enabled")) {
-  gCSSProperties["math-depth"] = {
-    domProp: "mathDepth",
-    inherited: true,
-    type: CSS_TYPE_LONGHAND,
-    initial_values: ["0"],
-    other_values: [
-      // auto-add cannot be tested here because it has no effect when the
-      // inherited math-style is equal to the default (normal).
-      "123",
-      "-123",
-      "add(123)",
-      "add(-123)",
-      "calc(1 + 2*3)",
-      "add(calc(4 - 2/3))",
-    ],
-    invalid_values: ["auto", "1,23", "1.23", "add(1,23)", "add(1.23)"],
-  };
-}
+gCSSProperties["math-depth"] = {
+  domProp: "mathDepth",
+  inherited: true,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["0"],
+  other_values: [
+    // auto-add cannot be tested here because it has no effect when the
+    // inherited math-style is equal to the default (normal).
+    "123",
+    "-123",
+    "add(123)",
+    "add(-123)",
+    "calc(1 + 2*3)",
+    "add(calc(4 - 2/3))",
+  ],
+  invalid_values: ["auto", "1,23", "1.23", "add(1,23)", "add(1.23)"],
+};
 
-if (IsCSSPropertyPrefEnabled("layout.css.math-style.enabled")) {
-  gCSSProperties["math-style"] = {
-    domProp: "mathStyle",
-    inherited: true,
-    type: CSS_TYPE_LONGHAND,
-    initial_values: ["normal"],
-    other_values: ["compact"],
-    invalid_values: [],
-  };
-}
+gCSSProperties["math-style"] = {
+  domProp: "mathStyle",
+  inherited: true,
+  type: CSS_TYPE_LONGHAND,
+  initial_values: ["normal"],
+  other_values: ["compact"],
+  invalid_values: [],
+};
 
 if (IsCSSPropertyPrefEnabled("layout.css.forced-color-adjust.enabled")) {
   gCSSProperties["forced-color-adjust"] = {
@@ -14088,6 +14084,36 @@ if (IsCSSPropertyPrefEnabled("layout.css.prefixes.transitions")) {
   });
 }
 
+if (IsCSSPropertyPrefEnabled("layout.css.transition-behavior.enabled")) {
+  Object.assign(gCSSProperties, {
+    "transition-behavior": {
+      domProp: "transitionBehavior",
+      inherited: false,
+      type: CSS_TYPE_LONGHAND,
+      applies_to_marker: true,
+      initial_values: ["normal"],
+      other_values: ["allow-discrete"],
+      invalid_values: ["none", "auto", "discrete"],
+    },
+  });
+
+  gCSSProperties["transition"].subproperties.push("transition-behavior");
+  gCSSProperties["transition"].initial_values.push("normal");
+  gCSSProperties["transition"].other_values.push(
+    "allow-discrete",
+    "width allow-discrete",
+    "1s allow-discrete",
+    "linear allow-discrete"
+  );
+  gCSSProperties["-webkit-transition"].subproperties.push(
+    "transition-behavior"
+  );
+
+  if (IsCSSPropertyPrefEnabled("layout.css.prefixes.transitions")) {
+    gCSSProperties["-moz-transition"].subproperties.push("transition-behavior");
+  }
+}
+
 // Copy aliased properties' fields from their alias targets. Keep this logic
 // at the bottom of this file to ensure all the aliased properties are
 // processed.
diff --git a/layout/style/test/test_shorthand_property_getters.html b/layout/style/test/test_shorthand_property_getters.html
index cade526183..b5db9519a6 100644
--- a/layout/style/test/test_shorthand_property_getters.html
+++ b/layout/style/test/test_shorthand_property_getters.html
@@ -183,17 +183,19 @@ e.setAttribute("style", "background-position-x: 0px; background-position-y: top
 is(e.style.backgroundPosition, "left 0px top 0px", "should serialize to 4-value form if 3-value form would only have one edge");
 
 // Check that we only serialize transition when the lists are the same length.
-e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
+e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s; transition-behavior: normal, allow-discrete;");
 isnot(e.style.transition, "", "should have transition shorthand (lists same length)");
-e.setAttribute("style", "transition-property: color, width, left; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
+e.setAttribute("style", "transition-property: color, width, left; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s; transition-behavior: normal, allow-discrete;");
 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
-e.setAttribute("style", "transition-property: all; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
+e.setAttribute("style", "transition-property: all; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s; transition-behavior: normal, allow-discrete;");
 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
-e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms, 300ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s");
+e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms, 300ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s; transition-behavior: normal, allow-discrete;");
 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
-e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear, ease-out; transition-delay: 0s, 1s");
+e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear, ease-out; transition-delay: 0s, 1s; transition-behavior: normal, allow-discrete;");
 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
-e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s, 0s");
+e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s, 0s; transition-behavior: normal, allow-discrete;");
+is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
+e.setAttribute("style", "transition-property: color, width; transition-duration: 1s, 200ms; transition-timing-function: ease-in, linear; transition-delay: 0s, 1s; transition-behavior: normal, allow-discrete, normal;");
 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");
 e.setAttribute("style", "transition: color, width; transition-delay: 0s");
 is(e.style.transition, "", "should not have transition shorthand (lists different lengths)");