Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-09 19:35:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 505115 - Part 17 - Add style tests for the new transform functions, and transitions. r=dbaron

Browse Source
This commit is contained in:
Matt Woodrow 2011-08-31 14:03:47 +12:00
parent 01e1bd10d1
commit 6be6f0f332
3 changed files with 59 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
layout/style/test/property_database.js
View File

@ -939,7 +939,9 @@ var gCSSProperties = {
"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%))",
@ -947,7 +949,9 @@ var gCSSProperties = {
"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",

52
layout/style/test/test_transitions_per_property.html
View File

@ -349,6 +349,11 @@ function get_distance(prop, v1, v2)
.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);
@ -1268,16 +1273,44 @@ function test_transform_transition(prop) {
{ 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',
@ -1292,6 +1325,14 @@ function test_transform_transition(prop) {
{ 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',
@ -1361,6 +1402,14 @@ function test_transform_transition(prop) {
{ 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',
@ -1521,6 +1570,9 @@ function test_transform_transition(prop) {
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);

2
modules/libpref/src/init/all.js
View File

@ -3346,4 +3346,4 @@ pref("alerts.totalOpenTime", 4000);
pref("alerts.disableSlidingEffect", false);
//3D Transforms
pref("layout.3d-transforms.enabled, false);
pref("layout.3d-transforms.enabled", false);