Bug 505115 - Part 17 - Add style tests for the new transform functions, and transitions. r=dbaron
authorMatt Woodrow <mwoodrow@mozilla.com>
Wed, 31 Aug 2011 14:03:47 +1200
changeset 76252 9f201033b0e6531650c460044d87efacd0a69984
parent 76251 819f2a8e13189a7178b58df59be25e92728b48b6
child 76253 c29ca6c939c802e888b20e37fb785262d64341e3
push id21087
push usermak77@bonardo.net
push dateWed, 31 Aug 2011 08:44:58 +0000
treeherdermozilla-central@c7e6f57e1732 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdbaron
bugs505115
milestone9.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 505115 - Part 17 - Add style tests for the new transform functions, and transitions. r=dbaron
layout/style/test/property_database.js
layout/style/test/test_transitions_per_property.html
modules/libpref/src/init/all.js
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -934,25 +934,29 @@ var gCSSProperties = {
 		other_values: [ "translatex(1px)", "translatex(4em)", "translatex(-4px)", "translatex(3px)", "translatex(0px) translatex(1px) translatex(2px) translatex(3px) translatex(4px)", "translatey(4em)", "translate(3px)", "translate(10px, -3px)", "rotate(45deg)", "rotate(45grad)", "rotate(45rad)", "rotate(0)", "scalex(10)", "scaley(10)", "scale(10)", "scale(10, 20)", "skewx(30deg)", "skewx(0)", "skewy(0)", "skewx(30grad)", "skewx(30rad)", "skewy(30deg)", "skewy(30grad)", "skewy(30rad)", "matrix(1, 2, 3, 4, 5px, 6em)", "rotate(45deg) scale(2, 1)", "skewx(45deg) skewx(-50grad)", "translate(0, 0) scale(1, 1) skewx(0) skewy(0) matrix(1, 0, 0, 1, 0, 0)", "translatex(50%)", "translatey(50%)", "translate(50%)", "translate(3%, 5px)", "translate(5px, 3%)", "matrix(1, 2, 3, 4, 5px, 6%)", "matrix(1, 2, 3, 4, 5%, 6px)", "matrix(1, 2, 3, 4, 5%, 6%)",
 			/* valid calc() values */
 			"translatex(-moz-calc(5px + 10%))",
 			"translatey(-moz-calc(0.25 * 5px + 10% / 3))",
 			"translate(-moz-calc(5px - 10% * 3))",
 			"translate(-moz-calc(5px - 3 * 10%), 50px)",
 			"translate(-50px, -moz-calc(5px - 10% * 3))",
 			"matrix(1, 0, 0, 1, -moz-calc(5px * 3), -moz-calc(10% - 3px))"
-		],
+		].concat(SpecialPowers.getBoolPref("layout.3d-transforms.enabled") ? [
+            "translatez(1px)", "translatez(4em)", "translatez(-4px)", "translatez(0px)", "translatez(2px) translatez(5px)", "translate3d(3px, 4px, 5px)", "translate3d(2em, 3px, 1em)", "translatex(2px) translate3d(4px, 5px, 6px) translatey(1px)", "scale3d(4, 4, 4)", "scale3d(-2, 3, -7)", "scalez(4)", "scalez(-6)", "rotate3d(2, 3, 4, 45deg)", "rotate3d(-3, 7, 0, 12rad)", "rotatex(15deg)", "rotatey(-12grad)", "rotatez(72rad)", "perspective(1000px)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)"
+		] : []),
 		invalid_values: ["1px", "#0000ff", "red", "auto", "translatex(1px 1px)", "translatex(translatex(1px))", "translatex(#0000ff)", "translatex(red)", "translatey()", "matrix(1, 2, 3, 4, 5, 6)", "matrix(1px, 2px, 3px, 4px, 5px, 6px)", "scale(150%)", "skewx(red)", "matrix(1%, 0, 0, 0, 0px, 0px)", "matrix(0, 1%, 2, 3, 4px,5px)", "matrix(0, 1, 2%, 3, 4px, 5px)", "matrix(0, 1, 2, 3%, 4%, 5%)",
 			/* invalid calc() values */
 			"translatey(-moz-min(5px,10%))",
 			"translatex(-moz-max(5px,10%))",
 			"translate(10px, -moz-calc(min(5px,10%)))",
 			"translate(-moz-calc(max(5px,10%)), 10%)",
 			"matrix(1, 0, 0, 1, -moz-max(5px * 3), -moz-calc(10% - 3px))"
-		]
+		].concat(SpecialPowers.getBoolPref("layout.3d-transforms.enabled") ? [
+            "perspective(0px)", "perspective(-10px)", "matrix3d(dinosaur)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17)", "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)", "rotatey(words)", "rotatex(7)", "translate3d(3px, 4px, 1px, 7px)"
+		] : [])
 	},
 	"-moz-transform-origin": {
 		domProp: "MozTransformOrigin",
 		inherited: false,
 		type: CSS_TYPE_LONGHAND,
 		/* no subproperties */
 		prerequisites: { "width": "10px", "height": "10px", "display": "block"},
 		initial_values: [ "50% 50%", "center", "center center" ],
--- a/layout/style/test/test_transitions_per_property.html
+++ b/layout/style/test/test_transitions_per_property.html
@@ -344,16 +344,21 @@ for (prop in supported_properties) {
 div.style.removeProperty("-moz-transition");
 
 function get_distance(prop, v1, v2)
 {
   return SpecialPowers.DOMWindowUtils
            .computeAnimationDistance(div, prop, v1, v2);
 }
 
+function transform3D_enabled()
+{
+  return SpecialPowers.getBoolPref("layout.3d-transforms.enabled");
+}
+
 function check_distance(prop, start, quarter, end)
 {
   var sq = get_distance(prop, start, quarter);
   var se = get_distance(prop, start, end);
   var qe = get_distance(prop, quarter, end);
 
   ok(Math.abs((sq * 4 - se) / se) < 0.0001, "property '" + prop + "': distance " + sq + " from start '" + start + "' to quarter '" + quarter + "' should be quarter distance " + se + " from start '" + start + "' to end '" + end + "'");
   ok(Math.abs((qe * 4 - se * 3) / se) < 0.0001, "property '" + prop + "': distance " + qe + " from quarter '" + quarter + "' to end '" + end + "' should be three quarters distance " + se + " from start '" + start + "' to end '" + end + "'");
@@ -1263,40 +1268,76 @@ function test_transform_transition(prop)
     { start: 'rotate(0deg)', end: 'rotate(60deg)',
       expected_uncomputed: 'rotate(15deg)',
       expected: c_rot_15 },
     { start: 'none', end: c_rot_60,
       expected: c_rot_15 },
     { start: 'none', end: 'rotate(360deg)',
       expected_uncomputed: 'rotate(90deg)',
       expected: c('rotate(90deg)') },
+    { start: 'none', end: 'rotatez(360deg)',
+      expected_uncomputed: 'rotate(90deg)',
+      expected: c('rotate(90deg)'),
+      requires_3d: true },
     { start: 'none', end: 'rotate(720deg)',
       expected_uncomputed: 'rotate(180deg)',
       expected: c('rotate(180deg)') },
+    { start: 'none', end: 'rotate(720deg)',
+      expected_uncomputed: 'rotatez(180deg)',
+      expected: c('rotate(180deg)'),
+      requires_3d: true },
     { start: 'none', end: 'rotate(1080deg)',
       expected_uncomputed: 'rotate(270deg)',
       expected: c('rotate(270deg)') },
+    { start: 'none', end: 'rotate(1080deg)',
+      expected_uncomputed: 'rotate(270deg)',
+      expected: c('rotatez(270deg)'),
+      requires_3d: true },
     { start: 'none', end: 'rotate(1440deg)',
       expected_uncomputed: 'rotate(360deg)',
       expected: c('scale(1)'),
       round_error_ok: true },
+    { start: 'none', end: 'rotatey(60deg)',
+      expected_uncomputed: 'rotatey(15deg)',
+      expected: c('rotatey(15deg)'),
+      requires_3d: true },
+    { start: 'none', end: 'rotatey(720deg)',
+      expected_uncomputed: 'rotatey(180deg)',
+      expected: c('rotatey(180deg)'),
+      requires_3d: true },
+    { start: 'none', end: 'rotatex(60deg)',
+      expected_uncomputed: 'rotatex(15deg)',
+      expected: c('rotatex(15deg)'),
+      requires_3d: true },
+    { start: 'none', end: 'rotatex(720deg)',
+      expected_uncomputed: 'rotatex(180deg)',
+      expected: c('rotatex(180deg)'),
+      requires_3d: true },
 
     // translate
     { start: 'translate(20px)', end: 'none',
       expected_uncomputed: 'translate(15px)',
       expected: 'matrix(1, 0, 0, 1, 15px, 0px)' },
     { start: 'translate(20px, 12px)', end: 'none',
       expected_uncomputed: 'translate(15px, 9px)',
       expected: 'matrix(1, 0, 0, 1, 15px, 9px)' },
     { start: 'translateX(-20px)', end: 'none',
       expected_uncomputed: 'translateX(-15px)',
       expected: 'matrix(1, 0, 0, 1, -15px, 0px)' },
     { start: 'translateY(-40px)', end: 'none',
       expected_uncomputed: 'translateY(-30px)',
       expected: 'matrix(1, 0, 0, 1, 0px, -30px)' },
+    { start: 'translateZ(40px)', end: 'none',
+      expected_uncomputed: 'translateZ(30px)',
+      expected: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 30, 1)',
+      requires_3d: true },
+    { start: 'none', end: 'translate3D(40px, 60px, -40px)',
+      expected_uncomputed: 'translate3D(10px, 15px, -10px)',
+      expected: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10, 15, -10, 1)',
+      requires_3d: true },
     // percentages are relative to 300px (width) and 50px (height)
     // per the prerequisites in property_database.js
     { start: 'translate(20%)', end: 'none',
       expected_uncomputed: 'translate(15%)',
       expected: 'matrix(1, 0, 0, 1, 45px, 0px)',
       round_error_ok: true },
     { start: 'translate(20%, 12%)', end: 'none',
       expected_uncomputed: 'translate(15%, 9%)',
@@ -1356,16 +1397,24 @@ function test_transform_transition(prop)
       expected: 'matrix(1.75, 0, 0, 0.55, 0px, 0px)',
       round_error_ok: true },
     { start: 'scaleX(3)', end: 'none',
       expected_uncomputed: 'scaleX(2.5)',
       expected: 'matrix(2.5, 0, 0, 1, 0px, 0px)' },
     { start: 'scaleY(5)', end: 'none',
       expected_uncomputed: 'scaleY(4)',
       expected: 'matrix(1, 0, 0, 4, 0px, 0px)' },
+    { start: 'scaleZ(5)', end: 'none',
+      expected_uncomputed: 'scaleZ(4)',
+      expected: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1)',
+      requires_3d: true },
+    { start: 'none', end: 'scale3D(5, 5, 5)',
+      expected_uncomputed: 'scale3D(2, 2, 2)',
+      expected: 'matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)',
+      requires_3d: true },
 
     // skew
     { start: 'skewX(45deg)', end: 'none',
       expected_uncomputed: 'skewX(33.75deg)' },
     { start: 'skewY(45deg)', end: 'none',
       expected_uncomputed: 'skewY(33.75deg)' },
     { start: 'skew(45deg)', end: 'none',
       expected_uncomputed: 'skew(33.75deg)' },
@@ -1516,16 +1565,19 @@ function test_transform_transition(prop)
       } else {
         test.expected = c(v);
       }
     }
   }
 
   for (var i in tests) {
     var test = tests[i];
+    if (test.requires_3d && !transform3D_enabled()) {
+      continue;
+    }
     div.style.setProperty("-moz-transition-property", "none", "");
     div.style.setProperty(prop, test.start, "");
     cs.getPropertyValue(prop);
     div.style.setProperty("-moz-transition-property", prop, "");
     div.style.setProperty(prop, test.end, "");
     var actual = cs.getPropertyValue(prop);
     if (!test.round_error_ok || actual == test.expected) {
       // In most cases, we'll get an exact match, but in some cases
--- a/modules/libpref/src/init/all.js
+++ b/modules/libpref/src/init/all.js
@@ -3341,9 +3341,9 @@ pref("notification.feature.enabled", fal
 
 // Alert sliding effect
 pref("alerts.slideIncrement", 1);
 pref("alerts.slideIncrementTime", 10);
 pref("alerts.totalOpenTime", 4000);
 pref("alerts.disableSlidingEffect", false);
  
 //3D Transforms
-pref("layout.3d-transforms.enabled, false);
+pref("layout.3d-transforms.enabled", false);