Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-12-02 01:48:05 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 719446 - getComputedStyle().MozTransform shouldn't have "px" in it; r=roc

Browse Source
This commit is contained in:
Aryeh Gregor 2012-02-10 21:04:59 +00:00
parent 16c8366afc
commit bf4fa20100
4 changed files with 60 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
layout/base/tests/test_bug435293-scale.html
View File

@ -70,15 +70,15 @@ runtests();
function runtests() {
var style = window.getComputedStyle(document.getElementById("test1"), "");
is(style.getPropertyValue("-moz-transform"), "matrix(0.5, 0, 0, 1, 0px, 0px)",
is(style.getPropertyValue("-moz-transform"), "matrix(0.5, 0, 0, 1, 0, 0)",
"Scalex proper matrix is applied");
style = window.getComputedStyle(document.getElementById("test2"), "");
is(style.getPropertyValue("-moz-transform"), "matrix(1, 0, 0, 0.5, 0px, 0px)",
is(style.getPropertyValue("-moz-transform"), "matrix(1, 0, 0, 0.5, 0, 0)",
"Scaley proper matrix is applied");
style = window.getComputedStyle(document.getElementById("test3"), "");
is(style.getPropertyValue("-moz-transform"), "matrix(0.5, 0, 0, 0.5, 0px, 0px)",
is(style.getPropertyValue("-moz-transform"), "matrix(0.5, 0, 0, 0.5, 0, 0)",
"Scale proper matrix is applied");
style = window.getComputedStyle(document.getElementById("test4"), "");
@ -90,7 +90,7 @@ function runtests() {
"Percent values in scale should be ignored");
style = window.getComputedStyle(document.getElementById("test6"), "");
is(style.getPropertyValue("-moz-transform"), "matrix(640000, 0, 0, 1e-19, 0px, 0px)",
is(style.getPropertyValue("-moz-transform"), "matrix(640000, 0, 0, 1e-19, 0, 0)",
"Ensure wacky values are accepted");
style = window.getComputedStyle(document.getElementById("test7"), "");

28
layout/base/tests/test_bug435293-skew.html
View File

@ -91,7 +91,7 @@ runtests();
function runtests() {
// For test 1 we need to handle the contingency that different systems may
// round differently. We will parse out the values and compare them
// individually. The matrix should be: matrix(1, 0, 0.57735, 1, 0px, 0px)
// individually. The matrix should be: matrix(1, 0, 0.57735, 1, 0, 0)
var style = window.getComputedStyle(document.getElementById("test1"), "");
var tformStyle = style.getPropertyValue("-moz-transform");
var tformValues = tformStyle.substring(tformStyle.indexOf('(') + 1,
@ -100,11 +100,11 @@ function runtests() {
is((+tformValues[1]), 0, "Test1: skewx: param 1 is 0");
ok(verifyRounded(tformValues[2], 0.57735), "Test1: skewx: Rounded param 2 is in bounds");
is((+tformValues[3]), 1, "Test1: skewx: param 3 is 1");
is(tformValues[4].trim(), "0px", "Test1: skewx: param 4 is 0px");
is(tformValues[5].trim(), "0px", "Test1: skewx: param 5 is 0px");
is((+tformValues[4]), 0, "Test1: skewx: param 4 is 0");
is((+tformValues[5]), 0, "Test1: skewx: param 5 is 0");
// Again, handle rounding for test 2, proper matrix should be:
// matrix(1, 1.73205, 0, 1, 0px, 0px)
// matrix(1, 1.73205, 0, 1, 0, 0)
style = window.getComputedStyle(document.getElementById("test2"), "");
tformStyle = style.getPropertyValue("-moz-transform");
tformValues = tformStyle.substring(tformStyle.indexOf('(') + 1,
@ -113,19 +113,19 @@ function runtests() {
ok(verifyRounded(tformValues[1], 1.73205), "Test2: skewy: Rounded param 1 is in bounds");
is((+tformValues[2]), 0, "Test2: skewy: param 2 is 0");
is((+tformValues[3]), 1, "Test2: skewy: param 3 is 1");
is(tformValues[4].trim(), "0px", "Test2: skewy: param 4 is 0px");
is(tformValues[5].trim(), "0px", "Test2: skewy: param 5 is 0px");
is((+tformValues[4]), 0, "Test2: skewy: param 4 is 0");
is((+tformValues[5]), 0, "Test2: skewy: param 5 is 0");
style = window.getComputedStyle(document.getElementById("test3"), "");
is(style.getPropertyValue("-moz-transform"), "matrix(1, 1, 1, 1, 0px, 0px)",
is(style.getPropertyValue("-moz-transform"), "matrix(1, 1, 1, 1, 0, 0)",
"Test3: Skew proper matrix is applied");
style = window.getComputedStyle(document.getElementById("test4"), "");
is(style.getPropertyValue("-moz-transform"), "matrix(1, 1, 0, 1, 0px, 0px)",
is(style.getPropertyValue("-moz-transform"), "matrix(1, 1, 0, 1, 0, 0)",
"Test4: Skew angle wrap: proper matrix is applied");
style = window.getComputedStyle(document.getElementById("test5"), "");
is(style.getPropertyValue("-moz-transform"), "matrix(1, -1, 1, 1, 0px, 0px)",
is(style.getPropertyValue("-moz-transform"), "matrix(1, -1, 1, 1, 0, 0)",
"Test5: Skew mixing deg and grad");
style = window.getComputedStyle(document.getElementById("test6"), "");
@ -137,7 +137,7 @@ function runtests() {
"Test7: Skew with more invalid units");
// Test 8: skew with negative degrees, here again we must handle rounding.
// The matrix should be: matrix(1, 3.73206, -1, 1, 0px, 0px)
// The matrix should be: matrix(1, 3.73206, -1, 1, 0, 0)
style = window.getComputedStyle(document.getElementById("test8"), "");
tformStyle = style.getPropertyValue("-moz-transform");
tformValues = tformStyle.substring(tformStyle.indexOf('(') + 1,
@ -146,19 +146,19 @@ function runtests() {
ok(verifyRounded(tformValues[1], 3.73206), "Test8: Rounded param 1 is in bounds");
is((+tformValues[2]), -1, "Test8: param 2 is -1");
is((+tformValues[3]), 1, "Test8: param 3 is 1");
is(tformValues[4].trim(), "0px", "Test8: param 4 is 0px");
is(tformValues[5].trim(), "0px", "Test8: param 5 is 0px");
is((+tformValues[4]), 0, "Test8: param 4 is 0");
is((+tformValues[5]), 0, "Test8: param 5 is 0");
style = window.getComputedStyle(document.getElementById("test9"), "");
is(style.getPropertyValue("-moz-transform"), "none",
"Test9: Skew in 3d should be ignored");
style = window.getComputedStyle(document.getElementById("test10"), "");
is(style.getPropertyValue("-moz-transform"), "matrix(1, -10000, 1, 1, 0px, 0px)",
is(style.getPropertyValue("-moz-transform"), "matrix(1, -10000, 1, 1, 0, 0)",
"Test10: Skew with nearly infinite numbers");
style = window.getComputedStyle(document.getElementById("test11"), "");
is(style.getPropertyValue("-moz-transform"), "matrix(1, -10000, 10000, 1, 0px, 0px)",
is(style.getPropertyValue("-moz-transform"), "matrix(1, -10000, 10000, 1, 0, 0)",
"Test11: Skew with more infinite numbers");
}

5
layout/style/nsComputedDOMStyle.cpp
View File

@ -1108,13 +1108,12 @@ nsComputedDOMStyle::DoGetMozTransform()
resultString.Append(NS_LITERAL_STRING(", "));
}
resultString.AppendFloat(matrix._41);
resultString.Append(NS_LITERAL_STRING("px, "));
resultString.Append(NS_LITERAL_STRING(", "));
resultString.AppendFloat(matrix._42);
resultString.Append(NS_LITERAL_STRING("px"));
if (is3D) {
resultString.Append(NS_LITERAL_STRING(", "));
resultString.AppendFloat(matrix._43);
resultString.Append(NS_LITERAL_STRING("px, "));
resultString.Append(NS_LITERAL_STRING(", "));
resultString.AppendFloat(matrix._44);
}
resultString.Append(NS_LITERAL_STRING(")"));

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

@ -1315,41 +1315,41 @@ function test_transform_transition(prop) {
// translate
{ start: 'translate(20px)', end: 'none',
expected_uncomputed: 'translate(15px)',
expected: 'matrix(1, 0, 0, 1, 15px, 0px)' },
expected: 'matrix(1, 0, 0, 1, 15, 0)' },
{ start: 'translate(20px, 12px)', end: 'none',
expected_uncomputed: 'translate(15px, 9px)',
expected: 'matrix(1, 0, 0, 1, 15px, 9px)' },
expected: 'matrix(1, 0, 0, 1, 15, 9)' },
{ start: 'translateX(-20px)', end: 'none',
expected_uncomputed: 'translateX(-15px)',
expected: 'matrix(1, 0, 0, 1, -15px, 0px)' },
expected: 'matrix(1, 0, 0, 1, -15, 0)' },
{ start: 'translateY(-40px)', end: 'none',
expected_uncomputed: 'translateY(-30px)',
expected: 'matrix(1, 0, 0, 1, 0px, -30px)' },
expected: 'matrix(1, 0, 0, 1, 0, -30)' },
{ start: 'translateZ(40px)', end: 'none',
expected_uncomputed: 'translateZ(30px)',
expected: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0px, 0px, 30px, 1)',
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, 10px, 15px, -10px, 1)',
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)',
expected: 'matrix(1, 0, 0, 1, 45, 0)',
round_error_ok: true },
{ start: 'translate(20%, 12%)', end: 'none',
expected_uncomputed: 'translate(15%, 9%)',
expected: 'matrix(1, 0, 0, 1, 45px, 4.5px)',
expected: 'matrix(1, 0, 0, 1, 45, 4.5)',
round_error_ok: true },
{ start: 'translateX(-20%)', end: 'none',
expected_uncomputed: 'translateX(-15%)',
expected: 'matrix(1, 0, 0, 1, -45px, 0px)',
expected: 'matrix(1, 0, 0, 1, -45, 0)',
round_error_ok: true },
{ start: 'translateY(-40%)', end: 'none',
expected_uncomputed: 'translateY(-30%)',
expected: 'matrix(1, 0, 0, 1, 0px, -15px)',
expected: 'matrix(1, 0, 0, 1, 0, -15)',
round_error_ok: true },
{ start: 'none', end: 'rotate(90deg) translate(20%, 20%) rotate(-90deg)',
expected_uncomputed: 'rotate(22.5deg) translate(5%, 5%) rotate(-22.5deg)',
@ -1360,11 +1360,11 @@ function test_transform_transition(prop) {
// test percent translation using matrix decomposition
{ start: 'rotate(45deg) rotate(-45deg)',
end: 'rotate(90deg) translate(20%, 20%) rotate(-90deg)',
expected: 'matrix(1, 0, 0, 1, -2.5px, 15px)',
expected: 'matrix(1, 0, 0, 1, -2.5, 15)',
round_error_ok: true },
{ start: 'rotate(45deg) rotate(-45deg)',
end: 'rotate(-90deg) translate(20%, 20%) rotate(90deg)',
expected: 'matrix(1, 0, 0, 1, 2.5px, -15px)',
expected: 'matrix(1, 0, 0, 1, 2.5, -15)',
round_error_ok: true },
// test calc() in translate
// Note that font-size: is 20px, and that percentages are relative
@ -1373,42 +1373,42 @@ function test_transform_transition(prop) {
{ start: 'translateX(20%)', /* 60px */
end: 'translateX(-moz-calc(10% + 1em))', /* 30px + 20px = 50px */
expected_uncomputed: 'translateX(-moz-calc(17.5% + 0.25em))',
expected: 'matrix(1, 0, 0, 1, 57.5px, 0px)' },
expected: 'matrix(1, 0, 0, 1, 57.5, 0)' },
{ start: 'translate(-moz-calc(0.75 * 3em + 1.5 * 10%), -moz-calc(0.5 * 5em + 0.5 * 8%))', /* 90px, 52px */
end: 'rotate(90deg) translateY(20%) rotate(90deg) translateY(-moz-calc(10% + 0.5em)) rotate(180deg)', /* -10px, -15px */
expected: 'matrix(1, 0, 0, 1, 65px, 35.25px)' },
expected: 'matrix(1, 0, 0, 1, 65, 35.25)' },
// scale
{ start: 'scale(2)', end: 'none',
expected_uncomputed: 'scale(1.75)',
expected: 'matrix(1.75, 0, 0, 1.75, 0px, 0px)' },
expected: 'matrix(1.75, 0, 0, 1.75, 0, 0)' },
{ start: 'none', end: 'scale(0.4)',
expected_uncomputed: 'scale(0.85)',
expected: 'matrix(0.85, 0, 0, 0.85, 0px, 0px)',
expected: 'matrix(0.85, 0, 0, 0.85, 0, 0)',
round_error_ok: true },
{ start: 'scale(2)', end: 'scale(-2)',
expected_uncomputed: 'scale(1)',
expected: 'matrix(1, 0, 0, 1, 0px, 0px)' },
expected: 'matrix(1, 0, 0, 1, 0, 0)' },
{ start: 'scale(2)', end: 'scale(-6)',
expected_uncomputed: 'scale(0)',
expected: 'matrix(0, 0, 0, 0, 0px, 0px)' },
expected: 'matrix(0, 0, 0, 0, 0, 0)' },
{ start: 'scale(2, 0.4)', end: 'none',
expected_uncomputed: 'scale(1.75, 0.55)',
expected: 'matrix(1.75, 0, 0, 0.55, 0px, 0px)',
expected: 'matrix(1.75, 0, 0, 0.55, 0, 0)',
round_error_ok: true },
{ start: 'scaleX(3)', end: 'none',
expected_uncomputed: 'scaleX(2.5)',
expected: 'matrix(2.5, 0, 0, 1, 0px, 0px)' },
expected: 'matrix(2.5, 0, 0, 1, 0, 0)' },
{ start: 'scaleY(5)', end: 'none',
expected_uncomputed: 'scaleY(4)',
expected: 'matrix(1, 0, 0, 4, 0px, 0px)' },
expected: 'matrix(1, 0, 0, 4, 0, 0)' },
{ start: 'scaleZ(5)', end: 'none',
expected_uncomputed: 'scaleZ(4)',
expected: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 4, 0, 0px, 0px, 0px, 1)',
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, 0px, 0px, 0px, 1)',
expected: 'matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)',
requires_3d: true },
// skew
@ -1428,15 +1428,15 @@ function test_transform_transition(prop) {
expected_uncomputed: 'skewY(22.5deg)' },
// matrix : skewX
{ start: 'matrix(1, 0, 3, 1, 0px, 0px)', end: 'none',
expected: 'matrix(1, 0, ' + 3 * 0.75 + ', 1, 0px, 0px)',
{ start: 'matrix(1, 0, 3, 1, 0, 0)', end: 'none',
expected: 'matrix(1, 0, ' + 3 * 0.75 + ', 1, 0, 0)',
round_error_ok: true },
{ start: 'skewX(0)', end: 'skewX(-45deg) translate(0)',
expected: 'matrix(1, 0, -0.25, 1, 0px, 0px)',
expected: 'matrix(1, 0, -0.25, 1, 0, 0)',
round_error_ok: true },
// matrix : rotate
{ start: 'rotate(-30deg)', end: 'matrix(0, 1, -1, 0, 0px, 0px)',
expected: 'matrix(1, 0, 0, 1, 0px, 0px)',
{ start: 'rotate(-30deg)', end: 'matrix(0, 1, -1, 0, 0, 0)',
expected: 'matrix(1, 0, 0, 1, 0, 0)',
round_error_ok: true },
{ start: 'rotate(-30deg) translateX(0)',
end: 'translateX(0) rotate(-90deg)',
@ -1456,7 +1456,7 @@ function test_transform_transition(prop) {
expected: c('rotate(135deg)') },
{ start: 'scale(-1)', end: 'none',
expected_uncomputed: 'scale(-0.5)',
expected: 'matrix(-0.5, 0, 0, -0.5, 0px, 0px)' },
expected: 'matrix(-0.5, 0, 0, -0.5, 0, 0)' },
{ start: 'rotate(180deg)', end: 'none',
expected_uncomputed: 'rotate(135deg)' },
{ start: 'rotate(-180deg)', end: 'none',
@ -1466,7 +1466,7 @@ function test_transform_transition(prop) {
// matrix followed by scale
{ start: 'matrix(2, 0, 0, 2, 10px, 20px) scale(2)',
end: 'none',
expected: 'matrix(3.0625, 0, 0, 3.0625, 7.5px, 15px)' },
expected: 'matrix(3.0625, 0, 0, 3.0625, 7.5, 15)' },
// ... and a bunch of similar possibilities. The spec isn't settled
// here; there are multiple options. See:
@ -1505,42 +1505,42 @@ function test_transform_transition(prop) {
{ start: 'none',
end: 'matrix(1, 0, 1.5, 1, 0pt, 0pt)',
/* skewX(atan(1.5)) */
expected: 'matrix(1, 0, ' + 1.5 * 0.25 + ', 1, 0px, 0px)',
expected: 'matrix(1, 0, ' + 1.5 * 0.25 + ', 1, 0, 0)',
round_error_ok: true },
{ start: 'none',
end: 'matrix(-1, 0, 2, -1, 0pt, 0pt)',
/* rotate(180deg) skewX(atan(-2)) */
expected: c('rotate(45deg) matrix(1, 0, ' + -2 * 0.25 + ', 1, 0px, 0px)'),
expected: c('rotate(45deg) matrix(1, 0, ' + -2 * 0.25 + ', 1, 0, 0)'),
round_error_ok: true },
{ start: 'none',
end: 'matrix(0, -1, 1, -3, 0pt, 0pt)',
/* rotate(-90deg) skewX(atan(3)) */
expected: c('rotate(-22.5deg) matrix(1, 0, ' + 3 * 0.25 + ', 1, 0px, 0px)'),
expected: c('rotate(-22.5deg) matrix(1, 0, ' + 3 * 0.25 + ', 1, 0, 0)'),
round_error_ok: true },
{ start: 'none',
end: 'matrix(0, 1, -1, 4, 0pt, 0pt)',
/* rotate(90deg) skewX(atan(4)) */
expected: c('rotate(22.5deg) matrix(1, 0, ' + 4 * 0.25 + ', 1, 0px, 0px)'),
expected: c('rotate(22.5deg) matrix(1, 0, ' + 4 * 0.25 + ', 1, 0, 0)'),
round_error_ok: true },
// and then four with negative determinants
{ start: 'none',
end: 'matrix(1, 0, 1, -1, 0pt, 0pt)',
/* rotate(-180deg) skewX(atan(-1)) scaleX(-1) */
expected: c('rotate(-45deg) matrix(1, 0, ' + -1 * 0.25 + ', 1, 0px, 0px) scaleX(0.5)'),
expected: c('rotate(-45deg) matrix(1, 0, ' + -1 * 0.25 + ', 1, 0, 0) scaleX(0.5)'),
round_error_ok: true },
{ start: 'none',
end: 'matrix(-1, 0, -1, 1, 0pt, 0pt)',
/* skewX(atan(-1)) scaleX(-1) */
expected: c('matrix(1, 0, ' + -1 * 0.25 + ', 1, 0px, 0px) scaleX(0.5)') },
expected: c('matrix(1, 0, ' + -1 * 0.25 + ', 1, 0, 0) scaleX(0.5)') },
{ start: 'none',
end: 'matrix(0, 1, 1, -2, 0pt, 0pt)',
/* rotate(-90deg) skewX(atan(2)) scaleX(-1) */
expected: c('rotate(-22.5deg) matrix(1, 0, ' + 2 * 0.25 + ', 1, 0px, 0px) scaleX(0.5)'),
expected: c('rotate(-22.5deg) matrix(1, 0, ' + 2 * 0.25 + ', 1, 0, 0) scaleX(0.5)'),
round_error_ok: true },
{ start: 'none',
end: 'matrix(0, -1, -1, 0.5, 0pt, 0pt)',
/* rotate(90deg) skewX(atan(0.5)) scaleX(-1) */
expected: c('rotate(22.5deg) matrix(1, 0, ' + 0.5 * 0.25 + ', 1, 0px, 0px) scaleX(0.5)'),
expected: c('rotate(22.5deg) matrix(1, 0, ' + 0.5 * 0.25 + ', 1, 0, 0) scaleX(0.5)'),
round_error_ok: true },
// lists vs. matrix decomposition
@ -1552,7 +1552,7 @@ function test_transform_transition(prop) {
expected_uncomputed: 'skewY(22.5deg) rotate(90deg)' },
{ start: 'skewY(45deg) rotate(90deg) translate(0)',
end: 'skewY(-45deg) rotate(90deg)',
expected: 'matrix(0, 1, -1, -0.5, 0px, 0px)',
expected: 'matrix(0, 1, -1, -0.5, 0, 0)',
round_error_ok: true },
{ start: 'skewX(45deg) rotate(90deg)',
end: 'skewX(-45deg) rotate(90deg)',
@ -1563,7 +1563,7 @@ function test_transform_transition(prop) {
round_error_ok: true },
];
var matrix_re = /^matrix\(([^,]*), ([^,]*), ([^,]*), ([^,]*), ([^,]*)px, ([^,]*)px\)$/;
var matrix_re = /^matrix\(([^,]*), ([^,]*), ([^,]*), ([^,]*), ([^,]*), ([^,]*)\)$/;
for (var i in tests) {
var test = tests[i];
if (!("expected" in test)) {