diff options
| author | MacDue <macdue@dueutil.tech> | 2022-07-12 00:39:17 +0100 |
|---|---|---|
| committer | Sam Atkins <atkinssj@gmail.com> | 2022-07-17 20:11:38 +0100 |
| commit | 452dc544bcbdf839d0db8cc2a7fb8f27bd4963f5 (patch) | |
| tree | fcf7f24140cd9e0432d3be7a4f3431a4d4da7b74 /Base | |
| parent | eef148f7e73020cc10205170165ad1435088c67d (diff) | |
| download | serenity-452dc544bcbdf839d0db8cc2a7fb8f27bd4963f5.zip | |
Base: Add simple gradients test page
Diffstat (limited to 'Base')
| -rw-r--r-- | Base/res/html/misc/gradients.html | 69 | ||||
| -rw-r--r-- | Base/res/html/misc/welcome.html | 1 |
2 files changed, 70 insertions, 0 deletions
diff --git a/Base/res/html/misc/gradients.html b/Base/res/html/misc/gradients.html new file mode 100644 index 0000000000..e6a9806348 --- /dev/null +++ b/Base/res/html/misc/gradients.html @@ -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> diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index e1aafcd06f..a375e89282 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.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> |