summaryrefslogtreecommitdiff
path: root/test/js
diff options
context:
space:
mode:
Diffstat (limited to 'test/js')
-rw-r--r--test/js/class-list.html29
-rw-r--r--test/js/event-onclick-insert.html18
-rw-r--r--test/js/index.html3
-rw-r--r--test/js/inserted-script-async.js1
-rw-r--r--test/js/inserted-script-defer.js1
-rw-r--r--test/js/inserted-script.html39
-rw-r--r--test/js/inserted-script.js1
-rw-r--r--test/js/life.html175
-rw-r--r--test/js/mandelbrot.html31
-rw-r--r--test/js/settimeout.html17
-rw-r--r--test/js/sleepy-async.html13
11 files changed, 328 insertions, 0 deletions
diff --git a/test/js/class-list.html b/test/js/class-list.html
new file mode 100644
index 000000000..4c73283e5
--- /dev/null
+++ b/test/js/class-list.html
@@ -0,0 +1,29 @@
+<html>
+ <head>
+ <title>Class List (and other token lists?)</title>
+ <style>
+ .bad { background-color: red; }
+ .ok { background-color: green; }
+ </style>
+ </head>
+ <body>
+ <h1>This is a set of demonstrators for the token list Element.classList</h1>
+ <h2>This first is taken from the MDN for DOMTokenList</h2>
+ <span id="demo1" class=" d d e f bad"></span>
+ <script>
+ var span = document.getElementById("demo1");
+ var classes = span.classList;
+ classes.add("x", "d", "g");
+ classes.remove("e", "g");
+ classes.toggle("d"); // Toggles d off
+ classes.toggle("q", false); // Forces q off (won't be present)
+ classes.toggle("d"); // Toggles d on
+ classes.toggle("d", true); // Forces d on (won't toggle it off again)
+ if (classes.contains("d")) {
+ classes.add("ok")
+ classes.remove("bad")
+ span.textContent = "span classList is \"" + classes + '"';
+ }
+ </script>
+ </body>
+</html>
diff --git a/test/js/event-onclick-insert.html b/test/js/event-onclick-insert.html
new file mode 100644
index 000000000..62b9d7ee8
--- /dev/null
+++ b/test/js/event-onclick-insert.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<button onclick="add_paragraph()">Click me!</button>
+
+<script>
+function add_paragraph() {
+ var paragraph = document.createElement("P");
+ var textnode = document.createTextNode("New paragraph!");
+ paragraph.appendChild(textnode);
+ document.body.appendChild(paragraph);
+}
+</script>
+
+</body>
+</html>
+
diff --git a/test/js/index.html b/test/js/index.html
index 2abe954e5..6d2c6541e 100644
--- a/test/js/index.html
+++ b/test/js/index.html
@@ -104,6 +104,9 @@
<li><a href="assorted-log-doc-write.html">console.log and document.write</a></li>
<li><a href="wikipedia-lcm.html">Example from wikipedia</a></li>
<li><a href="verify-instanceofness.html">Check instanceof behaviour</a></li>
+<li><a href="class-list.html">Class list (and other token lists?)</a></li>
+<li><a href="mandelbrot.html">Canvas/ImageData Mandelbrot ploter</a></li>
+<li><a href="life.html">Game of Life</a></li>
</ul>
</body>
diff --git a/test/js/inserted-script-async.js b/test/js/inserted-script-async.js
new file mode 100644
index 000000000..aa6c0a351
--- /dev/null
+++ b/test/js/inserted-script-async.js
@@ -0,0 +1 @@
+console.log("External %s dynamism!", "asynchronous");
diff --git a/test/js/inserted-script-defer.js b/test/js/inserted-script-defer.js
new file mode 100644
index 000000000..2d89edd34
--- /dev/null
+++ b/test/js/inserted-script-defer.js
@@ -0,0 +1 @@
+console.log("External deferred dynamism!");
diff --git a/test/js/inserted-script.html b/test/js/inserted-script.html
new file mode 100644
index 000000000..b1c381aaa
--- /dev/null
+++ b/test/js/inserted-script.html
@@ -0,0 +1,39 @@
+<html>
+ <head>
+ <title>Inserted script test</title>
+ <script>
+ /* After one second, insert an inline script element */
+ setTimeout(function() {
+ var div = document.createElement("DIV");
+ var script = document.createElement("SCRIPT");
+ var textnode = document.createTextNode("console.log(\"Dynamism\");");
+ script.appendChild(textnode);
+ div.appendChild(script);
+ document.body.appendChild(div);
+ }, 1000);
+ /* After two seconds, insert a script element for immediate fetch */
+ setTimeout(function() {
+ var script = document.createElement("SCRIPT");
+ script.setAttribute("src", "inserted-script.js");
+ document.body.appendChild(script);
+ }, 2000);
+ /* After three seconds, insert a script element for async fetch */
+ setTimeout(function() {
+ var script = document.createElement("SCRIPT");
+ script.setAttribute("src", "inserted-script-async.js");
+ script.setAttribute("async", "");
+ document.body.appendChild(script);
+ }, 3000);
+ /* After four seconds, insert a script element for deferred fetch */
+ setTimeout(function() {
+ var script = document.createElement("SCRIPT");
+ script.setAttribute("src", "inserted-script-defer.js");
+ script.setAttribute("defer", "");
+ document.body.appendChild(script);
+ }, 4000);
+ </script>
+ </head>
+ <body>
+ Check the log
+ </body>
+</html>
diff --git a/test/js/inserted-script.js b/test/js/inserted-script.js
new file mode 100644
index 000000000..f3a954827
--- /dev/null
+++ b/test/js/inserted-script.js
@@ -0,0 +1 @@
+console.log("External dynamism!");
diff --git a/test/js/life.html b/test/js/life.html
new file mode 100644
index 000000000..de54d0aae
--- /dev/null
+++ b/test/js/life.html
@@ -0,0 +1,175 @@
+<html>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Conway's Game of Life</title>
+ <link rel="stylesheet" type="text/css" href="resource:internal.css" />
+ <style>
+ canvas#surface {
+ width: 50vmin;
+ height: 50vmin;
+ border: 2px solid black;
+ }
+ </style>
+ </head>
+ <body class="ns-even-bg ns-even-fg ns-border">
+ <h1 class="ns-border">Conway's Game of Life</h1>
+ <div style="margin: 1em;">
+ <div>
+ Run: <input id="running" type="checkbox" checked/><br />
+ Set Size: <input id="width" type="text" size="4" value="50" /> x
+ <input id="height" type="text" size="4" value="50" />
+ <button id="commitsize">Commit</button><br />
+ </div>
+ <div>
+ <canvas id="surface" width="50" height="50">
+ Sorry, you can't play Game of Life if JavaScript is turned off
+ </canvas>
+ </div>
+ <div>
+ <button id="random">Randomise</button>
+ </div>
+ </div>
+ </body>
+ <script>
+ (function () {
+ const running = document.getElementById("running");
+ const iwidth = document.getElementById("width");
+ const iheight = document.getElementById("height");
+ const surface = document.getElementById("surface");
+ const context = surface.getContext("2d");
+ var width = surface.width - 10;
+ var height = surface.height - 10;
+ var frame = context.createImageData(width, height);
+ var drawto = context.createImageData(width, height);
+ var greyto = context.createImageData(width, height);
+ const greylevel = 31;
+
+ function getOffset(x, y) {
+ if (x < 0) {
+ x = width + x;
+ }
+ if (y < 0) {
+ y = height + y;
+ }
+ if (x >= width) {
+ x = x - width;
+ }
+ if (y >= height) {
+ y = y - height;
+ }
+ return (y * width + x) * 4;
+ }
+ function getCell(x, y) {
+ const offset = getOffset(x, y);
+ return frame.data[offset + 3] != 0;
+ }
+ function setCell(x, y) {
+ const offset = getOffset(x, y);
+ drawto.data[offset + 3] = 255;
+ greyto.data[offset + 3] = greylevel;
+ }
+ function clearCell(x, y) {
+ const offset = getOffset(x, y);
+ drawto.data[offset + 3] = 0;
+ greyto.data[offset + 3] = 0;
+ }
+ function countNeighbours(x, y) {
+ return (
+ getCell(x - 1, y - 1) +
+ getCell(x, y - 1) +
+ getCell(x + 1, y - 1) +
+ getCell(x - 1, y) +
+ getCell(x + 1, y) +
+ getCell(x - 1, y + 1) +
+ getCell(x, y + 1) +
+ getCell(x + 1, y + 1)
+ );
+ }
+ function flip() {
+ var temp = frame;
+ context.putImageData(drawto, 5, 5);
+ context.putImageData(greyto, 5 - width, 5 - height); /* top left */
+ context.putImageData(greyto, 5 - width, 5); /* left */
+ context.putImageData(greyto, 5, 5 - height); /* top */
+ context.putImageData(greyto, 5 + width, 5 + height); /* bottom right */
+ context.putImageData(greyto, 5 + width, 5); /* right */
+ context.putImageData(greyto, 5, 5 + height); /* bottom */
+ context.putImageData(greyto, 5 + width, 5 - height); /* top right */
+ context.putImageData(greyto, 5 - width, 5 + height); /* bottom left */
+ frame = drawto;
+ drawto = temp;
+ }
+ /* Game of life is run on a timer */
+ setInterval(function () {
+ if (!running.checked) {
+ return;
+ }
+ console.log("Frame");
+ /* To do a frame of GoL we compute by consuming frame and writing to drawto */
+ for (var y = 0; y < height; y++) {
+ for (var x = 0; x < width; x++) {
+ const neighbours = countNeighbours(x, y);
+ if (getCell(x, y)) {
+ if (neighbours == 2 || neighbours == 3) {
+ setCell(x, y); // live, 2/3 neigh => stay alive
+ } else {
+ clearCell(x, y); // live, <2/>3 neigh => dies
+ }
+ } else {
+ if (neighbours == 3) {
+ setCell(x, y); // dead, 3 neigh => born
+ } else {
+ clearCell(x, y); // dead, !3 neigh => stay dead
+ }
+ }
+ }
+ }
+ flip();
+ }, 100);
+ const randomise = function () {
+ var ofs = 3;
+ for (var y = 0; y < height; y++) {
+ for (var x = 0; x < width; x++) {
+ if (Math.random() < 0.5) {
+ drawto.data[ofs] = 0;
+ } else {
+ drawto.data[ofs] = 255;
+ greyto.data[ofs] = greylevel;
+ }
+ ofs += 4;
+ }
+ }
+ flip();
+ };
+ document.getElementById("random").addEventListener("click", randomise);
+ document
+ .getElementById("commitsize")
+ .addEventListener("click", function () {
+ const iwval = parseInt(iwidth.value, 10);
+ const ihval = parseInt(iheight.value, 10);
+ console.log(width, height, "->", iwval, ihval);
+ if (
+ (iwval != width || ihval != height) &&
+ iwval >= 10 &&
+ iwval <= 200 &&
+ ihval >= 10 &&
+ ihval <= 200
+ ) {
+ console.log("yes");
+ surface.height = ihval + 10;
+ context.height = ihval + 10;
+ height = ihval;
+ surface.width = iwval + 10;
+ context.width = iwval + 10;
+ width = iwval;
+ frame = context.createImageData(width, height);
+ drawto = context.createImageData(width, height);
+ greyto = context.createImageData(width, height);
+ resetGrey();
+ randomise();
+ }
+ });
+ randomise();
+ })();
+ </script>
+</html>
diff --git a/test/js/mandelbrot.html b/test/js/mandelbrot.html
new file mode 100644
index 000000000..38f77eff5
--- /dev/null
+++ b/test/js/mandelbrot.html
@@ -0,0 +1,31 @@
+<html>
+ <head>
+ <title>JS Mandelbrot</title>
+ <script src="https://nerget.com/mandelbrot.js"></script>
+ <script>
+ var drawn = false;
+ var dimension = 2;
+ var cx = -dimension / 2 + 0.5;
+ var cy = -dimension / 2;
+
+ function log(msg) {
+ document.getElementById("log").innerHTML += msg + "<br/>";
+ }
+
+ function draw() {
+ var forceSlowPath = document.getElementById('forceSlowPath').checked;
+ drawMandelbrot(document.getElementById('canvas').getContext('2d'), 200, 200,
+ cx + dimension / 2, cy + dimension / 2, dimension, 500, forceSlowPath);
+ drawn = true;
+ }
+
+ </script>
+ </head>
+ <body>
+ <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas>
+ <br />
+ <input id="forceSlowPath" type="checkbox">Use slow path.</input> <br />
+ <a href="javascript:draw()">Start</a>
+ <div id="log"></div>
+ </body>
+</html>
diff --git a/test/js/settimeout.html b/test/js/settimeout.html
new file mode 100644
index 000000000..1755973c6
--- /dev/null
+++ b/test/js/settimeout.html
@@ -0,0 +1,17 @@
+<html>
+ <head>
+ <title>setTimeout and setInterval</title>
+ <script>
+ var counter = 0;
+ var interval_handle = setInterval(function() {
+ console.log("Called back ", counter, " times");
+ counter = counter + 1;
+ }, 100);
+ setTimeout(function() {clearInterval(interval_handle);}, 10000);
+ </script>
+ </head>
+ <body>
+ Check the log, it should be printing a callback indicator for ten
+ seconds and then stop.
+ </body>
+</html>
diff --git a/test/js/sleepy-async.html b/test/js/sleepy-async.html
new file mode 100644
index 000000000..b94997f05
--- /dev/null
+++ b/test/js/sleepy-async.html
@@ -0,0 +1,13 @@
+<html>
+ <head>
+ <title>
+ Async sleepy script
+ </title>
+ </head>
+ <body>
+ This page is loading a sleepy async script.
+
+ Do not expect it to do anything useful.
+ <script src="https://test.netsurf-browser.org/cgi-bin/sleep.cgi" type="text/javascript" async></script>
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-06-09 01:19:23 +0000