449 lines
13 KiB
HTML
449 lines
13 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<script src="../resources/js-test-pre.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="description"></div>
|
|
<div id="console"></div>
|
|
|
|
<script>
|
|
|
|
description("This test exercises the CSSMatrix 3D interface");
|
|
|
|
debug("");
|
|
debug("CSSMatrix constructors");
|
|
|
|
var m = null;
|
|
m = new WebKitCSSMatrix();
|
|
if (m)
|
|
testPassed("default constructor");
|
|
else
|
|
testFailed("default constructor");
|
|
|
|
var m2 = new WebKitCSSMatrix(m);
|
|
if (m2)
|
|
testPassed("object constructor");
|
|
else
|
|
testFailed("object constructor");
|
|
|
|
m = new WebKitCSSMatrix("matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)");
|
|
if (m)
|
|
testPassed("string constructor");
|
|
else
|
|
testFailed("string constructor");
|
|
|
|
debug("");
|
|
debug("Test toString");
|
|
var m = new WebKitCSSMatrix("matrix3d(1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)");
|
|
var s = m.toString();
|
|
var a = s.split('(');
|
|
shouldBe('a[0]', '"matrix3d"');
|
|
var a2 = a[1].split(',');
|
|
shouldBe('parseFloat(a2[0])', '1');
|
|
shouldBe('parseFloat(a2[1])', '0');
|
|
shouldBe('parseFloat(a2[2])', '0');
|
|
shouldBe('parseFloat(a2[3])', '1');
|
|
shouldBe('parseFloat(a2[4])', '0');
|
|
shouldBe('parseFloat(a2[5])', '1');
|
|
shouldBe('parseFloat(a2[6])', '0');
|
|
shouldBe('parseFloat(a2[7])', '0');
|
|
shouldBe('parseFloat(a2[8])', '0');
|
|
shouldBe('parseFloat(a2[9])', '0');
|
|
shouldBe('parseFloat(a2[10])', '1');
|
|
shouldBe('parseFloat(a2[11])', '0');
|
|
shouldBe('parseFloat(a2[12])', '0');
|
|
shouldBe('parseFloat(a2[13])', '0');
|
|
shouldBe('parseFloat(a2[14])', '0');
|
|
var a3 = a2[15].split(")");
|
|
shouldBe('parseFloat(a3[0])', '1');
|
|
shouldBe('a3[1]', '""');
|
|
|
|
debug("");
|
|
debug("Test bad input to string constructor");
|
|
shouldThrow('new WebKitCSSMatrix("banana")');
|
|
|
|
debug("");
|
|
debug("Test attributes on default matrix");
|
|
m = new WebKitCSSMatrix();
|
|
shouldBe('m.m11', '1');
|
|
shouldBe('m.m12', '0');
|
|
shouldBe('m.m13', '0');
|
|
shouldBe('m.m14', '0');
|
|
shouldBe('m.m21', '0');
|
|
shouldBe('m.m22', '1');
|
|
shouldBe('m.m23', '0');
|
|
shouldBe('m.m24', '0');
|
|
shouldBe('m.m31', '0');
|
|
shouldBe('m.m32', '0');
|
|
shouldBe('m.m33', '1');
|
|
shouldBe('m.m34', '0');
|
|
shouldBe('m.m41', '0');
|
|
shouldBe('m.m42', '0');
|
|
shouldBe('m.m43', '0');
|
|
shouldBe('m.m44', '1');
|
|
|
|
debug("");
|
|
debug("Test attributes on custom matrix");
|
|
m = new WebKitCSSMatrix("matrix3d(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44)");
|
|
shouldBe('m.m11', '11');
|
|
shouldBe('m.m12', '12');
|
|
shouldBe('m.m13', '13');
|
|
shouldBe('m.m14', '14');
|
|
shouldBe('m.m21', '21');
|
|
shouldBe('m.m22', '22');
|
|
shouldBe('m.m23', '23');
|
|
shouldBe('m.m24', '24');
|
|
shouldBe('m.m31', '31');
|
|
shouldBe('m.m32', '32');
|
|
shouldBe('m.m33', '33');
|
|
shouldBe('m.m34', '34');
|
|
shouldBe('m.m41', '41');
|
|
shouldBe('m.m42', '42');
|
|
shouldBe('m.m43', '43');
|
|
shouldBe('m.m44', '44');
|
|
|
|
debug("");
|
|
debug("Test setMatrixValue - set to matrix()");
|
|
m = new WebKitCSSMatrix();
|
|
m.setMatrixValue("matrix3d(11, 12, 13, 14, 21, 22, 23, 24, 31, 32, 33, 34, 41, 42, 43, 44)");
|
|
shouldBe('m.m11', '11');
|
|
shouldBe('m.m12', '12');
|
|
shouldBe('m.m13', '13');
|
|
shouldBe('m.m14', '14');
|
|
shouldBe('m.m21', '21');
|
|
shouldBe('m.m22', '22');
|
|
shouldBe('m.m23', '23');
|
|
shouldBe('m.m24', '24');
|
|
shouldBe('m.m31', '31');
|
|
shouldBe('m.m32', '32');
|
|
shouldBe('m.m33', '33');
|
|
shouldBe('m.m34', '34');
|
|
shouldBe('m.m41', '41');
|
|
shouldBe('m.m42', '42');
|
|
shouldBe('m.m43', '43');
|
|
shouldBe('m.m44', '44');
|
|
|
|
debug("");
|
|
debug("Test setMatrixValue - set to translate(10px, 20px, 30px) scale(2, 3, 4)");
|
|
m = new WebKitCSSMatrix();
|
|
m.setMatrixValue("translate3d(10px, 20px, 30px) scale3d(2, 3, 4)");
|
|
shouldBe('m.m11', '2');
|
|
shouldBe('m.m12', '0');
|
|
shouldBe('m.m13', '0');
|
|
shouldBe('m.m14', '0');
|
|
shouldBe('m.m21', '0');
|
|
shouldBe('m.m22', '3');
|
|
shouldBe('m.m23', '0');
|
|
shouldBe('m.m24', '0');
|
|
shouldBe('m.m31', '0');
|
|
shouldBe('m.m32', '0');
|
|
shouldBe('m.m33', '4');
|
|
shouldBe('m.m34', '0');
|
|
shouldBe('m.m41', '10');
|
|
shouldBe('m.m42', '20');
|
|
shouldBe('m.m43', '30');
|
|
shouldBe('m.m44', '1');
|
|
|
|
debug("");
|
|
debug("Test throwing exception from setMatrixValue");
|
|
shouldThrow('m.setMatrixValue("banana")');
|
|
shouldThrow('m.setMatrixValue("translate3d(10em, 20%, 40)")');
|
|
shouldThrow('m.setMatrixValue("translate3d(10px, 20px, 30px) scale3d()")');
|
|
|
|
debug("");
|
|
debug("Test multiply");
|
|
m = new WebKitCSSMatrix("matrix3d( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)");
|
|
m2 = new WebKitCSSMatrix("matrix3d(17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32)");
|
|
var m3 = m.multiply(m2);
|
|
shouldBe('parseFloat(m3.m11)', '538');
|
|
shouldBe('parseFloat(m3.m12)', '612');
|
|
shouldBe('parseFloat(m3.m13)', '686');
|
|
shouldBe('parseFloat(m3.m14)', '760');
|
|
shouldBe('parseFloat(m3.m21)', '650');
|
|
shouldBe('parseFloat(m3.m22)', '740');
|
|
shouldBe('parseFloat(m3.m23)', '830');
|
|
shouldBe('parseFloat(m3.m24)', '920');
|
|
shouldBe('parseFloat(m3.m31)', '762');
|
|
shouldBe('parseFloat(m3.m32)', '868');
|
|
shouldBe('parseFloat(m3.m33)', '974');
|
|
shouldBe('parseFloat(m3.m34)', '1080');
|
|
shouldBe('parseFloat(m3.m41)', '874');
|
|
shouldBe('parseFloat(m3.m42)', '996');
|
|
shouldBe('parseFloat(m3.m43)', '1118');
|
|
shouldBe('parseFloat(m3.m44)', '1240');
|
|
|
|
debug("");
|
|
debug("Test immutability of multiply");
|
|
shouldBe('parseFloat(m.m11)', '1');
|
|
shouldBe('parseFloat(m.m12)', '2');
|
|
shouldBe('parseFloat(m.m13)', '3');
|
|
shouldBe('parseFloat(m.m14)', '4');
|
|
shouldBe('parseFloat(m.m21)', '5');
|
|
shouldBe('parseFloat(m.m22)', '6');
|
|
shouldBe('parseFloat(m.m23)', '7');
|
|
shouldBe('parseFloat(m.m24)', '8');
|
|
shouldBe('parseFloat(m.m31)', '9');
|
|
shouldBe('parseFloat(m.m32)', '10');
|
|
shouldBe('parseFloat(m.m33)', '11');
|
|
shouldBe('parseFloat(m.m34)', '12');
|
|
shouldBe('parseFloat(m.m41)', '13');
|
|
shouldBe('parseFloat(m.m42)', '14');
|
|
shouldBe('parseFloat(m.m43)', '15');
|
|
shouldBe('parseFloat(m.m44)', '16');
|
|
|
|
debug("");
|
|
debug("Test multiply in an affine matrix");
|
|
m = new WebKitCSSMatrix("matrix3d(1, 2, 0, 0, 3, 4, 0, 0, 0, 0, 1, 0, 5, 6, 0, 1)");
|
|
m2 = new WebKitCSSMatrix("matrix3d(7, 8, 0, 0, 9, 10, 0, 0, 0, 0, 1, 0, 11, 12, 0, 1)");
|
|
var m3 = m.multiply(m2);
|
|
shouldBe('parseFloat(m3.m11)', '31');
|
|
shouldBe('parseFloat(m3.m12)', '46');
|
|
shouldBe('parseFloat(m3.m13)', '0');
|
|
shouldBe('parseFloat(m3.m14)', '0');
|
|
shouldBe('parseFloat(m3.m21)', '39');
|
|
shouldBe('parseFloat(m3.m22)', '58');
|
|
shouldBe('parseFloat(m3.m23)', '0');
|
|
shouldBe('parseFloat(m3.m24)', '0');
|
|
shouldBe('parseFloat(m3.m31)', '0');
|
|
shouldBe('parseFloat(m3.m32)', '0');
|
|
shouldBe('parseFloat(m3.m33)', '1');
|
|
shouldBe('parseFloat(m3.m34)', '0');
|
|
shouldBe('parseFloat(m3.m41)', '52');
|
|
shouldBe('parseFloat(m3.m42)', '76');
|
|
shouldBe('parseFloat(m3.m43)', '0');
|
|
shouldBe('parseFloat(m3.m44)', '1');
|
|
|
|
debug("");
|
|
debug("Test that multiply works in the right direction");
|
|
var tx = new WebKitCSSMatrix("matrix3d( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)");
|
|
var sx = new WebKitCSSMatrix("matrix3d( 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)");
|
|
m = tx.multiply(sx);
|
|
shouldBe('m.m11', '2');
|
|
shouldBe('m.m12', '0');
|
|
shouldBe('m.m13', '0');
|
|
shouldBe('m.m14', '0');
|
|
shouldBe('m.m21', '0');
|
|
shouldBe('m.m22', '1');
|
|
shouldBe('m.m23', '0');
|
|
shouldBe('m.m24', '0');
|
|
shouldBe('m.m31', '0');
|
|
shouldBe('m.m32', '0');
|
|
shouldBe('m.m33', '1');
|
|
shouldBe('m.m34', '0');
|
|
shouldBe('m.m41', '100');
|
|
shouldBe('m.m42', '0');
|
|
shouldBe('m.m43', '0');
|
|
shouldBe('m.m44', '1');
|
|
|
|
debug("");
|
|
debug("Test inverse");
|
|
m = new WebKitCSSMatrix("matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 10, 20, 30, 1)");
|
|
m2 = m.inverse();
|
|
|
|
shouldBe('parseFloat(m2.m11)', '0.5');
|
|
shouldBe('parseFloat(m2.m12)', '0');
|
|
shouldBe('parseFloat(m2.m13)', '0');
|
|
shouldBe('parseFloat(m2.m14)', '0');
|
|
shouldBe('parseFloat(m2.m21)', '0');
|
|
shouldBe('parseFloat(m2.m22)', '0.5');
|
|
shouldBe('parseFloat(m2.m23)', '0');
|
|
shouldBe('parseFloat(m2.m24)', '0');
|
|
shouldBe('parseFloat(m2.m31)', '0');
|
|
shouldBe('parseFloat(m2.m32)', '0');
|
|
shouldBe('parseFloat(m2.m33)', '0.5');
|
|
shouldBe('parseFloat(m2.m34)', '0');
|
|
shouldBe('parseFloat(m2.m41)', '-5');
|
|
shouldBe('parseFloat(m2.m42)', '-10');
|
|
shouldBe('parseFloat(m2.m43)', '-15');
|
|
shouldBe('parseFloat(m2.m44)', '1');
|
|
|
|
debug("");
|
|
debug("Test immutability of inverse");
|
|
shouldBe('parseFloat(m.m11)', '2');
|
|
shouldBe('parseFloat(m.m12)', '0');
|
|
shouldBe('parseFloat(m.m13)', '0');
|
|
shouldBe('parseFloat(m.m14)', '0');
|
|
shouldBe('parseFloat(m.m21)', '0');
|
|
shouldBe('parseFloat(m.m22)', '2');
|
|
shouldBe('parseFloat(m.m23)', '0');
|
|
shouldBe('parseFloat(m.m24)', '0');
|
|
shouldBe('parseFloat(m.m31)', '0');
|
|
shouldBe('parseFloat(m.m32)', '0');
|
|
shouldBe('parseFloat(m.m33)', '2');
|
|
shouldBe('parseFloat(m.m34)', '0');
|
|
shouldBe('parseFloat(m.m41)', '10');
|
|
shouldBe('parseFloat(m.m42)', '20');
|
|
shouldBe('parseFloat(m.m43)', '30');
|
|
shouldBe('parseFloat(m.m44)', '1');
|
|
|
|
debug("");
|
|
debug("Test translate");
|
|
m = new WebKitCSSMatrix();
|
|
var m2 = m.translate(10, 20, 30);
|
|
shouldBe('m2.m11', '1');
|
|
shouldBe('m2.m12', '0');
|
|
shouldBe('m2.m13', '0');
|
|
shouldBe('m2.m14', '0');
|
|
shouldBe('m2.m21', '0');
|
|
shouldBe('m2.m22', '1');
|
|
shouldBe('m2.m23', '0');
|
|
shouldBe('m2.m24', '0');
|
|
shouldBe('m2.m31', '0');
|
|
shouldBe('m2.m32', '0');
|
|
shouldBe('m2.m33', '1');
|
|
shouldBe('m2.m34', '0');
|
|
shouldBe('m2.m41', '10');
|
|
shouldBe('m2.m42', '20');
|
|
shouldBe('m2.m43', '30');
|
|
shouldBe('m2.m44', '1');
|
|
|
|
debug("");
|
|
debug("Test immutability of translate");
|
|
shouldBe('m.m11', '1');
|
|
shouldBe('m.m12', '0');
|
|
shouldBe('m.m13', '0');
|
|
shouldBe('m.m14', '0');
|
|
shouldBe('m.m21', '0');
|
|
shouldBe('m.m22', '1');
|
|
shouldBe('m.m23', '0');
|
|
shouldBe('m.m24', '0');
|
|
shouldBe('m.m31', '0');
|
|
shouldBe('m.m32', '0');
|
|
shouldBe('m.m33', '1');
|
|
shouldBe('m.m34', '0');
|
|
shouldBe('m.m41', '0');
|
|
shouldBe('m.m42', '0');
|
|
shouldBe('m.m43', '0');
|
|
shouldBe('m.m44', '1');
|
|
|
|
debug("");
|
|
debug("Test scale");
|
|
m = new WebKitCSSMatrix();
|
|
m2 = m.scale(10, 20, 30);
|
|
shouldBe('m2.m11', '10');
|
|
shouldBe('m2.m12', '0');
|
|
shouldBe('m2.m13', '0');
|
|
shouldBe('m2.m14', '0');
|
|
shouldBe('m2.m21', '0');
|
|
shouldBe('m2.m22', '20');
|
|
shouldBe('m2.m23', '0');
|
|
shouldBe('m2.m24', '0');
|
|
shouldBe('m2.m31', '0');
|
|
shouldBe('m2.m32', '0');
|
|
shouldBe('m2.m33', '30');
|
|
shouldBe('m2.m34', '0');
|
|
shouldBe('m2.m41', '0');
|
|
shouldBe('m2.m42', '0');
|
|
shouldBe('m2.m43', '0');
|
|
shouldBe('m2.m44', '1');
|
|
|
|
debug("");
|
|
debug("Test immutability of scale");
|
|
shouldBe('m.m11', '1');
|
|
shouldBe('m.m12', '0');
|
|
shouldBe('m.m13', '0');
|
|
shouldBe('m.m14', '0');
|
|
shouldBe('m.m21', '0');
|
|
shouldBe('m.m22', '1');
|
|
shouldBe('m.m23', '0');
|
|
shouldBe('m.m24', '0');
|
|
shouldBe('m.m31', '0');
|
|
shouldBe('m.m32', '0');
|
|
shouldBe('m.m33', '1');
|
|
shouldBe('m.m34', '0');
|
|
shouldBe('m.m41', '0');
|
|
shouldBe('m.m42', '0');
|
|
shouldBe('m.m43', '0');
|
|
shouldBe('m.m44', '1');
|
|
|
|
debug("");
|
|
debug("Test rotate");
|
|
m = new WebKitCSSMatrix();
|
|
m2 = m.rotate(10, 20, 30);
|
|
shouldBe('parseFloat(m2.m11.toPrecision(6))', '0.813798');
|
|
shouldBe('parseFloat(m2.m12.toPrecision(6))', '0.469846');
|
|
shouldBe('parseFloat(m2.m13.toPrecision(6))', '-0.34202');
|
|
shouldBe('parseFloat(m2.m14.toPrecision(6))', '0');
|
|
shouldBe('parseFloat(m2.m21.toPrecision(6))', '-0.44097');
|
|
shouldBe('parseFloat(m2.m22.toPrecision(6))', '0.882564');
|
|
shouldBe('parseFloat(m2.m23.toPrecision(6))', '0.163176');
|
|
shouldBe('parseFloat(m2.m24.toPrecision(6))', '0');
|
|
shouldBe('parseFloat(m2.m31.toPrecision(6))', '0.378522');
|
|
shouldBe('parseFloat(m2.m32.toPrecision(6))', '0.0180283');
|
|
shouldBe('parseFloat(m2.m33.toPrecision(6))', '0.925417');
|
|
shouldBe('parseFloat(m2.m34.toPrecision(6))', '0');
|
|
shouldBe('parseFloat(m2.m41.toPrecision(6))', '0');
|
|
shouldBe('parseFloat(m2.m42.toPrecision(6))', '0');
|
|
shouldBe('parseFloat(m2.m43.toPrecision(6))', '0');
|
|
shouldBe('parseFloat(m2.m44.toPrecision(6))', '1');
|
|
|
|
debug("");
|
|
debug("Test immutability of rotate");
|
|
shouldBe('m.m11', '1');
|
|
shouldBe('m.m12', '0');
|
|
shouldBe('m.m13', '0');
|
|
shouldBe('m.m14', '0');
|
|
shouldBe('m.m21', '0');
|
|
shouldBe('m.m22', '1');
|
|
shouldBe('m.m23', '0');
|
|
shouldBe('m.m24', '0');
|
|
shouldBe('m.m31', '0');
|
|
shouldBe('m.m32', '0');
|
|
shouldBe('m.m33', '1');
|
|
shouldBe('m.m34', '0');
|
|
shouldBe('m.m41', '0');
|
|
shouldBe('m.m42', '0');
|
|
shouldBe('m.m43', '0');
|
|
shouldBe('m.m44', '1');
|
|
|
|
debug("");
|
|
debug("Test rotateAxisAngle");
|
|
m = new WebKitCSSMatrix();
|
|
m2 = m.rotateAxisAngle(0.707, 0.707, 0.707, 45);
|
|
shouldBe('parseFloat(m2.m11.toPrecision(6))', '0.804738');
|
|
shouldBe('parseFloat(m2.m12.toPrecision(6))', '0.505879');
|
|
shouldBe('parseFloat(m2.m13.toPrecision(6))', '-0.310617');
|
|
shouldBe('parseFloat(m2.m14.toPrecision(6))', '0');
|
|
shouldBe('parseFloat(m2.m21.toPrecision(6))', '-0.310617');
|
|
shouldBe('parseFloat(m2.m22.toPrecision(6))', '0.804738');
|
|
shouldBe('parseFloat(m2.m23.toPrecision(6))', '0.505879');
|
|
shouldBe('parseFloat(m2.m24.toPrecision(6))', '0');
|
|
shouldBe('parseFloat(m2.m31.toPrecision(6))', '0.505879');
|
|
shouldBe('parseFloat(m2.m32.toPrecision(6))', '-0.310617');
|
|
shouldBe('parseFloat(m2.m33.toPrecision(6))', '0.804738');
|
|
shouldBe('parseFloat(m2.m34.toPrecision(6))', '0');
|
|
shouldBe('parseFloat(m2.m41.toPrecision(6))', '0');
|
|
shouldBe('parseFloat(m2.m42.toPrecision(6))', '0');
|
|
shouldBe('parseFloat(m2.m43.toPrecision(6))', '0');
|
|
shouldBe('parseFloat(m2.m44.toPrecision(6))', '1');
|
|
|
|
debug("");
|
|
debug("Test immutability of rotateAxisAngle");
|
|
shouldBe('m.m11', '1');
|
|
shouldBe('m.m12', '0');
|
|
shouldBe('m.m13', '0');
|
|
shouldBe('m.m14', '0');
|
|
shouldBe('m.m21', '0');
|
|
shouldBe('m.m22', '1');
|
|
shouldBe('m.m23', '0');
|
|
shouldBe('m.m24', '0');
|
|
shouldBe('m.m31', '0');
|
|
shouldBe('m.m32', '0');
|
|
shouldBe('m.m33', '1');
|
|
shouldBe('m.m34', '0');
|
|
shouldBe('m.m41', '0');
|
|
shouldBe('m.m42', '0');
|
|
shouldBe('m.m43', '0');
|
|
shouldBe('m.m44', '1');
|
|
|
|
debug("");
|
|
|
|
</script>
|
|
<script src="../resources/js-test-post.js"></script>
|
|
|
|
<script>
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|