mirror of
https://github.com/servo/servo.git
synced 2025-06-24 17:14:33 +01:00
93 lines
2.9 KiB
HTML
93 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<title>Verify that colors with var() references apply in visited link context</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-variables/#using-variables">
|
|
<link rel="match" href="variable-reference-visited-ref.html">
|
|
<style>
|
|
:root { --color: green; }
|
|
|
|
div {
|
|
min-height: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.color {
|
|
color: var(--color);
|
|
}
|
|
.background_color {
|
|
background-color: var(--color);
|
|
}
|
|
.border_color_longhand{
|
|
border-style: solid;
|
|
border-width: medium;
|
|
border-left-color: var(--color);
|
|
border-top-color: var(--color);
|
|
border-right-color: var(--color);
|
|
border-bottom-color: var(--color);
|
|
}
|
|
.border_shorthand {
|
|
border: medium solid var(--color);
|
|
}
|
|
.border_color_longhand_logical {
|
|
border-style: solid;
|
|
border-width: medium;
|
|
border-inline-start-color: var(--color);
|
|
border-inline-end-color: var(--color);
|
|
border-block-start-color: var(--color);
|
|
border-block-end-color: var(--color);
|
|
}
|
|
.border_shorthand_logical {
|
|
border-inline: medium solid var(--color);
|
|
border-block: medium solid var(--color);
|
|
}
|
|
.outline_color_longhand {
|
|
outline-color: var(--color);
|
|
outline-style: solid;
|
|
outline-width: medium;
|
|
}
|
|
.outline_shorthand {
|
|
outline: medium solid var(--color);
|
|
}
|
|
.text_decoration_color_longhand {
|
|
text-decoration-line: underline;
|
|
text-decoration-style: solid;
|
|
text-decoration-color: var(--color);
|
|
}
|
|
.text_decoration_shorthand {
|
|
text-decoration: solid underline var(--color);
|
|
}
|
|
.column_rule_color_longhand {
|
|
columns: 2;
|
|
column-rule-width: medium;
|
|
column-rule-style: solid;
|
|
column-rule-color: var(--color);
|
|
}
|
|
.column_rule_shorthand {
|
|
columns: 2;
|
|
column-rule: medium solid var(--color);
|
|
}
|
|
.stroke {
|
|
stroke: var(--color);
|
|
fill: white;
|
|
}
|
|
.fill {
|
|
fill: var(--color);
|
|
}
|
|
</style>
|
|
<a href="">
|
|
<div class="color">Text should be green</div>
|
|
<div class="background_color"></div>
|
|
<div class="border_color_longhand"></div>
|
|
<div class="border_shorthand"></div>
|
|
<div class="border_color_longhand_logical"></div>
|
|
<div class="border_shorthand_logical"></div>
|
|
<div class="outline_color_longhand"></div>
|
|
<div class="outline_shorthand"></div>
|
|
<div class="text_decoration_color_longhand">Underline should be green</div>
|
|
<div class="text_decoration_shorthand">Underline should be green</div>
|
|
<div class="column_rule_color_longhand"><div style="height: 20px"></div></div>
|
|
<div class="column_rule_shorthand"><div style="height: 20px"></div></div>
|
|
<svg width="20" height="50">
|
|
<rect class="stroke" x="5" y="5" width="10" height="10" />
|
|
<rect class="fill" x="5" y="20" width="10" height="10" />
|
|
</svg>
|
|
</a>
|