HTML formatting tidy for Tests & Demos (#114)

* Create bug_report.md * Create feature_request.md * Format according to Google Style Guide and EditorConfig - change indent to 2 spaces (to match Editorconfig preference) - remove unneeded trailing slashes on relevant tags - removed unneeded type="text/css" from linked stylesheets REF: https://google.github.io/styleguide/htmlcssguide.html
GoogleChromeLabs · Aug 6, 2019 · f4aef2e · f4aef2e
1 parent 002645b
commit f4aef2e
Show file tree

Hide file tree

Showing 16 changed files with 314 additions and 265 deletions.
diff --git a/demos/basic.html b/demos/basic.html
@@ -1,39 +1,41 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Basic demo</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" media="screen" href="../test/main.css" />
-    <script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Basic demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" media="screen" href="../test/main.css" />
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
 </head>
+
 <body>
-    <div class="screen">
-      <h1>Basic demo</h1>
-      <a href="../test/1.html">Link 1</a>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-      <a href="../test/2.html">Link 2</a>
-    </div>
-    <div class="screen">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, quos?
-      <a href="../test/3.html">Link 3</a>
-        <section id="stuff">
-          <a href="../test/main.css">CSS</a>
-        </section>
-    </div>
-    <div class="screen">
-      <a href="../test/4.html">Link 4</a>
-    </div>
-    <script src="../dist/quicklink.umd.js"></script>
-    <script>
-        quicklink();
-    </script>
+  <div class="screen">
+    <h1>Basic demo</h1>
+    <a href="../test/1.html">Link 1</a>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    <a href="../test/2.html">Link 2</a>
+  </div>
+  <div class="screen">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, quos?
+    <a href="../test/3.html">Link 3</a>
+    <section id="stuff">
+      <a href="../test/main.css">CSS</a>
+    </section>
+  </div>
+  <div class="screen">
+    <a href="../test/4.html">Link 4</a>
+  </div>
+  <script src="../dist/quicklink.umd.js"></script>
+  <script>
+    quicklink();
+  </script>
 </body>
-</html>
 
+</html>
diff --git a/demos/network-idle.html b/demos/network-idle.html
@@ -2,39 +2,40 @@
 <html>
 
 <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>network-idle-callback demo</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" media="screen" href="../test/main.css" />
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
-    <script>
-        if ('serviceWorker' in navigator) {
-            window.addEventListener('load', function () {
-                navigator.serviceWorker.register('./sw.js').then(function (registration) {
-                    console.log('ServiceWorker registration successful with scope: ', registration.scope);
-                }, function (err) {
-                    console.log('ServiceWorker registration failed: ', err);
-                });
-            });
-        }
-    </script>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>network-idle-callback demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" media="screen" href="../test/main.css">
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function () {
+        navigator.serviceWorker.register('./sw.js').then(function (registration) {
+          console.log('ServiceWorker registration successful with scope: ', registration.scope);
+        }, function (err) {
+          console.log('ServiceWorker registration failed: ', err);
+        });
+      });
+    }
+  </script>
 </head>
 
 <body>
-    <p>This demo uses <a href="https://github.com/pastelsky/network-idle-callback">network-idle-callback</a> to only prefetch when network activity goes idle in the current tab.</p>
-    <a href="../test/1.html">Link 1</a>
-    <a href="../test/2.html">Link 2</a>
-    <a href="../test/3.html">Link 3</a>
-    <section id="stuff">
-        <a href="../test/main.css">CSS</a>
-    </section>
-    <a href="../test/4.html" style="position:absolute;margin-top:900px;">Link 4</a>
-    <script src="network-idle.js"></script>
-    <script type="module">
-        import quicklink from "../dist/quicklink.mjs";
-        quicklink({timeoutFn: networkIdleCallback});
-    </script>
+  <p>This demo uses <a href="https://github.com/pastelsky/network-idle-callback">network-idle-callback</a> to only
+    prefetch when network activity goes idle in the current tab.</p>
+  <a href="../test/1.html">Link 1</a>
+  <a href="../test/2.html">Link 2</a>
+  <a href="../test/3.html">Link 3</a>
+  <section id="stuff">
+    <a href="../test/main.css">CSS</a>
+  </section>
+  <a href="../test/4.html" style="position:absolute;margin-top:900px;">Link 4</a>
+  <script src="network-idle.js"></script>
+  <script type="module">
+    import quicklink from "../dist/quicklink.mjs";
+    quicklink({ timeoutFn: networkIdleCallback });
+  </script>
 </body>
 
-</html>
+</html>
diff --git a/test/1.html b/test/1.html
@@ -1,14 +1,18 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Prefetch experiments</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Prefetch experiments</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" media="screen" href="main.css">
 </head>
+
 <body>
-    <h1>Page 1</h1>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!</p>
+  <h1>Page 1</h1>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam
+    totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!</p>
 </body>
+
 </html>
diff --git a/test/2.html b/test/2.html
@@ -1,14 +1,18 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Prefetch experiments</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Prefetch experiments</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" media="screen" href="main.css">
 </head>
+
 <body>
-    <h1>Page 2</h1>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!</p>
+  <h1>Page 2</h1>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam
+    totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!</p>
 </body>
+
 </html>
diff --git a/test/3.html b/test/3.html
@@ -1,14 +1,18 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Prefetch experiments</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Prefetch experiments</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" media="screen" href="main.css">
 </head>
+
 <body>
-    <h1>Page 3</h1>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!</p>
+  <h1>Page 3</h1>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam
+    totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!</p>
 </body>
+
 </html>
diff --git a/test/4.html b/test/4.html
@@ -1,14 +1,18 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Prefetch experiments</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Prefetch experiments</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" media="screen" href="main.css">
 </head>
+
 <body>
-    <h1>Page 4</h1>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!</p>
+  <h1>Page 4</h1>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta est sint assumenda corrupti minima aut, magnam
+    totam beatae ullam ea iste voluptatum iusto expedita animi rem vitae rerum atque nemo!</p>
 </body>
+
 </html>
diff --git a/test/index.html b/test/index.html
@@ -1,27 +1,29 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Prefetch experiments</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
-    <script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Prefetch experiments</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" media="screen" href="main.css">
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
 </head>
+
 <body>
-    <a href="1.html">Link 1</a>
-    <a href="2.html">Link 2</a>
-    <a href="3.html">Link 3</a>
-    <section id="stuff">
-        <a href="main.css">CSS</a>
-    </section>
-    <a href="4.html" style="position:absolute;margin-top:900px;">Link 4</a>
-    <script src="../dist/quicklink.umd.js"></script>
-    <script>
-        quicklink();
+  <a href="1.html">Link 1</a>
+  <a href="2.html">Link 2</a>
+  <a href="3.html">Link 3</a>
+  <section id="stuff">
+    <a href="main.css">CSS</a>
+  </section>
+  <a href="4.html" style="position:absolute;margin-top:900px;">Link 4</a>
+  <script src="../dist/quicklink.umd.js"></script>
+  <script>
+    quicklink();
         // quicklink({ priority: 'high' });
-    </script>
-    <script type="module">
+  </script>
+  <script type="module">
     // import quicklink from "../dist/quicklink.mjs";
     // quicklink();
     // quicklink({
@@ -31,6 +33,7 @@
     // quicklink({
     //     el: elem
     // });
-    </script>
+  </script>
 </body>
+
 </html>
diff --git a/test/test-allow-origin-all.html b/test/test-allow-origin-all.html
@@ -1,13 +1,15 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Prefetch: Allow All Origins</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
-    <script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
+    <link rel="stylesheet" media="screen" href="main.css">
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
 </head>
+
 <body>
     <a href="https://example.com/1.html">Link 1</a>
     <a href="2.html">Link 2</a>
@@ -24,4 +26,5 @@
         });
     </script>
 </body>
-</html>
+
+</html>
diff --git a/test/test-allow-origin.html b/test/test-allow-origin.html
@@ -1,26 +1,29 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Prefetch: Allowed Origins</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
-    <script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Prefetch: Allowed Origins</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" media="screen" href="main.css">
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
 </head>
+
 <body>
-    <a href="https://example.com/1.html">Link 1</a>
-    <a href="2.html">Link 2</a>
-    <a href="https://github.githubassets.com/images/spinners/octocat-spinner-32.gif">Spinner</a>
-    <section id="stuff">
-        <a href="main.css">CSS</a>
-    </section>
-    <a href="4.html" style="position:absolute;margin-top:900px;">Link 4</a>
-    <script src="../dist/quicklink.umd.js"></script>
-    <script>
-        quicklink({
-            origins: ['github.githubassets.com', 'example.com']
-        });
-    </script>
+  <a href="https://example.com/1.html">Link 1</a>
+  <a href="2.html">Link 2</a>
+  <a href="https://github.githubassets.com/images/spinners/octocat-spinner-32.gif">Spinner</a>
+  <section id="stuff">
+    <a href="main.css">CSS</a>
+  </section>
+  <a href="4.html" style="position:absolute;margin-top:900px;">Link 4</a>
+  <script src="../dist/quicklink.umd.js"></script>
+  <script>
+    quicklink({
+      origins: ['github.githubassets.com', 'example.com']
+    });
+  </script>
 </body>
-</html>
+
+</html>