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