1 var CShape = function(context, usePathObject) {
2 this._context = context;
5 this._path = new Path2D();
10 CShape.prototype.usePathObject = function() {
11 return this._path instanceof Path2D;
14 CShape.prototype.createShape = function() {
18 CShape.prototype.draw = function() {
19 var context = this._context;
20 var path = this._path;
24 if (this.usePathObject())
30 CShape.prototype.scroll = function() {
31 var context = this._context;
32 var path = this._path;
34 if (this.usePathObject())
35 context.scrollPathIntoView(path);
37 context.scrollPathIntoView();
40 var overrideShape = function(overrideMethod) {
41 var shape = function() {
42 CShape.apply(this, arguments);
45 shape.prototype = new CShape;
46 shape.prototype.createShape = overrideMethod;
50 var CRect = overrideShape(function() {
51 var path = this._path;
53 path.rect(-50, -50, 100, 100);
56 var CCapsule = overrideShape(function() {
57 var path = this._path;
59 path.arc(-35, 0, 50, Math.PI / 2, Math.PI * 1.5, false);
61 path.arc(50, 0, 50, Math.PI * 1.5, Math.PI / 2, false);
65 var CStar = overrideShape(function() {
66 var path = this._path;
69 path.lineTo(-15, -10);
70 path.lineTo(-50, -10);
81 var CCurve = overrideShape(function() {
82 var path = this._path;
84 path.moveTo(-50, -50);
85 path.bezierCurveTo(-50, 10, 50, 10, 50, 50);
88 var container = document.querySelector("div[class='container']");
89 var canvas = document.querySelector("canvas");
90 var context = canvas.getContext("2d");
92 function getRealValue(shape, degree, usePathObject) {
94 container.scrollTop = 0;
95 container.scrollLeft = 0;
97 // draw shape stroke on canvas
98 usePathObject = usePathObject == undefined || usePathObject == null ? false : true;
99 var s = new shape(context, usePathObject);
101 context.clearRect(0, 0, 400, 400);
103 context.translate(200, 200);
104 if (degree != 0 && degree != undefined && degree != null)
105 context.rotate(Math.PI / 180 * degree);
111 return container.scrollTop;
114 function scrollTest(shape, degree, usePathObject, expectedValue) {
115 var classes = [ "", "border", "padding", "padding border", "margin" ];
116 var offset = [ 0, 500, 500, 1000, 500 ];
118 for (var i = 0; i < classes.length; i++) {
119 canvas.className = classes[i];
120 window.testValue = getRealValue(shape, degree, usePathObject);
121 shouldBe("testValue", String(expectedValue + offset[i]));
125 description("Series of tests to ensure correct results of scrolling path into view on canvas");
126 debug("Test case 1: scrollPathIntoView() / CTM == identity");
127 scrollTest(CRect, 0, false, 150);
128 scrollTest(CCapsule, 0, false, 150);
129 scrollTest(CCurve, 0, false, 150);
130 scrollTest(CStar, 0, false, 150);
133 debug("Test case 2: scrollPathIntoView() / CTM != identity");
134 scrollTest(CRect, 20, false, 136);
135 scrollTest(CCapsule, 42, false, 106);
136 scrollTest(CCurve, 63, false, 133);
137 scrollTest(CStar, 40, false, 160);
140 debug("Test case 3: scrollPathIntoView(path2d) / CTM == identity");
141 scrollTest(CRect, 0, true, 150);
142 scrollTest(CCapsule, 0, true, 150);
143 scrollTest(CCurve, 0, true, 150);
144 scrollTest(CStar, 0, true, 150);
147 debug("Test case 4: scrollPathIntoView(path2d) / CTM != identity");
148 scrollTest(CRect, 20, true, 136);
149 scrollTest(CCapsule, 42, true, 106);
150 scrollTest(CCurve, 63, true, 133);
151 scrollTest(CStar, 40, true, 160);
154 debug("Test case 5: exceptions");
155 shouldThrow("context.scrollPathIntoView(null);");
156 shouldThrow("context.scrollPathIntoView(undefined);");
157 shouldThrow("context.scrollPathIntoView([]);");
158 shouldThrow("context.scrollPathIntoView({});");