<!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>
