--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -6305,16 +6305,17 @@ if (SpecialPowers.DOMWindowUtils.isStyle
/* 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",
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -1,15 +1,16 @@
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=435441
-->
<head>
<title>Test for Bug 435441</title>
+ <meta charset=utf-8>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<script type="text/javascript" src="property_database.js"></script>
<script type="text/javascript" src="animation_utils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style type="text/css">
#display > p { margin-top: 0; margin-bottom: 0; }
@@ -320,16 +321,23 @@ if (SpecialPowers.getBoolPref("layout.cs
supported_properties["shape-outside"] =
[ test_basic_shape_or_url_transition ];
}
if (IsCSSPropertyPrefEnabled("layout.css.font-variations.enabled")) {
supported_properties["font-variation-settings"] = [ test_font_variations_transition ];
}
+if (IsCSSPropertyPrefEnabled("layout.css.individual-transform.enabled") &&
+ SpecialPowers.DOMWindowUtils.isStyledByServo) {
+ supported_properties["rotate"] = [ test_rotate_transition ];
+ supported_properties["scale"] = [ test_scale_transition ];
+ supported_properties["translate"] = [ test_translate_transition ];
+}
+
var div = document.getElementById("display");
var OMTAdiv = document.getElementById("transformTest");
var cs = getComputedStyle(div, "");
var OMTACs = getComputedStyle(OMTAdiv, "");
var winUtils = SpecialPowers.getDOMWindowUtils(window);
function computeMatrix(v) {
div.style.setProperty("transform", v, "");
@@ -1314,16 +1322,39 @@ function test_length_percent_calc_transi
check_distance(prop, "50%", "calc(37.5% + 50px)", "200px");
check_distance(prop, "calc(25% + 100px)", "calc(37.5% + 75px)",
"75%");
check_distance(prop, "150px", "calc(125px + 12.5%)",
"calc(50% + 50px)");
}
+function test_number_transition(prop) {
+ div.style.transitionProperty = 'none';
+ div.style[prop] = '10';
+ is(cs[prop], '10',
+ `number property ${prop}: computed value before transition`);
+ div.style.transitionProperty = prop;
+ div.style[prop] = '50';
+ is(cs[prop], '20', `number property ${prop}: interpolation of numbers`);
+ check_distance(prop, '10', '20', '50');
+}
+
+function test_angle_transition(prop) {
+ div.style.transitionProperty = 'none';
+ div.style[prop] = '45deg';
+ is(cs[prop], '45deg',
+ `angle property ${prop}: computed value before transition`);
+ div.style.transitionProperty = prop;
+ div.style[prop] = '145deg';
+ is(cs[prop], '70deg',
+ `angle property ${prop}: interpolation of angles`);
+ check_distance(prop, '45deg', '70deg', '145deg');
+}
+
function test_color_transition(prop, get_color=(x => x), is_shorthand=false) {
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "rgb(255, 28, 0)", "");
is(get_color(cs.getPropertyValue(prop)), "rgb(255, 28, 0)",
"color-valued property " + prop + ": computed value before transition");
div.style.setProperty("transition-property", prop, "");
div.style.setProperty(prop, "rgb(75, 84, 128)", "");
is(get_color(cs.getPropertyValue(prop)), "rgb(210, 42, 32)",
@@ -2575,16 +2606,90 @@ function test_transform_transition(prop)
}
}
// FIXME: should perhaps test that no clamping occurs
runOMTATest(runAsyncTests, SimpleTest.finish);
}
+function test_rotate_transition(prop) {
+ // One value: <angle>
+ test_angle_transition(prop);
+
+ // With axis: <number> <number> <number> <angle>
+ //
+ // We don't test for interpolation of the numbers here since it's quite
+ // complicated and this is tested by the web-platform tests for this property.
+ // Now that we have web-platform tests for animation properties the main
+ // purpose of the tests in this file is to check that transitions run on the
+ // properties we expect them to.
+ div.style.transitionProperty = 'none';
+ div.style[prop] = '0 1 0 45deg';
+ is(cs[prop], '0 1 0 45deg',
+ `rotate property ${prop}: computed value before transition`);
+ div.style.transitionProperty = prop;
+ div.style[prop] = '0 1 0 145deg';
+ is(cs[prop], '0 1 0 70deg',
+ `rotate property ${prop}: interpolation of angles`);
+ check_distance(prop, '0 1 0 45deg', '0 1 0 70deg', '0 1 0 145deg');
+}
+
+function test_scale_transition(prop) {
+ // One value: <number>
+ test_number_transition(prop);
+
+ // Two values: <number> <number>
+ div.style.transitionProperty = 'none';
+ div.style[prop] = '10 20';
+ is(cs[prop], '10 20',
+ `number property ${prop}: computed value before transition`);
+ div.style.transitionProperty = prop;
+ div.style[prop] = '50 60';
+ is(cs[prop], '20 30', `number property ${prop}: interpolation of numbers`);
+ check_distance(prop, '10 20', '20 30', '50 60');
+
+ // Three values: <number> <number> <number>
+ div.style.transitionProperty = 'none';
+ div.style[prop] = '10 20 30';
+ is(cs[prop], '10 20 30',
+ `number property ${prop}: computed value before transition`);
+ div.style.transitionProperty = prop;
+ div.style[prop] = '50 60 70';
+ is(cs[prop], '20 30 40', `number property ${prop}: interpolation of numbers`);
+ check_distance(prop, '10 20 30', '20 30 40', '50 60 70');
+}
+
+function test_translate_transition(prop) {
+ // One value: <length-percentage>
+ test_length_transition(prop);
+ test_length_unclamped(prop);
+ test_percent_transition(prop);
+ test_percent_unclamped(prop);
+
+ // Two values: <length-percentage> <length-percentage>
+ test_length_pair_transition(prop);
+ test_length_percent_pair_transition(prop);
+ test_length_percent_calc_transition(prop);
+ // We can't use test_length_percent_pair_unclamped here since
+ // it assumes that "0px 0px" is serialized as "0px 0px" but
+ // translate should serialize it as "0px".
+
+ // Three values: <length-percentage> <length-percentage> <length>
+ div.style.transitionProperty = 'none';
+ div.style[prop] = '10px 200% 30px';
+ is(cs[prop], '10px 20px 30px',
+ `translate property ${prop}: computed value before transition`);
+ div.style.transitionProperty = prop;
+ div.style[prop] = '50px 600% 70px';
+ is(cs[prop], '20px 30px 40px',
+ `translate property ${prop}: interpolation of three values`);
+ check_distance(prop, '10px 20px 30px', '20px 30px 40px', '50px 60px 70px');
+}
+
function test_font_variations_transition(prop) {
is(prop, "font-variation-settings", "only designed for one property");
div.style.setProperty("transition-property", "none", "");
div.style.setProperty(prop, "\"wght\" 0, \"wdth\" 1.5", "");
is(cs.getPropertyValue(prop), "\"wght\" 0, \"wdth\" 1.5",
"font-variation-settings property " + prop + ": computed value before transition");
div.style.setProperty("transition-property", prop, "");