tests/index.html - external/github.com/immersive-web/webxr-samples - Git at Google

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset='utf-8'>
     <meta http-equiv='X-UA-Compatible' content='chrome=1'>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
     <meta name='mobile-web-app-capable' content='yes'>
     <meta name='apple-mobile-web-app-capable' content='yes'>

     <meta name='twitter:card' content='summary'>
     <meta name='twitter:title' content='WebXR Samples'>
     <meta name='twitter:description' content='Sample WebXR pages for testing and reference'>

     <link rel='icon' type='image/png' sizes='32x32' href='../favicon-32x32.png'>
     <link rel='icon' type='image/png' sizes='96x96' href='../favicon-96x96.png'>

     <link rel='stylesheet' href='../css/stylesheet.css'>
     <link rel='stylesheet' href='../css/pygment_trac.css'>

     <style>
       article {
         position: relative;
         padding: 0.5em;
         background-color: rgba(255, 255, 255, 0.90);
         margin-bottom: 1em;
         border-radius: 3px;
       }

       article h3 {
         font-size: 1.0em;
         margin-top: 0px;
         margin-bottom: 0px;
       }

       article h3::before {
         display: inline-block;
         content: attr(data-index) ' - ';
         font-weight: bold;
         white-space: nowrap;
         margin-right: 0.2em;
       }

       article h4 {
         position: absolute;
         right: 0.5em;
         top: 0.5em;
         margin-top: 0px;
         margin-bottom: 0px;
       }

       article p {
         margin: 0.5em;
       }

       article .links {
         margin-left: 0.5em;
         margin-right: 0.5em;
       }

       article a {
         display: inline-block;
       }

       article a:not(:first-child)::before {
         display: inline-block;
         content: '•';
         font-weight: bold;
         white-space: nowrap;
         margin-left: 0.5em;
         margin-right: 0.5em;
       }

       .github-link {
         font-size: 0.8em;
       }

       .wordmark img {
         width: 70%;
       }
     </style>

     <!--[if lt IE 9]>
     <script src='https://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
     <![endif]-->
     <title>WebXR - Test Pages</title>
   </head>
   <body>

     <div class='container' id='container'>
       <header class='header'>
         <div id='nav'>
             <a href='../'>Samples</a>
             <a href='../layers-samples/'>Layers Samples</a>
             <a href='../proposals/'>Proposals</a>
             <a href='./' class='selected'>Test Pages</a>
             <a href='../report/'>Report</a>
         </div>

         <h1>
           <a href='' class='wordmark'>
             <img src='../media/logo/webxr-logo.svg' alt='WebXR Logo'/>
           </a>
         </h1>
         <h2 class='tagline'>Test Pages</h2>
       </header>

       <main class='main' id='main'>
         <p>These pages are useful for testing various aspects of WebXR
            implementations, but aren't as well commented or straightforward as
            the sample pages.<br/>

         <script>
           let pages = [
             { title: 'Cube Sea', category: 'Cube Sea',
               path: 'cube-sea.html',
               description: 'All hail the cube sea! Not very interesting to look at, but it\'s fantastic for testing!' },

             { title: 'Pointer Painter', category: 'Input',
               path: 'pointer-painter.html',
               description: 'Leaves behind a trail of pointers and cursors on select events.' },

             { title: 'User Agent Prompts', category: 'User Agent Behavior',
               path: 'permission-request.html',
               description: 'Tests various prompts (PWA install, permission requests, notifications) from within XR.' },

             { title: 'Offscreen Canvas', category: 'Alternate WebGL Modes',
               path: 'offscreen-canvas.html',
               description: 'Tests use of an OffscreenCanvas with XR.' },

             { title: 'Sponza', category: 'Lots-o-Polys',
               path: 'sponza.html',
               description: 'Loads a larger scene than other samples for performance testing. (Warning: Can be slow on mobile devices!)' },

             { title: 'Composed Views', category: 'We Like Matrix Math',
               path: 'composed-views.html',
               description: 'Tests a scenario where views are composed from a combination of viewer and local-floor space.' },

             { title: 'Reference Space Invert', category: 'We Hate Matrix Math',
               path: 'ref-space-invert.html',
               description: 'Tests creating an offset reference space with the viewer pose, which should cancel out the pose and report the viewer at the origin.' },

             { title: 'Interrupted AR', category: 'Exceptions!',
               path: 'interrupted-ar.html',
               description: 'Tests what happens when an exception is thrown in promise resolve of an `immersive-ar` session request.' },

             { title: 'Sparse Frames', category: 'M_ss_ng Fr_m_s',
               path: 'sparse-frames.html',
               description: 'Tests what happens the framebuffer is not populated every frame.' },

             { title: 'WebGL 2.0 Multisampling', category: 'Artisinally crafted pixels',
               path: 'webgl2-multisample.html',
               description: 'Tests that multisample renderbuffers are usable with XRWebGLLayer.' },

             { title: 'Exit Button', category: 'Tasty Burritos',
               path: 'exit-button.html',
               description: 'A scene with an in-world exit button.' },
           ];

           let mainElement = document.getElementById("main");

           // Append an element for every item in the pages list.
           for (var i = 0; i < pages.length; ++i) {
             var page = pages[i];

             let article = document.createElement('article');

             let title = document.createElement('h3');
             title.setAttribute('data-index', i + 1);

             let titleLink = document.createElement('a');
             titleLink.href = page.path;
             titleLink.textContent = page.title;
             title.appendChild(titleLink);
             article.appendChild(title);

             let category = document.createElement('h4');
             category.textContent = page.category;
             article.appendChild(category);

             let description = document.createElement('p');
             description.textContent = page.description;
             article.appendChild(description);

             let links = document.createElement('div');
             links.classList.add('links');

             let sourceLink = document.createElement('a');
             sourceLink.href = 'https://github.com/immersive-web/webxr-samples/blob/master/tests/' + page.path;
             sourceLink.textContent = 'Source';
             links.appendChild(sourceLink);

             if (!page.noPolyfill) {
               let polyfillLink = document.createElement('a');
               polyfillLink.href = page.path + '?usePolyfill=0';
               polyfillLink.textContent = 'Run Without Polyfill';
               links.appendChild(polyfillLink);
             }

             article.appendChild(links);

             mainElement.appendChild(article);
           }
         </script>
       </main>

       <br/>

       <h3><a class='github-link' href='https://github.com/immersive-web/webxr-samples'>View source on GitHub</a></h3>

       <footer class='footer'>
       </footer>
     </div>
   </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<meta http-equiv='X-UA-Compatible' content='chrome=1'>
	<meta name='viewport' content='width=device-width, initial-scale=1'>
	<meta name='mobile-web-app-capable' content='yes'>
	<meta name='apple-mobile-web-app-capable' content='yes'>

	<meta name='twitter:card' content='summary'>
	<meta name='twitter:title' content='WebXR Samples'>
	<meta name='twitter:description' content='Sample WebXR pages for testing and reference'>

	<link rel='icon' type='image/png' sizes='32x32' href='../favicon-32x32.png'>
	<link rel='icon' type='image/png' sizes='96x96' href='../favicon-96x96.png'>

	<link rel='stylesheet' href='../css/stylesheet.css'>
	<link rel='stylesheet' href='../css/pygment_trac.css'>

	<style>
	article {
	position: relative;
	padding: 0.5em;
	background-color: rgba(255, 255, 255, 0.90);
	margin-bottom: 1em;
	border-radius: 3px;
	}

	article h3 {
	font-size: 1.0em;
	margin-top: 0px;
	margin-bottom: 0px;
	}

	article h3::before {
	display: inline-block;
	content: attr(data-index) ' - ';
	font-weight: bold;
	white-space: nowrap;
	margin-right: 0.2em;
	}

	article h4 {
	position: absolute;
	right: 0.5em;
	top: 0.5em;
	margin-top: 0px;
	margin-bottom: 0px;
	}

	article p {
	margin: 0.5em;
	}

	article .links {
	margin-left: 0.5em;
	margin-right: 0.5em;
	}

	article a {
	display: inline-block;
	}

	article a:not(:first-child)::before {
	display: inline-block;
	content: '•';
	font-weight: bold;
	white-space: nowrap;
	margin-left: 0.5em;
	margin-right: 0.5em;
	}

	.github-link {
	font-size: 0.8em;
	}

	.wordmark img {
	width: 70%;
	}
	</style>

	<!--[if lt IE 9]>
	<script src='https://html5shiv.googlecode.com/svn/trunk/html5.js'></script>
	<![endif]-->
	<title>WebXR - Test Pages</title>
	</head>
	<body>

	<div class='container' id='container'>
	<header class='header'>
	<div id='nav'>
	<a href='../'>Samples</a>
	<a href='../layers-samples/'>Layers Samples</a>
	<a href='../proposals/'>Proposals</a>
	<a href='./' class='selected'>Test Pages</a>
	<a href='../report/'>Report</a>
	</div>

	<h1>
	<a href='' class='wordmark'>
	<img src='../media/logo/webxr-logo.svg' alt='WebXR Logo'/>
	</a>
	</h1>
	<h2 class='tagline'>Test Pages</h2>
	</header>

	<main class='main' id='main'>
	<p>These pages are useful for testing various aspects of WebXR
	implementations, but aren't as well commented or straightforward as
	the sample pages.<br/>

	<script>
	let pages = [
	{ title: 'Cube Sea', category: 'Cube Sea',
	path: 'cube-sea.html',
	description: 'All hail the cube sea! Not very interesting to look at, but it\'s fantastic for testing!' },

	{ title: 'Pointer Painter', category: 'Input',
	path: 'pointer-painter.html',
	description: 'Leaves behind a trail of pointers and cursors on select events.' },

	{ title: 'User Agent Prompts', category: 'User Agent Behavior',
	path: 'permission-request.html',
	description: 'Tests various prompts (PWA install, permission requests, notifications) from within XR.' },

	{ title: 'Offscreen Canvas', category: 'Alternate WebGL Modes',
	path: 'offscreen-canvas.html',
	description: 'Tests use of an OffscreenCanvas with XR.' },

	{ title: 'Sponza', category: 'Lots-o-Polys',
	path: 'sponza.html',
	description: 'Loads a larger scene than other samples for performance testing. (Warning: Can be slow on mobile devices!)' },

	{ title: 'Composed Views', category: 'We Like Matrix Math',
	path: 'composed-views.html',
	description: 'Tests a scenario where views are composed from a combination of viewer and local-floor space.' },

	{ title: 'Reference Space Invert', category: 'We Hate Matrix Math',
	path: 'ref-space-invert.html',
	description: 'Tests creating an offset reference space with the viewer pose, which should cancel out the pose and report the viewer at the origin.' },

	{ title: 'Interrupted AR', category: 'Exceptions!',
	path: 'interrupted-ar.html',
	description: 'Tests what happens when an exception is thrown in promise resolve of an `immersive-ar` session request.' },

	{ title: 'Sparse Frames', category: 'M_ss_ng Fr_m_s',
	path: 'sparse-frames.html',
	description: 'Tests what happens the framebuffer is not populated every frame.' },

	{ title: 'WebGL 2.0 Multisampling', category: 'Artisinally crafted pixels',
	path: 'webgl2-multisample.html',
	description: 'Tests that multisample renderbuffers are usable with XRWebGLLayer.' },

	{ title: 'Exit Button', category: 'Tasty Burritos',
	path: 'exit-button.html',
	description: 'A scene with an in-world exit button.' },
	];

	let mainElement = document.getElementById("main");

	// Append an element for every item in the pages list.
	for (var i = 0; i < pages.length; ++i) {
	var page = pages[i];

	let article = document.createElement('article');

	let title = document.createElement('h3');
	title.setAttribute('data-index', i + 1);

	let titleLink = document.createElement('a');
	titleLink.href = page.path;
	titleLink.textContent = page.title;
	title.appendChild(titleLink);
	article.appendChild(title);

	let category = document.createElement('h4');
	category.textContent = page.category;
	article.appendChild(category);

	let description = document.createElement('p');
	description.textContent = page.description;
	article.appendChild(description);

	let links = document.createElement('div');
	links.classList.add('links');

	let sourceLink = document.createElement('a');
	sourceLink.href = 'https://github.com/immersive-web/webxr-samples/blob/master/tests/' + page.path;
	sourceLink.textContent = 'Source';
	links.appendChild(sourceLink);

	if (!page.noPolyfill) {
	let polyfillLink = document.createElement('a');
	polyfillLink.href = page.path + '?usePolyfill=0';
	polyfillLink.textContent = 'Run Without Polyfill';
	links.appendChild(polyfillLink);
	}

	article.appendChild(links);

	mainElement.appendChild(article);
	}
	</script>
	</main>

	<br/>

	<h3><a class='github-link' href='https://github.com/immersive-web/webxr-samples'>View source on GitHub</a></h3>

	<footer class='footer'>
	</footer>
	</div>
	</body>
	</html>