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

Base: Add some more fun gradient demos

Browse source 
Adds tests for:
- Multi-stop gradient at arbitrary angles (CPU brr)
- Default/calculated color stops
- to <corner>
- Pre-multiplied alpha mixing
This commit is contained in:
MacDue 2022-07-17 19:54:34 +01:00 • committed by Linus Groh
parent 0c521381a3
commit 4978f388c2
1 changed files with 104 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

114
Base/res/html/misc/gradients.html
View file

@ -4,11 +4,19 @@
<meta charset="UTF-8">
<title>Gradients</title>
<style>
div {
border: 1px solid black;
margin: 20px;
}
.box {
width: 200px;
height: 200px;
margin: 20px;
border: 1px solid black;
}
.rect {
width: 400px;
height: 225px;
}
.grad-0 {
@ -40,30 +48,116 @@
.grad-6 {
background-image: linear-gradient(to top, blue 30%, 30%, orange 20%, 10%, red);
}
.grad-7 {
width: 400px;
height: 225px;
background-image: linear-gradient(to right, red 0%, black 20%, yellow 60%, cyan 100%);
}
.grad-8 {
background-image: linear-gradient(
to right,
red,
#f06d06,
rgb(255, 255, 0),
green
);
}
.grad-9 {
background: linear-gradient(135deg, #333 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #333 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #333 25%, transparent 25%),
linear-gradient(45deg, #333 25%, transparent 25%);
}
.grad-10 {
background-image: linear-gradient(90deg, red, transparent, blue);
}
.grad-11 {
background-image: linear-gradient(to top right, indigo, white, deeppink);
}
.grad-12 {
background-image: linear-gradient(to top left, indigo, white, deeppink);
}
.grad-13 {
background-image: linear-gradient(to bottom left, indigo, white, deeppink);
}
.grad-14 {
background-image: linear-gradient(to bottom right, indigo, white, deeppink);
}
</style>
</head>
<body>
<h1>Gradients!</h1>
<b>Simple gradients:</b><br/>
<div class="box grad-0"></div>
<div class="box grad-1"></div>
<div class="box grad-2"></div>
<div class="box grad-3"></div>
<div class="box grad-4"></div>
<b>Funky color hints:</b><br>
<div class="box grad-5"></div>
<div class="box grad-6"></div>
<b>Multiple color stops + arbitrary angles (click to spin!):</b><br>
<div id="gradient-spin" class="rect grad-7"></div>
<b>Default color stops:</b><br>
<div class="box grad-8"></div>
<div class="box grad-9"></div>
<b>Pre-multiplied alpha mixing test:</b><br>
<div class="box grad-10"></div>
<b>To corner:</b><br>
<div class="rect grad-11"></div>
<div class="rect grad-12"></div>
<div class="rect grad-13"></div>
<div class="rect grad-14"></div>
</body>
<script>
const boxes = document.querySelectorAll(".box");
const boxes = document.querySelectorAll(".box, .rect");
const backgroundMap = {};
for (const rule of document.styleSheets[0].cssRules) {
backgroundMap[rule.selectorText] = rule.style.backgroundImage;
}
boxes.forEach(box => {
const grad = box.classList[1];
console.log(grad)
const el = document.createElement('code');
el.innerText = backgroundMap['.'+grad];
box.parentNode.insertBefore(el, box)
})
// Extract backgroundImage CSS and place above each box
updateLabels = () => {
boxes.forEach(box => {
const grad = box.classList[1];
const cssText = backgroundMap['.'+grad];
let el = document.getElementById(grad);
let newEl = document.createElement('code');
let text = document.createTextNode(box.style.backgroundImage || cssText);
newEl.appendChild(text);
newEl.id = grad;
if (!el)
box.parentNode.insertBefore(newEl, box)
else
box.parentNode.replaceChild(newEl, el);
})
}
// Spinning gradient demo/test
let angle = 0;
let spinIntervalId = -1;
const gradientSpin = document.getElementById("gradient-spin");
gradientSpin.onclick = () => {
if (spinIntervalId <= -1) {
spinIntervalId = setInterval(() => {
gradientSpin.style.backgroundImage = `linear-gradient(${angle}deg, red 0%, black 20%, yellow 60%, cyan 100%)`;
angle += 1;
updateLabels();
}, 100)
} else {
clearInterval(spinIntervalId);
spinIntervalId = -1;
}
}
updateLabels();
</script>
</html>