source: other-projects/nz-flag-design/trunk/design-2d/Original editor.method.ac/test/draw_test.html@ 29468

Last change on this file since 29468 was 29468, checked in by sjs49, 9 years ago

Initial commit for editor.method.ac for flag design
  • Property svn:executable set to *
File size: 14.2 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4 <link rel='stylesheet' href='qunit/qunit.css' type='text/css'/>
5 <script type='text/javascript' src='../editor/lib/jquery.js'></script>
6 <script type='text/javascript' src='../editor/src/browser.js'></script>
7 <script type='text/javascript' src='../editor/src/svgutils.js'></script>
8 <script type='text/javascript' src='../editor/src/draw.js'></script>
9 <script type='text/javascript' src='qunit/qunit.js'></script>
10 <script type='text/javascript'>
11 $(function() {
12 // log function
13 QUnit.log = function(result, message) {
14 if (window.console && window.console.log) {
15 window.console.log(result +' :: '+ message);
16 }
17 };
18
19 var SVGNS = 'http://www.w3.org/2000/svg';
20 var SENS = "http://svg-edit.googlecode.com";
21 var XMLNSNS = "http://www.w3.org/2000/xmlns/";
22 var NONCE = 'foo';
23 var LAYER1 = 'Layer 1';
24 var LAYER2 = 'Layer 2';
25 var LAYER3 = 'Layer 3';
26
27 var svg = document.createElementNS(SVGNS, 'svg');
28
29 // Set up <svg> with nonce.
30 var svg_n = document.createElementNS(SVGNS, 'svg');
31 svg_n.setAttributeNS(XMLNSNS, 'xmlns:se', SENS);
32 svg_n.setAttributeNS(SENS, 'se:nonce', NONCE);
33
34 var setupSvgWith3Layers = function(svgElem) {
35 var layer1 = document.createElementNS(SVGNS, 'g');
36 var layer1_title = document.createElementNS(SVGNS, 'title');
37 layer1_title.appendChild(document.createTextNode(LAYER1));
38 layer1.appendChild(layer1_title);
39 svgElem.appendChild(layer1);
40
41 var layer2 = document.createElementNS(SVGNS, 'g');
42 var layer2_title = document.createElementNS(SVGNS, 'title');
43 layer2_title.appendChild(document.createTextNode(LAYER2));
44 layer2.appendChild(layer2_title);
45 svgElem.appendChild(layer2);
46
47 var layer3 = document.createElementNS(SVGNS, 'g');
48 var layer3_title = document.createElementNS(SVGNS, 'title');
49 layer3_title.appendChild(document.createTextNode(LAYER3));
50 layer3.appendChild(layer3_title);
51 svgElem.appendChild(layer3);
52 };
53
54 var cleanupSvg = function(svgElem) {
55 while(svgElem.firstChild) {svgElem.removeChild(svgElem.firstChild);}
56 };
57
58 test('Test draw module', function() {
59 expect(4);
60
61 ok(svgedit.draw);
62 equals(typeof svgedit.draw, typeof {});
63
64 ok(svgedit.draw.Drawing);
65 equals(typeof svgedit.draw.Drawing, typeof function(){});
66 });
67
68 test('Test document creation', function() {
69 expect(3);
70
71 try {
72 var doc = new svgedit.draw.Drawing();
73 ok(false, 'Created drawing without a valid <svg> element');
74 } catch(e) {
75 ok(true);
76 }
77
78 try {
79 var doc = new svgedit.draw.Drawing(svg);
80 ok(doc);
81 equals(typeof doc, typeof {});
82 } catch(e) {
83 ok(false, 'Could not create document from valid <svg> element: ' + e)
84 }
85 });
86
87 test('Test nonce', function() {
88 expect(7);
89
90 var doc = new svgedit.draw.Drawing(svg);
91 equals(doc.getNonce(), "");
92
93 doc = new svgedit.draw.Drawing(svg_n);
94 equals(doc.getNonce(), NONCE);
95 equals(doc.getSvgElem().getAttributeNS(SENS, 'nonce'), NONCE);
96
97 doc.clearNonce();
98 ok(!doc.getNonce());
99 ok(!doc.getSvgElem().getAttributeNS(SENS, 'se:nonce'));
100
101 doc.setNonce(NONCE);
102 equals(doc.getNonce(), NONCE);
103 equals(doc.getSvgElem().getAttributeNS(SENS, 'nonce'), NONCE);
104 });
105
106 test('Test getId() and getNextId() without nonce', function() {
107 expect(7);
108
109 var elem2 = document.createElementNS(SVGNS, 'circle');
110 elem2.id = 'svg_2';
111 svg.appendChild(elem2);
112
113 var doc = new svgedit.draw.Drawing(svg);
114
115 equals(doc.getId(), "svg_0");
116
117 equals(doc.getNextId(), "svg_1");
118 equals(doc.getId(), "svg_1");
119
120 equals(doc.getNextId(), "svg_3");
121 equals(doc.getId(), "svg_3");
122
123 equals(doc.getNextId(), "svg_4");
124 equals(doc.getId(), "svg_4");
125
126 // clean out svg document
127 cleanupSvg(svg);
128 });
129
130 test('Test getId() and getNextId() with prefix without nonce', function() {
131 expect(7);
132
133 var prefix = 'Bar-';
134 var doc = new svgedit.draw.Drawing(svg, prefix);
135
136 equals(doc.getId(), prefix+"0");
137
138 equals(doc.getNextId(), prefix+"1");
139 equals(doc.getId(), prefix+"1");
140
141 equals(doc.getNextId(), prefix+"2");
142 equals(doc.getId(), prefix+"2");
143
144 equals(doc.getNextId(), prefix+"3");
145 equals(doc.getId(), prefix+"3");
146
147 cleanupSvg(svg);
148 });
149
150 test('Test getId() and getNextId() with nonce', function() {
151 expect(7);
152
153 var prefix = "svg_" + NONCE;
154
155 var elem2 = document.createElementNS(SVGNS, 'circle');
156 elem2.id = prefix+'_2';
157 svg_n.appendChild(elem2);
158
159 var doc = new svgedit.draw.Drawing(svg_n);
160
161 equals(doc.getId(), prefix+"_0");
162
163 equals(doc.getNextId(), prefix+"_1");
164 equals(doc.getId(), prefix+"_1");
165
166 equals(doc.getNextId(), prefix+"_3");
167 equals(doc.getId(), prefix+"_3");
168
169 equals(doc.getNextId(), prefix+"_4");
170 equals(doc.getId(), prefix+"_4");
171
172 cleanupSvg(svg_n);
173 });
174
175 test('Test getId() and getNextId() with prefix with nonce', function() {
176 expect(7);
177
178 var PREFIX = 'Bar-';
179 var doc = new svgedit.draw.Drawing(svg_n, PREFIX);
180
181 var prefix = PREFIX + NONCE + "_";
182 equals(doc.getId(), prefix+"0");
183
184 equals(doc.getNextId(), prefix+"1");
185 equals(doc.getId(), prefix+"1");
186
187 equals(doc.getNextId(), prefix+"2");
188 equals(doc.getId(), prefix+"2");
189
190 equals(doc.getNextId(), prefix+"3");
191 equals(doc.getId(), prefix+"3");
192
193 cleanupSvg(svg_n);
194 });
195
196 test('Test releaseId()', function() {
197 expect(6);
198
199 var doc = new svgedit.draw.Drawing(svg);
200
201 var firstId = doc.getNextId();
202 var secondId = doc.getNextId();
203
204 var result = doc.releaseId(firstId);
205 ok(result);
206 equals(doc.getNextId(), firstId);
207 equals(doc.getNextId(), "svg_3");
208
209 ok(!doc.releaseId("bad-id"));
210 ok(doc.releaseId(firstId));
211 ok(!doc.releaseId(firstId));
212
213 cleanupSvg(svg);
214 });
215
216 test('Test getNumLayers', function() {
217 expect(3);
218 var drawing = new svgedit.draw.Drawing(svg);
219 equals(typeof drawing.getNumLayers, typeof function() {});
220 equals(drawing.getNumLayers(), 0);
221
222 setupSvgWith3Layers(svg);
223 drawing.identifyLayers();
224
225 equals(drawing.getNumLayers(), 3);
226
227 cleanupSvg(svg);
228 });
229
230 test('Test hasLayer', function() {
231 expect(5);
232
233 setupSvgWith3Layers(svg);
234 var drawing = new svgedit.draw.Drawing(svg);
235 drawing.identifyLayers();
236
237 equals(typeof drawing.hasLayer, typeof function() {});
238 ok(!drawing.hasLayer('invalid-layer'));
239
240 ok(drawing.hasLayer(LAYER3));
241 ok(drawing.hasLayer(LAYER2));
242 ok(drawing.hasLayer(LAYER1));
243
244 cleanupSvg(svg);
245 });
246
247 test('Test identifyLayers() with empty document', function() {
248 expect(9);
249
250 var drawing = new svgedit.draw.Drawing(svg);
251
252 // By default, an empty document gets an empty group created.
253 drawing.identifyLayers();
254
255 // Check that <svg> element now has one child node
256 ok(drawing.getSvgElem().hasChildNodes());
257 equals(drawing.getSvgElem().childNodes.length, 1);
258
259 // Check that all_layers is correctly set up.
260 equals(drawing.getNumLayers(), 1);
261 var empty_layer = drawing.all_layers[0][1];
262 ok(empty_layer);
263 equals(empty_layer, drawing.getSvgElem().firstChild);
264 equals(empty_layer.tagName, 'g');
265 ok(empty_layer.hasChildNodes());
266 equals(empty_layer.childNodes.length, 1);
267 var firstChild = empty_layer.childNodes.item(0);
268 equals(firstChild.tagName, 'title');
269
270 cleanupSvg(svg);
271 });
272
273 test('Test identifyLayers() with some layers', function() {
274 expect(5);
275
276 var drawing = new svgedit.draw.Drawing(svg);
277 setupSvgWith3Layers(svg);
278
279 equals(svg.childNodes.length, 3);
280
281 drawing.identifyLayers();
282
283 equals(drawing.getNumLayers(), 3);
284 equals(drawing.all_layers[0][1], svg.childNodes.item(0));
285 equals(drawing.all_layers[1][1], svg.childNodes.item(1));
286 equals(drawing.all_layers[2][1], svg.childNodes.item(2));
287
288 cleanupSvg(svg);
289 });
290
291 test('Test identifyLayers() with some layers and orphans', function() {
292 expect(10);
293
294 setupSvgWith3Layers(svg);
295
296 var orphan1 = document.createElementNS(SVGNS, 'rect');
297 var orphan2 = document.createElementNS(SVGNS, 'rect');
298 svg.appendChild(orphan1);
299 svg.appendChild(orphan2);
300
301 equals(svg.childNodes.length, 5);
302
303 var drawing = new svgedit.draw.Drawing(svg);
304 drawing.identifyLayers();
305
306 equals(drawing.getNumLayers(), 4);
307 equals(drawing.all_layers[0][1], svg.childNodes.item(0));
308 equals(drawing.all_layers[1][1], svg.childNodes.item(1));
309 equals(drawing.all_layers[2][1], svg.childNodes.item(2));
310 equals(drawing.all_layers[3][1], svg.childNodes.item(3));
311
312 var layer4 = drawing.all_layers[3][1];
313 equals(layer4.tagName, 'g');
314 equals(layer4.childNodes.length, 3);
315 equals(layer4.childNodes.item(1), orphan1);
316 equals(layer4.childNodes.item(2), orphan2);
317
318 cleanupSvg(svg);
319 });
320
321 test('Test getLayerName()', function() {
322 expect(4);
323
324 var drawing = new svgedit.draw.Drawing(svg);
325 setupSvgWith3Layers(svg);
326
327 drawing.identifyLayers();
328
329 equals(drawing.getNumLayers(), 3);
330 equals(drawing.getLayerName(0), LAYER1);
331 equals(drawing.getLayerName(1), LAYER2);
332 equals(drawing.getLayerName(2), LAYER3);
333
334 cleanupSvg(svg);
335 });
336
337 test('Test getCurrentLayer()', function() {
338 expect(4);
339
340 var drawing = new svgedit.draw.Drawing(svg);
341 setupSvgWith3Layers(svg);
342 drawing.identifyLayers();
343
344 ok(drawing.getCurrentLayer);
345 equals(typeof drawing.getCurrentLayer, typeof function(){});
346 ok(drawing.getCurrentLayer());
347 equals(drawing.getCurrentLayer(), drawing.all_layers[2][1]);
348 });
349
350 test('Test setCurrentLayer() and getCurrentLayerName()', function() {
351 expect(6);
352
353 var drawing = new svgedit.draw.Drawing(svg);
354 setupSvgWith3Layers(svg);
355 drawing.identifyLayers();
356
357 ok(drawing.setCurrentLayer);
358 equals(typeof drawing.setCurrentLayer, typeof function(){});
359
360 drawing.setCurrentLayer(LAYER2);
361 equals(drawing.getCurrentLayerName(LAYER2), LAYER2);
362 equals(drawing.getCurrentLayer(), drawing.all_layers[1][1]);
363
364 drawing.setCurrentLayer(LAYER3);
365 equals(drawing.getCurrentLayerName(LAYER3), LAYER3);
366 equals(drawing.getCurrentLayer(), drawing.all_layers[2][1]);
367
368 cleanupSvg(svg);
369 });
370
371 test('Test createLayer()', function() {
372 expect(6);
373
374 var drawing = new svgedit.draw.Drawing(svg);
375 setupSvgWith3Layers(svg);
376 drawing.identifyLayers();
377
378 ok(drawing.createLayer);
379 equals(typeof drawing.createLayer, typeof function(){});
380
381 var NEW_LAYER_NAME = 'Layer A';
382 var layer_g = drawing.createLayer(NEW_LAYER_NAME);
383 equals(4, drawing.getNumLayers());
384 equals(layer_g, drawing.getCurrentLayer());
385 equals(NEW_LAYER_NAME, drawing.getCurrentLayerName());
386 equals(NEW_LAYER_NAME, drawing.getLayerName(3));
387
388 cleanupSvg(svg);
389 });
390
391 test('Test getLayerVisibility()', function() {
392 expect(5);
393
394 var drawing = new svgedit.draw.Drawing(svg);
395 setupSvgWith3Layers(svg);
396 drawing.identifyLayers();
397
398 ok(drawing.getLayerVisibility);
399 equals(typeof drawing.getLayerVisibility, typeof function(){});
400 ok(drawing.getLayerVisibility(LAYER1));
401 ok(drawing.getLayerVisibility(LAYER2));
402 ok(drawing.getLayerVisibility(LAYER3));
403
404 cleanupSvg(svg);
405 });
406
407 test('Test setLayerVisibility()', function() {
408 expect(6);
409
410 var drawing = new svgedit.draw.Drawing(svg);
411 setupSvgWith3Layers(svg);
412 drawing.identifyLayers();
413
414 ok(drawing.setLayerVisibility);
415 equals(typeof drawing.setLayerVisibility, typeof function(){});
416
417 drawing.setLayerVisibility(LAYER3, false);
418 drawing.setLayerVisibility(LAYER2, true);
419 drawing.setLayerVisibility(LAYER1, false);
420
421 ok(!drawing.getLayerVisibility(LAYER1));
422 ok(drawing.getLayerVisibility(LAYER2));
423 ok(!drawing.getLayerVisibility(LAYER3));
424
425 drawing.setLayerVisibility(LAYER3, 'test-string');
426 ok(!drawing.getLayerVisibility(LAYER3));
427
428 cleanupSvg(svg);
429 });
430
431 test('Test getLayerOpacity()', function() {
432 expect(5);
433
434 var drawing = new svgedit.draw.Drawing(svg);
435 setupSvgWith3Layers(svg);
436 drawing.identifyLayers();
437
438 ok(drawing.getLayerOpacity);
439 equals(typeof drawing.getLayerOpacity, typeof function(){});
440 ok(drawing.getLayerOpacity(LAYER1) == 1.0);
441 ok(drawing.getLayerOpacity(LAYER2) == 1.0);
442 ok(drawing.getLayerOpacity(LAYER3) == 1.0);
443
444 cleanupSvg(svg);
445 });
446
447 test('Test setLayerOpacity()', function() {
448 expect(6);
449
450 var drawing = new svgedit.draw.Drawing(svg);
451 setupSvgWith3Layers(svg);
452 drawing.identifyLayers();
453
454 ok(drawing.setLayerOpacity);
455 equals(typeof drawing.setLayerOpacity, typeof function(){});
456
457 drawing.setLayerOpacity(LAYER1, 0.4);
458 drawing.setLayerOpacity(LAYER2, 'invalid-string');
459 drawing.setLayerOpacity(LAYER3, -1.4);
460
461 ok(drawing.getLayerOpacity(LAYER1) == 0.4);
462 QUnit.log('layer2 opacity', drawing.getLayerOpacity(LAYER2));
463 ok(drawing.getLayerOpacity(LAYER2) == 1.0);
464 ok(drawing.getLayerOpacity(LAYER3) == 1.0);
465
466 drawing.setLayerOpacity(LAYER3, 100);
467 ok(drawing.getLayerOpacity(LAYER3) == 1.0);
468
469 cleanupSvg(svg);
470 });
471
472 test('Test deleteCurrentLayer()', function() {
473 expect(6);
474
475 var drawing = new svgedit.draw.Drawing(svg);
476 setupSvgWith3Layers(svg);
477 drawing.identifyLayers();
478
479 drawing.setCurrentLayer(LAYER2);
480
481 var curLayer = drawing.getCurrentLayer();
482 equals(curLayer, drawing.all_layers[1][1]);
483 var deletedLayer = drawing.deleteCurrentLayer();
484
485 equals(curLayer, deletedLayer);
486 equals(2, drawing.getNumLayers());
487 equals(LAYER1, drawing.all_layers[0][0]);
488 equals(LAYER3, drawing.all_layers[1][0]);
489 equals(drawing.getCurrentLayer(), drawing.all_layers[1][1]);
490 });
491
492 test('Test svgedit.draw.randomizeIds()', function() {
493 expect(9);
494
495 // Confirm in LET_DOCUMENT_DECIDE mode that the document decides
496 // if there is a nonce.
497 var drawing = new svgedit.draw.Drawing(svg_n.cloneNode(true));
498 ok(!!drawing.getNonce());
499
500 drawing = new svgedit.draw.Drawing(svg.cloneNode(true));
501 ok(!drawing.getNonce());
502
503 // Confirm that a nonce is set once we're in ALWAYS_RANDOMIZE mode.
504 svgedit.draw.randomizeIds(true, drawing);
505 ok(!!drawing.getNonce());
506
507 // Confirm new drawings in ALWAYS_RANDOMIZE mode have a nonce.
508 drawing = new svgedit.draw.Drawing(svg.cloneNode(true));
509 ok(!!drawing.getNonce());
510
511 drawing.clearNonce();
512 ok(!drawing.getNonce());
513
514 // Confirm new drawings in NEVER_RANDOMIZE mode do not have a nonce
515 // but that their se:nonce attribute is left alone.
516 svgedit.draw.randomizeIds(false, drawing);
517 ok(!drawing.getNonce());
518 ok(!!drawing.getSvgElem().getAttributeNS(SENS, 'nonce'));
519
520 drawing = new svgedit.draw.Drawing(svg.cloneNode(true));
521 ok(!drawing.getNonce());
522
523 drawing = new svgedit.draw.Drawing(svg_n.cloneNode(true));
524 ok(!drawing.getNonce());
525 });
526
527 });
528 </script>
529</head>
530<body>
531 <h1 id='qunit-header'>Unit Tests for draw.js</h1>
532 <h2 id='qunit-banner'></h2>
533 <h2 id='qunit-userAgent'></h2>
534 <ol id='qunit-tests'>
535 </ol>
536 <div id='anchor' style='visibility:hidden'>
537 </div>
538</body>
539</html>
Note: See TracBrowser for help on using the repository browser.