logical-box-border-color-visited-link-003.html (1034B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Logical Properties: Flow-Relative Border Colors in Visited Links</title> 4 <style> 5 a { 6 display: inline-block; 7 vertical-align: top; 8 border: 25px solid green; 9 border-top-color: red; 10 border-left-color: red; 11 } 12 #link1:visited, 13 #link2, 14 #link3:visited, 15 #link4 { 16 direction: rtl; 17 } 18 #link1:visited, 19 #link2:visited, 20 #link3, 21 #link4 { 22 writing-mode: vertical-rl; 23 } 24 #link1:visited { 25 border-block-start-color: green; 26 border-inline-start-color: green; 27 } 28 #link2:visited { 29 border-block-start-color: green; 30 border-inline-end-color: green; 31 } 32 #link3:visited { 33 border-inline-start-color: green; 34 border-block-end-color: green; 35 } 36 #link4:visited { 37 border-inline-end-color: green; 38 border-block-end-color: green; 39 } 40 </style> 41 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 42 <a id="link1" href="visited-page.html"></a><a id="link2" href="visited-page.html"></a><br> 43 <a id="link3" href="visited-page.html"></a><a id="link4" href="visited-page.html"></a>