ctm-sanity.html (1936B)
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function assert(cond, msg) { 5 if (!cond) { 6 throw msg; 7 } 8 } 9 10 assert.equal = function(m1, m2, msg) { 11 assert( 12 m1.is2D && 13 m2.is2D && 14 m1.a === m2.a && 15 m1.b === m2.b && 16 m1.c === m2.c && 17 m1.d === m2.d && 18 m1.e === m2.e && 19 m1.f === m2.f, 20 msg 21 ); 22 }; 23 24 window.onload = function() { 25 var IM = new DOMMatrix([1, 0, 0, 1, 0, 0]); 26 27 try { 28 var ctx = document.getElementById("c1").getContext("2d"); 29 30 assert.equal(ctx.getTransform(), IM, "Transform is identity by default"); 31 assert.equal( 32 ctx.getTransform().invertSelf(), 33 IM, 34 "Inverse transform is identity by default" 35 ); 36 37 var m = new DOMMatrix([1, 2, 3, 4, 5, 6]); 38 ctx.setTransform(m); 39 assert.equal(ctx.getTransform(), m, "Transform successfully set"); 40 41 var badVals = [ 42 ["string"], 43 [-1], 44 ["string", 1, 2, 3, 4, 5], 45 [{ obj: true }, 1, 2, 3, 4, 5], 46 ]; 47 for (var i = 0; i < badVals.length; ++i) { 48 try { 49 ctx.setTransform(...badVals[i]); 50 } catch {} 51 assert.equal( 52 ctx.getTransform(), 53 m, 54 "Expected |setTransform(" + badVals[i] + ")| to not change transform" 55 ); 56 } 57 58 ctx.setTransform(IM); 59 var noopVals = [ 60 [Number.NaN, 1, 2, 3, 4, 5], 61 [Infinity, 1, 2, 3, 4, 5], 62 ]; 63 for (var i = 0; i < noopVals.length; ++i) { 64 ctx.setTransform(...noopVals[i]); 65 assert.equal( 66 ctx.getTransform(), 67 IM, 68 "Illegal float values result in a no-op" 69 ); 70 } 71 72 ctx.setTransform(m.a, m.b, m.c, m.d, m.e, m.f); 73 assert.equal(ctx.getTransform(), m, "setTransform() updates transform"); 74 } catch (e) { 75 document.body.innerHTML = "FAIL: " + e.toString(); 76 return; 77 } 78 document.body.innerHTML = "Pass"; 79 }; 80 </script> 81 </head> 82 <body> 83 <div><canvas id="c1" width="300" height="300"></canvas></div> 84 </body> 85 </html>