spec-examples.html (3930B)
1 <!doctype html> 2 <title>Geometry APIs spec examples</title> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <link rel=help href="https://drafts.fxtf.org/geometry/"> 6 <script> 7 test(() => { 8 var point = new DOMPoint(5, 4); 9 var matrix = new DOMMatrix([2, 0, 0, 2, 10, 10]); 10 var transformedPoint = point.matrixTransform(matrix); 11 // The point variable is set to a new DOMPoint object with x coordinate initialized to 5 and y 12 // coordinate initialized to 4. 13 assert_equals(point.x, 5, 'point.x'); 14 assert_equals(point.y, 4, 'point.y'); 15 assert_equals(point.z, 0, 'point.z'); 16 assert_equals(point.w, 1, 'point.w'); 17 // This new DOMPoint is now scaled and the translated by matrix. This resulting transformedPoint 18 // has the x coordinate 20 and y coordinate 18. 19 assert_equals(transformedPoint.x, 20, 'transformedPoint.x'); 20 assert_equals(transformedPoint.y, 18, 'transformedPoint.x'); 21 assert_equals(transformedPoint.z, 0, 'transformedPoint.z'); 22 assert_equals(transformedPoint.w, 1, 'transformedPoint.w'); 23 }, 'matrixTransform'); 24 25 test(() => { 26 var point = new DOMPoint(2, 0); 27 var quad1 = new DOMQuad(point, {x: 12, y: 0}, {x: 12, y: 10}, {x: 2, y: 10}); 28 // The attribute values of the resulting DOMQuad quad1 above are also equivalent to the attribute 29 // values of the following DOMQuad quad2: 30 var rect = new DOMRect(2, 0, 10, 10); 31 var quad2 = DOMQuad.fromRect(rect); 32 for (var p of ['p1', 'p2', 'p3', 'p4']) { 33 for (var attr of ['x', 'y', 'z', 'w']) { 34 assert_equals(quad2[p][attr], quad1[p][attr], `${p}.${attr}`); 35 } 36 } 37 }, 'DOMQuad'); 38 39 test(() => { 40 var quad = new DOMQuad({x: 40, y: 25}, {x: 180, y: 8}, {x: 210, y: 150}, {x: 10, y: 180}); 41 // <circle cx="40" cy="25" r="3" fill="rgb(204, 51, 51)"/> 42 assert_equals(quad.p1.x, 40, 'p1.x'); 43 assert_equals(quad.p1.y, 25, 'p1.y'); 44 // <circle cx="180" cy="8" r="3" fill="rgb(204, 51, 51)"/> 45 assert_equals(quad.p2.x, 180, 'p2.x'); 46 assert_equals(quad.p2.y, 8, 'p2.y'); 47 // <circle cx="210" cy="150" r="3" fill="rgb(204, 51, 51)"/> 48 assert_equals(quad.p3.x, 210, 'p3.x'); 49 assert_equals(quad.p3.y, 150, 'p3.y'); 50 // <circle cx="10" cy="180" r="3" fill="rgb(204, 51, 51)"/> 51 assert_equals(quad.p4.x, 10, 'p4.x'); 52 assert_equals(quad.p4.y, 180, 'p4.y'); 53 var bounds = quad.getBounds(); 54 // <rect x="10" y="8" width="200" height="172" fill="none" stroke="black" stroke-dasharray="3 2"/> 55 assert_equals(bounds.x, 10, 'bounds.x'); 56 assert_equals(bounds.y, 8, 'bounds.x'); 57 assert_equals(bounds.width, 200, 'bounds.width'); 58 assert_equals(bounds.height, 172, 'bounds.height'); 59 }, 'DOMQuad irregular'); 60 61 test(() => { 62 // In this example, a matrix is created and several 2D transformation methods are called: 63 var matrix = new DOMMatrix(); 64 matrix.scaleSelf(2); 65 matrix.translateSelf(20,20); 66 assert_equals(matrix.toString(), "matrix(2, 0, 0, 2, 40, 40)"); 67 }, 'DOMMatrix 2D transformation'); 68 69 test(() => { 70 // In the following example, a matrix is created and several 3D transformation methods are called: 71 var matrix = new DOMMatrix(); 72 matrix.scale3dSelf(2); 73 assert_equals(matrix.toString(), "matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)"); 74 }, 'DOMMatrix 3D transformation'); 75 76 test(() => { 77 // This example will throw an exception because there are non-finite values in the matrix. 78 var matrix = new DOMMatrix([NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN]); 79 assert_throws_dom("InvalidStateError", () => { var string = matrix + " Batman!"; }); 80 }, 'DOMMatrix NaN'); 81 82 test(() => { 83 var matrix = new DOMMatrix(); 84 matrix.translateSelf(20, 20); 85 matrix.scaleSelf(2); 86 matrix.translateSelf(-20, -20); 87 // is equivalent to: 88 var matrix2 = new DOMMatrix(); 89 matrix2.translateSelf(20, 20).scaleSelf(2).translateSelf(-20, -20); 90 assert_equals(matrix.toString(), matrix2.toString()); 91 }, 'DOMMatrix mutable'); 92 </script>