fix fail message

greggman · May 12, 2024 · c626039 · c626039
1 parent cdafa33
commit c626039
Show file tree

Hide file tree

Showing 19 changed files with 60 additions and 40 deletions.
diff --git a/examples/2d-array.html b/examples/2d-array.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - 2d-array texture</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="2d-array.js"></script>
   </body>
 </html>
diff --git a/examples/2d-array.js b/examples/2d-array.js
@@ -257,10 +257,10 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
diff --git a/examples/background.html b/examples/background.html
@@ -7,6 +7,7 @@
   </head>
   <body>
     <canvas></canvas>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="background.js"></script>
   </body>
 </html>
diff --git a/examples/background.js b/examples/background.js
@@ -404,10 +404,10 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
diff --git a/examples/bind-group-layouts.html b/examples/bind-group-layouts.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - 2d-array texture</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="bind-group-layouts.js"></script>
   </body>
 </html>
diff --git a/examples/bind-group-layouts.js b/examples/bind-group-layouts.js
@@ -241,10 +241,10 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
diff --git a/examples/cube-map.html b/examples/cube-map.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - cube-map</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="cube-map.js"></script>
   </body>
 </html>
diff --git a/examples/cube-map.js b/examples/cube-map.js
@@ -190,10 +190,10 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
diff --git a/examples/cube.html b/examples/cube.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - cube</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="cube.js"></script>
   </body>
 </html>
diff --git a/examples/cube.js b/examples/cube.js
@@ -225,10 +225,10 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
diff --git a/examples/examples.css b/examples/examples.css
@@ -20,4 +20,16 @@ canvas {
   width: 100%;
   top: 1em;
   left: 0;
+}
+
+#fail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: red;
 }
diff --git a/examples/instancing-size-only.html b/examples/instancing-size-only.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - instancing (size only)</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="instancing-size-only.js"></script>
   </body>
 </html>
diff --git a/examples/instancing-size-only.js b/examples/instancing-size-only.js
@@ -253,10 +253,10 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
diff --git a/examples/instancing.html b/examples/instancing.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - instancing</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="instancing.js"></script>
   </body>
 </html>
diff --git a/examples/instancing.js b/examples/instancing.js
@@ -251,10 +251,9 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
 main();
diff --git a/examples/primitives.html b/examples/primitives.html
@@ -8,6 +8,7 @@
   <body>
     <canvas></canvas>
     <div id="b"><a href="https://github.com/greggman/webgpu-utils.org">webgpu-utils</a> - primitives</div>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script type="module" src="primitives.js"></script>
   </body>
 </html>
diff --git a/examples/primitives.js b/examples/primitives.js
@@ -271,10 +271,9 @@ async function main() {
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
 main();
diff --git a/test/tests/umd-min-test.html b/test/tests/umd-min-test.html
@@ -5,6 +5,7 @@
   </head>
   <body>
     <canvas></canvas>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script src="https://wgpu-matrix.org/dist/1.x/wgpu-matrix.js"></script>
     <script src="../../dist/1.x/webgpu-utils.min.js"></script>
     <script>
@@ -291,12 +292,12 @@
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
 
     </script>

diff --git a/test/tests/umd-test.html b/test/tests/umd-test.html
@@ -5,6 +5,7 @@
   </head>
   <body>
     <canvas></canvas>
+    <div id="fail" style="display: none;"><div id="fail-msg"></div></div>
     <script src="https://wgpu-matrix.org/dist/1.x/wgpu-matrix.js"></script>
     <script src="../../dist/1.x/webgpu-utils.js"></script>
     <script>
@@ -291,12 +292,12 @@
 }
 
 function fail(msg) {
-  const elem = document.createElement('p');
-  elem.textContent = msg;
-  elem.style.color = 'red';
-  document.body.appendChild(elem);
+  const elem = document.querySelector('#fail');
+  elem.style.display = '';
+  elem.children[0].textContent = msg;
 }
 
+
 main();
 
     </script>