1+ window . addEventListener ( 'load' , runTests )
12
2- function log ( ) {
3- if ( window . console ) console . log . apply ( this , arguments ) ;
4- }
5-
6- window . onload = function ( ) {
7- runTests ( ) ;
8- get ( 'run' ) . addEventListener ( 'click' , runTests , false ) ;
9- } ;
3+ function create ( type , attrs , children ) {
4+ const element = Object . assign ( document . createElement ( type ) , attrs )
105
11- document . addEventListener ( 'keypress' , function ( event ) {
12- if ( 114 == event . charCode ) runTests ( ) ;
13- } , false ) ;
14-
15- function get ( id ) {
16- return document . getElementById ( id ) ;
17- }
6+ if ( children ) {
7+ children . forEach ( function ( child ) { element . appendChild ( child ) } )
8+ }
189
19- function create ( type , str ) {
20- var el = document . createElement ( type ) ;
21- if ( str ) el . appendChild ( text ( str ) ) ;
22- return el ;
10+ return element
2311}
2412
25- function text ( str ) {
26- return document . createTextNode ( str ) ;
13+ function pdfLink ( name ) {
14+ return create ( 'a' , {
15+ href : '/pdf?name=' + encodeURIComponent ( name ) ,
16+ target : '_blank' ,
17+ textContent : 'PDF'
18+ } )
2719}
2820
29- function pdfForm ( fn , canvas ) {
30- var form = create ( 'form' )
31- , input = create ( 'input' )
32- , submit = create ( 'input' ) ;
33-
34- form . setAttribute ( 'action' , '/pdf' ) ;
35- form . setAttribute ( 'method' , 'post' ) ;
36- form . setAttribute ( 'target' , '_blank' ) ;
37-
38- input . setAttribute ( 'type' , 'hidden' ) ;
39- input . setAttribute ( 'name' , 'json' ) ;
40- input . setAttribute ( 'value' , JSON . stringify ( {
41- fn : fn . toString ( )
42- , width : canvas . width
43- , height : canvas . height
44- } ) ) ;
21+ function localRendering ( name ) {
22+ var canvas = create ( 'canvas' , { width : 200 , height : 200 , title : name } )
4523
46- submit . setAttribute ( 'type' , 'submit' ) ;
47- submit . setAttribute ( 'value' , 'PDF' ) ;
24+ window . tests [ name ] ( canvas . getContext ( '2d' ) , function ( ) { } )
4825
49- form . appendChild ( input ) ;
50- form . appendChild ( submit ) ;
51-
52- return form ;
26+ return canvas
5327}
5428
55- function clearTests ( ) {
56- var table = get ( 'tests' ) ;
57- table . removeChild ( table . children [ 1 ] ) ;
29+ function clearTests ( ) {
30+ var table = document . getElementById ( 'tests' )
31+ if ( table ) document . body . removeChild ( table )
5832}
5933
60- function runTests ( ) {
61- clearTests ( ) ;
62- var table = get ( 'tests' )
63- , tbody = create ( 'tbody' ) ;
64- for ( var name in tests ) {
65- var fn = tests [ name ]
66- , canvas = create ( 'canvas' )
67- , tr = create ( 'tr' )
68- , tds = [ create ( 'td' ) , create ( 'td' ) , create ( 'td' ) , create ( 'td' ) ] ;
69-
70- canvas . width = 200 ;
71- canvas . height = 200 ;
72- canvas . title = name ;
34+ function runTests ( ) {
35+ clearTests ( )
7336
74- tds [ 2 ] . appendChild ( canvas ) ;
75- tds [ 3 ] . appendChild ( create ( 'h3' , name ) ) ;
76- tds [ 3 ] . appendChild ( pdfForm ( fn , canvas ) ) ;
37+ var testNames = Object . keys ( window . tests )
7738
78- tr . appendChild ( tds [ 0 ] ) ;
79- tr . appendChild ( tds [ 1 ] ) ;
80- tr . appendChild ( tds [ 2 ] ) ;
81- tr . appendChild ( tds [ 3 ] ) ;
39+ var table = create ( 'table' , { id : 'tests' } , [
40+ create ( 'thead' , { } , [
41+ create ( 'th' , { textContent : 'node-canvas' } ) ,
42+ create ( 'th' , { textContent : 'browser canvas' } ) ,
43+ create ( 'th' , { textContent : '' } )
44+ ] ) ,
45+ create ( 'tbody' , { } , testNames . map ( function ( name ) {
46+ return create ( 'tr' , { } , [
47+ create ( 'td' , { } , [ create ( 'img' , { src : '/render?name=' + encodeURIComponent ( name ) } ) ] ) ,
48+ create ( 'td' , { } , [ localRendering ( name ) ] ) ,
49+ create ( 'td' , { } , [ create ( 'h3' , { textContent : name } ) , pdfLink ( name ) ] )
50+ ] )
51+ } ) )
52+ ] )
8253
83- tbody . appendChild ( tr ) ;
84- table . appendChild ( tbody ) ;
85- runTest ( name , canvas , tds [ 0 ] , tds [ 1 ] , tds [ 3 ] ) ;
86- }
54+ document . body . appendChild ( table )
8755}
88-
89- function runTest ( name , canvas , dest , jpegDest , stats ) {
90- var fn = tests [ name ]
91- , start = new Date ;
92- try {
93- fn ( canvas . getContext ( '2d' ) , function ( ) { } ) ;
94- } catch ( err ) {
95- log ( err ) ;
96- }
97- var duration = new Date - start ;
98- stats . appendChild ( create ( 'p' , 'browser: ' + duration + 'ms' ) ) ;
99- stats . appendChild ( create ( 'p' , 'fps: ' + ( 1000 / duration ) . toFixed ( 0 ) ) ) ;
100- renderOnServer ( '/render' , name , canvas , function ( res ) {
101- if ( res . error ) {
102- var p = create ( 'p' ) ;
103- p . innerText = res . error ;
104- dest . appendChild ( p ) ;
105- } else if ( res . data ) {
106- var img = create ( 'img' ) ;
107- img . src = res . data ;
108- stats . appendChild ( create ( 'p' , 'node: ' + res . duration + 'ms' ) ) ;
109- stats . appendChild ( create ( 'p' , 'fps: ' + ( 1000 / res . duration ) . toFixed ( 0 ) ) ) ;
110- dest . appendChild ( img ) ;
111- }
112- } ) ;
113- renderOnServer ( '/jpeg' , name , canvas , function ( res ) {
114- if ( res . error ) {
115- var p = create ( 'p' ) ;
116- p . innerText = res . error ;
117- jpegDest . appendChild ( p ) ;
118- } else if ( res . data ) {
119- var img = create ( 'img' ) ;
120- img . src = res . data ;
121- jpegDest . appendChild ( img ) ;
122- }
123- } ) ;
124- }
125-
126- function renderOnServer ( url , name , canvas , fn ) {
127- var req = new XMLHttpRequest
128- , json = JSON . stringify ( {
129- fn : tests [ name ] . toString ( )
130- , width : canvas . width
131- , height : canvas . height
132- } ) ;
133- req . open ( 'POST' , url ) ;
134- req . setRequestHeader ( 'Content-Type' , 'application/json' ) ;
135- req . onreadystatechange = function ( ) {
136- if ( 4 == req . readyState ) {
137- try {
138- fn ( JSON . parse ( req . responseText ) ) ;
139- } catch ( err ) {
140- fn ( { error : err } ) ;
141- }
142- }
143- } ;
144- req . send ( json ) ;
145- }
0 commit comments