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