mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
a232395b77
Previously, `var()` inside functions like `rgb()` wasn't resolved. This will set the background color for badges in the New category on https://ports.serenityos.net. :^)
253 lines
6.3 KiB
HTML
253 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Custom Properties</title>
|
|
<style>
|
|
:root {
|
|
--my-color: purple;
|
|
--width: 10px;
|
|
--color: orange;
|
|
--style: solid;
|
|
--border: var(--width) var(--color) var(--style);
|
|
--background-color: yellow;
|
|
--background-position: top 10px right 5px;
|
|
}
|
|
|
|
div {
|
|
margin: 20px;
|
|
}
|
|
|
|
.test {
|
|
background-color: var(--my-color);
|
|
}
|
|
|
|
.test-parent {
|
|
--my-color: pink;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.box {
|
|
width: 150px;
|
|
height: 150px;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.test-fallback {
|
|
background-color: var(--fallback, lime);
|
|
}
|
|
|
|
.test-fallback.with {
|
|
--fallback: cyan;
|
|
}
|
|
|
|
.test-nested {
|
|
border: var(--border);
|
|
}
|
|
|
|
.test-inside-a-function {
|
|
--blue: 255;
|
|
background-color: rgb(255, 0, var(--blue));
|
|
}
|
|
|
|
.test-mixed {
|
|
background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat;
|
|
}
|
|
|
|
.billion-laughs {
|
|
--prop1: lol;
|
|
--prop2: var(--prop1) var(--prop1);
|
|
--prop3: var(--prop2) var(--prop2);
|
|
--prop4: var(--prop3) var(--prop3);
|
|
--prop5: var(--prop4) var(--prop4);
|
|
--prop6: var(--prop5) var(--prop5);
|
|
--prop7: var(--prop6) var(--prop6);
|
|
--prop8: var(--prop7) var(--prop7);
|
|
--prop9: var(--prop8) var(--prop8);
|
|
--prop10: var(--prop9) var(--prop9);
|
|
--prop11: var(--prop10) var(--prop10);
|
|
--prop12: var(--prop11) var(--prop11);
|
|
--prop13: var(--prop12) var(--prop12);
|
|
--prop14: var(--prop13) var(--prop13);
|
|
--prop15: var(--prop14) var(--prop14);
|
|
--prop16: var(--prop15) var(--prop15);
|
|
--prop17: var(--prop16) var(--prop16);
|
|
--prop18: var(--prop17) var(--prop17);
|
|
--prop19: var(--prop18) var(--prop18);
|
|
--prop20: var(--prop19) var(--prop19);
|
|
--prop21: var(--prop20) var(--prop20);
|
|
--prop22: var(--prop21) var(--prop21);
|
|
--prop23: var(--prop22) var(--prop22);
|
|
--prop24: var(--prop23) var(--prop23);
|
|
--prop25: var(--prop24) var(--prop24);
|
|
--prop26: var(--prop25) var(--prop25);
|
|
--prop27: var(--prop26) var(--prop26);
|
|
--prop28: var(--prop27) var(--prop27);
|
|
--prop29: var(--prop28) var(--prop28);
|
|
--prop30: var(--prop29) var(--prop29);
|
|
|
|
background: var(--prop30);
|
|
}
|
|
|
|
.dependency-cycle {
|
|
--recursive: var(--recursive);
|
|
|
|
--a: var(--b);
|
|
--b: var(--a);
|
|
|
|
background: var(--a);
|
|
color: var(--recursive);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>CSS Custom Properties</h1>
|
|
<pre>
|
|
:root {
|
|
--my-color: purple;
|
|
}
|
|
|
|
.test {
|
|
background-color: var(--my-color);
|
|
}
|
|
|
|
.test-parent {
|
|
--my-color: pink;
|
|
}
|
|
|
|
</pre>
|
|
<div class="box test">
|
|
<pre>
|
|
.test
|
|
</pre>
|
|
This should be purple
|
|
</div>
|
|
|
|
<div class="test-parent">
|
|
<pre>
|
|
.test-parent
|
|
</pre>
|
|
<div class="box test">
|
|
<pre>
|
|
.test
|
|
</pre>
|
|
This should be pink
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Fallback Values</h2>
|
|
<pre>
|
|
.test-fallback {
|
|
background-color: var(--fallback, lime);
|
|
}
|
|
|
|
.test-fallback.with {
|
|
--fallback: cyan;
|
|
}
|
|
</pre>
|
|
|
|
<div class="box test-fallback">
|
|
<pre>.test-fallback</pre>
|
|
This should be green
|
|
</div>
|
|
|
|
<div class="box test-fallback with">
|
|
<pre>.test-fallback.with</pre>
|
|
This should be cyan
|
|
</div>
|
|
|
|
<h2>Inline properties</h2>
|
|
<pre>
|
|
<div style="--color: turquoise; background-color: var(--color)">
|
|
</pre>
|
|
<div class="box" style="--color: turquoise; background-color: var(--color)">
|
|
This should be turquoise
|
|
</div>
|
|
|
|
<h2>Nested var()</h2>
|
|
<pre>
|
|
:root {
|
|
--width: 10px;
|
|
--color: orange;
|
|
--style: solid;
|
|
--border: var(--width) var(--color) var(--style);
|
|
}
|
|
.test-nested {
|
|
border: var(--border);
|
|
}
|
|
</pre>
|
|
|
|
<div class="box test-nested">
|
|
<pre>.test-nested</pre>
|
|
This should have a 10px solid orange border
|
|
</div>
|
|
|
|
<pre>
|
|
.test-inside-a-function {
|
|
--blue: 255;
|
|
background-color: rgb(255, 0, var(--blue));
|
|
}
|
|
</pre>
|
|
|
|
<div class="box test-inside-a-function">
|
|
<pre>.test-inside-a-function</pre>
|
|
This should be fuchsia
|
|
</div>
|
|
|
|
<h2>Mixed var()</h2>
|
|
<pre>
|
|
:root {
|
|
--background-color: yellow;
|
|
--background-position: top 10px right 5px;
|
|
}
|
|
|
|
.test-mixed {
|
|
background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat;
|
|
}
|
|
</pre>
|
|
|
|
<div class="box test-mixed">
|
|
<pre>.test-mixed</pre>
|
|
This should have a yellow background with a smiley face in the top-right corner
|
|
</div>
|
|
|
|
<h2>Billion laughs attack</h2>
|
|
<pre>
|
|
.billion-laughs {
|
|
--prop1: lol;
|
|
--prop2: var(--prop1) var(--prop1);
|
|
--prop3: var(--prop2) var(--prop2);
|
|
|
|
/* ... */
|
|
|
|
--prop30: var(--prop29) var(--prop29);
|
|
|
|
background: var(--prop30);
|
|
}
|
|
</pre>
|
|
<div class="box billion-laughs">
|
|
<pre>.billion-laughs</pre>
|
|
This box tests that we handle the billion laughs attack. If we don't crash, it worked!
|
|
</div>
|
|
|
|
<h2>Dependency cycles</h2>
|
|
<pre>
|
|
.dependency-cycle {
|
|
--recursive: var(--recursive);
|
|
|
|
--a: var(--b);
|
|
--b: var(--a);
|
|
|
|
background: var(--a);
|
|
color: var(--recursive);
|
|
}
|
|
</pre>
|
|
<div class="box dependency-cycle">
|
|
<pre>.dependency-cycle</pre>
|
|
This box tests that we handle dependency cycles correctly. If we don't crash, it worked!
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|