variable-reference-visited-ref.html

Enable keyboard shortcuts

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

<style>

    div {

        min-height: 10px;

        margin-bottom: 10px;

    .color { color: green; }

    .background_color { background-color: green; }

    .border { border: medium solid green; }

    .outline { outline: medium solid green; }

    .text_decoration { text-decoration: solid underline green; }

    .column_rule { columns: 2; column-rule: medium solid green; }

    .stroke { stroke: green; fill: white; }

    .fill { fill: green; }

</style>

<a href="">

    <div class="color">Text should be green</div>

    <div class="background_color"></div>

    <div class="border"></div>

    <div class="border"></div>

    <div class="border"></div>

    <div class="border"></div>

    <div class="outline"></div>

    <div class="outline"></div>

    <div class="text_decoration">Underline should be green</div>

    <div class="text_decoration">Underline should be green</div>

    <div class="column_rule"><div style="height: 20px"></div></div>

    <div class="column_rule"><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>