test_basic.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555
  1. runTests([
  2. // Test 1
  3. function() {
  4. var lastSVG = null;
  5. var sequenceNum = 0;
  6. var sequence = ['afterLoad', 'beforeInject', 'afterInject', 'beforeInject', 'afterInject', 'beforeInject', 'afterInject'];
  7. var testSequence = function(eventName) {
  8. if (sequenceNum === sequence.length || sequence[sequenceNum++] !== eventName) {
  9. fail();
  10. } else if (sequenceNum === sequence.length) {
  11. success();
  12. }
  13. };
  14. SVGInject.create('SVGInject1', {
  15. beforeInject: function(img, svg) {
  16. testSequence('beforeInject');
  17. if (lastSVG === svg) {
  18. fail();
  19. } else if (svg.parentNode && svg.parentNode.tagName == 'div') {
  20. fail();
  21. } else if (!img.parentNode) {
  22. fail();
  23. }
  24. lastSVG = svg;
  25. },
  26. afterInject: function(img, svg) {
  27. testSequence('afterInject');
  28. if (lastSVG !== svg) {
  29. fail();
  30. } else if (!svg.parentNode) {
  31. fail();
  32. } else if (img.parentNode) {
  33. fail();
  34. }
  35. },
  36. afterLoad: function(svg) {
  37. testSequence('afterLoad');
  38. }
  39. });
  40. },
  41. // Test 2
  42. function() {
  43. var sequenceNum = 0;
  44. var sequence = [];
  45. for (var i = 0; i < 9; ++i) {
  46. sequence.push('beforeInject');
  47. sequence.push('afterInject');
  48. }
  49. var testSequence = function(eventName) {
  50. if (sequenceNum === sequence.length || sequence[sequenceNum++] !== eventName) {
  51. fail();
  52. } else if (sequenceNum === sequence.length) {
  53. success();
  54. }
  55. };
  56. SVGInject.create('SVGInject2', {
  57. beforeInject: function(img, svg) {
  58. testSequence('beforeInject');
  59. },
  60. afterInject: function(img, svg) {
  61. testSequence('afterInject');
  62. }
  63. });
  64. },
  65. // Test 3
  66. function() {
  67. var includeAttributes = {
  68. 'id': 'test_3_id',
  69. 'class': 'inject-success',
  70. 'data-test': 'test'
  71. };
  72. var notIncludeAttributes = ['src', 'onload', 'onerror', 'alt', 'title'];
  73. SVGInject.create('SVGInject3', {
  74. afterInject: function(img, svg) {
  75. for (var key in includeAttributes) {
  76. var val = includeAttributes[key];
  77. if (!svg.hasAttribute(key) || svg.getAttribute(key) !== val) {
  78. fail();
  79. return;
  80. }
  81. }
  82. for (var i = 0; i < notIncludeAttributes.length; ++i) {
  83. var notIncludeAttribute = notIncludeAttributes[i];
  84. if (svg.hasAttribute(notIncludeAttribute)) {
  85. fail();
  86. return;
  87. }
  88. }
  89. if (svg.firstElementChild.textContent !== 'businesspeople') {
  90. fail();
  91. return;
  92. }
  93. success();
  94. }
  95. });
  96. },
  97. // Test 4
  98. function() {
  99. var notIncludeAttributes = ['id', 'data-test', 'onload', 'onerror', 'alt', 'title'];
  100. SVGInject.create('SVGInject4', {
  101. copyAttributes: false,
  102. beforeInject: function(img, svg) {
  103. svg.setAttribute('class', img.getAttribute('class'));
  104. },
  105. afterInject: function(img, svg) {
  106. for (var i = 0; i < notIncludeAttributes.length; ++i) {
  107. var notIncludeAttribute = notIncludeAttributes[i];
  108. if (svg.hasAttribute(notIncludeAttribute)) {
  109. fail();
  110. return;
  111. }
  112. if (svg.firstChild.tagName == 'title') {
  113. fail();
  114. return;
  115. }
  116. }
  117. success();
  118. }
  119. });
  120. },
  121. // Test 5
  122. function() {
  123. SVGInject.create('SVGInject5');
  124. var sequenceNum = 0;
  125. var sequence = [];
  126. for (var i = 0; i < 9; ++i) {
  127. if (i % 3 == 0) {
  128. sequence.push('afterLoad');
  129. }
  130. sequence.push('beforeInject');
  131. sequence.push('afterInject');
  132. }
  133. var testSequence = function(eventName) {
  134. if (sequenceNum === sequence.length || sequence[sequenceNum++] !== eventName) {
  135. fail();
  136. } else if (sequenceNum === sequence.length) {
  137. success();
  138. }
  139. };
  140. SVGInject5.setOptions({
  141. afterLoad: function(svg) {
  142. testSequence('afterLoad')
  143. },
  144. beforeInject: function(img, svg) {
  145. testSequence('beforeInject');
  146. },
  147. afterInject: function(img, svg) {
  148. testSequence('afterInject');
  149. }
  150. });
  151. domReady(function(event) {
  152. SVGInject5(document.getElementsByClassName('test-5'));
  153. });
  154. },
  155. // Test 6
  156. function() {
  157. var count = 0;
  158. SVGInject.create('SVGInject6', {
  159. afterLoad: failCallback(),
  160. beforeInject: failCallback(),
  161. afterInject: failCallback(),
  162. onFail: function(img) {
  163. img.src = 'imgs/test1.png';
  164. if (++count == 7) {
  165. success();
  166. } else if (count > 7) {
  167. fail();
  168. }
  169. }
  170. });
  171. },
  172. // Test 7
  173. function() {
  174. var count = 0;
  175. SVGInject.create('SVGInject7', {
  176. afterLoad: failCallback(),
  177. beforeInject: failCallback(),
  178. afterInject: failCallback(),
  179. onFail: function(img) {
  180. img.src = 'imgs/test1.png';
  181. if (++count == 7) {
  182. success();
  183. } else if (count > 7) {
  184. fail();
  185. }
  186. }
  187. });
  188. domReady(function(event) {
  189. SVGInject7(document.getElementsByClassName('test-7'));
  190. });
  191. },
  192. // Test 8
  193. function() {
  194. var count = 0;
  195. SVGInject.create('SVGInject8', {
  196. afterLoad: failCallback(),
  197. beforeInject: failCallback(),
  198. afterInject: failCallback(),
  199. onFail: function(img) {
  200. if (img.hasAttribute('onload')) {
  201. fail();
  202. }
  203. if (++count == 12) {
  204. success();
  205. } else if (count > 12) {
  206. fail();
  207. }
  208. }
  209. });
  210. domReady(function(event) {
  211. SVGInject8(document.getElementsByClassName('test-8'));
  212. });
  213. },
  214. // Test 9
  215. function() {
  216. var count = 0;
  217. SVGInject.create('SVGInject9');
  218. SVGInject9.setOptions({
  219. afterInject: function(img, svg) {
  220. // do not use className for SVGs!
  221. svg.setAttribute('class', 'inject-success');
  222. if (++count == 2) {
  223. success();
  224. } else if (count > 2) {
  225. fail();
  226. }
  227. }
  228. });
  229. domReady(function() {
  230. SVGInject9(document.getElementById('test-9').querySelectorAll('img[src$=".svg"]'));
  231. });
  232. },
  233. // Test 10
  234. function() {
  235. var sequenceNum = 0;
  236. var sequence = [];
  237. var svgs = [];
  238. for (var i = 0; i < 8; ++i) {
  239. sequence.push('afterLoad');
  240. sequence.push('beforeInject');
  241. sequence.push('afterInject');
  242. }
  243. var testSequence = function(eventName) {
  244. if (sequenceNum === sequence.length || sequence[sequenceNum++] !== eventName) {
  245. fail();
  246. } else if (sequenceNum === sequence.length) {
  247. success();
  248. }
  249. };
  250. SVGInject.create('SVGInject10', {
  251. useCache: false,
  252. beforeInject: function(img, svg) {
  253. testSequence('beforeInject');
  254. },
  255. afterInject: function(img, svg) {
  256. testSequence('afterInject');
  257. },
  258. afterLoad: function(svg) {
  259. if (svgs.indexOf(svg) !== -1) {
  260. fail();
  261. } else {
  262. svgs.push(svg);
  263. }
  264. testSequence('afterLoad');
  265. }
  266. });
  267. domReady(function() {
  268. SVGInject10(document.getElementsByClassName('test-10'));
  269. });
  270. },
  271. // Test 11
  272. function() {
  273. SVGInject.create('SVGInject11', {
  274. afterInject: function(img, svg) {
  275. var titleElems = svg.getElementsByTagName('title');
  276. if (titleElems.length != 1 || titleElems[0].textContent != 'New Test Title') {
  277. fail();
  278. } else {
  279. success();
  280. }
  281. }
  282. });
  283. },
  284. // Test 12
  285. function() {
  286. var count = 0;
  287. SVGInject.create('SVGInject12', {
  288. afterLoad: function(svg) {
  289. svg.setAttribute('data-test-afterload', 'success');
  290. },
  291. afterInject: function(img, svg) {
  292. if (svg.getAttribute('data-test-afterload') != 'success') {
  293. fail();
  294. } else {
  295. if (++count == 6) {
  296. success();
  297. } else if (count > 6) {
  298. fail();
  299. }
  300. }
  301. }
  302. });
  303. },
  304. // Test 13
  305. function() {
  306. var count = 0;
  307. SVGInject.create('SVGInject13', {
  308. afterInject: function() {
  309. if (++count == 4) {
  310. success();
  311. }
  312. }
  313. });
  314. },
  315. // Test 14
  316. function() {
  317. var count = 0;
  318. SVGInject.create('SVGInject14', {
  319. beforeLoad: function(img) {
  320. return img.getAttribute('data-src');
  321. },
  322. afterInject: function() {
  323. if (++count == 6) {
  324. success();
  325. }
  326. }
  327. });
  328. domReady(function() {
  329. SVGInject14(document.querySelectorAll('#test-14 img'));
  330. });
  331. },
  332. // Test 15
  333. function() {
  334. var count = 0;
  335. SVGInject.create('SVGInject15', {
  336. beforeLoad: function(img) {
  337. return img.getAttribute('srcset');
  338. },
  339. afterInject: function() {
  340. if (++count == 6) {
  341. success();
  342. }
  343. }
  344. });
  345. },
  346. // Test 16
  347. function() {
  348. var count = 0;
  349. SVGInject.create('SVGInject16', {
  350. onFail: function(img, status) {
  351. img.src = 'imgs/test1.png';
  352. if (++count == 2) {
  353. success();
  354. } else if (count >= 2) {
  355. fail();
  356. }
  357. }
  358. });
  359. domReady(function() {
  360. SVGInject16(document.querySelectorAll('#test-16 .inject'));
  361. });
  362. },
  363. // Test 17
  364. function() {
  365. SVGInject.create('SVGInject17', {
  366. onFail: failCallback(),
  367. afterInject: function() {
  368. if (document.querySelectorAll('#test-17 img[onload]').length === 0) {
  369. success();
  370. }
  371. }
  372. });
  373. },
  374. // Test 18
  375. function() {
  376. SVGInject.create('SVGInject18');
  377. var hasPromise = typeof Promise !== 'undefined';
  378. var afterLoadCount = 0;
  379. var afterInjectCount = 0;
  380. var failCount = 0;
  381. var allFinishCount = 0;
  382. var promiseCount = 0;
  383. var hookCompleteCount = 0;
  384. var hookCompleteNum = hasPromise ? 5 : 4;
  385. var hookComplete = function() {
  386. isEqualElseFail(++hookCompleteCount, hookCompleteNum, success);
  387. };
  388. var testGroup = function(groupName) {
  389. var promise = SVGInject18(document.querySelectorAll('#test-18 .' + groupName), {
  390. afterLoad: function() {
  391. isEqualElseFail(++afterLoadCount, 4, hookComplete);
  392. },
  393. afterInject: function() {
  394. isEqualElseFail(++afterInjectCount, 6, hookComplete);
  395. },
  396. onFail: function(img, status) {
  397. img.src = 'imgs/test1.png';
  398. isEqualElseFail(++failCount, 2, hookComplete);
  399. },
  400. onAllFinish: function() {
  401. isEqualElseFail(++allFinishCount, 4, hookComplete);
  402. }
  403. });
  404. if (hasPromise) {
  405. promise.then(function() {
  406. isEqualElseFail(++promiseCount, 4, hookComplete);
  407. });
  408. }
  409. };
  410. var groupCount = 0;
  411. var groupDone = function() {
  412. if (++groupCount == 4) {
  413. success();
  414. }
  415. };
  416. domReady(function() {
  417. testGroup('all');
  418. testGroup('group-1');
  419. testGroup('group-2');
  420. testGroup('group-3');
  421. });
  422. },
  423. // Test 19
  424. function() {
  425. domReady(function() {
  426. var svgInject = SVGInject.create('SVGInject19');
  427. var testContainer = document.querySelector('#test-19 .test');
  428. var insertImgs = function() {
  429. testContainer.insertAdjacentHTML(
  430. 'beforeend',
  431. '<div><img src="imgs/test1.svg" onload="SVGInject19(this)" onerror="SVGInject19.err(this)" class="inject-success"></div>' +
  432. '<div><img src="imgs/test2.svg" onload="SVGInject19(this)" onerror="SVGInject19.err(this)" class="inject-success"></div>' +
  433. '<div><img src="imgs/test3.svg" onload="SVGInject19(this)" onerror="SVGInject19.err(this)" class="inject-success"></div>'
  434. );
  435. };
  436. var injectCount = 0;
  437. var repetitions = 0;
  438. svgInject.setOptions({
  439. onFail: failCallback(),
  440. afterInject: function() {
  441. window.setTimeout(function() {
  442. if (++injectCount == 3) {
  443. injectCount = 0;
  444. if (++repetitions < 5) {
  445. insertImgs();
  446. } else {
  447. success();
  448. }
  449. }
  450. }, 10);
  451. }
  452. });
  453. insertImgs();
  454. });
  455. },
  456. // Test 20
  457. function() {
  458. var count = 0;
  459. SVGInject.create('SVGInject20', {
  460. afterInject: function(src, svg) {
  461. if (src.getAttribute('id') == 'svg20-1') {
  462. // makeIdsUnique: false
  463. if (!svg.getElementById('circle1') || !svg.getElementById('circle2')) {
  464. fail();
  465. return;
  466. }
  467. } else if (src.getAttribute('id') == 'svg20-2') {
  468. // makeIdsUnique: true
  469. if (svg.getElementById('circle1') || svg.getElementById('circle2')) {
  470. fail();
  471. return;
  472. }
  473. }
  474. if (++count == 2) {
  475. success();
  476. }
  477. }
  478. });
  479. },
  480. ]);