RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 23:47:45 +00:00
Code Issues Activity Actions

LibWeb: Add basic HTML meter element support

Browse source
This commit is contained in:
Bastiaan van der Plaat 2023-11-25 14:32:40 +01:00 • committed by Sam Atkins
parent 761d824b72
commit 2107ab823d
13 changed files with 442 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

61
Base/res/html/misc/meter.html Normal file
View file

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meter showcase</title>
<style>
meter {
width: 50%;
}
</style>
</head>
<body>
<p>
<button onclick="randomize()">Randomize meters</button>
</p>
<p>Basic meters:</p>
<p>
<meter value="0.5">0.5%<br>50%<br>that is a half</meter>
</p>
<p>
<meter value="4" max="10">4/10</meter>
</p>
<p>
<meter min="1" value="3" max="10">grade 3</meter>
</p>
<p>Meters with values outside <code>low</code> and <code>high</code></p>
<p>
<meter low="4" value="1" max="10"></meter>
</p>
<p>
<meter low="4" high="6" value="9" max="10"></meter>
</p>
<p>Meters with values outside <code>optimum</code></p>
<p>
<meter low="4" high="6" value="9" max="10" optimum="1"></meter>
</p>
<p>Meters with values outside <code>min</code> and <code>max</code></p>
<p>
<meter low="4" value="1" high="5" min="3" max="10" optimum="10"></meter>
</p>
<p>
<meter low="4" value="3" high="5" min="1" max="2" optimum="10"></meter>
</p>
<script>
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randomize() {
for (const meter of Array.from(document.querySelectorAll('meter'))) {
meter.value = rand(meter.min * 10, meter.max * 10) / 10;
}
}
</script>
</body>
</html>