variable-reference-visited.html (2985B)
1 <!DOCTYPE html> 2 <title>Verify that colors with var() references apply in visited link context</title> 3 <link rel="help" href="https://drafts.csswg.org/css-variables/#using-variables"> 4 <link rel="match" href="variable-reference-visited-ref.html"> 5 <style> 6 :root { --color: green; } 7 8 div { 9 min-height: 10px; 10 margin-bottom: 10px; 11 } 12 13 .color { 14 color: var(--color); 15 } 16 .background_color { 17 background-color: var(--color); 18 } 19 .border_color_longhand{ 20 border-style: solid; 21 border-width: medium; 22 border-left-color: var(--color); 23 border-top-color: var(--color); 24 border-right-color: var(--color); 25 border-bottom-color: var(--color); 26 } 27 .border_shorthand { 28 border: medium solid var(--color); 29 } 30 .border_color_longhand_logical { 31 border-style: solid; 32 border-width: medium; 33 border-inline-start-color: var(--color); 34 border-inline-end-color: var(--color); 35 border-block-start-color: var(--color); 36 border-block-end-color: var(--color); 37 } 38 .border_shorthand_logical { 39 border-inline: medium solid var(--color); 40 border-block: medium solid var(--color); 41 } 42 .outline_color_longhand { 43 outline-color: var(--color); 44 outline-style: solid; 45 outline-width: medium; 46 } 47 .outline_shorthand { 48 outline: medium solid var(--color); 49 } 50 .text_decoration_color_longhand { 51 text-decoration-line: underline; 52 text-decoration-style: solid; 53 text-decoration-color: var(--color); 54 } 55 .text_decoration_shorthand { 56 text-decoration: solid underline var(--color); 57 } 58 .column_rule_color_longhand { 59 columns: 2; 60 column-rule-width: medium; 61 column-rule-style: solid; 62 column-rule-color: var(--color); 63 } 64 .column_rule_shorthand { 65 columns: 2; 66 column-rule: medium solid var(--color); 67 } 68 .stroke { 69 stroke: var(--color); 70 fill: white; 71 } 72 .fill { 73 fill: var(--color); 74 } 75 </style> 76 <a href=""> 77 <div class="color">Text should be green</div> 78 <div class="background_color"></div> 79 <div class="border_color_longhand"></div> 80 <div class="border_shorthand"></div> 81 <div class="border_color_longhand_logical"></div> 82 <div class="border_shorthand_logical"></div> 83 <div class="outline_color_longhand"></div> 84 <div class="outline_shorthand"></div> 85 <div class="text_decoration_color_longhand">Underline should be green</div> 86 <div class="text_decoration_shorthand">Underline should be green</div> 87 <div class="column_rule_color_longhand"><div style="height: 20px"></div></div> 88 <div class="column_rule_shorthand"><div style="height: 20px"></div></div> 89 <svg width="20" height="50"> 90 <rect class="stroke" x="5" y="5" width="10" height="10" /> 91 <rect class="fill" x="5" y="20" width="10" height="10" /> 92 </svg> 93 </a>