mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-29 16:21:29 +00:00
Base: Add simple gradients test page
This commit is contained in:
parent
eef148f7e7
commit
452dc544bc
Notes:
sideshowbarker
2024-07-17 08:51:36 +09:00
Author: https://github.com/MacDue Commit: https://github.com/SerenityOS/serenity/commit/452dc544bc Pull-request: https://github.com/SerenityOS/serenity/pull/14564 Reviewed-by: https://github.com/AtkinsSJ
69
Base/res/html/misc/gradients.html
Normal file
69
Base/res/html/misc/gradients.html
Normal file
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Gradients</title>
|
||||
<style>
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 20px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.grad-0 {
|
||||
background-image: linear-gradient(to top, red, yellow);
|
||||
}
|
||||
|
||||
.grad-1 {
|
||||
background-image: linear-gradient(to bottom, red, yellow);
|
||||
}
|
||||
|
||||
.grad-2 {
|
||||
background-image: linear-gradient(to left, red, yellow);
|
||||
}
|
||||
|
||||
.grad-3 {
|
||||
background-image: linear-gradient(to right, red, yellow);
|
||||
}
|
||||
|
||||
.grad-4 {
|
||||
background-image: linear-gradient(to top, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
|
||||
linear-gradient(to bottom, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
|
||||
linear-gradient(to left, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
|
||||
}
|
||||
|
||||
.grad-5 {
|
||||
background-image: linear-gradient(to top, blue, 30%, orange, 10%, red);
|
||||
}
|
||||
|
||||
.grad-6 {
|
||||
background-image: linear-gradient(to top, blue 30%, 30%, orange 20%, 10%, red);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Gradients!</h1>
|
||||
<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>
|
||||
<div class="box grad-5"></div>
|
||||
<div class="box grad-6"></div>
|
||||
</body>
|
||||
<script>
|
||||
const boxes = document.querySelectorAll(".box");
|
||||
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)
|
||||
})
|
||||
</script>
|
||||
</html>
|
|
@ -105,6 +105,7 @@
|
|||
<li><a href="hover.html">:hover</a></li>
|
||||
<li><a href="focus.html">:focus</a></li>
|
||||
<li><h3>Properties</h3></li>
|
||||
<li><a href="gradients.html">Gradients</a></li>
|
||||
<li><a href="vertical-align.html">vertical-align</a></li>
|
||||
<li><a href="backgrounds.html">Backgrounds</a></li>
|
||||
<li><a href="background-repeat-test.html">Background-repeat</a></li>
|
||||
|
|
Loading…
Reference in a new issue