mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-24 13:35:12 +00:00
Base: Add test page for progress bar element
This commit is contained in:
parent
21e353980f
commit
d159511d85
Notes:
sideshowbarker
2024-07-17 18:42:00 +09:00
Author: https://github.com/Sauler Commit: https://github.com/SerenityOS/serenity/commit/d159511d85 Pull-request: https://github.com/SerenityOS/serenity/pull/12366 Reviewed-by: https://github.com/drunderscore Reviewed-by: https://github.com/linusg Reviewed-by: https://github.com/trflynn89 ✅
2 changed files with 57 additions and 0 deletions
56
Base/res/html/misc/progressbar.html
Normal file
56
Base/res/html/misc/progressbar.html
Normal file
|
@ -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>
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue