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 id3
push userfelipc@gmail.com
push dateFri, 30 Sep 2011 20:09:13 +0000
reviewersdbaron
bugs505115
milestone9.0a1
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);