tools/run-wasm-gm-tests/run-wasm-gm-tests.html - skia - Git at Google

 <!-- This runs the GMs and unit tests which have been compiled to WASM. When this completes,
 either window._error will be set or window._testsDone will be true and window._results will be an
 array of the test names and what they drew.
 -->
 <!DOCTYPE html>
 <html>
 <head>
   <title>WASM Runner of GMs and Unit Tests</title>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="/static/wasm_gm_tests.js" type="text/javascript" charset="utf-8"></script>
   <style type="text/css" media="screen">
     #status_text {
       min-width: 900px;
       min-height: 500px;
     }
   </style>
 </head>
 <body>
 <main>
   <button id=start_tests>Start Tests</button>
   <br>
   <pre id=status_text></pre>

   <canvas id=gm_canvas></canvas>
 </main>
 <script type="text/javascript" charset="utf-8">
   const loadTestsPromise = InitWasmGMTests({
     locateFile: (file) => '/static/'+file,
   });

   const loadKnownHashesPromise = fetch('/static/hashes.txt').then((resp) => resp.text());

   const resourceNames = [];
   const loadResourceListing = fetch('/static/resource_listing.json').then((resp) => resp.json())
     .then((json) => {
     console.debug('should fetch resources', json);
     const loadingPromises = [];
     for (const resource of json) {
       resourceNames.push(resource);
       const url = `/static/resources/${resource}`;
       loadingPromises.push(fetch(url).then((resp) => resp.arrayBuffer()));
     }
     return Promise.all(loadingPromises).catch((e) => {
       console.error(e);
       window._error = `Failed getting resources: ${JSON.stringify(e)}`;
     });
   });

   let attemptedPOSTs = 0;
   let successfulPOSTs = 0;
   Promise.all([loadTestsPromise, loadKnownHashesPromise, loadResourceListing]).then(([GM, hashes, resourceBuffers]) => {
     LoadResources(GM, resourceNames, resourceBuffers);
     LoadKnownHashes(GM, hashes);
     document.getElementById('start_tests').addEventListener('click', async () => {
       window._testsProgress = 0;
       window._log = 'Starting\n';
       await RunGMs(GM);
       if (attemptedPOSTs !== successfulPOSTs) {
         window._error = `Failed to POST all the PNG files (expected ${attemptedPOSTs}, finished ${successfulPOSTs})`;
       } else {
         window._testsDone = true;
       }
     });
     window._testsReady = true;
   });

   const statusElement = document.getElementById('status_text');
   function log(line) {
     line += '\n';
     statusElement.innerText += line;
     window._log += line;
   }

   function LoadResources(GM, resourceNames, resourceBuffers) {
     for (let i = 0; i < resourceNames.length; i++) {
       const name = resourceNames[i];
       const buffer = resourceBuffers[i];
       if (name.includes('mandril')) {
         console.log(name, new Uint8Array(buffer).slice(0, 20));
       }
       GM.LoadResource(name, buffer);
     }
   }

   // There's a global set of known hashes that we preload with the md5 hashes that are already
   // uploaded to Gold. This saves us some time to encode them and write them to disk.
   function LoadKnownHashes(GM, hashes) {
     log(`Loading ${hashes.length} hashes`);
     console.time('load_hashes');
     for (const hash of hashes.split('\n')) {
       if (hash.length < 5) { // be sure not to add empty lines
         continue;
       }
       GM.LoadKnownDigest(hash);
     }
     console.timeEnd('load_hashes');
     log('hashes loaded');
   }

   async function RunGMs(GM) {
     const canvas = document.getElementById('gm_canvas');
     const ctx = GM.GetWebGLContext(canvas, 2);
     const grcontext = GM.MakeGrContext(ctx);
     window._results = [];

     const names = GM.ListGMs();
     names.sort();
     for (const name of names) {
       window._log += `Starting ${name}\n`;
       const pngAndMetadata = GM.RunGM(grcontext, name);
       if (!pngAndMetadata || !pngAndMetadata.hash) {
         console.debug('No output for ', name);
         continue; // Was skipped
       }
       log(`Test ${name} drew ${pngAndMetadata.hash}`);
       window._results.push({
         name: name,
         digest: pngAndMetadata.hash,
       });
       if (pngAndMetadata.png) {
         await postPNG(pngAndMetadata.hash, pngAndMetadata.png);
       }
       window._testsProgress++;
     }
     grcontext.delete();
   }

   async function postPNG(hash, data) {
     attemptedPOSTs += 1;
     await fetch('/write_png', {
       method: 'POST',
       body: data,
       headers: {
         'Content-type': 'image/png',
         'X-MD5-Hash': hash, // this will be used server side to create the name of the png.
       }
     }).then((resp) => {
       if (resp.ok) {
         successfulPOSTs += 1;
       } else {
         console.error('not ok response', resp);
       }
     }).catch((e) => {
       console.error('Could not post PNG', e);
     });
   }
 </script>
 </body>
 </html>
	<!-- This runs the GMs and unit tests which have been compiled to WASM. When this completes,
	either window._error will be set or window._testsDone will be true and window._results will be an
	array of the test names and what they drew.
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<title>WASM Runner of GMs and Unit Tests</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="/static/wasm_gm_tests.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css" media="screen">
	#status_text {
	min-width: 900px;
	min-height: 500px;
	}
	</style>
	</head>
	<body>
	<main>
	<button id=start_tests>Start Tests</button>
	<br>
	<pre id=status_text></pre>

	<canvas id=gm_canvas></canvas>
	</main>
	<script type="text/javascript" charset="utf-8">
	const loadTestsPromise = InitWasmGMTests({
	locateFile: (file) => '/static/'+file,
	});

	const loadKnownHashesPromise = fetch('/static/hashes.txt').then((resp) => resp.text());

	const resourceNames = [];
	const loadResourceListing = fetch('/static/resource_listing.json').then((resp) => resp.json())
	.then((json) => {
	console.debug('should fetch resources', json);
	const loadingPromises = [];
	for (const resource of json) {
	resourceNames.push(resource);
	const url = `/static/resources/${resource}`;
	loadingPromises.push(fetch(url).then((resp) => resp.arrayBuffer()));
	}
	return Promise.all(loadingPromises).catch((e) => {
	console.error(e);
	window._error = `Failed getting resources: ${JSON.stringify(e)}`;
	});
	});

	let attemptedPOSTs = 0;
	let successfulPOSTs = 0;
	Promise.all([loadTestsPromise, loadKnownHashesPromise, loadResourceListing]).then(([GM, hashes, resourceBuffers]) => {
	LoadResources(GM, resourceNames, resourceBuffers);
	LoadKnownHashes(GM, hashes);
	document.getElementById('start_tests').addEventListener('click', async () => {
	window._testsProgress = 0;
	window._log = 'Starting\n';
	await RunGMs(GM);
	if (attemptedPOSTs !== successfulPOSTs) {
	window._error = `Failed to POST all the PNG files (expected ${attemptedPOSTs}, finished ${successfulPOSTs})`;
	} else {
	window._testsDone = true;
	}
	});
	window._testsReady = true;
	});

	const statusElement = document.getElementById('status_text');
	function log(line) {
	line += '\n';
	statusElement.innerText += line;
	window._log += line;
	}

	function LoadResources(GM, resourceNames, resourceBuffers) {
	for (let i = 0; i < resourceNames.length; i++) {
	const name = resourceNames[i];
	const buffer = resourceBuffers[i];
	if (name.includes('mandril')) {
	console.log(name, new Uint8Array(buffer).slice(0, 20));
	}
	GM.LoadResource(name, buffer);
	}
	}

	// There's a global set of known hashes that we preload with the md5 hashes that are already
	// uploaded to Gold. This saves us some time to encode them and write them to disk.
	function LoadKnownHashes(GM, hashes) {
	log(`Loading ${hashes.length} hashes`);
	console.time('load_hashes');
	for (const hash of hashes.split('\n')) {
	if (hash.length < 5) { // be sure not to add empty lines
	continue;
	}
	GM.LoadKnownDigest(hash);
	}
	console.timeEnd('load_hashes');
	log('hashes loaded');
	}

	async function RunGMs(GM) {
	const canvas = document.getElementById('gm_canvas');
	const ctx = GM.GetWebGLContext(canvas, 2);
	const grcontext = GM.MakeGrContext(ctx);
	window._results = [];

	const names = GM.ListGMs();
	names.sort();
	for (const name of names) {
	window._log += `Starting ${name}\n`;
	const pngAndMetadata = GM.RunGM(grcontext, name);
	if (!pngAndMetadata \|\| !pngAndMetadata.hash) {
	console.debug('No output for ', name);
	continue; // Was skipped
	}
	log(`Test ${name} drew ${pngAndMetadata.hash}`);
	window._results.push({
	name: name,
	digest: pngAndMetadata.hash,
	});
	if (pngAndMetadata.png) {
	await postPNG(pngAndMetadata.hash, pngAndMetadata.png);
	}
	window._testsProgress++;
	}
	grcontext.delete();
	}

	async function postPNG(hash, data) {
	attemptedPOSTs += 1;
	await fetch('/write_png', {
	method: 'POST',
	body: data,
	headers: {
	'Content-type': 'image/png',
	'X-MD5-Hash': hash, // this will be used server side to create the name of the png.
	}
	}).then((resp) => {
	if (resp.ok) {
	successfulPOSTs += 1;
	} else {
	console.error('not ok response', resp);
	}
	}).catch((e) => {
	console.error('Could not post PNG', e);
	});
	}
	</script>
	</body>
	</html>