mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 15:42:44 +00:00
dcbfb61816
This one represents one secton of a `background` property, since it can have multiple background values separated by commas. Eventually, we will represent that as a List of BackgroundStyleValues. Also modified some background-foo properties in StyleResolver so that the is_background_x() functions could be removed. I realized that our handling of var() in shorthand properties is wrong, so have been removing the is_builtin_or_dynamic() calls from the parsing code for shorthands. This broke our var() test page, so I have replaced the use of 'background' with 'background-color' there.
68 lines
1.1 KiB
HTML
68 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Custom Properties</title>
|
|
<style>
|
|
:root {
|
|
--my-color: purple;
|
|
}
|
|
|
|
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;
|
|
}
|
|
</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>
|
|
</body>
|
|
|
|
</html>
|