From d159511d8505947f31214b6c9fed08bb6c45983f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Babiarz?=
 <5783815+Sauler@users.noreply.github.com>
Date: Wed, 16 Feb 2022 19:14:14 +0100
Subject: [PATCH] Base: Add test page for progress bar element

---
 Base/res/html/misc/progressbar.html | 56 +++++++++++++++++++++++++++++
 Base/res/html/misc/welcome.html     |  1 +
 2 files changed, 57 insertions(+)
 create mode 100644 Base/res/html/misc/progressbar.html
diff --git a/Base/res/html/misc/progressbar.html b/Base/res/html/misc/progressbar.html
new file mode 100644
index 0000000000..1eb8c0234f
--- /dev/null
+++ b/Base/res/html/misc/progressbar.html
@@ -0,0 +1,56 @@
+<html>
+
+<body bgcolor="#408080" text="#ffffff">
+    <input type=button id=button1 value="Set 0%">
+    <br />
+
+    <input type=button id=button2 value="Set 25%">
+    <br />
+
+    <input type=button id=button3 value="Set 50%">
+    <br />
+
+    <input type=button id=button4 value="Set 75%">
+    <br />
+
+    <input type=button id=button5 value="Set 100%">
+    <br />
+
+    <progress id="progress" value="25" max="100"></progress>
+    <div style="display: inline-block;">
+        <pre>Progress bar position: <span id=pos></span></pre>
+    </div>
+
+
+    <script>
+        var progressBar = document.getElementById('progress');
+        document.getElementById('pos').innerHTML = progressBar.position;
+
+        document.getElementById('button1').addEventListener('click', function () {
+            progressBar.value = 0;
+            document.getElementById('pos').innerHTML = progressBar.position;
+        });
+
+        document.getElementById('button2').addEventListener('click', function () {
+            progressBar.value = 25;
+            document.getElementById('pos').innerHTML = progressBar.position;
+        });
+
+        document.getElementById('button3').addEventListener('click', function () {
+            progressBar.value = 50;
+            document.getElementById('pos').innerHTML = progressBar.position;
+        });
+
+        document.getElementById('button4').addEventListener('click', function () {
+            progressBar.value = 75;
+            document.getElementById('pos').innerHTML = progressBar.position;
+        });
+
+        document.getElementById('button5').addEventListener('click', function () {
+            progressBar.value = 100;
+            document.getElementById('pos').innerHTML = progressBar.position;
+        });
+    </script>
+</body>
+
+</html>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 2c531a9ee0..4699e3a58a 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -71,6 +71,7 @@
             <li><a href="afrag.html">links with fragments</a></li>
             <li><a href="blink.html">blink</a></li>
             <li><a href="br.html">br</a></li>
+            <li><a href="progressbar.html">progressbar</a></li>
         </ul>
 
         <h2>CSS</h2>
