diff --git a/devtools/client/shared/test/browser_outputparser.js b/devtools/client/shared/test/browser_outputparser.js
index bacbbafa227e..26131773c1b0 100644
--- a/devtools/client/shared/test/browser_outputparser.js
+++ b/devtools/client/shared/test/browser_outputparser.js
@@ -5,6 +5,7 @@
add_task(async function () {
await pushPref("layout.css.backdrop-filter.enabled", true);
+ await pushPref("layout.css.individual-transform.enabled", true);
await pushPref("layout.css.color-mix.enabled", true);
await pushPref("layout.css.motion-path-basic-shapes.enabled", true);
await addTab("about:blank");
diff --git a/dom/animation/test/chrome.toml b/dom/animation/test/chrome.toml
index c01a4ff162bc..0b324f223420 100644
--- a/dom/animation/test/chrome.toml
+++ b/dom/animation/test/chrome.toml
@@ -6,6 +6,7 @@ prefs = [
"gfx.omta.background-color=true",
"layout.css.basic-shape-rect.enabled=true",
"layout.css.basic-shape-xywh.enabled=true",
+ "layout.css.individual-transform.enabled=true",
"layout.css.motion-path-basic-shapes.enabled=true",
"layout.css.motion-path-coord-box.enabled=true",
"layout.css.motion-path-offset-position.enabled=true",
diff --git a/dom/animation/test/mochitest.ini b/dom/animation/test/mochitest.ini
index 89f2dfa4780f..14743e3407f4 100644
--- a/dom/animation/test/mochitest.ini
+++ b/dom/animation/test/mochitest.ini
@@ -6,6 +6,7 @@ prefs =
dom.animations-api.implicit-keyframes.enabled=true
dom.animations-api.timelines.enabled=true
gfx.omta.background-color=true
+ layout.css.individual-transform.enabled=true
layout.css.scroll-driven-animations.enabled=true
gfx.font_loader.delay=0
# Support files for chrome tests that we want to load over HTTP need
diff --git a/gfx/tests/crashtests/crashtests.list b/gfx/tests/crashtests/crashtests.list
index 451d49091e03..d3c9efef11d5 100644
--- a/gfx/tests/crashtests/crashtests.list
+++ b/gfx/tests/crashtests/crashtests.list
@@ -183,9 +183,9 @@ load 1509123.html
pref(widget.windows.window_occlusion_tracking.enabled,false) load 1494062-blob-image-wraplist-clip.html # Bug 1819154
load texture-allocator-zero-region.html
load 1524418.html
-load 1529149.html
+pref(layout.css.individual-transform.enabled,true) load 1529149.html
load 1541113.html
-load 1547169.html
+pref(layout.css.individual-transform.enabled,true) load 1547169.html
load 1535657.html
load 1566206.html
load 1615141.html
diff --git a/layout/base/crashtests/crashtests.list b/layout/base/crashtests/crashtests.list
index 31d4aeef480a..31b8ac7d7360 100644
--- a/layout/base/crashtests/crashtests.list
+++ b/layout/base/crashtests/crashtests.list
@@ -517,7 +517,7 @@ load 1506314.html
load 1507244.html
load 1510080.html
load 1510485.html
-load 1511442.html
+pref(layout.css.individual-transform.enabled,true) load 1511442.html
load 1511535.html
load 1511563.html
load 1516286-empty-mask.html
diff --git a/layout/base/tests/chrome/chrome.toml b/layout/base/tests/chrome/chrome.toml
index f26f8d1d1ec4..adf2a7ea1525 100644
--- a/layout/base/tests/chrome/chrome.toml
+++ b/layout/base/tests/chrome/chrome.toml
@@ -1,6 +1,7 @@
[DEFAULT]
prefs = [
"dom.window.sizeToContent.enabled=true",
+ "layout.css.individual-transform.enabled=true",
]
skip-if = ["os == 'android'"]
support-files = [
diff --git a/layout/reftests/transform/reftest.list b/layout/reftests/transform/reftest.list
index d2becc4dbfdc..09876c277a0c 100644
--- a/layout/reftests/transform/reftest.list
+++ b/layout/reftests/transform/reftest.list
@@ -149,7 +149,7 @@ fails == translate-rounding-3.html translate-rounding-viewport-ref.html # bug 13
== invalidate-transform-1.html invalidate-transform-1-ref.html
== invalidate-svg-scale-1.html invalidate-svg-scale-1-ref.html
# Bug 1526847
-== animate-layer-scale-inherit-4.html animate-layer-scale-inherit-4-ref.html
+pref(layout.css.individual-transform.enabled,true) == animate-layer-scale-inherit-4.html animate-layer-scale-inherit-4-ref.html
fuzzy-if(winWidget,0-1,0-1000) == 1569215-1.html 1569215-1-ref.html
== transform-anon-block-1.html transform-anon-block-1-ref.html
diff --git a/layout/style/crashtests/crashtests.list b/layout/style/crashtests/crashtests.list
index 443bc9319995..1cbabe34f56a 100644
--- a/layout/style/crashtests/crashtests.list
+++ b/layout/style/crashtests/crashtests.list
@@ -312,7 +312,7 @@ load 1580307.html
load 1581579.html
skip-if(release_or_beta) pref(dom.paintWorklet.enabled,true) load 1593766.html # bug 1581896
load 1594949.html
-load 1594960.html
+pref(layout.css.individual-transform.enabled,true) load 1594960.html
load 1586444.html
load 1599286.html
load 1609786.html
diff --git a/layout/style/test/file_specified_value_serialization_individual_transforms.html b/layout/style/test/file_specified_value_serialization_individual_transforms.html
new file mode 100644
index 000000000000..9dcf85f95599
--- /dev/null
+++ b/layout/style/test/file_specified_value_serialization_individual_transforms.html
@@ -0,0 +1,65 @@
+
+
+Test for Bug 1207734 (individual transforms)
+
+
diff --git a/layout/style/test/mochitest.ini b/layout/style/test/mochitest.ini
index fb6fe2e517fc..94ec019631be 100644
--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -9,6 +9,7 @@ prefs =
gfx.omta.background-color=true
gfx.font_loader.delay=0
layout.css.container-queries.enabled=true
+ layout.css.individual-transform.enabled=true
layout.css.motion-path-ray.enabled=true
layout.css.motion-path-basic-shapes.enabled=true
layout.css.motion-path-coord-box.enabled=true
@@ -371,6 +372,7 @@ support-files = file_shared_sheet_caching.css file_shared_sheet_caching.html
fail-if = xorigin
[test_shorthand_property_getters.html]
[test_specified_value_serialization.html]
+support-files = file_specified_value_serialization_individual_transforms.html
[test_style_attr_listener.html]
[test_style_attribute_quirks.html]
[test_style_attribute_standards.html]
diff --git a/layout/style/test/property_database.js b/layout/style/test/property_database.js
index 7d341dde8204..408b4ff5bc32 100644
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -11879,120 +11879,122 @@ function get_computed_value(cs, property) {
}
}
-gCSSProperties.rotate = {
- domProp: "rotate",
- inherited: false,
- type: CSS_TYPE_LONGHAND,
- initial_values: ["none"],
- other_values: [
- "45deg",
- "45grad",
- "72rad",
- "0.25turn",
- ".57rad",
- "0 0 0 0rad",
- "0 0 1 45deg",
- "0 0 1 0rad",
- "0rad 0 0 1",
- "10rad 10 20 30",
- "x 10rad",
- "y 10rad",
- "z 10rad",
- "10rad x",
- "10rad y",
- "10rad z",
- /* valid calc() values */
- "calc(1) 0 0 calc(45deg + 5rad)",
- "0 1 0 calc(400grad + 1rad)",
- "calc(0.5turn + 10deg)",
- ],
- invalid_values: [
- "0",
- "7",
- "0, 0, 1, 45deg",
- "0 0 45deg",
- "0 0 20rad",
- "0 0 0 0",
- "x x 10rad",
- "x y 10rad",
- "0 0 1 10rad z",
- "0 0 1 z 10rad",
- "z 0 0 1 10rad",
- "0 0 z 1 10rad",
- /* invalid calc() values */
- "0.5 1 0 calc(45deg + 10)",
- "calc(0.5turn + 10%)",
- ],
-};
+if (IsCSSPropertyPrefEnabled("layout.css.individual-transform.enabled")) {
+ gCSSProperties.rotate = {
+ domProp: "rotate",
+ inherited: false,
+ type: CSS_TYPE_LONGHAND,
+ initial_values: ["none"],
+ other_values: [
+ "45deg",
+ "45grad",
+ "72rad",
+ "0.25turn",
+ ".57rad",
+ "0 0 0 0rad",
+ "0 0 1 45deg",
+ "0 0 1 0rad",
+ "0rad 0 0 1",
+ "10rad 10 20 30",
+ "x 10rad",
+ "y 10rad",
+ "z 10rad",
+ "10rad x",
+ "10rad y",
+ "10rad z",
+ /* valid calc() values */
+ "calc(1) 0 0 calc(45deg + 5rad)",
+ "0 1 0 calc(400grad + 1rad)",
+ "calc(0.5turn + 10deg)",
+ ],
+ invalid_values: [
+ "0",
+ "7",
+ "0, 0, 1, 45deg",
+ "0 0 45deg",
+ "0 0 20rad",
+ "0 0 0 0",
+ "x x 10rad",
+ "x y 10rad",
+ "0 0 1 10rad z",
+ "0 0 1 z 10rad",
+ "z 0 0 1 10rad",
+ "0 0 z 1 10rad",
+ /* invalid calc() values */
+ "0.5 1 0 calc(45deg + 10)",
+ "calc(0.5turn + 10%)",
+ ],
+ };
-gCSSProperties.translate = {
- domProp: "translate",
- inherited: false,
- type: CSS_TYPE_LONGHAND,
- prerequisites: { width: "10px", height: "10px", display: "block" },
- initial_values: ["none"],
- other_values: [
- "-4px",
- "3px",
- "4em",
- "50%",
- "4px 5px 6px",
- "4px 5px",
- "50% 5px 6px",
- "50% 10% 6em",
- /* valid calc() values */
- "calc(5px + 10%)",
- "calc(0.25 * 5px + 10% / 3)",
- "calc(5px - 10% * 3)",
- "calc(5px - 3 * 10%) 50px",
- "-50px calc(5px - 10% * 3)",
- "10px calc(min(5px,10%))",
- ],
- invalid_values: [
- "1",
- "-moz-min(5px,10%)",
- "4px, 5px, 6px",
- "3px 4px 1px 7px",
- "4px 5px 10%",
- /* invalid calc() values */
- "calc(max(5px,10%) 10%)",
- "calc(nonsense)",
- ],
-};
-gCSSProperties.scale = {
- domProp: "scale",
- inherited: false,
- type: CSS_TYPE_LONGHAND,
- initial_values: ["none"],
- other_values: [
- "10",
- "10%",
- "10 20",
- "10% 20%",
- "10 20 30",
- "10% 20% 30%",
- "10 20% 30",
- "-10",
- "-10%",
- "-10 20",
- "-10% 20%",
- "-10 20 -30",
- "-10% 20% -30%",
- "-10 20% -30",
- "0 2.0",
- /* valid calc() values */
- "calc(1 + 2)",
- "calc(10) calc(20) 30",
- ],
- invalid_values: [
- "10px",
- "10deg",
- "10, 20, 30",
- /* invalid calc() values */
- "calc(1 + 20%)",
- "10 calc(1 + 10px)",
- ],
-};
+ gCSSProperties.translate = {
+ domProp: "translate",
+ inherited: false,
+ type: CSS_TYPE_LONGHAND,
+ prerequisites: { width: "10px", height: "10px", display: "block" },
+ initial_values: ["none"],
+ other_values: [
+ "-4px",
+ "3px",
+ "4em",
+ "50%",
+ "4px 5px 6px",
+ "4px 5px",
+ "50% 5px 6px",
+ "50% 10% 6em",
+ /* valid calc() values */
+ "calc(5px + 10%)",
+ "calc(0.25 * 5px + 10% / 3)",
+ "calc(5px - 10% * 3)",
+ "calc(5px - 3 * 10%) 50px",
+ "-50px calc(5px - 10% * 3)",
+ "10px calc(min(5px,10%))",
+ ],
+ invalid_values: [
+ "1",
+ "-moz-min(5px,10%)",
+ "4px, 5px, 6px",
+ "3px 4px 1px 7px",
+ "4px 5px 10%",
+ /* invalid calc() values */
+ "calc(max(5px,10%) 10%)",
+ "calc(nonsense)",
+ ],
+ };
+ gCSSProperties.scale = {
+ domProp: "scale",
+ inherited: false,
+ type: CSS_TYPE_LONGHAND,
+ initial_values: ["none"],
+ other_values: [
+ "10",
+ "10%",
+ "10 20",
+ "10% 20%",
+ "10 20 30",
+ "10% 20% 30%",
+ "10 20% 30",
+ "-10",
+ "-10%",
+ "-10 20",
+ "-10% 20%",
+ "-10 20 -30",
+ "-10% 20% -30%",
+ "-10 20% -30",
+ "0 2.0",
+ /* valid calc() values */
+ "calc(1 + 2)",
+ "calc(10) calc(20) 30",
+ ],
+ invalid_values: [
+ "10px",
+ "10deg",
+ "10, 20, 30",
+ /* invalid calc() values */
+ "calc(1 + 20%)",
+ "10 calc(1 + 10px)",
+ ],
+ };
+}
if (
IsCSSPropertyPrefEnabled("layout.css.transform-box-content-stroke.enabled")
diff --git a/layout/style/test/test_specified_value_serialization.html b/layout/style/test/test_specified_value_serialization.html
index 23449de4cc7f..cb7e67dda780 100644
--- a/layout/style/test/test_specified_value_serialization.html
+++ b/layout/style/test/test_specified_value_serialization.html
@@ -266,49 +266,14 @@
p.remove();
})();
-(function test_bug_1207734 () {
- // Test for rotate property serialization.
- [
- [" 90deg ", "90deg"],
- [" 100grad ", "100grad"],
- [" 100gRaD ", "100grad"],
- [" 0.25turn ", "0.25turn"],
- [" 0.25tUrN ", "0.25turn"],
- [" 1.57RaD ", "1.57rad"],
- ].forEach(function(arr) {
- document.documentElement.style.rotate = arr[0];
- is(document.documentElement.style.rotate, arr[1],
- "bug-1207734: incorrect rotate serialization");
- });
- document.documentElement.style.rotate = "";
-
- // Test for translate property serialization.
- [
- [" 50% 5px 6px ", "50% 5px 6px"],
- [" 50% 10px 100px ", "50% 10px 100px"],
- [" 4px 5px ", "4px 5px"],
- [" 10% 10% 99px ", "10% 10% 99px"],
- [" 50px ", "50px"],
- ].forEach(function(arr) {
- document.documentElement.style.translate = arr[0];
- is(document.documentElement.style.translate, arr[1],
- "bug-1207734: incorrect translate serialization");
- });
- document.documentElement.style.translate = "";
-
- // Test for scale property serialization.
- [
- [" 10 ", "10"],
- [" 10 20.5 ", "10 20.5"],
- [" 10 20 30 ", "10 20 30"],
- ].forEach(function(arr) {
- document.documentElement.style.scale = arr[0];
- is(document.documentElement.style.scale, arr[1],
- "bug-1207734: incorrect scale serialization");
- });
-
- document.documentElement.style.scale = "";
-})()
+SimpleTest.waitForExplicitFinish();
+SpecialPowers.pushPrefEnv(
+ {
+ set: [['layout.css.individual-transform.enabled', true]],
+ },
+ () =>
+ window.open('file_specified_value_serialization_individual_transforms.html')
+);
diff --git a/layout/style/test/test_transitions_per_property.html b/layout/style/test/test_transitions_per_property.html
index a594565074e0..105b0e47e01e 100644
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -360,11 +360,11 @@ if (IsCSSPropertyPrefEnabled("layout.css.font-variations.enabled")) {
supported_properties["font-variation-settings"] = [ test_font_variations_transition ];
}
-
-supported_properties["rotate"] = [ test_rotate_transition ];
-supported_properties["scale"] = [ test_scale_transition ];
-supported_properties["translate"] = [ test_translate_transition ];
-
+if (IsCSSPropertyPrefEnabled("layout.css.individual-transform.enabled")) {
+ supported_properties["rotate"] = [ test_rotate_transition ];
+ supported_properties["scale"] = [ test_scale_transition ];
+ supported_properties["translate"] = [ test_translate_transition ];
+}
if (IsCSSPropertyPrefEnabled("layout.css.contain-intrinsic-size.enabled")) {
supported_properties["contain-intrinsic-width"] = [ test_length_transition, test_auto_with_length_transition ];
diff --git a/modules/libpref/init/StaticPrefList.yaml b/modules/libpref/init/StaticPrefList.yaml
index bcc716f32825..04017616fe35 100644
--- a/modules/libpref/init/StaticPrefList.yaml
+++ b/modules/libpref/init/StaticPrefList.yaml
@@ -8474,6 +8474,12 @@
mirror: always
rust: true
+# Is support for CSS individual transform enabled?
+- name: layout.css.individual-transform.enabled
+ type: bool
+ value: true
+ mirror: always
+
# Is support for CSS initial-letter property enabled?
- name: layout.css.initial-letter.enabled
type: bool
diff --git a/servo/components/style/properties/longhands/box.mako.rs b/servo/components/style/properties/longhands/box.mako.rs
index c56c1504f15a..fec1d757517c 100644
--- a/servo/components/style/properties/longhands/box.mako.rs
+++ b/servo/components/style/properties/longhands/box.mako.rs
@@ -191,6 +191,7 @@ ${helpers.predefined_type(
animation_value_type="ComputedValue",
boxed=True,
flags="CAN_ANIMATE_ON_COMPOSITOR",
+ gecko_pref="layout.css.individual-transform.enabled",
spec="https://drafts.csswg.org/css-transforms-2/#individual-transforms",
servo_restyle_damage = "reflow_out_of_flow",
affects="overflow",
@@ -204,6 +205,7 @@ ${helpers.predefined_type(
animation_value_type="ComputedValue",
boxed=True,
flags="CAN_ANIMATE_ON_COMPOSITOR",
+ gecko_pref="layout.css.individual-transform.enabled",
spec="https://drafts.csswg.org/css-transforms-2/#individual-transforms",
servo_restyle_damage = "reflow_out_of_flow",
affects="overflow",
@@ -217,6 +219,7 @@ ${helpers.predefined_type(
animation_value_type="ComputedValue",
boxed=True,
flags="CAN_ANIMATE_ON_COMPOSITOR",
+ gecko_pref="layout.css.individual-transform.enabled",
spec="https://drafts.csswg.org/css-transforms-2/#individual-transforms",
servo_restyle_damage="reflow_out_of_flow",
affects="overflow",
diff --git a/testing/web-platform/meta/css/css-position/position-absolute-dynamic-static-position-table-cell.html.ini b/testing/web-platform/meta/css/css-position/position-absolute-dynamic-static-position-table-cell.html.ini
new file mode 100644
index 000000000000..7e4343ae6b3d
--- /dev/null
+++ b/testing/web-platform/meta/css/css-position/position-absolute-dynamic-static-position-table-cell.html.ini
@@ -0,0 +1,2 @@
+[position-absolute-dynamic-static-position-table-cell.html]
+ prefs: [layout.css.individual-transform.enabled:true]
diff --git a/testing/web-platform/meta/css/motion/__dir__.ini b/testing/web-platform/meta/css/motion/__dir__.ini
index d852a241b287..7685588b3d31 100644
--- a/testing/web-platform/meta/css/motion/__dir__.ini
+++ b/testing/web-platform/meta/css/motion/__dir__.ini
@@ -1 +1 @@
-prefs: [dom.animations-api.core.enabled:true, layout.css.motion-path-ray.enabled:true, layout.css.motion-path-offset-position.enabled:true, layout.css.motion-path-basic-shapes.enabled:true, layout.css.motion-path-coord-box.enabled:true, layout.css.basic-shape-rect.enabled:true, layout.css.basic-shape-xywh.enabled:true, layout.css.motion-path-url.enabled:true]
+prefs: [layout.css.individual-transform.enabled:true, dom.animations-api.core.enabled:true, layout.css.motion-path-ray.enabled:true, layout.css.motion-path-offset-position.enabled:true, layout.css.motion-path-basic-shapes.enabled:true, layout.css.motion-path-coord-box.enabled:true, layout.css.basic-shape-rect.enabled:true, layout.css.basic-shape-xywh.enabled:true, layout.css.motion-path-url.enabled:true]
diff --git a/testing/web-platform/meta/css/vendor-imports/mozilla/mozilla-central-reftests/will-change/__dir__.ini b/testing/web-platform/meta/css/vendor-imports/mozilla/mozilla-central-reftests/will-change/__dir__.ini
new file mode 100644
index 000000000000..183157cfec33
--- /dev/null
+++ b/testing/web-platform/meta/css/vendor-imports/mozilla/mozilla-central-reftests/will-change/__dir__.ini
@@ -0,0 +1 @@
+prefs: [layout.css.individual-transform.enabled:true]
diff --git a/testing/web-platform/meta/scroll-animations/css/__dir__.ini b/testing/web-platform/meta/scroll-animations/css/__dir__.ini
index 3c524bfcd803..27673b4d052c 100644
--- a/testing/web-platform/meta/scroll-animations/css/__dir__.ini
+++ b/testing/web-platform/meta/scroll-animations/css/__dir__.ini
@@ -1 +1 @@
-prefs: [layout.css.scroll-driven-animations.enabled:true]
+prefs: [layout.css.scroll-driven-animations.enabled:true, layout.css.individual-transform.enabled:true]