LayoutTests/transforms/cssmatrix-2d-interface.xhtml

<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 interface");

debug("");
debug("CSSMatrix constructors");


var m = new WebKitCSSMatrix();
shouldBeNonNull('m');
shouldBeNonNull('new WebKitCSSMatrix()');
shouldBeNonNull('new WebKitCSSMatrix(m)');
shouldBeNonNull('new WebKitCSSMatrix("matrix(1, 0, 0, 1, 0, 0)")');
shouldBeNonNull('new WebKitCSSMatrix("")');
shouldBeNonNull('new WebKitCSSMatrix("none")');
shouldBeNonNull('new WebKitCSSMatrix("   none   ")');

debug("");
debug("Test toString");
var m = new WebKitCSSMatrix("matrix(1, 0, 0, 1, 0, 0)");
var s = m.toString();
var a = s.split('(');
shouldBe('a[0]', '"matrix"');
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');
var a3 = a2[5].split(")");
shouldBe('parseFloat(a3[0])', '0');
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.a', '1');
shouldBe('m.b', '0');
shouldBe('m.c', '0');
shouldBe('m.d', '1');
shouldBe('m.e', '0');
shouldBe('m.f', '0');

debug("");
debug("Test attributes on custom matrix");
m = new WebKitCSSMatrix("matrix(11, 12, 21, 22, 41, 42)");
shouldBe('m.a', '11');
shouldBe('m.b', '12');
shouldBe('m.c', '21');
shouldBe('m.d', '22');
shouldBe('m.e', '41');
shouldBe('m.f', '42');

debug("");
debug("Test setMatrixValue - set to matrix()");
m = new WebKitCSSMatrix();
m.setMatrixValue("matrix(11, 12, 21, 22, 41, 42)");
shouldBe('m.a', '11');
shouldBe('m.b', '12');
shouldBe('m.c', '21');
shouldBe('m.d', '22');
shouldBe('m.e', '41');
shouldBe('m.f', '42');

debug("");
debug("Test setMatrixValue - set to translate(10px, 20px) scale(2, 3)");
m = new WebKitCSSMatrix();
m.setMatrixValue("translate(10px, 20px) scale(2, 3)");
shouldBe('m.a', '2');
shouldBe('m.b', '0');
shouldBe('m.c', '0');
shouldBe('m.d', '3');
shouldBe('m.e', '10');
shouldBe('m.f', '20');

debug("");
debug("Test throwing exception from setMatrixValue");
shouldThrow('m.setMatrixValue("banana")');
shouldThrow('m.setMatrixValue("translate(10em, 20%)")');
shouldThrow('m.setMatrixValue("translate(10px, 20px) scale()")');

debug("");
debug("Test attributes on translate() and accumulation");
m = new WebKitCSSMatrix();
var m2 = m.translate(50,0);
m2 = m2.translate(50,50);
shouldBe('m2.a', '1');
shouldBe('m2.b', '0');
shouldBe('m2.c', '0');
shouldBe('m2.d', '1');
shouldBe('m2.e', '100');
shouldBe('m2.f', '50');

debug("");
debug("Test immutability of translate");
shouldBe('parseFloat(m.a)', '1');
shouldBe('parseFloat(m.b)', '0');
shouldBe('parseFloat(m.c)', '0');
shouldBe('parseFloat(m.d)', '1');
shouldBe('parseFloat(m.e)', '0');
shouldBe('parseFloat(m.f)', '0');

debug("");
debug("Test attributes on scale()");
var m3 = m2.scale(5);
shouldBe('m3.a', '5');
shouldBe('m3.b', '0');
shouldBe('m3.c', '0');
shouldBe('m3.d', '5');
shouldBe('m3.e', '100');
shouldBe('m3.f', '50');

debug("");
debug("Test immutability of scale()");
shouldBe('parseFloat(m2.a)', '1');
shouldBe('parseFloat(m2.b)', '0');
shouldBe('parseFloat(m2.c)', '0');
shouldBe('parseFloat(m2.d)', '1');
shouldBe('parseFloat(m2.e)', '100');
shouldBe('parseFloat(m2.f)', '50');

debug("");
debug("Test attributes on non-uniform scale()");
var m4 = m3.scale(2,1);
shouldBe('m4.a', '10');
shouldBe('m4.b', '0');
shouldBe('m4.c', '0');
shouldBe('m4.d', '5');
shouldBe('m4.e', '100');
shouldBe('m4.f', '50');

debug("");
debug("Test immutability of non-uniform scale()");
shouldBe('parseFloat(m3.a)', '5');
shouldBe('parseFloat(m3.b)', '0');
shouldBe('parseFloat(m3.c)', '0');
shouldBe('parseFloat(m3.d)', '5');
shouldBe('parseFloat(m3.e)', '100');
shouldBe('parseFloat(m3.f)', '50');

debug("");
debug("Test rotate");
m = new WebKitCSSMatrix();
m2 = m.rotate(10);
shouldBe('parseFloat(m2.a.toPrecision(6))', '0.984808');
shouldBe('parseFloat(m2.b.toPrecision(6))', '0.173648');
shouldBe('parseFloat(m2.c.toPrecision(6))', '-0.173648');
shouldBe('parseFloat(m2.d.toPrecision(6))', '0.984808');
shouldBe('m.e', '0');
shouldBe('m.f', '0');

debug("");
debug("Test immutability of rotate");
shouldBe('parseFloat(m.a)', '1');
shouldBe('parseFloat(m.b)', '0');
shouldBe('parseFloat(m.c)', '0');
shouldBe('parseFloat(m.d)', '1');
shouldBe('parseFloat(m.e)', '0');
shouldBe('parseFloat(m.f)', '0');

debug("");
debug("Test skew in horizontal direction");
m = new WebKitCSSMatrix();
m2 = m.skewX(10);
shouldBe('parseFloat(m2.a)', '1');
shouldBe('parseFloat(m2.b)', '0');
shouldBe('parseFloat(m2.c.toPrecision(6))', '0.176327');
shouldBe('parseFloat(m2.d)', '1');
shouldBe('parseFloat(m2.e)', '0');
shouldBe('parseFloat(m2.f)', '0');

debug("");
debug("Test immutability of horizontal skew");
shouldBe('parseFloat(m.a)', '1');
shouldBe('parseFloat(m.b)', '0');
shouldBe('parseFloat(m.c)', '0');
shouldBe('parseFloat(m.d)', '1');
shouldBe('parseFloat(m.e)', '0');
shouldBe('parseFloat(m.f)', '0');

debug("");
debug("Test skew in vertical direction");
m = new WebKitCSSMatrix();
m2 = m.skewY(35);
shouldBe('parseFloat(m2.a)', '1');
shouldBe('parseFloat(m2.b.toPrecision(6))', '0.700208');
shouldBe('parseFloat(m2.c)', '0');
shouldBe('parseFloat(m2.d)', '1');
shouldBe('parseFloat(m2.e)', '0');
shouldBe('parseFloat(m2.f)', '0');

debug("");
debug("Test immutability of vertical skew");
shouldBe('parseFloat(m.a)', '1');
shouldBe('parseFloat(m.b)', '0');
shouldBe('parseFloat(m.c)', '0');
shouldBe('parseFloat(m.d)', '1');
shouldBe('parseFloat(m.e)', '0');
shouldBe('parseFloat(m.f)', '0');

debug("");
debug("Test multiply");
m = new WebKitCSSMatrix("matrix(1, 2, 3, 4, 5, 6)");
m2 = new WebKitCSSMatrix("matrix(7, 8, 9, 10, 11, 12)");
var m3 = m.multiply(m2);
shouldBe('parseFloat(m3.a)', '31');
shouldBe('parseFloat(m3.b)', '46');
shouldBe('parseFloat(m3.c)', '39');
shouldBe('parseFloat(m3.d)', '58');
shouldBe('parseFloat(m3.e)', '52');
shouldBe('parseFloat(m3.f)', '76');

debug("");
debug("Test that multiply works in the right direction");
var tx = new WebKitCSSMatrix();
var sx = new WebKitCSSMatrix();
tx = tx.translate(100,0);
sx = sx.scale(2,1);
m = tx.multiply(sx);
shouldBe('m.a', '2');
shouldBe('m.b', '0');
shouldBe('m.c', '0');
shouldBe('m.d', '1');
shouldBe('m.e', '100');
shouldBe('m.f', '0');

debug("")
debug("Test immutability of multiply");
shouldBe('tx.a', '1');
shouldBe('tx.b', '0');
shouldBe('tx.c', '0');
shouldBe('tx.d', '1');
shouldBe('tx.e', '100');
shouldBe('tx.f', '0');
shouldBe('sx.a', '2');
shouldBe('sx.b', '0');
shouldBe('sx.c', '0');
shouldBe('sx.d', '1');
shouldBe('sx.e', '0');
shouldBe('sx.f', '0');

debug("");
debug("Test multiply with missing argument");
m = new WebKitCSSMatrix("matrix(1, 2, 3, 4, 5, 6)");
m2 = m.multiply();
shouldBe('m2.a', '1');
shouldBe('m2.b', '2');
shouldBe('m2.c', '3');
shouldBe('m2.d', '4');
shouldBe('m2.e', '5');
shouldBe('m2.f', '6');

debug("");
debug("Test inverse");
m = new WebKitCSSMatrix("matrix(2, 0, 0, 2, 10, 20)");
m2 = m.inverse();

shouldBe('parseFloat(m2.a)', '0.5');
shouldBe('parseFloat(m2.b)', '0');
shouldBe('parseFloat(m2.c)', '0');
shouldBe('parseFloat(m2.d)', '0.5');
shouldBe('parseFloat(m2.e)', '-5');
shouldBe('parseFloat(m2.f)', '-10');

debug("");
debug("Test immutability of inverse");
shouldBe('parseFloat(m.a)', '2');
shouldBe('parseFloat(m.b)', '0');
shouldBe('parseFloat(m.c)', '0');
shouldBe('parseFloat(m.d)', '2');
shouldBe('parseFloat(m.e)', '10');
shouldBe('parseFloat(m.f)', '20');

debug("");
debug("Test throwing exception from inverse");
m = new WebKitCSSMatrix("matrix(0, 0, 0, 0, 0, 0)"); // not invertible
m2 = m.inverse();

shouldBeNaN('m2.a');
shouldBeNaN('m2.b');
shouldBeNaN('m2.c');
shouldBeNaN('m2.d');
shouldBeNaN('m2.e');
shouldBeNaN('m2.f');

debug("");
debug("Test immutability of inverse");
shouldBe('m.a', '0');
shouldBe('m.b', '0');
shouldBe('m.c', '0');
shouldBe('m.d', '0');
shouldBe('m.e', '0');
shouldBe('m.f', '0');

debug("");

</script>
<script src="../resources/js-test-post.js"></script>

<script>
</script>

</body>
</html>